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

package/dist/types/type/variant-file-format.d.ts

@@ -1,5 +1,5 @@
 import { ThemeFullVariantType } from "./variant";
-type FileFormat = 'archive' | 'attachment' | 'audio' | 'code' | 'data' | 'document' | 'email' | 'executable' | 'image' | 'markup' | 'slide' | 'spreadsheet' | 'text' | 'vector' | 'video';
+type FileFormat = 'archive' | 'attachment' | 'audio' | 'certificate' | 'code' | 'data' | 'document' | 'email' | 'executable' | 'image' | 'markup' | 'slide' | 'spreadsheet' | 'text' | 'vector' | 'video';
 interface FileFormatVariant {
     icon: string;
     variant: ThemeFullVariantType;

package/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-12-04T15:30:05",
+  "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": [
         {
@@ -82,8 +177,20 @@
       ],
       "parts": [],
       "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
+      "dependencies": [
+        "mds-table-cell",
+        "mds-input-switch"
+      ],
+      "dependencyGraph": {
+        "mds-table-row": [
+          "mds-table-cell",
+          "mds-input-switch"
+        ],
+        "mds-input-switch": [
+          "mds-icon",
+          "mds-text"
+        ]
+      }
     }
   ],
   "typeLibrary": {
@@ -238,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"
     },
@@ -477,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": "",
@@ -512,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": "",
@@ -532,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.0",
+  "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
@@ -22,6 +38,23 @@ This is a web-component from Maggioli Design System [Magma](https://magma.maggio
 | `"default"` | Put `mds-table-cell` element/s. |
 
 
+## Dependencies
+
+### 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
+```
+
 ----------------------------------------------
 
 Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)

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

@@ -0,0 +1,45 @@
+.actions-view {
+  align-items: center;
+  display: flex;
+  inset: 0;
+  justify-content: end;
+  pointer-events: none;
+  position: absolute;
+}
+
+.actions {
+
+  --mds-table-row-actions-background: var(--mds-table-row-background);
+
+  align-items: center;
+  background-color: var(--mds-table-row-actions-background);
+  display: inline-flex;
+  gap: var(--mds-table-row-actions-gap);
+  inset: 0;
+  margin-right: 100%;
+  padding-right: 0;
+  pointer-events: auto;
+  position: sticky;
+  right: 0;
+  transform: translateX(100%);
+  transition-duration: theme('transitionDuration.500');
+  transition-property: transform, background-color, padding-right;
+  transition-timing-function: theme('transitionTimingFunction.out-expo');
+}
+
+:host(:hover) .actions {
+  transform: translateX(100%);
+}
+
+
+:host([overlay-actions]) .actions {
+  padding-right: var(--mds-table-cell-padding);
+  transform: translateX(100%);
+}
+
+: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-pref-animation.css

@@ -1,7 +1,8 @@
 @tailwind utilities;
 
 @container style(--magma-pref-animation: reduce) {
-  :host {
+  :host,
+  .actions {
     transition-duration: 0s;
   }
 }
@@ -9,7 +10,8 @@
 @container style(--magma-pref-animation: system) {
 
   @media (prefers-reduced-motion) {
-    :host {
+    :host,
+    .actions {
       transition-duration: 0s;
     }
   }

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,88 +19,16 @@
 
 }
 
-.actions-wrapper {
-  inset: 0;
-  display: flex;
-  justify-content: end;
-  pointer-events: none;
-  position: absolute;
-}
-
-.actions {
-  align-items: center;
-  background-color: var(--mds-table-cell-background);
-  border-bottom-color: transparent;
-  border-bottom-style: solid;
-  border-bottom-width: var(--mds-table-border-width);
-  border-top-color: var(--mds-table-border-color);
-  border-top-style: solid;
-  border-top-width: var(--mds-table-border-width);
-  box-sizing: border-box;
-  display: inline-flex;
-  gap: var(--mds-table-row-actions-gap);
-  height: 100%;
-  margin-top: calc(var(--mds-table-border-width) * -1);
-  padding: var(--mds-table-cell-padding);
-  pointer-events: auto;
-  position: sticky;
-  right: 0;
-  transform: translateX(100%);
-  transition-duration: theme('transitionDuration.500');
-  transition-property: transform, background-color;
-  transition-timing-function: theme('transitionTimingFunction.out-expo');
-}
-
-.actions-wrapper--mobile {
-  position: relative;
-}
-
-.actions-wrapper--mobile .actions {
-  position: static;
-  transform: translateX(0);
-}
-
-:host(:hover) .actions {
-  transform: translateX(0);
-}
-
-:host([overlay-actions]:not([overlay-actions="false"])) .actions-wrapper:not(.actions-wrapper--mobile) .actions {
-  transform: translateX(100%);
-}
-
-:host([interactive]:not([interactive="false"])) .actions {
-  --mds-table-cell-background: var(--mds-table-body-background);
-}
-
-:host([interactive]:not([interactive="false"]):hover) .actions {
-  --mds-table-cell-background: var(--mds-table-cell-background-hover);
-}
-
-:host([sorted][interactive]:not([interactive="false"])) ::slotted(mds-table-cell[sorted]) {
-
-  --mds-table-cell-background: var(--mds-table-cell-background-hover);
-}
-
-: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);
+.selection-cell {
+  vertical-align: middle;
 }
 
-: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.
@@ -14,31 +17,75 @@ import clsx from 'clsx'
 export class MdsTableRow {
 
   @Element() host: HTMLMdsTableRowElement
-  private actions: boolean
+  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.actions = this.host.querySelector('[slot="action"]') !== null
+    this.language = this.t.lang(this.host)
+    this.hasActions = this.host.querySelector('[slot="action"]') !== null
+  }
+
+  componentDidLoad (): void {
+    if (this.hasActions) {
+      this.actions = this.host.shadowRoot?.querySelector('.actions') as HTMLDivElement
+      this.sizerWidth = `${this.actions.offsetWidth.toString()}px`
+    }
+  }
+
+  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.actions
-          && <div class={clsx('actions-wrapper', isMobileDevice() && 'actions-wrapper--mobile')} role="cell">
-            <div class="actions">
-              <slot name="action"></slot>
+        { this.hasActions &&
+          <mds-table-cell class="actions-cell">
+            <div class="actions-sizer" style={{
+              minHeight: '1px',
+              maxWidth: this.sizerWidth,
+              minWidth: this.sizerWidth,
+            }}></div>
+            <div class="actions-view">
+              <div class="actions" style={{
+                marginRight: `calc(${this.sizerWidth} + var(--mds-table-cell-padding))`,
+              }}>
+                <slot name="action"></slot>
+              </div>
             </div>
-          </div>
+          </mds-table-cell>
         }
       </Host>
     )

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"
+}