@maggioli-design-system/mds-table-row 5.2.0 → 5.3.1

package/dist/stats.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-02-25T15:13:44",
+  "timestamp": "2025-03-10T12:58:27",
   "compiler": {
     "name": "node",
     "version": "22.11.0"
@@ -9,13 +9,14 @@
     "fsNamespace": "mds-table-row",
     "components": 1,
     "entries": 1,
-    "bundles": 100,
+    "bundles": 101,
     "outputs": [
       {
         "name": "dist-collection",
-        "files": 52,
+        "files": 53,
         "generatedFiles": [
           "./dist/collection/common/aria.js",
+          "./dist/collection/common/browser.js",
           "./dist/collection/common/date.js",
           "./dist/collection/common/device.js",
           "./dist/collection/common/file.js",
@@ -84,19 +85,19 @@
         "files": 42,
         "generatedFiles": [
           "./dist/cjs/app-globals-3a1e7e63.js",
-          "./dist/cjs/index-cb928c36.js",
+          "./dist/cjs/index-27c9aefd.js",
           "./dist/cjs/index.cjs.js",
           "./dist/cjs/loader.cjs.js",
           "./dist/cjs/mds-table-row.cjs.entry.js",
           "./dist/cjs/mds-table-row.cjs.js",
           "./dist/esm-es5/app-globals-0f993ce5.js",
-          "./dist/esm-es5/index-8134a00a.js",
+          "./dist/esm-es5/index-81f966aa.js",
           "./dist/esm-es5/index.js",
           "./dist/esm-es5/loader.js",
           "./dist/esm-es5/mds-table-row.entry.js",
           "./dist/esm-es5/mds-table-row.js",
           "./dist/esm/app-globals-0f993ce5.js",
-          "./dist/esm/index-8134a00a.js",
+          "./dist/esm/index-81f966aa.js",
           "./dist/esm/index.js",
           "./dist/esm/loader.js",
           "./dist/esm/mds-table-row.entry.js",
@@ -106,25 +107,25 @@
           "./dist/mds-table-row/index.esm.js",
           "./dist/mds-table-row/mds-table-row.esm.js",
           "./dist/mds-table-row/mds-table-row.js",
-          "./dist/mds-table-row/p-11048c96.system.js",
-          "./dist/mds-table-row/p-22d4881a.js",
+          "./dist/mds-table-row/p-133f1581.system.js",
+          "./dist/mds-table-row/p-25b773c1.js",
+          "./dist/mds-table-row/p-4727e0b3.system.entry.js",
           "./dist/mds-table-row/p-50ea2036.system.js",
           "./dist/mds-table-row/p-56ba5cbf.system.js",
-          "./dist/mds-table-row/p-64bc1c7b.entry.js",
-          "./dist/mds-table-row/p-88f814c9.system.js",
-          "./dist/mds-table-row/p-c5e9ab44.system.entry.js",
+          "./dist/mds-table-row/p-869d0b15.entry.js",
           "./dist/mds-table-row/p-e1255160.js",
+          "./dist/mds-table-row/p-e71445fa.system.js",
           "./www/build/index.esm.js",
           "./www/build/mds-table-row.esm.js",
           "./www/build/mds-table-row.js",
-          "./www/build/p-11048c96.system.js",
-          "./www/build/p-22d4881a.js",
+          "./www/build/p-133f1581.system.js",
+          "./www/build/p-25b773c1.js",
+          "./www/build/p-4727e0b3.system.entry.js",
           "./www/build/p-50ea2036.system.js",
           "./www/build/p-56ba5cbf.system.js",
-          "./www/build/p-64bc1c7b.entry.js",
-          "./www/build/p-88f814c9.system.js",
-          "./www/build/p-c5e9ab44.system.entry.js",
-          "./www/build/p-e1255160.js"
+          "./www/build/p-869d0b15.entry.js",
+          "./www/build/p-e1255160.js",
+          "./www/build/p-e71445fa.system.js"
         ]
       },
       {
@@ -157,12 +158,12 @@
         "components": [
           "mds-table-row"
         ],
-        "bundleId": "p-64bc1c7b",
-        "fileName": "p-64bc1c7b.entry.js",
+        "bundleId": "p-869d0b15",
+        "fileName": "p-869d0b15.entry.js",
         "imports": [
-          "p-22d4881a.js"
+          "p-25b773c1.js"
         ],
-        "originalByteSize": 41351
+        "originalByteSize": 40887
       }
     ],
     "esm": [
@@ -174,9 +175,9 @@
         "bundleId": "mds-table-row",
         "fileName": "mds-table-row.entry.js",
         "imports": [
-          "index-8134a00a.js"
+          "index-81f966aa.js"
         ],
-        "originalByteSize": 41355
+        "originalByteSize": 40891
       }
     ],
     "es5": [
@@ -188,9 +189,9 @@
         "bundleId": "mds-table-row",
         "fileName": "mds-table-row.entry.js",
         "imports": [
-          "index-8134a00a.js"
+          "index-81f966aa.js"
         ],
-        "originalByteSize": 41355
+        "originalByteSize": 40891
       }
     ],
     "system": [
@@ -199,12 +200,12 @@
         "components": [
           "mds-table-row"
         ],
-        "bundleId": "p-c5e9ab44.system",
-        "fileName": "p-c5e9ab44.system.entry.js",
+        "bundleId": "p-4727e0b3.system",
+        "fileName": "p-4727e0b3.system.entry.js",
         "imports": [
-          "p-88f814c9.system.js"
+          "p-133f1581.system.js"
         ],
-        "originalByteSize": 43961
+        "originalByteSize": 43521
       }
     ],
     "commonjs": [
@@ -216,9 +217,9 @@
         "bundleId": "mds-table-row.cjs",
         "fileName": "mds-table-row.cjs.entry.js",
         "imports": [
-          "index-cb928c36.js"
+          "index-27c9aefd.js"
         ],
-        "originalByteSize": 41462
+        "originalByteSize": 41016
       }
     ]
   },
@@ -239,6 +240,10 @@
           {
             "name": "slot",
             "text": "default - Put `mds-table-cell` element/s."
+          },
+          {
+            "name": "slot",
+            "text": "action - Put `mds-button` element/s or other kind of actions as aside menu for the single row."
           }
         ],
         "text": ""
@@ -563,6 +568,10 @@
               {
                 "name": "slot",
                 "text": "default - Put `mds-table-cell` element/s."
+              },
+              {
+                "name": "slot",
+                "text": "action - Put `mds-button` element/s or other kind of actions as aside menu for the single row."
               }
             ],
             "text": ""
@@ -578,7 +587,6 @@
           "hasComponentDidUpdateFn": false,
           "hasComponentWillRenderFn": false,
           "hasComponentDidRenderFn": false,
-          "hasComponentDidUnloadFn": false,
           "hasConnectedCallbackFn": false,
           "hasDisconnectedCallbackFn": false,
           "hasElement": false,
@@ -626,8 +634,8 @@
             "type",
             "checked",
             "onMdsInputSwitchChange",
-            "style",
-            "name"
+            "name",
+            "style"
           ],
           "htmlTagNames": [
             "mds-table-cell",
@@ -652,11 +660,12 @@
   ],
   "componentGraph": {
     "sc-mds-table-row": [
-      "p-22d4881a.js"
+      "p-25b773c1.js"
     ]
   },
   "sourceGraph": {
     "./src/common/aria.ts": [],
+    "./src/common/browser.ts": [],
     "./src/common/date.ts": [],
     "./src/common/device.ts": [],
     "./src/common/file.ts": [],

package/dist/types/common/browser.d.ts

@@ -0,0 +1,2 @@
+declare const isSafari: () => boolean;
+export { isSafari, };

package/dist/types/common/locale.d.ts

@@ -15,6 +15,6 @@ export declare class Locale {
     lang: (el: HTMLElement) => string;
     update: (doc?: Document | ShadowRoot) => void;
     private pluralize;
-    get: (tag: string | string[], context?: Record<string, string | number>) => string;
+    get: (tag: string | string[], context?: Record<string, string | number | boolean>) => string;
 }
 export {};

package/dist/types/components/mds-table-row/mds-table-row.d.ts

@@ -1,5 +1,6 @@
 /**
  * @slot default - Put `mds-table-cell` element/s.
+ * @slot action - Put `mds-button` element/s or other kind of actions as aside menu for the single row.
  */
 export declare class MdsTableRow {
     host: HTMLMdsTableRowElement;

package/documentation.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2025-02-25T13:09:05",
+  "timestamp": "2025-03-10T10:32:58",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.25.1",
+    "version": "4.27.2",
     "typescriptVersion": "5.5.4"
   },
   "components": [
@@ -16,6 +16,10 @@
         {
           "name": "slot",
           "text": "default - Put `mds-table-cell` element/s."
+        },
+        {
+          "name": "slot",
+          "text": "action - Put `mds-button` element/s or other kind of actions as aside menu for the single row."
         }
       ],
       "usage": {},
@@ -180,6 +184,10 @@
       "listeners": [],
       "styles": [],
       "slots": [
+        {
+          "name": "action",
+          "docs": "Put `mds-button` element/s or other kind of actions as aside menu for the single row."
+        },
         {
           "name": "default",
           "docs": "Put `mds-table-cell` element/s."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-table-row",
-  "version": "5.2.0",
+  "version": "5.3.1",
   "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,9 +23,9 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-table-cell": "5.1.0",
-    "@maggioli-design-system/styles": "15.8.0",
-    "@stencil/core": "4.25.1"
+    "@maggioli-design-system/mds-table-cell": "5.2.0",
+    "@maggioli-design-system/styles": "15.9.0",
+    "@stencil/core": "4.27.2"
   },
   "license": "MIT",
   "author": {

package/readme.md

@@ -33,9 +33,10 @@ Type: `Promise<void>`
 
 ## Slots
 
-| Slot        | Description                     |
-| ----------- | ------------------------------- |
-| `"default"` | Put `mds-table-cell` element/s. |
+| Slot        | Description                                                                           |
+| ----------- | ------------------------------------------------------------------------------------- |
+| `"action"`  | Put `mds-button` element/s or other kind of actions as aside menu for the single row. |
+| `"default"` | Put `mds-table-cell` element/s.                                                       |
 
 
 ## Dependencies

package/src/common/browser.ts

@@ -0,0 +1,10 @@
+const isSafari = (): boolean => {
+  if (navigator) {
+    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+  }
+  return false
+}
+
+export {
+  isSafari,
+}

package/src/common/locale.ts

@@ -52,7 +52,7 @@ export class Locale {
     })
   }
 
-  private pluralize = (tag: string | string[], context: Record<string, string | number>): string => {
+  private pluralize = (tag: string | string[], context: Record<string, string | number | boolean>): string => {
 
     const languagePhrase: string | string[] = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag]
     const phrases: string[] = []
@@ -81,7 +81,7 @@ export class Locale {
     return render(translatePhrase, context)
   }
 
-  get = (tag: string | string[], context?: Record<string, string | number>): string => {
+  get = (tag: string | string[], context?: Record<string, string | number | boolean>): string => {
     if (context) {
       return this.pluralize(tag, context)
     }

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

@@ -8,7 +8,6 @@
 }
 
 .actions {
-
   --mds-table-row-actions-background: var(--mds-table-row-background);
 
   align-items: center;
@@ -40,22 +39,29 @@
 }
 
 :host([overlay-actions]:hover) .actions {
-
   --mds-table-row-actions-background: var(--mds-table-row-background);
 
   transform: translateX(0);
 }
 
-:host(:hover):host-context(mds-table[interactive="false"]) .actions,
-:host(:hover):host-context(mds-table:not([interactive])) .actions {
-
+:host-context(mds-table[interactive="false"]):host(:hover) .actions,
+:host-context(mds-table:not([interactive])):host(:hover) .actions {
   --mds-table-row-actions-background: var(--mds-table-row-background-hover);
 }
 
-:host(:not([selected]):hover):host-context(mds-table[selection]:not([interactive])) .actions,
-:host(:not([selected]):hover):host-context(mds-table[selection][interactive="false"]) .actions,
-:host([selected="false"]:hover):host-context(mds-table[selection]:not([interactive])) .actions,
-:host([selected="false"]:hover):host-context(mds-table[selection][interactive="false"]) .actions {
-
+:host-context(mds-table[selection]:not([interactive])):host(:not([selected]):hover) .actions,
+:host-context(mds-table[selection][interactive="false"]):host(:not([selected]):hover) .actions,
+:host-context(mds-table[selection]:not([interactive])):host([selected="false"]:hover) .actions,
+:host-context(mds-table[selection][interactive="false"]):host([selected="false"]:hover) .actions {
   --mds-table-row-actions-background: var(--mds-table-row-background-alt);
 }
+
+.actions-cell--disable,
+.actions-cell--disable .actions {
+  position: static !important;
+}
+
+.actions-cell--disable .actions {
+  margin-right: 0 !important;
+  transform: translateX(0) !important;
+}

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

@@ -1,5 +1,4 @@
 :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,18 +1,9 @@
-@tailwind utilities;
-
-@container style(--magma-pref-animation: reduce) {
-  :host,
-  .actions {
-    transition-duration: 0s;
-  }
+:host-context(.pref-animation-reduce) {
+  transition-duration: 0s;
 }
 
-@container style(--magma-pref-animation: system) {
-
-  @media (prefers-reduced-motion) {
-    :host,
-    .actions {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion) {
+  :host-context(.pref-animation-system) {
+    transition-duration: 0s;
   }
 }

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

@@ -1,5 +1,4 @@
 :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

@@ -1,11 +1,9 @@
 :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

@@ -1,11 +1,4 @@
-@import '../../tailwind/components.css';
-@tailwind components;
-@tailwind utilities;
-
-@import '../../tailwind/fouc.css';
-
 :host {
-
   --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'));
@@ -36,3 +29,4 @@
 @import './css/mds-table-row-sorted.css';
 @import './css/mds-table-row-actions.css';
 @import './css/mds-table-row-pref-animation.css';
+@import '../../tailwind/fouc.css';

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

@@ -4,11 +4,15 @@ 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'
+import { isSafari } from '@common/browser'
 
 /**
  * @slot default - Put `mds-table-cell` element/s.
+ * @slot action - Put `mds-button` element/s or other kind of actions as aside menu for the single row.
  */
 
+// TODO [bug, style]: on Safari actions menu is visually broken
+
 @Component({
   tag: 'mds-table-row',
   styleUrl: 'mds-table-row.css',
@@ -18,7 +22,7 @@ export class MdsTableRow {
 
   @Element() host: HTMLMdsTableRowElement
   private actions: HTMLDivElement
-  private hasActions: boolean
+  private hasActions: boolean = true
   private sizerWidth: string
   private t:Locale = new Locale({
     el: localeEl,
@@ -45,7 +49,7 @@ export class MdsTableRow {
 
   componentWillLoad (): void {
     this.language = this.t.lang(this.host)
-    this.hasActions = this.host.querySelector('[slot="action"]') !== null
+    this.hasActions = this.host.querySelector(':scope > [slot="action"]') !== null
   }
 
   componentDidLoad (): void {
@@ -71,7 +75,14 @@ export class MdsTableRow {
           </mds-table-cell>
         }
         <slot/>
-        { this.hasActions &&
+        { this.hasActions && isSafari() &&
+          <mds-table-cell class="actions-cell actions-cell--disable">
+            <div class="actions">
+              <slot name="action"></slot>
+            </div>
+          </mds-table-cell>
+        }
+        { this.hasActions && !isSafari() &&
           <mds-table-cell class="actions-cell">
             <div class="actions-sizer" style={{
               minHeight: '1px',

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

@@ -31,9 +31,10 @@ Type: `Promise<void>`
 
 ## Slots
 
-| Slot        | Description                     |
-| ----------- | ------------------------------- |
-| `"default"` | Put `mds-table-cell` element/s. |
+| Slot        | Description                                                                           |
+| ----------- | ------------------------------------------------------------------------------------- |
+| `"action"`  | Put `mds-button` element/s or other kind of actions as aside menu for the single row. |
+| `"default"` | Put `mds-table-cell` element/s.                                                       |
 
 
 ----------------------------------------------

package/src/fixtures/icons.json

@@ -52,6 +52,7 @@
     "mgg/ai-status-suspended",
     "mgg/alerts-pagopa",
     "mgg/anagrafe-nazionale",
+    "mgg/anist",
     "mgg/anpr",
     "mgg/ansc",
     "mgg/area-edificabile",
@@ -361,6 +362,7 @@
     "mi/baseline/eco",
     "mi/baseline/email",
     "mi/baseline/error",
+    "mi/baseline/expand-more",
     "mi/baseline/explore",
     "mi/baseline/favorite",
     "mi/baseline/favorite-border",

package/src/fixtures/iconsauce.json

@@ -32,6 +32,7 @@
     "mgg/ai-status-suspended",
     "mgg/alerts-pagopa",
     "mgg/anagrafe-nazionale",
+    "mgg/anist",
     "mgg/anpr",
     "mgg/ansc",
     "mgg/area-edificabile",

package/src/tailwind/components.css

@@ -1,6 +1,4 @@
 @import '~@maggioli-design-system/styles/dist/tailwind/components.css';
-@tailwind components;
-@tailwind utilities;
 
 @layer components {
   .svg {
@@ -38,52 +36,6 @@
     box-shadow: theme('boxShadow.outline') inset;
   }
 
-  @container style(--magma-pref-contrast: more) {
-    .contrast-area,
-    .contrast-area-50 {
-      @apply
-        block
-        opacity-100;
-
-      /* @starting-style {
-        opacity: 0;
-      } */
-    }
-  }
-
-  @container style(--magma-pref-contrast: system) {
-
-    @media (prefers-contrast: more) {
-      .contrast-area,
-      .contrast-area-50 {
-        @apply
-          block
-          opacity-100;
-
-        /* @starting-style {
-          opacity: 0;
-        } */
-      }
-    }
-  }
-
-  @container style(--magma-pref-animation: reduce) {
-    .contrast-area,
-    .contrast-area-50 {
-      @apply duration-0;
-    }
-  }
-
-  @container style(--magma-pref-animation: system) {
-
-    @media (prefers-reduced-motion) {
-      .contrast-area,
-      .contrast-area-50 {
-        @apply duration-0;
-      }
-    }
-  }
-
   .not-hydrated {
       animation-duration: 0s;
       border-color: transparent;
@@ -95,3 +47,5 @@
       visibility: hidden;
   }
 }
+
+@tailwind components;

package/src/tailwind/index.css

@@ -0,0 +1,4 @@
+@import './components.css';
+@tailwind components;
+@tailwind utilities;
+

package/www/build/mds-table-row.esm.js

@@ -1 +1 @@
-import{p as a,b as e}from"./p-22d4881a.js";export{s as setNonce}from"./p-22d4881a.js";import{g as t}from"./p-e1255160.js";(()=>{const e=import.meta.url,t={};return""!==e&&(t.resourcesUrl=new URL(".",e).href),a(t)})().then((async a=>(await t(),e([["p-64bc1c7b",[[1,"mds-table-row",{interactive:[516],overlayActions:[516,"overlay-actions"],selectable:[516],selected:[1540],value:[520],language:[32],updateLang:[64]}]]]],a))));
+import{p as e,b as a}from"./p-25b773c1.js";export{s as setNonce}from"./p-25b773c1.js";import{g as t}from"./p-e1255160.js";(()=>{const a=import.meta.url,t={};return""!==a&&(t.resourcesUrl=new URL(".",a).href),e(t)})().then((async e=>(await t(),a([["p-869d0b15",[[1,"mds-table-row",{interactive:[516],overlayActions:[516,"overlay-actions"],selectable:[516],selected:[1540],value:[520],language:[32],updateLang:[64]}]]]],e))));

package/www/build/mds-table-row.js

@@ -115,7 +115,7 @@ DOMTokenList
     var resourcesUrl = scriptElm ? scriptElm.getAttribute('data-resources-url') || scriptElm.src : '';
     var start = function() {
       // if src is not present then origin is "null", and new URL() throws TypeError: Failed to construct 'URL': Invalid base URL
-      var url = new URL('./p-11048c96.system.js', new URL(resourcesUrl, window.location.origin !== 'null' ? window.location.origin : undefined));
+      var url = new URL('./p-e71445fa.system.js', new URL(resourcesUrl, window.location.origin !== 'null' ? window.location.origin : undefined));
       System.import(url.href);
     };