adding extra css identifier for today, tomorrow and another day (#277)

src/cards/trash-card/container/cards.ts

@@ -48,8 +48,9 @@ class Cards extends LitElement implements BaseContainerElement {
 
     return html`
         <div style=${cssStyleMap} class="card-container">
-          ${this.items.map(item => html`
+          ${this.items.map((item, idx) => html`
               <trash-card-item-card
+                key=${`card-${idx}-${item.content.uid}`}
                 .item=${item}
                 .config=${this.config}
                 .hass=${this.hass}

src/cards/trash-card/container/chips.ts

@@ -2,6 +2,7 @@ import { LitElement, css, html, nothing } from 'lit';
 import { defaultHaCardStyle } from '../../../utils/defaultHaCardStyle';
 import { customElement, property, state } from 'lit/decorators.js';
 import { TRASH_CARD_NAME } from '../const';
+import { classMap } from 'lit/directives/class-map.js';
 
 import '../items/chip';
 
@@ -39,22 +40,22 @@ class Chips extends LitElement implements BaseContainerElement {
       return nothing;
     }
 
-    let alignment_class = '';
-
-    if (this.config.alignment_style === 'space') {
-      alignment_class = ' align-justify';
-    }
-    if (this.config.alignment_style === 'center') {
-      alignment_class = ' align-center';
-    }
-    if (this.config.alignment_style === 'right') {
-      alignment_class = ' align-end';
-    }
+    const cssClasses = {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'chip-container': true,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'align-justify': this.config.alignment_style === 'space',
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'align-center': this.config.alignment_style === 'center',
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'align-end': this.config.alignment_style === 'right'
+    };
 
     return html`
-    <div class="chip-container${alignment_class}">
-      ${this.items.map(item => html`
+      <div class=${classMap(cssClasses)}>
+        ${this.items.map((item, idx) => html`
           <trash-card-item-chip
+            key=${`card-${idx}-${item.content.uid}`}
             .item=${item}
             .config=${this.config}
             .hass=${this.hass}

src/cards/trash-card/container/icons.ts

@@ -50,6 +50,7 @@ class Icons extends LitElement implements BaseContainerElement {
         <div style=${cssStyleMap} class="icons-container">
           ${this.items.map((item, idx) => html`
               <trash-card-icon-card
+                key=${`card-${idx}-${item.content.uid}`}
                 .item=${{ ...item, nextEvent: idx === 0 }}
                 .config=${this.config}
                 .hass=${this.hass}

src/cards/trash-card/items/card.ts

@@ -7,6 +7,8 @@ import { TRASH_CARD_NAME } from '../const';
 import { defaultHaCardStyle } from '../../../utils/defaultHaCardStyle';
 import { getColoredStyle } from '../../../utils/getColoredStyle';
 import { BaseItemElement } from './BaseItemElement';
+import { daysTill } from '../../../utils/daysTill';
+import { classMap } from 'lit/directives/class-map.js';
 
 @customElement(`${TRASH_CARD_NAME}-item-card`)
 class ItemCard extends BaseItemElement {
@@ -30,12 +32,20 @@ class ItemCard extends BaseItemElement {
 
     const secondary = getDateString(item, hide_time_range ?? false, day_style, day_style_format, this.hass);
 
+    const daysTillToday = daysTill(new Date(), item);
+
+    const cssClasses = {
+      today: daysTillToday === 0,
+      tomorrow: daysTillToday === 1,
+      another: daysTillToday > 1
+    };
+
     const pictureUrl = this.getPictureUrl();
 
     this.withBackground = true;
 
     return html`
-      <ha-card style=${styleMap(style)}>
+      <ha-card style=${styleMap(style)} class=${classMap(cssClasses)}>
         <mushroom-card .appearance=${{ layout }} ?rtl=${rtl}>
           <mushroom-state-item .appearance=${{ layout }} ?rtl=${rtl}>
             <div slot="icon">

src/cards/trash-card/items/chip.ts

@@ -6,6 +6,8 @@ import { customElement } from 'lit/decorators.js';
 import { TRASH_CARD_NAME } from '../const';
 import { getColoredStyle } from '../../../utils/getColoredStyle';
 import { BaseItemElement } from './BaseItemElement';
+import { classMap } from 'lit/directives/class-map.js';
+import { daysTill } from '../../../utils/daysTill';
 
 @customElement(`${TRASH_CARD_NAME}-item-chip`)
 class ItemChip extends BaseItemElement {
@@ -29,13 +31,22 @@ class ItemChip extends BaseItemElement {
 
     const content = getDateString(item, hide_time_range ?? false, day_style, day_style_format, this.hass);
 
+    const daysTillToday = daysTill(new Date(), item);
+
+    const cssClasses = {
+      today: daysTillToday === 0,
+      tomorrow: daysTillToday === 1,
+      another: daysTillToday > 1
+    };
+
     const pictureUrl = this.getPictureUrl();
 
     this.withBackground = true;
 
     return html`
       <mushroom-chip
         style=${styleMap(style)}
+        class=${classMap(cssClasses)}
         ?rtl=${rtl}
         .avatarOnly=${false}
       >

src/cards/trash-card/items/icon.ts

@@ -27,27 +27,30 @@ class IconCard extends BaseItemElement<{ nextEvent: boolean }> {
       '--trash-card-icon-size': `${this.config.icon_size ?? 40}px`
     };
 
-    const cssClass = {
+    const daysTillToday = daysTill(new Date(), item);
+
+    const cssClasses = {
+      today: daysTillToday === 0,
+      tomorrow: daysTillToday === 1,
+      another: daysTillToday > 1,
       nextEvent: this.item.nextEvent,
       futureEvent: !this.item.nextEvent
     };
 
-    const daysLeft = daysTill(new Date(), item);
-
     const pictureUrl = this.getPictureUrl();
 
     this.withBackground = true;
 
     return html`
-      <ha-card style=${styleMap(style)} class=${classMap(cssClass)}>
+      <ha-card style=${styleMap(style)} class=${classMap(cssClasses)}>
         <mushroom-card .appearance=${{ layout: 'vertical' }} ?rtl=${rtl}>
           <mushroom-state-item .appearance=${{ layout: 'vertical' }} ?rtl=${rtl}>
             <div slot="icon">
               ${pictureUrl ? this.renderPicture(pictureUrl) : this.renderIcon()}
             </div>
           </mushroom-state-item>
         </mushroom-card>
-        <span class="badge" >${daysLeft}</span>
+        <span class="badge" >${daysTillToday}</span>
       </ha-card>
     `;
   }

src/utils/getDateString.ts

@@ -27,6 +27,18 @@ const format = (date: Date, dateStyleFormat: string) => {
   return dateStyleFormat.replace(/(y+)/gu, val => date.getFullYear().toString().slice(-val.length));
 };
 
+const getTimeString = (customLocalize, offset: string, day?: string, startTime?: string, endTime?: string, excludeTime?: boolean, short?: boolean) => {
+  if (offset === 'today' || offset === 'tomorrow') {
+    const key = `card.trash.${offset}${startTime && !excludeTime ? '_from_till' : ''}${startTime && !excludeTime && short ? '_short' : ''}`;
+
+    return `${customLocalize(`${key}`).replace('<START>', startTime ?? '').replace('<END>', endTime ?? '')}`;
+  }
+
+  const key = `card.trash.day${startTime && !excludeTime ? '_from_till' : ''}${startTime && !excludeTime && short ? '_short' : ''}`;
+
+  return customLocalize(`${key}`).replace('<DAY>', day).replace('<START>', startTime ?? '').replace('<END>', endTime ?? '');
+};
+
 const getDateString = (
   item: CalendarItem,
   excludeTime?: boolean,
@@ -65,9 +77,7 @@ const getDateString = (
     undefined;
 
   if (stateDay === todayDay || stateDay === tomorrowDay) {
-    const key = `card.trash.${stateDay === todayDay ? 'today' : 'tomorrow'}${startTime && !excludeTime ? '_from_till' : ''}`;
-
-    return `${customLocalize(`${key}`).replace('<START>', startTime ?? '').replace('<END>', endTime ?? '')}`;
+    return getTimeString(customLocalize, stateDay === todayDay ? 'today' : 'tomorrow', undefined, startTime, endTime, excludeTime, true);
   }
 
   if (dayStyle === 'counter') {
@@ -84,9 +94,7 @@ const getDateString = (
     }) :
     format(item.date.start, dayStyleFormat ?? 'dd.mm.YYYY');
 
-  const key = `card.trash.day${startTime && !excludeTime ? '_from_till' : ''}`;
-
-  return customLocalize(`${key}`).replace('<DAY>', day).replace('<START>', startTime ?? '').replace('<END>', endTime ?? '');
+  return getTimeString(customLocalize, 'day', day, startTime, endTime, excludeTime, true);
 };
 
 export {