@dropi/ui 0.1.19 → 0.1.21

package/dist/esm/dropi-card-checkbox.entry.js

@@ -0,0 +1,46 @@
+import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+
+const dropiCardCheckboxCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.container-card-check{padding:var(--Size-4, 16px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Size-2, 8px);width:100%;display:flex;align-items:center;gap:var(--Size-3, 12px);cursor:pointer;height:66px;overflow:hidden;transition:background 0.15s ease, border-color 0.15s ease}.container-card-check.disabled{border-radius:var(--Border-2, 8px);border:1px solid var(--Gray-Gray-100, #e6eaf2);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:default}.container-card-check.disabled .title-check,.container-card-check.disabled .description-text,.container-card-check.disabled .extra-info{color:var(--Gray-Gray-400, #858ea6)}.container-text{width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:start;overflow:hidden}.title-check{color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-m, 14px);font-weight:var(--font-weight-regular, 400);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.description-text{color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);margin-top:var(--Size-1, 4px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.extra-info{display:flex;justify-content:space-between;align-items:center;flex-direction:column;gap:4px;flex-shrink:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.extra-info h4{margin:0;font-weight:var(--font-weight-semibold);color:inherit;line-height:inherit}.default-card{border:none}.is-checked{background:var(--Primary-Primary-50, #fff8f0);border:1px solid var(--Primary-Primary-500, #f49a3d)}`;
+
+const DropiCardCheckbox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onChange = createEvent(this, "onChange", 7);
+    }
+    /** Visual type — matches Angular: 'default' | 'with card' */
+    type = 'default';
+    /** Whether the checkbox is checked — matches Angular 'state' */
+    state = 'checked';
+    /** Main title — matches Angular 'title' */
+    title = 'Tittle';
+    /** Optional description below title */
+    description = '';
+    /** Optional extra info shown on the right */
+    extraInfo = '';
+    /** Optional extra info description shown below extraInfo */
+    extraInfoDescription = '';
+    /** Disables interaction */
+    disabled = false;
+    /** Emitted with the new checked state when clicked */
+    onChange;
+    get isChecked() {
+        return this.state === 'checked';
+    }
+    handleClick() {
+        if (this.disabled)
+            return;
+        this.state = this.isChecked ? 'default' : 'checked';
+        this.onChange.emit(this.isChecked);
+    }
+    render() {
+        return (h("div", { key: 'b6e9f4e5855a03b04102fd2206c4d478d49e4753', class: {
+                'container-card-check': true,
+                'default-card': this.type === 'default',
+                'is-checked': this.isChecked && this.type === 'with card',
+                'disabled': this.disabled,
+            }, onClick: () => this.handleClick() }, h("dropi-checkbox", { key: '45af833a92b8441b79e2679a8f584f74e6b0c458', checked: this.isChecked, disabled: this.disabled }), h("div", { key: 'b0678976e2f52eef02fa5cb71ae6db284b26212d', class: "container-text" }, h("div", { key: 'd5bc253eb3262223d1e9ba31b2193cd3c1d11abe', class: "title-check" }, this.title), this.description && h("div", { key: '5555ff237e6c80552dafa079de1b6901e3e672a5', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (h("div", { key: '675a7b4a1195d2a452f3be11d4ae1553f7b19b4b', class: "extra-info" }, this.extraInfo && h("div", { key: '33e7cec0ccc2c1c5f8afe61a54463382b11343b4' }, this.extraInfo), this.extraInfoDescription && h("h4", { key: 'f5d61a5ff4706d4bcb2cd7f818e06cff8787ac6d' }, this.extraInfoDescription)))));
+    }
+};
+DropiCardCheckbox.style = dropiCardCheckboxCss();
+
+export { DropiCardCheckbox as dropi_card_checkbox };

package/dist/esm/dropi-card-product.entry.js

@@ -0,0 +1,74 @@
+import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.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}`;
+
+const DropiCardProduct = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onProductClick = createEvent(this, "onProductClick", 7);
+        this.changeFavorite = createEvent(this, "changeFavorite", 7);
+        this.dropiAddProduct = createEvent(this, "dropiAddProduct", 7);
+        this.dropiSupplierClick = createEvent(this, "dropiSupplierClick", 7);
+    }
+    /** Product image URL */
+    image = '';
+    /** Product name */
+    productName = '';
+    /** Sale / supplier price (Precio proveedor) */
+    salePrice = 0;
+    /** Suggested price for the dropshipper (Precio sugerido) */
+    suggestedPrice = 0;
+    /** Price currency symbol */
+    currency = '$';
+    /** Supplier / store name */
+    supplier = '';
+    /** Category label */
+    category = '';
+    /** Stock quantity (0 = Agotado) */
+    stock = 0;
+    /** Supplier category for insignia: 'verified' | 'premium' | 'exclusive' | '' */
+    supplierCategory = '';
+    /** Show favorite button */
+    showFavorite = true;
+    /** Is marked as favorite */
+    isFavorite = false;
+    /** Show "Enviar a cliente" button */
+    showAddButton = true;
+    /** Emitted when card is clicked — matches Angular 'onProductClick' */
+    onProductClick;
+    /** Emitted when favorite toggled — matches Angular 'changeFavorite' */
+    changeFavorite;
+    /** Emitted when "Enviar a cliente" button clicked */
+    dropiAddProduct;
+    /** Emitted when supplier name clicked */
+    dropiSupplierClick;
+    formatPrice(val) {
+        return val.toLocaleString('es-CO');
+    }
+    get inStock() {
+        return this.stock > 0;
+    }
+    getStockColor() {
+        if (this.stock === 0)
+            return 'var(--Error-Error-500, #f46a6b)';
+        if (this.stock <= 10)
+            return 'var(--Warning-Warning-500, #f59e0b)';
+        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) => {
+                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) => {
+                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) => {
+                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")))));
+    }
+};
+DropiCardProduct.style = dropiCardProductCss();
+
+export { DropiCardProduct as dropi_card_product };

package/dist/esm/dropi-card-section.entry.js

@@ -1,34 +1,34 @@
-import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
+import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.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, #fff);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, #1a2033)}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}`;
+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}`;
 
 const DropiCardSection = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiChange = createEvent(this, "dropiChange");
-        this.dropiClick = createEvent(this, "dropiClick");
+        this.onChange = createEvent(this, "onChange", 7);
+        this.onClick = createEvent(this, "onClick", 7);
     }
-    /** Section title */
-    sectionTitle = '';
+    /** Section title — matches Angular 'title' */
+    title = 'title';
     /** Section description */
-    description = '';
+    description = 'Description';
     /** Control type on the right */
-    typeElement = 'switch';
+    typeElement = 'dropdown';
     /** Title size variant */
-    type = 'medium';
+    type = 'important';
     /** Switch checked state */
     isChecked = false;
-    /** Emitted when switch changes. e.detail = new boolean value */
-    dropiChange;
+    /** Emitted when switch changes */
+    onChange;
     /** Emitted when dropdown icon is clicked */
-    dropiClick;
+    onClick;
     render() {
-        return (h("div", { key: '5820426132998a0fcc95ec9bc5626044809bc8f9', class: "card-section" }, h("div", { key: '56023483c0be283b4e8b71bdb8ab91c3bbe0e518', class: "card-section__text" }, this.type === 'important'
-            ? h("h5", { class: "card-section__title card-section__title--important" }, this.sectionTitle)
-            : h("h6", { class: "card-section__title" }, this.sectionTitle), this.description && h("p", { key: '123f616e6404040a052c8e3313ea74368ef1564e', class: "card-section__desc" }, this.description)), h("div", { key: '70d91f09bfe12b561a0457d6b1c531e04c697119', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { isChecked: this.isChecked, onDropiChange: (e) => {
+        return (h("div", { key: 'f0afbda9991af5b381a65dd5e620ca3d8e50791f', class: "card-section" }, h("div", { key: 'bb0a62ec9840a762ea3be5c342adbc431f26ba7e', 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) => {
                 this.isChecked = e.detail;
-                this.dropiChange.emit(e.detail);
-            } })) : (h("button", { class: "card-section__dropdown-btn", onClick: () => this.dropiClick.emit(), "aria-label": "Expandir" }, h("dropi-icon", { name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))))));
+                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" }))))));
     }
 };
 DropiCardSection.style = dropiCardSectionCss();

package/dist/esm/dropi-carousel.entry.js

@@ -0,0 +1,146 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-TXz_09YZ.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}}`;
+
+const DropiCarousel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pageChange = createEvent(this, "pageChange", 7);
+        this.onPage = createEvent(this, "onPage", 7);
+    }
+    get el() { return getElement(this); }
+    /** Items to display (Array of URLs or objects) */
+    value = [];
+    /** Active page index */
+    page = 0;
+    /** Number of items visible per page */
+    numVisible = 1;
+    /** Number of items to scroll per click */
+    numScroll = 1;
+    /** Orientation of the carousel */
+    orientation = 'horizontal';
+    /** Show navigation arrows */
+    showNavigators = true;
+    /** Show dot indicators */
+    showIndicators = true;
+    /** Autoplay interval in ms (0 = disabled) */
+    autoplayInterval = 0;
+    /** Infinite scrolling */
+    circular = false;
+    parsedValue = [];
+    internalPage = 0;
+    isAnimating = false;
+    totalPages = 0;
+    itemsContainer;
+    timer;
+    pageChange;
+    onPage;
+    handleValue(val) {
+        this.parsedValue = typeof val === 'string' ? JSON.parse(val) : (val || []);
+        this.updateTotalPages();
+        this.updateTransform();
+    }
+    handlePage(val) {
+        this.internalPage = val;
+        this.updateTransform();
+    }
+    componentWillLoad() {
+        this.handleValue(this.value);
+        this.internalPage = this.page;
+    }
+    componentDidLoad() {
+        this.updateTransform();
+        if (this.autoplayInterval > 0) {
+            this.startAutoplay();
+        }
+        window.addEventListener('resize', this.onResize);
+    }
+    disconnectedCallback() {
+        this.stopAutoplay();
+        window.removeEventListener('resize', this.onResize);
+    }
+    onResize = () => {
+        this.updateTotalPages();
+        this.updateTransform();
+    };
+    startAutoplay() {
+        this.timer = setInterval(() => this.navForward(), this.autoplayInterval);
+    }
+    stopAutoplay() {
+        if (this.timer)
+            clearInterval(this.timer);
+    }
+    updateTotalPages() {
+        if (!this.parsedValue.length || this.parsedValue.length <= this.numVisible) {
+            this.totalPages = 1;
+            return;
+        }
+        const totalItems = this.parsedValue.length;
+        const remainingItems = totalItems - this.numVisible;
+        this.totalPages = Math.ceil(remainingItems / this.numScroll) + 1;
+    }
+    updateTransform() {
+        if (!this.itemsContainer)
+            return;
+        const prop = this.orientation === 'vertical' ? 'translateY' : 'translateX';
+        const firstItem = this.itemsContainer.querySelector('.dropi-carousel-item');
+        if (!firstItem)
+            return;
+        const itemSize = this.orientation === 'vertical' ? firstItem.offsetHeight : firstItem.offsetWidth;
+        const itemsScrolled = this.internalPage * this.numScroll;
+        const maxScroll = Math.max(0, this.parsedValue.length - this.numVisible);
+        const safeScroll = Math.min(itemsScrolled, maxScroll);
+        const translateValue = -(safeScroll * itemSize);
+        this.itemsContainer.style.transform = `${prop}(${translateValue}px)`;
+    }
+    navForward = (e) => {
+        if (e)
+            e.preventDefault();
+        if (this.circular || this.internalPage < this.totalPages - 1) {
+            this.isAnimating = true;
+            this.internalPage = (this.internalPage + 1) % this.totalPages;
+            this.page = this.internalPage;
+            this.updateTransform();
+            this.pageChange.emit(this.internalPage);
+            setTimeout(() => (this.isAnimating = false), 500);
+        }
+    };
+    navBackward = (e) => {
+        if (e)
+            e.preventDefault();
+        if (this.circular || this.internalPage > 0) {
+            this.isAnimating = true;
+            this.internalPage = (this.internalPage - 1 + this.totalPages) % this.totalPages;
+            this.page = this.internalPage;
+            this.updateTransform();
+            this.pageChange.emit(this.internalPage);
+            setTimeout(() => (this.isAnimating = false), 500);
+        }
+    };
+    onDotClick(index) {
+        this.isAnimating = true;
+        this.internalPage = index;
+        this.page = this.internalPage;
+        this.updateTransform();
+        this.pageChange.emit(this.internalPage);
+        setTimeout(() => (this.isAnimating = false), 500);
+    }
+    render() {
+        const items = this.parsedValue;
+        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}` }))))))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValue": 0
+            }],
+        "page": [{
+                "handlePage": 0
+            }]
+    }; }
+};
+DropiCarousel.style = dropiCarouselCss();
+
+export { DropiCarousel as dropi_carousel };

package/dist/esm/dropi-checkbox-selection-list.entry.js

@@ -1,32 +1,34 @@
-import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
+import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.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)}`;
 
 const DropiCheckboxSelectionList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiCheckedValues = createEvent(this, "dropiCheckedValues");
-        this.dropiSearch = createEvent(this, "dropiSearch");
+        this.checkedValues = createEvent(this, "checkedValues", 7);
+        this.onSearch = createEvent(this, "onSearch", 7);
     }
     /** Options array or JSON string */
     options = [];
     /** Show search filter */
     showFilter = true;
     /** Search placeholder */
-    filterPlaceholder = 'Buscar...';
+    filterPlaceholder = 'Search';
     /** Show "no results" message */
     showNotFound = true;
     /** Empty state message */
-    notFoundMessage = 'Sin resultados';
+    notFoundMessage = 'No related results found';
     /** Allow multiple selection */
     multiSelect = true;
+    /** Debounce delay in ms for search input (matches Angular `searchDelay`) */
+    searchDelay = 100;
     filterText = '';
     selected = [];
     parsedOptions = [];
-    /** Emitted when selection changes. e.detail = selected option ids */
-    dropiCheckedValues;
-    /** Emitted on search input. e.detail = search text */
-    dropiSearch;
+    /** Emitted when selection changes — matches Angular 'checkedValues' */
+    checkedValues;
+    /** Emitted on search — matches Angular 'onSearch' */
+    onSearch;
     optionsChanged(val) {
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
@@ -35,7 +37,7 @@ const DropiCheckboxSelectionList = class {
         if (!this.filterText)
             return this.parsedOptions;
         const q = this.filterText.toLowerCase();
-        return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));
+        return this.parsedOptions.filter(o => o.label?.toLowerCase().includes(q));
     }
     toggle(id) {
         if (this.multiSelect) {
@@ -46,16 +48,16 @@ const DropiCheckboxSelectionList = class {
         else {
             this.selected = this.selected.includes(id) ? [] : [id];
         }
-        this.dropiCheckedValues.emit(this.selected);
+        this.checkedValues.emit(this.selected);
     }
     render() {
         const items = this.filtered;
-        return (h("div", { key: '4606e983827d32c18990c44589c2cfcac678b0ae', class: "csl" }, this.showFilter && (h("div", { key: '532d95a9e0530023094611ce55b37f56eb6f9d78', class: "csl__search" }, h("dropi-icon", { key: '79598d6cb8b36f90e15d2983f8c3e54cb713d193', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: 'fa95ab8c1112e335560b8c49f7f4b502b3f7b3a0', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        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) => {
                 this.filterText = e.target.value;
-                this.dropiSearch.emit(this.filterText);
-            } }), this.filterText && (h("button", { key: '94574b93a5e1d938ebedd7f462e3aed6917390ef', class: "csl__clear", onClick: () => { this.filterText = ''; this.dropiSearch.emit(''); } }, h("dropi-icon", { key: 'c9765efda527f9321757a69028f9ceb7e12a7514', name: "Close-small", width: "14px", height: "14px", color: "Gray-Gray-400" }))))), h("div", { key: '2f40c32f10c84277924c240a12e89876ff60a4d2', class: "csl__list" }, items.length === 0 && this.showNotFound ? (h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
+                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 => {
             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.name }), h("span", { class: "csl__label" }, opt.name)));
+            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)));
         })))));
     }
     static get watchers() { return {

package/dist/esm/dropi-checkbox.entry.js

@@ -1,31 +1,31 @@
-import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
+import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.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}`;
 
 const DropiCheckbox = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiChange = createEvent(this, "dropiChange");
+        this.onChange = createEvent(this, "onChange", 7);
     }
     /** Whether the checkbox is checked */
     checked = false;
     /** Whether the checkbox is disabled */
     disabled = false;
     /** Emitted when the checked state changes */
-    dropiChange;
+    onChange;
     changeState() {
         if (this.disabled)
             return;
         this.checked = !this.checked;
-        this.dropiChange.emit(this.checked);
+        this.onChange.emit(this.checked);
     }
     render() {
-        return (h("div", { key: '4e56a55cec60e55f61205e370845f734b5baedcc', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: 'dd440f791d8fa5dd3fd7e8a00054c2d0fe337961', class: {
+        return (h("div", { key: '2bf224c57c9b0b48d3d2a28f2cf52713b532110f', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: '7dfbc936f1a6e641a3e18c9ffc769e8a25fd9328', class: {
                 check: true,
                 isCheck: this.checked,
                 noCheck: !this.checked,
                 disabled: this.disabled,
-            } }, h("svg", { key: 'f7470772cd3f47777c0ade490de8772a4e0a2d43', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'ed529e987fe524339bb01ee0e95d838df962d0bc', 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: '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" })))));
     }
     static get formAssociated() { return true; }
 };

package/dist/esm/dropi-chips.entry.js

@@ -1,26 +1,26 @@
-import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
+import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
 
-const dropiChipsCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.chip{display:inline-flex;align-items: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;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}`;
+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}`;
 
 const DropiChips = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiClose = createEvent(this, "dropiClose");
+        this.onClose = createEvent(this, "onClose", 7);
     }
-    /** Visual style */
-    chipStyle = 'filters';
+    /** Visual style (named customStyle to avoid conflict with HTMLElement.style) */
+    customStyle = 'fill';
     /** Content type */
-    type = 'text';
+    type = 'icon';
     /** Avatar image URL (when type = 'avatar') */
     urlImg = '';
     /** Show the close/remove icon */
-    showIcon = true;
+    showIcon = false;
     /** Icon name (when type = 'icon') */
     icon = '';
     /** Emitted when the close icon is clicked */
-    dropiClose;
+    onClose;
     render() {
-        return (h("div", { key: '06d0ac1f96349389f1513b59a1f84dbff9864169', class: { 'chip': true, [`chip--${this.chipStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (h("img", { key: '38bc54471c0cf6dc7a25cccaba0764573d5d43e1', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (h("dropi-icon", { key: '908f3b217b425f6a3c9bf242a94110b742ca34b3', class: "chip__pre-icon", name: this.icon, width: "14px", height: "14px", color: "currentColor" })), h("span", { key: 'cb76f76056e6a28cfc497f2fabece2c95d6b9a60', class: "chip__text" }, h("slot", { key: '4d3aade9d8408d2b5b627c43754a9cfafd44b941' })), this.showIcon && (h("button", { key: 'fbb30fa90841e499d21c928c4a319724def58bb2', class: "chip__close", onClick: () => this.dropiClose.emit(), "aria-label": "Eliminar" }, h("dropi-icon", { key: 'f11c820069c550fa7ee3a143c3c6f29d338041c8', name: "Close-small", width: "14px", height: "14px", color: "currentColor" })))));
+        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" })))));
     }
 };
 DropiChips.style = dropiChipsCss();

package/dist/esm/dropi-city-selector.entry.js

@@ -0,0 +1,94 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-TXz_09YZ.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)}`;
+
+const DropiCitySelector = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.selectedCitiesChange = createEvent(this, "selectedCitiesChange", 7);
+    }
+    /** Grouped city options (array or JSON string) */
+    options = [];
+    /** Currently selected city values */
+    selectedCities = [];
+    /** Placeholder text */
+    placeholder = 'Seleccione una ciudad';
+    /** Disable the selector */
+    disabled = false;
+    /** Emitted when selection changes. Detail = selected values array. */
+    selectedCitiesChange;
+    isOpen = false;
+    selected = [];
+    parsedOptions = [];
+    searchTerm = '';
+    get el() { return getElement(this); }
+    handleDocClick(e) {
+        if (this.isOpen && !e.composedPath().includes(this.el)) {
+            this.isOpen = false;
+        }
+    }
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : val;
+    }
+    selectedChanged(val) {
+        this.selected = typeof val === 'string' ? JSON.parse(val) : [...val];
+    }
+    componentWillLoad() {
+        this.optionsChanged(this.options);
+        this.selectedChanged(this.selectedCities);
+    }
+    get filtered() {
+        if (!this.searchTerm)
+            return this.parsedOptions;
+        const t = this.searchTerm.toLowerCase();
+        return this.parsedOptions
+            .map(g => ({ ...g, items: g.items.filter(c => c.label.toLowerCase().includes(t)) }))
+            .filter(g => g.items.length > 0);
+    }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+    }
+    toggleCity(value, e) {
+        e.stopPropagation();
+        if (this.selected.includes(value)) {
+            this.selected = this.selected.filter(v => v !== value);
+        }
+        else {
+            this.selected = [...this.selected, value];
+        }
+        this.selectedCitiesChange.emit([...this.selected]);
+    }
+    removeCity(value, e) {
+        e.stopPropagation();
+        this.selected = this.selected.filter(v => v !== value);
+        this.selectedCitiesChange.emit([...this.selected]);
+    }
+    getLabel(value) {
+        for (const g of this.parsedOptions) {
+            const found = g.items.find(c => c.value == value);
+            if (found)
+                return found.label;
+        }
+        return String(value);
+    }
+    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 => {
+            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)));
+        })))))))));
+    }
+    static get watchers() { return {
+        "options": [{
+                "optionsChanged": 0
+            }],
+        "selectedCities": [{
+                "selectedChanged": 0
+            }]
+    }; }
+};
+DropiCitySelector.style = dropiCitySelectorCss();
+
+export { DropiCitySelector as dropi_city_selector };