@maggioli-design-system/magma 1.0.0-beta → 1.0.1

package/dist/collection/components/mds-chip/mds-chip.js

@@ -2,12 +2,23 @@ import { Host, h } from "@stencil/core";
 import miBaselineCancel from "@icon/mi/baseline/cancel.svg";
 import { setAttributeIfEmpty } from "../../common/aria";
 import { KeyboardManager } from "../../common/keyboard-manager";
+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";
 export class MdsChip {
     constructor() {
         this.km = new KeyboardManager();
-        this.handleClickableKeyboard = () => {
+        this.t = new Locale({
+            el: localeEl,
+            en: localeEn,
+            es: localeEs,
+            it: localeIt,
+        });
+        this.handleClickableKeyboard = (isClickable) => {
             var _a;
-            if (this.clickable) {
+            if (isClickable) {
                 const label = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.label');
                 this.km.addElement(label, 'label');
                 this.km.attachClickBehavior('label');
@@ -15,9 +26,9 @@ export class MdsChip {
             }
             this.km.detachClickBehavior('label');
         };
-        this.handleDeletableKeyboard = () => {
+        this.handleDeletableKeyboard = (isDeletable) => {
             var _a;
-            if (this.deletable) {
+            if (isDeletable) {
                 const deleteElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.button-delete');
                 this.km.addElement(deleteElement, 'delete');
                 this.km.attachClickBehavior('delete');
@@ -25,13 +36,13 @@ export class MdsChip {
             }
             this.km.detachClickBehavior('delete');
         };
-        this.handleClickableElement = () => {
+        this.handleClickableElement = (isClickable) => {
             var _a;
             const label = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.label');
             if (!label) {
                 return;
             }
-            if (this.clickable) {
+            if (isClickable) {
                 setAttributeIfEmpty(label, 'role', 'button');
                 label.addEventListener('click', this.onClickLabelHandler.bind(this));
                 return;
@@ -39,55 +50,77 @@ export class MdsChip {
             label.removeAttribute('role');
             label.removeEventListener('click', this.onClickLabelHandler.bind(this));
         };
-        this.handleDeletableElement = () => {
+        this.handleDeletableElement = (isDeletable) => {
             var _a;
             const deleteElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.button-delete');
             if (!deleteElement) {
                 return;
             }
-            if (this.deletable) {
-                setAttributeIfEmpty(deleteElement, 'aria-hidden', 'true');
+            if (isDeletable) {
                 deleteElement.addEventListener('click', this.onDeleteHandler.bind(this));
                 return;
             }
             deleteElement.removeAttribute('aria-hidden');
             deleteElement.removeEventListener('click', this.onDeleteHandler.bind(this));
         };
+        this.language = undefined;
         this.clickable = undefined;
         this.deletable = undefined;
-        this.deleteLabel = 'Rimuovi';
         this.disabled = false;
         this.icon = undefined;
         this.label = undefined;
         this.selected = false;
+        this.selectable = false;
+        this.variant = 'primary';
+        this.tone = 'strong';
+    }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+    }
+    handleSelectableProp(newValue) {
+        if (newValue) {
+            this.clickable = true;
+        }
+    }
+    handleClickableProp(newValue) {
+        this.handleClickableElement(newValue);
+        this.handleClickableKeyboard(newValue);
+    }
+    handleDeletableProp(newValue) {
+        this.handleDeletableElement(newValue);
+        this.handleDeletableKeyboard(newValue);
     }
     onClickLabelHandler(event) {
         this.clickLabelEvent.emit({ event, element: this.host });
+        if (this.selectable) {
+            this.selected = !this.selected;
+        }
     }
     onDeleteHandler(event) {
         this.deleteEvent.emit({ event, element: this.host });
     }
-    componentDidLoad() {
-        this.handleClickableElement();
-        this.handleClickableKeyboard();
-        this.handleDeletableElement();
-        this.handleDeletableKeyboard();
+    componentWillLoad() {
+        this.t.lang(this.host);
     }
-    componentDidUpdate() {
-        this.handleClickableElement();
-        this.handleClickableKeyboard();
-        this.handleDeletableElement();
-        this.handleDeletableKeyboard();
+    componentDidLoad() {
+        if (this.clickable) {
+            this.handleClickableElement(true);
+            this.handleClickableKeyboard(true);
+        }
+        if (this.deletable) {
+            this.handleDeletableElement(true);
+            this.handleDeletableKeyboard(true);
+        }
     }
     disconnectedCallback() {
         this.km.detachClickBehavior('label');
         this.km.detachClickBehavior('delete');
     }
     render() {
-        return (h(Host, { key: '22f2fbd25b4d673e396568e4edb3e1449e8fcc43', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon &&
-            h("div", { key: '283e098da89df91f6d1296cc2f90b2a5861de6f4', "aria-hidden": "true", class: "icon-area" }, h("mds-icon", { key: '4bb9e7e7abe4d14d1c897d5b27e5114a912388d9', class: "icon", name: this.icon })), this.clickable
-            ? h("mds-text", { class: "label focus-bounce", tabindex: "0", typography: "caption", truncate: "word" }, this.label)
-            : h("mds-text", { class: "label", typography: "caption", truncate: "word" }, this.label), this.deletable && h("mds-button", { key: '9e56e6e92ef10da0eb5d777ec7031a47bb4888af', class: "button-delete", icon: miBaselineCancel, onClick: this.onDeleteHandler.bind(this), title: `${this.deleteLabel} ${this.label}`, variant: "dark", tone: "quiet", size: "sm" })));
+        return (h(Host, { key: '67d05d7b187efe97dd8127ff49c32356553500d2', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon &&
+            h("div", { key: '10583c909ef3d3f346a65904c763cbc5582c1666', "aria-hidden": "true", class: "icon-area" }, h("mds-icon", { key: '5d6c3afd28d26951be06eaeee5a0b5414629b70f', class: "icon", name: this.icon })), this.clickable
+            ? h("mds-text", { class: "label label--interactive", tabindex: "0", typography: "caption", truncate: "word" }, this.label)
+            : h("mds-text", { class: "label", typography: "caption", truncate: "word" }, this.label), this.deletable && h("mds-button", { key: '9a865e47188bd6433019e5ac0ca43c67d6495cec', class: "button-delete", icon: miBaselineCancel, onClick: this.onDeleteHandler.bind(this), title: `${this.t.get('deleteLabel')} ${this.label}`, variant: "dark", tone: "quiet", size: "sm" })));
     }
     static get is() { return "mds-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -105,7 +138,7 @@ export class MdsChip {
         return {
             "clickable": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean | undefined",
@@ -118,7 +151,7 @@ export class MdsChip {
                     "text": "Adds ARIA support to the element if has interaction"
                 },
                 "attribute": "clickable",
-                "reflect": false
+                "reflect": true
             },
             "deletable": {
                 "type": "boolean",
@@ -137,24 +170,6 @@ export class MdsChip {
                 "attribute": "deletable",
                 "reflect": false
             },
-            "deleteLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "\"Rimuovi\" | undefined",
-                    "resolved": "\"Rimuovi\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Sets the cross icon accessibility label to perform cancel/delete action on element"
-                },
-                "attribute": "delete-label",
-                "reflect": false,
-                "defaultValue": "'Rimuovi'"
-            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -205,18 +220,18 @@ export class MdsChip {
                     "text": "The label displayed to the right of the component's icon"
                 },
                 "attribute": "label",
-                "reflect": false
+                "reflect": true
             },
             "selected": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Sets the component selected"
@@ -224,9 +239,80 @@ export class MdsChip {
                 "attribute": "selected",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets if the component change is status to selected when is clicked"
+                },
+                "attribute": "selectable",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChipVariantType",
+                    "resolved": "\"dark\" | \"error\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\" | undefined",
+                    "references": {
+                        "ChipVariantType": {
+                            "location": "import",
+                            "path": "@type/variant",
+                            "id": "src/type/variant.ts::ChipVariantType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the color variant of the component"
+                },
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "'primary'"
+            },
+            "tone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToneMinimalVariantType",
+                    "resolved": "\"strong\" | \"weak\" | undefined",
+                    "references": {
+                        "ToneMinimalVariantType": {
+                            "location": "import",
+                            "path": "@type/variant",
+                            "id": "src/type/variant.ts::ToneMinimalVariantType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the color variant tone of the component"
+                },
+                "attribute": "tone",
+                "reflect": true,
+                "defaultValue": "'strong'"
             }
         };
     }
+    static get states() {
+        return {
+            "language": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "clickLabelEvent",
@@ -272,5 +358,38 @@ export class MdsChip {
                 }
             }];
     }
+    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"; }
+    static get watchers() {
+        return [{
+                "propName": "selectable",
+                "methodName": "handleSelectableProp"
+            }, {
+                "propName": "clickable",
+                "methodName": "handleClickableProp"
+            }, {
+                "propName": "deletable",
+                "methodName": "handleDeletableProp"
+            }];
+    }
 }

package/dist/collection/components/mds-chip/test/mds-chip.stories.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { iconsDictionary } from "../../../dictionary/icon";
+import { themeVariantChipDictionary, toneMinimalVariantDictionary } from "../../../dictionary/variant";
 export default {
     title: 'UI / Chip',
     argTypes: {
@@ -29,6 +30,22 @@ export default {
             type: { name: 'boolean' },
             description: 'Sets the component selected',
         },
+        selectable: {
+            type: { name: 'boolean' },
+            description: 'Sets if the component change is status to selected when is clicked',
+        },
+        tone: {
+            type: { name: 'string' },
+            options: toneMinimalVariantDictionary,
+            control: { type: 'select' },
+            description: 'Sets the color variant tone of the component',
+        },
+        variant: {
+            type: { name: 'string' },
+            options: themeVariantChipDictionary,
+            control: { type: 'select' },
+            description: 'Sets the color variant of the component',
+        },
     },
 };
 const Template = args => h("mds-chip", Object.assign({}, args, { onDelete: () => { console.info('onDelete'); } }));
@@ -37,8 +54,8 @@ Default.args = {
     label: 'Bovaro del Bernese',
     icon: 'mi/baseline/pets',
 };
-export const selected = Template.bind({});
-selected.args = {
+export const Selected = Template.bind({});
+Selected.args = {
     label: 'Bovaro del Bernese',
     icon: 'mi/baseline/pets',
     selected: true,
@@ -48,18 +65,20 @@ Icon.args = {
     label: 'Bovaro del Bernese',
     icon: 'mi/baseline/eco',
 };
-export const deletable = Template.bind({});
-deletable.args = {
+export const Deletable = Template.bind({});
+Deletable.args = {
     deletable: true,
     label: 'Bovaro del Bernese',
 };
-export const clickable = Template.bind({});
-clickable.args = {
+export const Clickable = Template.bind({});
+Clickable.args = {
     clickable: true,
+    selectable: true,
+    icon: 'mi/baseline/eco',
     label: 'Hover me to interact',
 };
-export const fullyInteractive = Template.bind({});
-fullyInteractive.args = {
+export const FullyInteractive = Template.bind({});
+FullyInteractive.args = {
     clickable: true,
     deletable: true,
     icon: 'mi/baseline/downhill-skiing',

package/dist/collection/components/mds-details/mds-details.css

@@ -19,7 +19,7 @@
 :host {
 
   --mds-details-duration: 300ms;
-  --mds-details-icon-color: rgb(var(--brand-maggioli-04));
+  --mds-details-icon-color: rgb(var(--variant-primary-04));
   --mds-details-helper-icon-color: rgb(var(--tone-neutral-03));
   gap: 0.5rem;
 
@@ -56,6 +56,7 @@
 
   grid-template-rows: 1fr;
   opacity: 1;
+  overflow: visible;
   pointer-events: auto;
 }
 
@@ -128,7 +129,7 @@
 @container style(--magma-pref-contrast: more) {
   :host {
 
-    --mds-details-icon-color: rgb(var(--brand-maggioli-03));
+    --mds-details-icon-color: rgb(var(--variant-primary-03));
     --mds-details-helper-icon-color: rgb(var(--tone-neutral-02));
   }
 }
@@ -138,7 +139,7 @@
   @media (prefers-contrast: more) {
     :host {
 
-      --mds-details-icon-color: rgb(var(--brand-maggioli-03));
+      --mds-details-icon-color: rgb(var(--variant-primary-03));
       --mds-details-helper-icon-color: rgb(var(--tone-neutral-02));
     }
   }

package/dist/collection/components/mds-dropdown/mds-dropdown.js

@@ -1,4 +1,4 @@
-import { hashValue, setAttributeIfEmpty } from "../../common/aria";
+import { setAttributeIfEmpty } from "../../common/aria";
 import { KeyboardManager } from "../../common/keyboard-manager";
 import { cssDurationToMilliseconds } from "../../common/unit";
 import { arrow, autoPlacement, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
@@ -162,6 +162,8 @@ export class MdsDropdown {
             });
         };
         this.updateCSSCustomProps = () => {
+            if (typeof window === 'undefined')
+                return;
             const elementStyles = window.getComputedStyle(this.host);
             this.cssBackdropDuration = elementStyles.getPropertyValue('--mds-dropdown-backdrop-duration');
             this.cssBackdropZIndex = elementStyles.getPropertyValue('--mds-dropdown-backdrop-z-index');
@@ -282,20 +284,20 @@ export class MdsDropdown {
         this.zIndexChanged(this.zIndex);
     }
     setAriaAttributes() {
-        const hostId = setAttributeIfEmpty(this.host, 'id', hashValue(this.target));
         setAttributeIfEmpty(this.caller, 'aria-haspopup', 'true');
-        setAttributeIfEmpty(this.caller, 'aria-controls', hostId);
+        setAttributeIfEmpty(this.caller, 'aria-controls', this.target);
         setAttributeIfEmpty(this.host, 'role', 'menu');
         setAttributeIfEmpty(this.host, 'aria-labelledby', this.target);
     }
     componentDidLoad() {
-        var _a;
+        var _a, _b, _c, _d;
         this.updateCSSCustomProps();
         document.addEventListener('click', this.handleCloseDropdown);
         this.arrowEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.arrow');
-        const caller = document.querySelector(this.target);
+        // search caller in document or rootNode of host (if target is in shadowDOM)
+        const caller = (_d = (_c = (_b = this.host.parentElement) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(this.target)) !== null && _d !== void 0 ? _d : this.host.getRootNode().querySelector(this.target);
         if (!caller) {
-            return;
+            throw Error(`Target not found: ${this.target}`);
         }
         this.caller = caller;
         this.setAriaAttributes();
@@ -314,7 +316,7 @@ export class MdsDropdown {
         this.cleanupAutoUpdate = () => { return; };
     }
     render() {
-        return (h(Host, { key: 'b1382fc00ca8b6d85b2e964d186c5ea23690e711' }, h("div", { key: '8d6e5e0765eb816873b290c0eabbbc5c13ff7f7b', class: "arrow", innerHTML: arrowSvg }), h("slot", { key: 'f61ea6eabe97b1a680ad458f6a40d1b80aa99ebc' })));
+        return (h(Host, { key: 'aee79e7c76205417090673bbbe9d875065764eb3' }, h("div", { key: '9b310fb9655866a581df3ecd043e24da86fabd6c', class: "arrow", innerHTML: arrowSvg }), h("slot", { key: '206e6aff41805e57c06fbccab2aa9ca595c312ae' })));
     }
     static get is() { return "mds-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-entity/mds-entity.js

@@ -34,10 +34,10 @@ export class MdsEntity {
         this.actions = this.hostElement.querySelector('[slot="action"]') !== null;
     }
     render() {
-        return (h(Host, { key: '01450fc640fd689dd077e452f1440bd2ca42b3fa' }, h("div", { key: '2da1bfb8261436830c03c2e0ef2fc3f64601c86d', class: "spinner" }, h("mds-spinner", { key: '7edcea6a4cd7acb38c55b0cdbb30c4380a499014', running: true })), this.checkAvatar() &&
-            h("mds-avatar", { key: '30ffe987e664e045ea6c1209fdd364577cfb1968', class: "preview", icon: this.icon, initials: this.initials, src: this.src, tone: this.tone, variant: this.variant }), h("div", { key: '0b514397256ab2f7007b1777b1f75f4ab04af6bd', class: "infos" }, h("slot", { key: '734f2c4afc519b8d256ee7039d9961581f291016' }), this.details &&
-            h("div", { key: '88e8b8f03c66e0dbf911faf08b9e89bc44b5d324', class: "details" }, h("slot", { key: '68f396fd9453b47f6062f2b8c4dea7cd564b959b', name: "detail" }))), this.actions &&
-            h("div", { key: 'cc227d492271e5d1f1c5c4817ebfc68a1a28862f', class: "actions" }, h("slot", { key: '0c2fc6b7bf1909a95b8094fd20c0c6a0ef89eff2', name: "action" }))));
+        return (h(Host, { key: '9391672c7ecfde903e03798d210760e52370c90b' }, h("div", { key: 'fab671cb638c283a8ea3648aee9c9188512e8fa0', class: "spinner" }, h("mds-spinner", { key: 'baed37a926e1f606b41fb85b24be7728f671ab54', running: true })), this.checkAvatar() &&
+            h("mds-avatar", { key: '380ed5fdef281b9e9338e4beeecffa4ef9bae7b5', class: "preview", icon: this.icon, initials: this.initials, src: this.src, tone: this.tone, variant: this.variant }), h("div", { key: 'd876fe0ce1f53eec1cc1062e5c38b82d67b3bd89', class: "infos" }, h("slot", { key: '949113bb0e3dbf092e6604358544630440a43740' }), this.details &&
+            h("div", { key: '7635a1805fa615b2907e3b89fffa250db9b71dce', class: "details" }, h("slot", { key: 'a6b8ff76384000ebc4b1684b3b888d7dd60cafd3', name: "deuploadtail" }))), this.actions &&
+            h("div", { key: '11c50375bc0e9ea56989d7549e95b99a6db191c7', class: "actions" }, h("slot", { key: '653e308b14d27197b9c945269190030984ac2ebd', name: "action" }))));
     }
     static get is() { return "mds-entity"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-entity/test/mds-entity.stories.js

@@ -37,8 +37,8 @@ export default {
         },
     },
 };
-const Template = args => h("mds-entity", Object.assign({}, args, { "aria-label": "Personaggio" }), h("mds-text", { truncate: "word", "aria-label": "Nome", typography: "h6" }, "Mario Rossi"), h("mds-badge", { "aria-label": "Carattere", slot: "detail", variant: "orange", tone: "weak" }, "buono"), h("mds-text", { truncate: "word", "aria-label": "Email", slot: "detail", typography: "caption" }, "mario@nintendo.com"), h("mds-button", { onClick: () => { console.info('Restore'); }, slot: "action", icon: "mdi/replay", variant: "primary", tone: "strong", title: "Restore" }), h("mds-button", { onClick: () => { console.info('Delete'); }, slot: "action", icon: "mdi/delete", variant: "error", tone: "strong", title: "Delete" }));
-const TemplateLocation = args => h("mds-entity", Object.assign({}, args, { "aria-label": "Luogo" }), h("mds-text", { truncate: "word", "aria-label": "Nome", typography: "h6" }, "Maggioli Headquarters"), h("mds-text", { truncate: "word", "aria-label": "Strada", slot: "detail", typography: "caption" }, "Via Pinelli 64, Santarcangelo di Romanga, Italy"), h("mds-button", { slot: "action", icon: "mdi/map-marker", variant: "primary", tone: "strong", title: "Go to Google Maps" }));
+const Template = args => h("mds-entity", Object.assign({}, args, { "aria-label": "Personaggio" }), h("mds-text", { truncate: "word", "aria-label": "Nome", role: "text", typography: "h6" }, "Mario Rossi"), h("mds-badge", { "aria-label": "Carattere", role: "text", slot: "detail", variant: "orange", tone: "weak" }, "buono"), h("mds-text", { truncate: "word", "aria-label": "Email", role: "text", slot: "detail", typography: "caption" }, "mario@nintendo.com"), h("mds-button", { onClick: () => { console.info('Restore'); }, slot: "action", icon: "mdi/replay", variant: "primary", tone: "strong", title: "Restore" }), h("mds-button", { onClick: () => { console.info('Delete'); }, slot: "action", icon: "mdi/delete", variant: "error", tone: "strong", title: "Delete" }));
+const TemplateLocation = args => h("mds-entity", Object.assign({}, args, { "aria-label": "Luogo" }), h("mds-text", { truncate: "word", typography: "h6", title: "Nome" }, "Maggioli Headquarters"), h("mds-text", { truncate: "word", title: "Strada", slot: "detail", typography: "caption" }, "Via Pinelli 64, Santarcangelo di Romanga, Italy"), h("mds-button", { slot: "action", icon: "mdi/map-marker", variant: "primary", tone: "strong", title: "Go to Google Maps" }));
 const TemplateDownload = args => {
     const [isUploading, setUpload] = useState(true);
     const [isComplete, setUploadComplete] = useState(false);
@@ -50,7 +50,7 @@ const TemplateDownload = args => {
         message = 'Upload annullato';
     }
     if (isComplete) {
-        message = 'Upload comlpetato con successo';
+        message = 'Upload completato con successo';
     }
     return h("div", { class: "grid gap-400 grid-cols-full" }, h("mds-entity", Object.assign({ await: isUploading && !isComplete, icon: isComplete ? 'mi/baseline/done' : 'mi/baseline/remove-circle', variant: isComplete ? 'success' : 'warning' }, args, { "aria-label": "File" }), h("mds-text", { truncate: "word", "aria-label": "Nome", typography: "h6" }, "Report finanziario 2024.docx"), h("mds-text", { truncate: "word", "aria-label": "Stato caricamento", slot: "detail", typography: "caption" }, message), isUploading && !isComplete && h("mds-button", { onClick: () => setUpload(false), slot: "action", icon: "mi/baseline/cancel", variant: "light", title: "Annulla upload" })), h("div", { class: "flex gap-400 flex-wrap justify-between" }, h("mds-button", { onClick: () => { setUploadComplete(false); setUpload(true); }, variant: "dark", tone: "ghost" }, "Riavvia"), h("mds-button", { onClick: () => { setUploadComplete(true); } }, "Completa upload")));
 };

package/dist/collection/components/mds-file/mds-file.js

@@ -2,9 +2,24 @@ import { Host, h } from "@stencil/core";
 import { MD5 } from "crypto-js";
 import { getFormatsVariant, getName, getSuffix, getExtensionInfos } from "../../common/file";
 import miBaselineFileDownloadDone from "@icon/mi/baseline/file-download-done.svg";
+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";
+import fileDescriptionLocaleEl from "../../meta/file-format/locale.el";
+import fileDescriptionLocaleEn from "../../meta/file-format/locale.en";
+import fileDescriptionLocaleEs from "../../meta/file-format/locale.es";
+import fileDescriptionLocaleIt from "../../meta/file-format/locale.it";
 // https://stackoverflow.com/questions/1106377/detect-when-a-browser-receives-a-file-download
 export class MdsFile {
     constructor() {
+        this.t = new Locale({
+            el: Object.assign(Object.assign({}, localeEl), fileDescriptionLocaleEl),
+            en: Object.assign(Object.assign({}, localeEn), fileDescriptionLocaleEn),
+            es: Object.assign(Object.assign({}, localeEs), fileDescriptionLocaleEs),
+            it: Object.assign(Object.assign({}, localeIt), fileDescriptionLocaleIt),
+        });
         this.handleOnClick = () => {
             var _a;
             const { format, description } = getExtensionInfos(this.filename, this.suffix);
@@ -17,17 +32,21 @@ export class MdsFile {
             this.wasDownloaded = localStorage.getItem(filename) === 'downloaded';
         };
         this.getDefaultDescription = () => getExtensionInfos(this.filename, this.suffix).description;
+        this.language = undefined;
         this.wasDownloaded = false;
         this.suffix = undefined;
         this.description = undefined;
-        this.downloadedLabel = 'Hai già scaricato questo file';
         this.filename = undefined;
         this.preview = undefined;
         this.showDownloadedIcon = true;
         this.format = undefined;
     }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+    }
     componentWillLoad() {
         this.checkWasDownloaded();
+        this.t.lang(this.host);
         this.format = getExtensionInfos(this.filename, this.suffix).format;
     }
     componentDidUpdate() {
@@ -38,10 +57,10 @@ export class MdsFile {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '7c22b0d19959dae1be9e3dec6fd77b0c0b0e520a', tabindex: "0", onClick: this.handleOnClick }, h("div", { key: '47fee84031dd385d9304645f0009389ab6e46eb3', class: "preview" }, this.preview !== undefined
+        return (h(Host, { key: 'fea56400bff2657114cfd7b9785b72762a143663', tabindex: "0", onClick: this.handleOnClick }, h("div", { key: '38d5f835886aef86afcea6b2fd779d459de97a9d', class: "preview" }, this.preview !== undefined
             ? h("div", { class: "image-preview", style: { backgroundImage: `url(${this.preview})` } })
-            : h("mds-icon", { name: getFormatsVariant(this.filename, this.suffix).icon })), h("div", { key: 'f8ddcbe438e0e32d8de390a6fbe981acab7b620d', class: "info" }, h("div", { key: '26f2abc8f8bbd4efc685dc992034fcc837cdf74a', class: "filename", title: this.filename }, h("mds-text", { key: '4061d3a614ab93fcc4e2a4456c398e94548f3ded', truncate: "word", typography: "h6", class: "name" }, getName(this.filename)), this.suffix === undefined && getSuffix(this.filename, this.suffix) && h("mds-text", { key: 'a7b04cb0ba0fed672f49b1b69290035f91e0336a', typography: "h6", class: "extension" }, ".", getSuffix(this.filename, this.suffix))), h("div", { key: '427a23302fafc57e45bd48225dd7d4f40535d7ab', class: "detail" }, getSuffix(this.filename, this.suffix) && h("mds-badge", { key: '052cadf6b4606299c0a6fbf62661f392359e5bd5', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix" }, getSuffix(this.filename, this.suffix)), h("mds-text", { key: '69e1d6b269b9d4e45a61eaa7cb881028679211ad', truncate: "word", typography: "caption", class: "description", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.getDefaultDescription() }, (_b = this.description) !== null && _b !== void 0 ? _b : this.getDefaultDescription()))), this.wasDownloaded && this.showDownloadedIcon &&
-            h("div", { key: '1f42d06c98288135cffca505852361710c015dab', class: "indicator" }, h("i", { key: '953081017f62f781758ba314d4f314ca06da5ad9', class: "downloaded", innerHTML: miBaselineFileDownloadDone, title: this.downloadedLabel }))));
+            : h("mds-icon", { name: getFormatsVariant(this.filename, this.suffix).icon })), h("div", { key: 'dc913aee8aeeeb51e261bcac7519361d762b45c2', class: "info" }, h("div", { key: '23cce7c93bfe95e2e29fd16e352c8592e79b4a88', class: "filename", title: this.filename }, h("mds-text", { key: 'b7552213276990fe8d4e71faf3b41787da41e9fd', truncate: "word", typography: "h6", class: "name" }, getName(this.filename)), this.suffix === undefined && getSuffix(this.filename, this.suffix) && h("mds-text", { key: '82ff59e493ae2f35b87c093549c4d7f34ebf6c55', typography: "h6", class: "extension" }, ".", getSuffix(this.filename, this.suffix))), h("div", { key: '56b038b3f17d140a841ef998633b5519df873c91', class: "detail" }, getSuffix(this.filename, this.suffix) && h("mds-badge", { key: '3d96163232a0b5d77555e903d3e237b978ec7f43', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix" }, getSuffix(this.filename, this.suffix)), h("mds-text", { key: 'cd52271f23a549b089de4bcc6bac4ee7ee61198e', truncate: "word", typography: "caption", class: "description", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultDescription()) }, (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultDescription())))), this.wasDownloaded && this.showDownloadedIcon &&
+            h("div", { key: 'f0ab2874f31232ebfdae120a9fc9c2bb018f8819', class: "indicator" }, h("i", { key: '39d48760d3134793d0bca763d27f272cee30f2f8', class: "downloaded", innerHTML: miBaselineFileDownloadDone, title: this.t.get('alreadyDownloaded') }))));
     }
     static get is() { return "mds-file"; }
     static get encapsulation() { return "shadow"; }
@@ -97,24 +116,6 @@ export class MdsFile {
                 "attribute": "description",
                 "reflect": false
             },
-            "downloadedLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Sets a label which is shown when the file is downloaded"
-                },
-                "attribute": "downloaded-label",
-                "reflect": false,
-                "defaultValue": "'Hai gi\u00E0 scaricato questo file'"
-            },
             "filename": {
                 "type": "string",
                 "mutable": false,
@@ -188,6 +189,7 @@ export class MdsFile {
     }
     static get states() {
         return {
+            "language": {},
             "wasDownloaded": {}
         };
     }
@@ -215,6 +217,27 @@ export class MdsFile {
                 }
             }];
     }
+    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"; }
     static get watchers() {
         return [{