@maggioli-design-system/mds-table-row 4.8.1 → 5.0.0

package/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-12-05T15:33:30",
+  "timestamp": "2024-12-19T14:37:09",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.22.2",
@@ -22,13 +22,13 @@
       "props": [
         {
           "name": "interactive",
-          "type": "boolean",
+          "type": "boolean | undefined",
           "complexType": {
             "original": "boolean",
-            "resolved": "boolean",
+            "resolved": "boolean | undefined",
             "references": {}
           },
-          "mutable": true,
+          "mutable": false,
           "attr": "interactive",
           "reflectToAttr": true,
           "docs": "",
@@ -36,9 +36,12 @@
           "values": [
             {
               "type": "boolean"
+            },
+            {
+              "type": "undefined"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -49,7 +52,7 @@
             "resolved": "boolean",
             "references": {}
           },
-          "mutable": true,
+          "mutable": false,
           "attr": "overlay-actions",
           "reflectToAttr": true,
           "docs": "",
@@ -61,18 +64,110 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "selectable",
+          "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "selectable",
+          "reflectToAttr": true,
+          "docs": "",
+          "docsTags": [],
+          "default": "undefined",
+          "values": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "selected",
+          "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "selected",
+          "reflectToAttr": true,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "value",
+          "type": "number | string | undefined",
+          "complexType": {
+            "original": "string | number",
+            "resolved": "number | string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "value",
+          "reflectToAttr": true,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
         }
       ],
-      "methods": [],
-      "events": [],
-      "listeners": [
+      "methods": [
         {
-          "event": "mdsTableInteractiveChange",
-          "target": "document",
-          "capture": false,
-          "passive": false
+          "name": "updateLang",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "updateLang() => Promise<void>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
         }
       ],
+      "events": [],
+      "listeners": [],
       "styles": [],
       "slots": [
         {
@@ -83,11 +178,17 @@
       "parts": [],
       "dependents": [],
       "dependencies": [
-        "mds-table-cell"
+        "mds-table-cell",
+        "mds-input-switch"
       ],
       "dependencyGraph": {
         "mds-table-row": [
-          "mds-table-cell"
+          "mds-table-cell",
+          "mds-input-switch"
+        ],
+        "mds-input-switch": [
+          "mds-icon",
+          "mds-text"
         ]
       }
     }
@@ -244,7 +345,7 @@
       "path": "src/components/mds-dropdown/meta/event-detail.ts"
     },
     "src/type/file-types.ts::ExtensionSuffixType": {
-      "declaration": "export type ExtensionSuffixType =\n  | '7z'\n  | 'ace'\n  | 'ai'\n  | 'db'\n  | 'default'\n  | 'dmg'\n  | 'doc'\n  | 'docm'\n  | 'docx'\n  | 'eml'\n  | 'eps'\n  | 'exe'\n  | 'flac'\n  | 'gif'\n  | 'heic'\n  | 'htm'\n  | 'html'\n  | 'jpe'\n  | 'jpeg'\n  | 'jpg'\n  | 'js'\n  | 'json'\n  | 'jsx'\n  | 'm2v'\n  | 'mp2'\n  | 'mp3'\n  | 'mp4'\n  | 'mp4v'\n  | 'mpeg'\n  | 'mpg'\n  | 'mpg4'\n  | 'mpga'\n  | 'odp'\n  | 'ods'\n  | 'odt'\n  | 'pdf'\n  | 'php'\n  | 'png'\n  | 'ppt'\n  | 'rar'\n  | 'rtf'\n  | 'sass'\n  | 'shtml'\n  | 'svg'\n  | 'tar'\n  | 'tiff'\n  | 'ts'\n  | 'txt'\n  | 'wav'\n  | 'webp'\n  | 'xar'\n  | 'xls'\n  | 'xlsx'\n  | 'zip'",
+      "declaration": "export type ExtensionSuffixType =\n  | '7z'\n  | 'ace'\n  | 'ai'\n  | 'db'\n  | 'default'\n  | 'dmg'\n  | 'doc'\n  | 'docm'\n  | 'docx'\n  | 'eml'\n  | 'eps'\n  | 'exe'\n  | 'flac'\n  | 'gif'\n  | 'heic'\n  | 'htm'\n  | 'html'\n  | 'jpe'\n  | 'jpeg'\n  | 'jpg'\n  | 'js'\n  | 'json'\n  | 'jsx'\n  | 'm2v'\n  | 'mp2'\n  | 'mp3'\n  | 'mp4'\n  | 'mp4v'\n  | 'mpeg'\n  | 'mpg'\n  | 'mpg4'\n  | 'mpga'\n  | 'odf'\n  | 'odp'\n  | 'ods'\n  | 'odt'\n  | 'odt'\n  | 'ole'\n  | 'p7m'\n  | 'pdf'\n  | 'php'\n  | 'png'\n  | 'ppt'\n  | 'rar'\n  | 'rtf'\n  | 'sass'\n  | 'shtml'\n  | 'svg'\n  | 'tar'\n  | 'tiff'\n  | 'ts'\n  | 'tsd'\n  | 'txt'\n  | 'wav'\n  | 'webp'\n  | 'xar'\n  | 'xls'\n  | 'xlsx'\n  | 'xml'\n  | 'zip'",
       "docstring": "",
       "path": "src/type/file-types.ts"
     },
@@ -483,11 +584,6 @@
       "docstring": "",
       "path": "src/components/mds-progress/meta/types.ts"
     },
-    "src/type/date.ts::ISO8601Date": {
-      "declaration": "type ISO8601Date = ISO8601DateFormat<string, 'ISO8601Date'>",
-      "docstring": "",
-      "path": "src/type/date.ts"
-    },
     "src/components/mds-push-notification/meta/types.ts::NotificationDateFormatType": {
       "declaration": "string",
       "docstring": "",
@@ -518,6 +614,11 @@
       "docstring": "",
       "path": "src/components/mds-stepper-bar-item/meta/event-detail.ts"
     },
+    "src/type/animation.ts::HorizontalActionsAnimationType": {
+      "declaration": "export type HorizontalActionsAnimationType =\n  | 'fade'\n  | 'slide'",
+      "docstring": "",
+      "path": "src/type/animation.ts"
+    },
     "src/components/mds-tab/meta/event-detail.ts::MdsTabEventDetail": {
       "declaration": "export interface MdsTabEventDetail {\n  id: number\n  value?: string\n}",
       "docstring": "",
@@ -538,6 +639,16 @@
       "docstring": "",
       "path": "src/components/mds-tab-item/meta/event-detail.ts"
     },
+    "src/components/mds-table/meta/event-detail.ts::MdsTableSelectionEventDetail": {
+      "declaration": "export interface MdsTableSelectionEventDetail {\n  rows: MdsTableRowSelection[]\n}",
+      "docstring": "",
+      "path": "src/components/mds-table/meta/event-detail.ts"
+    },
+    "src/components/mds-table/meta/type.ts::MdsTableRowSelection": {
+      "declaration": "{\n  index: number\n  value?: string | number\n}",
+      "docstring": "",
+      "path": "src/components/mds-table/meta/type.ts"
+    },
     "src/components/mds-table-header-cell/meta/types.ts::SortDirectionType": {
       "declaration": "export type SortDirectionType =\n  | 'ascending'\n  | 'descending'\n  | 'none'",
       "docstring": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-table-row",
-  "version": "4.8.1",
+  "version": "5.0.0",
   "description": "mds-table-row is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -23,7 +23,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-table-cell": "4.7.2",
+    "@maggioli-design-system/mds-table-cell": "5.0.0",
     "@maggioli-design-system/styles": "15.5.0",
     "@stencil/core": "4.22.2"
   },

package/readme.md

@@ -9,10 +9,26 @@ This is a web-component from Maggioli Design System [Magma](https://magma.maggio
 
 ## Properties
 
-| Property         | Attribute         | Description | Type      | Default     |
-| ---------------- | ----------------- | ----------- | --------- | ----------- |
-| `interactive`    | `interactive`     |             | `boolean` | `undefined` |
-| `overlayActions` | `overlay-actions` |             | `boolean` | `undefined` |
+| Property         | Attribute         | Description | Type                            | Default     |
+| ---------------- | ----------------- | ----------- | ------------------------------- | ----------- |
+| `interactive`    | `interactive`     |             | `boolean \| undefined`          | `undefined` |
+| `overlayActions` | `overlay-actions` |             | `boolean`                       | `undefined` |
+| `selectable`     | `selectable`      |             | `boolean \| undefined`          | `undefined` |
+| `selected`       | `selected`        |             | `boolean \| undefined`          | `undefined` |
+| `value`          | `value`           |             | `number \| string \| undefined` | `undefined` |
+
+
+## Methods
+
+### `updateLang() => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
 
 
 ## Slots
@@ -27,11 +43,15 @@ This is a web-component from Maggioli Design System [Magma](https://magma.maggio
 ### Depends on
 
 - [mds-table-cell](../mds-table-cell)
+- [mds-input-switch](../mds-input-switch)
 
 ### Graph
 ```mermaid
 graph TD;
   mds-table-row --> mds-table-cell
+  mds-table-row --> mds-input-switch
+  mds-input-switch --> mds-icon
+  mds-input-switch --> mds-text
   style mds-table-row fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/src/common/slot.ts

@@ -0,0 +1,15 @@
+const hasSlottedElements = (el: HTMLElement, name?: string): boolean => {
+  let query = 'slot'
+  if (name) {
+    query = `slot[name=${name}]`
+  }
+  const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
+  if (slot) {
+    return slot.assignedNodes().length > 0
+  }
+  return false
+}
+
+export {
+  hasSlottedElements,
+}

package/src/components/mds-table-row/css/mds-table-row-actions.css

@@ -8,8 +8,11 @@
 }
 
 .actions {
+
+  --mds-table-row-actions-background: var(--mds-table-row-background);
+
   align-items: center;
-  background-color: var(--mds-table-cell-background);
+  background-color: var(--mds-table-row-actions-background);
   display: inline-flex;
   gap: var(--mds-table-row-actions-gap);
   inset: 0;
@@ -28,11 +31,15 @@
   transform: translateX(100%);
 }
 
-:host([overlay-actions]:not([overlay-actions="false"])) .actions {
+
+:host([overlay-actions]) .actions {
   padding-right: var(--mds-table-cell-padding);
   transform: translateX(100%);
 }
 
-:host([overlay-actions]:not([overlay-actions="false"]):hover) .actions {
+:host([overlay-actions]:hover) .actions {
+
+  --mds-table-row-actions-background: var(--mds-table-row-background);
+
   transform: translateX(0);
 }

package/src/components/mds-table-row/css/mds-table-row-interactive.css

@@ -0,0 +1,6 @@
+:host([interactive]:hover) {
+
+  --mds-table-row-actions-background: var(--mds-table-row-background-hover);
+  --mds-table-row-background: var(--mds-table-row-background-hover);
+  --mds-table-row-color: var(--mds-table-row-color-hover);
+}

package/src/components/mds-table-row/css/mds-table-row-selected.css

@@ -0,0 +1,5 @@
+:host([selected]) {
+
+  --mds-table-row-background: var(--mds-table-row-background-hover);
+  --mds-table-row-color: var(--mds-table-row-color-hover);
+}

package/src/components/mds-table-row/css/mds-table-row-sorted.css

@@ -0,0 +1,11 @@
+:host([sorted]) {
+
+  --mds-table-row-background: var(--mds-table-row-background-alt);
+  --mds-table-row-color: var(--mds-table-row-color-alt);
+}
+
+:host([sorted][selected]) {
+
+  --mds-table-row-background: var(--mds-table-row-background-hover);
+  --mds-table-row-color: var(--mds-table-row-color-hover);
+}

package/src/components/mds-table-row/mds-table-row.css

@@ -2,11 +2,12 @@
 
 :host {
 
-  --mds-table-row-color-hover: var(--mds-table-color-hover, theme('colors.tone-neutral-02'));
-  --mds-table-row-color: var(--mds-table-color, theme('colors.tone-neutral-03'));
+  --mds-table-row-color-hover: var(--mds-table-color, theme('colors.tone-neutral-02'));
+  --mds-table-row-color-alt: var(--mds-table-color-alt, theme('colors.tone-neutral-02'));
+  --mds-table-row-background-hover: var(--mds-table-background, theme('colors.tone-neutral'));
+  --mds-table-row-background-alt: var(--mds-table-background-alt, theme('colors.tone-neutral'));
   --mds-table-row-actions-gap: var(--mds-table-actions-gap, theme('spacing.400'));
 
-
   @apply
     duration-200
     ease-out;
@@ -18,32 +19,16 @@
 
 }
 
-:host([sorted][interactive]:not([interactive="false"])) ::slotted(mds-table-cell[sorted]) {
-
-  --mds-table-cell-background: var(--mds-table-cell-background-hover);
+.selection-cell {
+  vertical-align: middle;
 }
 
-:host([sorted][interactive]:not([interactive="false"])) ::slotted(mds-table-cell:not([sorted])) {
-
-  --mds-table-cell-background: var(--mds-table-body-background-hover);
-}
-
-:host([interactive]:not([interactive="false"]):hover) {
-
-  --mds-table-cell-background: var(--mds-table-cell-background-hover);
-  --mds-table-row-color: var(--mds-table-row-color-hover);
-}
-
-
-:host([sorted][interactive]:not([interactive="false"]):hover) ::slotted(mds-table-cell:not([sorted])) {
-
-  --mds-table-cell-background: var(--mds-table-cell-background-hover);
-}
-
-:host([sorted]:not([interactive])) ::slotted(mds-table-cell:not([sorted])) {
-
-  --mds-table-cell-background: var(--mds-table-body-background-hover);
+.checkbox-wrapper {
+  display: flex;
 }
 
+@import './css/mds-table-row-interactive.css';
+@import './css/mds-table-row-selected.css';
+@import './css/mds-table-row-sorted.css';
 @import './css/mds-table-row-actions.css';
 @import './css/mds-table-row-pref-animation.css';

package/src/components/mds-table-row/mds-table-row.tsx

@@ -1,6 +1,9 @@
-import { Component, Host, h, Listen, Prop, Element } from '@stencil/core'
-// import { isMobileDevice } from '@common/device'
-// import clsx from 'clsx'
+import { Component, Host, h, Prop, Element, State, Method } from '@stencil/core'
+import { Locale } from '@common/locale'
+import localeEl from './meta/locale.el.json'
+import localeEn from './meta/locale.en.json'
+import localeEs from './meta/locale.es.json'
+import localeIt from './meta/locale.it.json'
 
 /**
  * @slot default - Put `mds-table-cell` element/s.
@@ -17,17 +20,31 @@ export class MdsTableRow {
   private actions: HTMLDivElement
   private hasActions: boolean
   private sizerWidth: string
+  private t:Locale = new Locale({
+    el: localeEl,
+    en: localeEn,
+    es: localeEs,
+    it: localeIt,
+  })
+  @State() language: string
+  @Method()
+  async updateLang (): Promise<void> {
+    this.language = this.t.lang(this.host)
+    this.t.update()
+  }
 
-  @Prop({ mutable: true, reflect: true }) interactive: boolean
+  @Prop({ reflect: true }) readonly interactive?: boolean
 
-  @Prop({ mutable: true, reflect: true }) overlayActions: boolean
+  @Prop({ reflect: true }) readonly overlayActions: boolean
 
-  @Listen('mdsTableInteractiveChange', { target: 'document' })
-  tableInteractiveHandler (event: CustomEvent<boolean>): void {
-    this.interactive = event.detail
-  }
+  @Prop({ reflect: true }) readonly selectable?: boolean = undefined
+
+  @Prop({ mutable: true, reflect: true }) selected?: boolean
+
+  @Prop({ reflect: true }) readonly value?: string | number
 
   componentWillLoad (): void {
+    this.language = this.t.lang(this.host)
     this.hasActions = this.host.querySelector('[slot="action"]') !== null
   }
 
@@ -38,9 +55,21 @@ export class MdsTableRow {
     }
   }
 
+  private handleSelectionChange = (e: CustomEvent): void => {
+    this.selected = e.detail.checked
+    this.host.closest('mds-table')?.updateSelection()
+  }
+
   render () {
     return (
       <Host role="row">
+        { this.selectable &&
+          <mds-table-cell class="selection-cell">
+            <div class="checkbox-wrapper">
+              <mds-input-switch title={this.t.get(this.selected ? 'unselectRow' : 'selectRow')} lang={this.language} type="checkbox" checked={this.selected} onMdsInputSwitchChange={this.handleSelectionChange}></mds-input-switch>
+            </div>
+          </mds-table-cell>
+        }
         <slot/>
         { this.hasActions &&
           <mds-table-cell class="actions-cell">

package/src/components/mds-table-row/meta/locale.el.json

@@ -0,0 +1,4 @@
+{
+  "selectRow": "Επιλογή γραμμής",
+  "unselectRow": "Αποεπιλογή γραμμής"
+}

package/src/components/mds-table-row/meta/locale.en.json

@@ -0,0 +1,4 @@
+{
+  "selectRow": "Select row",
+  "unselectRow": "Deselect row"
+}

package/src/components/mds-table-row/meta/locale.es.json

@@ -0,0 +1,4 @@
+{
+  "selectRow": "Seleccionar fila",
+  "unselectRow": "Deseleccionar fila"
+}

package/src/components/mds-table-row/meta/locale.it.json

@@ -0,0 +1,4 @@
+{
+  "selectRow": "Seleziona riga",
+  "unselectRow": "Deseleziona riga"
+}

package/src/components/mds-table-row/readme.md

@@ -7,10 +7,26 @@
 
 ## Properties
 
-| Property         | Attribute         | Description | Type      | Default     |
-| ---------------- | ----------------- | ----------- | --------- | ----------- |
-| `interactive`    | `interactive`     |             | `boolean` | `undefined` |
-| `overlayActions` | `overlay-actions` |             | `boolean` | `undefined` |
+| Property         | Attribute         | Description | Type                            | Default     |
+| ---------------- | ----------------- | ----------- | ------------------------------- | ----------- |
+| `interactive`    | `interactive`     |             | `boolean \| undefined`          | `undefined` |
+| `overlayActions` | `overlay-actions` |             | `boolean`                       | `undefined` |
+| `selectable`     | `selectable`      |             | `boolean \| undefined`          | `undefined` |
+| `selected`       | `selected`        |             | `boolean \| undefined`          | `undefined` |
+| `value`          | `value`           |             | `number \| string \| undefined` | `undefined` |
+
+
+## Methods
+
+### `updateLang() => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
 
 
 ## Slots

package/src/components.d.ts

@@ -7,8 +7,12 @@
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
     interface MdsTableRow {
-        "interactive": boolean;
+        "interactive"?: boolean;
         "overlayActions": boolean;
+        "selectable"?: boolean;
+        "selected"?: boolean;
+        "updateLang": () => Promise<void>;
+        "value"?: string | number;
     }
 }
 declare global {
@@ -26,6 +30,9 @@ declare namespace LocalJSX {
     interface MdsTableRow {
         "interactive"?: boolean;
         "overlayActions"?: boolean;
+        "selectable"?: boolean;
+        "selected"?: boolean;
+        "value"?: string | number;
     }
     interface IntrinsicElements {
         "mds-table-row": MdsTableRow;

package/src/dictionary/animation.ts

@@ -0,0 +1,8 @@
+const horizontalActionsAnimationDictionary = [
+  'fade',
+  'slide',
+]
+
+export {
+  horizontalActionsAnimationDictionary,
+}