@maggioli-design-system/mds-input-range 2.0.1 → 2.1.1

package/dist/collection/common/floating-controller.js

@@ -0,0 +1,180 @@
+import { arrow, autoPlacement, autoUpdate, computePosition, flip, offset, shift, } from "@floating-ui/dom";
+import { cssDurationToMilliseconds } from "./unit";
+import { setAttributeIfEmpty } from "./aria";
+export class FloatingController {
+    constructor(host, arrowEl) {
+        this.arrowInset = (middleware, arrowPosition) => {
+            const { arrow } = middleware;
+            const inset = { bottom: '', left: '', right: '', top: '' };
+            if (arrow === undefined) {
+                return {};
+            }
+            switch (arrowPosition) {
+                case 'bottom':
+                    inset.left = arrow.x !== null ? `${arrow.x}px` : '';
+                    inset.top = '100%';
+                    break;
+                case 'left':
+                    inset.right = '100%';
+                    inset.top = arrow.y !== null ? `${arrow.y}px` : '';
+                    break;
+                case 'right':
+                    inset.left = '100%';
+                    inset.top = arrow.y !== null ? `${arrow.y}px` : '';
+                    break;
+                case 'top':
+                    inset.left = arrow.x !== null ? `${arrow.x}px` : '';
+                    inset.top = '';
+                    break;
+                default:
+                    break;
+            }
+            return inset;
+        };
+        this.arrowTransform = (arrowPosition) => {
+            let transformProps = this._host.arrow && this._host.visible ? 'scale(1)' : 'scale(0)';
+            switch (arrowPosition) {
+                case 'bottom':
+                    transformProps = `rotate(180deg) ${transformProps} translate(0, -100%)`;
+                    break;
+                case 'left':
+                    transformProps = `rotate(-90deg) ${transformProps} translate(50%, -50%)`;
+                    break;
+                case 'right':
+                    transformProps = `rotate(90deg) ${transformProps} translate(-50%, -50%)`;
+                    break;
+                case 'top':
+                    transformProps = `rotate(0deg) ${transformProps} translate(0, 0)`;
+                    break;
+                default:
+                    break;
+            }
+            return { transform: transformProps };
+        };
+        this.arrowTransformOrigin = (arrowPosition) => {
+            switch (arrowPosition) {
+                case 'bottom':
+                    return { transformOrigin: 'center top' };
+                case 'left':
+                    return { transformOrigin: 'right center' };
+                case 'right':
+                    return { transformOrigin: 'left center' };
+                case 'top':
+                    return { transformOrigin: 'center bottom' };
+                default:
+                    return { transformOrigin: 'center top' };
+            }
+        };
+        this.calculatePosition = () => {
+            if (!this._caller)
+                return;
+            const middleware = new Array();
+            const config = {};
+            if (this._host.shiftPadding) {
+                config.padding = this._host.shiftPadding;
+            }
+            if (this._host.autoPlacement) {
+                middleware.push(autoPlacement());
+            }
+            if (this._host.offset) {
+                middleware.push(offset(this._host.offset));
+            }
+            if (!this._host.autoPlacement && this._host.flip) {
+                middleware.push(flip(config));
+            }
+            if (this._host.shift) {
+                middleware.push(shift(config));
+            }
+            if (this.arrowEl && this._host.arrow) {
+                middleware.push(arrow({
+                    element: this.arrowEl,
+                    padding: this._host.arrowPadding,
+                }));
+            }
+            computePosition(this._caller, this._host, {
+                middleware,
+                placement: this._host.placement,
+                strategy: this._host.strategy,
+            }).then(({ x, y, placement, middlewareData }) => {
+                Object.assign(this._host.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                });
+                const arrowStyle = {};
+                const arrowPosition = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right',
+                }[placement.split('-')[0]];
+                if (arrowPosition && this.arrowEl) {
+                    Object.assign(arrowStyle, this.arrowTransform(arrowPosition));
+                    Object.assign(arrowStyle, this.arrowInset(middlewareData, arrowPosition));
+                    Object.assign(arrowStyle, this.arrowTransformOrigin(arrowPosition));
+                    Object.assign(this.arrowEl.style, arrowStyle);
+                }
+            });
+        };
+        this._host = host;
+        this.arrowEl = arrowEl;
+    }
+    updateCaller(target) {
+        var _a, _b, _c;
+        // search caller in document or rootNode of host (if target is in shadowDOM)
+        const caller = (_c = (_b = (_a = this._host.parentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(target)) !== null && _c !== void 0 ? _c : this._host.getRootNode().querySelector(target);
+        if (!caller) {
+            throw Error(`Target not found: ${target}`);
+        }
+        this._caller = caller;
+        setAttributeIfEmpty(this._caller, 'aria-haspopup', 'true');
+        setAttributeIfEmpty(this._caller, 'aria-controls', target);
+        setAttributeIfEmpty(this._host, 'role', 'menu');
+        setAttributeIfEmpty(this._host, 'aria-labelledby', target);
+        return caller;
+    }
+    updatePosition() {
+        if (this.cleanupAutoUpdate)
+            this.cleanupAutoUpdate();
+        this.cleanupAutoUpdate = autoUpdate(this._caller, this._host, this.calculatePosition);
+    }
+    dismiss() {
+        this.cleanupAutoUpdate();
+    }
+}
+export class Backdrop {
+    constructor(backdropId) {
+        this.defaultBackdropId = 'mds-backdrop';
+        this.backdropBackgroundVisible = 'rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))';
+        this.backdropBackgroundHidden = 'rgba(var(--magma-backdrop-color, 0 0 0) / 0)';
+        this.backdropId = backdropId !== null && backdropId !== void 0 ? backdropId : this.defaultBackdropId;
+        this.cssBackdropZIndex = `var(--${this.backdropId}-z-index)`;
+        this.cssBackdropDuration = `var(--${this.backdropId}-duration)`;
+    }
+    attachBackdrop() {
+        if (!this.backdropEl) {
+            this.backdropEl = document.createElement('div');
+            this.backdropEl.className = this.backdropId;
+            this.backdropEl.style.inset = '0';
+            this.backdropEl.style.pointerEvents = 'none';
+            this.backdropEl.style.position = 'fixed';
+            this.backdropEl.style.transition = `background-color ${this.cssBackdropDuration} ease-out`;
+            this.backdropEl.style.zIndex = this.cssBackdropZIndex;
+        }
+        this.backdropEl.style.backgroundColor = this.backdropBackgroundHidden;
+        document.body.appendChild(this.backdropEl);
+        clearTimeout(this.backdropTimer);
+        this.backdropTimer = setTimeout(() => {
+            this.backdropEl.style.backgroundColor = this.backdropBackgroundVisible;
+        }, 1);
+    }
+    detachBackdrop() {
+        if (!this.backdropEl) {
+            return;
+        }
+        this.backdropEl.style.backgroundColor = 'transparent';
+        clearTimeout(this.backdropTimer);
+        this.backdropTimer = setTimeout(() => {
+            this.backdropEl.remove();
+        }, cssDurationToMilliseconds(this.cssBackdropDuration));
+    }
+}

package/dist/collection/common/slot.js

@@ -0,0 +1,19 @@
+const hasSlottedElements = (el, name) => {
+    var _a;
+    const query = name ? `slot[name="${name}"]` : 'slot:not([name])';
+    const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(query);
+    if (slot) {
+        return slot.assignedElements({ flatten: true }).length > 0;
+    }
+    return false;
+};
+const hasSlottedNodes = (el, name) => {
+    var _a;
+    const query = name ? `slot[name="${name}"]` : 'slot:not([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, hasSlottedNodes, };

package/dist/collection/components/mds-input-range/mds-input-range.css

@@ -24,11 +24,15 @@
   --mds-input-range-thumb-size: 1rem;
   --mds-input-range-thumb-background: rgb(var(--variant-primary-04));
   --mds-input-range-thumb-shadow: 0 0 0 2px rgb(var(--tone-neutral));
-  --mds-input-range-track-background: rgb(var(--tone-neutral-09));
+  --mds-input-range-track-background: rgb(var(--tone-neutral-08));
   --mds-input-range-track-size: 0.5rem;
   --mds-input-range-track-progress-background: rgb(var(--variant-primary-03));
+  --mds-input-range-thumb-background-disabled: rgb(var(--tone-neutral-06));
+  --mds-input-range-track-background-disabled: rgb(var(--tone-neutral-08));
+  --mds-input-range-track-progress-background-disabled: rgb(var(--tone-neutral-06));
   gap: 0.25rem;
-  transition-duration: 200ms;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
   display: grid;
   transition-property: color;
@@ -111,7 +115,11 @@
   }
 
 .field::-webkit-slider-thumb {
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
   -webkit-appearance: none;
+
           appearance: none;
   background-color: var(--mds-input-range-thumb-background);
   border: 0;
@@ -121,6 +129,8 @@
   height: var(--mds-input-range-thumb-size);
   line-height: 0;
   transform: translate(0, -50%);
+  -webkit-transition-property: background-color, box-shadow;
+  transition-property: background-color, box-shadow;
   width: var(--mds-input-range-thumb-size);
 }
 
@@ -162,6 +172,16 @@
   border-radius: var(--mds-input-range-track-size);
 }
 
+:host([disabled]:not([disabled="false"])) {
+  --mds-input-range-thumb-background: var(--mds-input-range-thumb-background-disabled);
+  --mds-input-range-track-background: var(--mds-input-range-track-background-disabled);
+  --mds-input-range-track-progress-background: var(--mds-input-range-track-progress-background-disabled);
+}
+
+:host([disabled]:not([disabled="false"])) .field::-webkit-slider-thumb {
+  cursor: not-allowed;
+}
+
 @tailwind utilities;
 
 @container style(--magma-pref-animation: reduce) {

package/dist/collection/components/mds-input-range/mds-input-range.js

@@ -4,15 +4,23 @@ import { Host, h } from "@stencil/core";
  */
 export class MdsInputRange {
     constructor() {
+        /**
+         * The greatest value in the range of permitted values
+         */
+        this.max = 100;
+        /**
+         * The lowest value in the range of permitted values
+         */
+        this.min = 0;
+        /**
+         * The step attribute is a number that specifies the granularity that
+         * the value must adhere to, or the special value any, which is described below.
+         */
+        this.step = 1;
         this.onInput = () => {
             // trigger valueChanged that update progress and emit event
             this.value = parseInt(this.inputElement.value);
         };
-        this.progress = undefined;
-        this.max = 100;
-        this.min = 0;
-        this.step = 1;
-        this.value = undefined;
     }
     calculateProgress() {
         // validate value
@@ -29,6 +37,16 @@ export class MdsInputRange {
         const current = this.value - this.min;
         this.progress = current * 100 / total;
     }
+    disabledChanged(newValue) {
+        /**
+         * This is related to ALL disabled attributes set on Magma input components
+         * if solved, please check mds-button, mds-input, mds-input-*
+         * https://github.com/ionic-team/stencil/issues/5461
+         */
+        if (newValue) {
+            this.internals.setFormValue(null);
+        }
+    }
     valueChanged() {
         this.inputElement.value = this.value.toString();
         this.calculateProgress();
@@ -45,6 +63,9 @@ export class MdsInputRange {
             throw Error('step cant be negative or zero');
         this.calculateProgress();
     }
+    formResetCallback() {
+        this.internals.setFormValue('');
+    }
     componentDidLoad() {
         var _a, _b;
         this.label = (_a = this.element.textContent) !== null && _a !== void 0 ? _a : '';
@@ -53,7 +74,7 @@ export class MdsInputRange {
         this.calculateProgress();
     }
     render() {
-        return (h(Host, { key: '4f58f56b2bf1af905741bbcab323e583dd907a35' }, h("header", { key: '69a2e6c483558f0ce70eca8e1ec45f4ce7f63b10', class: "header", part: "header" }, h("mds-text", { key: '1d5f89b89f5bdf1ca6746567eb23d2b96444c2d9', class: "label", typography: "label" }, h("slot", { key: '534eb663ff412980069c4308a2a15a784e2bf1cf' })), h("mds-text", { key: 'e187c33fb9124f1d20032c822b535d0ddc839fe3', class: "value", typography: "label" }, this.value)), h("div", { key: 'fb3245af7eefbab656b68810577d77a328e312c5', class: "range" }, h("div", { key: 'f146b8b59fbd5bbb3db2350d94686fad986b4dfc', class: "track" }, h("div", { key: '04aaec03384f51e3ad2ad8cc695274c36062d6bf', class: "contrast-area" }), h("div", { key: '2de981fb668e8056a24ca82163dca106fcc5878e', class: "track-total" }, h("div", { key: '2044a5ce25454e56d950c2c7f68ce11369babd87', class: "track-progress", style: { width: `${this.progress}%` } }))), h("input", { key: '423eb3d5b176748d0376374888c7ef3298dc54d9', class: "field", "aria-label": this.label, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
+        return (h(Host, { key: 'e1cf60063d451ad99e6e4943412119634a261dc6' }, h("header", { key: '786ee56712c0d48fce3b0107bf44e1a4e39a5cb2', class: "header", part: "header" }, h("mds-text", { key: 'b51d53ca91e1a39431b851dcefdbda983ae59a60', class: "label", typography: "label" }, h("slot", { key: '1e8a604c35454992794958088051f5074504a3cf' })), h("mds-text", { key: '64cdd428f13f52a6964ab55527707a74ef98d560', class: "value", typography: "label" }, this.value)), h("div", { key: '00f8ad9cd7bdaff91a766d7c8e50a5ad65b4983a', class: "range" }, h("div", { key: '64e70fc8df3951015535b0e0bee0177089c9c399', class: "track" }, h("div", { key: '255824ff26075a8da7e176f03e8a2e99d8e754e5', class: "contrast-area" }), h("div", { key: 'a5d3f15b29af3c95dcdaffe05ba3d9481bfafce2', class: "track-total" }, h("div", { key: 'f50dff46578030bc9ecd83d56dec99b4a099f0b5', class: "track-progress", style: { width: `${this.progress}%` } }))), h("input", { key: '34ba926affc23fb845c421c7813ec05f7ce03f5f', class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
     }
     static get is() { return "mds-input-range"; }
     static get encapsulation() { return "shadow"; }
@@ -84,6 +105,8 @@ export class MdsInputRange {
                     "tags": [],
                     "text": "The greatest value in the range of permitted values"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "max",
                 "reflect": false,
                 "defaultValue": "100"
@@ -102,6 +125,8 @@ export class MdsInputRange {
                     "tags": [],
                     "text": "The lowest value in the range of permitted values"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "min",
                 "reflect": false,
                 "defaultValue": "0"
@@ -120,10 +145,31 @@ export class MdsInputRange {
                     "tags": [],
                     "text": "The step attribute is a number that specifies the granularity that\nthe value must adhere to, or the special value any, which is described below."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "step",
                 "reflect": false,
                 "defaultValue": "1"
             },
+            "disabled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets if the component is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true
+            },
             "value": {
                 "type": "number",
                 "mutable": true,
@@ -138,6 +184,8 @@ export class MdsInputRange {
                     "tags": [],
                     "text": "The value attribute contains a number which contains a representation of the selected number."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true
             }
@@ -169,6 +217,9 @@ export class MdsInputRange {
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
+                "propName": "disabled",
+                "methodName": "disabledChanged"
+            }, {
                 "propName": "value",
                 "methodName": "valueChanged"
             }, {

package/dist/collection/components/mds-input-range/test/mds-input-range.stories.js

@@ -2,6 +2,10 @@ import { h } from "@stencil/core";
 export default {
     title: 'Form / Range',
     argTypes: {
+        disabled: {
+            type: { name: 'boolean' },
+            description: 'Sets if the component is disabled',
+        },
         min: {
             type: { name: 'number' },
             description: 'The lowest value in the range of permitted values',
@@ -28,6 +32,10 @@ const hideHeaderCss = `
 `;
 const HideHeaderTemplate = args => h("div", null, h("style", null, hideHeaderCss), h("mds-input-range", Object.assign({}, args), "This shouldn't be visible"));
 export const Default = Template.bind({});
+export const Disabled = Template.bind({});
+Disabled.args = {
+    disabled: true,
+};
 export const Min = Template.bind({});
 Min.args = {
     min: -100,

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/dictionary/tree.js

@@ -0,0 +1,13 @@
+const treeActionsDictionary = [
+    'auto',
+    'visible',
+];
+const treeAppearanceDictionary = [
+    'depth',
+    'none',
+];
+const treeIconDictionary = [
+    'folder',
+    'chevron',
+];
+export { treeActionsDictionary, treeAppearanceDictionary, treeIconDictionary, };

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/tree.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',