npm - @dropi/ui - Versions diffs - 0.1.21 → 0.1.23 - Mend

@dropi/ui 0.1.21 → 0.1.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (507) hide show

package/dist/{esm → dropi-ui}/dropi-card-product.entry.js RENAMED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
 const dropiCardProductCss = () => `:host{display:block;font-family:'Inter', sans-serif}*,*::before,*::after{box-sizing:border-box}.dropi-card-product{position:relative;background:#ffffff;border-radius:8px;overflow:hidden;transition:all 0.2s ease-in-out;cursor:pointer;display:flex;flex-direction:column;height:100%;box-sizing:border-box;width:100%;max-width:450px;box-shadow:none}.product-image-container{padding:4px;flex-shrink:0}.product-image{position:relative;width:100%;aspect-ratio:1;border-radius:8px;border:1px solid #c3c9d9;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:#f8f9fa}.product-image img{width:100%;height:100%;object-fit:cover;border-radius:8px}.product-image img.error-img{object-fit:contain}.favorite-button{position:absolute;bottom:5px;right:6px;border-radius:8px;padding:12px;cursor:pointer;transition:all 0.2s ease-in-out;z-index:2;display:flex;align-items:center;justify-content:center;width:42px;height:40px;background:#ffffff;border:1px solid #858ea6}.favorite-button.favorite-active{background:var(--Primary-Primary-500, #f49a3d);border:1px solid var(--Primary-Primary-500, #f49a3d)}.product-info{position:relative;padding:8px;display:flex;flex-direction:column;gap:4px;flex:1;justify-content:space-between}.supplier-insignia{position:absolute;top:-24px;left:0px}.product-header{display:flex;justify-content:space-between;align-items:center;width:100%;height:26px}.category{color:#69738c;font-family:'Inter', sans-serif;font-size:12px;font-weight:400;line-height:1.5;flex:1}.stock-info{display:flex;align-items:center;gap:2px;font-family:'Inter', sans-serif;font-size:12px;font-weight:400;line-height:1.5}.stock-label{color:#69738c}.stock-value{font-weight:500}.product-name{color:#32394d;font-family:'Inter', sans-serif;font-size:16px;font-weight:500;line-height:1.5;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.supplier-info{font-family:'Inter', sans-serif;font-size:12px;line-height:1.2}.supplier-label{color:#69738c;font-weight:400}.supplier-name{color:#50a5f1;font-weight:400;margin-left:4px;cursor:pointer}.price-container{display:flex;gap:8px;margin-top:4px}.price-item{flex:1;display:flex;flex-direction:column}.price-label{color:#69738c;font-family:'Inter', sans-serif;font-size:12px;font-weight:400;line-height:1.5;height:18px;min-width:max-content}.price-value{color:#32394d;font-family:'Inter', sans-serif;font-size:14px;font-weight:700;line-height:1.1;margin-top:2px}.separator{height:1px;background:#e6eaf2;margin:0;flex-shrink:0}.action-button{background:#ffffff;border:none;border-top:1px solid #e6eaf2;padding:12px;cursor:pointer;transition:all 0.2s ease-in-out;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;flex-shrink:0}.action-button--disabled{opacity:0.3;cursor:not-allowed}.button-text{font-family:'Inter', sans-serif;font-size:14px;font-weight:700;line-height:1.1;color:#f49a3d;text-align:center;white-space:nowrap}`;
@@ -43,6 +43,8 @@ const DropiCardProduct = class {
     /** Emitted when supplier name clicked */
     dropiSupplierClick;
     formatPrice(val) {
+        if (val == null)
+            return '0';
         return val.toLocaleString('es-CO');
     }
     get inStock() {
@@ -56,19 +58,22 @@ const DropiCardProduct = class {
         return 'var(--Success-Success-500, #0abb87)';
     }
     render() {
-        return (h("div", { key: '37c48cc67a7f0c7469a68052c90a2818535dce69', class: "dropi-card-product", onClick: () => this.onProductClick.emit() }, h("div", { key: '83404d72af41a88fd2abea553559b057b6fff12d', class: "product-image-container" }, h("div", { key: 'c1d5044b0bd09051e1901e897160fa47d2ded209', class: "product-image" }, h("img", { key: 'a70907ebb8bcd3a165e395a241fc60942f48c144', src: this.image || '', alt: this.productName, onError: (e) => {
+        return (h("div", { key: '42990ea883dcd6cc72e1f62771f7b9554c36bdba', class: "dropi-card-product", onClick: () => this.onProductClick.emit() }, h("div", { key: '59295427ddc350ec3c70d7d1bd4803ffa6bf26b0', class: "product-image-container" }, h("div", { key: '9d10e18f2eadf16f0c0b1b7cb7860d08f2ca778f', class: "product-image" }, h("img", { key: '19f7af8eddcbea880d32ef30603d55bfe9337f17', src: this.image || '', alt: this.productName, onError: (e) => {
                 e.target.src = './assets/utils/no-image.jpg';
-            }, class: !this.image ? 'error-img' : '' }), this.showFavorite && (h("button", { key: '24c395c652a3d0dbb18258a8975ac79eeb6154fd', class: { 'favorite-button': true, 'favorite-active': this.isFavorite }, onClick: (e) => {
+            }, class: !this.image ? 'error-img' : '' }), this.showFavorite && (h("button", { key: 'a6e13eea7c211fd772fe5ee7c13c7d475d54986c', class: { 'favorite-button': true, 'favorite-active': this.isFavorite }, onClick: (e) => {
                 e.stopPropagation();
                 this.isFavorite = !this.isFavorite;
                 this.changeFavorite.emit(this.isFavorite);
-            }, "aria-label": "Favorito" }, h("dropi-icon", { key: 'b196e405c3046dbbb973f77e8f5c76a170154d6f', name: this.isFavorite ? 'Heart-solid' : 'Heart', width: "18px", height: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), h("div", { key: 'cb9d81caa32ad134093637426507a55462d25b5f', class: "product-info" }, this.supplierCategory && (h("dropi-ilustration-icon", { key: '4f642dfa0e8621094a7ab58710e592133b43cea2', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), h("div", { key: '269a000490bf2c0eab9a0bc4f8371ed91c5b84d3', class: "product-header" }, this.category && (h("span", { key: 'af027a19e03a9ddb95c0901f01081a1a42d856f1', class: "category" }, this.category)), h("div", { key: '26d7d97df6ce9f3fadeb8e84e5a8b9cda0450e7f', class: "stock-info" }, h("span", { key: 'ef9c7537b9b2185c455189b3c1a4999f409501ba', class: "stock-label" }, "Stock:"), h("span", { key: '89fe2fe123967c57c769953d18e24015288a3d56', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), h("h3", { key: '79b5046ab7ea3adeca8066dcc2f174cfed3f92f3', class: "product-name" }, this.productName), this.supplier && (h("div", { key: 'a1ff7e3fcf77ad8f4c979d266aae712aff4c18b2', class: "supplier-info" }, h("span", { key: 'be92e4ddd9d0de947307bd4bfd474ae31c6f2f7c', class: "supplier-label" }, "Proveedor:"), h("span", { key: '7180d51dd2f1ecb3726aa24793184a140778afe6', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), h("div", { key: '86733596ad100c5510a347cbf73ca9e03590322b', class: "price-container" }, h("div", { key: 'c2d919ae1b106b27fdaf649a531e96167a00b787', class: "price-item" }, h("span", { key: '337611bf6f02199c99645299469e5a9d4a6428a9', class: "price-label" }, "Precio proveedor"), h("span", { key: '1c63de1e288c7fb30067908c37dd8451f302672e', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), h("div", { key: 'b23b70d40afc0afca19d86b754d6476b65a22e73', class: "price-item" }, h("span", { key: '3b15127ac5c07361e6ba23107f845b835ac35406', class: "price-label" }, "Precio sugerido"), h("span", { key: '14eb8d5cdb5f6152a0a82c1428d21eebb81a6744', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), h("div", { key: 'e13e6135234a25b927018265e9570ecbf2fb71dc', class: "separator" }), this.showAddButton && (h("div", { key: 'c1b70f77fda95df876436b9cf326d470eb250bd9', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
+            }, "aria-label": "Favorito" }, h("dropi-icon", { key: '0020aaa1beffedd0243c62f616dfeb6428ec63e5', name: this.isFavorite ? 'Heart-solid' : 'Heart', width: "18px", height: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), h("div", { key: '390a04f46d8394deb0591969a04525f3687509a0', class: "product-info" }, this.supplierCategory && (h("dropi-ilustration-icon", { key: '7fa320fcc36f6d4929197a2d88e59deb76d34ab0', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), h("div", { key: '67e922b0afc44b3f376db3b20a33d7cc0ae8e987', class: "product-header" }, this.category && (h("span", { key: '421f39afc07922579610fe57abdfa37b4fa68586', class: "category" }, this.category)), h("div", { key: 'e4ad1d38535bd876298efb6d819d3355ac6b7446', class: "stock-info" }, h("span", { key: '5dbdabc282dbfaee4adec81668d38a909e04227d', class: "stock-label" }, "Stock:"), h("span", { key: 'f14a47956953779f4527404930b4a988ac5c5737', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), h("h3", { key: '4403e622316112df4075fafbbbbc17151d2e1b39', class: "product-name" }, this.productName), this.supplier && (h("div", { key: '28554238023a313e1698847a5faccd17e9bbd750', class: "supplier-info" }, h("span", { key: 'e34245925f659f232050ad835cf83690b112d7d0', class: "supplier-label" }, "Proveedor:"), h("span", { key: 'cabf8743951095acf0c05dd6e48ee74140984773', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), h("div", { key: '193982dc4aea14f337f64c9156d97f7c23d02db7', class: "price-container" }, h("div", { key: 'f2925c29fe4d5f9be2f92c501b92351e9a4f60e0', class: "price-item" }, h("span", { key: 'd0a8f99140d6ced64e19a69a2f198ba861cca017', class: "price-label" }, "Precio proveedor"), h("span", { key: '6fa5b8b5cd1f6d6e7b2551bdceedf65e3cb0029d', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), h("div", { key: '0a37ead7f660608ed6303c97893fdd9156b5bfad', class: "price-item" }, h("span", { key: '8bb33b1b418fdbb79c31ed69ddfa2598f6450efd', class: "price-label" }, "Precio sugerido"), h("span", { key: '2df4c30b299190461f0032a66cc8d281ce9c9dab', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), h("div", { key: '91a8306e386ac8d0422a02d3b4bac2d96ba7bebc', class: "separator" }), this.showAddButton && (h("div", { key: '69fd0267e5388770f5067a23d4ddf2636867b030', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
                 e.stopPropagation();
                 if (this.inStock)
                     this.dropiAddProduct.emit();
-            } }, h("dropi-icon", { key: 'f54207e6e1ebab2d2b0877af65b6353e02264ee4', name: "Shopping-cart-arrow-rigth", width: "20px", height: "20px", color: "#f49a3d" }), h("span", { key: 'e274c0343cdd202fa4e73e4d0843fe11d53aec6c', class: "button-text" }, "Enviar a cliente")))));
+            } }, h("dropi-icon", { key: '6e9a7333778b5a4e75bca612f7900909e9b52c80', name: "Shopping-cart-arrow-rigth", width: "20px", height: "20px", color: "#f49a3d" }), h("span", { key: '1f3eb20049a94cb74bef8c89f8773a831667dc7b', class: "button-text" }, "Enviar a cliente")))));
     }
 };
 DropiCardProduct.style = dropiCardProductCss();
 export { DropiCardProduct as dropi_card_product };
+//# sourceMappingURL=dropi-card-product.entry.esm.js.map
+//# sourceMappingURL=dropi-card-product.entry.js.map

package/dist/dropi-ui/dropi-card-product.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dropi-card-product.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-card-product/dropi-card-product.css?tag=dropi-card-product&encapsulation=shadow","src/components/dropi-card-product/dropi-card-product.tsx"],"sourcesContent":[":host {\n display: block;\n font-family: 'Inter', sans-serif;\n}\n*, *::before, *::after { box-sizing: border-box; }\n\n/* ── Card wrapper ── */\n.dropi-card-product {\n position: relative;\n background: #ffffff;\n border-radius: 8px;\n overflow: hidden;\n transition: all 0.2s ease-in-out;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n height: 100%;\n box-sizing: border-box;\n width: 100%;\n max-width: 450px;\n box-shadow: none;\n}\n\n/* ── Image container ── */\n.product-image-container {\n padding: 4px;\n flex-shrink: 0;\n}\n\n.product-image {\n position: relative;\n width: 100%;\n aspect-ratio: 1;\n border-radius: 8px;\n border: 1px solid #c3c9d9;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #f8f9fa;\n}\n\n.product-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 8px;\n}\n\n.product-image img.error-img {\n object-fit: contain;\n}\n\n/* ── Favorite button ── */\n.favorite-button {\n position: absolute;\n bottom: 5px;\n right: 6px;\n border-radius: 8px;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 42px;\n height: 40px;\n background: #ffffff;\n border: 1px solid #858ea6;\n}\n\n.favorite-button.favorite-active {\n background: var(--Primary-Primary-500, #f49a3d);\n border: 1px solid var(--Primary-Primary-500, #f49a3d);\n}\n\n/* ── Product info ── */\n.product-info {\n position: relative;\n padding: 8px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex: 1;\n justify-content: space-between;\n}\n\n/* ── Supplier insignia — overlaps from top ── */\n.supplier-insignia {\n position: absolute;\n top: -24px;\n left: 0px;\n}\n\n/* ── Header: category + stock ── */\n.product-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n height: 26px;\n}\n\n.category {\n color: #69738c;\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 1.5;\n flex: 1;\n}\n\n.stock-info {\n display: flex;\n align-items: center;\n gap: 2px;\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 1.5;\n}\n\n.stock-label {\n color: #69738c;\n}\n\n.stock-value {\n font-weight: 500;\n}\n\n/* ── Product name ── */\n.product-name {\n color: #32394d;\n font-family: 'Inter', sans-serif;\n font-size: 16px;\n font-weight: 500;\n line-height: 1.5;\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n}\n\n/* ── Supplier ── */\n.supplier-info {\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n line-height: 1.2;\n}\n\n.supplier-label {\n color: #69738c;\n font-weight: 400;\n}\n\n.supplier-name {\n color: #50a5f1;\n font-weight: 400;\n margin-left: 4px;\n cursor: pointer;\n}\n\n/* ── Prices ── */\n.price-container {\n display: flex;\n gap: 8px;\n margin-top: 4px;\n}\n\n.price-item {\n flex: 1;\n display: flex;\n flex-direction: column;\n}\n\n.price-label {\n color: #69738c;\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 1.5;\n height: 18px;\n min-width: max-content;\n}\n\n.price-value {\n color: #32394d;\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n font-weight: 700;\n line-height: 1.1;\n margin-top: 2px;\n}\n\n/* ── Separator ── */\n.separator {\n height: 1px;\n background: #e6eaf2;\n margin: 0;\n flex-shrink: 0;\n}\n\n/* ── Action button ── */\n.action-button {\n background: #ffffff;\n border: none;\n border-top: 1px solid #e6eaf2;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n height: 40px;\n flex-shrink: 0;\n}\n\n.action-button--disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n\n.button-text {\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n font-weight: 700;\n line-height: 1.1;\n color: #f49a3d;\n text-align: center;\n white-space: nowrap;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @component dropi-card-product\n * Product card showing image, supplier insignia, name, stock, prices and action button.\n */\n@Component({\n tag: 'dropi-card-product',\n styleUrl: 'dropi-card-product.css',\n shadow: true,\n})\nexport class DropiCardProduct {\n /** Product image URL */\n @Prop() image: string = '';\n /** Product name */\n @Prop() productName: string = '';\n /** Sale / supplier price (Precio proveedor) */\n @Prop() salePrice: number = 0;\n /** Suggested price for the dropshipper (Precio sugerido) */\n @Prop() suggestedPrice: number = 0;\n /** Price currency symbol */\n @Prop() currency: string = '$';\n /** Supplier / store name */\n @Prop() supplier: string = '';\n /** Category label */\n @Prop() category: string = '';\n /** Stock quantity (0 = Agotado) */\n @Prop() stock: number = 0;\n /** Supplier category for insignia: 'verified' | 'premium' | 'exclusive' | '' */\n @Prop() supplierCategory: 'verified' | 'premium' | 'exclusive' | '' = '';\n /** Show favorite button */\n @Prop() showFavorite: boolean = true;\n /** Is marked as favorite */\n @Prop({ mutable: true }) isFavorite: boolean = false;\n /** Show \"Enviar a cliente\" button */\n @Prop() showAddButton: boolean = true;\n\n /** Emitted when card is clicked — matches Angular 'onProductClick' */\n @Event() onProductClick: EventEmitter<void>;\n /** Emitted when favorite toggled — matches Angular 'changeFavorite' */\n @Event() changeFavorite: EventEmitter<boolean>;\n /** Emitted when \"Enviar a cliente\" button clicked */\n @Event() dropiAddProduct: EventEmitter<void>;\n /** Emitted when supplier name clicked */\n @Event() dropiSupplierClick: EventEmitter<void>;\n\n private formatPrice(val: number): string {\n if (val == null) return '0';\n return val.toLocaleString('es-CO');\n }\n\n private get inStock(): boolean {\n return this.stock > 0;\n }\n\n private getStockColor(): string {\n if (this.stock === 0) return 'var(--Error-Error-500, #f46a6b)';\n if (this.stock <= 10) return 'var(--Warning-Warning-500, #f59e0b)';\n return 'var(--Success-Success-500, #0abb87)';\n }\n\n render() {\n return (\n <div class=\"dropi-card-product\" onClick={() => this.onProductClick.emit()}>\n\n {/* ── Image container ── */}\n <div class=\"product-image-container\">\n <div class=\"product-image\">\n <img\n src={this.image || ''}\n alt={this.productName}\n onError={(e) => {\n (e.target as HTMLImageElement).src = './assets/utils/no-image.jpg';\n }}\n class={!this.image ? 'error-img' : ''}\n />\n\n {/* Favorite button — bottom right */}\n {this.showFavorite && (\n <button\n class={{ 'favorite-button': true, 'favorite-active': this.isFavorite }}\n onClick={(e) => {\n e.stopPropagation();\n this.isFavorite = !this.isFavorite;\n this.changeFavorite.emit(this.isFavorite);\n }}\n aria-label=\"Favorito\"\n >\n <dropi-icon\n name={this.isFavorite ? 'Heart-solid' : 'Heart'}\n width=\"18px\"\n height=\"18px\"\n color={this.isFavorite ? '#fff' : '#858ea6'}\n />\n </button>\n )}\n </div>\n </div>\n\n {/* ── Product info ── */}\n <div class=\"product-info\">\n\n {/* Insignia — overlapping from top */}\n {this.supplierCategory && (\n <dropi-ilustration-icon\n class=\"supplier-insignia\"\n type=\"insignia\"\n stateInsignia={this.supplierCategory as any}\n tagProduct={true}\n />\n )}\n\n {/* Category + Stock row */}\n <div class=\"product-header\">\n {this.category && (\n <span class=\"category\">{this.category}</span>\n )}\n <div class=\"stock-info\">\n <span class=\"stock-label\">Stock:</span>\n <span class=\"stock-value\" style={{ color: this.getStockColor() }}>\n {this.stock === 0 ? 'Agotado' : this.stock}\n </span>\n </div>\n </div>\n\n {/* Product name */}\n <h3 class=\"product-name\">{this.productName}</h3>\n\n {/* Supplier */}\n {this.supplier && (\n <div class=\"supplier-info\">\n <span class=\"supplier-label\">Proveedor:</span>\n <span\n class=\"supplier-name\"\n onClick={(e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); }}\n >\n {this.supplier}\n </span>\n </div>\n )}\n\n {/* Two price columns */}\n <div class=\"price-container\">\n <div class=\"price-item\">\n <span class=\"price-label\">Precio proveedor</span>\n <span class=\"price-value\">{this.currency} {this.formatPrice(this.salePrice)}</span>\n </div>\n <div class=\"price-item\">\n <span class=\"price-label\">Precio sugerido</span>\n <span class=\"price-value\">{this.currency} {this.formatPrice(this.suggestedPrice)}</span>\n </div>\n </div>\n </div>\n\n {/* ── Separator ── */}\n <div class=\"separator\"></div>\n\n {/* ── Action button ── */}\n {this.showAddButton && (\n <div\n class={{ 'action-button': true, 'action-button--disabled': !this.inStock }}\n onClick={(e) => { e.stopPropagation(); if (this.inStock) this.dropiAddProduct.emit(); }}\n >\n <dropi-icon\n name=\"Shopping-cart-arrow-rigth\"\n width=\"20px\"\n height=\"20px\"\n color=\"#f49a3d\"\n />\n <span class=\"button-text\">Enviar a cliente</span>\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-card-section.entry.js RENAMED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
 const dropiCardSectionCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.card-section{display:flex;align-items:center;justify-content:space-between;gap:var(--Size-4, 16px);padding:var(--Size-3, 12px) var(--Size-4, 16px);background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-100, #e6eaf2);border-radius:var(--Border-2, 8px)}.card-section__text{flex:1}.card-section__title{margin:0 0 4px;font-family:inherit;font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1f2433)}h5.card-section__title{font-size:var(--font-size-m, 14px)}h6.card-section__title{font-size:var(--font-size-s, 12px)}.card-section__desc{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}.card-section__control{flex-shrink:0}.card-section__dropdown-btn{display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer}`;
@@ -23,9 +23,9 @@ const DropiCardSection = class {
     /** Emitted when dropdown icon is clicked */
     onClick;
     render() {
-        return (h("div", { key: 'f0afbda9991af5b381a65dd5e620ca3d8e50791f', class: "card-section" }, h("div", { key: 'bb0a62ec9840a762ea3be5c342adbc431f26ba7e', class: "card-section__text" }, this.type === 'important'
+        return (h("div", { key: 'aa7548c223bf3238b7af10e52821e3ffd19fefca', class: "card-section" }, h("div", { key: '6b0ed1e7f7c282b0f67277567a2fa1ffbab9d04e', class: "card-section__text" }, this.type === 'important'
             ? h("h5", { class: "card-section__title card-section__title--important" }, this.title)
-            : h("h6", { class: "card-section__title" }, this.title), this.description && h("p", { key: 'd8ae14dfb52783a44c1f9edac1c9c388422f58e7', class: "card-section__desc" }, this.description)), h("div", { key: '927e20c496006fa26fcbc533faa3b55b890008dd', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { isChecked: this.isChecked, onOnChange: (e) => {
+            : h("h6", { class: "card-section__title" }, this.title), this.description && h("p", { key: 'f0c83d631d541d95c19e4a246634da56413a3de9', class: "card-section__desc" }, this.description)), h("div", { key: '976d78401ab26872df88115ae0f0449bcd2faae9', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { isChecked: this.isChecked, onOnChange: (e) => {
                 this.isChecked = e.detail;
                 this.onChange.emit(e.detail);
             } })) : (h("button", { class: "card-section__dropdown-btn", onClick: () => this.onClick.emit(), "aria-label": "Expandir" }, h("dropi-icon", { name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))))));
@@ -34,3 +34,6 @@ const DropiCardSection = class {
 DropiCardSection.style = dropiCardSectionCss();
 export { DropiCardSection as dropi_card_section };
+//# sourceMappingURL=dropi-card-section.entry.esm.js.map
+//# sourceMappingURL=dropi-card-section.entry.js.map

package/dist/dropi-ui/dropi-card-section.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dropi-card-section.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,w2BAAw2B,CAAC;;MCW/3B,gBAAgB,GAAA,MAAA;;;;;;;IAEnB,KAAK,GAAW,OAAO;;IAEvB,WAAW,GAAW,aAAa;;IAEnC,WAAW,GAA0B,UAAU;;IAE/C,IAAI,GAA2B,WAAW;;IAEzB,SAAS,GAAY,KAAK;;AAG1C,IAAA,QAAQ;;AAER,IAAA,OAAO;IAEhB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,IAAI,KAAK;AACb,cAAE,UAAI,KAAK,EAAC,oDAAoD,EAAA,EAAE,IAAI,CAAC,KAAK;AAC5E,cAAE,UAAI,KAAK,EAAC,qBAAqB,EAAA,EAAE,IAAI,CAAC,KAAK,CAAM,EAEpD,IAAI,CAAC,WAAW,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,oBAAoB,EAAA,EAAE,IAAI,CAAC,WAAW,CAAK,CACrE,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAC/B,IAAI,CAAC,WAAW,KAAK,QAAQ,IAC5B,CAAA,CAAA,cAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,CAAC,CAAuB,KAAI;AACtC,gBAAA,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,MAAM;gBACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AAC9B,aAAC,EAAA,CACD,KAEF,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAA,YAAA,EAAa,UAAU,EAAA,EAClG,CAAA,CAAA,YAAA,EAAA,EAAY,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG,CAC7E,CACV,CACG,CACF;;;;;;;","names":[],"sources":["src/components/dropi-card-section/dropi-card-section.css?tag=dropi-card-section&encapsulation=shadow","src/components/dropi-card-section/dropi-card-section.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.card-section {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--Size-4, 16px);\n padding: var(--Size-3, 12px) var(--Size-4, 16px);\n background: var(--Neutral-White, #ffffff);\n border: 1px solid var(--Gray-Gray-100, #e6eaf2);\n border-radius: var(--Border-2, 8px);\n}\n\n.card-section__text { flex: 1; }\n\n.card-section__title {\n margin: 0 0 4px;\n font-family: inherit;\n font-weight: var(--font-weight-bold, 700);\n color: var(--Gray-Gray-800, #1f2433);\n}\n\nh5.card-section__title { font-size: var(--font-size-m, 14px); }\nh6.card-section__title { font-size: var(--font-size-s, 12px); }\n\n.card-section__desc {\n margin: 0;\n font-size: var(--font-size-xs, 10px);\n color: var(--Gray-Gray-500, #69738c);\n}\n\n.card-section__control { flex-shrink: 0; }\n\n.card-section__dropdown-btn {\n display: flex;\n align-items: center;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @component dropi-card-section\n * Section card with title, description and a switch or dropdown control.\n */\n@Component({\n tag: 'dropi-card-section',\n styleUrl: 'dropi-card-section.css',\n shadow: true,\n})\nexport class DropiCardSection {\n /** Section title — matches Angular 'title' */\n @Prop() title: string = 'title';\n /** Section description */\n @Prop() description: string = 'Description';\n /** Control type on the right */\n @Prop() typeElement: 'dropdown' | 'switch' = 'dropdown';\n /** Title size variant */\n @Prop() type: 'medium' | 'important' = 'important';\n /** Switch checked state */\n @Prop({ mutable: true }) isChecked: boolean = false;\n\n /** Emitted when switch changes */\n @Event() onChange: EventEmitter<boolean>;\n /** Emitted when dropdown icon is clicked */\n @Event() onClick: EventEmitter<void>;\n\n render() {\n return (\n <div class=\"card-section\">\n <div class=\"card-section__text\">\n {this.type === 'important'\n ? <h5 class=\"card-section__title card-section__title--important\">{this.title}</h5>\n : <h6 class=\"card-section__title\">{this.title}</h6>\n }\n {this.description && <p class=\"card-section__desc\">{this.description}</p>}\n </div>\n\n <div class=\"card-section__control\">\n {this.typeElement === 'switch' ? (\n <dropi-switch\n isChecked={this.isChecked}\n onOnChange={(e: CustomEvent<boolean>) => {\n this.isChecked = e.detail;\n this.onChange.emit(e.detail);\n }}\n />\n ) : (\n <button class=\"card-section__dropdown-btn\" onClick={() => this.onClick.emit()} aria-label=\"Expandir\">\n <dropi-icon name=\"Dropdown-down\" width=\"20px\" height=\"20px\" color=\"Gray-Gray-500\" />\n </button>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-carousel.entry.js RENAMED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-Cvp2LQOM.js';
 const dropiCarouselCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.dropi-carousel-container{display:flex;flex-direction:column;position:relative;width:100%;max-width:100%;overflow:hidden;padding:0 var(--Size-4)}.dropi-carousel-content{display:flex;align-items:center;position:relative;padding:1rem 0;width:100%}.dropi-carousel-items-content{overflow:hidden;flex:1;padding:0;width:100%;max-width:100%}.dropi-carousel-items-container{display:flex;padding-bottom:var(--Size-3);will-change:transform}.dropi-carousel-item{flex:0 0 auto;padding:0 0.5rem;box-sizing:border-box}.dropi-carousel-item>*{width:100%;box-sizing:border-box;display:block}.dropi-carousel-nav{display:flex;width:40px;height:40px;justify-content:center;align-items:center;cursor:pointer;transition:all 0.2s;flex-shrink:0;z-index:1;border-radius:var(--Border-5);background:var(--Neutral-White, #fff);box-shadow:var(--Shadow-medium);border:none;appearance:none;padding:0}.dropi-carousel-nav:hover{background:var(--Gray-Gray-50)}.dropi-carousel-nav:disabled{opacity:0.4;cursor:not-allowed;box-shadow:none}.dropi-carousel-prev{margin-right:1rem}.dropi-carousel-next{margin-left:1rem}.dropi-carousel-indicators{display:flex;justify-content:center;gap:0.5rem;list-style:none;padding:1rem 0 0 0;margin:0}.dropi-carousel-indicators li{cursor:pointer}.dropi-carousel-indicators li button{width:1rem;height:1rem;border-radius:50%;border:1px solid var(--Gray-Gray-100, #eceef4);background:var(--Neutral-White, #fff);cursor:pointer;transition:all 0.2s;padding:0}.dropi-carousel-indicators li.active button{background:var(--Primary-Primary-500);border-color:var(--Primary-Primary-500)}.dropi-carousel-indicators li:hover button{background:var(--Gray-Gray-200)}.vertical .dropi-carousel-content{flex-direction:column}.vertical .dropi-carousel-items-container{flex-direction:column}.vertical .dropi-carousel-prev{margin:0 0 1rem 0}.vertical .dropi-carousel-next{margin:1rem 0 0 0}@media (max-width: 768px){.dropi-carousel-container{padding:0}.dropi-carousel-item{padding:0 0.25rem}}`;
@@ -45,6 +45,11 @@ const DropiCarousel = class {
         this.updateTransform();
     }
     componentWillLoad() {
+        if (!this.value || (Array.isArray(this.value) && this.value.length === 0)) {
+            const attrValue = this.el.getAttribute('value');
+            if (attrValue)
+                this.value = attrValue;
+        }
         this.handleValue(this.value);
         this.internalPage = this.page;
     }
@@ -130,7 +135,7 @@ const DropiCarousel = class {
         if (!items.length)
             return null;
         const itemFlexBasis = `${100 / this.numVisible}%`;
-        return (h("div", { class: { 'dropi-carousel-container': true, 'vertical': this.orientation === 'vertical' } }, h("div", { class: "dropi-carousel-content" }, this.showNavigators && items.length > this.numVisible && (h("button", { class: "dropi-carousel-nav dropi-carousel-prev", disabled: !this.circular && this.internalPage === 0, onClick: (e) => this.navBackward(e), "aria-label": "Anterior" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M14.659 17.5a.833.833 0 0 1-.589-.244l-4.43-4.431a.833.833 0 0 1 0-1.178l4.43-4.431a.834.834 0 0 1 1.179 1.178L11.42 12.25l3.83 3.829a.833.833 0 0 1-.59 1.421Z", fill: "#475066" })))), h("div", { class: "dropi-carousel-items-content" }, h("div", { class: "dropi-carousel-items-container", ref: (el) => (this.itemsContainer = el), style: { transition: this.isAnimating ? 'transform 0.5s ease' : 'none' } }, items.map((item, i) => (h("div", { class: "dropi-carousel-item", style: { flex: `0 0 ${itemFlexBasis}` } }, typeof item === 'string' ? (h("img", { src: item, alt: `Slide ${i + 1}`, loading: "lazy" })) : (h("slot", { name: `item-${i}` }))))))), this.showNavigators && items.length > this.numVisible && (h("button", { class: "dropi-carousel-nav dropi-carousel-next", disabled: !this.circular && this.internalPage >= this.totalPages - 1, onClick: (e) => this.navForward(e), "aria-label": "Siguiente" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M9.341 17.5a.833.833 0 0 0 .589-.244l4.43-4.431a.833.833 0 0 0 0-1.178l-4.43-4.431a.834.834 0 0 0-1.179 1.178l3.83 3.829-3.83 3.829a.833.833 0 0 0 .59 1.421Z", fill: "#475066" }))))), this.showIndicators && this.totalPages > 1 && (h("ul", { class: "dropi-carousel-indicators" }, Array.from({ length: this.totalPages }).map((_, i) => (h("li", { class: { active: i === this.internalPage }, onClick: () => this.onDotClick(i) }, h("button", { type: "button", "aria-label": `Página ${i + 1}` }))))))));
+        return (h("div", { class: { 'dropi-carousel-container': true, 'vertical': this.orientation === 'vertical' } }, h("div", { class: "dropi-carousel-content" }, this.showNavigators && items.length > this.numVisible && (h("button", { class: "dropi-carousel-nav dropi-carousel-prev", disabled: !this.circular && this.internalPage === 0, onClick: (e) => this.navBackward(e), "aria-label": "Anterior" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M14.659 17.5a.833.833 0 0 1-.589-.244l-4.43-4.431a.833.833 0 0 1 0-1.178l4.43-4.431a.834.834 0 0 1 1.179 1.178L11.42 12.25l3.83 3.829a.833.833 0 0 1-.59 1.421Z", fill: "#475066" })))), h("div", { class: "dropi-carousel-items-content" }, h("div", { class: "dropi-carousel-items-container", ref: (el) => (this.itemsContainer = el), style: { transition: this.isAnimating ? 'transform 0.5s ease' : 'none' } }, items.map((item, i) => (h("div", { class: "dropi-carousel-item", style: { flex: `0 0 ${itemFlexBasis}` } }, typeof item === 'string' ? (h("img", { src: item, alt: `Slide ${i + 1}` })) : (h("slot", { name: `item-${i}` }))))))), this.showNavigators && items.length > this.numVisible && (h("button", { class: "dropi-carousel-nav dropi-carousel-next", disabled: !this.circular && this.internalPage >= this.totalPages - 1, onClick: (e) => this.navForward(e), "aria-label": "Siguiente" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M9.341 17.5a.833.833 0 0 0 .589-.244l4.43-4.431a.833.833 0 0 0 0-1.178l-4.43-4.431a.834.834 0 0 0-1.179 1.178l3.83 3.829-3.83 3.829a.833.833 0 0 0 .59 1.421Z", fill: "#475066" }))))), this.showIndicators && this.totalPages > 1 && (h("ul", { class: "dropi-carousel-indicators" }, Array.from({ length: this.totalPages }).map((_, i) => (h("li", { class: { active: i === this.internalPage }, onClick: () => this.onDotClick(i) }, h("button", { type: "button", "aria-label": `Página ${i + 1}` }))))))));
     }
     static get watchers() { return {
         "value": [{
@@ -144,3 +149,6 @@ const DropiCarousel = class {
 DropiCarousel.style = dropiCarouselCss();
 export { DropiCarousel as dropi_carousel };
+//# sourceMappingURL=dropi-carousel.entry.esm.js.map
+//# sourceMappingURL=dropi-carousel.entry.js.map

package/dist/dropi-ui/dropi-carousel.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dropi-carousel.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-carousel/dropi-carousel.css?tag=dropi-carousel&encapsulation=shadow","src/components/dropi-carousel/dropi-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n*, *::before, *::after {\n box-sizing: border-box;\n}\n\n.dropi-carousel-container {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n max-width: 100%;\n overflow: hidden;\n padding: 0 var(--Size-4);\n}\n\n.dropi-carousel-content {\n display: flex;\n align-items: center;\n position: relative;\n padding: 1rem 0;\n width: 100%;\n}\n\n.dropi-carousel-items-content {\n overflow: hidden;\n flex: 1;\n padding: 0;\n width: 100%;\n max-width: 100%;\n}\n\n.dropi-carousel-items-container {\n display: flex;\n padding-bottom: var(--Size-3);\n will-change: transform;\n}\n\n.dropi-carousel-item {\n flex: 0 0 auto;\n padding: 0 0.5rem;\n box-sizing: border-box;\n}\n\n.dropi-carousel-item > * {\n width: 100%;\n box-sizing: border-box;\n display: block;\n}\n\n.dropi-carousel-nav {\n display: flex;\n width: 40px;\n height: 40px;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n transition: all 0.2s;\n flex-shrink: 0;\n z-index: 1;\n border-radius: var(--Border-5);\n background: var(--Neutral-White, #fff);\n box-shadow: var(--Shadow-medium);\n border: none;\n appearance: none;\n padding: 0;\n}\n\n.dropi-carousel-nav:hover {\n background: var(--Gray-Gray-50);\n}\n\n.dropi-carousel-nav:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n box-shadow: none;\n}\n\n.dropi-carousel-prev {\n margin-right: 1rem;\n}\n\n.dropi-carousel-next {\n margin-left: 1rem;\n}\n\n.dropi-carousel-indicators {\n display: flex;\n justify-content: center;\n gap: 0.5rem;\n list-style: none;\n padding: 1rem 0 0 0;\n margin: 0;\n}\n\n.dropi-carousel-indicators li {\n cursor: pointer;\n}\n\n.dropi-carousel-indicators li button {\n width: 1rem;\n height: 1rem;\n border-radius: 50%;\n border: 1px solid var(--Gray-Gray-100, #eceef4);\n background: var(--Neutral-White, #fff);\n cursor: pointer;\n transition: all 0.2s;\n padding: 0;\n}\n\n.dropi-carousel-indicators li.active button {\n background: var(--Primary-Primary-500);\n border-color: var(--Primary-Primary-500);\n}\n\n.dropi-carousel-indicators li:hover button {\n background: var(--Gray-Gray-200);\n}\n\n/* Vertical Orientation */\n.vertical .dropi-carousel-content {\n flex-direction: column;\n}\n\n.vertical .dropi-carousel-items-container {\n flex-direction: column;\n}\n\n.vertical .dropi-carousel-prev {\n margin: 0 0 1rem 0;\n}\n\n.vertical .dropi-carousel-next {\n margin: 1rem 0 0 0;\n}\n\n/* Responsive fixes */\n@media (max-width: 768px) {\n .dropi-carousel-container {\n padding: 0;\n }\n .dropi-carousel-item {\n padding: 0 0.25rem;\n }\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'dropi-carousel',\n styleUrl: 'dropi-carousel.css',\n shadow: true,\n})\nexport class DropiCarousel {\n @Element() el: HTMLElement;\n\n /** Items to display (Array of URLs or objects) */\n @Prop() value: any[] | string = [];\n /** Active page index */\n @Prop({ mutable: true }) page: number = 0;\n /** Number of items visible per page */\n @Prop() numVisible: number = 1;\n /** Number of items to scroll per click */\n @Prop() numScroll: number = 1;\n /** Orientation of the carousel */\n @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n /** Show navigation arrows */\n @Prop() showNavigators: any = true;\n /** Show dot indicators */\n @Prop() showIndicators: any = true;\n /** Autoplay interval in ms (0 = disabled) */\n @Prop() autoplayInterval: number = 0;\n /** Infinite scrolling */\n @Prop() circular: any = false;\n\n @State() private parsedValue: any[] = [];\n @State() private internalPage: number = 0;\n @State() private isAnimating: boolean = false;\n @State() private totalPages: number = 0;\n\n private itemsContainer: HTMLElement;\n private timer: any;\n\n @Event() pageChange: EventEmitter<number>;\n @Event() onPage: EventEmitter<any>;\n\n @Watch('value')\n handleValue(val: any[] | string) {\n this.parsedValue = typeof val === 'string' ? JSON.parse(val) : (val || []);\n this.updateTotalPages();\n this.updateTransform();\n }\n\n @Watch('page')\n handlePage(val: number) {\n this.internalPage = val;\n this.updateTransform();\n }\n\n componentWillLoad() {\n if (!this.value || (Array.isArray(this.value) && this.value.length === 0)) {\n const attrValue = this.el.getAttribute('value');\n if (attrValue) this.value = attrValue;\n }\n this.handleValue(this.value);\n this.internalPage = this.page;\n }\n\n componentDidLoad() {\n this.updateTransform();\n if (this.autoplayInterval > 0) {\n this.startAutoplay();\n }\n window.addEventListener('resize', this.onResize);\n }\n\n disconnectedCallback() {\n this.stopAutoplay();\n window.removeEventListener('resize', this.onResize);\n }\n\n private onResize = () => {\n this.updateTotalPages();\n this.updateTransform();\n };\n\n private startAutoplay() {\n this.timer = setInterval(() => this.navForward(), this.autoplayInterval);\n }\n\n private stopAutoplay() {\n if (this.timer) clearInterval(this.timer);\n }\n\n private updateTotalPages() {\n if (!this.parsedValue.length || this.parsedValue.length <= this.numVisible) {\n this.totalPages = 1;\n return;\n }\n const totalItems = this.parsedValue.length;\n const remainingItems = totalItems - this.numVisible;\n this.totalPages = Math.ceil(remainingItems / this.numScroll) + 1;\n }\n\n private updateTransform() {\n if (!this.itemsContainer) return;\n \n const prop = this.orientation === 'vertical' ? 'translateY' : 'translateX';\n const firstItem = this.itemsContainer.querySelector('.dropi-carousel-item') as HTMLElement;\n if (!firstItem) return;\n\n const itemSize = this.orientation === 'vertical' ? firstItem.offsetHeight : firstItem.offsetWidth;\n const itemsScrolled = this.internalPage * this.numScroll;\n const maxScroll = Math.max(0, this.parsedValue.length - this.numVisible);\n const safeScroll = Math.min(itemsScrolled, maxScroll);\n \n const translateValue = -(safeScroll * itemSize);\n this.itemsContainer.style.transform = `${prop}(${translateValue}px)`;\n }\n\n private navForward = (e?: Event) => {\n if (e) e.preventDefault();\n if (this.circular || this.internalPage < this.totalPages - 1) {\n this.isAnimating = true;\n this.internalPage = (this.internalPage + 1) % this.totalPages;\n this.page = this.internalPage;\n this.updateTransform();\n this.pageChange.emit(this.internalPage);\n setTimeout(() => (this.isAnimating = false), 500);\n }\n };\n\n private navBackward = (e?: Event) => {\n if (e) e.preventDefault();\n if (this.circular || this.internalPage > 0) {\n this.isAnimating = true;\n this.internalPage = (this.internalPage - 1 + this.totalPages) % this.totalPages;\n this.page = this.internalPage;\n this.updateTransform();\n this.pageChange.emit(this.internalPage);\n setTimeout(() => (this.isAnimating = false), 500);\n }\n };\n\n private onDotClick(index: number) {\n this.isAnimating = true;\n this.internalPage = index;\n this.page = this.internalPage;\n this.updateTransform();\n this.pageChange.emit(this.internalPage);\n setTimeout(() => (this.isAnimating = false), 500);\n }\n\n render() {\n const items = this.parsedValue;\n if (!items.length) return null;\n\n const itemFlexBasis = `${100 / this.numVisible}%`;\n\n return (\n <div class={{ 'dropi-carousel-container': true, 'vertical': this.orientation === 'vertical' }}>\n <div class=\"dropi-carousel-content\">\n {this.showNavigators && items.length > this.numVisible && (\n <button\n class=\"dropi-carousel-nav dropi-carousel-prev\"\n disabled={!this.circular && this.internalPage === 0}\n onClick={(e) => this.navBackward(e)}\n aria-label=\"Anterior\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M14.659 17.5a.833.833 0 0 1-.589-.244l-4.43-4.431a.833.833 0 0 1 0-1.178l4.43-4.431a.834.834 0 0 1 1.179 1.178L11.42 12.25l3.83 3.829a.833.833 0 0 1-.59 1.421Z\" fill=\"#475066\" />\n </svg>\n </button>\n )}\n\n <div class=\"dropi-carousel-items-content\">\n <div\n class=\"dropi-carousel-items-container\"\n ref={(el) => (this.itemsContainer = el)}\n style={{ transition: this.isAnimating ? 'transform 0.5s ease' : 'none' }}\n >\n {items.map((item, i) => (\n <div class=\"dropi-carousel-item\" style={{ flex: `0 0 ${itemFlexBasis}` }}>\n {typeof item === 'string' ? (\n <img src={item} alt={`Slide ${i + 1}`} />\n ) : (\n <slot name={`item-${i}`} />\n )}\n </div>\n ))}\n </div>\n </div>\n\n {this.showNavigators && items.length > this.numVisible && (\n <button\n class=\"dropi-carousel-nav dropi-carousel-next\"\n disabled={!this.circular && this.internalPage >= this.totalPages - 1}\n onClick={(e) => this.navForward(e)}\n aria-label=\"Siguiente\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M9.341 17.5a.833.833 0 0 0 .589-.244l4.43-4.431a.833.833 0 0 0 0-1.178l-4.43-4.431a.834.834 0 0 0-1.179 1.178l3.83 3.829-3.83 3.829a.833.833 0 0 0 .59 1.421Z\" fill=\"#475066\" />\n </svg>\n </button>\n )}\n </div>\n\n {this.showIndicators && this.totalPages > 1 && (\n <ul class=\"dropi-carousel-indicators\">\n {Array.from({ length: this.totalPages }).map((_, i) => (\n <li class={{ active: i === this.internalPage }} onClick={() => this.onDotClick(i)}>\n <button type=\"button\" aria-label={`Página ${i + 1}`} />\n </li>\n ))}\n </ul>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-checkbox-selection-list.entry.js RENAMED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
 const dropiCheckboxSelectionListCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.csl__search{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);margin-bottom:var(--Size-2, 8px)}.csl__search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.csl__clear{display:flex;background:none;border:none;padding:0;cursor:pointer}.csl__list{display:flex;flex-direction:column}.csl__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;border-radius:var(--Border-1, 4px);transition:background 0.15s}.csl__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.csl__icon{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}.csl__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);flex:1}.csl__empty{padding:var(--Size-4, 16px);text-align:center;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-400, #858ea6)}`;
@@ -52,10 +52,10 @@ const DropiCheckboxSelectionList = class {
     }
     render() {
         const items = this.filtered;
-        return (h("div", { key: 'd2375e280c0cf0f6d46430bd027a8d03b32cd433', class: "csl" }, this.showFilter && (h("div", { key: 'efbc85d0c1b331c25ffa95c26336fef280633eef', class: "csl__search" }, h("dropi-icon", { key: '2b428c87384af4d54cc081d63a1c78d480c006ee', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: '3f8808e55a6dd9873e385b7046a56cc1121b77f7', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (h("div", { key: 'a86957a361ddab935966496e85da0474d6c7618a', class: "csl" }, this.showFilter && (h("div", { key: 'c6e6d3c7386a788c0e3141ac77b78b597020e43d', class: "csl__search" }, h("dropi-icon", { key: '02b8bbc778c1811f65f4cd07bfd0618a0c647573', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: '935768e39f732099837e2d3dc4791ab2f7f31273', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
                 this.filterText = e.target.value;
                 this.onSearch.emit(this.filterText);
-            } }), this.filterText && (h("button", { key: '8460836fc527444f3f5a302f4b1856a1192882e2', class: "csl__clear", onClick: () => { this.filterText = ''; this.onSearch.emit(''); } }, h("dropi-icon", { key: '442b9249d97adca6b8fbaf066bee3b0f2a0217e7', name: "Close-small", width: "14px", height: "14px", color: "Gray-Gray-400" }))))), h("div", { key: 'e1599fca9f98199f7bb0671bcb7f71bddcd0c9df', class: "csl__list" }, items.length === 0 && this.showNotFound ? (h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
+            } }), this.filterText && (h("button", { key: 'b93947ffd70113fc80e425dd0da04cce04ad3f27', class: "csl__clear", onClick: () => { this.filterText = ''; this.onSearch.emit(''); } }, h("dropi-icon", { key: 'b2e152f7276a914fc03664dabdb3574a2cbeb2c6', name: "Close-small", width: "14px", height: "14px", color: "Gray-Gray-400" }))))), h("div", { key: '6010ffc9d6ff60dc444da1274609f2b15f69d4a8', class: "csl__list" }, items.length === 0 && this.showNotFound ? (h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
             const checked = this.selected.includes(opt.id);
             return (h("div", { class: "csl__item", key: opt.id, onClick: () => this.toggle(opt.id) }, h("dropi-checkbox", { checked: checked }), opt.icon && h("img", { class: "csl__icon", src: opt.icon, alt: opt.label }), h("span", { class: "csl__label" }, opt.label)));
         })))));
@@ -69,3 +69,6 @@ const DropiCheckboxSelectionList = class {
 DropiCheckboxSelectionList.style = dropiCheckboxSelectionListCss();
 export { DropiCheckboxSelectionList as dropi_checkbox_selection_list };
+//# sourceMappingURL=dropi-checkbox-selection-list.entry.esm.js.map
+//# sourceMappingURL=dropi-checkbox-selection-list.entry.js.map

package/dist/dropi-ui/dropi-checkbox-selection-list.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dropi-checkbox-selection-list.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.css?tag=dropi-checkbox-selection-list&encapsulation=shadow","src/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.csl__search {\n display: flex;\n align-items: center;\n gap: var(--Size-2, 8px);\n padding: var(--Size-2, 8px) var(--Size-3, 12px);\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: var(--Border-2, 8px);\n margin-bottom: var(--Size-2, 8px);\n}\n\n.csl__search-input {\n flex: 1; border: none; outline: none;\n font-size: var(--font-size-s, 12px); font-family: inherit;\n color: var(--Gray-Gray-700, #32394d); background: transparent;\n}\n\n.csl__clear { display: flex; background: none; border: none; padding: 0; cursor: pointer; }\n\n.csl__list { display: flex; flex-direction: column; }\n\n.csl__item {\n display: flex;\n align-items: center;\n gap: var(--Size-2, 8px);\n padding: var(--Size-2, 8px) var(--Size-3, 12px);\n cursor: pointer;\n border-radius: var(--Border-1, 4px);\n transition: background 0.15s;\n}\n.csl__item:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n\n.csl__icon { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }\n\n.csl__label { font-size: var(--font-size-s, 12px); color: var(--Gray-Gray-700, #32394d); flex: 1; }\n\n.csl__empty {\n padding: var(--Size-4, 16px);\n text-align: center;\n font-size: var(--font-size-s, 12px);\n color: var(--Gray-Gray-400, #858ea6);\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\nexport interface CheckboxOption {\n id: string | number;\n label: string;\n icon?: string;\n [key: string]: any;\n}\n\n/**\n * @component dropi-checkbox-selection-list\n * Searchable list of checkbox options with multi-select support.\n */\n@Component({\n tag: 'dropi-checkbox-selection-list',\n styleUrl: 'dropi-checkbox-selection-list.css',\n shadow: true,\n})\nexport class DropiCheckboxSelectionList {\n /** Options array or JSON string */\n @Prop() options: CheckboxOption[] | string = [];\n /** Show search filter */\n @Prop() showFilter: boolean = true;\n /** Search placeholder */\n @Prop() filterPlaceholder: string = 'Search';\n /** Show \"no results\" message */\n @Prop() showNotFound: boolean = true;\n /** Empty state message */\n @Prop() notFoundMessage: string = 'No related results found';\n /** Allow multiple selection */\n @Prop() multiSelect: boolean = true;\n /** Debounce delay in ms for search input (matches Angular `searchDelay`) */\n @Prop() searchDelay: number = 100;\n\n @State() private filterText: string = '';\n @State() private selected: (string | number)[] = [];\n @State() private parsedOptions: CheckboxOption[] = [];\n\n /** Emitted when selection changes — matches Angular 'checkedValues' */\n @Event() checkedValues: EventEmitter<(string | number)[]>;\n /** Emitted on search — matches Angular 'onSearch' */\n @Event() onSearch: EventEmitter<string>;\n\n @Watch('options')\n optionsChanged(val: CheckboxOption[] | string) {\n this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);\n }\n\n componentWillLoad() { this.optionsChanged(this.options); }\n\n private get filtered(): CheckboxOption[] {\n if (!this.filterText) return this.parsedOptions;\n const q = this.filterText.toLowerCase();\n return this.parsedOptions.filter(o => o.label?.toLowerCase().includes(q));\n }\n\n private toggle(id: string | number) {\n if (this.multiSelect) {\n this.selected = this.selected.includes(id)\n ? this.selected.filter(s => s !== id)\n : [...this.selected, id];\n } else {\n this.selected = this.selected.includes(id) ? [] : [id];\n }\n this.checkedValues.emit(this.selected);\n }\n\n render() {\n const items = this.filtered;\n\n return (\n <div class=\"csl\">\n {this.showFilter && (\n <div class=\"csl__search\">\n <dropi-icon name=\"Search\" width=\"16px\" height=\"16px\" color=\"Gray-Gray-400\" />\n <input\n class=\"csl__search-input\"\n type=\"text\"\n placeholder={this.filterPlaceholder}\n value={this.filterText}\n onInput={(e) => {\n this.filterText = (e.target as HTMLInputElement).value;\n this.onSearch.emit(this.filterText);\n }}\n />\n {this.filterText && (\n <button class=\"csl__clear\" onClick={() => { this.filterText = ''; this.onSearch.emit(''); }}>\n <dropi-icon name=\"Close-small\" width=\"14px\" height=\"14px\" color=\"Gray-Gray-400\" />\n </button>\n )}\n </div>\n )}\n\n <div class=\"csl__list\">\n {items.length === 0 && this.showNotFound ? (\n <div class=\"csl__empty\">{this.notFoundMessage}</div>\n ) : (\n items.map(opt => {\n const checked = this.selected.includes(opt.id);\n return (\n <div class=\"csl__item\" key={opt.id} onClick={() => this.toggle(opt.id)}>\n <dropi-checkbox checked={checked} />\n {opt.icon && <img class=\"csl__icon\" src={opt.icon} alt={opt.label} />}\n <span class=\"csl__label\">{opt.label}</span>\n </div>\n );\n })\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-checkbox.entry.js RENAMED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
 const dropiCheckboxCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.container-dropi-checkbox{display:inline-block}.check{width:20px;height:20px;border-radius:var(--Border-1, 4px);cursor:pointer;transition:background-color 0.3s ease-in-out,     border-style 0.3s ease-in-out}.noCheck{border-style:solid;border-width:2px;border-color:var(--Gray-Gray-200, #c3c9d9);display:flex;justify-content:center;align-items:center}.noCheck svg{visibility:hidden}.isCheck{display:flex;background-color:var(--Primary-Primary-500, #f49a3d);justify-content:center;align-items:center}.disabled{background-color:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2);cursor:not-allowed}`;
@@ -20,15 +20,18 @@ const DropiCheckbox = class {
         this.onChange.emit(this.checked);
     }
     render() {
-        return (h("div", { key: '2bf224c57c9b0b48d3d2a28f2cf52713b532110f', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: '7dfbc936f1a6e641a3e18c9ffc769e8a25fd9328', class: {
+        return (h("div", { key: 'fdc1c54733617c0dab1ae11050d90650dc3eba91', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: '6329c1a53e8b9f85ea26ca01afb920583570e85f', class: {
                 check: true,
                 isCheck: this.checked,
                 noCheck: !this.checked,
                 disabled: this.disabled,
-            } }, h("svg", { key: '647d2f6b000569906812f1bddbcc69198a2774cc', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '3bbf796769463ebad1e7710beadc0433816ce189', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
+            } }, h("svg", { key: '50b1ebd160e1ee6b28ef23651f1e12afc9406f8a', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '518070eaa2902d4cdc5e905f8a80d06b3d044f3d', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
     }
     static get formAssociated() { return true; }
 };
 DropiCheckbox.style = dropiCheckboxCss();
 export { DropiCheckbox as dropi_checkbox };
+//# sourceMappingURL=dropi-checkbox.entry.esm.js.map
+//# sourceMappingURL=dropi-checkbox.entry.js.map

package/dist/dropi-ui/dropi-checkbox.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dropi-checkbox.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,8qBAA8qB,CAAC;;MCalsB,aAAa,GAAA,MAAA;;;;;;IAEgB,OAAO,GAAY,KAAK;;IAEvC,QAAQ,GAAY,KAAK;;AAGzC,IAAA,QAAQ;IAET,WAAW,GAAA;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;QAC5B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;;IAGlC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EACrE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;gBACX,OAAO,EAAE,IAAI,CAAC,OAAO;AACrB,gBAAA,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;gBACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,EAC5F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,CAAC,EAAC,smCAAsmC,EACxmC,IAAI,EAAC,SAAS,EAAA,CACd,CACE,CACF,CACF;;;;;;;;","names":[],"sources":["src/components/dropi-checkbox/dropi-checkbox.css?tag=dropi-checkbox&encapsulation=shadow","src/components/dropi-checkbox/dropi-checkbox.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n*, *::before, *::after {\n box-sizing: border-box;\n}\n\n.container-dropi-checkbox {\n display: inline-block;\n}\n\n.check {\n width: 20px;\n height: 20px;\n border-radius: var(--Border-1, 4px);\n cursor: pointer;\n transition:\n background-color 0.3s ease-in-out,\n border-style 0.3s ease-in-out;\n}\n\n.noCheck {\n border-style: solid;\n border-width: 2px;\n border-color: var(--Gray-Gray-200, #c3c9d9);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.noCheck svg {\n visibility: hidden;\n}\n\n.isCheck {\n display: flex;\n background-color: var(--Primary-Primary-500, #f49a3d);\n justify-content: center;\n align-items: center;\n}\n\n.disabled {\n background-color: var(--Gray-Gray-50, #f7f8fa);\n border-color: var(--Gray-Gray-100, #e6eaf2);\n cursor: not-allowed;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @component dropi-checkbox\n * A styled checkbox that emits change events.\n * Supports form association via native `<input type=\"checkbox\">` internals.\n */\n@Component({\n tag: 'dropi-checkbox',\n styleUrl: 'dropi-checkbox.css',\n shadow: true,\n formAssociated: true,\n})\nexport class DropiCheckbox {\n /** Whether the checkbox is checked */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n /** Whether the checkbox is disabled */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Emitted when the checked state changes */\n @Event() onChange: EventEmitter<boolean>;\n\n private changeState() {\n if (this.disabled) return;\n this.checked = !this.checked;\n this.onChange.emit(this.checked);\n }\n\n render() {\n return (\n <div class=\"container-dropi-checkbox\" onClick={() => this.changeState()}>\n <div\n class={{\n check: true,\n isCheck: this.checked,\n noCheck: !this.checked,\n disabled: this.disabled,\n }}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z\"\n fill=\"#FFFFFF\"\n />\n </svg>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-chips.entry.js RENAMED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
 const dropiChipsCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);height:24px;padding:0 var(--Size-2, 8px);border-radius:var(--Border-2, 8px);font-size:var(--font-size-xs, 10px);font-family:inherit;width:fit-content;max-width:200px}.chip--filters{background:var(--Primary-Primary-50, #fff5eb);border:1px solid var(--Primary-Primary-200, #fbd4a3);color:var(--Primary-Primary-600, #d4872e)}.chip--fill{background:var(--Gray-Gray-100, #e6eaf2);border:1px solid transparent;color:var(--Gray-Gray-700, #32394d)}.chip__avatar{width:16px;height:16px;border-radius:50%;object-fit:cover;flex-shrink:0}.chip__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.chip__close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:none;padding:0;cursor:pointer;color:inherit;opacity:0.7;transition:opacity 0.15s}.chip__close:hover{opacity:1}`;
@@ -20,9 +20,12 @@ const DropiChips = class {
     /** Emitted when the close icon is clicked */
     onClose;
     render() {
-        return (h("div", { key: '1efcba7f06d54e0f8953330a83d946362e8283a2', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (h("img", { key: '8b5b984cbd85afc86a23907b6cfb0a26b59c029c', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (h("dropi-icon", { key: '8e5c4ca10f94e012421d88b715aa2f49c6261c52', class: "chip__pre-icon", name: this.icon, width: "14px", height: "14px", color: "currentColor" })), h("span", { key: 'caf36314e2bd2704d7ef11e9b75ce5e5def1c2d4', class: "chip__text" }, h("slot", { key: 'de0b015d547872891baefcca9c9cd5c07893e844' })), this.showIcon && (h("button", { key: 'd9998ff121304a99b772e5af04006f90db1c2958', class: "chip__close", onClick: () => this.onClose.emit(), "aria-label": "Eliminar" }, h("dropi-icon", { key: '08491f358bec0380a8ff4ee95bd2d823922a0c68', name: "Cross-circle", width: "14px", height: "14px", color: "currentColor" })))));
+        return (h("div", { key: '1d2faf302cc3eb832d55f46f98a7817fb616e4e1', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (h("img", { key: '3014d189c71a8d3bc23f11caf1181285c6b1b0ed', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (h("dropi-icon", { key: '42c60e26f35e08582045833049d140c3aceaa11d', class: "chip__pre-icon", name: this.icon, width: "14px", height: "14px", color: "currentColor" })), h("span", { key: '474a4adfc086e20b2007f1b423f53b29454546be', class: "chip__text" }, h("slot", { key: '3c3460ffc17a54b8446b63f7b7c7a76162bb5838' })), this.showIcon && (h("button", { key: '6da5b10c81f203dcd204c0fa93babbcab8aaba16', class: "chip__close", onClick: () => this.onClose.emit(), "aria-label": "Eliminar" }, h("dropi-icon", { key: '14ef2e91ede7847830b0e491fd844f9efa637f9a', name: "Cross-circle", width: "14px", height: "14px", color: "currentColor" })))));
     }
 };
 DropiChips.style = dropiChipsCss();
 export { DropiChips as dropi_chips };
+//# sourceMappingURL=dropi-chips.entry.esm.js.map
+//# sourceMappingURL=dropi-chips.entry.js.map

package/dist/dropi-ui/dropi-chips.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dropi-chips.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,y9BAAy9B,CAAC;;MCe1+B,UAAU,GAAA,MAAA;;;;;;IAEb,WAAW,GAAc,MAAM;;IAE/B,IAAI,GAAa,MAAM;;IAEvB,MAAM,GAAW,EAAE;;IAEnB,QAAQ,GAAY,KAAK;;IAEzB,IAAI,GAAW,EAAE;;AAGhB,IAAA,OAAO;IAEhB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAA,MAAA,EAAS,IAAI,CAAC,WAAW,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EAE9D,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,KACpC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAC,EAAE,EAAA,CAAG,CACtD,EAEA,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,KAChC,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,GAAG,CACvG,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EAEN,IAAI,CAAC,QAAQ,KACZ,+DAAQ,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAA,YAAA,EAAa,UAAU,EAAA,EACnF,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAA,CAAG,CAC3E,CACV,CAEG;;;;;;;","names":[],"sources":["src/components/dropi-chips/dropi-chips.css?tag=dropi-chips&encapsulation=shadow","src/components/dropi-chips/dropi-chips.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.chip {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--Size-1, 4px);\n height: 24px;\n padding: 0 var(--Size-2, 8px);\n border-radius: var(--Border-2, 8px);\n font-size: var(--font-size-xs, 10px);\n font-family: inherit;\n width: fit-content;\n max-width: 200px;\n}\n\n/* ── Style variants ─────────────────────────────────────── */\n.chip--filters {\n background: var(--Primary-Primary-50, #fff5eb);\n border: 1px solid var(--Primary-Primary-200, #fbd4a3);\n color: var(--Primary-Primary-600, #d4872e);\n}\n\n.chip--fill {\n background: var(--Gray-Gray-100, #e6eaf2);\n border: 1px solid transparent;\n color: var(--Gray-Gray-700, #32394d);\n}\n\n/* ── Avatar ─────────────────────────────────────────────── */\n.chip__avatar {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n object-fit: cover;\n flex-shrink: 0;\n}\n\n/* ── Label ──────────────────────────────────────────────── */\n.chip__text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n}\n\n/* ── Close button ───────────────────────────────────────── */\n.chip__close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: inherit;\n opacity: 0.7;\n transition: opacity 0.15s;\n}\n\n.chip__close:hover {\n opacity: 1;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type ChipStyle = 'filtrers' | 'fill';\nexport type ChipType = 'icon' | 'text' | 'avatar';\n\n/**\n * @component dropi-chips\n * Chip/tag-like element with optional icon, avatar, and close button.\n * Use <slot> for the chip label text.\n */\n@Component({\n tag: 'dropi-chips',\n styleUrl: 'dropi-chips.css',\n shadow: true,\n})\nexport class DropiChips {\n /** Visual style (named customStyle to avoid conflict with HTMLElement.style) */\n @Prop() customStyle: ChipStyle = 'fill';\n /** Content type */\n @Prop() type: ChipType = 'icon';\n /** Avatar image URL (when type = 'avatar') */\n @Prop() urlImg: string = '';\n /** Show the close/remove icon */\n @Prop() showIcon: boolean = false;\n /** Icon name (when type = 'icon') */\n @Prop() icon: string = '';\n\n /** Emitted when the close icon is clicked */\n @Event() onClose: EventEmitter<void>;\n\n render() {\n return (\n <div class={{ 'chip': true, [`chip--${this.customStyle}`]: true }}>\n\n {this.type === 'avatar' && this.urlImg && (\n <img class=\"chip__avatar\" src={this.urlImg} alt=\"\" />\n )}\n\n {this.type === 'icon' && this.icon && (\n <dropi-icon class=\"chip__pre-icon\" name={this.icon} width=\"14px\" height=\"14px\" color=\"currentColor\" />\n )}\n\n <span class=\"chip__text\">\n <slot />\n </span>\n\n {this.showIcon && (\n <button class=\"chip__close\" onClick={() => this.onClose.emit()} aria-label=\"Eliminar\">\n <dropi-icon name=\"Cross-circle\" width=\"14px\" height=\"14px\" color=\"currentColor\" />\n </button>\n )}\n\n </div>\n );\n }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-city-selector.entry.js RENAMED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-Cvp2LQOM.js';
 const dropiCitySelectorCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.city-selector{position:relative;width:100%}.selector-trigger{width:100%;min-height:44px;padding:6px 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;text-align:left;font-family:inherit;transition:border-color 0.15s}.selector-trigger:hover:not(:disabled){border-color:var(--Gray-Gray-300, #a3abbf)}.selector-trigger:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.city-selector--disabled .selector-trigger{background:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2);cursor:not-allowed;opacity:0.6}.chips-area{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-height:26px;align-items:center}.placeholder{color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}.chip{display:inline-flex;align-items:center;gap:4px;background:var(--Primary-Primary-50, #fff8f0);border:1px solid var(--Primary-Primary-200, #fcd5a8);border-radius:var(--Border-1, 4px);padding:2px 6px;font-size:var(--font-size-xs, 12px);color:var(--Primary-Primary-700, #b85c00)}.chip-remove{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 8px 24px rgba(0, 0, 0, 0.10);z-index:200;overflow:hidden}.search-wrap{padding:10px 12px;border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2)}.search-field{position:relative;display:flex;align-items:center}.search-input{width:100%;height:36px;padding:0 36px 0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);font-size:var(--font-size-s, 14px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:var(--Gray-Gray-50, #f7f8fa);outline:none;transition:border-color 0.15s}.search-input:focus{border-color:var(--Info-Info-500, #50a5f1);background:var(--Neutral-White, #ffffff)}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-icon{position:absolute;right:10px;display:flex;align-items:center;pointer-events:none}.options-list{max-height:280px;overflow-y:auto;background:var(--Neutral-White, #ffffff)}.options-list::-webkit-scrollbar{width:6px}.options-list::-webkit-scrollbar-track{background:transparent}.options-list::-webkit-scrollbar-thumb{background:var(--Gray-Gray-200, #c3c9d9);border-radius:4px}.group-label{padding:14px 16px 8px;font-size:var(--font-size-m, 16px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1f2433);background:var(--Neutral-White, #ffffff)}.city-option{padding:10px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;font-size:var(--font-size-s, 14px);color:var(--Gray-Gray-700, #32394d);background:var(--Neutral-White, #ffffff);transition:background 0.1s;user-select:none}.city-option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.city-option--selected .city-label{color:var(--Gray-Gray-800, #1f2433);font-weight:var(--font-weight-medium, 500)}.checkbox{width:22px;height:22px;border:1.5px solid var(--Gray-Gray-300, #c3c9d9);border-radius:var(--Border-1, 6px);background:var(--Neutral-White, #ffffff);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color 0.15s, background 0.15s}.checkbox--checked{border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-500, #f49a3d)}.city-label{flex:1}.no-results{padding:20px 16px;text-align:center;color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}`;
@@ -28,9 +28,17 @@ const DropiCitySelector = class {
         }
     }
     optionsChanged(val) {
+        if (val == null) {
+            this.parsedOptions = [];
+            return;
+        }
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : val;
     }
     selectedChanged(val) {
+        if (val == null) {
+            this.selected = [];
+            return;
+        }
         this.selected = typeof val === 'string' ? JSON.parse(val) : [...val];
     }
     componentWillLoad() {
@@ -75,7 +83,7 @@ const DropiCitySelector = class {
     }
     render() {
         const groups = this.filtered;
-        return (h("div", { key: 'af6acd88ea001105c036726bed11e0caa6012f10', class: { 'city-selector': true, 'city-selector--disabled': this.disabled } }, h("button", { key: '4a5c368ddea3f43ef9ef42dc68f28b47b642aadb', type: "button", class: "selector-trigger", disabled: this.disabled, onClick: () => this.toggle(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("div", { key: '769288d6567d2f6d453b81198e3ab456c5042443', class: "chips-area" }, this.selected.length === 0 && (h("span", { key: '152b570fd02028d8e1788ced03d56f3853dd98d4', class: "placeholder" }, this.placeholder)), this.selected.map(val => (h("span", { class: "chip", key: String(val) }, this.getLabel(val), h("button", { type: "button", class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, h("dropi-icon", { name: "Close-small", width: "10px", height: "10px", color: "Primary-Primary-500" })))))), h("dropi-icon", { key: '806ec368945b587fcb9125ca3a262ff2c6f9247c', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "16px", height: "16px", color: "Gray-Gray-500" })), this.isOpen && (h("div", { key: '1249ca520defb5fd21d5c5da098c93c3e66bebd3', class: "dropdown", role: "listbox" }, h("div", { key: '244a7a22db381014da6672e310f2d21a9cf39a63', class: "search-wrap" }, h("div", { key: '871a48407ec66d7e9e95a9ab32ff8d74842a4e6e', class: "search-field" }, h("input", { key: '20d5543bae44e70fc4fd61470cae413f29c17687', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), h("span", { key: '44bde8e0ddb6cbade01e4743c9d111fa7c65aa94', class: "search-icon" }, h("dropi-icon", { key: 'c577e87fd8ffd3d4d444541840a139430c96e503', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" })))), h("div", { key: 'c7abe328e26838d49465d3b2767a2b90806e0e05', class: "options-list" }, groups.length === 0 && (h("div", { key: '1f583667dda2e6540254b3155029c97647cb58fb', class: "no-results" }, "Sin resultados")), groups.map(group => (h("div", { key: group.value, class: "group" }, h("div", { class: "group-label" }, group.label), group.items.map(city => {
+        return (h("div", { key: '5b1e27677c34d0dc85dc9c8544e4b0ba9a66216b', class: { 'city-selector': true, 'city-selector--disabled': this.disabled } }, h("button", { key: 'e359c1baff0a255cd396ee35836430486bc67cd3', type: "button", class: "selector-trigger", disabled: this.disabled, onClick: () => this.toggle(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("div", { key: '082246999f826e8cfe1b2d09fd801a5d7db7e1b2', class: "chips-area" }, this.selected.length === 0 && (h("span", { key: '90453c84cae3561412f795ec1ffc01923cd87040', class: "placeholder" }, this.placeholder)), this.selected.map(val => (h("span", { class: "chip", key: String(val) }, this.getLabel(val), h("button", { type: "button", class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, h("dropi-icon", { name: "Close-small", width: "10px", height: "10px", color: "Primary-Primary-500" })))))), h("dropi-icon", { key: '27f05e3fcf08bdb4e83ee52f7bba02a5c87f2d3e', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "16px", height: "16px", color: "Gray-Gray-500" })), this.isOpen && (h("div", { key: '2fd2d164c186d9d4d1f6664e531449373dfce023', class: "dropdown", role: "listbox" }, h("div", { key: 'e6fb9fc7938296d696598e2984167cec5d693b07', class: "search-wrap" }, h("div", { key: '9a56582e19bf264065bb11e9bccdf3179e56fb7b', class: "search-field" }, h("input", { key: '9228debd9abc4e2a884006bd45046e8e5b3cce25', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), h("span", { key: '609751d699dc6227347ec565ff14c3f35fa9a6cf', class: "search-icon" }, h("dropi-icon", { key: 'fcacc7c73eeb3f2dc27f83f9dfcbe2476b85136e', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" })))), h("div", { key: 'c71c2b0303f37169ee221387aeec6ceea499b8e1', class: "options-list" }, groups.length === 0 && (h("div", { key: 'a5525ef28be665b337658032318507ae01f69a0d', class: "no-results" }, "Sin resultados")), groups.map(group => (h("div", { key: group.value, class: "group" }, h("div", { class: "group-label" }, group.label), group.items.map(city => {
             const isSelected = this.selected.includes(city.value);
             return (h("div", { key: String(city.value), class: { 'city-option': true, 'city-option--selected': isSelected }, onClick: (e) => this.toggleCity(city.value, e), role: "option", "aria-selected": isSelected }, h("span", { class: { 'checkbox': true, 'checkbox--checked': isSelected } }, isSelected && (h("dropi-icon", { name: "Check", width: "10px", height: "10px", color: "Neutral-White" }))), h("span", { class: "city-label" }, city.label)));
         })))))))));
@@ -92,3 +100,6 @@ const DropiCitySelector = class {
 DropiCitySelector.style = dropiCitySelectorCss();
 export { DropiCitySelector as dropi_city_selector };
+//# sourceMappingURL=dropi-city-selector.entry.esm.js.map
+//# sourceMappingURL=dropi-city-selector.entry.js.map

package/dist/dropi-ui/dropi-city-selector.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dropi-city-selector.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-city-selector/dropi-city-selector.css?tag=dropi-city-selector&encapsulation=shadow","src/components/dropi-city-selector/dropi-city-selector.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n position: relative;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n/* ── Wrapper ──────────────────────────────────────────────────────── */\n.city-selector {\n position: relative;\n width: 100%;\n}\n\n/* ── Trigger ──────────────────────────────────────────────────────── */\n.selector-trigger {\n width: 100%;\n min-height: 44px;\n padding: 6px 12px;\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: var(--Border-2, 8px);\n background: var(--Neutral-White, #ffffff);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n cursor: pointer;\n text-align: left;\n font-family: inherit;\n transition: border-color 0.15s;\n}\n\n.selector-trigger:hover:not(:disabled) {\n border-color: var(--Gray-Gray-300, #a3abbf);\n}\n\n.selector-trigger:focus {\n outline: none;\n border-color: var(--Info-Info-500, #50a5f1);\n}\n\n.city-selector--disabled .selector-trigger {\n background: var(--Gray-Gray-50, #f7f8fa);\n border-color: var(--Gray-Gray-100, #e6eaf2);\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n/* ── Chips area ───────────────────────────────────────────────────── */\n.chips-area {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n flex: 1;\n min-height: 26px;\n align-items: center;\n}\n\n.placeholder {\n color: var(--Gray-Gray-400, #858ea6);\n font-size: var(--font-size-s, 14px);\n}\n\n.chip {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n background: var(--Primary-Primary-50, #fff8f0);\n border: 1px solid var(--Primary-Primary-200, #fcd5a8);\n border-radius: var(--Border-1, 4px);\n padding: 2px 6px;\n font-size: var(--font-size-xs, 12px);\n color: var(--Primary-Primary-700, #b85c00);\n}\n\n.chip-remove {\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n display: flex;\n align-items: center;\n}\n\n/* ── Dropdown ─────────────────────────────────────────────────────── */\n.dropdown {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n right: 0;\n background: var(--Neutral-White, #ffffff);\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: var(--Border-2, 8px);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);\n z-index: 200;\n overflow: hidden;\n}\n\n/* ── Search ───────────────────────────────────────────────────────── */\n.search-wrap {\n padding: 10px 12px;\n border-bottom: 1px solid var(--Gray-Gray-100, #e6eaf2);\n}\n\n.search-field {\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.search-input {\n width: 100%;\n height: 36px;\n padding: 0 36px 0 12px;\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: var(--Border-2, 8px);\n font-size: var(--font-size-s, 14px);\n font-family: inherit;\n color: var(--Gray-Gray-700, #32394d);\n background: var(--Gray-Gray-50, #f7f8fa);\n outline: none;\n transition: border-color 0.15s;\n}\n\n.search-input:focus {\n border-color: var(--Info-Info-500, #50a5f1);\n background: var(--Neutral-White, #ffffff);\n}\n\n.search-input::placeholder {\n color: var(--Gray-Gray-400, #858ea6);\n}\n\n.search-icon {\n position: absolute;\n right: 10px;\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n\n/* ── Options list ─────────────────────────────────────────────────── */\n.options-list {\n max-height: 280px;\n overflow-y: auto;\n background: var(--Neutral-White, #ffffff);\n}\n\n/* Scrollbar refinado */\n.options-list::-webkit-scrollbar { width: 6px; }\n.options-list::-webkit-scrollbar-track { background: transparent; }\n.options-list::-webkit-scrollbar-thumb {\n background: var(--Gray-Gray-200, #c3c9d9);\n border-radius: 4px;\n}\n\n/* ── Group label ──────────────────────────────────────────────────── */\n.group-label {\n padding: 14px 16px 8px;\n font-size: var(--font-size-m, 16px);\n font-weight: var(--font-weight-bold, 700);\n color: var(--Gray-Gray-800, #1f2433);\n background: var(--Neutral-White, #ffffff);\n}\n\n/* ── City option ──────────────────────────────────────────────────── */\n.city-option {\n padding: 10px 16px;\n display: flex;\n align-items: center;\n gap: 12px;\n cursor: pointer;\n font-size: var(--font-size-s, 14px);\n color: var(--Gray-Gray-700, #32394d);\n background: var(--Neutral-White, #ffffff);\n transition: background 0.1s;\n user-select: none;\n}\n\n.city-option:hover {\n background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.city-option--selected .city-label {\n color: var(--Gray-Gray-800, #1f2433);\n font-weight: var(--font-weight-medium, 500);\n}\n\n/* ── Checkbox visual ──────────────────────────────────────────────── */\n.checkbox {\n width: 22px;\n height: 22px;\n border: 1.5px solid var(--Gray-Gray-300, #c3c9d9);\n border-radius: var(--Border-1, 6px);\n background: var(--Neutral-White, #ffffff);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: border-color 0.15s, background 0.15s;\n}\n\n.checkbox--checked {\n border-color: var(--Primary-Primary-500, #f49a3d);\n background: var(--Primary-Primary-500, #f49a3d);\n}\n\n.city-label {\n flex: 1;\n}\n\n/* ── Empty ────────────────────────────────────────────────────────── */\n.no-results {\n padding: 20px 16px;\n text-align: center;\n color: var(--Gray-Gray-400, #858ea6);\n font-size: var(--font-size-s, 14px);\n}\n","import { Component, Prop, Event, EventEmitter, State, Watch, h, Element, Listen } from '@stencil/core';\n\nexport interface CityOption {\n label: string;\n value: string | number;\n}\n\nexport interface CityGroup {\n label: string;\n value: string;\n items: CityOption[];\n}\n\n/**\n * @component dropi-city-selector\n * Multi-select city picker with grouped options and chip display.\n * Pass options as a JSON string or CityGroup[] array.\n *\n * @example\n * <dropi-city-selector\n * options='[{\"label\":\"Cundinamarca\",\"value\":\"CUN\",\"items\":[{\"label\":\"Bogotá\",\"value\":\"BOG\"}]}]'\n * placeholder=\"Selecciona ciudades\"\n * ></dropi-city-selector>\n */\n@Component({\n tag: 'dropi-city-selector',\n styleUrl: 'dropi-city-selector.css',\n shadow: true,\n})\nexport class DropiCitySelector {\n /** Grouped city options (array or JSON string) */\n @Prop() options: CityGroup[] | string = [];\n /** Currently selected city values */\n @Prop({ mutable: true }) selectedCities: (string | number)[] | string = [];\n /** Placeholder text */\n @Prop() placeholder: string = 'Seleccione una ciudad';\n /** Disable the selector */\n @Prop() disabled: boolean = false;\n\n /** Emitted when selection changes. Detail = selected values array. */\n @Event() selectedCitiesChange: EventEmitter<(string | number)[]>;\n\n @State() private isOpen: boolean = false;\n @State() private selected: (string | number)[] = [];\n @State() private parsedOptions: CityGroup[] = [];\n @State() private searchTerm: string = '';\n\n @Element() el!: HTMLElement;\n\n @Listen('click', { target: 'document' })\n handleDocClick(e: MouseEvent) {\n if (this.isOpen && !e.composedPath().includes(this.el)) {\n this.isOpen = false;\n }\n }\n\n @Watch('options')\n optionsChanged(val: CityGroup[] | string) {\n if (val == null) { this.parsedOptions = []; return; }\n this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val as CityGroup[]);\n }\n\n @Watch('selectedCities')\n selectedChanged(val: (string | number)[] | string) {\n if (val == null) { this.selected = []; return; }\n this.selected = typeof val === 'string' ? JSON.parse(val) : [...(val as (string | number)[])];\n }\n\n componentWillLoad() {\n this.optionsChanged(this.options);\n this.selectedChanged(this.selectedCities);\n }\n\n private get filtered(): CityGroup[] {\n if (!this.searchTerm) return this.parsedOptions;\n const t = this.searchTerm.toLowerCase();\n return this.parsedOptions\n .map(g => ({ ...g, items: g.items.filter(c => c.label.toLowerCase().includes(t)) }))\n .filter(g => g.items.length > 0);\n }\n\n private toggle() {\n if (this.disabled) return;\n this.isOpen = !this.isOpen;\n }\n\n private toggleCity(value: string | number, e: MouseEvent) {\n e.stopPropagation();\n if (this.selected.includes(value)) {\n this.selected = this.selected.filter(v => v !== value);\n } else {\n this.selected = [...this.selected, value];\n }\n this.selectedCitiesChange.emit([...this.selected]);\n }\n\n private removeCity(value: string | number, e: MouseEvent) {\n e.stopPropagation();\n this.selected = this.selected.filter(v => v !== value);\n this.selectedCitiesChange.emit([...this.selected]);\n }\n\n private getLabel(value: string | number): string {\n for (const g of this.parsedOptions) {\n const found = g.items.find(c => c.value == value);\n if (found) return found.label;\n }\n return String(value);\n }\n\n render() {\n const groups = this.filtered;\n\n return (\n <div class={{ 'city-selector': true, 'city-selector--disabled': this.disabled }}>\n\n {/* ── Trigger ─────────────────────────────────────────────── */}\n <button\n type=\"button\"\n class=\"selector-trigger\"\n disabled={this.disabled}\n onClick={() => this.toggle()}\n aria-haspopup=\"listbox\"\n aria-expanded={this.isOpen}\n >\n <div class=\"chips-area\">\n {this.selected.length === 0 && (\n <span class=\"placeholder\">{this.placeholder}</span>\n )}\n {this.selected.map(val => (\n <span class=\"chip\" key={String(val)}>\n {this.getLabel(val)}\n <button\n type=\"button\"\n class=\"chip-remove\"\n aria-label=\"Quitar\"\n onClick={(e) => this.removeCity(val, e)}\n >\n <dropi-icon name=\"Close-small\" width=\"10px\" height=\"10px\" color=\"Primary-Primary-500\" />\n </button>\n </span>\n ))}\n </div>\n <dropi-icon\n name={this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2'}\n width=\"16px\"\n height=\"16px\"\n color=\"Gray-Gray-500\"\n />\n </button>\n\n {/* ── Dropdown ────────────────────────────────────────────── */}\n {this.isOpen && (\n <div class=\"dropdown\" role=\"listbox\">\n\n {/* Search with lupa icon */}\n <div class=\"search-wrap\">\n <div class=\"search-field\">\n <input\n class=\"search-input\"\n type=\"text\"\n placeholder=\"Buscar...\"\n value={this.searchTerm}\n onInput={(e) => { this.searchTerm = (e.target as HTMLInputElement).value; }}\n autoComplete=\"off\"\n />\n <span class=\"search-icon\">\n <dropi-icon name=\"Search\" width=\"16px\" height=\"16px\" color=\"Gray-Gray-400\" />\n </span>\n </div>\n </div>\n\n {/* Options list */}\n <div class=\"options-list\">\n {groups.length === 0 && (\n <div class=\"no-results\">Sin resultados</div>\n )}\n {groups.map(group => (\n <div key={group.value} class=\"group\">\n <div class=\"group-label\">{group.label}</div>\n {group.items.map(city => {\n const isSelected = this.selected.includes(city.value);\n return (\n <div\n key={String(city.value)}\n class={{ 'city-option': true, 'city-option--selected': isSelected }}\n onClick={(e) => this.toggleCity(city.value, e)}\n role=\"option\"\n aria-selected={isSelected}\n >\n <span class={{ 'checkbox': true, 'checkbox--checked': isSelected }}>\n {isSelected && (\n <dropi-icon name=\"Check\" width=\"10px\" height=\"10px\" color=\"Neutral-White\" />\n )}\n </span>\n <span class=\"city-label\">{city.label}</span>\n </div>\n );\n })}\n </div>\n ))}\n </div>\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-color-picker.entry.js RENAMED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-Cvp2LQOM.js';
 const dropiColorPickerCss = () => `:host{display:block}.general-container{position:relative;width:fit-content}.main-input-container{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:var(--Size-3);position:relative;width:fit-content}.main-input-container .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;cursor:pointer}.line-color-preview{width:40px;height:40px;border-radius:50%;border:1px solid var(--Gray-Gray-200);display:flex;justify-content:center;align-items:center;padding:5px}.line-color-preview .color-preview{width:100%;height:100%;border-radius:50%;border:1px solid var(--Gray-Gray-200)}.position-right{top:0;left:250px}.position-left{top:0;right:200px}.position-top{bottom:55px}.position-bottom{top:55px}.position-bottom::before{transform:rotate(90deg);left:50%;top:-15px}.position-right::before{left:-6px;top:10px}.position-top::before{transform:rotate(270deg);left:50%;bottom:-15px}.position-left::before{transform:rotate(180deg);right:-9px}.color-picker-container::before{content:'';position:absolute;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid var(--Neutral-White);z-index:1}.color-picker-container{width:280px;padding:var(--Size-4);background:var(--Neutral-White);border-radius:var(--Size-2);box-shadow:var(--Shadow-large);position:absolute;z-index:100;transform-origin:top left;opacity:0;transition:transform 0.2s ease-out,     opacity 0.2s ease-out;pointer-events:none}.color-picker-container .main-color-canvas-container{position:relative;margin-bottom:var(--Size-4);border:1px solid var(--Gray-Gray-200);border-radius:var(--Size-1);display:flex;justify-self:center;align-items:center}.color-picker-container .main-color-canvas-container canvas{display:block;border-radius:var(--Size-1)}.color-picker-container .main-color-canvas-container .color-selector-pointer{position:absolute;width:var(--Size-3);height:var(--Size-3);border:2px solid var(--Neutral-White);border-radius:50%;transform:translate(-6px, -6px);pointer-events:none}.color-picker-container .slider-container{display:flex;flex-direction:column;gap:var(--Size-3)}.color-picker-container .slider-container .slider-group{display:flex;flex-direction:column;gap:var(--Size-1)}.color-picker-container .slider-container .slider-group label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:var(--font-weight-bold)}.color-picker-container .slider-container .slider-group .hue-slider-container,.color-picker-container .slider-container .slider-group .opacity-slider-container{position:relative;height:var(--Size-3);border-radius:var(--Size-4);overflow:hidden}.color-picker-container .slider-container .slider-group .hue-slider-container canvas,.color-picker-container .slider-container .slider-group .opacity-slider-container canvas{display:block;width:100%;height:100%}.color-picker-container .slider-container .slider-group .hue-slider-container .slider-pointer,.color-picker-container .slider-container .slider-group .opacity-slider-container .slider-pointer{position:absolute;top:0;height:var(--Size-3);width:var(--Size-3);background:transparent;border:2px solid var(--Neutral-White);border-radius:50%;pointer-events:none}.color-picker-container.show{transform:scale(1);opacity:1;pointer-events:auto}.color-info .color-label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:var(--font-weight-bold);text-transform:uppercase;margin-bottom:var(--Size-2)}.color-info .color-input{border:1px solid var(--Gray-Gray-200, #ddd);border-radius:var(--Size-1);padding:6px 8px;font-size:var(--font-size-s);width:100%;font-family:monospace;text-transform:uppercase;background-color:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-800, #1f2433);outline:none}`;
@@ -88,7 +88,7 @@ const DropiColorPicker = class {
         const height = this.colorCanvas.height;
         const saturationGradient = ctx.createLinearGradient(0, 0, width, 0);
         saturationGradient.addColorStop(0, '#FFFFFF');
-        saturationGradient.addColorStop(1, `hsl(${this.hue}, 100%, 50%)`);
+        saturationGradient.addColorStop(1, `hsl(${this.hue ?? 0}, 100%, 50%)`);
         const valueGradient = ctx.createLinearGradient(0, 0, 0, height);
         valueGradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
         valueGradient.addColorStop(1, '#000000');
@@ -301,10 +301,10 @@ const DropiColorPicker = class {
         }
     }
     render() {
-        return (h("div", { key: '9b5f9753c014b33a75fdf35460b3f2b40f12f5c6', class: "general-container" }, h("div", { key: '2547ef57ac6fc35eb65012729d613ac819918c02', class: "main-input-container" }, h("div", { key: 'f8f45ef7fba7d889b72af34973f51cd39f7541ec', class: "overlay", onClick: () => this.showEditor() }), h("div", { key: '76f6a0b4f5abf04e02778166f7f568a106ccbda6', class: "line-color-preview" }, h("div", { key: '4a9d7b92303dc21c39dd2271d1fbf9719bb4e012', class: "color-preview", style: { background: this.currentColor } })), h("div", { key: '47d4986bd93f8ac590014b3ad4251547be86bf76', class: "color-info" }, h("input", { key: '0f0265276fb482a5053a328daf4888f577e9fed2', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), h("div", { key: 'b944ba1094125f85f78529804549d02a4af15a98', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, h("div", { key: 'b1cfc5ae3e082533562685eee34246972d226ee8', class: "main-color-canvas-container" }, h("canvas", { key: '6d91d698213b04aed7a14d0ea77876ec81d54a9c', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), h("div", { key: 'a35cbf720261d42a476ff86a4d3230eb41c60158', class: "color-selector-pointer", style: {
+        return (h("div", { key: '2ee2bd6abd837388d8169961f6b1024da228b453', class: "general-container" }, h("div", { key: '15416c1a844daf774dda53f1c08bbe6b15435b64', class: "main-input-container" }, h("div", { key: 'e08aacd3ebb059a8467cf6f597d2b3bb3419e286', class: "overlay", onClick: () => this.showEditor() }), h("div", { key: 'dda8addee7afb351fb1f6c18dda516d29259220d', class: "line-color-preview" }, h("div", { key: 'b242eac802dc0c1d0a9965fb6fc9b6f010408ae2', class: "color-preview", style: { background: this.currentColor } })), h("div", { key: '8dddc6632dddae52cc58d964ee50cae1e6460b12', class: "color-info" }, h("input", { key: '7181e30bddae8005260d285653425cd5cad2386e', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), h("div", { key: '0ad3b547299fc1a4ccab9ddb7efebd7962fd7855', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, h("div", { key: 'c49847d5a6ca7a90f27889afe26f6c30c1959676', class: "main-color-canvas-container" }, h("canvas", { key: '44531a25415492782d70d070aacf17797f9e3818', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), h("div", { key: '325bc14afacafa6dddd0a9bc837c6448ff803bd8', class: "color-selector-pointer", style: {
                 left: `${(this.saturation / 100) * 256}px`,
                 top: `${((100 - this.currentVal) / 100) * 150}px`
-            } })), h("div", { key: 'a3a28711ce1b7d550ace8cdefce1170d1cfab6b7', class: "slider-container" }, h("div", { key: '1a7e080019254df35871874d4f682be49ccb1c2d', class: "slider-group" }, h("div", { key: 'ab472e420e2dde23eaf797e0962234f06b831350', class: "hue-slider-container" }, h("canvas", { key: '84fa8b097826ca461913ef5c1a363fed51fea46a', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), h("div", { key: '47e740225ac80d3daee6781e0a3d55840dbf6e3a', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), h("div", { key: '408dccb26d895cbf3c648e959a0a748340b9d7ad', class: "slider-group" }, h("div", { key: 'bd1c6eb89183c0a3f194601413e840cd3576955c', class: "opacity-slider-container" }, h("canvas", { key: '8bef0d97d8f88471929876ffb4fb3dfb8eee950a', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), h("div", { key: '394b6a5aac4d2924e5dd3e2fe898fe1761c6358f', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), h("div", { key: '7bd122ab15ed2534586d5e0d2cf4a33174bb0385', class: "color-info" }, h("div", { key: '4dc391044f0cd3a72ee14e5c0f7279c81140c5f3', class: "color-label" }, "HEX"), h("input", { key: 'f197c630e94ccebab9e9f75a615b3a2fd09ffc0f', type: "text", class: "color-input", value: this.color, onInput: (e) => this.onHexInputChange(e), maxLength: 9 }))))));
+            } })), h("div", { key: 'ab6d2a987b4c317fa218e70a1602ea829505fe0a', class: "slider-container" }, h("div", { key: 'fe9ae897de10c04322653870cb9e5b79f61a2b86', class: "slider-group" }, h("div", { key: 'f39f1935c0410509f6ecbf69b718730201d70be7', class: "hue-slider-container" }, h("canvas", { key: '6a08c8dd36f3c9d70aa0f0438006bc4efa4df401', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), h("div", { key: 'a91a4f4469e3152b24bf1e7dfd3d4738eb17f661', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), h("div", { key: '2a45b1e24dcb447e515d8dbfac2ecd4032661af8', class: "slider-group" }, h("div", { key: 'ec945cd912ecf046ca16e7520bae48d3e998f8fd', class: "opacity-slider-container" }, h("canvas", { key: 'f181f9a8b16274d94377f3dd300c3bff231088df', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), h("div", { key: '2e246b9e62991569c60024ac4f8b1ae32543e03e', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), h("div", { key: 'c8c539dda06f8ce70b4c669a32e56cb693132f49', class: "color-info" }, h("div", { key: '5939e97e1331e57a5837e868ea6088b069e3c3eb', class: "color-label" }, "HEX"), h("input", { key: '321cebcb041223d4cb6c072f310720edcdb2391c', type: "text", class: "color-input", value: this.color, onInput: (e) => this.onHexInputChange(e), maxLength: 9 }))))));
     }
     static get watchers() { return {
         "value": [{
@@ -315,3 +315,6 @@ const DropiColorPicker = class {
 DropiColorPicker.style = dropiColorPickerCss();
 export { DropiColorPicker as dropi_color_picker };
+//# sourceMappingURL=dropi-color-picker.entry.esm.js.map
+//# sourceMappingURL=dropi-color-picker.entry.js.map