@dropi/ui 0.1.46 → 0.1.49

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

@@ -1,39 +1,27 @@
-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`.
- */
+import { h, Host } from "@stencil/core";
+import { ICON_MAP } from "../../utils/icon-map.generated";
 export class DropiIcon {
     el;
-    /** Icon name matching the id in the SVG sprite */
+    /** Icon name (case-insensitive, matches dropi-lib-icons sprite ids) */
     name = '';
-    /** Width of the icon (CSS value) */
     iconWidth = '20px';
     iconHeight = '20px';
     color = 'currentColor';
-    /** Stroke width for icons that use strokes */
     strokeWidth = '';
-    /** URL to the SVG sprite file. Defaults to dropi-lib-icons path in node_modules. */
-    spritePath = '/node_modules/dropi-lib-icons/dist/sprite.svg';
-    widthChanged() {
-        this.updateHostStyles();
-    }
-    heightChanged() {
-        this.updateHostStyles();
-    }
-    colorChanged() {
-        this.applyColor();
-    }
-    strokeWidthChanged() {
-        this.applyStrokeWidth();
-    }
+    svgGroupRef;
+    currentPaths = '';
+    sizeChanged() { this.updateHostStyles(); }
+    colorChanged() { this.applyColor(); }
+    strokeWidthChanged() { this.applyStrokeWidth(); }
     componentWillLoad() {
         this.applyColor();
         this.applyStrokeWidth();
         this.updateHostStyles();
     }
-    componentDidUpdate() {
+    componentDidRender() {
+        if (this.svgGroupRef) {
+            this.svgGroupRef.innerHTML = this.currentPaths;
+        }
         this.updateHostStyles();
     }
     applyStrokeWidth() {
@@ -48,15 +36,20 @@ export class DropiIcon {
     applyColor() {
         if (!this.color)
             return;
-        const fill = this.color.startsWith('#')
+        const fill = this.color.startsWith('#') || this.color === 'currentColor'
             ? this.color
-            : this.color === 'currentColor'
-                ? 'currentColor'
-                : `var(--${this.color})`;
+            : `var(--${this.color})`;
         this.el.style.setProperty('--icon-fill', fill);
     }
     render() {
-        return (h("svg", { key: 'c994616a46f7f1b85c572c5b4a6c48144396fb8a', width: this.iconWidth, height: this.iconHeight, class: { spin: (this.name ?? '') === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: '623109aad17765228e4fb5b4e7c8846e123dbfc9', href: `${this.spritePath}#${(this.name ?? '').toLowerCase()}` })));
+        const key = (this.name ?? '').toLowerCase();
+        const icon = ICON_MAP[key];
+        if (!icon) {
+            this.currentPaths = '';
+            return h("svg", { width: this.iconWidth, height: this.iconHeight, "aria-hidden": "true" });
+        }
+        this.currentPaths = icon.paths;
+        return (h(Host, null, h("svg", { viewBox: icon.viewBox, width: this.iconWidth, height: this.iconHeight, class: { spin: key === 'spinner' }, "aria-hidden": "true" }, h("g", { ref: (el) => { this.svgGroupRef = el; } }))));
     }
     static get is() { return "dropi-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -84,7 +77,7 @@ export class DropiIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Icon name matching the id in the SVG sprite"
+                    "text": "Icon name (case-insensitive, matches dropi-lib-icons sprite ids)"
                 },
                 "getter": false,
                 "setter": false,
@@ -104,7 +97,7 @@ export class DropiIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Width of the icon (CSS value)"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -164,33 +157,13 @@ export class DropiIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Stroke width for icons that use strokes"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "stroke-width",
                 "defaultValue": "''"
-            },
-            "spritePath": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "URL to the SVG sprite file. Defaults to dropi-lib-icons path in node_modules."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "sprite-path",
-                "defaultValue": "'/node_modules/dropi-lib-icons/dist/sprite.svg'"
             }
         };
     }
@@ -198,10 +171,10 @@ export class DropiIcon {
     static get watchers() {
         return [{
                 "propName": "iconWidth",
-                "methodName": "widthChanged"
+                "methodName": "sizeChanged"
             }, {
                 "propName": "iconHeight",
-                "methodName": "heightChanged"
+                "methodName": "sizeChanged"
             }, {
                 "propName": "color",
                 "methodName": "colorChanged"

package/dist/collection/components/dropi-image-miniature/dropi-image-miniature.js

@@ -31,7 +31,7 @@ export class DropiImageMiniature {
     }
     render() {
         const imgs = this.parsedImages;
-        return (h("div", { key: 'aefd44eab41f586a8a5bf4bbc1675b6c9cc67124', class: "miniature" }, this.label && h("span", { key: 'f61ea53ad1dfa354a93781877e0f02c120e0f445', class: "miniature__label" }, this.label), h("div", { key: 'fbde49689bed4e93c63cab97e787e6d877a7fcb2', class: "miniature__grid" }, imgs.map((src, i) => (h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), h("div", { class: "miniature__zoom" }, h("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Neutral-White" }))))))));
+        return (h("div", { key: '6e69ee9e8e277d35757b8f1fc84e93202bc76cba', class: "miniature" }, this.label && h("span", { key: '4a529ee9d6be76148b744c7cb187596329aff763', class: "miniature__label" }, this.label), h("div", { key: 'e191bb3044a5d1e3f79d0b1273f686e5055d18c1', class: "miniature__grid" }, imgs.map((src, i) => (h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), h("div", { class: "miniature__zoom" }, h("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Neutral-White" }))))))));
     }
     static get is() { return "dropi-image-miniature"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class DropiLogo {
         e.target.src = FALLBACK_SVG;
     }
     render() {
-        return (h("figure", { key: '2a5ed49bd2ac8592db5b06256ff4e911e26ee6fd', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: 'f0f63e2e5ceb30c24eac3f7f5a3446858b632f90', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
+        return (h("figure", { key: '4d8da6d53c501a88bc3a6f358e5ee9d31a3dc401', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: 'eca9fac83cbffcdec34b7b9a89aaa36b36aa7001', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
     }
     static get is() { return "dropi-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,9 +36,9 @@ export class DropiNavbar {
     }
     render() {
         const items = this.parsedData;
-        return (h("nav", { key: '83ec218a7545739c65d8f1f61197b429b0e7d407', class: "navbar" }, h("div", { key: 'e40038630c33a280f3c231b3dd26643f1c853ea3', class: "navbar__left" }, this.showMenuToggle && (h("button", { key: '0ecbae684b9324c48cd01a6081fd1951b3ba7cf8', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, h("dropi-icon", { key: '9edea72a4508a984be2e6785f3f0fa6abe0625c4', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: 'b8cd9896736d505dad05b8df5f10928d40f250dd', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && h("span", { key: '4e5dae851fe28f1bc913d7a5d4d42a2413342635', class: "navbar__title" }, this.title)), items.length > 0 && (h("ul", { key: 'b951cc880b8aaf718b85403e3420d73ac976aa60', class: "navbar__items" }, items.map(item => (h("li", null, h("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.clickLoadItem.emit(item), type: "button" }, item.icon && h("dropi-icon", { name: item.icon, iconWidth: "16px", iconHeight: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), h("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (h("span", { class: "navbar__badge" }, item.badge)))))))), h("div", { key: '8fe68f93af722982bac11890b106a35a292b3d98', class: "navbar__right" }, h("button", { key: 'a4d0ff928dca2502384cd21e0bc852cacc895a30', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: '41007746a151c27059d41db7c4672a2b551882d1', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: 'a0e5c6c9f8e2aaf3e67cc22bdff2ae65472b7cb5', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: 'e1996f9e1fa922cd03a4e9c5721f5be838a941d3', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
+        return (h("nav", { key: '89379c4c29539aa933b59f34b379929950c1bad6', class: "navbar" }, h("div", { key: '4e78453b654c5b93c4c534955a8cc523138cdfd9', class: "navbar__left" }, this.showMenuToggle && (h("button", { key: '6aee8f1a706b73786c0def18f42394331313a4ef', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, h("dropi-icon", { key: 'f5b57eb49cf5e8c5feb1a6d5284096a54b294768', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: '92167bb904e69964fae2806ccb0c157bb16eb081', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && h("span", { key: 'fef8b99cd9a2c2d9d1ac0cba0361f0bdd69ecf09', class: "navbar__title" }, this.title)), items.length > 0 && (h("ul", { key: 'c8a1130c8f0a8ac5eabb00b1108af34eeba611fe', class: "navbar__items" }, items.map(item => (h("li", null, h("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.clickLoadItem.emit(item), type: "button" }, item.icon && h("dropi-icon", { name: item.icon, iconWidth: "16px", iconHeight: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), h("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (h("span", { class: "navbar__badge" }, item.badge)))))))), h("div", { key: '390eb829076e112fb52da015903d5330666c533e', class: "navbar__right" }, h("button", { key: '0f8bdd5f78a310418c88b1a74cd7ac87a4308c1c', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: '6eb38a4cf19eb417bb8b18a96b5e6133c70ff35e', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: 'a2fbfe367a46b50cbbd4e1b9a9b859d10c18c604', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: 'dc9cbb054b2bd8088992d8feb33f0807e75b26e6', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
             ? h("img", { class: "navbar__avatar", src: this.userAvatar, alt: this.userName })
-            : h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && h("span", { key: 'd539c8f456564aa8d3a29e9d2e2ed6250241f411', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: 'd32cba548201f28a051142e889f6de207a4e67d2', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
+            : h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && h("span", { key: 'e1a6193fc9bd18f542204a38d1c0775e86ee3cd2', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: 'b870d026d52b11041ae0db711c4c3fdb02578b60', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
     }
     static get is() { return "dropi-navbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-otp-send-code/dropi-otp-send-code.js

@@ -100,14 +100,14 @@ export class DropiOtpSendCode {
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (h("div", { key: '4b70278cd5f1347de31781294a8eaf5dbd15d198', class: "otp" }, this.showLabelContact && (h("p", { key: '1f41c8a8047e0c7471610db63913ab958efb91f3', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: 'cdb2df082b7acdb3c8745a4da2fedc85e71e8c02' }, " ", this.labelContact))), h("div", { key: 'a518675aee7d22a0c0aef4f2d388e060fa1cea15', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, i) => (h("input", { key: i, ref: (el) => {
+        return (h("div", { key: '4fdb8eb4d4932b6509798a50ee474c56fb001fa8', class: "otp" }, this.showLabelContact && (h("p", { key: '2f95e7f0138ce067e3da3c0822d8277e7fccc357', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '23508736c6cfdf095f2b9192ff3d566e98e715c7' }, " ", this.labelContact))), h("div", { key: '8c01d71b208ae557f9ffba7b76d60c049bdde9ce', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, i) => (h("input", { key: i, ref: (el) => {
                 if (el)
                     this.inputs[i] = el;
             }, class: {
                 'otp__digit': true,
                 'otp__digit--filled': this.digitStates[i] === 'filled',
                 'otp__digit--error': this.error,
-            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (h("p", { key: 'f48f697b79999c9dcf579e569741e21f60429874', class: "otp__error" }, this.errorMessage)), h("div", { key: 'da82a76a7cfb4d63cff43a82e133f5212a246076', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
+            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (h("p", { key: '8215ecbdc651a3c79a8841c5620bd7e8c5c8228e', class: "otp__error" }, this.errorMessage)), h("div", { key: 'c1a81e44295abb3b373936a5c276aea4497cf2e9', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
     }
     static get is() { return "dropi-otp-send-code"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,9 +54,9 @@ export class DropiPaginator {
         const pages = this.pageNumbers;
         const isFirst = this.currentPage <= 1;
         const isLast = this.currentPage >= this.totalPages;
-        return (h("div", { key: 'af6614df5a241ef536b6723d30bde12c8a6f474f', class: "paginator" }, h("div", { key: '8b5405baa717a36042fc03ca2e68370799c01ff7', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: 'c340304b29d658ef9eaa8105a91540660c829048', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '3adfc1508cbcedbb91f99e467db2270c40a4ac83', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '5936642c4b9e5b72546229996fbc72fe973e6f5f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: 'c9f7eb1c0c27a738ee31e859617964fc75e514cc', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: '5d448a9a6536c90c56fafd700e7c5998a85d6fdf', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
+        return (h("div", { key: '6b39ba2ff5168182a36c59e521e46e12a32ebe85', class: "paginator" }, h("div", { key: '9bc76ef25f10290b575ce047bb5f093e6698a670', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '25def90ed595b4c56cd1481ecf1cc2ed2cc1aeb9', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '505c131c240d7af5b5860802a69be6b8971b0ab3', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '090d9b536a0b80d12ac1a48bf9519b34d4b6bc9a', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: 'aec79c1b98329c1302478d8fe738586a8587dca0', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: 'bc9416a0cfee88e4739c11a3ddbc0c4a244cc21d', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
             ? h("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
-            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (h("button", { key: '1a43d8dde37cdbc40527eb1c66bc5001a64cf59f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && h("span", { key: 'f76ccd791d02b25d78c509341b73e1c1bca0b986', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: '822a3a7e4ac651e00c469b565e300a7efcc5614b', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: '2b4f7435f9083ab9c4d9ce81be5c259eda830e4a', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '63ab5568c44ed3cbda917842defe4dc4254bb3f1', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))))));
+            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (h("button", { key: 'fb1f077bd49fdceb052c3d1613d58078f2202ba9', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && h("span", { key: 'fe05545abd3c8d72a897c5a68e76347bbe39625b', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: '17063d4d03213cbf38b1ff2c79187ec07ba0c8b3', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: 'b4d0df3505ad5a1c5c0899a7a13aa9f8b79db511', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: 'd0db6c56e6a8dcbf441038b4391b004083a6f708', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))))));
     }
     static get is() { return "dropi-paginator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-phone-input/dropi-phone-input.js

@@ -183,10 +183,10 @@ export class DropiPhoneInput {
     render() {
         const country = this.selectedCountry;
         const isInvalid = this.isValidPhone === false;
-        return (h("div", { key: 'f4351d5ad9347f82477b8cd040813fc86c60931b', class: "phone-wrap" }, h("div", { key: 'afd0b33fb70a0e8eb0c0c58eb7225381ed914ba1', class: "phone-input-container" }, h("div", { key: '4bbda7332124649c042627e5b67e309197b617f6', class: "custom-select" }, h("button", { key: 'fbb426107a317a8f8cb6e4a33ca79a927d6e7bb1', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
+        return (h("div", { key: 'c15336990cd554166dcfec74bbf577074a7fe870', class: "phone-wrap" }, h("div", { key: '7136d327befe46db5b9fd79075526d4a327532ff', class: "phone-input-container" }, h("div", { key: '2348818f20cc26941dd06730d75c95497eb73468', class: "custom-select" }, h("button", { key: '37a0289468cc49b914d31a056d94c1caafc4431d', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
                 if (!this.disabledInput)
                     this.open = !this.open;
-            } }, h("span", { key: '73374218245871d06d2993dac1d07e7a60914df7', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: '669e38e92d5c75651a881fc8b311368ed617a236', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: '190bea3ae97a702ee35368798c1f4c24c1331027', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), h("ul", { key: 'ef757ddf26a6c14c989642186559957623d0e1d1', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (h("li", null, h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), h("input", { key: '93099e0b90757d28aa51811a30cc5d8a44a940ee', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
+            } }, h("span", { key: '59368b25a2afa0a3e7fbb930483239680a867651', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: 'd472729d11380a54182927000703c224104f9213', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: '9c73aea42e3f30793505277032c892b3947a90be', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), h("ul", { key: 'b3238ad80a85356fbd95a482c3ffa0cf3ecb810f', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (h("li", null, h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), h("input", { key: '3f0c3ef4f01b13f9f033b5205fe5ab019a923781', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
     }
     static get is() { return "dropi-phone-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class DropiProgressBar {
             width: `${Math.min(100, Math.max(0, this.value))}%`,
             backgroundColor: this.color || `var(--${this.getSeverityVariable()}, #50A5F1)`,
         };
-        return (h("div", { key: 'f68b88240ebc188f1f0378424b8d1617c2e7440e', class: "progress-container" }, this.showValue && (h("div", { key: 'f8116e4eb824031d4bd1ac9d694e2bd3bca1ed6d', class: "progress-header" }, h("span", { key: '892813f8e0a028ce286c00edd0489d489dd271c4', class: "progress-value" }, this.value, "%"))), h("div", { key: '2e740487a59df1ec7def96565a9ee64d53b773b8', class: "progress-track", style: { height: this.height, backgroundColor: this.trackColor } }, h("div", { key: '4f6fd1c436563cacac31e385d84c4a21945f6e10', class: "progress-fill", style: fillStyle }))));
+        return (h("div", { key: '7093e06299ccb8365d07fa1bc20838254b08957e', class: "progress-container" }, this.showValue && (h("div", { key: 'f32dcb2d2c4dcfcdba5661dc7b66c1f36d4bb66c', class: "progress-header" }, h("span", { key: '5d556cff4beb0af77c28fd934757512a3470b83d', class: "progress-value" }, this.value, "%"))), h("div", { key: '35666669d0206354d2d3e797bf553b767bfb63d5', class: "progress-track", style: { height: this.height, backgroundColor: this.trackColor } }, h("div", { key: '037d4d7cacc0834b8d79d1fee8c6e9ba3edfc3f5', class: "progress-fill", style: fillStyle }))));
     }
     getSeverityVariable() {
         switch (this.severity) {

package/dist/collection/components/dropi-radio-button/dropi-radio-button.js

@@ -35,7 +35,7 @@ export class DropiRadioButton {
         this.dropiChange.emit(e);
     }
     render() {
-        return (h("div", { key: '8833a6c8d423df47ceb667ff5c7fd940669c95ed', class: "dropi-radio-button" }, h("label", { key: 'a21414208a7a4cc89ba8aad7a34f638d25c511a3', htmlFor: this.inputId }, h("input", { key: '4fc7d6ee1cfa0e1c522808b9c09af3d12c885caa', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (h("div", { key: 'e42d178a92a815c22b197aec5d962a19f60a4f6f', class: "dropi-radio-button" }, h("label", { key: '0beae39fb6860265332c1ed12d38bc97c78b22c1', htmlFor: this.inputId }, h("input", { key: '4ddb55ecb50c030ed7d4a8795246a9d57f95f0da', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get is() { return "dropi-radio-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-read-more/dropi-read-more.js

@@ -28,7 +28,7 @@ export class DropiReadMore {
     }
     render() {
         const showToggle = this.needsTruncation && (this.expanded ? this.showSeeLess : true);
-        return (h("div", { key: '6accf9aa0a6f7377c7de6e8cbcb9e2a7ee99573a', class: "read-more" }, h("p", { key: '96e5493df8b065008f9bc45cea1ba768eabfc0a2', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (h("button", { key: '195d962715c5c618701c3e86df618289915e3a9b', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
+        return (h("div", { key: '27f1da08ef634213771942cf956edb42f543cbbd', class: "read-more" }, h("p", { key: '0f8090c4776296e1d7c9073fe5445b5f1d195464', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (h("button", { key: 'b2cc2616cd93dbc4b6025854ab9e4250d699f8fe', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
     }
     static get is() { return "dropi-read-more"; }
     static get encapsulation() { return "shadow"; }

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

@@ -387,7 +387,7 @@ export class DropiSelect {
         ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (h("li", { class: "no-results" }, "Sin resultados"))));
     }
     render() {
-        return (h("div", { key: '20803118f557ef32390fe4f93b425b5ae4ab3361', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '3b29f4a8cda550090ea8723c559aea748ec267d0', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '27d14ce3a05627bf1cf3c246ca4a378bc7d1199d', class: "asterisk" }, " *"))), h("div", { key: 'c70121fef59345ea40ce3f0a201d05f50e262290', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: '56abe7b0c88a5b15add9b045b01f880dfd24efb0', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (h("div", { key: 'a362acb377004855c36e53b4dd82b40c414df807', class: "select-helper" }, h("span", { key: 'e84ef13d9bd942817816c6b4f74ca670d31feda1' }, this.textHelper))), this.hasError && this.errorText && (h("div", { key: 'a1d8e7153719ba99a30676d9522e612f711d1265', class: "select-helper-error" }, h("dropi-icon", { key: 'bc3a92ce1aa494bbf7c57e0ce4e922d9c957a560', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '30632fb569a019d6fa1d684d83fe9eadfc8031a5' }, this.errorText))), this.renderDropdown()));
+        return (h("div", { key: 'cd22a44efb11820180aec0cc36aa0e7949712e78', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: 'f2b2c09818cf292828d6d6ce6d3e5c9e86508495', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: 'e84b30735dff4ccb40f8931835bf51e3bab6ff11', class: "asterisk" }, " *"))), h("div", { key: '048a25a502b2f7550d298d22439c46589ada08fe', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: '849b92a26294622e602fe2ff6bf2db89e22be4f4', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (h("div", { key: '8b9ac9ea4b494fb830237362f5b9db6b606df765', class: "select-helper" }, h("span", { key: '74fa19eee858b116f81d41ae1a3deb00beaf103e' }, this.textHelper))), this.hasError && this.errorText && (h("div", { key: '34a015639d80fb8df598f67129f84c34b737ecf4', class: "select-helper-error" }, h("dropi-icon", { key: 'ebcbcadc5c72d35f0a35bc975dda0995b2a493a1', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: 'f473e766279e0c784251251d6c59fbd92107a7e8' }, this.errorText))), this.renderDropdown()));
     }
     static get is() { return "dropi-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class DropiSwitch {
         this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (h("label", { key: 'bb9809e03c3f5f4f6892731d7147eda5313a799b', class: "toggle-switch" }, h("input", { key: 'b0be8bb8c22705ae04ca6f12d2009bac0c6cd629', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '4073dacb4c17d1fdc2009a9e7329caffade3c932', class: "slider" })));
+        return (h("label", { key: 'bfe479e64d61f2ffcd76db084c4504842bbb6421', class: "toggle-switch" }, h("input", { key: 'add18063655620fd12d43e0c02b48775b81e9ffa', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '8b6c30839589d9354cf309905e9d0863e8354578', class: "slider" })));
     }
     static get is() { return "dropi-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-tag-type-product/dropi-tag-type-product.js

@@ -7,7 +7,7 @@ export class DropiTagTypeProduct {
     /** Label text. Default: VARIABLE */
     label = 'VARIABLE';
     render() {
-        return h("div", { key: '6d27b4fc40c66e6bfd8400e4727aa9a9c2e8dc8c', class: "type-variation" }, this.label);
+        return h("div", { key: '89083374c365448b4862687559ce311e258ee031', class: "type-variation" }, this.label);
     }
     static get is() { return "dropi-tag-type-product"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ export class DropiTooltip {
     /** Whether the tooltip has an outline style (matches Angular `outlined`) */
     outlined = false;
     render() {
-        return (h("div", { key: '1c580849e5fdfc99ecfedc7c14508dfd50b789c9', class: { 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined } }, h("slot", { key: '8881e587966e67408a725e36a5a45828755e10a6' }), this.text && (h("div", { key: 'f4f1c4a1d47e3324fe4d9af25d46342c4c650a0f', class: "tooltip-simple-bubble" }, this.text))));
+        return (h("div", { key: '42891ce799b8a62c9b389ee1f76104f69124f5be', class: { 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined } }, h("slot", { key: '2ef06f971f67c995bdf1ce3be6209f2173cca63d' }), this.text && (h("div", { key: '9417b2ca92cd320abe686d1cb71a18ff5cfc09e7', class: "tooltip-simple-bubble" }, this.text))));
     }
     static get is() { return "dropi-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-youtube-lazy-video/dropi-youtube-lazy-video.js

@@ -24,7 +24,7 @@ export class DropiYoutubeLazyVideo {
         return `https://www.youtube.com/embed/${this.videoId}?autoplay=1&rel=0&modestbranding=1`;
     }
     render() {
-        return (h("div", { key: 'c3fadb91dcf1c32964ed0f0cb847ab3d874f2d7a', class: `video-wrapper${this.isPlaying ? ' playing' : ''}` }, !this.isPlaying && (h("div", { key: '7bc533e24d3221d8c4dd763e629ec836642d504f', class: "thumbnail", onClick: () => { this.isPlaying = true; } }, h("img", { key: '6e47aefd8e8fab4ecf8b6a7160bc5557ecace088', src: this.thumbnail, alt: `Video thumbnail ${this.videoId}` }), h("button", { key: '1acb93790a95117c78d5855807f24dac76b98008', class: "play-button", "aria-label": "Reproducir video" }, h("dropi-icon", { key: '09974fac159a0c88b160c8044f88e1c3dfab79c0', name: "Play", iconWidth: "17px", iconHeight: "21px", color: "Neutral-White" })))), this.isPlaying && (h("iframe", { key: '7650e6f8f8591cc1b24e0958e0924e5eff118ad9', src: this.videoUrl, title: this.videoTitle, frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, loading: "lazy" }))));
+        return (h("div", { key: '04b1c8c4c089306ddd94072510066e6687dea8da', class: `video-wrapper${this.isPlaying ? ' playing' : ''}` }, !this.isPlaying && (h("div", { key: '2c5c6a08d986b03bbb3d3f81bc167736518ac201', class: "thumbnail", onClick: () => { this.isPlaying = true; } }, h("img", { key: '7fcf622e553c278b5121ad6361d6a35eb1e7aa5d', src: this.thumbnail, alt: `Video thumbnail ${this.videoId}` }), h("button", { key: 'f99709c40c48f5b94d201ae0b8933152307253ba', class: "play-button", "aria-label": "Reproducir video" }, h("dropi-icon", { key: 'ad31b427514ca7f2fe29deee2bb01e72fee49d35', name: "Play", iconWidth: "17px", iconHeight: "21px", color: "Neutral-White" })))), this.isPlaying && (h("iframe", { key: '98b418bc525fedb92852d6bb67434affad36eb87', src: this.videoUrl, title: this.videoTitle, frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, loading: "lazy" }))));
     }
     static get is() { return "dropi-youtube-lazy-video"; }
     static get encapsulation() { return "shadow"; }