@dropi/ui 0.1.19 → 0.1.20

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

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.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 DropiCardSection = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiChange = index.createEvent(this, "dropiChange");
-        this.dropiClick = index.createEvent(this, "dropiClick");
+        this.dropiChange = index.createEvent(this, "dropiChange", 7);
+        this.dropiClick = index.createEvent(this, "dropiClick", 7);
     }
     /** Section title */
     sectionTitle = '';
@@ -25,9 +25,9 @@ const DropiCardSection = class {
     /** Emitted when dropdown icon is clicked */
     dropiClick;
     render() {
-        return (index.h("div", { key: '5820426132998a0fcc95ec9bc5626044809bc8f9', class: "card-section" }, index.h("div", { key: '56023483c0be283b4e8b71bdb8ab91c3bbe0e518', class: "card-section__text" }, this.type === 'important'
+        return (index.h("div", { key: 'f2653804e3d325fb6859d5cc096c893c8fb08ed8', class: "card-section" }, index.h("div", { key: '25fb5e34a9abcdc6a2761adf7053256cb431304d', class: "card-section__text" }, this.type === 'important'
             ? index.h("h5", { class: "card-section__title card-section__title--important" }, this.sectionTitle)
-            : index.h("h6", { class: "card-section__title" }, this.sectionTitle), this.description && index.h("p", { key: '123f616e6404040a052c8e3313ea74368ef1564e', class: "card-section__desc" }, this.description)), index.h("div", { key: '70d91f09bfe12b561a0457d6b1c531e04c697119', class: "card-section__control" }, this.typeElement === 'switch' ? (index.h("dropi-switch", { isChecked: this.isChecked, onDropiChange: (e) => {
+            : index.h("h6", { class: "card-section__title" }, this.sectionTitle), this.description && index.h("p", { key: 'fbfb5509a685f39053aa787b57df7c9f2ba1b6eb', class: "card-section__desc" }, this.description)), index.h("div", { key: 'f5e6a3d27b08cd6d8be791d9d8bb007c2859d9d2', class: "card-section__control" }, this.typeElement === 'switch' ? (index.h("dropi-switch", { isChecked: this.isChecked, onDropiChange: (e) => {
                 this.isChecked = e.detail;
                 this.dropiChange.emit(e.detail);
             } })) : (index.h("button", { class: "card-section__dropdown-btn", onClick: () => this.dropiClick.emit(), "aria-label": "Expandir" }, index.h("dropi-icon", { name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))))));

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

@@ -0,0 +1,83 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiCarouselCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.carousel{display:flex;flex-direction:column;gap:var(--Size-2, 8px);width:100%}.carousel__stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--Border-2, 8px);background:var(--Gray-Gray-100, #eceef4)}.carousel__slide{position:absolute;inset:0;opacity:0;transition:opacity 0.4s ease;pointer-events:none}.carousel__slide--active{opacity:1;pointer-events:all}.carousel__img{width:100%;height:100%}.carousel__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0, 0, 0, 0.4);border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.15s;z-index:1}.carousel__nav:hover{background:rgba(0,0,0,0.65)}.carousel__nav--prev{left:var(--Size-2, 8px)}.carousel__nav--next{right:var(--Size-2, 8px)}.carousel__dots{display:flex;justify-content:center;gap:var(--Size-1, 4px)}.carousel__dot{width:8px;height:8px;border-radius:50%;border:none;background:var(--Gray-Gray-300, #a0a9c0);cursor:pointer;padding:0;transition:background 0.2s, transform 0.2s}.carousel__dot--active{background:var(--Primary-Primary-500, #f49a3d);transform:scale(1.3)}.carousel__thumbs{display:flex;gap:var(--Size-2, 8px);overflow-x:auto;padding-bottom:2px}.carousel__thumbs::-webkit-scrollbar{height:4px}.carousel__thumbs::-webkit-scrollbar-thumb{background:var(--Gray-Gray-200, #c3c9d9);border-radius:2px}.carousel__thumb{width:56px;height:56px;object-fit:cover;border-radius:var(--Border-1, 4px);cursor:pointer;flex-shrink:0;opacity:0.5;border:2px solid transparent;transition:opacity 0.15s, border-color 0.15s}.carousel__thumb:hover{opacity:0.8}.carousel__thumb--active{opacity:1;border-color:var(--Primary-Primary-500, #f49a3d)}`;
+
+const DropiCarousel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiSlideChange = index.createEvent(this, "dropiSlideChange", 7);
+    }
+    /** Array of image URLs or JSON string */
+    images = [];
+    /** Alt text prefix for images */
+    altPrefix = 'Imagen';
+    /** Show navigation arrows */
+    showArrows = true;
+    /** Show dot indicators */
+    showDots = true;
+    /** Show thumbnail strip */
+    showThumbs = false;
+    /** Autoplay interval in ms (0 = disabled) */
+    autoplay = 0;
+    /** Active index (controlled) */
+    activeIndex = 0;
+    /** Object-fit for images */
+    objectFit = 'cover';
+    parsedImages = [];
+    current = 0;
+    timer;
+    /** Emitted when slide changes. e.detail = new index */
+    dropiSlideChange;
+    imagesChanged(val) {
+        this.parsedImages = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    activeIndexChanged(val) {
+        this.current = val;
+    }
+    componentWillLoad() {
+        this.imagesChanged(this.images);
+        this.current = this.activeIndex;
+    }
+    componentDidLoad() {
+        if (this.autoplay > 0) {
+            this.startAutoplay();
+        }
+    }
+    disconnectedCallback() {
+        this.stopAutoplay();
+    }
+    startAutoplay() {
+        this.timer = setInterval(() => this.next(), this.autoplay);
+    }
+    stopAutoplay() {
+        if (this.timer)
+            clearInterval(this.timer);
+    }
+    go(index) {
+        const len = this.parsedImages.length;
+        this.current = ((index % len) + len) % len;
+        this.activeIndex = this.current;
+        this.dropiSlideChange.emit(this.current);
+    }
+    prev() { this.go(this.current - 1); }
+    next() { this.go(this.current + 1); }
+    render() {
+        const imgs = this.parsedImages;
+        if (!imgs.length)
+            return null;
+        return (index.h("div", { class: "carousel" }, index.h("div", { class: "carousel__stage" }, imgs.map((src, i) => (index.h("div", { class: { 'carousel__slide': true, 'carousel__slide--active': i === this.current }, "aria-hidden": i !== this.current }, index.h("img", { class: "carousel__img", src: src, alt: `${this.altPrefix} ${i + 1}`, style: { objectFit: this.objectFit }, loading: "lazy" })))), this.showArrows && imgs.length > 1 && (index.h("button", { class: "carousel__nav carousel__nav--prev", onClick: () => this.prev(), "aria-label": "Anterior" }, index.h("dropi-icon", { name: "Arrow-Left-2", width: "20px", height: "20px", color: "Neutral-White" }))), this.showArrows && imgs.length > 1 && (index.h("button", { class: "carousel__nav carousel__nav--next", onClick: () => this.next(), "aria-label": "Siguiente" }, index.h("dropi-icon", { name: "Arrow-Right-2", width: "20px", height: "20px", color: "Neutral-White" })))), this.showDots && imgs.length > 1 && (index.h("div", { class: "carousel__dots" }, imgs.map((_, i) => (index.h("button", { class: { 'carousel__dot': true, 'carousel__dot--active': i === this.current }, onClick: () => this.go(i), "aria-label": `Ir a diapositiva ${i + 1}` }))))), this.showThumbs && imgs.length > 1 && (index.h("div", { class: "carousel__thumbs" }, imgs.map((src, i) => (index.h("img", { class: { 'carousel__thumb': true, 'carousel__thumb--active': i === this.current }, src: src, alt: `${this.altPrefix} ${i + 1}`, onClick: () => this.go(i), loading: "lazy" })))))));
+    }
+    static get watchers() { return {
+        "images": [{
+                "imagesChanged": 0
+            }],
+        "activeIndex": [{
+                "activeIndexChanged": 0
+            }]
+    }; }
+};
+DropiCarousel.style = dropiCarouselCss();
+
+exports.dropi_carousel = DropiCarousel;

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

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.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) {
         index.registerInstance(this, hostRef);
-        this.dropiCheckedValues = index.createEvent(this, "dropiCheckedValues");
-        this.dropiSearch = index.createEvent(this, "dropiSearch");
+        this.dropiCheckedValues = index.createEvent(this, "dropiCheckedValues", 7);
+        this.dropiSearch = index.createEvent(this, "dropiSearch", 7);
     }
     /** Options array or JSON string */
     options = [];
@@ -52,10 +52,10 @@ const DropiCheckboxSelectionList = class {
     }
     render() {
         const items = this.filtered;
-        return (index.h("div", { key: '4606e983827d32c18990c44589c2cfcac678b0ae', class: "csl" }, this.showFilter && (index.h("div", { key: '532d95a9e0530023094611ce55b37f56eb6f9d78', class: "csl__search" }, index.h("dropi-icon", { key: '79598d6cb8b36f90e15d2983f8c3e54cb713d193', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), index.h("input", { key: 'fa95ab8c1112e335560b8c49f7f4b502b3f7b3a0', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (index.h("div", { key: '9d51ab3a5e9dc547cd98d851c99ef579b229e12c', class: "csl" }, this.showFilter && (index.h("div", { key: '2fb9b167722dd7c18b879954a434b5645b9f0d94', class: "csl__search" }, index.h("dropi-icon", { key: 'ec92ffaa3fef65af3b41f0da876ecffd2ef8797b', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), index.h("input", { key: '9b04983e29d09213416084c41ab097c7eb214e7d', 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 && (index.h("button", { key: '94574b93a5e1d938ebedd7f462e3aed6917390ef', class: "csl__clear", onClick: () => { this.filterText = ''; this.dropiSearch.emit(''); } }, index.h("dropi-icon", { key: 'c9765efda527f9321757a69028f9ceb7e12a7514', name: "Close-small", width: "14px", height: "14px", color: "Gray-Gray-400" }))))), index.h("div", { key: '2f40c32f10c84277924c240a12e89876ff60a4d2', class: "csl__list" }, items.length === 0 && this.showNotFound ? (index.h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
+            } }), this.filterText && (index.h("button", { key: 'eeb575b800bc047f9c1a4a16a2adab5b1cf7963f', class: "csl__clear", onClick: () => { this.filterText = ''; this.dropiSearch.emit(''); } }, index.h("dropi-icon", { key: '7e0bf6b94a0d8251f7ab7faa7155bbe16eb5380e', name: "Close-small", width: "14px", height: "14px", color: "Gray-Gray-400" }))))), index.h("div", { key: '7be1584cc51b50430f1d86096aa024aa2bcc2dc8', class: "csl__list" }, items.length === 0 && this.showNotFound ? (index.h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
             const checked = this.selected.includes(opt.id);
             return (index.h("div", { class: "csl__item", key: opt.id, onClick: () => this.toggle(opt.id) }, index.h("dropi-checkbox", { checked: checked }), opt.icon && index.h("img", { class: "csl__icon", src: opt.icon, alt: opt.name }), index.h("span", { class: "csl__label" }, opt.name)));
         })))));

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

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.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) {
         index.registerInstance(this, hostRef);
-        this.dropiChange = index.createEvent(this, "dropiChange");
+        this.dropiChange = index.createEvent(this, "dropiChange", 7);
     }
     /** Whether the checkbox is checked */
     checked = false;
@@ -22,12 +22,12 @@ const DropiCheckbox = class {
         this.dropiChange.emit(this.checked);
     }
     render() {
-        return (index.h("div", { key: '4e56a55cec60e55f61205e370845f734b5baedcc', class: "container-dropi-checkbox", onClick: () => this.changeState() }, index.h("div", { key: 'dd440f791d8fa5dd3fd7e8a00054c2d0fe337961', class: {
+        return (index.h("div", { key: 'a1ca730e992d31e5d15800bf418fb58fcd3bb7d6', class: "container-dropi-checkbox", onClick: () => this.changeState() }, index.h("div", { key: '530d34c26d101d673b3b90c960859593d8276b79', class: {
                 check: true,
                 isCheck: this.checked,
                 noCheck: !this.checked,
                 disabled: this.disabled,
-            } }, index.h("svg", { key: 'f7470772cd3f47777c0ade490de8772a4e0a2d43', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, index.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" })))));
+            } }, index.h("svg", { key: '0b77d8edd8adccf87536edd1f2175513b45c0e21', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { key: '013f792f93249617d8910be72a4e77e4fc4f7ea9', 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/cjs/dropi-chips.cjs.entry.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.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) {
         index.registerInstance(this, hostRef);
-        this.dropiClose = index.createEvent(this, "dropiClose");
+        this.dropiClose = index.createEvent(this, "dropiClose", 7);
     }
     /** Visual style */
     chipStyle = 'filters';
@@ -22,7 +22,7 @@ const DropiChips = class {
     /** Emitted when the close icon is clicked */
     dropiClose;
     render() {
-        return (index.h("div", { key: '06d0ac1f96349389f1513b59a1f84dbff9864169', class: { 'chip': true, [`chip--${this.chipStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (index.h("img", { key: '38bc54471c0cf6dc7a25cccaba0764573d5d43e1', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (index.h("dropi-icon", { key: '908f3b217b425f6a3c9bf242a94110b742ca34b3', class: "chip__pre-icon", name: this.icon, width: "14px", height: "14px", color: "currentColor" })), index.h("span", { key: 'cb76f76056e6a28cfc497f2fabece2c95d6b9a60', class: "chip__text" }, index.h("slot", { key: '4d3aade9d8408d2b5b627c43754a9cfafd44b941' })), this.showIcon && (index.h("button", { key: 'fbb30fa90841e499d21c928c4a319724def58bb2', class: "chip__close", onClick: () => this.dropiClose.emit(), "aria-label": "Eliminar" }, index.h("dropi-icon", { key: 'f11c820069c550fa7ee3a143c3c6f29d338041c8', name: "Close-small", width: "14px", height: "14px", color: "currentColor" })))));
+        return (index.h("div", { key: '44be034581ddeffb27fb90fec61dd6275dc5998a', class: { 'chip': true, [`chip--${this.chipStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (index.h("img", { key: '3312f3d54aab3d6546ddde9820569251eb1faaa3', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (index.h("dropi-icon", { key: 'bf035db87cbe2b8ba9639d3c72b6b9dd706138e9', class: "chip__pre-icon", name: this.icon, width: "14px", height: "14px", color: "currentColor" })), index.h("span", { key: 'cf634d59c25b1ad5590bf2bc19f55cdc50b67a66', class: "chip__text" }, index.h("slot", { key: '5534b85253e0f2d91c2b901b97c1e90b5c5c4b32' })), this.showIcon && (index.h("button", { key: '70723641a9ef1c8b9e412fc7442156d604fcc6d0', class: "chip__close", onClick: () => this.dropiClose.emit(), "aria-label": "Eliminar" }, index.h("dropi-icon", { key: 'beeefbb7aaec6af0762c1f4611d3fb88e6ef8bd1', name: "Close-small", width: "14px", height: "14px", color: "currentColor" })))));
     }
 };
 DropiChips.style = dropiChipsCss();

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

@@ -0,0 +1,85 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiCitySelectorCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.city-selector{position:relative;width:100%}.city-selector.disabled .selector-trigger{background:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2);cursor:not-allowed}.selector-trigger{min-height:40px;padding:6px 10px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;transition:border-color 0.15s ease}.selector-trigger:hover:not(.disabled *){border-color:var(--Gray-Gray-300, #a3abbf)}.chips-area{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-height:24px;align-items:center}.placeholder{color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px)}.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:4px;padding:2px 6px;font-size:var(--font-size-xs, 11px);color:var(--Primary-Primary-700, #b85c00)}.chip-remove{background:none;border:none;cursor:pointer;font-size:14px;line-height:1;padding:0;color:var(--Primary-Primary-500, #f49a3d);display:flex;align-items:center}.dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--Neutral-White, #fff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.1);z-index:200;overflow:hidden}.search-wrap{padding:8px;border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2)}.search-input{width:100%;padding:6px 10px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-600, #475066);outline:none}.search-input:focus{border-color:var(--Primary-Primary-500, #f49a3d)}.options-list{max-height:240px;overflow-y:auto}.group-label{padding:6px 12px 2px;font-size:var(--font-size-xs, 11px);font-weight:var(--font-weight-semibold, 600);color:var(--Gray-Gray-400, #858ea6);text-transform:uppercase;letter-spacing:0.5px;background:var(--Gray-Gray-50, #f7f8fa);border-top:1px solid var(--Gray-Gray-100, #e6eaf2)}.city-option{padding:8px 12px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066);transition:background 0.1s ease}.city-option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.city-option.selected{color:var(--Primary-Primary-600, #d97c1a);background:var(--Primary-Primary-50, #fff8f0)}.check-mark{width:16px;font-size:12px;color:var(--Primary-Primary-500, #f49a3d);font-weight:bold}.no-results{padding:16px;text-align:center;color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px)}`;
+
+const DropiCitySelector = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiCityChange = index.createEvent(this, "dropiCityChange", 7);
+    }
+    /** Grouped city options (array or JSON string) */
+    options = [];
+    /** Currently selected city values */
+    selectedCities = [];
+    /** Placeholder text */
+    placeholder = 'Selecciona ciudades';
+    /** Disable the selector */
+    disabled = false;
+    /** Emitted when selection changes. Detail = selected values array. */
+    dropiCityChange;
+    isOpen = false;
+    selected = [];
+    parsedOptions = [];
+    searchTerm = '';
+    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) {
+        if (this.selected.includes(value)) {
+            this.selected = this.selected.filter(v => v !== value);
+        }
+        else {
+            this.selected = [...this.selected, value];
+        }
+        this.dropiCityChange.emit([...this.selected]);
+    }
+    removeCity(value, e) {
+        e.stopPropagation();
+        this.selected = this.selected.filter(v => v !== value);
+        this.dropiCityChange.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() {
+        return (index.h("div", { key: '53650ed7717099d343115c539d6ee7de6fd7a415', class: `city-selector${this.disabled ? ' disabled' : ''}` }, index.h("div", { key: '03bdc026a711321c6719745521e5fabad900c1dc', class: "selector-trigger", onClick: () => this.toggle() }, index.h("div", { key: 'e59a7625b10181bf92c5680b86119b91d0d497ae', class: "chips-area" }, this.selected.length === 0 && (index.h("span", { key: 'a7521c4285660c2ef5ac9d4df19466a3322b0873', class: "placeholder" }, this.placeholder)), this.selected.map(val => (index.h("span", { class: "chip", key: String(val) }, this.getLabel(val), index.h("button", { class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, "\u00D7"))))), index.h("dropi-icon", { key: '1ee96f23ca167c420d1ad24b6d6cbd27e331f378', name: this.isOpen ? 'Dropdown-up' : 'Dropdown-down', width: "16px", height: "16px", color: "Gray-Gray-500" })), this.isOpen && (index.h("div", { key: 'cb6ab864645c9dea1d9b2b5eedcafe22596c623d', class: "dropdown" }, index.h("div", { key: '8cdfc3b52a59f5e6501cf577444cad6272056bf6', class: "search-wrap" }, index.h("input", { key: '33e96a874c4ef2b257ae934e5eeb66f128e6a21d', class: "search-input", type: "text", placeholder: "Buscar ciudad...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } })), index.h("div", { key: 'e163afcf9a1d5ad61527828ed935b840cf4b04ef', class: "options-list" }, this.filtered.length === 0 && (index.h("div", { key: 'c4b35559a86cc0f36563c74824afe9f2ad8df781', class: "no-results" }, "Sin resultados")), this.filtered.map(group => (index.h("div", { key: group.value, class: "group" }, index.h("div", { class: "group-label" }, group.label), group.items.map(city => (index.h("div", { key: String(city.value), class: `city-option${this.selected.includes(city.value) ? ' selected' : ''}`, onClick: () => this.toggleCity(city.value) }, index.h("span", { class: "check-mark" }, this.selected.includes(city.value) ? '✓' : ''), city.label)))))))))));
+    }
+    static get watchers() { return {
+        "options": [{
+                "optionsChanged": 0
+            }],
+        "selectedCities": [{
+                "selectedChanged": 0
+            }]
+    }; }
+};
+DropiCitySelector.style = dropiCitySelectorCss();
+
+exports.dropi_city_selector = DropiCitySelector;

package/dist/cjs/dropi-color-picker.cjs.entry.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiColorPickerCss = () => `:host{display:block;position:relative}*,*::before,*::after{box-sizing:border-box}.cp-label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.cp-trigger{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:0 var(--Size-3, 12px);height:40px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);cursor:pointer;font-family:inherit;transition:border-color 0.2s;width:100%}.cp-trigger:hover:not(:disabled){border-color:var(--Info-Info-500, #50a5f1)}.cp-trigger--disabled{opacity:0.6;cursor:not-allowed}.cp-trigger__swatch{width:20px;height:20px;border-radius:var(--Border-1, 4px);border:1px solid rgba(0,0,0,0.1);flex-shrink:0}.cp-trigger__value{flex:1;text-align:left;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);font-family:monospace}.cp-popup{position:absolute;top:calc(100% + 4px);left:0;width:220px;background:var(--Neutral-White, #fff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 4px 24px rgba(0,0,0,0.12);z-index:300;padding:var(--Size-3, 12px);display:flex;flex-direction:column;gap:var(--Size-3, 12px)}.cp-spectrum-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--Size-1, 4px)}.cp-native{width:100%;height:80px;border:none;border-radius:var(--Border-1, 4px);cursor:pointer;padding:0;background:none}.cp-native::-webkit-color-swatch-wrapper{padding:0}.cp-native::-webkit-color-swatch{border:none;border-radius:var(--Border-1, 4px)}.cp-spectrum-label{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6)}.cp-hex-row{display:flex;align-items:center;gap:var(--Size-2, 8px)}.cp-hex-label{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-500, #68738f);width:24px;flex-shrink:0}.cp-hex-input{flex:1;height:32px;padding:0 var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);font-size:var(--font-size-xs, 10px);font-family:monospace;color:var(--Gray-Gray-700, #32394d);outline:none}.cp-hex-input:focus{border-color:var(--Info-Info-500, #50a5f1)}.cp-hex-preview{width:24px;height:24px;border-radius:var(--Border-1, 4px);border:1px solid rgba(0,0,0,0.1);flex-shrink:0}.cp-opacity-row{display:flex;align-items:center;gap:var(--Size-2, 8px)}.cp-opacity-label{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #68738f);white-space:nowrap}.cp-opacity-slider{flex:1;height:4px;cursor:pointer;accent-color:var(--Primary-Primary-500, #f49a3d)}.cp-opacity-value{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #68738f);width:28px;text-align:right;flex-shrink:0}.cp-presets{display:grid;grid-template-columns:repeat(6, 1fr);gap:var(--Size-1, 4px)}.cp-swatch{width:24px;height:24px;border-radius:var(--Border-1, 4px);border:2px solid transparent;cursor:pointer;transition:transform 0.15s, border-color 0.15s;padding:0}.cp-swatch:hover{transform:scale(1.15)}.cp-swatch--active{border-color:var(--Gray-Gray-800, #1a2033)}.cp-close{background:none;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);padding:4px 12px;font-size:var(--font-size-xs, 10px);font-family:inherit;color:var(--Gray-Gray-600, #475066);cursor:pointer;align-self:flex-end;transition:background 0.15s}.cp-close:hover{background:var(--Gray-Gray-50, #f7f8fa)}`;
+
+const PRESETS = [
+    '#f46a6b', '#f49a3d', '#f4d03d', '#34c55a', '#50a5f1', '#7c6bea',
+    '#1a2033', '#475066', '#858ea6', '#c3c9d9', '#eceef4', '#ffffff',
+];
+const DropiColorPicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiColorChange = index.createEvent(this, "dropiColorChange", 7);
+        this.dropiOpacityChange = index.createEvent(this, "dropiOpacityChange", 7);
+    }
+    /** Current color value (hex string) */
+    value = '#f49a3d';
+    /** Show opacity slider */
+    showOpacity = false;
+    /** Opacity value 0–100 */
+    opacity = 100;
+    /** Label */
+    label = '';
+    /** Disabled */
+    disabled = false;
+    /** Show preset swatches */
+    showPresets = true;
+    open = false;
+    hexInput = '';
+    /** Emitted when color changes. e.detail = hex string */
+    dropiColorChange;
+    /** Emitted when opacity changes. e.detail = 0-100 */
+    dropiOpacityChange;
+    componentWillLoad() {
+        this.hexInput = this.value;
+    }
+    selectColor(hex) {
+        this.value = hex;
+        this.hexInput = hex;
+        this.dropiColorChange.emit(hex);
+    }
+    handleHexInput(e) {
+        const raw = e.target.value;
+        this.hexInput = raw;
+        if (/^#[0-9a-fA-F]{6}$/.test(raw)) {
+            this.value = raw;
+            this.dropiColorChange.emit(raw);
+        }
+    }
+    handleOpacity(e) {
+        const val = Number(e.target.value);
+        this.opacity = val;
+        this.dropiOpacityChange.emit(val);
+    }
+    handleNativeColor(e) {
+        const hex = e.target.value;
+        this.selectColor(hex);
+    }
+    render() {
+        return (index.h("div", { key: '945a6065e2b3a74223a461a26685292edcd78c35', class: "cp-wrap" }, this.label && index.h("label", { key: 'f55fc2254ee0c2c301e9e32811dea37b6b8eff5d', class: "cp-label" }, this.label), index.h("button", { key: '021c23bc249bc3a3053176834808732c58441018', class: { 'cp-trigger': true, 'cp-trigger--disabled': this.disabled }, disabled: this.disabled, onClick: () => {
+                if (!this.disabled)
+                    this.open = !this.open;
+            }, type: "button" }, index.h("span", { key: 'be49ed05577c5c585d1509bdc1b5055e0e394383', class: "cp-trigger__swatch", style: { background: this.value } }), index.h("span", { key: '402a7005da1daf2b3a2e12b086b41f79552aa061', class: "cp-trigger__value" }, this.value), index.h("dropi-icon", { key: 'da5d7aa322ad7649e90832c54c6ecba445c5e64b', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), this.open && (index.h("div", { key: '5e14ace3d21ce605ecc8131acf6c1cb382ee33fa', class: "cp-popup" }, index.h("div", { key: '4408dff1ab4a6ab9a9765eb93502f88fe0946ac0', class: "cp-spectrum-wrap" }, index.h("input", { key: '8d3a7e7b38f528e8dfe14eb668da2af1d861cfe8', type: "color", class: "cp-native", value: this.value, onChange: (e) => this.handleNativeColor(e) }), index.h("div", { key: '4c37fc46fb692afde5574f681b02159f1a84d06b', class: "cp-spectrum-label" }, "Selecciona un color")), index.h("div", { key: 'a968e35abe0fc39806002d49f5ca46dece28c0a6', class: "cp-hex-row" }, index.h("span", { key: '0cb30134befff62ced36803c6ed0d5c96b41c680', class: "cp-hex-label" }, "HEX"), index.h("input", { key: 'ff6e209fcfeb2ec2d55354806aaba41c041492c5', class: "cp-hex-input", type: "text", value: this.hexInput, maxLength: 7, onInput: (e) => this.handleHexInput(e), placeholder: "#000000" }), index.h("div", { key: '6b744fc086dbbc9b5dc148f224673085c7a28704', class: "cp-hex-preview", style: { background: this.value } })), this.showOpacity && (index.h("div", { key: '5250878b5392e1b00c2e677db727f56c2db91c11', class: "cp-opacity-row" }, index.h("span", { key: '58b49f3749d8a33edcfc580b0e11517087bc25b4', class: "cp-opacity-label" }, "Opacidad"), index.h("input", { key: '48f060900c5d7184e5d2ab93c0abd1641cc755e7', class: "cp-opacity-slider", type: "range", min: 0, max: 100, value: this.opacity, onInput: (e) => this.handleOpacity(e) }), index.h("span", { key: '7da0ec0a86c1472bd1836a8bb0ca616091dde695', class: "cp-opacity-value" }, this.opacity, "%"))), this.showPresets && (index.h("div", { key: '96434d1c7bdfe187f04f613494b79e28acef7750', class: "cp-presets" }, PRESETS.map(hex => (index.h("button", { class: { 'cp-swatch': true, 'cp-swatch--active': hex === this.value }, style: { background: hex }, onClick: () => this.selectColor(hex), type: "button", title: hex }))))), index.h("button", { key: 'e5ad3d16b888c8eb0a4444ae3a6fbab9c83689c5', class: "cp-close", onClick: () => this.open = false, type: "button" }, "Cerrar")))));
+    }
+};
+DropiColorPicker.style = dropiColorPickerCss();
+
+exports.dropi_color_picker = DropiColorPicker;

package/dist/cjs/dropi-country-flags.cjs.entry.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiCountryFlagsCss = () => `:host{display:inline-flex}.flag{max-width:40px;max-height:40px;margin:0;display:flex;align-items:center;justify-content:center}.flag img{width:100%;height:100%;object-fit:cover}.circle{border-radius:50%;overflow:hidden}.rectangle{border-radius:4px;overflow:hidden;max-width:32px !important;max-height:24px !important}`;
+
+const DropiCountryFlags = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** ISO 3166-1 alpha-2 country code (e.g. "CO", "US") */
+    country = '';
+    /** Visual style: circle uses circle-flags CDN, rectangle/flat uses flagsapi */
+    flagStyle = 'flat';
+    /** Width in px */
+    width = '';
+    /** Height in px */
+    height = '';
+    get src() {
+        const code = (this.country || '').toUpperCase();
+        if (this.flagStyle === 'circle') {
+            return `https://hatscripts.github.io/circle-flags/flags/${code.toLowerCase()}.svg`;
+        }
+        return `https://flagsapi.com/${code}/flat/64.png`;
+    }
+    render() {
+        const style = {};
+        if (this.width)
+            style['width'] = this.width.includes('px') ? this.width : `${this.width}px`;
+        if (this.height)
+            style['height'] = this.height.includes('px') ? this.height : `${this.height}px`;
+        return (index.h("figure", { key: 'a0e00a2c47e205b0ddd565726a9aff1945cfad2e', class: `flag ${this.flagStyle}` }, index.h("img", { key: '4048129356b4d43ae761f7dd7858483dd008f2b9', src: this.src, style: style, alt: `flag-${this.country}` })));
+    }
+};
+DropiCountryFlags.style = dropiCountryFlagsCss();
+
+exports.dropi_country_flags = DropiCountryFlags;

package/dist/cjs/dropi-country-selector.cjs.entry.js

@@ -0,0 +1,164 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiCountrySelectorCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}label{display:block;font-size:var(--font-size-xs, 11px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066);margin-bottom:6px}.required{color:var(--Error-Error-500, #ef4444);margin-left:2px}.select-button{width:100%;height:40px;padding:0 10px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.15s ease}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #3b82f6)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-button.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button.select-invalid{border-color:var(--Error-Error-500, #ef4444)}.selected-content{display:flex;align-items:center;gap:8px;overflow:hidden}.selected-option{display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.placeholder-text{color:var(--Gray-Gray-400, #858ea6)}.flag-img{border-radius:16px;width:24px;height:24px;object-fit:cover;flex-shrink:0}.select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--Neutral-White, #fff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);overflow-y:auto;z-index:200;list-style:none;padding:0;margin:0;box-shadow:0 4px 12px rgba(0, 0, 0, 0.1);transition:max-height 0.2s ease, opacity 0.2s ease}.select-dropdown.expanded{max-height:260px;opacity:1}.select-dropdown.collapsed{max-height:0;opacity:0;pointer-events:none;border-color:transparent;box-shadow:none}.search-li{padding:0;position:sticky;top:0;background:var(--Neutral-White, #fff);z-index:1}.country-search{width:100%;padding:8px 12px;border:none;border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-600, #475066);background:transparent}.option{width:100%;min-height:40px;border-radius:0;padding:8px 12px;border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background 0.1s ease}.option:hover{background:var(--Gray-Gray-50, #f7f8fa)}`;
+
+const COUNTRIES = [
+    { name: 'Afghanistan', code: 'AF', codePhone: '93' },
+    { name: 'Albania', code: 'AL', codePhone: '355' },
+    { name: 'Algeria', code: 'DZ', codePhone: '213' },
+    { name: 'Argentina', code: 'AR', codePhone: '54' },
+    { name: 'Australia', code: 'AU', codePhone: '61' },
+    { name: 'Austria', code: 'AT', codePhone: '43' },
+    { name: 'Azerbaijan', code: 'AZ', codePhone: '994' },
+    { name: 'Bahamas', code: 'BS', codePhone: '1242' },
+    { name: 'Bahrain', code: 'BH', codePhone: '973' },
+    { name: 'Bangladesh', code: 'BD', codePhone: '880' },
+    { name: 'Belgium', code: 'BE', codePhone: '32' },
+    { name: 'Bolivia', code: 'BO', codePhone: '591' },
+    { name: 'Brazil', code: 'BR', codePhone: '55' },
+    { name: 'Cambodia', code: 'KH', codePhone: '855' },
+    { name: 'Canada', code: 'CA', codePhone: '1' },
+    { name: 'Chile', code: 'CL', codePhone: '56' },
+    { name: 'China', code: 'CN', codePhone: '86' },
+    { name: 'Colombia', code: 'CO', codePhone: '57' },
+    { name: 'Costa Rica', code: 'CR', codePhone: '506' },
+    { name: 'Cuba', code: 'CU', codePhone: '53' },
+    { name: 'Czech Republic', code: 'CZ', codePhone: '420' },
+    { name: 'Denmark', code: 'DK', codePhone: '45' },
+    { name: 'Dominican Republic', code: 'DO', codePhone: '1' },
+    { name: 'Ecuador', code: 'EC', codePhone: '593' },
+    { name: 'Egypt', code: 'EG', codePhone: '20' },
+    { name: 'El Salvador', code: 'SV', codePhone: '503' },
+    { name: 'Estonia', code: 'EE', codePhone: '372' },
+    { name: 'Ethiopia', code: 'ET', codePhone: '251' },
+    { name: 'Finland', code: 'FI', codePhone: '358' },
+    { name: 'France', code: 'FR', codePhone: '33' },
+    { name: 'Germany', code: 'DE', codePhone: '49' },
+    { name: 'Ghana', code: 'GH', codePhone: '233' },
+    { name: 'Greece', code: 'GR', codePhone: '30' },
+    { name: 'Guatemala', code: 'GT', codePhone: '502' },
+    { name: 'Honduras', code: 'HN', codePhone: '504' },
+    { name: 'Hong Kong', code: 'HK', codePhone: '852' },
+    { name: 'Hungary', code: 'HU', codePhone: '36' },
+    { name: 'India', code: 'IN', codePhone: '91' },
+    { name: 'Indonesia', code: 'ID', codePhone: '62' },
+    { name: 'Iran, Islamic Republic Of', code: 'IR', codePhone: '98' },
+    { name: 'Iraq', code: 'IQ', codePhone: '964' },
+    { name: 'Ireland', code: 'IE', codePhone: '353' },
+    { name: 'Israel', code: 'IL', codePhone: '972' },
+    { name: 'Italy', code: 'IT', codePhone: '39' },
+    { name: 'Jamaica', code: 'JM', codePhone: '1876' },
+    { name: 'Japan', code: 'JP', codePhone: '81' },
+    { name: 'Jordan', code: 'JO', codePhone: '962' },
+    { name: 'Kazakhstan', code: 'KZ', codePhone: '7' },
+    { name: 'Kenya', code: 'KE', codePhone: '254' },
+    { name: 'Kuwait', code: 'KW', codePhone: '965' },
+    { name: 'Lebanon', code: 'LB', codePhone: '961' },
+    { name: 'Malaysia', code: 'MY', codePhone: '60' },
+    { name: 'Mexico', code: 'MX', codePhone: '52' },
+    { name: 'Morocco', code: 'MA', codePhone: '212' },
+    { name: 'Netherlands', code: 'NL', codePhone: '31' },
+    { name: 'New Zealand', code: 'NZ', codePhone: '64' },
+    { name: 'Nicaragua', code: 'NI', codePhone: '505' },
+    { name: 'Nigeria', code: 'NG', codePhone: '234' },
+    { name: 'Norway', code: 'NO', codePhone: '47' },
+    { name: 'Pakistan', code: 'PK', codePhone: '92' },
+    { name: 'Panama', code: 'PA', codePhone: '507' },
+    { name: 'Paraguay', code: 'PY', codePhone: '595' },
+    { name: 'Peru', code: 'PE', codePhone: '51' },
+    { name: 'Philippines', code: 'PH', codePhone: '63' },
+    { name: 'Poland', code: 'PL', codePhone: '48' },
+    { name: 'Portugal', code: 'PT', codePhone: '351' },
+    { name: 'Qatar', code: 'QA', codePhone: '974' },
+    { name: 'Romania', code: 'RO', codePhone: '40' },
+    { name: 'Russian Federation', code: 'RU', codePhone: '7' },
+    { name: 'Saudi Arabia', code: 'SA', codePhone: '966' },
+    { name: 'Singapore', code: 'SG', codePhone: '65' },
+    { name: 'South Africa', code: 'ZA', codePhone: '27' },
+    { name: 'Spain', code: 'ES', codePhone: '34' },
+    { name: 'Sri Lanka', code: 'LK', codePhone: '94' },
+    { name: 'Sweden', code: 'SE', codePhone: '46' },
+    { name: 'Switzerland', code: 'CH', codePhone: '41' },
+    { name: 'Taiwan, Province of China', code: 'TW', codePhone: '886' },
+    { name: 'Thailand', code: 'TH', codePhone: '66' },
+    { name: 'Tunisia', code: 'TN', codePhone: '216' },
+    { name: 'Turkey', code: 'TR', codePhone: '90' },
+    { name: 'Uganda', code: 'UG', codePhone: '256' },
+    { name: 'Ukraine', code: 'UA', codePhone: '380' },
+    { name: 'United Arab Emirates', code: 'AE', codePhone: '971' },
+    { name: 'United Kingdom', code: 'GB', codePhone: '44' },
+    { name: 'United States', code: 'US', codePhone: '1' },
+    { name: 'Uruguay', code: 'UY', codePhone: '598' },
+    { name: 'Venezuela', code: 'VE', codePhone: '58' },
+    { name: 'Viet Nam', code: 'VN', codePhone: '84' },
+    { name: 'Zimbabwe', code: 'ZW', codePhone: '263' },
+];
+const DropiCountrySelector = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiCountryChange = index.createEvent(this, "dropiCountryChange", 7);
+    }
+    /** Label above the select */
+    label = '';
+    /** Placeholder when nothing is selected */
+    placeholder = 'Selecciona un país';
+    /** Pre-selected country code (ISO 3166-1 alpha-2) */
+    value = '';
+    /** Whether the selector is disabled */
+    disabled = false;
+    /** Show asterisk for required field */
+    showObligatory = false;
+    /** Show error border */
+    invalid = false;
+    /** Emitted when a country is selected. Detail is the CountryItem. */
+    dropiCountryChange;
+    isOpen = false;
+    selected = null;
+    searchTerm = '';
+    searchInputRef;
+    valueChanged(val) {
+        this.selected = COUNTRIES.find(c => c.code === val) || null;
+    }
+    componentWillLoad() {
+        if (this.value)
+            this.valueChanged(this.value);
+    }
+    get filtered() {
+        if (!this.searchTerm)
+            return COUNTRIES;
+        const t = this.searchTerm.toLowerCase();
+        return COUNTRIES.filter(c => c.name.toLowerCase().includes(t));
+    }
+    open() {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            setTimeout(() => this.searchInputRef?.focus(), 50);
+        }
+    }
+    select(country) {
+        this.selected = country;
+        this.isOpen = false;
+        this.searchTerm = '';
+        this.value = country.code;
+        this.dropiCountryChange.emit(country);
+    }
+    render() {
+        return (index.h("div", { key: '95320129f76f5d802d62cb282172af97607ed15b', class: "custom-select" }, this.label && (index.h("label", { key: '7310600a9ac9a4482240ae6452db11ea2f083ea5' }, this.label, this.showObligatory && index.h("span", { key: '8ff5f89823f308366fa9f9ab680d7716e136eec5', class: "required" }, "*"))), index.h("button", { key: 'cf73602134c204051e196a2fdce9192377e6c1dc', type: "button", class: {
+                'select-button': true,
+                'select-completed': !!this.selected,
+                'select-invalid': this.invalid,
+            }, disabled: this.disabled, onClick: () => this.open() }, index.h("div", { key: '29afa9af6fd5b314e38f75c496e3f6f529a795b2', class: "selected-content" }, this.selected ? (index.h("span", { class: "selected-option" }, index.h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (index.h("span", { class: "placeholder-text" }, this.placeholder))), index.h("dropi-icon", { key: '722dcee79149526a9879e339279128aa23f513cc', name: this.isOpen ? 'Dropdown-up' : 'Dropdown-down', width: "20px", height: "20px", color: "Gray-Gray-500" })), index.h("ul", { key: '64a93caa1189e212c83aa711d8fec2df97baba1b', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, index.h("li", { key: '28f0924f7edac815645c0ee51963b8ac688312a6', class: "search-li" }, index.h("input", { key: 'b69a4b4a9238fe4dbc0932f8f4078989d867a224', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } })), this.filtered.map(country => (index.h("li", { key: country.code }, index.h("button", { class: "option", type: "button", onClick: () => this.select(country) }, index.h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name)))))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+DropiCountrySelector.style = dropiCountrySelectorCss();
+
+exports.dropi_country_selector = DropiCountrySelector;