@dropi/ui 0.1.19 → 0.1.21

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

@@ -1,34 +1,36 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-077kM98l.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.checkedValues = index.createEvent(this, "checkedValues", 7);
+        this.onSearch = index.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 || []);
     }
@@ -37,7 +39,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) {
@@ -48,16 +50,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 (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: 'd2375e280c0cf0f6d46430bd027a8d03b32cd433', class: "csl" }, this.showFilter && (index.h("div", { key: 'efbc85d0c1b331c25ffa95c26336fef280633eef', class: "csl__search" }, index.h("dropi-icon", { key: '2b428c87384af4d54cc081d63a1c78d480c006ee', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), index.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 && (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.onSearch.emit(this.filterText);
+            } }), this.filterText && (index.h("button", { key: '8460836fc527444f3f5a302f4b1856a1192882e2', class: "csl__clear", onClick: () => { this.filterText = ''; this.onSearch.emit(''); } }, index.h("dropi-icon", { key: '442b9249d97adca6b8fbaf066bee3b0f2a0217e7', name: "Close-small", width: "14px", height: "14px", color: "Gray-Gray-400" }))))), index.h("div", { key: 'e1599fca9f98199f7bb0671bcb7f71bddcd0c9df', 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)));
+            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.label }), index.h("span", { class: "csl__label" }, opt.label)));
         })))));
     }
     static get watchers() { return {

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

@@ -1,33 +1,33 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-077kM98l.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.onChange = index.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 (index.h("div", { key: '4e56a55cec60e55f61205e370845f734b5baedcc', class: "container-dropi-checkbox", onClick: () => this.changeState() }, index.h("div", { key: 'dd440f791d8fa5dd3fd7e8a00054c2d0fe337961', class: {
+        return (index.h("div", { key: '2bf224c57c9b0b48d3d2a28f2cf52713b532110f', class: "container-dropi-checkbox", onClick: () => this.changeState() }, index.h("div", { key: '7dfbc936f1a6e641a3e18c9ffc769e8a25fd9328', 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: '647d2f6b000569906812f1bddbcc69198a2774cc', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, index.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/cjs/dropi-chips.cjs.entry.js

@@ -1,28 +1,28 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-077kM98l.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.onClose = index.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 (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: '1efcba7f06d54e0f8953330a83d946362e8283a2', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (index.h("img", { key: '8b5b984cbd85afc86a23907b6cfb0a26b59c029c', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (index.h("dropi-icon", { key: '8e5c4ca10f94e012421d88b715aa2f49c6261c52', class: "chip__pre-icon", name: this.icon, width: "14px", height: "14px", color: "currentColor" })), index.h("span", { key: 'caf36314e2bd2704d7ef11e9b75ce5e5def1c2d4', class: "chip__text" }, index.h("slot", { key: 'de0b015d547872891baefcca9c9cd5c07893e844' })), this.showIcon && (index.h("button", { key: 'd9998ff121304a99b772e5af04006f90db1c2958', class: "chip__close", onClick: () => this.onClose.emit(), "aria-label": "Eliminar" }, index.h("dropi-icon", { key: '08491f358bec0380a8ff4ee95bd2d823922a0c68', name: "Cross-circle", width: "14px", height: "14px", color: "currentColor" })))));
     }
 };
 DropiChips.style = dropiChipsCss();

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

@@ -0,0 +1,96 @@
+'use strict';
+
+var index = require('./index-077kM98l.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) {
+        index.registerInstance(this, hostRef);
+        this.selectedCitiesChange = index.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 index.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 (index.h("div", { key: 'af6acd88ea001105c036726bed11e0caa6012f10', class: { 'city-selector': true, 'city-selector--disabled': this.disabled } }, index.h("button", { key: '4a5c368ddea3f43ef9ef42dc68f28b47b642aadb', type: "button", class: "selector-trigger", disabled: this.disabled, onClick: () => this.toggle(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("div", { key: '769288d6567d2f6d453b81198e3ab456c5042443', class: "chips-area" }, this.selected.length === 0 && (index.h("span", { key: '152b570fd02028d8e1788ced03d56f3853dd98d4', class: "placeholder" }, this.placeholder)), this.selected.map(val => (index.h("span", { class: "chip", key: String(val) }, this.getLabel(val), index.h("button", { type: "button", class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, index.h("dropi-icon", { name: "Close-small", width: "10px", height: "10px", color: "Primary-Primary-500" })))))), index.h("dropi-icon", { key: '806ec368945b587fcb9125ca3a262ff2c6f9247c', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "16px", height: "16px", color: "Gray-Gray-500" })), this.isOpen && (index.h("div", { key: '1249ca520defb5fd21d5c5da098c93c3e66bebd3', class: "dropdown", role: "listbox" }, index.h("div", { key: '244a7a22db381014da6672e310f2d21a9cf39a63', class: "search-wrap" }, index.h("div", { key: '871a48407ec66d7e9e95a9ab32ff8d74842a4e6e', class: "search-field" }, index.h("input", { key: '20d5543bae44e70fc4fd61470cae413f29c17687', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), index.h("span", { key: '44bde8e0ddb6cbade01e4743c9d111fa7c65aa94', class: "search-icon" }, index.h("dropi-icon", { key: 'c577e87fd8ffd3d4d444541840a139430c96e503', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" })))), index.h("div", { key: 'c7abe328e26838d49465d3b2767a2b90806e0e05', class: "options-list" }, groups.length === 0 && (index.h("div", { key: '1f583667dda2e6540254b3155029c97647cb58fb', class: "no-results" }, "Sin resultados")), groups.map(group => (index.h("div", { key: group.value, class: "group" }, index.h("div", { class: "group-label" }, group.label), group.items.map(city => {
+            const isSelected = this.selected.includes(city.value);
+            return (index.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 }, index.h("span", { class: { 'checkbox': true, 'checkbox--checked': isSelected } }, isSelected && (index.h("dropi-icon", { name: "Check", width: "10px", height: "10px", color: "Neutral-White" }))), index.h("span", { class: "city-label" }, 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,319 @@
+'use strict';
+
+var index = require('./index-077kM98l.js');
+
+const dropiColorPickerCss = () => `:host{display:block}.general-container{position:relative;width:fit-content}.main-input-container{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:var(--Size-3);position:relative;width:fit-content}.main-input-container .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;cursor:pointer}.line-color-preview{width:40px;height:40px;border-radius:50%;border:1px solid var(--Gray-Gray-200);display:flex;justify-content:center;align-items:center;padding:5px}.line-color-preview .color-preview{width:100%;height:100%;border-radius:50%;border:1px solid var(--Gray-Gray-200)}.position-right{top:0;left:250px}.position-left{top:0;right:200px}.position-top{bottom:55px}.position-bottom{top:55px}.position-bottom::before{transform:rotate(90deg);left:50%;top:-15px}.position-right::before{left:-6px;top:10px}.position-top::before{transform:rotate(270deg);left:50%;bottom:-15px}.position-left::before{transform:rotate(180deg);right:-9px}.color-picker-container::before{content:'';position:absolute;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid var(--Neutral-White);z-index:1}.color-picker-container{width:280px;padding:var(--Size-4);background:var(--Neutral-White);border-radius:var(--Size-2);box-shadow:var(--Shadow-large);position:absolute;z-index:100;transform-origin:top left;opacity:0;transition:transform 0.2s ease-out,     opacity 0.2s ease-out;pointer-events:none}.color-picker-container .main-color-canvas-container{position:relative;margin-bottom:var(--Size-4);border:1px solid var(--Gray-Gray-200);border-radius:var(--Size-1);display:flex;justify-self:center;align-items:center}.color-picker-container .main-color-canvas-container canvas{display:block;border-radius:var(--Size-1)}.color-picker-container .main-color-canvas-container .color-selector-pointer{position:absolute;width:var(--Size-3);height:var(--Size-3);border:2px solid var(--Neutral-White);border-radius:50%;transform:translate(-6px, -6px);pointer-events:none}.color-picker-container .slider-container{display:flex;flex-direction:column;gap:var(--Size-3)}.color-picker-container .slider-container .slider-group{display:flex;flex-direction:column;gap:var(--Size-1)}.color-picker-container .slider-container .slider-group label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:var(--font-weight-bold)}.color-picker-container .slider-container .slider-group .hue-slider-container,.color-picker-container .slider-container .slider-group .opacity-slider-container{position:relative;height:var(--Size-3);border-radius:var(--Size-4);overflow:hidden}.color-picker-container .slider-container .slider-group .hue-slider-container canvas,.color-picker-container .slider-container .slider-group .opacity-slider-container canvas{display:block;width:100%;height:100%}.color-picker-container .slider-container .slider-group .hue-slider-container .slider-pointer,.color-picker-container .slider-container .slider-group .opacity-slider-container .slider-pointer{position:absolute;top:0;height:var(--Size-3);width:var(--Size-3);background:transparent;border:2px solid var(--Neutral-White);border-radius:50%;pointer-events:none}.color-picker-container.show{transform:scale(1);opacity:1;pointer-events:auto}.color-info .color-label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:var(--font-weight-bold);text-transform:uppercase;margin-bottom:var(--Size-2)}.color-info .color-input{border:1px solid var(--Gray-Gray-200, #ddd);border-radius:var(--Size-1);padding:6px 8px;font-size:var(--font-size-s);width:100%;font-family:monospace;text-transform:uppercase;background-color:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-800, #1f2433);outline:none}`;
+
+const DropiColorPicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.colorChange = index.createEvent(this, "colorChange", 7);
+    }
+    get el() { return index.getElement(this); }
+    currentColor = '#ffffff';
+    position = 'right';
+    colorChange;
+    color = '';
+    hue = 0;
+    saturation = 0;
+    currentVal = 0;
+    opacity = 100;
+    showEdit = false;
+    isDragging = false;
+    isHueDragging = false;
+    isOpacityDragging = false;
+    colorCanvas;
+    hueCanvas;
+    opacityCanvas;
+    onValueChange(newValue) {
+        if (!this.showEdit) {
+            this.color = newValue;
+            this.syncFromHex();
+        }
+    }
+    componentWillLoad() {
+        this.color = this.currentColor;
+        this.syncFromHex();
+    }
+    componentDidLoad() {
+        document.addEventListener('mousemove', this.onMouseMove.bind(this));
+        document.addEventListener('mouseup', this.onMouseUp.bind(this));
+        document.addEventListener('click', this.handleClickOutside.bind(this));
+        // Defer canvas drawing slightly to ensure elements are rendered
+        setTimeout(() => {
+            if (this.hueCanvas)
+                this.drawHueCanvas();
+            if (this.colorCanvas)
+                this.drawColorCanvas();
+            if (this.opacityCanvas)
+                this.drawOpacityCanvas();
+        }, 50);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousemove', this.onMouseMove.bind(this));
+        document.removeEventListener('mouseup', this.onMouseUp.bind(this));
+        document.removeEventListener('click', this.handleClickOutside.bind(this));
+    }
+    onMouseMove(event) {
+        if (this.isDragging) {
+            this.updateColorFromPosition(event);
+            return;
+        }
+        if (this.isHueDragging) {
+            this.updateHueFromPosition(event);
+            return;
+        }
+        if (this.isOpacityDragging) {
+            this.updateOpacityFromPosition(event);
+            return;
+        }
+    }
+    onMouseUp() {
+        this.isDragging = false;
+        this.isHueDragging = false;
+        this.isOpacityDragging = false;
+    }
+    handleClickOutside(event) {
+        // Determine if the click target is outside the host element
+        const clickedInside = event.composedPath().includes(this.el);
+        if (!clickedInside && this.showEdit) {
+            this.showEdit = false;
+            this.currentColor = this.color;
+            this.colorChange.emit(this.color);
+        }
+    }
+    drawColorCanvas() {
+        if (!this.colorCanvas)
+            return;
+        const ctx = this.colorCanvas.getContext('2d');
+        const width = this.colorCanvas.width;
+        const height = this.colorCanvas.height;
+        const saturationGradient = ctx.createLinearGradient(0, 0, width, 0);
+        saturationGradient.addColorStop(0, '#FFFFFF');
+        saturationGradient.addColorStop(1, `hsl(${this.hue}, 100%, 50%)`);
+        const valueGradient = ctx.createLinearGradient(0, 0, 0, height);
+        valueGradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
+        valueGradient.addColorStop(1, '#000000');
+        ctx.fillStyle = saturationGradient;
+        ctx.fillRect(0, 0, width, height);
+        ctx.fillStyle = valueGradient;
+        ctx.fillRect(0, 0, width, height);
+    }
+    drawHueCanvas() {
+        if (!this.hueCanvas)
+            return;
+        const ctx = this.hueCanvas.getContext('2d');
+        const width = this.hueCanvas.width;
+        const height = this.hueCanvas.height;
+        const hueGradient = ctx.createLinearGradient(0, 0, width, 0);
+        for (let i = 0; i <= 360; i += 60) {
+            hueGradient.addColorStop(i / 360, `hsl(${i}, 100%, 50%)`);
+        }
+        ctx.fillStyle = hueGradient;
+        ctx.fillRect(0, 0, width, height);
+    }
+    drawOpacityCanvas() {
+        if (!this.opacityCanvas)
+            return;
+        const ctx = this.opacityCanvas.getContext('2d');
+        const width = this.opacityCanvas.width;
+        const height = this.opacityCanvas.height;
+        ctx.clearRect(0, 0, width, height);
+        ctx.fillStyle = '#FFFFFF';
+        ctx.fillRect(0, 0, width, height);
+        const rgb = this.hsvToRgb(this.hue, this.saturation, this.currentVal);
+        const opacityGradient = ctx.createLinearGradient(0, 0, width, 0);
+        opacityGradient.addColorStop(0, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`);
+        opacityGradient.addColorStop(1, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)`);
+        ctx.fillStyle = opacityGradient;
+        ctx.fillRect(0, 0, width, height);
+    }
+    updateColor() {
+        const rgb = this.hsvToRgb(this.hue, this.saturation, this.currentVal);
+        const hex = this.rgbToHex(rgb.r, rgb.g, rgb.b, this.opacity);
+        this.color = hex;
+        this.drawColorCanvas();
+        this.drawOpacityCanvas();
+        this.currentColor = hex;
+        this.colorChange.emit(this.color);
+    }
+    hsvToRgb(h, s, v) {
+        s /= 100;
+        v /= 100;
+        const c = v * s;
+        const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+        const m = v - c;
+        let r = 0, g = 0, b = 0;
+        if (h >= 0 && h < 60) {
+            r = c;
+            g = x;
+            b = 0;
+        }
+        else if (h >= 60 && h < 120) {
+            r = x;
+            g = c;
+            b = 0;
+        }
+        else if (h >= 120 && h < 180) {
+            r = 0;
+            g = c;
+            b = x;
+        }
+        else if (h >= 180 && h < 240) {
+            r = 0;
+            g = x;
+            b = c;
+        }
+        else if (h >= 240 && h < 300) {
+            r = x;
+            g = 0;
+            b = c;
+        }
+        else if (h >= 300 && h <= 360) {
+            r = c;
+            g = 0;
+            b = x;
+        }
+        return {
+            r: Math.round((r + m) * 255),
+            g: Math.round((g + m) * 255),
+            b: Math.round((b + m) * 255),
+        };
+    }
+    rgbToHex(red, green, black, opacity = 100) {
+        const toHex = (val) => {
+            const hex = Math.round(val).toString(16);
+            return hex.padStart(2, '0');
+        };
+        const rHex = toHex(red);
+        const gHex = toHex(green);
+        const bHex = toHex(black);
+        const alpha = Math.round((opacity / 100) * 255);
+        const aHex = toHex(alpha);
+        return `#${rHex}${gHex}${bHex}${aHex}`;
+    }
+    syncFromHex() {
+        if (/^#?[0-9A-F]{6}([0-9A-F]{2})?$/i.test(this.color)) {
+            if (!this.color.startsWith('#')) {
+                this.color = '#' + this.color;
+            }
+            const hex = this.color.substring(1);
+            const r = parseInt(hex.substring(0, 2), 16);
+            const g = parseInt(hex.substring(2, 4), 16);
+            const b = parseInt(hex.substring(4, 6), 16);
+            const a = hex.length === 8 ? parseInt(hex.substring(6, 8), 16) / 255 : 1;
+            const hsv = this.rgbToHsv(r, g, b, a);
+            this.hue = hsv.h;
+            this.saturation = hsv.s;
+            this.currentVal = hsv.v;
+            this.opacity = a * 100;
+            this.drawColorCanvas();
+            this.drawOpacityCanvas();
+        }
+    }
+    onHexInputChange(event) {
+        this.color = event.target.value;
+        this.syncFromHex();
+    }
+    rgbToHsv(r, g, b, a = 1) {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const delta = max - min;
+        let h = 0;
+        if (delta !== 0) {
+            if (max === r)
+                h = 60 * (((g - b) / delta) % 6);
+            else if (max === g)
+                h = 60 * ((b - r) / delta + 2);
+            else if (max === b)
+                h = 60 * ((r - g) / delta + 4);
+        }
+        if (h < 0)
+            h += 360;
+        const s = max === 0 ? 0 : (delta / max) * 100;
+        const v = max * 100;
+        return {
+            h: Math.round(h),
+            s: Math.round(s),
+            v: Math.round(v),
+            a: parseFloat(a.toFixed(3)),
+        };
+    }
+    getCanvasPosition(canvas, event) {
+        const rect = canvas.getBoundingClientRect();
+        const scaleX = canvas.width / rect.width;
+        const scaleY = canvas.height / rect.height;
+        return {
+            x: (event.clientX - rect.left) * scaleX,
+            y: (event.clientY - rect.top) * scaleY,
+        };
+    }
+    onColorMouseDown(event) {
+        this.isDragging = true;
+        this.updateColorFromPosition(event);
+    }
+    onHueMouseDown(event) {
+        this.isHueDragging = true;
+        this.updateHueFromPosition(event);
+    }
+    onOpacityMouseDown(event) {
+        this.isOpacityDragging = true;
+        this.updateOpacityFromPosition(event);
+    }
+    updateColorFromPosition(event) {
+        if (!this.colorCanvas)
+            return;
+        const pos = this.getCanvasPosition(this.colorCanvas, event);
+        const x = Math.max(0, Math.min(pos.x, 256));
+        const y = Math.max(0, Math.min(pos.y, 150));
+        this.saturation = Math.round((x / 256) * 100);
+        this.currentVal = 100 - Math.round((y / 150) * 100);
+        this.updateColor();
+    }
+    updateHueFromPosition(event) {
+        if (!this.hueCanvas)
+            return;
+        const pos = this.getCanvasPosition(this.hueCanvas, event);
+        const x = Math.max(0, Math.min(pos.x, 256));
+        this.hue = Math.round((x / 256) * 360);
+        this.drawColorCanvas();
+        this.updateColor();
+    }
+    updateOpacityFromPosition(event) {
+        if (!this.opacityCanvas)
+            return;
+        const pos = this.getCanvasPosition(this.opacityCanvas, event);
+        const x = Math.max(0, Math.min(pos.x, 256));
+        this.opacity = Math.round((x / 256) * 100);
+        this.updateColor();
+    }
+    showEditor() {
+        this.showEdit = !this.showEdit;
+        this.color = this.currentColor;
+        if (this.showEdit) {
+            setTimeout(() => {
+                this.drawHueCanvas();
+                this.drawColorCanvas();
+                this.drawOpacityCanvas();
+                this.syncFromHex();
+            }, 100);
+        }
+    }
+    render() {
+        return (index.h("div", { key: '9b5f9753c014b33a75fdf35460b3f2b40f12f5c6', class: "general-container" }, index.h("div", { key: '2547ef57ac6fc35eb65012729d613ac819918c02', class: "main-input-container" }, index.h("div", { key: 'f8f45ef7fba7d889b72af34973f51cd39f7541ec', class: "overlay", onClick: () => this.showEditor() }), index.h("div", { key: '76f6a0b4f5abf04e02778166f7f568a106ccbda6', class: "line-color-preview" }, index.h("div", { key: '4a9d7b92303dc21c39dd2271d1fbf9719bb4e012', class: "color-preview", style: { background: this.currentColor } })), index.h("div", { key: '47d4986bd93f8ac590014b3ad4251547be86bf76', class: "color-info" }, index.h("input", { key: '0f0265276fb482a5053a328daf4888f577e9fed2', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), index.h("div", { key: 'b944ba1094125f85f78529804549d02a4af15a98', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, index.h("div", { key: 'b1cfc5ae3e082533562685eee34246972d226ee8', class: "main-color-canvas-container" }, index.h("canvas", { key: '6d91d698213b04aed7a14d0ea77876ec81d54a9c', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), index.h("div", { key: 'a35cbf720261d42a476ff86a4d3230eb41c60158', class: "color-selector-pointer", style: {
+                left: `${(this.saturation / 100) * 256}px`,
+                top: `${((100 - this.currentVal) / 100) * 150}px`
+            } })), index.h("div", { key: 'a3a28711ce1b7d550ace8cdefce1170d1cfab6b7', class: "slider-container" }, index.h("div", { key: '1a7e080019254df35871874d4f682be49ccb1c2d', class: "slider-group" }, index.h("div", { key: 'ab472e420e2dde23eaf797e0962234f06b831350', class: "hue-slider-container" }, index.h("canvas", { key: '84fa8b097826ca461913ef5c1a363fed51fea46a', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), index.h("div", { key: '47e740225ac80d3daee6781e0a3d55840dbf6e3a', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), index.h("div", { key: '408dccb26d895cbf3c648e959a0a748340b9d7ad', class: "slider-group" }, index.h("div", { key: 'bd1c6eb89183c0a3f194601413e840cd3576955c', class: "opacity-slider-container" }, index.h("canvas", { key: '8bef0d97d8f88471929876ffb4fb3dfb8eee950a', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), index.h("div", { key: '394b6a5aac4d2924e5dd3e2fe898fe1761c6358f', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), index.h("div", { key: '7bd122ab15ed2534586d5e0d2cf4a33174bb0385', class: "color-info" }, index.h("div", { key: '4dc391044f0cd3a72ee14e5c0f7279c81140c5f3', class: "color-label" }, "HEX"), index.h("input", { key: 'f197c630e94ccebab9e9f75a615b3a2fd09ffc0f', type: "text", class: "color-input", value: this.color, onInput: (e) => this.onHexInputChange(e), maxLength: 9 }))))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+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-077kM98l.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 */
+    customStyle = 'flat';
+    /** Width in px */
+    width = '';
+    /** Height in px */
+    height = '';
+    get src() {
+        const code = (this.country || '').toUpperCase();
+        if (this.customStyle === '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: '08e6efa91f51eb4c408ae868cef6a2c449e7ac2f', class: `flag ${this.customStyle}` }, index.h("img", { key: 'd0c24fdb98b1c2561f36dc70663e07ccea7802ca', src: this.src, style: style, alt: `flag-${this.country}` })));
+    }
+};
+DropiCountryFlags.style = dropiCountryFlagsCss();
+
+exports.dropi_country_flags = DropiCountryFlags;