refactoring components etc into smaller one (#226)

* split components into smaller one

* French translationen, correct counter's key value (#225)

The key was also translated.

* more cleanups

* 1.4.7

* chore: bump eslint from 8.56.0 to 8.57.0 (#228)

* chore: bump @fltri/eslint-config from 1.2.3 to 1.2.4 (#229)

* optimise color calculations

* cards same size

* fix hungarian translations typo (#230)

---------

Co-authored-by: Max Y <44422604+maxyvon@users.noreply.github.com>

package.json

@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.23.9",
-    "@fltri/eslint-config": "1.2.3",
+    "@fltri/eslint-config": "1.2.4",
     "@material/mwc-ripple": "0.27.0",
     "@material/tab-bar": "14.0.0",
     "@rollup/plugin-babel": "6.0.4",
@@ -62,7 +62,7 @@
     "@types/hammerjs": "2.0.45",
     "@types/jest": "29.5.12",
     "@typescript-eslint/parser": "5.62.0",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
     "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jest": "27.9.0",

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

@@ -0,0 +1,72 @@
+import { LitElement, css, html, nothing } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { customElement, state } from 'lit/decorators.js';
+import { TRASH_CARD_NAME } from '../const';
+
+import '../items/card';
+
+import type { TrashCardConfig } from '../trash-card-config';
+import type { HassEntity } from 'home-assistant-js-websocket';
+import type { CalendarItem } from '../../../utils/calendarItem';
+import type { HomeAssistant } from '../../../utils/ha';
+
+@customElement(`${TRASH_CARD_NAME}-cards-container`)
+class Cards extends LitElement {
+  @state() private readonly items?: CalendarItem[];
+
+  @state() private readonly hass?: HomeAssistant;
+
+  @state() private readonly config?: TrashCardConfig;
+
+  public render () {
+    if (!this.config || !this.hass || !this.config.entity) {
+      return nothing;
+    }
+
+    const entityId = this.config.entity;
+    const stateObj = this.hass.states[entityId] as HassEntity | undefined;
+
+    if (!stateObj || !this.items || this.items.length === 0) {
+      return nothing;
+    }
+
+    const itemsPerRow = this.config.items_per_row ?? 1;
+
+    const cssStyleMap = styleMap({
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'grid-template-columns': `repeat(${itemsPerRow}, calc(calc(100% - ${(itemsPerRow - 1) * 5}px) / ${itemsPerRow}))`
+    });
+
+    return html`
+        <div style=${cssStyleMap} class="card-container">
+          ${this.items.map(item => html`
+              <trash-card-item-card
+                .item=${item}
+                .config=${this.config}
+                .hass=${this.hass}
+              >
+              </trash-card-item-card>
+            `)}
+        </div>
+      `;
+  }
+
+  public static get styles () {
+    return [
+      css`
+        .card-container {
+          display: grid;
+          grid-auto-rows: 1fr;
+          grid-gap: var(--grid-card-gap, 2px);
+        }
+        trash-card-item-card {
+          grid-row: auto / span 1;
+        }
+      `
+    ];
+  }
+}
+
+export {
+  Cards
+};

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

@@ -0,0 +1,85 @@
+import { LitElement, css, html, nothing } from 'lit';
+import { defaultHaCardStyle } from '../../../utils/defaultHaCardStyle';
+import { customElement, state } from 'lit/decorators.js';
+import { TRASH_CARD_NAME } from '../const';
+
+import '../items/chip';
+
+import type { HomeAssistant } from '../../../utils/ha';
+import type { TrashCardConfig } from '../trash-card-config';
+import type { HassEntity } from 'home-assistant-js-websocket';
+import type { CalendarItem } from '../../../utils/calendarItem';
+
+@customElement(`${TRASH_CARD_NAME}-chips-container`)
+class Chips extends LitElement {
+  @state() private readonly items?: CalendarItem[];
+
+  @state() private readonly hass?: HomeAssistant;
+
+  @state() private readonly config?: TrashCardConfig;
+
+  public render () {
+    if (!this.config || !this.hass || !this.config.entity) {
+      return nothing;
+    }
+
+    const entityId = this.config.entity;
+    const stateObj = this.hass.states[entityId] as HassEntity | undefined;
+
+    if (!stateObj || !this.items || this.items.length === 0) {
+      return nothing;
+    }
+
+    return html`
+    <div class="chip-container">
+      ${this.items.map(item => html`
+          <trash-card-item-chip
+            .item=${item}
+            .config=${this.config}
+            .hass=${this.hass}
+          >
+          </trash-card-item-card>
+        `)}
+    </div>
+  `;
+  }
+
+  public static get styles () {
+    return [
+      defaultHaCardStyle,
+      css`
+        .chip-container {
+            display: flex;
+            flex-direction: row;
+            align-items: flex-start;
+            justify-content: flex-start;
+            flex-wrap: wrap;
+            margin-bottom: calc(-1 * var(--chip-spacing));
+        }
+        .chip-container.align-end {
+            justify-content: flex-end;
+        }
+        .chip-container.align-center {
+            justify-content: center;
+        }
+        .chip-container.align-justify {
+            justify-content: space-between;
+        }
+        .chip-container * {
+            margin-bottom: var(--chip-spacing);
+        }
+        .chip-container *:not(:last-child) {
+            margin-right: var(--chip-spacing);
+        }
+        .chip-container[rtl] *:not(:last-child) {
+            margin-right: initial;
+            margin-left: var(--chip-spacing);
+        }
+      `
+    ];
+  }
+}
+
+export {
+  Chips
+};

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

@@ -0,0 +1,69 @@
+import { LitElement, css, html, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { TRASH_CARD_NAME } from '../const';
+import { defaultHaCardStyle } from '../../../utils/defaultHaCardStyle';
+
+import '../elements/title';
+import '../items/logrow';
+
+import type { Debugger } from '../../../utils/debugger';
+
+@customElement(`${TRASH_CARD_NAME}-debug-container`)
+class Debug extends LitElement {
+  @state() private readonly debugger?: Debugger;
+
+  protected copyDebugLogToClipboard (ev: CustomEvent): void {
+    ev.stopPropagation();
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    navigator.clipboard.writeText(JSON.stringify(this.debugger?.getLogs() ?? {})).
+      then(() => {
+        // eslint-disable-next-line no-alert
+        alert('Debug data copied to clipboard');
+      });
+  }
+
+  public render () {
+    if (!this.debugger) {
+      return nothing;
+    }
+
+    return html`<ha-card class="debug-container">
+        <trash-card-title>
+          <span slot="title">DEBUG LOG</span>
+          <ha-icon-button
+            .label="copy debug log to clipboard"
+            class="copy-to-clipboard-icon"
+            slot="title-icon"
+            @click=${this.copyDebugLogToClipboard.bind(this)}
+          >
+            <ha-icon icon="mdi:content-copy"></ha-icon>
+          </ha-icon-button>
+        </trash-card-title>
+
+        <div class="content">
+          ${this.debugger.getLogs().map(item => html`
+            <trash-card-logrow
+              .item=${item}
+            ></trash-card-logrow>
+            `)}
+        </div>
+    </ha-card>`;
+  }
+
+  public static get styles () {
+    return [
+      defaultHaCardStyle,
+      css`
+        .debug-container {
+          margin-bottom: 5px;
+          border: rgb(var(--rgb-pink)) dotted 1px;
+          opacity: 0.7;
+        }
+      `
+    ];
+  }
+}
+
+export {
+  Debug
+};

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

@@ -0,0 +1,3 @@
+import './cards';
+import './chips';
+import './debug';