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

package/dist/cjs/mds-table-row.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-19c36c53.js');
+const index = require('./index-41069a63.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mds-table-row.cjs",[[1,"mds-table-row",{"interactive":[1540],"overlayActions":[1540,"overlay-actions"]},[[4,"mdsTableInteractiveChange","tableInteractiveHandler"]]]]]], options);
+  return index.bootstrapLazy([["mds-table-row.cjs",[[1,"mds-table-row",{"interactive":[516],"overlayActions":[516,"overlay-actions"],"selectable":[516],"selected":[1540],"value":[520],"language":[32],"updateLang":[64]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/common/slot.js

@@ -0,0 +1,13 @@
+const hasSlottedElements = (el, name) => {
+    var _a;
+    let query = 'slot';
+    if (name) {
+        query = `slot[name=${name}]`;
+    }
+    const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(query);
+    if (slot) {
+        return slot.assignedNodes().length > 0;
+    }
+    return false;
+};
+export { hasSlottedElements, };

package/dist/collection/components/mds-table-row/mds-table-row.css

@@ -2,8 +2,10 @@
 
 :host {
 
-  --mds-table-row-color-hover: var(--mds-table-color-hover, rgb(var(--tone-neutral-02)));
-  --mds-table-row-color: var(--mds-table-color, rgb(var(--tone-neutral-03)));
+  --mds-table-row-color-hover: var(--mds-table-color, rgb(var(--tone-neutral-02)));
+  --mds-table-row-color-alt: var(--mds-table-color-alt, rgb(var(--tone-neutral-02)));
+  --mds-table-row-background-hover: var(--mds-table-background, rgb(var(--tone-neutral)));
+  --mds-table-row-background-alt: var(--mds-table-background-alt, rgb(var(--tone-neutral)));
   --mds-table-row-actions-gap: var(--mds-table-actions-gap, 1rem);
   transition-duration: 200ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
@@ -15,31 +17,37 @@
 
 }
 
-:host([sorted][interactive]:not([interactive="false"])) ::slotted(mds-table-cell[sorted]) {
+.selection-cell {
+  vertical-align: middle;
+}
 
-  --mds-table-cell-background: var(--mds-table-cell-background-hover);
+.checkbox-wrapper {
+  display: flex;
 }
 
-:host([sorted][interactive]:not([interactive="false"])) ::slotted(mds-table-cell:not([sorted])) {
+:host([interactive]:hover) {
 
-  --mds-table-cell-background: var(--mds-table-body-background-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);
 }
 
-:host([interactive]:not([interactive="false"]):hover) {
+:host([selected]) {
 
-  --mds-table-cell-background: var(--mds-table-cell-background-hover);
+  --mds-table-row-background: var(--mds-table-row-background-hover);
   --mds-table-row-color: var(--mds-table-row-color-hover);
 }
 
+:host([sorted]) {
 
-:host([sorted][interactive]:not([interactive="false"]):hover) ::slotted(mds-table-cell:not([sorted])) {
-
-  --mds-table-cell-background: var(--mds-table-cell-background-hover);
+  --mds-table-row-background: var(--mds-table-row-background-alt);
+  --mds-table-row-color: var(--mds-table-row-color-alt);
 }
 
-:host([sorted]:not([interactive])) ::slotted(mds-table-cell:not([sorted])) {
+:host([sorted][selected]) {
 
-  --mds-table-cell-background: var(--mds-table-body-background-hover);
+  --mds-table-row-background: var(--mds-table-row-background-hover);
+  --mds-table-row-color: var(--mds-table-row-color-hover);
 }
 
 .actions-view {
@@ -52,8 +60,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;
@@ -72,12 +83,16 @@
   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/dist/collection/components/mds-table-row/mds-table-row.js

@@ -1,18 +1,38 @@
 import { Host, h } from "@stencil/core";
-// import { isMobileDevice } from '@common/device'
-// import clsx from 'clsx'
+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.
  */
 export class MdsTableRow {
     constructor() {
+        this.t = new Locale({
+            el: localeEl,
+            en: localeEn,
+            es: localeEs,
+            it: localeIt,
+        });
+        this.handleSelectionChange = (e) => {
+            var _a;
+            this.selected = e.detail.checked;
+            (_a = this.host.closest('mds-table')) === null || _a === void 0 ? void 0 : _a.updateSelection();
+        };
+        this.language = undefined;
         this.interactive = undefined;
         this.overlayActions = undefined;
+        this.selectable = undefined;
+        this.selected = undefined;
+        this.value = undefined;
     }
-    tableInteractiveHandler(event) {
-        this.interactive = event.detail;
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+        this.t.update();
     }
     componentWillLoad() {
+        this.language = this.t.lang(this.host);
         this.hasActions = this.host.querySelector('[slot="action"]') !== null;
     }
     componentDidLoad() {
@@ -23,14 +43,15 @@ export class MdsTableRow {
         }
     }
     render() {
-        return (h(Host, { key: '44d102599e90a2abb4cf32ea398d6c3f194e6177', role: "row" }, h("slot", { key: '3bc595925a4dafac49d206692fae394754b10d70' }), this.hasActions &&
-            h("mds-table-cell", { key: '8b1a1b0e32db91cc03988de856fea521d25b8424', class: "actions-cell" }, h("div", { key: '5867330d68358f30429123a85027b72def045933', class: "actions-sizer", style: {
+        return (h(Host, { key: '4905591b94a0af846d25e3cf55fe5805ecec76be', role: "row" }, this.selectable &&
+            h("mds-table-cell", { key: '07f8596969f20148250cc42fde0a806435825274', class: "selection-cell" }, h("div", { key: '2d0bb74f3f5edaf6180c68a60457b374dcd7a4bd', class: "checkbox-wrapper" }, h("mds-input-switch", { key: 'e04fafd6a53ed1c6a4208b0317419fe21d08f28e', title: this.t.get(this.selected ? 'unselectRow' : 'selectRow'), lang: this.language, type: "checkbox", checked: this.selected, onMdsInputSwitchChange: this.handleSelectionChange }))), h("slot", { key: 'd71c2ec9e675fd8190eeeb7d816a5e2566c6afc4' }), this.hasActions &&
+            h("mds-table-cell", { key: '0ede2c5f98d7541920c4170d70c21f9f61ac93cb', class: "actions-cell" }, h("div", { key: '8a097d4b04bd594778f51bedfe438fe1fd3479b3', class: "actions-sizer", style: {
                     minHeight: '1px',
                     maxWidth: this.sizerWidth,
                     minWidth: this.sizerWidth,
-                } }), h("div", { key: '15d6e37bb432b0671e8a5fa447a17fde060e2d60', class: "actions-view" }, h("div", { key: '63cf3b620e6c428ce7cb318e07fb35cec631b0c3', class: "actions", style: {
+                } }), h("div", { key: '31f1fe8d7e4ee01f33f1c6a5b76e23fd875dfd82', class: "actions-view" }, h("div", { key: '762785e31a306ba3c1e7654218bdf8cb33044cd3', class: "actions", style: {
                     marginRight: `calc(${this.sizerWidth} + var(--mds-table-cell-padding))`,
-                } }, h("slot", { key: '0a479f584fd1ed0c927b39006de79747c7e3ed87', name: "action" }))))));
+                } }, h("slot", { key: '05ea2b5edc71e58859e55e52c1ab65ca0c5354f8', name: "action" }))))));
     }
     static get is() { return "mds-table-row"; }
     static get encapsulation() { return "shadow"; }
@@ -48,14 +69,14 @@ export class MdsTableRow {
         return {
             "interactive": {
                 "type": "boolean",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -65,7 +86,7 @@ export class MdsTableRow {
             },
             "overlayActions": {
                 "type": "boolean",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -79,17 +100,86 @@ export class MdsTableRow {
                 },
                 "attribute": "overlay-actions",
                 "reflect": true
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "selectable",
+                "reflect": true,
+                "defaultValue": "undefined"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "selected",
+                "reflect": true
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": true
             }
         };
     }
-    static get elementRef() { return "host"; }
-    static get listeners() {
-        return [{
-                "name": "mdsTableInteractiveChange",
-                "method": "tableInteractiveHandler",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }];
+    static get states() {
+        return {
+            "language": {}
+        };
+    }
+    static get methods() {
+        return {
+            "updateLang": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
     }
+    static get elementRef() { return "host"; }
 }

package/dist/collection/dictionary/animation.js

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

package/dist/collection/dictionary/file-extensions.js

@@ -14,8 +14,8 @@ const fileExtensionsDictionary = {
     exe: { format: 'executable', description: 'fileEXE' },
     flac: { format: 'audio', description: 'uncompressedAudio' },
     gif: { format: 'image', description: 'compressedImage', preview: true },
-    htm: { format: 'markup', description: 'documentWeb' },
     heic: { format: 'image', description: 'imageHEFF' },
+    htm: { format: 'markup', description: 'documentWeb' },
     html: { format: 'markup', description: 'documentWeb' },
     jpe: { format: 'image', description: 'compressedImage', preview: true },
     jpeg: { format: 'image', description: 'compressedImage', preview: true },
@@ -32,9 +32,12 @@ const fileExtensionsDictionary = {
     mpg4: { format: 'video', description: 'videoSD' },
     mpg: { format: 'video', description: 'videoSD' },
     mpga: { format: 'audio', description: 'compressedAudio' },
+    odf: { format: 'document', description: 'openDocumentFormat' },
     odp: { format: 'slide', description: 'slideLO' },
     ods: { format: 'spreadsheet', description: 'spreadsheetLO' },
     odt: { format: 'text', description: 'documentLO' },
+    ole: { format: 'document', description: 'objectLinkingAndEmbedding' },
+    p7m: { format: 'certificate', description: 'documentDigitalSingnature' },
     pdf: { format: 'document', description: 'documentAdobe' },
     php: { format: 'code', description: 'filePHP' },
     png: { format: 'image', description: 'imagePNG', preview: true },
@@ -47,6 +50,7 @@ const fileExtensionsDictionary = {
     tar: { format: 'archive', description: 'uncompressedArchive' },
     tiff: { format: 'image', description: 'imageTIFF' },
     ts: { format: 'code', description: 'fileTS' },
+    tsd: { format: 'certificate', description: 'certificateTSD' },
     tsx: { format: 'code', description: 'fileTSX' },
     txt: { format: 'text', description: 'documentTXT' },
     wav: { format: 'audio', description: 'uncompressedAudio' },
@@ -54,66 +58,9 @@ const fileExtensionsDictionary = {
     xar: { format: 'archive', description: 'compressedArchive' },
     xls: { format: 'spreadsheet', description: 'spreadsheetMS' },
     xlsx: { format: 'spreadsheet', description: 'spreadsheetMS' },
+    xml: { format: 'markup', description: 'extensibleMarkupLanguage' },
     zip: { format: 'archive', description: 'compressedArchive' },
 };
-// const fileExtensionsDictionary: FileExtenstion = {
-//   '7z': { format: 'archive', description: 'Archivio compresso' },
-//   ace: { format: 'archive', description: 'Archivio compresso' },
-//   ai: { format: 'vector', description: 'Vettoriale Adobe Illustrator' },
-//   dart: { format: 'code', description: 'Dart' },
-//   db: { format: 'data', description: 'File di database' },
-//   default: { format: 'attachment', description: 'Formato sconosciuto' },
-//   dmg: { format: 'executable', description: 'Apple Disk Image' },
-//   doc: { format: 'text', description: 'Documento Microsoft Word' },
-//   docm: { format: 'text', description: 'Documento Microsoft Word' },
-//   docx: { format: 'text', description: 'Documento Microsoft Word Compresso' },
-//   eml: { format: 'email', description: 'E-mail di posta elettronica' },
-//   eps: { format: 'vector', description: 'Vettoriale Corel Draw' },
-//   exe: { format: 'executable', description: 'File eseguibile Windows' },
-//   flac: { format: 'audio', description: 'Audio non compresso' },
-//   gif: { format: 'image', description: 'Immagine compressa', preview: true },
-//   htm: { format: 'markup', description: 'Pagina web' },
-//   heic: { format: 'image', description: 'High Efficiency Image File Format' },
-//   html: { format: 'markup', description: 'Pagina web' },
-//   jpe: { format: 'image', description: 'Immagine compressa', preview: true },
-//   jpeg: { format: 'image', description: 'Immagine compressa', preview: true },
-//   jpg: { format: 'image', description: 'Immagine compressa', preview: true },
-//   js: { format: 'code', description: 'JavaScript' },
-//   json: { format: 'data', description: 'JavaScript Object Notation' },
-//   jsx: { format: 'code', description: 'JavaScript' },
-//   m2v: { format: 'video', description: 'Filmato SD' },
-//   mp2: { format: 'audio', description: 'Audio compresso' },
-//   mp3: { format: 'audio', description: 'Audio compresso' },
-//   mp4: { format: 'video', description: 'Filmato HD' },
-//   mp4v: { format: 'video', description: 'Filmato HD' },
-//   mpeg: { format: 'video', description: 'Filmato SD' },
-//   mpg4: { format: 'video', description: 'Filmato SD' },
-//   mpg: { format: 'video', description: 'Filmato SD' },
-//   mpga: { format: 'audio', description: 'Audio compresso' },
-//   odp: { format: 'slide', description: 'Slide di presentazione LibreOffice' },
-//   ods: { format: 'spreadsheet', description: 'Foglio di calcolo LibreOffice' },
-//   odt: { format: 'text', description: 'File di testo LibreOffice' },
-//   pdf: { format: 'document', description: 'Documento Adobe' },
-//   php: { format: 'code', description: 'Hypertext Preprocessor' },
-//   png: { format: 'image', description: 'Immagine Portable Network Graphics', preview: true },
-//   ppt: { format: 'slide', description: 'Slide di presentazione PowerPoint' },
-//   rar: { format: 'archive', description: 'Archivio compresso' },
-//   rtf: { format: 'text', description: 'Documento di testo Rich Text Format' },
-//   sass: { format: 'code', description: 'Syntactically Awesome StyleSheets' },
-//   shtml: { format: 'markup', description: 'Pagina web' },
-//   svg: { format: 'vector', description: 'Scalable Vector Graphics', preview: true },
-//   tar: { format: 'archive', description: 'Archivio non compresso' },
-//   tiff: { format: 'image', description: 'Tag Image File Format' },
-//   ts: { format: 'code', description: 'TypeScript' },
-//   tsx: { format: 'code', description: 'TypeScript Extended Syntax' },
-//   txt: { format: 'text', description: 'Documento di testo non formattato' },
-//   wav: { format: 'audio', description: 'Audio non compresso' },
-//   webp: { format: 'image', description: 'Immagine Web Picture', preview: true },
-//   xar: { format: 'archive', description: 'Archivio compresso' },
-//   xls: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
-//   xlsx: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
-//   zip: { format: 'archive', description: 'Archivio compresso' },
-// }
 const genericMimeToExt = new Map([
     ['image', ['.png', '.jpg', '.jpeg', '.tiff', '.webp', '.jpe', '.gif', '.heic']],
     ['audio', ['.mp2', '.mp3', '.mpga', '.wav', '.flac']],

package/dist/collection/fixtures/filenames.js

@@ -54,4 +54,65 @@ const filesList = [
     'wisconsin_bypassing_small.xar',
     'wooden.jsx',
 ];
-export { filesList, };
+const namedFilesList = {
+    '7z': 'frozen_haptic.7z',
+    'No extension file': 'this_is_an_extensionless_file',
+    'png with URL': 'https://i2.wp.com/clipart.info/images/ccovers/1495750818Apple-PNG-Clip-Art.png',
+    ace: 'sky_marketing.ace',
+    ai: 'foreground_overriding.ai',
+    db: 'matrix_black_hat.db',
+    default: 'copying.default',
+    dmg: 'protocol_designer.dmg',
+    doc: 'forges.doc',
+    docm: 'officer_somalia.docm',
+    docx: 'upgradable_gold.docx',
+    eml: 'brunei_logistical.eml',
+    eps: 'alarm_circuit_plastic.eps',
+    exe: 'rss_systematic_avon.exe',
+    flac: 'liaison_panel_central.flac',
+    gif: 'initiatives_group.gif',
+    htm: 'books_monetize_arizona.htm',
+    html: 'flexibility_auto_money.html',
+    jpe: 'intelligent_radical.jpe',
+    jpeg: 'iowa_installation.jpeg',
+    jpg: 'buckinghamshire_macao.jpg',
+    js: 'monitor.js',
+    json: 'calculating.json',
+    jsx: 'wooden.jsx',
+    m2v: 'interface_bedfordshire_solid.m2v',
+    mp2: 'explicit.mp2',
+    mp3: 'optimization_radical.mp3',
+    mp4: 'nebraska.mp4',
+    mp4v: 'reduced_regional_greenland.mp4v',
+    mpeg: 'impactful_alarm_handmade.mpeg',
+    mpg4: 'revolutionize.mpg4',
+    mpg: 'complexity_deposit.mpg',
+    mpga: 'ports_copy_granite.mpga',
+    odf: 'This is a file_to_read.odf',
+    odp: 'needs_based_solid.odp',
+    ods: 'compressing_black_colorado.ods',
+    odt: 'salad_compressing.odt',
+    ole: 'Document-RPF_Open-new.ole',
+    p7m: 'file with certificate from government.pdf.p7m',
+    pdf: 'connect_local_visualize.pdf',
+    php: 'fish.php',
+    png: 'awesome_orchestration.png',
+    ppt: 'gorgeous_manager_savings.ppt',
+    rar: 'unbranded.rar',
+    rtf: 'pound.rtf',
+    sass: 'open_source_gorgeous.sass',
+    shtml: 'brand.shtml',
+    svg: 'b2c_tan_sports.svg',
+    tar: 'graphic_frozen_bedfordshire.tar',
+    ts: 'forge_face.ts',
+    tsd: 'Marked file-7483274hy6Fg6R8.tsd',
+    txt: 'bedfordshire_iceland_identity.txt',
+    wav: 'synergistic.wav',
+    webp: 'open_source.webp',
+    xar: 'wisconsin_bypassing_small.xar',
+    xls: 'metrics_lempira_account.xls',
+    xlsx: 'hdd_navigate_panama.xlsx',
+    xml: 'Markup language.xml',
+    zip: 'tuna_table_fall.zip',
+};
+export { filesList, namedFilesList, };

package/dist/collection/type/animation.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/type/variant-file-format.js

@@ -3,6 +3,7 @@ import baselineAttachFile from "@icon/mi/baseline/attach-file.svg";
 import baselineAudiotrack from "@icon/mi/baseline/audiotrack.svg";
 import baselineTerminal from "@icon/mi/baseline/terminal.svg";
 import baselineInsertDriveFile from "@icon/mi/baseline/insert-drive-file.svg";
+import mdiLicense from "@icon/mdi/license.svg";
 import mdiHardDisk from "@icon/mdi/harddisk.svg";
 import baselineEmail from "@icon/mi/baseline/email.svg";
 import baselineWysiwyg from "@icon/mi/baseline/wysiwyg.svg";
@@ -26,6 +27,10 @@ const fileFormatsVariant = {
         icon: baselineAudiotrack,
         variant: 'violet',
     },
+    certificate: {
+        icon: mdiLicense,
+        variant: 'orange',
+    },
     code: {
         icon: baselineTerminal,
         variant: 'yellow',