@dropi/ui 0.1.23 → 0.1.24

package/dist/collection/components/dropi-file-upload-progress-bar/dropi-file-upload-progress-bar.js

@@ -0,0 +1,258 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-file-upload-progress-bar
+ * Shows upload progress for a single file with name, miniature and actions.
+ * Mirrored EXACTLY from dropi-core_front.
+ */
+export class DropiFileUploadProgressBar {
+    /** File name to display */
+    textFile = 'Nombre del archivo.xlsx';
+    /** Upload progress 0–100 */
+    progress = 0;
+    /** Type of file (overridden by extension detection) */
+    type = 'file';
+    /** URL for image preview if type is image */
+    urlImage = 'assets/img/LOGO-250-PX.png';
+    /** Show the eye icon for preview */
+    isPreview = true;
+    /** Disable delete action */
+    disabled = false;
+    fileExtension = '';
+    /** Emitted when the trash icon is clicked */
+    deleteFile;
+    /** Emitted when progress reaches 100 */
+    uploadComplete;
+    /** Emitted when the eye icon is clicked */
+    viewFile;
+    handleProgress(val) {
+        if (val === 100) {
+            this.uploadComplete.emit();
+        }
+    }
+    handleTextFile(val) {
+        this.updateFileInfo(val);
+    }
+    componentWillLoad() {
+        this.updateFileInfo(this.textFile);
+        if (this.progress === 100) {
+            this.uploadComplete.emit();
+        }
+    }
+    updateFileInfo(fileName) {
+        const info = this.getFileExtensionInfo(fileName);
+        this.fileExtension = info.extension;
+        this.type = info.isImage ? 'image' : 'file';
+    }
+    getFileExtensionInfo(fileName) {
+        if (!fileName)
+            return { extension: '', isImage: false };
+        const lastDotIndex = fileName.lastIndexOf('.');
+        const extension = lastDotIndex > 0 ? fileName.substring(lastDotIndex + 1).toLowerCase() : '';
+        const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'tiff', 'ico', 'jfif'];
+        return {
+            extension,
+            isImage: imageExtensions.includes(extension),
+        };
+    }
+    render() {
+        return (h("div", { key: 'f1dd7e86c50078b35661e0514beff610dc2bc8e7', class: "container-progress-bar" }, h("div", { key: '2f630eb29817c68b3246d520d3940611ae78c523', class: "container-icon-info", style: { display: this.fileExtension !== 'pdf' ? 'flex' : 'none' } }, this.type !== 'image' && (h("dropi-icon", { key: '53bed511476369459951eac8c000129adebd6370', name: "File-text", width: "24px", height: "24px", color: "Info-Info-600" })), this.type === 'image' && !this.urlImage && (h("div", { key: '4e5878dc43478af1da306ae04c829c357843a180', style: { width: '34px', height: '34px', borderRadius: '8px', background: 'var(--Gray-Gray-100)' } })), this.type === 'image' && this.urlImage && (h("img", { key: 'd8c47b00b2e7a9983ca17ddf1bfb31da78bbb658', src: this.urlImage, class: "image-to-view", width: "34", height: "34", alt: "" }))), this.fileExtension === 'pdf' && (h("div", { key: 'befec2d335a0bc2d5a2af1b475cd19d16951ea9a', class: "icon-pdf" }, h("svg", { key: '5518e6204180b17d534358d913a625cd1ca31ed7', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("g", { key: 'cd3e6e3066b22e29e07671add7dfeb4c742f4a82', "clip-path": "url(#clip0_6227_22223)" }, h("path", { key: '936061bcda6e1b2324f519f03e434928335b2609', d: "M16.6243 4.61667L13.716 1.70833C12.616 0.608333 11.1493 0 9.59102 0H5.83268C3.53268 0 1.66602 1.86667 1.66602 4.16667V15.8333C1.66602 18.1333 3.53268 20 5.83268 20H14.166C16.466 20 18.3327 18.1333 18.3327 15.8333V8.74167C18.3327 7.18333 17.7243 5.71667 16.6243 4.61667ZM15.4493 5.79167C15.716 6.05833 15.941 6.35 16.1243 6.66667H12.5077C12.0493 6.66667 11.6743 6.29167 11.6743 5.83333V2.21667C11.991 2.4 12.2827 2.625 12.5493 2.89167L15.4577 5.8L15.4493 5.79167ZM16.666 15.8333C16.666 17.2083 15.541 18.3333 14.166 18.3333H5.83268C4.45768 18.3333 3.33268 17.2083 3.33268 15.8333V4.16667C3.33268 2.79167 4.45768 1.66667 5.83268 1.66667H9.59102C9.72435 1.66667 9.86602 1.66667 9.99935 1.68333V5.83333C9.99935 7.20833 11.1243 8.33333 12.4993 8.33333H16.6493C16.666 8.46667 16.666 8.6 16.666 8.74167V15.8333ZM5.90768 10.8333H4.99935C4.54102 10.8333 4.16602 11.2083 4.16602 11.6667V15.3667C4.16602 15.6583 4.39935 15.8833 4.68268 15.8833C4.96602 15.8833 5.19935 15.65 5.19935 15.3667V14.35H5.89935C6.88268 14.35 7.68268 13.5583 7.68268 12.5917C7.68268 11.625 6.88268 10.8333 5.89935 10.8333H5.90768ZM5.90768 13.3083H5.21602V11.875H5.91602C6.31602 11.875 6.65768 12.2 6.65768 12.5917C6.65768 12.9833 6.31602 13.3083 5.91602 13.3083H5.90768ZM15.8493 11.3583C15.8493 11.65 15.616 11.875 15.3327 11.875H13.9243V12.825H14.9577C15.2493 12.825 15.4743 13.0583 15.4743 13.3417C15.4743 13.625 15.241 13.8583 14.9577 13.8583H13.9243V15.3583C13.9243 15.65 13.691 15.875 13.4077 15.875C13.1243 15.875 12.891 15.6417 12.891 15.3583V11.35C12.891 11.0583 13.1243 10.8333 13.4077 10.8333H15.3327C15.6243 10.8333 15.8493 11.0667 15.8493 11.35V11.3583ZM10.0743 10.8417H9.16602C8.70768 10.8417 8.33268 11.2167 8.33268 11.675V15.375C8.33268 15.6667 8.56602 15.8417 8.84935 15.8417C9.13268 15.8417 10.066 15.8417 10.066 15.8417C11.0493 15.8417 11.8493 15.05 11.8493 14.0833V12.6C11.8493 11.6333 11.0493 10.8417 10.066 10.8417H10.0743ZM10.816 14.0833C10.816 14.475 10.4743 14.8 10.0743 14.8H9.38268V11.8833H10.0827C10.4827 11.8833 10.8243 12.2083 10.8243 12.6V14.0833H10.816Z", fill: "#DE6061" })), h("defs", { key: 'afb99f7cd6b7481ed99aa82264c539e167cd8b90' }, h("clipPath", { key: 'bf72e59ac0aea8eb3f6c812a98a3e50618499dfd', id: "clip0_6227_22223" }, h("rect", { key: '57b7af08370d8901296ed329a5e390578b58c73e', width: "20", height: "20", fill: "white" })))))), h("div", { key: '9df97315c7594dc0b77069f12e83ed8ce358794e', class: "container-bar-title" }, h("p", { key: '5531067af3ff9e1efdffbd1aa88e7f3c21ab9c12' }, this.textFile), h("progress", { key: '0492aa89233810538784c0dda705b9dc3cdb488d', value: this.progress, max: "100" })), this.progress === 100 && this.isPreview && (h("div", { key: '9fe1548c4191eb4c4250c02ef3608c01d0944059', class: "view-icon", onClick: () => this.viewFile.emit() }, h("svg", { key: '07b454b85b89af4a337a8b440c2adae74a048d0e', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "14", viewBox: "0 0 18 14", fill: "none" }, h("path", { key: '1bbc9cfb792adabc41c44ce43c6f6f7b0935fcdb', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.07148 4.14758C7.64227 3.76618 8.31334 3.56262 8.99983 3.56262C9.92004 3.56372 10.8022 3.92976 11.4529 4.58045C12.1036 5.23114 12.4697 6.11334 12.4708 7.03355C12.4708 7.72004 12.2672 8.39111 11.8858 8.9619C11.5044 9.53269 10.9623 9.97757 10.3281 10.2403C9.69387 10.503 8.99598 10.5717 8.32268 10.4378C7.64939 10.3039 7.03092 9.9733 6.54551 9.48788C6.06009 9.00246 5.72951 8.384 5.59558 7.7107C5.46166 7.0374 5.53039 6.33951 5.7931 5.70528C6.05581 5.07105 6.50069 4.52897 7.07148 4.14758ZM7.84282 8.76514C8.18529 8.99398 8.58794 9.11612 8.99983 9.11612C9.55216 9.11612 10.0819 8.8967 10.4724 8.50615C10.863 8.11559 11.0824 7.58588 11.0824 7.03355C11.0824 6.62166 10.9602 6.21902 10.7314 5.87654C10.5026 5.53407 10.1773 5.26714 9.79679 5.10952C9.41625 4.95189 8.99752 4.91065 8.59354 4.99101C8.18956 5.07136 7.81849 5.26971 7.52723 5.56096C7.23598 5.85221 7.03764 6.22329 6.95728 6.62727C6.87693 7.03124 6.91817 7.44998 7.07579 7.83052C7.23342 8.21105 7.50034 8.53631 7.84282 8.76514Z", fill: "#475066" }), h("path", { key: 'a25b946c2a1f4c1625cb3de790f54632c0efab86', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.99996 0.546387C13.2984 0.546387 15.7475 3.48835 16.8241 5.24187C17.157 5.78022 17.3333 6.40064 17.3333 7.03357C17.3333 7.6665 17.157 8.28692 16.8241 8.82526C15.7475 10.5788 13.2984 13.5207 8.99996 13.5207C4.70155 13.5207 2.25246 10.5788 1.17577 8.82526C0.842931 8.28692 0.666626 7.6665 0.666626 7.03357C0.666626 6.40064 0.842931 5.78022 1.17577 5.24187C2.25246 3.48835 4.70155 0.546387 8.99996 0.546387ZM8.99996 12.1324C12.6229 12.1324 14.7159 9.60206 15.6406 8.09845C15.8383 7.77846 15.943 7.40973 15.943 7.03357C15.943 6.6574 15.8383 6.28867 15.6406 5.96868C14.7159 4.4623 12.6229 1.93476 8.99996 1.93476C5.377 1.93476 3.28402 4.46507 2.35936 5.96868C2.16161 6.28867 2.05687 6.6574 2.05687 7.03357C2.05687 7.40973 2.16161 7.77846 2.35936 8.09845C3.28402 9.60206 5.377 12.1324 8.99996 12.1324Z", fill: "#475066" })))), this.progress === 100 && !this.disabled && (h("div", { key: '587a02eec937b7054d4b1cd840cf82bae8c43ccf', class: "container-icon-trash", onClick: () => this.deleteFile.emit() }, h("svg", { key: '7422db6af5abb405cc7e817f038bc5cabded6415', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "21", viewBox: "0 0 20 21", fill: "none" }, h("path", { key: 'd5d725b550ba4440727dbcb05c6fd43096620088', d: "M16.2501 4.94477H14.0973C13.9362 4.16103 13.5097 3.45682 12.8899 2.95082C12.27 2.44483 11.4947 2.168 10.6946 2.16699H9.30566C8.50552 2.168 7.73019 2.44483 7.11035 2.95082C6.49051 3.45682 6.06406 4.16103 5.90289 4.94477H3.75011C3.56593 4.94477 3.3893 5.01793 3.25906 5.14817C3.12883 5.2784 3.05566 5.45504 3.05566 5.63921C3.05566 5.82339 3.12883 6.00003 3.25906 6.13026C3.3893 6.26049 3.56593 6.33366 3.75011 6.33366H4.44455V15.3614C4.44566 16.282 4.81183 17.1645 5.46276 17.8155C6.11369 18.4664 6.99622 18.8326 7.91677 18.8337H12.0834C13.004 18.8326 13.8865 18.4664 14.5375 17.8155C15.1884 17.1645 15.5546 16.282 15.5557 15.3614V6.33366H16.2501C16.4343 6.33366 16.6109 6.26049 16.7412 6.13026C16.8714 6.00003 16.9446 5.82339 16.9446 5.63921C16.9446 5.45504 16.8714 5.2784 16.7412 5.14817C16.6109 5.01793 16.4343 4.94477 16.2501 4.94477ZM9.30566 3.55588H10.6946C11.1253 3.55641 11.5453 3.69017 11.8971 3.93883C12.2488 4.18749 12.515 4.53886 12.6591 4.94477H7.34108C7.48524 4.53886 7.75143 4.18749 8.10315 3.93883C8.45488 3.69017 8.87492 3.55641 9.30566 3.55588ZM14.1668 15.3614C14.1668 15.914 13.9473 16.4439 13.5566 16.8346C13.1659 17.2253 12.636 17.4448 12.0834 17.4448H7.91677C7.36424 17.4448 6.83434 17.2253 6.44364 16.8346C6.05294 16.4439 5.83344 15.914 5.83344 15.3614V6.33366H14.1668V15.3614Z", fill: "#DE6061" }), h("path", { key: '48d1dc3ba7c8f093c5ab7ee9ad5ed4307a1458e9', d: "M8.61128 14.6666C8.79545 14.6666 8.97209 14.5934 9.10232 14.4632C9.23256 14.3329 9.30572 14.1563 9.30572 13.9721V9.80545C9.30572 9.62127 9.23256 9.44464 9.10232 9.3144C8.97209 9.18417 8.79545 9.11101 8.61128 9.11101C8.4271 9.11101 8.25046 9.18417 8.12023 9.3144C7.99 9.44464 7.91683 9.62127 7.91683 9.80545V13.9721C7.91683 14.1563 7.99 14.3329 8.12023 14.4632C8.25046 14.5934 8.4271 14.6666 8.61128 14.6666Z", fill: "#DE6061" }), h("path", { key: '588341c2b9c640a15e6ba454bd1ba28ae52630b9', d: "M11.389 14.6666C11.5731 14.6666 11.7498 14.5934 11.88 14.4632C12.0102 14.3329 12.0834 14.1563 12.0834 13.9721V9.80545C12.0834 9.62127 12.0102 9.44464 11.88 9.3144C11.7498 9.18417 11.5731 9.11101 11.389 9.11101C11.2048 9.11101 11.0281 9.18417 10.8979 9.3144C10.7677 9.44464 10.6945 9.62127 10.6945 9.80545V13.9721C10.6945 14.1563 10.7677 14.3329 10.8979 14.4632C11.0281 14.5934 11.2048 14.6666 11.389 14.6666Z", fill: "#DE6061" }))))));
+    }
+    static get is() { return "dropi-file-upload-progress-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-file-upload-progress-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-file-upload-progress-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "textFile": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "File name to display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-file",
+                "defaultValue": "'Nombre del archivo.xlsx'"
+            },
+            "progress": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Upload progress 0\u2013100"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress",
+                "defaultValue": "0"
+            },
+            "type": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'image' | 'file'",
+                    "resolved": "\"file\" | \"image\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of file (overridden by extension detection)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'file'"
+            },
+            "urlImage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL for image preview if type is image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "url-image",
+                "defaultValue": "'assets/img/LOGO-250-PX.png'"
+            },
+            "isPreview": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the eye icon for preview"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-preview",
+                "defaultValue": "true"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable delete action"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "fileExtension": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "deleteFile",
+                "name": "deleteFile",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the trash icon is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "uploadComplete",
+                "name": "uploadComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when progress reaches 100"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "viewFile",
+                "name": "viewFile",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the eye icon is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "progress",
+                "methodName": "handleProgress"
+            }, {
+                "propName": "textFile",
+                "methodName": "handleTextFile"
+            }];
+    }
+}

package/dist/collection/components/dropi-icon/dropi-icon.css

@@ -0,0 +1,26 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  fill: var(--icon-fill, currentColor);
+  width: 24px;
+  height: 24px;
+  overflow: hidden;
+}
+
+svg {
+  fill: inherit;
+  display: block;
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}

package/dist/collection/components/dropi-icon/dropi-icon.js

@@ -0,0 +1,159 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-icon
+ * Renders an SVG icon from the Dropi sprite sheet.
+ * The sprite must be available at `assets/icons/sprite.svg`.
+ */
+export class DropiIcon {
+    el;
+    /** Icon name matching the id in the SVG sprite */
+    name = '';
+    /** Width of the icon (CSS value) */
+    width = '24px';
+    /** Height of the icon (CSS value) */
+    height = '24px';
+    /**
+     * Color of the icon. Accepts:
+     * - Hex color: `#ff0000`
+     * - CSS variable name without `--`: `Primary-Primary-500`
+     * - `currentColor` to inherit
+     */
+    color = 'currentColor';
+    colorChanged() {
+        this.applyColor();
+    }
+    componentWillLoad() {
+        // SSR Fallback: Read attributes if props are not yet synced by hydration
+        if (!this.el.style.width && !this.el.style.height) {
+            const attrW = this.el.getAttribute('width') || '24px';
+            const attrH = this.el.getAttribute('height') || '24px';
+            this.width = attrW;
+            this.height = attrH;
+        }
+        this.applyColor();
+        this.updateHostStyles();
+    }
+    componentDidUpdate() {
+        this.updateHostStyles();
+    }
+    updateHostStyles() {
+        this.el.style.width = this.width;
+        this.el.style.height = this.height;
+    }
+    applyColor() {
+        if (!this.color)
+            return;
+        const fill = this.color.startsWith('#')
+            ? this.color
+            : this.color === 'currentColor'
+                ? 'currentColor'
+                : `var(--${this.color})`;
+        this.el.style.setProperty('--icon-fill', fill);
+    }
+    render() {
+        return (h("svg", { key: 'c705712bd21c4da94dcff8ce12b0c0b880681e95', width: this.width ?? '24px', height: this.height ?? '24px', class: { spin: (this.name ?? '') === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: 'b02addb8203904ec059b3c92bd40b09e3c79622d', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name ?? ''}` })));
+    }
+    static get is() { return "dropi-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name matching the id in the SVG sprite"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the icon (CSS value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'24px'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the icon (CSS value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'24px'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of the icon. Accepts:\n- Hex color: `#ff0000`\n- CSS variable name without `--`: `Primary-Primary-500`\n- `currentColor` to inherit"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'currentColor'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "color",
+                "methodName": "colorChanged"
+            }];
+    }
+}

package/dist/collection/components/dropi-ilustration-icon/dropi-ilustration-icon.css

@@ -0,0 +1,91 @@
+:host {
+  display: inline-flex;
+}
+
+.dropi-ilustration {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dropi-ilustration__image,
+.dropi-ilustration-insignia {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dropi-ilustration__image img {
+  max-width: 100%;
+  height: auto;
+}
+
+.dropi-ilustration__image-mb {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  margin: 0;
+}
+
+.dropi-ilustration__image-mb.success {
+  background: var(--Success-Success-500, #22c55e);
+}
+
+.dropi-ilustration__image-mb.error {
+  background: var(--Error-Error-500, #ef4444);
+}
+
+.dropi-ilustration__image-mb.info {
+  background: var(--Info-Info-500, #3b82f6);
+}
+
+.dropi-ilustration__image-mb.warning {
+  background: url('assets/icons/ilustration/bg-warning.svg') no-repeat center;
+  background-size: contain;
+  border-radius: 0;
+}
+
+.dropi-ilustration-insignia-tag {
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+
+.dropi-ilustration-insignia-tag img {
+  position: relative;
+  z-index: 2;
+  height: 32px;
+  width: auto;
+}
+
+.tag {
+  border-radius: 32px;
+  color: var(--Neutral-White, #ffffff);
+  text-transform: capitalize;
+  margin: 0 0 0 -20px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.tag span {
+  color: var(--Neutral-White, #ffffff);
+  padding: 4px 8px 4px 18px;
+  font-size: var(--font-size-xxs);
+}
+
+.tag--verified {
+  background: linear-gradient(90deg, #ffc10d 41.3%, #ff6102 112.32%);
+}
+
+.tag--premium {
+  background: linear-gradient(90deg, #ff6102 56.52%, #ffc10d 107.25%);
+}
+
+.tag--exclusive {
+  background: linear-gradient(90deg, var(--Gray-900, #0e111a) 26.09%, #ff6102 116.67%);
+}