@dropi/ui 0.1.43 → 0.1.45

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

@@ -126,7 +126,17 @@ const DropiCountrySelector = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.dropiChange = createEvent(this, "dropiChange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
+    internals;
+    /** Name for native form submission */
+    name = '';
     /** Label above the select */
     label = '';
     /** Placeholder when nothing is selected */
@@ -171,6 +181,7 @@ const DropiCountrySelector = class {
     searchInputRef;
     currentSelectionChanged(val) {
         this.selected = COUNTRIES.find(c => c.code === val) || null;
+        this.internals.setFormValue(val);
     }
     selectPropertiesChanged(val) {
         if (!val)
@@ -191,6 +202,7 @@ const DropiCountrySelector = class {
             this.selectPropertiesChanged(this.selectProperties);
         if (this.currentSelection)
             this.currentSelectionChanged(this.currentSelection);
+        this.internals.setFormValue(this.currentSelection ?? '');
     }
     componentDidLoad() {
         if (this.appendTo !== 'body')
@@ -263,12 +275,13 @@ const DropiCountrySelector = class {
         this.dropiChange.emit(country);
     }
     render() {
-        return (h("div", { key: '1a510a9b0aad889618ab94b7b54670fab1e56729', class: "custom-select" }, this.label && (h("label", { key: '3e86a64a1b3fe27708bc3a605d5de0dc0ef926ca' }, this.label, this.showObligatory && h("span", { key: 'af72e01e496a42d59d48d2c3c5eaba04a73e708c', class: "required" }, "*"))), h("button", { key: 'cbd2aa745610bffb96b507527c4fe88fd80cbbd1', type: "button", ref: (el) => { this.buttonRef = el; }, class: {
+        return (h("div", { key: '98292dbf6f84139b409cefe4690fb5ce834372c7', class: "custom-select" }, this.label && (h("label", { key: '7dd60d54e701108f7061623a89e8ff29edbb8dc6' }, this.label, this.showObligatory && h("span", { key: '971fd2a900d9ef4740a96145cadc948aab95232a', class: "required" }, "*"))), h("button", { key: '6c0067cfaf920160a4f8c05f59c34f3539540d29', type: "button", ref: (el) => { this.buttonRef = el; }, class: {
                 'select-button': true,
                 'select-completed': !!this.selected,
                 'select-invalid': this.hasError,
-            }, disabled: this.disabled, onClick: () => this.open() }, h("div", { key: 'b50e848e8689d2e1aacfef0213b25d9cc85782c0', class: "selected-content" }, this.selected ? (h("span", { class: "selected-option" }, h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (h("span", { class: "placeholder-text" }, this.placeholder))), h("dropi-icon", { key: '324a2e95d8fbb6ee25c434912e6b84005af3d4fe', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), h("ul", { key: 'f93d34cb715ea78dcb12242148cdb8dc143fbdbf', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, h("li", { key: '7100ecf3ca9ddfebbc7f5461614d3ae5e714f9a7', class: "search-li" }, h("div", { key: 'ca31fe6fa95231b0ac75e08bf96a97f28bc3f947', class: "search-field" }, h("input", { key: '6d07a808c8982991934351b2f9d9b96ef136b4b3', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), h("span", { key: '77c15e6a1d92bbfa570eca92f862a6a29f167c67', class: "search-icon" }, h("dropi-icon", { key: '8a49100954c335d09fbe418836c76037abd00e60', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (h("li", { key: country.code }, h("button", { class: "option", type: "button", onClick: () => this.select(country) }, h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (h("div", { key: '52089f00fe6c8ecc115a35068365f62a7328ecbe', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && h("dropi-icon", { key: '5272c813693f350a195990ae946ac50387b09723', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '7d74cd023b30b08753ea841ef1a1592497be9884' }, this.textHelper)))));
+            }, disabled: this.disabled, onClick: () => this.open() }, h("div", { key: 'b28c2c5b0de9b8052bb920a272b9dcc51f4eac6f', class: "selected-content" }, this.selected ? (h("span", { class: "selected-option" }, h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (h("span", { class: "placeholder-text" }, this.placeholder))), h("dropi-icon", { key: '2ec568b0ad4efdb3a22ffceb1e85fbc6f1d483e8', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), h("ul", { key: '34f0e5772ebb21e85cb246cbb91196d128d9ca59', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, h("li", { key: '77cdf81222a7c593f1d54198e2b897468db890a5', class: "search-li" }, h("div", { key: '970723feefd04adf0b113ae63931092f58d0264a', class: "search-field" }, h("input", { key: '294868580087dc1bdb04258ad84672f3d10e7ba7', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), h("span", { key: '02781dc595e568865ab5ae14aeed326b71b36e10', class: "search-icon" }, h("dropi-icon", { key: '0c06d5e5f26d2a2e5ec20967a2ebb9430397f3ea', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (h("li", { key: country.code }, h("button", { class: "option", type: "button", onClick: () => this.select(country) }, h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (h("div", { key: 'aae58bc17bbb6953a676818fe02da94b5a4e9f73', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && h("dropi-icon", { key: '7542ef4620499957711079c587f6cb650096f6d3', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: 'ea4c5cedd3b87444a90b4e210f7afa3a318a4832' }, this.textHelper)))));
     }
+    static get formAssociated() { return true; }
     static get watchers() { return {
         "currentSelection": [{
                 "currentSelectionChanged": 0

package/dist/dropi-ui/dropi-country-selector.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-country-selector.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-country-selector/dropi-country-selector.css?tag=dropi-country-selector&encapsulation=shadow","src/components/dropi-country-selector/dropi-country-selector.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  text-align: left;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.custom-select {\n  position: relative;\n  width: 100%;\n}\n\n/* ── Label ───────────────────────────────────────────────────────── */\nlabel {\n  display: block;\n  font-size: var(--font-size-xs, 11px);\n  font-weight: var(--font-weight-regular, 400);\n  color: var(--Gray-Gray-600, #475066);\n  margin-bottom: 6px;\n}\n\n.required {\n  color: var(--Error-Error-500, #ef4444);\n  margin-left: 2px;\n}\n\n/* ── Trigger button ──────────────────────────────────────────────── */\n.select-button {\n  width: 100%;\n  height: 44px;\n  padding: 0 12px;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  color: var(--Gray-Gray-500, #69738c);\n  font-size: var(--font-size-s, 14px);\n  font-family: inherit;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  text-align: left;\n  cursor: pointer;\n  transition: border-color 0.15s ease;\n}\n\n.select-button:focus {\n  outline: none;\n  border-color: var(--Info-Info-500, #3b82f6);\n}\n\n.select-button:disabled {\n  border-color: var(--Gray-Gray-200, #c3c9d9);\n  color: var(--Gray-Gray-400, #858ea6);\n  background: var(--Gray-Gray-50, #f7f8fa);\n  cursor: not-allowed;\n}\n\n.select-button.select-completed {\n  color: var(--Gray-Gray-700, #32394d);\n}\n\n.select-button.select-invalid {\n  border-color: var(--Error-Error-500, #ef4444);\n}\n\n.selected-content {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  overflow: hidden;\n  flex: 1;\n}\n\n.selected-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--Gray-Gray-700, #32394d);\n  font-size: var(--font-size-s, 14px);\n}\n\n.placeholder-text {\n  color: var(--Gray-Gray-400, #858ea6);\n  font-size: var(--font-size-s, 14px);\n}\n\n/* ── Flag ────────────────────────────────────────────────────────── */\n.flag-img {\n  border-radius: var(--Border-1, 4px);\n  width: 24px;\n  height: 24px;\n  object-fit: cover;\n  flex-shrink: 0;\n}\n\n/* ── Dropdown ────────────────────────────────────────────────────── */\n.select-dropdown {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  right: 0;\n  background: var(--Neutral-White, #ffffff);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  z-index: var(--dropi-z-index-overlay, 11000);\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);\n  overflow: hidden;\n  transition: max-height 0.2s ease, opacity 0.2s ease;\n}\n\n.select-dropdown.expanded {\n  max-height: 300px;\n  opacity: 1;\n  overflow-y: auto;\n}\n\n.select-dropdown.collapsed {\n  max-height: 0;\n  opacity: 0;\n  pointer-events: none;\n  border-color: transparent;\n  box-shadow: none;\n}\n\n/* Scrollbar — siempre claro, nunca negro */\n.select-dropdown::-webkit-scrollbar { width: 6px; }\n.select-dropdown::-webkit-scrollbar-track { background: transparent; }\n.select-dropdown::-webkit-scrollbar-thumb {\n  background: var(--Gray-Gray-200, #c3c9d9);\n  border-radius: 4px;\n}\n.select-dropdown::-webkit-scrollbar-thumb:hover {\n  background: var(--Gray-Gray-300, #a3abbf);\n}\n\n/* ── Search ──────────────────────────────────────────────────────── */\n.search-li {\n  padding: 10px 12px;\n  position: sticky;\n  top: 0;\n  background: var(--Neutral-White, #ffffff);\n  z-index: 1;\n  border-bottom: 1px solid var(--Gray-Gray-100, #e6eaf2);\n}\n\n.search-field {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.country-search {\n  width: 100%;\n  height: 36px;\n  padding: 0 36px 0 12px;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  outline: none;\n  font-size: var(--font-size-s, 14px);\n  font-family: inherit;\n  color: var(--Gray-Gray-700, #32394d);\n  background: var(--Gray-Gray-50, #f7f8fa);\n  transition: border-color 0.15s, background 0.15s;\n}\n\n.country-search:focus {\n  border-color: var(--Info-Info-500, #50a5f1);\n  background: var(--Neutral-White, #ffffff);\n}\n\n.country-search::placeholder {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.search-icon {\n  position: absolute;\n  right: 10px;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n/* ── Options ─────────────────────────────────────────────────────── */\n.option {\n  width: 100%;\n  min-height: 44px;\n  padding: 10px 16px;\n  border: none;\n  background: transparent;\n  text-align: left;\n  color: var(--Gray-Gray-700, #32394d);\n  font-size: var(--font-size-s, 14px);\n  font-family: inherit;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  transition: background 0.1s ease;\n  white-space: nowrap;\n}\n\n.option:hover {\n  background: var(--Gray-Gray-50, #f7f8fa);\n}\n","import { Component, Prop, Event, EventEmitter, State, Watch, h, Element, Listen } from '@stencil/core';\n\nconst PORTAL_CSS = `\n.select-dropdown {\n  background: #ffffff;\n  border: 1px solid #c3c9d9;\n  border-radius: 8px;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  box-shadow: 0 8px 24px rgba(0,0,0,.10);\n  overflow: hidden;\n  transition: max-height .2s ease, opacity .2s ease;\n  font-family: inherit;\n  font-size: 14px;\n}\n.select-dropdown.expanded { max-height: 300px; opacity: 1; overflow-y: auto; }\n.select-dropdown.collapsed { max-height: 0; opacity: 0; pointer-events: none; border-color: transparent; box-shadow: none; }\n.select-dropdown::-webkit-scrollbar { width: 6px; }\n.select-dropdown::-webkit-scrollbar-track { background: transparent; }\n.select-dropdown::-webkit-scrollbar-thumb { background: #c3c9d9; border-radius: 4px; }\n.search-li { padding: 10px 12px; position: sticky; top: 0; background: #ffffff; z-index: 1; border-bottom: 1px solid #e6eaf2; }\n.search-field { position: relative; display: flex; align-items: center; }\n.country-search { width: 100%; height: 36px; padding: 0 36px 0 12px; border: 1px solid #c3c9d9; border-radius: 8px; outline: none; font-size: 14px; font-family: inherit; color: #32394d; background: #f7f8fa; }\n.country-search:focus { border-color: #50a5f1; background: #ffffff; }\n.country-search::placeholder { color: #858ea6; }\n.search-icon { position: absolute; right: 10px; display: flex; align-items: center; pointer-events: none; }\n.option { width: 100%; min-height: 44px; padding: 10px 16px; border: none; background: transparent; text-align: left; color: #32394d; font-size: 14px; font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background .1s ease; white-space: nowrap; }\n.option:hover { background: #f7f8fa; }\n.flag-img { border-radius: 4px; width: 24px; height: 24px; object-fit: cover; flex-shrink: 0; }\n`;\n\nexport interface CountryItem {\n  name: string;\n  code: string;\n  codePhone: string;\n}\n\nconst COUNTRIES: CountryItem[] = [\n  { name: 'Afghanistan', code: 'AF', codePhone: '93' },\n  { name: 'Albania', code: 'AL', codePhone: '355' },\n  { name: 'Algeria', code: 'DZ', codePhone: '213' },\n  { name: 'Argentina', code: 'AR', codePhone: '54' },\n  { name: 'Australia', code: 'AU', codePhone: '61' },\n  { name: 'Austria', code: 'AT', codePhone: '43' },\n  { name: 'Azerbaijan', code: 'AZ', codePhone: '994' },\n  { name: 'Bahamas', code: 'BS', codePhone: '1242' },\n  { name: 'Bahrain', code: 'BH', codePhone: '973' },\n  { name: 'Bangladesh', code: 'BD', codePhone: '880' },\n  { name: 'Belgium', code: 'BE', codePhone: '32' },\n  { name: 'Bolivia', code: 'BO', codePhone: '591' },\n  { name: 'Brazil', code: 'BR', codePhone: '55' },\n  { name: 'Cambodia', code: 'KH', codePhone: '855' },\n  { name: 'Canada', code: 'CA', codePhone: '1' },\n  { name: 'Chile', code: 'CL', codePhone: '56' },\n  { name: 'China', code: 'CN', codePhone: '86' },\n  { name: 'Colombia', code: 'CO', codePhone: '57' },\n  { name: 'Costa Rica', code: 'CR', codePhone: '506' },\n  { name: 'Cuba', code: 'CU', codePhone: '53' },\n  { name: 'Czech Republic', code: 'CZ', codePhone: '420' },\n  { name: 'Denmark', code: 'DK', codePhone: '45' },\n  { name: 'Dominican Republic', code: 'DO', codePhone: '1' },\n  { name: 'Ecuador', code: 'EC', codePhone: '593' },\n  { name: 'Egypt', code: 'EG', codePhone: '20' },\n  { name: 'El Salvador', code: 'SV', codePhone: '503' },\n  { name: 'Estonia', code: 'EE', codePhone: '372' },\n  { name: 'Ethiopia', code: 'ET', codePhone: '251' },\n  { name: 'Finland', code: 'FI', codePhone: '358' },\n  { name: 'France', code: 'FR', codePhone: '33' },\n  { name: 'Germany', code: 'DE', codePhone: '49' },\n  { name: 'Ghana', code: 'GH', codePhone: '233' },\n  { name: 'Greece', code: 'GR', codePhone: '30' },\n  { name: 'Guatemala', code: 'GT', codePhone: '502' },\n  { name: 'Honduras', code: 'HN', codePhone: '504' },\n  { name: 'Hong Kong', code: 'HK', codePhone: '852' },\n  { name: 'Hungary', code: 'HU', codePhone: '36' },\n  { name: 'India', code: 'IN', codePhone: '91' },\n  { name: 'Indonesia', code: 'ID', codePhone: '62' },\n  { name: 'Iran, Islamic Republic Of', code: 'IR', codePhone: '98' },\n  { name: 'Iraq', code: 'IQ', codePhone: '964' },\n  { name: 'Ireland', code: 'IE', codePhone: '353' },\n  { name: 'Israel', code: 'IL', codePhone: '972' },\n  { name: 'Italy', code: 'IT', codePhone: '39' },\n  { name: 'Jamaica', code: 'JM', codePhone: '1876' },\n  { name: 'Japan', code: 'JP', codePhone: '81' },\n  { name: 'Jordan', code: 'JO', codePhone: '962' },\n  { name: 'Kazakhstan', code: 'KZ', codePhone: '7' },\n  { name: 'Kenya', code: 'KE', codePhone: '254' },\n  { name: 'Kuwait', code: 'KW', codePhone: '965' },\n  { name: 'Lebanon', code: 'LB', codePhone: '961' },\n  { name: 'Malaysia', code: 'MY', codePhone: '60' },\n  { name: 'Mexico', code: 'MX', codePhone: '52' },\n  { name: 'Morocco', code: 'MA', codePhone: '212' },\n  { name: 'Netherlands', code: 'NL', codePhone: '31' },\n  { name: 'New Zealand', code: 'NZ', codePhone: '64' },\n  { name: 'Nicaragua', code: 'NI', codePhone: '505' },\n  { name: 'Nigeria', code: 'NG', codePhone: '234' },\n  { name: 'Norway', code: 'NO', codePhone: '47' },\n  { name: 'Pakistan', code: 'PK', codePhone: '92' },\n  { name: 'Panama', code: 'PA', codePhone: '507' },\n  { name: 'Paraguay', code: 'PY', codePhone: '595' },\n  { name: 'Peru', code: 'PE', codePhone: '51' },\n  { name: 'Philippines', code: 'PH', codePhone: '63' },\n  { name: 'Poland', code: 'PL', codePhone: '48' },\n  { name: 'Portugal', code: 'PT', codePhone: '351' },\n  { name: 'Qatar', code: 'QA', codePhone: '974' },\n  { name: 'Romania', code: 'RO', codePhone: '40' },\n  { name: 'Russian Federation', code: 'RU', codePhone: '7' },\n  { name: 'Saudi Arabia', code: 'SA', codePhone: '966' },\n  { name: 'Singapore', code: 'SG', codePhone: '65' },\n  { name: 'South Africa', code: 'ZA', codePhone: '27' },\n  { name: 'Spain', code: 'ES', codePhone: '34' },\n  { name: 'Sri Lanka', code: 'LK', codePhone: '94' },\n  { name: 'Sweden', code: 'SE', codePhone: '46' },\n  { name: 'Switzerland', code: 'CH', codePhone: '41' },\n  { name: 'Taiwan, Province of China', code: 'TW', codePhone: '886' },\n  { name: 'Thailand', code: 'TH', codePhone: '66' },\n  { name: 'Tunisia', code: 'TN', codePhone: '216' },\n  { name: 'Turkey', code: 'TR', codePhone: '90' },\n  { name: 'Uganda', code: 'UG', codePhone: '256' },\n  { name: 'Ukraine', code: 'UA', codePhone: '380' },\n  { name: 'United Arab Emirates', code: 'AE', codePhone: '971' },\n  { name: 'United Kingdom', code: 'GB', codePhone: '44' },\n  { name: 'United States', code: 'US', codePhone: '1' },\n  { name: 'Uruguay', code: 'UY', codePhone: '598' },\n  { name: 'Venezuela', code: 'VE', codePhone: '58' },\n  { name: 'Viet Nam', code: 'VN', codePhone: '84' },\n  { name: 'Zimbabwe', code: 'ZW', codePhone: '263' },\n];\n\n/**\n * @component dropi-country-selector\n * Searchable country dropdown with flag images. Mirrors Angular dropi-country-selector.\n *\n * @example\n * <dropi-country-selector label=\"País\" placeholder=\"Selecciona un país\"></dropi-country-selector>\n */\n@Component({\n  tag: 'dropi-country-selector',\n  styleUrl: 'dropi-country-selector.css',\n  shadow: true,\n})\nexport class DropiCountrySelector {\n  /** Label above the select */\n  @Prop() label: string = '';\n  /** Placeholder when nothing is selected */\n  @Prop() placeholder: string = 'Selecciona un país';\n  /** Pre-selected country code (ISO 3166-1 alpha-2) */\n  @Prop({ mutable: true }) currentSelection: string = '';\n  /** Whether the selector is disabled */\n  @Prop() disabled: boolean = false;\n  /** Show asterisk for required field */\n  @Prop() showObligatory: boolean = false;\n  /** Show error border */\n  @Prop() hasError: boolean = false;\n  /** Helper text below the select */\n  @Prop() textHelper: string = '';\n  /** Search term for filtering (matches Angular `searchTerm`) */\n  @Prop({ mutable: true }) searchTerm: string = '';\n  /**\n   * Convenience object prop — matches Angular `selectProperties: SelectProperties`.\n   * When provided, its non-null fields override individual props.\n   */\n  @Prop() selectProperties: any = null;\n  /** When set to \"body\", the dropdown renders with fixed positioning to escape parent overflow clipping */\n  @Prop() appendTo: string = '';\n\n  /** Emitted when a country is selected. Detail is the CountryItem. */\n  @Event() dropiChange: EventEmitter<CountryItem>;\n\n  @State() private isOpen: boolean = false;\n  @State() private selected: CountryItem | null = null;\n\n  @Element() el!: HTMLElement;\n  private buttonRef?: HTMLButtonElement;\n  private portalContainer: HTMLDivElement | null = null;\n  private portalFocusedSelector: string | null = null;\n\n  @Listen('click', { target: 'document' })\n  handleDocClick(e: MouseEvent) {\n    if (!this.isOpen) return;\n    const path = e.composedPath();\n    if (path.includes(this.el)) return;\n    if (this.portalContainer && path.includes(this.portalContainer)) return;\n    this.isOpen = false;\n  }\n\n  private searchInputRef?: HTMLInputElement;\n\n  @Watch('currentSelection')\n  currentSelectionChanged(val: string) {\n    this.selected = COUNTRIES.find(c => c.code === val) || null;\n  }\n\n  @Watch('selectProperties')\n  selectPropertiesChanged(val: any) {\n    if (!val) return;\n    if (val.label !== undefined) this.label = val.label;\n    if (val.placeholder !== undefined) this.placeholder = val.placeholder;\n    if (val.showObligatory !== undefined) this.showObligatory = val.showObligatory;\n    if (val.textHelper !== undefined) this.textHelper = val.textHelper;\n    if (val.hasError !== undefined) this.hasError = val.hasError;\n  }\n\n  componentWillLoad() {\n    if (this.selectProperties) this.selectPropertiesChanged(this.selectProperties);\n    if (this.currentSelection) this.currentSelectionChanged(this.currentSelection);\n  }\n\n  componentDidLoad() {\n    if (this.appendTo !== 'body') return;\n    this.portalContainer = document.createElement('div');\n    const style = document.createElement('style');\n    style.textContent = PORTAL_CSS;\n    this.portalContainer.appendChild(style);\n    document.body.appendChild(this.portalContainer);\n  }\n\n  disconnectedCallback() {\n    this.returnUlToShadow();\n    this.portalContainer?.remove();\n    this.portalContainer = null;\n  }\n\n  componentWillRender() {\n    if (!this.portalContainer) return;\n    const active = document.activeElement;\n    if (active && this.portalContainer.contains(active)) {\n      this.portalFocusedSelector = '.' + Array.from((active as HTMLElement).classList).join('.');\n    }\n    this.returnUlToShadow();\n  }\n\n  componentDidRender() {\n    if (!this.portalContainer || !this.buttonRef) return;\n    const ul = this.el.shadowRoot?.querySelector('ul.select-dropdown') as HTMLUListElement;\n    if (!ul) return;\n    const rect = this.buttonRef.getBoundingClientRect();\n    ul.style.cssText = `position:fixed;top:${rect.bottom + 4}px;left:${rect.left}px;width:${rect.width}px;z-index:11000;`;\n    this.portalContainer.appendChild(ul);\n    if (this.portalFocusedSelector) {\n      const el = this.portalContainer.querySelector(this.portalFocusedSelector) as HTMLElement;\n      if (el) {\n        const len = (el as HTMLInputElement).value?.length ?? 0;\n        el.focus();\n        (el as HTMLInputElement).setSelectionRange?.(len, len);\n      }\n      this.portalFocusedSelector = null;\n    }\n  }\n\n  private returnUlToShadow() {\n    if (!this.portalContainer) return;\n    const ul = this.portalContainer.querySelector('ul.select-dropdown');\n    if (ul) this.el.shadowRoot?.querySelector('.custom-select')?.appendChild(ul);\n  }\n\n  private get filtered(): CountryItem[] {\n    if (!this.searchTerm) return COUNTRIES;\n    const t = this.searchTerm.toLowerCase();\n    return COUNTRIES.filter(c => c.name.toLowerCase().includes(t));\n  }\n\n  private open() {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) {\n      setTimeout(() => this.searchInputRef?.focus(), 50);\n    }\n  }\n\n  private select(country: CountryItem) {\n    this.selected = country;\n    this.isOpen = false;\n    this.searchTerm = '';\n    this.currentSelection = country.code;\n    this.dropiChange.emit(country);\n  }\n\n  render() {\n    return (\n      <div class=\"custom-select\">\n        {this.label && (\n          <label>\n            {this.label}\n            {this.showObligatory && <span class=\"required\">*</span>}\n          </label>\n        )}\n\n        <button\n          type=\"button\"\n          ref={(el) => { this.buttonRef = el as HTMLButtonElement; }}\n          class={{\n            'select-button': true,\n            'select-completed': !!this.selected,\n            'select-invalid': this.hasError,\n          }}\n          disabled={this.disabled}\n          onClick={() => this.open()}\n        >\n          <div class=\"selected-content\">\n            {this.selected ? (\n              <span class=\"selected-option\">\n                <img\n                  class=\"flag-img\"\n                  src={`https://flagsapi.com/${this.selected.code}/shiny/24.png`}\n                  alt={this.selected.name}\n                />\n                {this.selected.name}\n              </span>\n            ) : (\n              <span class=\"placeholder-text\">{this.placeholder}</span>\n            )}\n          </div>\n          <dropi-icon\n            name={this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2'}\n            iconWidth=\"20px\"\n            iconHeight=\"20px\"\n            color=\"Gray-Gray-500\"\n          />\n        </button>\n\n        <ul class={`select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}`}>\n          <li class=\"search-li\">\n            <div class=\"search-field\">\n              <input\n                ref={(el) => { this.searchInputRef = el; }}\n                type=\"text\"\n                class=\"country-search\"\n                placeholder=\"Buscar país...\"\n                value={this.searchTerm}\n                onInput={(e) => { this.searchTerm = (e.target as HTMLInputElement).value; }}\n              />\n              <span class=\"search-icon\">\n                <dropi-icon name=\"Search\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />\n              </span>\n            </div>\n          </li>\n          {this.filtered.map(country => (\n            <li key={country.code}>\n              <button class=\"option\" type=\"button\" onClick={() => this.select(country)}>\n                <img\n                  class=\"flag-img\"\n                  src={`https://flagsapi.com/${country.code}/shiny/24.png`}\n                  alt={country.name}\n                />\n                {country.name}\n              </button>\n            </li>\n          ))}\n        </ul>\n        {this.textHelper && (\n          <div class={{ 'select-helper': true, 'select-helper-error': this.hasError }}>\n            {this.hasError && <dropi-icon name=\"Warning-circle\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Error-Error-500\" />}\n            <span>{this.textHelper}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-country-selector.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-country-selector/dropi-country-selector.css?tag=dropi-country-selector&encapsulation=shadow","src/components/dropi-country-selector/dropi-country-selector.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  text-align: left;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.custom-select {\n  position: relative;\n  width: 100%;\n}\n\n/* ── Label ───────────────────────────────────────────────────────── */\nlabel {\n  display: block;\n  font-size: var(--font-size-xs, 11px);\n  font-weight: var(--font-weight-regular, 400);\n  color: var(--Gray-Gray-600, #475066);\n  margin-bottom: 6px;\n}\n\n.required {\n  color: var(--Error-Error-500, #ef4444);\n  margin-left: 2px;\n}\n\n/* ── Trigger button ──────────────────────────────────────────────── */\n.select-button {\n  width: 100%;\n  height: 44px;\n  padding: 0 12px;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  color: var(--Gray-Gray-500, #69738c);\n  font-size: var(--font-size-s, 14px);\n  font-family: inherit;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  text-align: left;\n  cursor: pointer;\n  transition: border-color 0.15s ease;\n}\n\n.select-button:focus {\n  outline: none;\n  border-color: var(--Info-Info-500, #3b82f6);\n}\n\n.select-button:disabled {\n  border-color: var(--Gray-Gray-200, #c3c9d9);\n  color: var(--Gray-Gray-400, #858ea6);\n  background: var(--Gray-Gray-50, #f7f8fa);\n  cursor: not-allowed;\n}\n\n.select-button.select-completed {\n  color: var(--Gray-Gray-700, #32394d);\n}\n\n.select-button.select-invalid {\n  border-color: var(--Error-Error-500, #ef4444);\n}\n\n.selected-content {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  overflow: hidden;\n  flex: 1;\n}\n\n.selected-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--Gray-Gray-700, #32394d);\n  font-size: var(--font-size-s, 14px);\n}\n\n.placeholder-text {\n  color: var(--Gray-Gray-400, #858ea6);\n  font-size: var(--font-size-s, 14px);\n}\n\n/* ── Flag ────────────────────────────────────────────────────────── */\n.flag-img {\n  border-radius: var(--Border-1, 4px);\n  width: 24px;\n  height: 24px;\n  object-fit: cover;\n  flex-shrink: 0;\n}\n\n/* ── Dropdown ────────────────────────────────────────────────────── */\n.select-dropdown {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  right: 0;\n  background: var(--Neutral-White, #ffffff);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  z-index: var(--dropi-z-index-overlay, 11000);\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);\n  overflow: hidden;\n  transition: max-height 0.2s ease, opacity 0.2s ease;\n}\n\n.select-dropdown.expanded {\n  max-height: 300px;\n  opacity: 1;\n  overflow-y: auto;\n}\n\n.select-dropdown.collapsed {\n  max-height: 0;\n  opacity: 0;\n  pointer-events: none;\n  border-color: transparent;\n  box-shadow: none;\n}\n\n/* Scrollbar — siempre claro, nunca negro */\n.select-dropdown::-webkit-scrollbar { width: 6px; }\n.select-dropdown::-webkit-scrollbar-track { background: transparent; }\n.select-dropdown::-webkit-scrollbar-thumb {\n  background: var(--Gray-Gray-200, #c3c9d9);\n  border-radius: 4px;\n}\n.select-dropdown::-webkit-scrollbar-thumb:hover {\n  background: var(--Gray-Gray-300, #a3abbf);\n}\n\n/* ── Search ──────────────────────────────────────────────────────── */\n.search-li {\n  padding: 10px 12px;\n  position: sticky;\n  top: 0;\n  background: var(--Neutral-White, #ffffff);\n  z-index: 1;\n  border-bottom: 1px solid var(--Gray-Gray-100, #e6eaf2);\n}\n\n.search-field {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.country-search {\n  width: 100%;\n  height: 36px;\n  padding: 0 36px 0 12px;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  outline: none;\n  font-size: var(--font-size-s, 14px);\n  font-family: inherit;\n  color: var(--Gray-Gray-700, #32394d);\n  background: var(--Gray-Gray-50, #f7f8fa);\n  transition: border-color 0.15s, background 0.15s;\n}\n\n.country-search:focus {\n  border-color: var(--Info-Info-500, #50a5f1);\n  background: var(--Neutral-White, #ffffff);\n}\n\n.country-search::placeholder {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.search-icon {\n  position: absolute;\n  right: 10px;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n/* ── Options ─────────────────────────────────────────────────────── */\n.option {\n  width: 100%;\n  min-height: 44px;\n  padding: 10px 16px;\n  border: none;\n  background: transparent;\n  text-align: left;\n  color: var(--Gray-Gray-700, #32394d);\n  font-size: var(--font-size-s, 14px);\n  font-family: inherit;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  transition: background 0.1s ease;\n  white-space: nowrap;\n}\n\n.option:hover {\n  background: var(--Gray-Gray-50, #f7f8fa);\n}\n","import { Component, Prop, Event, EventEmitter, State, Watch, h, Element, Listen, AttachInternals } from '@stencil/core';\n\nconst PORTAL_CSS = `\n.select-dropdown {\n  background: #ffffff;\n  border: 1px solid #c3c9d9;\n  border-radius: 8px;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  box-shadow: 0 8px 24px rgba(0,0,0,.10);\n  overflow: hidden;\n  transition: max-height .2s ease, opacity .2s ease;\n  font-family: inherit;\n  font-size: 14px;\n}\n.select-dropdown.expanded { max-height: 300px; opacity: 1; overflow-y: auto; }\n.select-dropdown.collapsed { max-height: 0; opacity: 0; pointer-events: none; border-color: transparent; box-shadow: none; }\n.select-dropdown::-webkit-scrollbar { width: 6px; }\n.select-dropdown::-webkit-scrollbar-track { background: transparent; }\n.select-dropdown::-webkit-scrollbar-thumb { background: #c3c9d9; border-radius: 4px; }\n.search-li { padding: 10px 12px; position: sticky; top: 0; background: #ffffff; z-index: 1; border-bottom: 1px solid #e6eaf2; }\n.search-field { position: relative; display: flex; align-items: center; }\n.country-search { width: 100%; height: 36px; padding: 0 36px 0 12px; border: 1px solid #c3c9d9; border-radius: 8px; outline: none; font-size: 14px; font-family: inherit; color: #32394d; background: #f7f8fa; }\n.country-search:focus { border-color: #50a5f1; background: #ffffff; }\n.country-search::placeholder { color: #858ea6; }\n.search-icon { position: absolute; right: 10px; display: flex; align-items: center; pointer-events: none; }\n.option { width: 100%; min-height: 44px; padding: 10px 16px; border: none; background: transparent; text-align: left; color: #32394d; font-size: 14px; font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background .1s ease; white-space: nowrap; }\n.option:hover { background: #f7f8fa; }\n.flag-img { border-radius: 4px; width: 24px; height: 24px; object-fit: cover; flex-shrink: 0; }\n`;\n\nexport interface CountryItem {\n  name: string;\n  code: string;\n  codePhone: string;\n}\n\nconst COUNTRIES: CountryItem[] = [\n  { name: 'Afghanistan', code: 'AF', codePhone: '93' },\n  { name: 'Albania', code: 'AL', codePhone: '355' },\n  { name: 'Algeria', code: 'DZ', codePhone: '213' },\n  { name: 'Argentina', code: 'AR', codePhone: '54' },\n  { name: 'Australia', code: 'AU', codePhone: '61' },\n  { name: 'Austria', code: 'AT', codePhone: '43' },\n  { name: 'Azerbaijan', code: 'AZ', codePhone: '994' },\n  { name: 'Bahamas', code: 'BS', codePhone: '1242' },\n  { name: 'Bahrain', code: 'BH', codePhone: '973' },\n  { name: 'Bangladesh', code: 'BD', codePhone: '880' },\n  { name: 'Belgium', code: 'BE', codePhone: '32' },\n  { name: 'Bolivia', code: 'BO', codePhone: '591' },\n  { name: 'Brazil', code: 'BR', codePhone: '55' },\n  { name: 'Cambodia', code: 'KH', codePhone: '855' },\n  { name: 'Canada', code: 'CA', codePhone: '1' },\n  { name: 'Chile', code: 'CL', codePhone: '56' },\n  { name: 'China', code: 'CN', codePhone: '86' },\n  { name: 'Colombia', code: 'CO', codePhone: '57' },\n  { name: 'Costa Rica', code: 'CR', codePhone: '506' },\n  { name: 'Cuba', code: 'CU', codePhone: '53' },\n  { name: 'Czech Republic', code: 'CZ', codePhone: '420' },\n  { name: 'Denmark', code: 'DK', codePhone: '45' },\n  { name: 'Dominican Republic', code: 'DO', codePhone: '1' },\n  { name: 'Ecuador', code: 'EC', codePhone: '593' },\n  { name: 'Egypt', code: 'EG', codePhone: '20' },\n  { name: 'El Salvador', code: 'SV', codePhone: '503' },\n  { name: 'Estonia', code: 'EE', codePhone: '372' },\n  { name: 'Ethiopia', code: 'ET', codePhone: '251' },\n  { name: 'Finland', code: 'FI', codePhone: '358' },\n  { name: 'France', code: 'FR', codePhone: '33' },\n  { name: 'Germany', code: 'DE', codePhone: '49' },\n  { name: 'Ghana', code: 'GH', codePhone: '233' },\n  { name: 'Greece', code: 'GR', codePhone: '30' },\n  { name: 'Guatemala', code: 'GT', codePhone: '502' },\n  { name: 'Honduras', code: 'HN', codePhone: '504' },\n  { name: 'Hong Kong', code: 'HK', codePhone: '852' },\n  { name: 'Hungary', code: 'HU', codePhone: '36' },\n  { name: 'India', code: 'IN', codePhone: '91' },\n  { name: 'Indonesia', code: 'ID', codePhone: '62' },\n  { name: 'Iran, Islamic Republic Of', code: 'IR', codePhone: '98' },\n  { name: 'Iraq', code: 'IQ', codePhone: '964' },\n  { name: 'Ireland', code: 'IE', codePhone: '353' },\n  { name: 'Israel', code: 'IL', codePhone: '972' },\n  { name: 'Italy', code: 'IT', codePhone: '39' },\n  { name: 'Jamaica', code: 'JM', codePhone: '1876' },\n  { name: 'Japan', code: 'JP', codePhone: '81' },\n  { name: 'Jordan', code: 'JO', codePhone: '962' },\n  { name: 'Kazakhstan', code: 'KZ', codePhone: '7' },\n  { name: 'Kenya', code: 'KE', codePhone: '254' },\n  { name: 'Kuwait', code: 'KW', codePhone: '965' },\n  { name: 'Lebanon', code: 'LB', codePhone: '961' },\n  { name: 'Malaysia', code: 'MY', codePhone: '60' },\n  { name: 'Mexico', code: 'MX', codePhone: '52' },\n  { name: 'Morocco', code: 'MA', codePhone: '212' },\n  { name: 'Netherlands', code: 'NL', codePhone: '31' },\n  { name: 'New Zealand', code: 'NZ', codePhone: '64' },\n  { name: 'Nicaragua', code: 'NI', codePhone: '505' },\n  { name: 'Nigeria', code: 'NG', codePhone: '234' },\n  { name: 'Norway', code: 'NO', codePhone: '47' },\n  { name: 'Pakistan', code: 'PK', codePhone: '92' },\n  { name: 'Panama', code: 'PA', codePhone: '507' },\n  { name: 'Paraguay', code: 'PY', codePhone: '595' },\n  { name: 'Peru', code: 'PE', codePhone: '51' },\n  { name: 'Philippines', code: 'PH', codePhone: '63' },\n  { name: 'Poland', code: 'PL', codePhone: '48' },\n  { name: 'Portugal', code: 'PT', codePhone: '351' },\n  { name: 'Qatar', code: 'QA', codePhone: '974' },\n  { name: 'Romania', code: 'RO', codePhone: '40' },\n  { name: 'Russian Federation', code: 'RU', codePhone: '7' },\n  { name: 'Saudi Arabia', code: 'SA', codePhone: '966' },\n  { name: 'Singapore', code: 'SG', codePhone: '65' },\n  { name: 'South Africa', code: 'ZA', codePhone: '27' },\n  { name: 'Spain', code: 'ES', codePhone: '34' },\n  { name: 'Sri Lanka', code: 'LK', codePhone: '94' },\n  { name: 'Sweden', code: 'SE', codePhone: '46' },\n  { name: 'Switzerland', code: 'CH', codePhone: '41' },\n  { name: 'Taiwan, Province of China', code: 'TW', codePhone: '886' },\n  { name: 'Thailand', code: 'TH', codePhone: '66' },\n  { name: 'Tunisia', code: 'TN', codePhone: '216' },\n  { name: 'Turkey', code: 'TR', codePhone: '90' },\n  { name: 'Uganda', code: 'UG', codePhone: '256' },\n  { name: 'Ukraine', code: 'UA', codePhone: '380' },\n  { name: 'United Arab Emirates', code: 'AE', codePhone: '971' },\n  { name: 'United Kingdom', code: 'GB', codePhone: '44' },\n  { name: 'United States', code: 'US', codePhone: '1' },\n  { name: 'Uruguay', code: 'UY', codePhone: '598' },\n  { name: 'Venezuela', code: 'VE', codePhone: '58' },\n  { name: 'Viet Nam', code: 'VN', codePhone: '84' },\n  { name: 'Zimbabwe', code: 'ZW', codePhone: '263' },\n];\n\n/**\n * @component dropi-country-selector\n * Searchable country dropdown with flag images. Mirrors Angular dropi-country-selector.\n *\n * @example\n * <dropi-country-selector label=\"País\" placeholder=\"Selecciona un país\"></dropi-country-selector>\n */\n@Component({\n  tag: 'dropi-country-selector',\n  styleUrl: 'dropi-country-selector.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiCountrySelector {\n  @AttachInternals() internals: ElementInternals;\n\n  /** Name for native form submission */\n  @Prop({ reflect: true }) name: string = '';\n\n  /** Label above the select */\n  @Prop() label: string = '';\n  /** Placeholder when nothing is selected */\n  @Prop() placeholder: string = 'Selecciona un país';\n  /** Pre-selected country code (ISO 3166-1 alpha-2) */\n  @Prop({ mutable: true }) currentSelection: string = '';\n  /** Whether the selector is disabled */\n  @Prop() disabled: boolean = false;\n  /** Show asterisk for required field */\n  @Prop() showObligatory: boolean = false;\n  /** Show error border */\n  @Prop() hasError: boolean = false;\n  /** Helper text below the select */\n  @Prop() textHelper: string = '';\n  /** Search term for filtering (matches Angular `searchTerm`) */\n  @Prop({ mutable: true }) searchTerm: string = '';\n  /**\n   * Convenience object prop — matches Angular `selectProperties: SelectProperties`.\n   * When provided, its non-null fields override individual props.\n   */\n  @Prop() selectProperties: any = null;\n  /** When set to \"body\", the dropdown renders with fixed positioning to escape parent overflow clipping */\n  @Prop() appendTo: string = '';\n\n  /** Emitted when a country is selected. Detail is the CountryItem. */\n  @Event() dropiChange: EventEmitter<CountryItem>;\n\n  @State() private isOpen: boolean = false;\n  @State() private selected: CountryItem | null = null;\n\n  @Element() el!: HTMLElement;\n  private buttonRef?: HTMLButtonElement;\n  private portalContainer: HTMLDivElement | null = null;\n  private portalFocusedSelector: string | null = null;\n\n  @Listen('click', { target: 'document' })\n  handleDocClick(e: MouseEvent) {\n    if (!this.isOpen) return;\n    const path = e.composedPath();\n    if (path.includes(this.el)) return;\n    if (this.portalContainer && path.includes(this.portalContainer)) return;\n    this.isOpen = false;\n  }\n\n  private searchInputRef?: HTMLInputElement;\n\n  @Watch('currentSelection')\n  currentSelectionChanged(val: string) {\n    this.selected = COUNTRIES.find(c => c.code === val) || null;\n    this.internals.setFormValue(val);\n  }\n\n\n  @Watch('selectProperties')\n  selectPropertiesChanged(val: any) {\n    if (!val) return;\n    if (val.label !== undefined) this.label = val.label;\n    if (val.placeholder !== undefined) this.placeholder = val.placeholder;\n    if (val.showObligatory !== undefined) this.showObligatory = val.showObligatory;\n    if (val.textHelper !== undefined) this.textHelper = val.textHelper;\n    if (val.hasError !== undefined) this.hasError = val.hasError;\n  }\n\n  componentWillLoad() {\n    if (this.selectProperties) this.selectPropertiesChanged(this.selectProperties);\n    if (this.currentSelection) this.currentSelectionChanged(this.currentSelection);\n    this.internals.setFormValue(this.currentSelection ?? '');\n  }\n\n\n  componentDidLoad() {\n    if (this.appendTo !== 'body') return;\n    this.portalContainer = document.createElement('div');\n    const style = document.createElement('style');\n    style.textContent = PORTAL_CSS;\n    this.portalContainer.appendChild(style);\n    document.body.appendChild(this.portalContainer);\n  }\n\n  disconnectedCallback() {\n    this.returnUlToShadow();\n    this.portalContainer?.remove();\n    this.portalContainer = null;\n  }\n\n  componentWillRender() {\n    if (!this.portalContainer) return;\n    const active = document.activeElement;\n    if (active && this.portalContainer.contains(active)) {\n      this.portalFocusedSelector = '.' + Array.from((active as HTMLElement).classList).join('.');\n    }\n    this.returnUlToShadow();\n  }\n\n  componentDidRender() {\n    if (!this.portalContainer || !this.buttonRef) return;\n    const ul = this.el.shadowRoot?.querySelector('ul.select-dropdown') as HTMLUListElement;\n    if (!ul) return;\n    const rect = this.buttonRef.getBoundingClientRect();\n    ul.style.cssText = `position:fixed;top:${rect.bottom + 4}px;left:${rect.left}px;width:${rect.width}px;z-index:11000;`;\n    this.portalContainer.appendChild(ul);\n    if (this.portalFocusedSelector) {\n      const el = this.portalContainer.querySelector(this.portalFocusedSelector) as HTMLElement;\n      if (el) {\n        const len = (el as HTMLInputElement).value?.length ?? 0;\n        el.focus();\n        (el as HTMLInputElement).setSelectionRange?.(len, len);\n      }\n      this.portalFocusedSelector = null;\n    }\n  }\n\n  private returnUlToShadow() {\n    if (!this.portalContainer) return;\n    const ul = this.portalContainer.querySelector('ul.select-dropdown');\n    if (ul) this.el.shadowRoot?.querySelector('.custom-select')?.appendChild(ul);\n  }\n\n  private get filtered(): CountryItem[] {\n    if (!this.searchTerm) return COUNTRIES;\n    const t = this.searchTerm.toLowerCase();\n    return COUNTRIES.filter(c => c.name.toLowerCase().includes(t));\n  }\n\n  private open() {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) {\n      setTimeout(() => this.searchInputRef?.focus(), 50);\n    }\n  }\n\n  private select(country: CountryItem) {\n    this.selected = country;\n    this.isOpen = false;\n    this.searchTerm = '';\n    this.currentSelection = country.code;\n    this.dropiChange.emit(country);\n  }\n\n  render() {\n    return (\n      <div class=\"custom-select\">\n        {this.label && (\n          <label>\n            {this.label}\n            {this.showObligatory && <span class=\"required\">*</span>}\n          </label>\n        )}\n\n        <button\n          type=\"button\"\n          ref={(el) => { this.buttonRef = el as HTMLButtonElement; }}\n          class={{\n            'select-button': true,\n            'select-completed': !!this.selected,\n            'select-invalid': this.hasError,\n          }}\n          disabled={this.disabled}\n          onClick={() => this.open()}\n        >\n          <div class=\"selected-content\">\n            {this.selected ? (\n              <span class=\"selected-option\">\n                <img\n                  class=\"flag-img\"\n                  src={`https://flagsapi.com/${this.selected.code}/shiny/24.png`}\n                  alt={this.selected.name}\n                />\n                {this.selected.name}\n              </span>\n            ) : (\n              <span class=\"placeholder-text\">{this.placeholder}</span>\n            )}\n          </div>\n          <dropi-icon\n            name={this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2'}\n            iconWidth=\"20px\"\n            iconHeight=\"20px\"\n            color=\"Gray-Gray-500\"\n          />\n        </button>\n\n        <ul class={`select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}`}>\n          <li class=\"search-li\">\n            <div class=\"search-field\">\n              <input\n                ref={(el) => { this.searchInputRef = el; }}\n                type=\"text\"\n                class=\"country-search\"\n                placeholder=\"Buscar país...\"\n                value={this.searchTerm}\n                onInput={(e) => { this.searchTerm = (e.target as HTMLInputElement).value; }}\n              />\n              <span class=\"search-icon\">\n                <dropi-icon name=\"Search\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />\n              </span>\n            </div>\n          </li>\n          {this.filtered.map(country => (\n            <li key={country.code}>\n              <button class=\"option\" type=\"button\" onClick={() => this.select(country)}>\n                <img\n                  class=\"flag-img\"\n                  src={`https://flagsapi.com/${country.code}/shiny/24.png`}\n                  alt={country.name}\n                />\n                {country.name}\n              </button>\n            </li>\n          ))}\n        </ul>\n        {this.textHelper && (\n          <div class={{ 'select-helper': true, 'select-helper-error': this.hasError }}>\n            {this.hasError && <dropi-icon name=\"Warning-circle\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Error-Error-500\" />}\n            <span>{this.textHelper}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-date-picker.entry.js

@@ -13,13 +13,26 @@ const DropiDatePicker = class {
         this.dropiChangeDate = createEvent(this, "dropiChangeDate", 7);
         this.dropiClosePanel = createEvent(this, "dropiClosePanel", 7);
         this.dropiRangeChange = createEvent(this, "dropiRangeChange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
+    internals;
+    /** Name for native form submission */
+    name = '';
     /** Selected date (ISO string, single mode) - matches Angular 'selectedDate' */
     selectedDate = '';
     /** Range start date (ISO string, range mode) */
     startDate = '';
     /** Range end date (ISO string, range mode) */
     endDate = '';
+    valueChanged() {
+        this.updateFormValue();
+    }
     /** Enable range selection - matches Angular selectionMode */
     selectionMode = 'single';
     /** Min selectable date (ISO string) */
@@ -52,6 +65,17 @@ const DropiDatePicker = class {
     dropiClosePanel;
     /** Emitted when range selected */
     dropiRangeChange;
+    componentWillLoad() {
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        if (this.selectionMode === 'range') {
+            this.internals.setFormValue(this.startDate && this.endDate ? `${this.startDate},${this.endDate}` : '');
+        }
+        else {
+            this.internals.setFormValue(this.selectedDate || '');
+        }
+    }
     get displayValue() {
         if (this.selectionMode === 'range') {
             if (this.startDate && this.endDate)
@@ -171,12 +195,12 @@ const DropiDatePicker = class {
     render() {
         const days = this.buildDays();
         const today = new Date().toISOString().slice(0, 10);
-        return (h("div", { key: '0c3cb89d77d6d8e7d3f955354d6be4b7a1f507fb', class: "dp-wrap" }, this.label && h("label", { key: '672ad3d08337ed0df7c7e7d582ba8fe5af8d2b23', class: "dp-label" }, this.label), h("button", { key: '848428a5ce236b37e8e988223c9ef8bd91ea16b3', class: {
+        return (h("div", { key: '97a96b56b0e8ae551f747bad4a3459a1f4945411', class: "dp-wrap" }, this.label && h("label", { key: 'a1792032ab9ae2dbe574f50b7a537df687eae40c', class: "dp-label" }, this.label), h("button", { key: '4237c2b988f1e9fbaa77dc2a989964216e3fe902', class: {
                 'dp-trigger': true,
                 'dp-trigger--disabled': this.disabled,
                 'dp-trigger--invalid': this.isInvalid,
                 'dp-trigger--loading': this.loading
-            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, h("dropi-icon", { key: 'c51b9238996ec454f64f53d4e9ede35bf494fd95', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("span", { key: 'b34ed963710695296a2986b0e790457b90a3ee60', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { key: '8cbefce39dab39a5cba941f4538f46cf97db1c06', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: '36a5db42655b136cee1abf31bb5e206a6d118beb', class: "dp-popup" }, h("div", { key: '456c2778f035fae19450841baa20df5092f6dca4', class: "dp-nav" }, h("button", { key: '8f05a6aa4e1f4e0dda08ee9dad89f189c130eef0', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { key: '41f4e9b157e56669fa179cfed62d960ff1eadfd6', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), h("span", { key: '53556f3a356e1d2b63b59d4edda40ddf5fda9e5f', class: "dp-nav__title" }, h("span", { key: '4bad1d735d4235b2ddaac33f3fa8f6335e753984' }, MONTHS_ES[this.viewMonth]), h("span", { key: 'c7af6bb7edc5dead7751c65ee024485aa2a6cf65' }, this.viewYear)), h("button", { key: '5ff7b70b69732c01ae7a45c7b65336982ea6eed8', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { key: '718725e17a530de4e8081c97e639342ff7fd9a96', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), h("div", { key: 'd3d899342a15a9a0f2b508dbd39945831ebbad0d', class: "dp-grid" }, DAYS_ES.map(d => (h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
+            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, h("dropi-icon", { key: '39591fedb92b92e6507b564fc8c145711f1a21b1', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("span", { key: '305e3f81d64c01603687d53edc59e1d19ef06c3c', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { key: '13feb346ad7b07a7e2f208e299f62a8261a97655', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: '4cdf8a69422a0b54d0f7c1a6711a683dab7d1f34', class: "dp-popup" }, h("div", { key: '0c6fb31094003c66c5b471e738dd75e7b865401f', class: "dp-nav" }, h("button", { key: '4fa24f9450cf6c5e888cea374619e14245c0c005', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { key: '2196f85700b252d4f83536f11ed197c083fc45ec', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), h("span", { key: '01619de7c5218b506f75234745f3184af813a491', class: "dp-nav__title" }, h("span", { key: '8074e7deeb6c102bad7f1911739e785187783a7c' }, MONTHS_ES[this.viewMonth]), h("span", { key: '69e9c3b41361e293a843f911b5bcf4690995d2b4' }, this.viewYear)), h("button", { key: '51c0ad3da96835736170fbf94338fd70c942c3d2', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { key: '24eb4385639c9a71f5312f32b33b36593c2b0259', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), h("div", { key: 'c18cecd81af38b3a6f23402501011c09b8b453d7', class: "dp-grid" }, DAYS_ES.map(d => (h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
             const isSelected = this.selectionMode !== 'range'
                 ? iso === this.selectedDate
                 : iso === this.startDate || iso === this.endDate;
@@ -198,12 +222,12 @@ const DropiDatePicker = class {
                     if (this.selectionMode === 'range' && this.startDate && !this.endDate)
                         this.hoverDate = iso;
                 }, onMouseLeave: () => this.hoverDate = '' }, day));
-        })), h("div", { key: '84c799762393b9de0161795f20188a680490d4d8', class: "dp-footer" }, h("button", { key: '4696558b1be6bf8abe8461f341c129c640af46ce', class: "dp-footer__clear", type: "button", onClick: () => {
+        })), h("div", { key: '594f280cb269c32ac3a129401e13b710af1a7c7e', class: "dp-footer" }, h("button", { key: '6028ef84bc17f0d1bb0fd587a991698a8fc69338', class: "dp-footer__clear", type: "button", onClick: () => {
                 this.selectedDate = '';
                 this.startDate = '';
                 this.endDate = '';
                 this.open = false;
-            } }, "Limpiar"), h("button", { key: 'a87f6f92fa10829560d223835e70fd2951edc482', class: "dp-footer__today", type: "button", onClick: () => {
+            } }, "Limpiar"), h("button", { key: 'ab01840a18d657621205d4fba69cc53feb474d11', class: "dp-footer__today", type: "button", onClick: () => {
                 if (this.selectionMode !== 'range') {
                     this.selectedDate = today;
                     this.open = false;
@@ -215,6 +239,18 @@ const DropiDatePicker = class {
                 }
             } }, "Hoy"))))));
     }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "selectedDate": [{
+                "valueChanged": 0
+            }],
+        "startDate": [{
+                "valueChanged": 0
+            }],
+        "endDate": [{
+                "valueChanged": 0
+            }]
+    }; }
 };
 DropiDatePicker.style = dropiDatePickerCss();
 

package/dist/dropi-ui/dropi-date-picker.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-date-picker.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-date-picker/dropi-date-picker.css?tag=dropi-date-picker&encapsulation=shadow","src/components/dropi-date-picker/dropi-date-picker.tsx"],"sourcesContent":[":host { display: block; width: 100%; position: relative; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.dp-label {\n  display: block;\n  font-size: var(--font-size-xxs, 10px);\n  color: var(--Gray-Gray-600, #475066);\n  margin-bottom: 4px;\n}\n\n/* Trigger */\n.dp-trigger {\n  width: 100%;\n  height: 44px;\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  padding: 0 var(--Size-3, 12px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  cursor: pointer;\n  font-family: inherit;\n  transition: border-color 0.2s;\n}\n.dp-trigger:hover:not(:disabled) { border-color: var(--Info-Info-500, #50a5f1); }\n.dp-trigger--disabled { background: var(--Gray-Gray-50, #f7f8fa); cursor: not-allowed; opacity: 0.6; }\n\n.dp-trigger__value {\n  flex: 1;\n  text-align: left;\n  font-size: var(--font-size-xs, 12px);\n  color: var(--Gray-Gray-700, #32394d);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dp-trigger__placeholder { color: var(--Gray-Gray-400, #858ea6); }\n\n/* Popup */\n.dp-popup {\n  position: absolute;\n  top: calc(100% + 8px);\n  left: 0;\n  width: 320px;\n  background: var(--Neutral-White, #ffffff);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-3, 12px);\n  box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n  z-index: 300;\n  padding: var(--Size-4, 16px);\n}\n\n/* Navigation */\n.dp-nav {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: var(--Size-4, 16px);\n}\n\n.dp-nav__btn {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  transition: background 0.15s;\n}\n.dp-nav__btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n\n.dp-nav__title {\n  font-size: var(--font-size-s, 14px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Gray-Gray-700, #32394d);\n  display: flex;\n  gap: 8px;\n}\n\n/* Grid */\n.dp-grid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  row-gap: 8px;\n  column-gap: 4px;\n}\n\n.dp-day-header {\n  font-size: var(--font-size-s, 14px);\n  color: var(--Gray-Gray-700, #32394d);\n  text-align: center;\n  padding: 8px 0;\n  font-weight: var(--font-weight-bold, 700);\n}\n\n/* Day cells */\n.dp-cell {\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--font-size-xs, 12px);\n  font-family: inherit;\n  border: none;\n  cursor: pointer;\n  background: transparent;\n  color: var(--Gray-Gray-600, #475066);\n  width: 100%;\n  position: relative;\n  z-index: 1;\n  padding: 0;\n}\n\n/* Pseudo-element for the circle (selected / hover / today) */\n.dp-cell::after {\n  content: \"\";\n  position: absolute;\n  top: 0; left: 0; right: 0; bottom: 0;\n  border-radius: 50%;\n  transition: all 0.2s;\n  z-index: -1;\n  background: transparent;\n}\n\n/* Pseudo-element for the continuous light-orange range background */\n.dp-cell::before {\n  content: \"\";\n  position: absolute;\n  top: 0; bottom: 0;\n  z-index: -2;\n  border-radius: 0;\n  background: transparent;\n}\n\n.dp-cell:hover:not(:disabled)::after {\n  background: var(--Gray-Gray-100, #e6eaf2);\n}\n\n.dp-cell--other-month { color: var(--Gray-Gray-300, #a0a9c0); }\n\n.dp-cell--today {\n  font-weight: var(--font-weight-bold, 700);\n}\n.dp-cell--today::after {\n  background: var(--Gray-Gray-100, #e6eaf2);\n}\n\n.dp-cell--selected {\n  color: var(--Neutral-White, #ffffff);\n  font-weight: var(--font-weight-bold, 700);\n}\n.dp-cell--selected::after {\n  background: var(--Orange-orange-500, #f49a3d) !important;\n}\n\n/* Range modes */\n.dp-cell--range-start, .dp-cell--range-end {\n  color: var(--Neutral-White, #ffffff);\n  font-weight: var(--font-weight-bold, 700);\n}\n.dp-cell--range-start::after, .dp-cell--range-end::after {\n  background: var(--Orange-orange-500, #f49a3d) !important;\n}\n\n.dp-cell--in-range {\n  color: var(--Orange-orange-500, #f49a3d);\n  font-weight: var(--font-weight-bold, 700);\n}\n.dp-cell--in-range::before {\n  left: -2px; right: -2px;\n  background: var(--Orange-orange-50, #fef5ec);\n}\n.dp-cell--range-start::before {\n  left: 50%; right: -2px;\n  background: var(--Orange-orange-50, #fef5ec);\n}\n.dp-cell--range-end::before {\n  left: -2px; right: 50%;\n  background: var(--Orange-orange-50, #fef5ec);\n}\n.dp-cell--range-start.dp-cell--range-end::before {\n  background: transparent;\n}\n\n.dp-cell--disabled { opacity: 0.35; cursor: not-allowed; }\n\n/* Footer */\n.dp-footer {\n  display: flex;\n  justify-content: space-between;\n  margin-top: var(--Size-3, 12px);\n  border-top: 1px solid var(--Gray-Gray-100, #e6eaf2);\n  padding-top: var(--Size-2, 8px);\n}\n\n.dp-footer__clear,\n.dp-footer__today {\n  background: none;\n  border: none;\n  padding: 4px 8px;\n  font-size: var(--font-size-xxs, 10px);\n  font-family: inherit;\n  cursor: pointer;\n  border-radius: var(--Border-1, 4px);\n  transition: background 0.15s;\n}\n.dp-footer__clear { color: var(--Gray-Gray-500, #69738c); }\n.dp-footer__today { color: var(--Orange-orange-500, #f49a3d); font-weight: var(--font-weight-bold, 700); }\n.dp-footer__clear:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n.dp-footer__today:hover { background: var(--Orange-orange-50, #fef5ec); }\n","import { Component, Prop, State, Event, EventEmitter, h, Element, Listen } from '@stencil/core';\n\nconst MONTHS_ES = [\n  'Enero','Febrero','Marzo','Abril','Mayo','Junio',\n  'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'\n];\nconst DAYS_ES = ['Do','Lu','Ma','Mi','Ju','Vi','Sa'];\n\n/**\n * @component dropi-date-picker\n * Calendar date picker with optional date range mode.\n * Emits ISO date strings (YYYY-MM-DD).\n */\n@Component({\n  tag: 'dropi-date-picker',\n  styleUrl: 'dropi-date-picker.css',\n  shadow: true,\n})\nexport class DropiDatePicker {\n  /** Selected date (ISO string, single mode) - matches Angular 'selectedDate' */\n  @Prop({ mutable: true }) selectedDate: string = '';\n  /** Range start date (ISO string, range mode) */\n  @Prop({ mutable: true }) startDate: string = '';\n  /** Range end date (ISO string, range mode) */\n  @Prop({ mutable: true }) endDate: string = '';\n  /** Enable range selection - matches Angular selectionMode */\n  @Prop() selectionMode: 'single' | 'range' = 'single';\n  /** Min selectable date (ISO string) */\n  @Prop() minDate: string = '';\n  /** Max selectable date (ISO string) */\n  @Prop() maxDate: string = '';\n  /** Label */\n  @Prop() label: string | null = null;\n  /** Placeholder */\n  @Prop() placeholder: string = 'DD/MM/YYYY';\n  /** Disabled */\n  @Prop() disabled: boolean = false;\n  /** Is invalid state - matches Angular */\n  @Prop() isInvalid: boolean = false;\n  /** Loading state - matches Angular */\n  @Prop() loading: boolean = false;\n\n  @State() private open: boolean = false;\n  @State() private viewYear: number = new Date().getFullYear();\n  @State() private viewMonth: number = new Date().getMonth();\n  @State() private hoverDate: string = '';\n\n  @Element() el!: HTMLElement;\n\n  @Listen('click', { target: 'document' })\n  handleDocClick(e: MouseEvent) {\n    if (this.open && !e.composedPath().includes(this.el)) {\n      this.open = false;\n    }\n  }\n\n  /** Emitted when date selected — matches Angular 'onChangeDate' */\n  @Event() dropiChangeDate: EventEmitter<string>;\n  /** Emitted when panel closes — matches Angular 'onClosePanel' */\n  @Event() dropiClosePanel: EventEmitter<void>;\n  /** Emitted when range selected */\n  @Event() dropiRangeChange: EventEmitter<{ start: string; end: string }>;\n\n  private get displayValue(): string {\n    if (this.selectionMode === 'range') {\n      if (this.startDate && this.endDate) return `${this.startDate} – ${this.endDate}`;\n      if (this.startDate) return this.startDate;\n      return '';\n    }\n    return this.selectedDate;\n  }\n\n  private open_() {\n    if (this.disabled) return;\n    if (this.selectedDate) {\n      const d = new Date(this.selectedDate);\n      this.viewYear = d.getFullYear();\n      this.viewMonth = d.getMonth();\n    } else if (this.startDate) {\n      const d = new Date(this.startDate);\n      this.viewYear = d.getFullYear();\n      this.viewMonth = d.getMonth();\n    }\n    this.open = true;\n  }\n\n  private prevMonth() {\n    if (this.viewMonth === 0) { this.viewMonth = 11; this.viewYear--; }\n    else this.viewMonth--;\n  }\n\n  private nextMonth() {\n    if (this.viewMonth === 11) { this.viewMonth = 0; this.viewYear++; }\n    else this.viewMonth++;\n  }\n\n  private toISO(year: number, month: number, day: number): string {\n    return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;\n  }\n\n  private isDisabled(iso: string): boolean {\n    if (this.minDate && iso < this.minDate) return true;\n    if (this.maxDate && iso > this.maxDate) return true;\n    return false;\n  }\n\n  private isInRange(iso: string): boolean {\n    if (this.selectionMode !== 'range') return false;\n    const start = this.startDate;\n    const end = this.endDate || this.hoverDate;\n    if (!start || !end) return false;\n    const [s, e] = start <= end ? [start, end] : [end, start];\n    return iso > s && iso < e;\n  }\n\n  private selectDate(iso: string) {\n    if (this.isDisabled(iso)) return;\n\n    if (this.selectionMode !== 'range') {\n      this.selectedDate = iso;\n      this.open = false;\n      this.dropiChangeDate.emit(iso);\n      return;\n    }\n\n    // Range mode\n    if (!this.startDate || (this.startDate && this.endDate)) {\n      this.startDate = iso;\n      this.endDate = '';\n    } else {\n      if (iso < this.startDate) {\n        this.endDate = this.startDate;\n        this.startDate = iso;\n      } else {\n        this.endDate = iso;\n      }\n      this.open = false;\n      this.dropiRangeChange.emit({ start: this.startDate, end: this.endDate });\n    }\n  }\n\n  private buildDays(): Array<{ iso: string; day: number; currentMonth: boolean }> {\n    const year = this.viewYear;\n    const month = this.viewMonth;\n\n    const firstDay = new Date(year, month, 1).getDay();\n    // Adjust to Sunday-first\n    const startOffset = firstDay;\n    const daysInMonth = new Date(year, month + 1, 0).getDate();\n    const daysInPrevMonth = new Date(year, month, 0).getDate();\n\n    const cells: Array<{ iso: string; day: number; currentMonth: boolean }> = [];\n\n    // Previous month filler\n    for (let i = startOffset - 1; i >= 0; i--) {\n      const d = daysInPrevMonth - i;\n      const m = month === 0 ? 11 : month - 1;\n      const y = month === 0 ? year - 1 : year;\n      cells.push({ iso: this.toISO(y, m, d), day: d, currentMonth: false });\n    }\n\n    // Current month\n    for (let d = 1; d <= daysInMonth; d++) {\n      cells.push({ iso: this.toISO(year, month, d), day: d, currentMonth: true });\n    }\n\n    // Next month filler\n    const remaining = 42 - cells.length;\n    for (let d = 1; d <= remaining; d++) {\n      const m = month === 11 ? 0 : month + 1;\n      const y = month === 11 ? year + 1 : year;\n      cells.push({ iso: this.toISO(y, m, d), day: d, currentMonth: false });\n    }\n\n    return cells;\n  }\n\n  render() {\n    const days = this.buildDays();\n    const today = new Date().toISOString().slice(0, 10);\n\n    return (\n      <div class=\"dp-wrap\">\n        {this.label && <label class=\"dp-label\">{this.label}</label>}\n\n        {/* Trigger */}\n        <button\n          class={{\n            'dp-trigger': true,\n            'dp-trigger--disabled': this.disabled,\n            'dp-trigger--invalid': this.isInvalid,\n            'dp-trigger--loading': this.loading\n          }}\n          onClick={() => this.open ? this.open = false : this.open_()}\n          disabled={this.disabled || this.loading}\n          type=\"button\"\n        >\n          <dropi-icon name=\"Calendar\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />\n          <span class={{ 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue }}>\n            {this.displayValue || this.placeholder}\n          </span>\n          <dropi-icon name=\"Arrow-Down-2\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Gray-Gray-400\" />\n        </button>\n\n        {/* Calendar popup */}\n        {this.open && (\n          <div class=\"dp-popup\">\n            {/* Navigation */}\n            <div class=\"dp-nav\">\n              <button class=\"dp-nav__btn\" onClick={() => this.prevMonth()} type=\"button\">\n                <dropi-icon name=\"Arrow-Left-2\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-600\" />\n              </button>\n              <span class=\"dp-nav__title\">\n                <span>{MONTHS_ES[this.viewMonth]}</span>\n                <span>{this.viewYear}</span>\n              </span>\n              <button class=\"dp-nav__btn\" onClick={() => this.nextMonth()} type=\"button\">\n                <dropi-icon name=\"Arrow-Right-2\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-600\" />\n              </button>\n            </div>\n\n            {/* Day headers */}\n            <div class=\"dp-grid\">\n              {DAYS_ES.map(d => (\n                <div class=\"dp-day-header\">{d}</div>\n              ))}\n\n              {/* Day cells */}\n              {days.map(({ iso, day, currentMonth }) => {\n                const isSelected = this.selectionMode !== 'range'\n                  ? iso === this.selectedDate\n                  : iso === this.startDate || iso === this.endDate;\n                const isRangeStart = this.selectionMode === 'range' && iso === this.startDate;\n                const isRangeEnd   = this.selectionMode === 'range' && iso === this.endDate;\n                const inRange      = this.isInRange(iso);\n                const disabled     = this.isDisabled(iso);\n                const isToday      = iso === today;\n\n                return (\n                  <button\n                    class={{\n                      'dp-cell': true,\n                      'dp-cell--other-month': !currentMonth,\n                      'dp-cell--today': isToday,\n                      'dp-cell--selected': isSelected,\n                      'dp-cell--range-start': isRangeStart,\n                      'dp-cell--range-end': isRangeEnd,\n                      'dp-cell--in-range': inRange,\n                      'dp-cell--disabled': disabled,\n                    }}\n                    type=\"button\"\n                    disabled={disabled}\n                    onClick={() => this.selectDate(iso)}\n                    onMouseEnter={() => { if (this.selectionMode === 'range' && this.startDate && !this.endDate) this.hoverDate = iso; }}\n                    onMouseLeave={() => this.hoverDate = ''}\n                  >\n                    {day}\n                  </button>\n                );\n              })}\n            </div>\n\n            {/* Footer */}\n            <div class=\"dp-footer\">\n              <button class=\"dp-footer__clear\" type=\"button\" onClick={() => {\n                this.selectedDate = ''; this.startDate = ''; this.endDate = '';\n                this.open = false;\n              }}>\n                Limpiar\n              </button>\n              <button class=\"dp-footer__today\" type=\"button\" onClick={() => {\n                if (this.selectionMode !== 'range') { this.selectedDate = today; this.open = false; this.dropiChangeDate.emit(today); }\n                else { this.startDate = today; this.endDate = ''; }\n              }}>\n                Hoy\n              </button>\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-date-picker.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-date-picker/dropi-date-picker.css?tag=dropi-date-picker&encapsulation=shadow","src/components/dropi-date-picker/dropi-date-picker.tsx"],"sourcesContent":[":host { display: block; width: 100%; position: relative; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.dp-label {\n  display: block;\n  font-size: var(--font-size-xxs, 10px);\n  color: var(--Gray-Gray-600, #475066);\n  margin-bottom: 4px;\n}\n\n/* Trigger */\n.dp-trigger {\n  width: 100%;\n  height: 44px;\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  padding: 0 var(--Size-3, 12px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  cursor: pointer;\n  font-family: inherit;\n  transition: border-color 0.2s;\n}\n.dp-trigger:hover:not(:disabled) { border-color: var(--Info-Info-500, #50a5f1); }\n.dp-trigger--disabled { background: var(--Gray-Gray-50, #f7f8fa); cursor: not-allowed; opacity: 0.6; }\n\n.dp-trigger__value {\n  flex: 1;\n  text-align: left;\n  font-size: var(--font-size-xs, 12px);\n  color: var(--Gray-Gray-700, #32394d);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dp-trigger__placeholder { color: var(--Gray-Gray-400, #858ea6); }\n\n/* Popup */\n.dp-popup {\n  position: absolute;\n  top: calc(100% + 8px);\n  left: 0;\n  width: 320px;\n  background: var(--Neutral-White, #ffffff);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-3, 12px);\n  box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n  z-index: 300;\n  padding: var(--Size-4, 16px);\n}\n\n/* Navigation */\n.dp-nav {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: var(--Size-4, 16px);\n}\n\n.dp-nav__btn {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  transition: background 0.15s;\n}\n.dp-nav__btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n\n.dp-nav__title {\n  font-size: var(--font-size-s, 14px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Gray-Gray-700, #32394d);\n  display: flex;\n  gap: 8px;\n}\n\n/* Grid */\n.dp-grid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  row-gap: 8px;\n  column-gap: 4px;\n}\n\n.dp-day-header {\n  font-size: var(--font-size-s, 14px);\n  color: var(--Gray-Gray-700, #32394d);\n  text-align: center;\n  padding: 8px 0;\n  font-weight: var(--font-weight-bold, 700);\n}\n\n/* Day cells */\n.dp-cell {\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--font-size-xs, 12px);\n  font-family: inherit;\n  border: none;\n  cursor: pointer;\n  background: transparent;\n  color: var(--Gray-Gray-600, #475066);\n  width: 100%;\n  position: relative;\n  z-index: 1;\n  padding: 0;\n}\n\n/* Pseudo-element for the circle (selected / hover / today) */\n.dp-cell::after {\n  content: \"\";\n  position: absolute;\n  top: 0; left: 0; right: 0; bottom: 0;\n  border-radius: 50%;\n  transition: all 0.2s;\n  z-index: -1;\n  background: transparent;\n}\n\n/* Pseudo-element for the continuous light-orange range background */\n.dp-cell::before {\n  content: \"\";\n  position: absolute;\n  top: 0; bottom: 0;\n  z-index: -2;\n  border-radius: 0;\n  background: transparent;\n}\n\n.dp-cell:hover:not(:disabled)::after {\n  background: var(--Gray-Gray-100, #e6eaf2);\n}\n\n.dp-cell--other-month { color: var(--Gray-Gray-300, #a0a9c0); }\n\n.dp-cell--today {\n  font-weight: var(--font-weight-bold, 700);\n}\n.dp-cell--today::after {\n  background: var(--Gray-Gray-100, #e6eaf2);\n}\n\n.dp-cell--selected {\n  color: var(--Neutral-White, #ffffff);\n  font-weight: var(--font-weight-bold, 700);\n}\n.dp-cell--selected::after {\n  background: var(--Orange-orange-500, #f49a3d) !important;\n}\n\n/* Range modes */\n.dp-cell--range-start, .dp-cell--range-end {\n  color: var(--Neutral-White, #ffffff);\n  font-weight: var(--font-weight-bold, 700);\n}\n.dp-cell--range-start::after, .dp-cell--range-end::after {\n  background: var(--Orange-orange-500, #f49a3d) !important;\n}\n\n.dp-cell--in-range {\n  color: var(--Orange-orange-500, #f49a3d);\n  font-weight: var(--font-weight-bold, 700);\n}\n.dp-cell--in-range::before {\n  left: -2px; right: -2px;\n  background: var(--Orange-orange-50, #fef5ec);\n}\n.dp-cell--range-start::before {\n  left: 50%; right: -2px;\n  background: var(--Orange-orange-50, #fef5ec);\n}\n.dp-cell--range-end::before {\n  left: -2px; right: 50%;\n  background: var(--Orange-orange-50, #fef5ec);\n}\n.dp-cell--range-start.dp-cell--range-end::before {\n  background: transparent;\n}\n\n.dp-cell--disabled { opacity: 0.35; cursor: not-allowed; }\n\n/* Footer */\n.dp-footer {\n  display: flex;\n  justify-content: space-between;\n  margin-top: var(--Size-3, 12px);\n  border-top: 1px solid var(--Gray-Gray-100, #e6eaf2);\n  padding-top: var(--Size-2, 8px);\n}\n\n.dp-footer__clear,\n.dp-footer__today {\n  background: none;\n  border: none;\n  padding: 4px 8px;\n  font-size: var(--font-size-xxs, 10px);\n  font-family: inherit;\n  cursor: pointer;\n  border-radius: var(--Border-1, 4px);\n  transition: background 0.15s;\n}\n.dp-footer__clear { color: var(--Gray-Gray-500, #69738c); }\n.dp-footer__today { color: var(--Orange-orange-500, #f49a3d); font-weight: var(--font-weight-bold, 700); }\n.dp-footer__clear:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n.dp-footer__today:hover { background: var(--Orange-orange-50, #fef5ec); }\n","import { Component, Prop, State, Event, EventEmitter, h, Element, Listen, AttachInternals, Watch } from '@stencil/core';\n\nconst MONTHS_ES = [\n  'Enero','Febrero','Marzo','Abril','Mayo','Junio',\n  'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'\n];\nconst DAYS_ES = ['Do','Lu','Ma','Mi','Ju','Vi','Sa'];\n\n/**\n * @component dropi-date-picker\n * Calendar date picker with optional date range mode.\n * Emits ISO date strings (YYYY-MM-DD).\n */\n@Component({\n  tag: 'dropi-date-picker',\n  styleUrl: 'dropi-date-picker.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiDatePicker {\n  @AttachInternals() internals: ElementInternals;\n\n  /** Name for native form submission */\n  @Prop({ reflect: true }) name: string = '';\n\n  /** Selected date (ISO string, single mode) - matches Angular 'selectedDate' */\n  @Prop({ mutable: true }) selectedDate: string = '';\n  /** Range start date (ISO string, range mode) */\n  @Prop({ mutable: true }) startDate: string = '';\n  /** Range end date (ISO string, range mode) */\n  @Prop({ mutable: true }) endDate: string = '';\n\n  @Watch('selectedDate')\n  @Watch('startDate')\n  @Watch('endDate')\n  valueChanged() {\n    this.updateFormValue();\n  }\n\n  /** Enable range selection - matches Angular selectionMode */\n  @Prop() selectionMode: 'single' | 'range' = 'single';\n  /** Min selectable date (ISO string) */\n  @Prop() minDate: string = '';\n  /** Max selectable date (ISO string) */\n  @Prop() maxDate: string = '';\n  /** Label */\n  @Prop() label: string | null = null;\n  /** Placeholder */\n  @Prop() placeholder: string = 'DD/MM/YYYY';\n  /** Disabled */\n  @Prop() disabled: boolean = false;\n  /** Is invalid state - matches Angular */\n  @Prop() isInvalid: boolean = false;\n  /** Loading state - matches Angular */\n  @Prop() loading: boolean = false;\n\n  @State() private open: boolean = false;\n  @State() private viewYear: number = new Date().getFullYear();\n  @State() private viewMonth: number = new Date().getMonth();\n  @State() private hoverDate: string = '';\n\n  @Element() el!: HTMLElement;\n\n  @Listen('click', { target: 'document' })\n  handleDocClick(e: MouseEvent) {\n    if (this.open && !e.composedPath().includes(this.el)) {\n      this.open = false;\n    }\n  }\n\n  /** Emitted when date selected — matches Angular 'onChangeDate' */\n  @Event() dropiChangeDate: EventEmitter<string>;\n  /** Emitted when panel closes — matches Angular 'onClosePanel' */\n  @Event() dropiClosePanel: EventEmitter<void>;\n  /** Emitted when range selected */\n  @Event() dropiRangeChange: EventEmitter<{ start: string; end: string }>;\n\n  componentWillLoad() {\n    this.updateFormValue();\n  }\n\n  private updateFormValue() {\n    if (this.selectionMode === 'range') {\n      this.internals.setFormValue(this.startDate && this.endDate ? `${this.startDate},${this.endDate}` : '');\n    } else {\n      this.internals.setFormValue(this.selectedDate || '');\n    }\n  }\n\n\n  private get displayValue(): string {\n    if (this.selectionMode === 'range') {\n      if (this.startDate && this.endDate) return `${this.startDate} – ${this.endDate}`;\n      if (this.startDate) return this.startDate;\n      return '';\n    }\n    return this.selectedDate;\n  }\n\n  private open_() {\n    if (this.disabled) return;\n    if (this.selectedDate) {\n      const d = new Date(this.selectedDate);\n      this.viewYear = d.getFullYear();\n      this.viewMonth = d.getMonth();\n    } else if (this.startDate) {\n      const d = new Date(this.startDate);\n      this.viewYear = d.getFullYear();\n      this.viewMonth = d.getMonth();\n    }\n    this.open = true;\n  }\n\n  private prevMonth() {\n    if (this.viewMonth === 0) { this.viewMonth = 11; this.viewYear--; }\n    else this.viewMonth--;\n  }\n\n  private nextMonth() {\n    if (this.viewMonth === 11) { this.viewMonth = 0; this.viewYear++; }\n    else this.viewMonth++;\n  }\n\n  private toISO(year: number, month: number, day: number): string {\n    return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;\n  }\n\n  private isDisabled(iso: string): boolean {\n    if (this.minDate && iso < this.minDate) return true;\n    if (this.maxDate && iso > this.maxDate) return true;\n    return false;\n  }\n\n  private isInRange(iso: string): boolean {\n    if (this.selectionMode !== 'range') return false;\n    const start = this.startDate;\n    const end = this.endDate || this.hoverDate;\n    if (!start || !end) return false;\n    const [s, e] = start <= end ? [start, end] : [end, start];\n    return iso > s && iso < e;\n  }\n\n  private selectDate(iso: string) {\n    if (this.isDisabled(iso)) return;\n\n    if (this.selectionMode !== 'range') {\n      this.selectedDate = iso;\n      this.open = false;\n      this.dropiChangeDate.emit(iso);\n      return;\n    }\n\n    // Range mode\n    if (!this.startDate || (this.startDate && this.endDate)) {\n      this.startDate = iso;\n      this.endDate = '';\n    } else {\n      if (iso < this.startDate) {\n        this.endDate = this.startDate;\n        this.startDate = iso;\n      } else {\n        this.endDate = iso;\n      }\n      this.open = false;\n      this.dropiRangeChange.emit({ start: this.startDate, end: this.endDate });\n    }\n  }\n\n  private buildDays(): Array<{ iso: string; day: number; currentMonth: boolean }> {\n    const year = this.viewYear;\n    const month = this.viewMonth;\n\n    const firstDay = new Date(year, month, 1).getDay();\n    // Adjust to Sunday-first\n    const startOffset = firstDay;\n    const daysInMonth = new Date(year, month + 1, 0).getDate();\n    const daysInPrevMonth = new Date(year, month, 0).getDate();\n\n    const cells: Array<{ iso: string; day: number; currentMonth: boolean }> = [];\n\n    // Previous month filler\n    for (let i = startOffset - 1; i >= 0; i--) {\n      const d = daysInPrevMonth - i;\n      const m = month === 0 ? 11 : month - 1;\n      const y = month === 0 ? year - 1 : year;\n      cells.push({ iso: this.toISO(y, m, d), day: d, currentMonth: false });\n    }\n\n    // Current month\n    for (let d = 1; d <= daysInMonth; d++) {\n      cells.push({ iso: this.toISO(year, month, d), day: d, currentMonth: true });\n    }\n\n    // Next month filler\n    const remaining = 42 - cells.length;\n    for (let d = 1; d <= remaining; d++) {\n      const m = month === 11 ? 0 : month + 1;\n      const y = month === 11 ? year + 1 : year;\n      cells.push({ iso: this.toISO(y, m, d), day: d, currentMonth: false });\n    }\n\n    return cells;\n  }\n\n  render() {\n    const days = this.buildDays();\n    const today = new Date().toISOString().slice(0, 10);\n\n    return (\n      <div class=\"dp-wrap\">\n        {this.label && <label class=\"dp-label\">{this.label}</label>}\n\n        {/* Trigger */}\n        <button\n          class={{\n            'dp-trigger': true,\n            'dp-trigger--disabled': this.disabled,\n            'dp-trigger--invalid': this.isInvalid,\n            'dp-trigger--loading': this.loading\n          }}\n          onClick={() => this.open ? this.open = false : this.open_()}\n          disabled={this.disabled || this.loading}\n          type=\"button\"\n        >\n          <dropi-icon name=\"Calendar\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />\n          <span class={{ 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue }}>\n            {this.displayValue || this.placeholder}\n          </span>\n          <dropi-icon name=\"Arrow-Down-2\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Gray-Gray-400\" />\n        </button>\n\n        {/* Calendar popup */}\n        {this.open && (\n          <div class=\"dp-popup\">\n            {/* Navigation */}\n            <div class=\"dp-nav\">\n              <button class=\"dp-nav__btn\" onClick={() => this.prevMonth()} type=\"button\">\n                <dropi-icon name=\"Arrow-Left-2\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-600\" />\n              </button>\n              <span class=\"dp-nav__title\">\n                <span>{MONTHS_ES[this.viewMonth]}</span>\n                <span>{this.viewYear}</span>\n              </span>\n              <button class=\"dp-nav__btn\" onClick={() => this.nextMonth()} type=\"button\">\n                <dropi-icon name=\"Arrow-Right-2\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-600\" />\n              </button>\n            </div>\n\n            {/* Day headers */}\n            <div class=\"dp-grid\">\n              {DAYS_ES.map(d => (\n                <div class=\"dp-day-header\">{d}</div>\n              ))}\n\n              {/* Day cells */}\n              {days.map(({ iso, day, currentMonth }) => {\n                const isSelected = this.selectionMode !== 'range'\n                  ? iso === this.selectedDate\n                  : iso === this.startDate || iso === this.endDate;\n                const isRangeStart = this.selectionMode === 'range' && iso === this.startDate;\n                const isRangeEnd   = this.selectionMode === 'range' && iso === this.endDate;\n                const inRange      = this.isInRange(iso);\n                const disabled     = this.isDisabled(iso);\n                const isToday      = iso === today;\n\n                return (\n                  <button\n                    class={{\n                      'dp-cell': true,\n                      'dp-cell--other-month': !currentMonth,\n                      'dp-cell--today': isToday,\n                      'dp-cell--selected': isSelected,\n                      'dp-cell--range-start': isRangeStart,\n                      'dp-cell--range-end': isRangeEnd,\n                      'dp-cell--in-range': inRange,\n                      'dp-cell--disabled': disabled,\n                    }}\n                    type=\"button\"\n                    disabled={disabled}\n                    onClick={() => this.selectDate(iso)}\n                    onMouseEnter={() => { if (this.selectionMode === 'range' && this.startDate && !this.endDate) this.hoverDate = iso; }}\n                    onMouseLeave={() => this.hoverDate = ''}\n                  >\n                    {day}\n                  </button>\n                );\n              })}\n            </div>\n\n            {/* Footer */}\n            <div class=\"dp-footer\">\n              <button class=\"dp-footer__clear\" type=\"button\" onClick={() => {\n                this.selectedDate = ''; this.startDate = ''; this.endDate = '';\n                this.open = false;\n              }}>\n                Limpiar\n              </button>\n              <button class=\"dp-footer__today\" type=\"button\" onClick={() => {\n                if (this.selectionMode !== 'range') { this.selectedDate = today; this.open = false; this.dropiChangeDate.emit(today); }\n                else { this.startDate = today; this.endDate = ''; }\n              }}>\n                Hoy\n              </button>\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-input.entry.js

@@ -153,6 +153,7 @@ const DropiInput = class {
         this.value = val;
         this.internals.setFormValue(val);
         this.dropiInput.emit(val);
+        this.dropiChange.emit(val);
     }
     handleKeyDown(e) {
         if ((this.isNumericInput || this.isMoneyInput || this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {
@@ -167,7 +168,6 @@ const DropiInput = class {
     }
     handleBlur() {
         this.touched = true;
-        this.dropiChange.emit(this.value);
         this.dropiBlur.emit();
     }
     togglePassword() {
@@ -233,14 +233,14 @@ const DropiInput = class {
     render() {
         const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (h("div", { key: '36a33fdb7048e3ba43dae3c2d3d71c9f69643cac', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: '699adfe37d662ed328cd13fdad428e857b70f01d', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: 'b2d6f4757cdb50eacfb7879e4a878e30adf5235d', class: "asterisk" }, " *"))), h("div", { key: 'dc080fc5d0ab12f0eadf7e1bb30cae5539f76640', class: "form-group" }, h("div", { key: 'cf228d5e4c7e0a04735d38ba239a2b989f5247ca', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '049e396ea1f2f11625de73bc074c0e0aecea96ab', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (h("dropi-icon", { key: '544316f6e7a284acf65d3a2b7fb3a2654c80d95b', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: '6d23ac748d0768d6eea0eb347bde7b13d8f20321', id: this.resolvedId, class: {
+        return (h("div", { key: '6af757e1d86bfe96d471e9cbed258a50727ae190', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: 'e88bf81fd2b79933e386c2e5fa38f57d85cfe836', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: 'be8ec1b0d3ef624ca22e58ae072917ad2ecc79fb', class: "asterisk" }, " *"))), h("div", { key: '4806c0d250f00bb08788d9d6aa935ca15f2aa826', class: "form-group" }, h("div", { key: 'b9fa243d299bcd165458947d6695fcc845764276', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '92b3cf11803745784f13e908ea88992f76c74473', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (h("dropi-icon", { key: 'c7dc725d577a6d4afb7f87c8b53b16c621de9e86', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: '8146ae1794cbe1f200bb681358c7319f10faab3c', id: this.resolvedId, class: {
                 'form-control': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
                 'padding-icon': showIconInline,
                 'text-password': this.passwordInput && !this.showPassword,
                 'fixed-label-input': this.fixedLabel,
-            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '8f26c9430cbc1c6b55286d62c2a350724dd0101f', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: '95d953c160cf22457b0e1d6265b8137a24d4092b', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: 'ad3d4b5230fd32e97c661c64deadf97830caa550', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: '7c28120d1cc46ccd288948b1d2d9e5cc24521af7', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '40eb1eedd2a204975aed61fcd24ccadd26d8aaef', class: {
+            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '005d15af6b50b2cb2d47ac8381a722794eb273e5', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: 'ad56df877cff3df8a801cdfcb607d9af02f7465a', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '76e858c13a798f69b2d20ee9908f17531568dad1', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: '3e42ffb4db7444ebfb49cc9c6720d5a9d02b2860', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '5e970903eb51ca6b72a43bef0edf6ef149443247', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.textHelper)))))));