npm - @dropi/ui - Versions diffs - 0.1.52 → 0.1.53 - Mend

@dropi/ui 0.1.52 → 0.1.53

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

Files changed (592) hide show

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

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

package/dist/dropi-ui/dropi-color-picker.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-BKkSRXlb.js';
-const dropiColorPickerCss = () => `:host{display:block}.general-container{position:relative;width:fit-content}.main-input-container{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:var(--Size-3);position:relative;width:fit-content}.main-input-container .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;cursor:pointer}.line-color-preview{width:40px;height:40px;border-radius:50%;border:1px solid var(--Gray-Gray-200);display:flex;justify-content:center;align-items:center;padding:5px}.line-color-preview .color-preview{width:100%;height:100%;border-radius:50%;border:1px solid var(--Gray-Gray-200)}.position-right{top:0;left:250px}.position-left{top:0;right:200px}.position-top{bottom:55px}.position-bottom{top:55px}.position-bottom::before{transform:rotate(90deg);left:50%;top:-15px}.position-right::before{left:-6px;top:10px}.position-top::before{transform:rotate(270deg);left:50%;bottom:-15px}.position-left::before{transform:rotate(180deg);right:-9px}.color-picker-container::before{content:'';position:absolute;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid var(--Neutral-White);z-index:1}.color-picker-container{width:280px;padding:var(--Size-4);background:var(--Neutral-White);border-radius:var(--Size-2);box-shadow:var(--Shadow-large);position:absolute;z-index:100;transform-origin:top left;opacity:0;transition:transform 0.2s ease-out,     opacity 0.2s ease-out;pointer-events:none}.color-picker-container .main-color-canvas-container{position:relative;margin-bottom:var(--Size-4);border:1px solid var(--Gray-Gray-200);border-radius:var(--Size-1);display:flex;justify-self:center;align-items:center}.color-picker-container .main-color-canvas-container canvas{display:block;border-radius:var(--Size-1)}.color-picker-container .main-color-canvas-container .color-selector-pointer{position:absolute;width:var(--Size-3);height:var(--Size-3);border:2px solid var(--Neutral-White);border-radius:50%;transform:translate(-6px, -6px);pointer-events:none}.color-picker-container .slider-container{display:flex;flex-direction:column;gap:var(--Size-3)}.color-picker-container .slider-container .slider-group{display:flex;flex-direction:column;gap:var(--Size-1)}.color-picker-container .slider-container .slider-group label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:var(--font-weight-bold)}.color-picker-container .slider-container .slider-group .hue-slider-container,.color-picker-container .slider-container .slider-group .opacity-slider-container{position:relative;height:var(--Size-3);border-radius:var(--Size-4);overflow:hidden}.color-picker-container .slider-container .slider-group .hue-slider-container canvas,.color-picker-container .slider-container .slider-group .opacity-slider-container canvas{display:block;width:100%;height:100%}.color-picker-container .slider-container .slider-group .hue-slider-container .slider-pointer,.color-picker-container .slider-container .slider-group .opacity-slider-container .slider-pointer{position:absolute;top:0;height:var(--Size-3);width:var(--Size-3);background:transparent;border:2px solid var(--Neutral-White);border-radius:50%;pointer-events:none}.color-picker-container.show{transform:scale(1);opacity:1;pointer-events:auto}.color-info .color-label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:var(--font-weight-bold);text-transform:uppercase;margin-bottom:var(--Size-2)}.color-info .color-input{border:1px solid var(--Gray-Gray-200, #ddd);border-radius:var(--Size-1);padding:6px 8px;font-size:var(--font-size-s);width:100%;font-family:monospace;text-transform:uppercase;background-color:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-800, #1f2433);outline:none}`;
+const dropiColorPickerCss = () => `:host{display:block;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}.general-container{position:relative;width:fit-content}.main-input-container{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:var(--Size-3);position:relative;width:fit-content}.main-input-container .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;cursor:pointer}.line-color-preview{width:40px;height:40px;border-radius:50%;border:1px solid var(--Gray-Gray-200);display:flex;justify-content:center;align-items:center;padding:5px}.line-color-preview .color-preview{width:100%;height:100%;border-radius:50%;border:1px solid var(--Gray-Gray-200)}.position-right{top:0;left:250px}.position-left{top:0;right:200px}.position-top{bottom:55px}.position-bottom{top:55px}.position-bottom::before{transform:rotate(90deg);left:50%;top:-15px}.position-right::before{left:-6px;top:10px}.position-top::before{transform:rotate(270deg);left:50%;bottom:-15px}.position-left::before{transform:rotate(180deg);right:-9px}.color-picker-container::before{content:'';position:absolute;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid var(--Neutral-White);z-index:1}.color-picker-container{width:280px;padding:var(--Size-4);background:var(--Neutral-White);border-radius:var(--Size-2);box-shadow:var(--Shadow-large);position:absolute;z-index:100;transform-origin:top left;opacity:0;transition:transform 0.2s ease-out,     opacity 0.2s ease-out;pointer-events:none}.color-picker-container .main-color-canvas-container{position:relative;margin-bottom:var(--Size-4);border:1px solid var(--Gray-Gray-200);border-radius:var(--Size-1);display:flex;justify-self:center;align-items:center}.color-picker-container .main-color-canvas-container canvas{display:block;border-radius:var(--Size-1)}.color-picker-container .main-color-canvas-container .color-selector-pointer{position:absolute;width:var(--Size-3);height:var(--Size-3);border:2px solid var(--Neutral-White);border-radius:50%;transform:translate(-6px, -6px);pointer-events:none}.color-picker-container .slider-container{display:flex;flex-direction:column;gap:var(--Size-3)}.color-picker-container .slider-container .slider-group{display:flex;flex-direction:column;gap:var(--Size-1)}.color-picker-container .slider-container .slider-group label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:var(--font-weight-bold)}.color-picker-container .slider-container .slider-group .hue-slider-container,.color-picker-container .slider-container .slider-group .opacity-slider-container{position:relative;height:var(--Size-3);border-radius:var(--Size-4);overflow:hidden}.color-picker-container .slider-container .slider-group .hue-slider-container canvas,.color-picker-container .slider-container .slider-group .opacity-slider-container canvas{display:block;width:100%;height:100%}.color-picker-container .slider-container .slider-group .hue-slider-container .slider-pointer,.color-picker-container .slider-container .slider-group .opacity-slider-container .slider-pointer{position:absolute;top:0;height:var(--Size-3);width:var(--Size-3);background:transparent;border:2px solid var(--Neutral-White);border-radius:50%;pointer-events:none}.color-picker-container.show{transform:scale(1);opacity:1;pointer-events:auto}.color-info .color-label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:var(--font-weight-bold);text-transform:uppercase;margin-bottom:var(--Size-2)}.color-info .color-input{border:1px solid var(--Gray-Gray-200, #ddd);border-radius:var(--Size-1);padding:6px 8px;font-size:var(--font-size-s);width:100%;font-family:monospace;text-transform:uppercase;background-color:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-800, #1f2433);outline:none}`;
 const DropiColorPicker = class {
     constructor(hostRef) {
@@ -301,10 +301,10 @@ const DropiColorPicker = class {
         }
     }
     render() {
-        return (h("div", { key: '18ea41f637e46cb88d57cb2bc513f5e6e3ef9617', class: "general-container" }, h("div", { key: '653748e883bc4deaf05739ced8e516f857a7a26b', class: "main-input-container" }, h("div", { key: 'b8a4e60b25d6017c3987fa4ea3420c78e3400db0', class: "overlay", onClick: () => this.showEditor() }), h("div", { key: 'e22f4b3e95f099e2444a46ee560fefb9f6556b65', class: "line-color-preview" }, h("div", { key: 'cf513dbb5ee9652a6d20aad0608508cae3e000af', class: "color-preview", style: { background: this.currentColor } })), h("div", { key: '025b264ae8aca0fca79f662c58250eea43ccf0e7', class: "color-info" }, h("input", { key: '60a379b53bd0cf0bb1f80d5e1bd5b4c4038686f9', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), h("div", { key: '06e15b97ba156a9aa9dec9f60f2b24c924c0ac53', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, h("div", { key: 'ea9df13cdf62ae1378b600dc7689df61bec5fc9b', class: "main-color-canvas-container" }, h("canvas", { key: '5d73426ccfcccca44102300588472fe5e54744f9', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), h("div", { key: 'e710e7f8c1558ad20dcfb0f03c98969d9aee5e91', class: "color-selector-pointer", style: {
+        return (h("div", { key: 'd9c5e76dd6171e16a7b156425ed23fb278bf98c4', class: "general-container" }, h("div", { key: 'd12811b5fceee6fb0966c9c96de558babac9f76f', class: "main-input-container" }, h("div", { key: '501f61305d92c06e02d206ac7a43f05b8534bbde', class: "overlay", onClick: () => this.showEditor() }), h("div", { key: 'fb6b530e3a470e8a0c253b09277c4e0c7d044e22', class: "line-color-preview" }, h("div", { key: '54f99921536b51a86fcda44e8dac7217a4c7dee5', class: "color-preview", style: { background: this.currentColor } })), h("div", { key: 'cb2e0ddf93642e77e56de752a65c9ba76cb552a0', class: "color-info" }, h("input", { key: 'f47de54253b46b4569ecab01429563670c7e72c7', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), h("div", { key: '5a075b8c12598ba8dd275b6a16eef32add9ac699', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, h("div", { key: '69e0ca2f0619cc4179ab0aaee1c104cef14ce36e', class: "main-color-canvas-container" }, h("canvas", { key: 'b1214cca9b1c1b19c28e7c88d7283558e843f596', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), h("div", { key: 'c4421be7d1b404b75a8369a7308bc230495acf3e', class: "color-selector-pointer", style: {
                 left: `${(this.saturation / 100) * 256}px`,
                 top: `${((100 - this.currentVal) / 100) * 150}px`
-            } })), h("div", { key: '239c7986572fade46b913629bbd374ec6f15e6fb', class: "slider-container" }, h("div", { key: '35c4231f321c42fa95f362da5bf211daf1671c79', class: "slider-group" }, h("div", { key: '20be2dc7eff210e31ab3215da10473a23db921f1', class: "hue-slider-container" }, h("canvas", { key: '0795238e2a59747c4bfbd3437a2a2fd9396dc9e2', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), h("div", { key: '17296210ecef2a958a46f23971a04da61d59402e', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), h("div", { key: 'af7504663561d0e811ae7ef163cce80cfa256187', class: "slider-group" }, h("div", { key: '7f3f01cfb0e4ca93403dad15787ab8acd7c1cd82', class: "opacity-slider-container" }, h("canvas", { key: '9bac8eca65bfba529748eb9788fc749b87115ca6', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), h("div", { key: '34166bf45efd6f4148395ede39680164662f8a33', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), h("div", { key: 'b43c40db224a560adb19fd91a8790efe11719ff9', class: "color-info" }, h("div", { key: 'aad6ef925f30835b5d8f51d23f872560bcb62360', class: "color-label" }, "HEX"), h("input", { key: 'bdb5fd6ca689251a7c566f32bc6c308873117b2c', type: "text", class: "color-input", value: this.color, onInput: (e) => this.onHexInputChange(e), maxLength: 9 }))))));
+            } })), h("div", { key: 'a5d31a247005eb772bddc2f8dd2cb9a243c6481a', class: "slider-container" }, h("div", { key: 'efd453992fc5742c5b6d2637822d3e6f27b4d69c', class: "slider-group" }, h("div", { key: 'ecdd733f52e90dba2bb80cbc156b0f73535c1d9f', class: "hue-slider-container" }, h("canvas", { key: 'a4ec35a0626bec8d07754065adda64ab22607d08', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), h("div", { key: '374888568e3dc396400e416f81a1e2757f8d9300', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), h("div", { key: '7936ff2caf23fbb52ec249f9524824385d9fd994', class: "slider-group" }, h("div", { key: 'bfc6261574131051f5a93656d625a4bfd0d3a5a3', class: "opacity-slider-container" }, h("canvas", { key: '998d1156a5179a920ba459441f0ff7678c383262', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), h("div", { key: 'e7e273b17d35e5f3c6da8fc64ac457d170353ad9', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), h("div", { key: 'f2c0146365f245843514d48313bb77aa07f48927', class: "color-info" }, h("div", { key: '94d56458a0e17f20407fb324910b4fb40661856a', class: "color-label" }, "HEX"), h("input", { key: 'f6b4cbc676861caa8fb393d11e7f2b107e689a7d', type: "text", class: "color-input", value: this.color, onInput: (e) => this.onHexInputChange(e), maxLength: 9 }))))));
     }
     static get watchers() { return {
         "value": [{

package/dist/dropi-ui/dropi-color-picker.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dropi-color-picker.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-color-picker/dropi-color-picker.css?tag=dropi-color-picker&encapsulation=shadow","src/components/dropi-color-picker/dropi-color-picker.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.general-container {\n position: relative;\n width: fit-content;\n}\n\n.main-input-container {\n display: flex;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: center;\n gap: var(--Size-3);\n position: relative;\n width: fit-content;\n}\n\n.main-input-container .overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 100;\n cursor: pointer;\n}\n\n.line-color-preview {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n border: 1px solid var(--Gray-Gray-200);\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5px;\n}\n\n.line-color-preview .color-preview {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: 1px solid var(--Gray-Gray-200);\n}\n\n.position-right {\n top: 0;\n left: 250px;\n}\n\n.position-left {\n top: 0;\n right: 200px;\n}\n\n.position-top {\n bottom: 55px;\n}\n\n.position-bottom {\n top: 55px;\n}\n\n.position-bottom::before {\n transform: rotate(90deg);\n left: 50%;\n top: -15px;\n}\n\n.position-right::before {\n left: -6px;\n top: 10px;\n}\n\n.position-top::before {\n transform: rotate(270deg);\n left: 50%;\n bottom: -15px;\n}\n\n.position-left::before {\n transform: rotate(180deg);\n right: -9px;\n}\n\n.color-picker-container::before {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-top: 10px solid transparent;\n border-bottom: 10px solid transparent;\n border-right: 10px solid var(--Neutral-White);\n z-index: 1;\n}\n\n.color-picker-container {\n width: 280px;\n padding: var(--Size-4);\n background: var(--Neutral-White);\n border-radius: var(--Size-2);\n box-shadow: var(--Shadow-large);\n position: absolute;\n z-index: 100;\n transform-origin: top left;\n opacity: 0;\n transition:\n transform 0.2s ease-out,\n opacity 0.2s ease-out;\n pointer-events: none;\n}\n\n.color-picker-container .main-color-canvas-container {\n position: relative;\n margin-bottom: var(--Size-4);\n border: 1px solid var(--Gray-Gray-200);\n border-radius: var(--Size-1);\n display: flex;\n justify-self: center;\n align-items: center;\n}\n\n.color-picker-container .main-color-canvas-container canvas {\n display: block;\n border-radius: var(--Size-1);\n}\n\n.color-picker-container .main-color-canvas-container .color-selector-pointer {\n position: absolute;\n width: var(--Size-3);\n height: var(--Size-3);\n border: 2px solid var(--Neutral-White);\n border-radius: 50%;\n transform: translate(-6px, -6px);\n pointer-events: none;\n}\n\n.color-picker-container .slider-container {\n display: flex;\n flex-direction: column;\n gap: var(--Size-3);\n}\n\n.color-picker-container .slider-container .slider-group {\n display: flex;\n flex-direction: column;\n gap: var(--Size-1);\n}\n\n.color-picker-container .slider-container .slider-group label {\n font-size: var(--font-size-xs);\n color: var(--Gray-Gray-500);\n font-weight: var(--font-weight-bold);\n}\n\n.color-picker-container .slider-container .slider-group .hue-slider-container,\n.color-picker-container .slider-container .slider-group .opacity-slider-container {\n position: relative;\n height: var(--Size-3);\n border-radius: var(--Size-4);\n overflow: hidden;\n}\n\n.color-picker-container .slider-container .slider-group .hue-slider-container canvas,\n.color-picker-container .slider-container .slider-group .opacity-slider-container canvas {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.color-picker-container .slider-container .slider-group .hue-slider-container .slider-pointer,\n.color-picker-container .slider-container .slider-group .opacity-slider-container .slider-pointer {\n position: absolute;\n top: 0;\n height: var(--Size-3);\n width: var(--Size-3);\n background: transparent;\n border: 2px solid var(--Neutral-White);\n border-radius: 50%;\n pointer-events: none;\n}\n\n.color-picker-container.show {\n transform: scale(1);\n opacity: 1;\n pointer-events: auto;\n}\n\n.color-info .color-label {\n font-size: var(--font-size-xs);\n color: var(--Gray-Gray-500);\n font-weight: var(--font-weight-bold);\n text-transform: uppercase;\n margin-bottom: var(--Size-2);\n}\n\n.color-info .color-input {\n border: 1px solid var(--Gray-Gray-200, #ddd);\n border-radius: var(--Size-1);\n padding: 6px 8px;\n font-size: var(--font-size-s);\n width: 100%;\n font-family: monospace;\n text-transform: uppercase;\n background-color: var(--Neutral-White, #ffffff);\n color: var(--Gray-Gray-800, #1f2433);\n outline: none;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Element, Watch } from '@stencil/core';\n\n@Component({\n tag: 'dropi-color-picker',\n styleUrl: 'dropi-color-picker.css',\n shadow: true,\n})\nexport class DropiColorPicker {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) currentColor: string = '#ffffff';\n @Prop() position: 'top' \| 'bottom' \| 'left' \| 'right' = 'right';\n\n @Event() colorChange: EventEmitter<string>;\n\n @State() private color: string = '';\n @State() private hue: number = 0;\n @State() private saturation: number = 0;\n @State() private currentVal: number = 0;\n @State() private opacity: number = 100;\n \n @State() private showEdit: boolean = false;\n\n private isDragging: boolean = false;\n private isHueDragging: boolean = false;\n private isOpacityDragging: boolean = false;\n\n private colorCanvas!: HTMLCanvasElement;\n private hueCanvas!: HTMLCanvasElement;\n private opacityCanvas!: HTMLCanvasElement;\n\n @Watch('value')\n onValueChange(newValue: string) {\n if (!this.showEdit) {\n this.color = newValue;\n this.syncFromHex();\n }\n }\n\n componentWillLoad() {\n this.color = this.currentColor;\n this.syncFromHex();\n }\n\n componentDidLoad() {\n document.addEventListener('mousemove', this.onMouseMove.bind(this));\n document.addEventListener('mouseup', this.onMouseUp.bind(this));\n document.addEventListener('click', this.handleClickOutside.bind(this));\n \n // Defer canvas drawing slightly to ensure elements are rendered\n setTimeout(() => {\n if (this.hueCanvas) this.drawHueCanvas();\n if (this.colorCanvas) this.drawColorCanvas();\n if (this.opacityCanvas) this.drawOpacityCanvas();\n }, 50);\n }\n\n disconnectedCallback() {\n document.removeEventListener('mousemove', this.onMouseMove.bind(this));\n document.removeEventListener('mouseup', this.onMouseUp.bind(this));\n document.removeEventListener('click', this.handleClickOutside.bind(this));\n }\n\n onMouseMove(event: MouseEvent) {\n if (this.isDragging) {\n this.updateColorFromPosition(event);\n return;\n }\n if (this.isHueDragging) {\n this.updateHueFromPosition(event);\n return;\n }\n if (this.isOpacityDragging) {\n this.updateOpacityFromPosition(event);\n return;\n }\n }\n\n onMouseUp() {\n this.isDragging = false;\n this.isHueDragging = false;\n this.isOpacityDragging = false;\n }\n\n handleClickOutside(event: MouseEvent) {\n // Determine if the click target is outside the host element\n const clickedInside = event.composedPath().includes(this.el);\n if (!clickedInside && this.showEdit) {\n this.showEdit = false;\n this.currentColor = this.color;\n this.colorChange.emit(this.color);\n }\n }\n\n drawColorCanvas() {\n if (!this.colorCanvas) return;\n const ctx = this.colorCanvas.getContext('2d')!;\n const width = this.colorCanvas.width;\n const height = this.colorCanvas.height;\n\n const saturationGradient = ctx.createLinearGradient(0, 0, width, 0);\n saturationGradient.addColorStop(0, '#FFFFFF');\n saturationGradient.addColorStop(1, `hsl(${this.hue ?? 0}, 100%, 50%)`);\n\n const valueGradient = ctx.createLinearGradient(0, 0, 0, height);\n valueGradient.addColorStop(0, 'rgba(0, 0, 0, 0)');\n valueGradient.addColorStop(1, '#000000');\n\n ctx.fillStyle = saturationGradient;\n ctx.fillRect(0, 0, width, height);\n ctx.fillStyle = valueGradient;\n ctx.fillRect(0, 0, width, height);\n }\n\n drawHueCanvas() {\n if (!this.hueCanvas) return;\n const ctx = this.hueCanvas.getContext('2d')!;\n const width = this.hueCanvas.width;\n const height = this.hueCanvas.height;\n\n const hueGradient = ctx.createLinearGradient(0, 0, width, 0);\n for (let i = 0; i <= 360; i += 60) {\n hueGradient.addColorStop(i / 360, `hsl(${i}, 100%, 50%)`);\n }\n\n ctx.fillStyle = hueGradient;\n ctx.fillRect(0, 0, width, height);\n }\n\n drawOpacityCanvas() {\n if (!this.opacityCanvas) return;\n const ctx = this.opacityCanvas.getContext('2d')!;\n const width = this.opacityCanvas.width;\n const height = this.opacityCanvas.height;\n\n ctx.clearRect(0, 0, width, height);\n ctx.fillStyle = '#FFFFFF';\n ctx.fillRect(0, 0, width, height);\n\n const rgb = this.hsvToRgb(this.hue, this.saturation, this.currentVal);\n\n const opacityGradient = ctx.createLinearGradient(0, 0, width, 0);\n opacityGradient.addColorStop(0, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`);\n opacityGradient.addColorStop(1, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)`);\n\n ctx.fillStyle = opacityGradient;\n ctx.fillRect(0, 0, width, height);\n }\n\n updateColor() {\n const rgb = this.hsvToRgb(this.hue, this.saturation, this.currentVal);\n const hex = this.rgbToHex(rgb.r, rgb.g, rgb.b, this.opacity);\n this.color = hex;\n this.drawColorCanvas();\n this.drawOpacityCanvas();\n this.currentColor = hex;\n this.colorChange.emit(this.color);\n }\n\n hsvToRgb(h: number, s: number, v: number): { r: number; g: number; b: number } {\n s /= 100;\n v /= 100;\n\n const c = v * s;\n const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n const m = v - c;\n\n let r = 0, g = 0, b = 0;\n\n if (h >= 0 && h < 60) { r = c; g = x; b = 0; }\n else if (h >= 60 && h < 120) { r = x; g = c; b = 0; }\n else if (h >= 120 && h < 180) { r = 0; g = c; b = x; }\n else if (h >= 180 && h < 240) { r = 0; g = x; b = c; }\n else if (h >= 240 && h < 300) { r = x; g = 0; b = c; }\n else if (h >= 300 && h <= 360) { r = c; g = 0; b = x; }\n\n return {\n r: Math.round((r + m) * 255),\n g: Math.round((g + m) * 255),\n b: Math.round((b + m) * 255),\n };\n }\n\n rgbToHex(red: number, green: number, black: number, opacity = 100) {\n const toHex = (val: number) => {\n const hex = Math.round(val).toString(16);\n return hex.padStart(2, '0');\n };\n\n const rHex = toHex(red);\n const gHex = toHex(green);\n const bHex = toHex(black);\n const alpha = Math.round((opacity / 100) * 255);\n const aHex = toHex(alpha);\n\n return `#${rHex}${gHex}${bHex}${aHex}`;\n }\n\n syncFromHex() {\n if (/^#?[0-9A-F]{6}([0-9A-F]{2})?$/i.test(this.color)) {\n if (!this.color.startsWith('#')) {\n this.color = '#' + this.color;\n }\n\n const hex = this.color.substring(1);\n const r = parseInt(hex.substring(0, 2), 16);\n const g = parseInt(hex.substring(2, 4), 16);\n const b = parseInt(hex.substring(4, 6), 16);\n const a = hex.length === 8 ? parseInt(hex.substring(6, 8), 16) / 255 : 1;\n\n const hsv = this.rgbToHsv(r, g, b, a);\n this.hue = hsv.h;\n this.saturation = hsv.s;\n this.currentVal = hsv.v;\n this.opacity = a * 100;\n\n this.drawColorCanvas();\n this.drawOpacityCanvas();\n }\n }\n\n onHexInputChange(event: Event) {\n this.color = (event.target as HTMLInputElement).value;\n this.syncFromHex();\n }\n\n rgbToHsv(r: number, g: number, b: number, a: number = 1): { h: number; s: number; v: number; a: number } {\n r /= 255;\n g /= 255;\n b /= 255;\n\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const delta = max - min;\n\n let h = 0;\n if (delta !== 0) {\n if (max === r) h = 60 * (((g - b) / delta) % 6);\n else if (max === g) h = 60 * ((b - r) / delta + 2);\n else if (max === b) h = 60 * ((r - g) / delta + 4);\n }\n\n if (h < 0) h += 360;\n\n const s = max === 0 ? 0 : (delta / max) * 100;\n const v = max * 100;\n\n return {\n h: Math.round(h),\n s: Math.round(s),\n v: Math.round(v),\n a: parseFloat(a.toFixed(3)),\n };\n }\n\n getCanvasPosition(canvas: HTMLCanvasElement, event: MouseEvent): { x: number; y: number } {\n const rect = canvas.getBoundingClientRect();\n const scaleX = canvas.width / rect.width;\n const scaleY = canvas.height / rect.height;\n\n return {\n x: (event.clientX - rect.left) * scaleX,\n y: (event.clientY - rect.top) * scaleY,\n };\n }\n\n onColorMouseDown(event: MouseEvent) {\n this.isDragging = true;\n this.updateColorFromPosition(event);\n }\n\n onHueMouseDown(event: MouseEvent) {\n this.isHueDragging = true;\n this.updateHueFromPosition(event);\n }\n\n onOpacityMouseDown(event: MouseEvent) {\n this.isOpacityDragging = true;\n this.updateOpacityFromPosition(event);\n }\n\n updateColorFromPosition(event: MouseEvent) {\n if (!this.colorCanvas) return;\n const pos = this.getCanvasPosition(this.colorCanvas, event);\n\n const x = Math.max(0, Math.min(pos.x, 256));\n const y = Math.max(0, Math.min(pos.y, 150));\n\n this.saturation = Math.round((x / 256) * 100);\n this.currentVal = 100 - Math.round((y / 150) * 100);\n this.updateColor();\n }\n\n updateHueFromPosition(event: MouseEvent) {\n if (!this.hueCanvas) return;\n const pos = this.getCanvasPosition(this.hueCanvas, event);\n const x = Math.max(0, Math.min(pos.x, 256));\n this.hue = Math.round((x / 256) * 360);\n this.drawColorCanvas();\n this.updateColor();\n }\n\n updateOpacityFromPosition(event: MouseEvent) {\n if (!this.opacityCanvas) return;\n const pos = this.getCanvasPosition(this.opacityCanvas, event);\n const x = Math.max(0, Math.min(pos.x, 256));\n\n this.opacity = Math.round((x / 256) * 100);\n this.updateColor();\n }\n\n showEditor() {\n this.showEdit = !this.showEdit;\n this.color = this.currentColor;\n if (this.showEdit) {\n setTimeout(() => {\n this.drawHueCanvas();\n this.drawColorCanvas();\n this.drawOpacityCanvas();\n this.syncFromHex();\n }, 100);\n }\n }\n\n render() {\n return (\n <div class=\"general-container\">\n <div class=\"main-input-container\">\n <div class=\"overlay\" onClick={() => this.showEditor()}></div>\n <div class=\"line-color-preview\">\n <div class=\"color-preview\" style={{ background: this.currentColor }}></div>\n </div>\n <div class=\"color-info\">\n <input \n type=\"text\" \n class=\"color-input\" \n value={this.currentColor} \n maxLength={9} \n readOnly \n />\n </div>\n </div>\n\n <div class={`color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}`}>\n <div class=\"main-color-canvas-container\">\n <canvas \n ref={(el) => this.colorCanvas = el as HTMLCanvasElement} \n width={256} \n height={150} \n onMouseDown={(e) => this.onColorMouseDown(e)}\n ></canvas>\n <div\n class=\"color-selector-pointer\"\n style={{\n left: `${(this.saturation / 100) * 256}px`,\n top: `${((100 - this.currentVal) / 100) * 150}px`\n }}\n ></div>\n </div>\n\n <div class=\"slider-container\">\n <div class=\"slider-group\">\n <div class=\"hue-slider-container\">\n <canvas \n ref={(el) => this.hueCanvas = el as HTMLCanvasElement} \n width={256} \n height={20} \n onMouseDown={(e) => this.onHueMouseDown(e)}\n ></canvas>\n <div class=\"slider-pointer\" style={{ left: `${(this.hue / 360) * 234}px` }}></div>\n </div>\n </div>\n\n <div class=\"slider-group\">\n <div class=\"opacity-slider-container\">\n <canvas\n ref={(el) => this.opacityCanvas = el as HTMLCanvasElement}\n width={256}\n height={20}\n onMouseDown={(e) => this.onOpacityMouseDown(e)}\n ></canvas>\n <div class=\"slider-pointer\" style={{ left: `${(this.opacity / 100) * 234}px` }}></div>\n </div>\n </div>\n\n <div class=\"color-info\">\n <div class=\"color-label\">HEX</div>\n <input\n type=\"text\"\n class=\"color-input\"\n value={this.color}\n onInput={(e) => this.onHexInputChange(e)}\n maxLength={9}\n />\n </div>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-color-picker.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-color-picker/dropi-color-picker.css?tag=dropi-color-picker&encapsulation=shadow","src/components/dropi-color-picker/dropi-color-picker.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n display: block;\n}\n\n.general-container {\n position: relative;\n width: fit-content;\n}\n\n.main-input-container {\n display: flex;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: center;\n gap: var(--Size-3);\n position: relative;\n width: fit-content;\n}\n\n.main-input-container .overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 100;\n cursor: pointer;\n}\n\n.line-color-preview {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n border: 1px solid var(--Gray-Gray-200);\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5px;\n}\n\n.line-color-preview .color-preview {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: 1px solid var(--Gray-Gray-200);\n}\n\n.position-right {\n top: 0;\n left: 250px;\n}\n\n.position-left {\n top: 0;\n right: 200px;\n}\n\n.position-top {\n bottom: 55px;\n}\n\n.position-bottom {\n top: 55px;\n}\n\n.position-bottom::before {\n transform: rotate(90deg);\n left: 50%;\n top: -15px;\n}\n\n.position-right::before {\n left: -6px;\n top: 10px;\n}\n\n.position-top::before {\n transform: rotate(270deg);\n left: 50%;\n bottom: -15px;\n}\n\n.position-left::before {\n transform: rotate(180deg);\n right: -9px;\n}\n\n.color-picker-container::before {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-top: 10px solid transparent;\n border-bottom: 10px solid transparent;\n border-right: 10px solid var(--Neutral-White);\n z-index: 1;\n}\n\n.color-picker-container {\n width: 280px;\n padding: var(--Size-4);\n background: var(--Neutral-White);\n border-radius: var(--Size-2);\n box-shadow: var(--Shadow-large);\n position: absolute;\n z-index: 100;\n transform-origin: top left;\n opacity: 0;\n transition:\n transform 0.2s ease-out,\n opacity 0.2s ease-out;\n pointer-events: none;\n}\n\n.color-picker-container .main-color-canvas-container {\n position: relative;\n margin-bottom: var(--Size-4);\n border: 1px solid var(--Gray-Gray-200);\n border-radius: var(--Size-1);\n display: flex;\n justify-self: center;\n align-items: center;\n}\n\n.color-picker-container .main-color-canvas-container canvas {\n display: block;\n border-radius: var(--Size-1);\n}\n\n.color-picker-container .main-color-canvas-container .color-selector-pointer {\n position: absolute;\n width: var(--Size-3);\n height: var(--Size-3);\n border: 2px solid var(--Neutral-White);\n border-radius: 50%;\n transform: translate(-6px, -6px);\n pointer-events: none;\n}\n\n.color-picker-container .slider-container {\n display: flex;\n flex-direction: column;\n gap: var(--Size-3);\n}\n\n.color-picker-container .slider-container .slider-group {\n display: flex;\n flex-direction: column;\n gap: var(--Size-1);\n}\n\n.color-picker-container .slider-container .slider-group label {\n font-size: var(--font-size-xs);\n color: var(--Gray-Gray-500);\n font-weight: var(--font-weight-bold);\n}\n\n.color-picker-container .slider-container .slider-group .hue-slider-container,\n.color-picker-container .slider-container .slider-group .opacity-slider-container {\n position: relative;\n height: var(--Size-3);\n border-radius: var(--Size-4);\n overflow: hidden;\n}\n\n.color-picker-container .slider-container .slider-group .hue-slider-container canvas,\n.color-picker-container .slider-container .slider-group .opacity-slider-container canvas {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.color-picker-container .slider-container .slider-group .hue-slider-container .slider-pointer,\n.color-picker-container .slider-container .slider-group .opacity-slider-container .slider-pointer {\n position: absolute;\n top: 0;\n height: var(--Size-3);\n width: var(--Size-3);\n background: transparent;\n border: 2px solid var(--Neutral-White);\n border-radius: 50%;\n pointer-events: none;\n}\n\n.color-picker-container.show {\n transform: scale(1);\n opacity: 1;\n pointer-events: auto;\n}\n\n.color-info .color-label {\n font-size: var(--font-size-xs);\n color: var(--Gray-Gray-500);\n font-weight: var(--font-weight-bold);\n text-transform: uppercase;\n margin-bottom: var(--Size-2);\n}\n\n.color-info .color-input {\n border: 1px solid var(--Gray-Gray-200, #ddd);\n border-radius: var(--Size-1);\n padding: 6px 8px;\n font-size: var(--font-size-s);\n width: 100%;\n font-family: monospace;\n text-transform: uppercase;\n background-color: var(--Neutral-White, #ffffff);\n color: var(--Gray-Gray-800, #1f2433);\n outline: none;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Element, Watch } from '@stencil/core';\n\n@Component({\n tag: 'dropi-color-picker',\n styleUrl: 'dropi-color-picker.css',\n shadow: true,\n})\nexport class DropiColorPicker {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) currentColor: string = '#ffffff';\n @Prop() position: 'top' \| 'bottom' \| 'left' \| 'right' = 'right';\n\n @Event() colorChange: EventEmitter<string>;\n\n @State() private color: string = '';\n @State() private hue: number = 0;\n @State() private saturation: number = 0;\n @State() private currentVal: number = 0;\n @State() private opacity: number = 100;\n \n @State() private showEdit: boolean = false;\n\n private isDragging: boolean = false;\n private isHueDragging: boolean = false;\n private isOpacityDragging: boolean = false;\n\n private colorCanvas!: HTMLCanvasElement;\n private hueCanvas!: HTMLCanvasElement;\n private opacityCanvas!: HTMLCanvasElement;\n\n @Watch('value')\n onValueChange(newValue: string) {\n if (!this.showEdit) {\n this.color = newValue;\n this.syncFromHex();\n }\n }\n\n componentWillLoad() {\n this.color = this.currentColor;\n this.syncFromHex();\n }\n\n componentDidLoad() {\n document.addEventListener('mousemove', this.onMouseMove.bind(this));\n document.addEventListener('mouseup', this.onMouseUp.bind(this));\n document.addEventListener('click', this.handleClickOutside.bind(this));\n \n // Defer canvas drawing slightly to ensure elements are rendered\n setTimeout(() => {\n if (this.hueCanvas) this.drawHueCanvas();\n if (this.colorCanvas) this.drawColorCanvas();\n if (this.opacityCanvas) this.drawOpacityCanvas();\n }, 50);\n }\n\n disconnectedCallback() {\n document.removeEventListener('mousemove', this.onMouseMove.bind(this));\n document.removeEventListener('mouseup', this.onMouseUp.bind(this));\n document.removeEventListener('click', this.handleClickOutside.bind(this));\n }\n\n onMouseMove(event: MouseEvent) {\n if (this.isDragging) {\n this.updateColorFromPosition(event);\n return;\n }\n if (this.isHueDragging) {\n this.updateHueFromPosition(event);\n return;\n }\n if (this.isOpacityDragging) {\n this.updateOpacityFromPosition(event);\n return;\n }\n }\n\n onMouseUp() {\n this.isDragging = false;\n this.isHueDragging = false;\n this.isOpacityDragging = false;\n }\n\n handleClickOutside(event: MouseEvent) {\n // Determine if the click target is outside the host element\n const clickedInside = event.composedPath().includes(this.el);\n if (!clickedInside && this.showEdit) {\n this.showEdit = false;\n this.currentColor = this.color;\n this.colorChange.emit(this.color);\n }\n }\n\n drawColorCanvas() {\n if (!this.colorCanvas) return;\n const ctx = this.colorCanvas.getContext('2d')!;\n const width = this.colorCanvas.width;\n const height = this.colorCanvas.height;\n\n const saturationGradient = ctx.createLinearGradient(0, 0, width, 0);\n saturationGradient.addColorStop(0, '#FFFFFF');\n saturationGradient.addColorStop(1, `hsl(${this.hue ?? 0}, 100%, 50%)`);\n\n const valueGradient = ctx.createLinearGradient(0, 0, 0, height);\n valueGradient.addColorStop(0, 'rgba(0, 0, 0, 0)');\n valueGradient.addColorStop(1, '#000000');\n\n ctx.fillStyle = saturationGradient;\n ctx.fillRect(0, 0, width, height);\n ctx.fillStyle = valueGradient;\n ctx.fillRect(0, 0, width, height);\n }\n\n drawHueCanvas() {\n if (!this.hueCanvas) return;\n const ctx = this.hueCanvas.getContext('2d')!;\n const width = this.hueCanvas.width;\n const height = this.hueCanvas.height;\n\n const hueGradient = ctx.createLinearGradient(0, 0, width, 0);\n for (let i = 0; i <= 360; i += 60) {\n hueGradient.addColorStop(i / 360, `hsl(${i}, 100%, 50%)`);\n }\n\n ctx.fillStyle = hueGradient;\n ctx.fillRect(0, 0, width, height);\n }\n\n drawOpacityCanvas() {\n if (!this.opacityCanvas) return;\n const ctx = this.opacityCanvas.getContext('2d')!;\n const width = this.opacityCanvas.width;\n const height = this.opacityCanvas.height;\n\n ctx.clearRect(0, 0, width, height);\n ctx.fillStyle = '#FFFFFF';\n ctx.fillRect(0, 0, width, height);\n\n const rgb = this.hsvToRgb(this.hue, this.saturation, this.currentVal);\n\n const opacityGradient = ctx.createLinearGradient(0, 0, width, 0);\n opacityGradient.addColorStop(0, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`);\n opacityGradient.addColorStop(1, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)`);\n\n ctx.fillStyle = opacityGradient;\n ctx.fillRect(0, 0, width, height);\n }\n\n updateColor() {\n const rgb = this.hsvToRgb(this.hue, this.saturation, this.currentVal);\n const hex = this.rgbToHex(rgb.r, rgb.g, rgb.b, this.opacity);\n this.color = hex;\n this.drawColorCanvas();\n this.drawOpacityCanvas();\n this.currentColor = hex;\n this.colorChange.emit(this.color);\n }\n\n hsvToRgb(h: number, s: number, v: number): { r: number; g: number; b: number } {\n s /= 100;\n v /= 100;\n\n const c = v * s;\n const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n const m = v - c;\n\n let r = 0, g = 0, b = 0;\n\n if (h >= 0 && h < 60) { r = c; g = x; b = 0; }\n else if (h >= 60 && h < 120) { r = x; g = c; b = 0; }\n else if (h >= 120 && h < 180) { r = 0; g = c; b = x; }\n else if (h >= 180 && h < 240) { r = 0; g = x; b = c; }\n else if (h >= 240 && h < 300) { r = x; g = 0; b = c; }\n else if (h >= 300 && h <= 360) { r = c; g = 0; b = x; }\n\n return {\n r: Math.round((r + m) * 255),\n g: Math.round((g + m) * 255),\n b: Math.round((b + m) * 255),\n };\n }\n\n rgbToHex(red: number, green: number, black: number, opacity = 100) {\n const toHex = (val: number) => {\n const hex = Math.round(val).toString(16);\n return hex.padStart(2, '0');\n };\n\n const rHex = toHex(red);\n const gHex = toHex(green);\n const bHex = toHex(black);\n const alpha = Math.round((opacity / 100) * 255);\n const aHex = toHex(alpha);\n\n return `#${rHex}${gHex}${bHex}${aHex}`;\n }\n\n syncFromHex() {\n if (/^#?[0-9A-F]{6}([0-9A-F]{2})?$/i.test(this.color)) {\n if (!this.color.startsWith('#')) {\n this.color = '#' + this.color;\n }\n\n const hex = this.color.substring(1);\n const r = parseInt(hex.substring(0, 2), 16);\n const g = parseInt(hex.substring(2, 4), 16);\n const b = parseInt(hex.substring(4, 6), 16);\n const a = hex.length === 8 ? parseInt(hex.substring(6, 8), 16) / 255 : 1;\n\n const hsv = this.rgbToHsv(r, g, b, a);\n this.hue = hsv.h;\n this.saturation = hsv.s;\n this.currentVal = hsv.v;\n this.opacity = a * 100;\n\n this.drawColorCanvas();\n this.drawOpacityCanvas();\n }\n }\n\n onHexInputChange(event: Event) {\n this.color = (event.target as HTMLInputElement).value;\n this.syncFromHex();\n }\n\n rgbToHsv(r: number, g: number, b: number, a: number = 1): { h: number; s: number; v: number; a: number } {\n r /= 255;\n g /= 255;\n b /= 255;\n\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const delta = max - min;\n\n let h = 0;\n if (delta !== 0) {\n if (max === r) h = 60 * (((g - b) / delta) % 6);\n else if (max === g) h = 60 * ((b - r) / delta + 2);\n else if (max === b) h = 60 * ((r - g) / delta + 4);\n }\n\n if (h < 0) h += 360;\n\n const s = max === 0 ? 0 : (delta / max) * 100;\n const v = max * 100;\n\n return {\n h: Math.round(h),\n s: Math.round(s),\n v: Math.round(v),\n a: parseFloat(a.toFixed(3)),\n };\n }\n\n getCanvasPosition(canvas: HTMLCanvasElement, event: MouseEvent): { x: number; y: number } {\n const rect = canvas.getBoundingClientRect();\n const scaleX = canvas.width / rect.width;\n const scaleY = canvas.height / rect.height;\n\n return {\n x: (event.clientX - rect.left) * scaleX,\n y: (event.clientY - rect.top) * scaleY,\n };\n }\n\n onColorMouseDown(event: MouseEvent) {\n this.isDragging = true;\n this.updateColorFromPosition(event);\n }\n\n onHueMouseDown(event: MouseEvent) {\n this.isHueDragging = true;\n this.updateHueFromPosition(event);\n }\n\n onOpacityMouseDown(event: MouseEvent) {\n this.isOpacityDragging = true;\n this.updateOpacityFromPosition(event);\n }\n\n updateColorFromPosition(event: MouseEvent) {\n if (!this.colorCanvas) return;\n const pos = this.getCanvasPosition(this.colorCanvas, event);\n\n const x = Math.max(0, Math.min(pos.x, 256));\n const y = Math.max(0, Math.min(pos.y, 150));\n\n this.saturation = Math.round((x / 256) * 100);\n this.currentVal = 100 - Math.round((y / 150) * 100);\n this.updateColor();\n }\n\n updateHueFromPosition(event: MouseEvent) {\n if (!this.hueCanvas) return;\n const pos = this.getCanvasPosition(this.hueCanvas, event);\n const x = Math.max(0, Math.min(pos.x, 256));\n this.hue = Math.round((x / 256) * 360);\n this.drawColorCanvas();\n this.updateColor();\n }\n\n updateOpacityFromPosition(event: MouseEvent) {\n if (!this.opacityCanvas) return;\n const pos = this.getCanvasPosition(this.opacityCanvas, event);\n const x = Math.max(0, Math.min(pos.x, 256));\n\n this.opacity = Math.round((x / 256) * 100);\n this.updateColor();\n }\n\n showEditor() {\n this.showEdit = !this.showEdit;\n this.color = this.currentColor;\n if (this.showEdit) {\n setTimeout(() => {\n this.drawHueCanvas();\n this.drawColorCanvas();\n this.drawOpacityCanvas();\n this.syncFromHex();\n }, 100);\n }\n }\n\n render() {\n return (\n <div class=\"general-container\">\n <div class=\"main-input-container\">\n <div class=\"overlay\" onClick={() => this.showEditor()}></div>\n <div class=\"line-color-preview\">\n <div class=\"color-preview\" style={{ background: this.currentColor }}></div>\n </div>\n <div class=\"color-info\">\n <input \n type=\"text\" \n class=\"color-input\" \n value={this.currentColor} \n maxLength={9} \n readOnly \n />\n </div>\n </div>\n\n <div class={`color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}`}>\n <div class=\"main-color-canvas-container\">\n <canvas \n ref={(el) => this.colorCanvas = el as HTMLCanvasElement} \n width={256} \n height={150} \n onMouseDown={(e) => this.onColorMouseDown(e)}\n ></canvas>\n <div\n class=\"color-selector-pointer\"\n style={{\n left: `${(this.saturation / 100) * 256}px`,\n top: `${((100 - this.currentVal) / 100) * 150}px`\n }}\n ></div>\n </div>\n\n <div class=\"slider-container\">\n <div class=\"slider-group\">\n <div class=\"hue-slider-container\">\n <canvas \n ref={(el) => this.hueCanvas = el as HTMLCanvasElement} \n width={256} \n height={20} \n onMouseDown={(e) => this.onHueMouseDown(e)}\n ></canvas>\n <div class=\"slider-pointer\" style={{ left: `${(this.hue / 360) * 234}px` }}></div>\n </div>\n </div>\n\n <div class=\"slider-group\">\n <div class=\"opacity-slider-container\">\n <canvas\n ref={(el) => this.opacityCanvas = el as HTMLCanvasElement}\n width={256}\n height={20}\n onMouseDown={(e) => this.onOpacityMouseDown(e)}\n ></canvas>\n <div class=\"slider-pointer\" style={{ left: `${(this.opacity / 100) * 234}px` }}></div>\n </div>\n </div>\n\n <div class=\"color-info\">\n <div class=\"color-label\">HEX</div>\n <input\n type=\"text\"\n class=\"color-input\"\n value={this.color}\n onInput={(e) => this.onHexInputChange(e)}\n maxLength={9}\n />\n </div>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-country-flags.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, h } from './index-BKkSRXlb.js';
-const dropiCountryFlagsCss = () => `:host{display:inline-flex}.flag{max-width:40px;max-height:40px;margin:0;display:flex;align-items:center;justify-content:center}.flag img{width:100%;height:100%;object-fit:cover}.circle{border-radius:50%;overflow:hidden}.rectangle{border-radius:4px;overflow:hidden;max-width:32px !important;max-height:24px !important}`;
+const dropiCountryFlagsCss = () => `:host{display:inline-flex;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}.flag{max-width:40px;max-height:40px;margin:0;display:flex;align-items:center;justify-content:center}.flag img{width:100%;height:100%;object-fit:cover}.circle{border-radius:50%;overflow:hidden}.rectangle{border-radius:4px;overflow:hidden;max-width:32px !important;max-height:24px !important}`;
 const DropiCountryFlags = class {
     constructor(hostRef) {
@@ -27,7 +27,7 @@ const DropiCountryFlags = class {
             style['width'] = this.width.includes('px') ? this.width : `${this.width}px`;
         if (this.height)
             style['height'] = this.height.includes('px') ? this.height : `${this.height}px`;
-        return (h("figure", { key: '451765b675d5b27dc0357a1a2b6dd338690361c8', class: `flag ${this.customStyle ?? 'flat'}` }, h("img", { key: 'f58a64e7d78298d328be2ba625c852a5eddc392f', src: this.src, style: style, alt: `flag-${this.country}` })));
+        return (h("figure", { key: '1b50bb5d6883388a3e545d068642d404bac3f314', class: `flag ${this.customStyle ?? 'flat'}` }, h("img", { key: '2c8d08bd972eb1f99188d17719d4e9be0f9bbcd5', src: this.src, style: style, alt: `flag-${this.country}` })));
     }
 };
 DropiCountryFlags.style = dropiCountryFlagsCss();

package/dist/dropi-ui/dropi-country-flags.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dropi-country-flags.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,MAAM,CAAC,~~6TAA6T~~,CAAC;;~~MCcrV~~,iBAAiB,GAAA,MAAA;;;;;IAEpB,OAAO,GAAW,EAAE;;IAEpB,WAAW,GAAoC,MAAM;;IAErD,KAAK,GAAW,EAAE;;IAElB,MAAM,GAAW,EAAE;AAE3B,IAAA,IAAY,GAAG,GAAA;AACb,QAAA,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,EAAE,WAAW,EAAE;AAC/C,QAAA,IAAI,IAAI,CAAC,WAAW,KAAK,QAAQ,EAAE;AACjC,YAAA,OAAO,mDAAmD,IAAI,CAAC,WAAW,EAAE,MAAM;;QAEpF,OAAO,CAAA,qBAAA,EAAwB,IAAI,CAAA,YAAA,CAAc;;IAGnD,MAAM,GAAA;QACJ,MAAM,KAAK,GAA2B,EAAE;QACxC,IAAI,IAAI,CAAC,KAAK;YAAE,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,CAAA,EAAG,IAAI,CAAC,KAAK,CAAA,EAAA,CAAI;QAC3F,IAAI,IAAI,CAAC,MAAM;YAAE,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAA,EAAG,IAAI,CAAC,MAAM,CAAA,EAAA,CAAI;QAEhG,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,CAAA,KAAA,EAAQ,IAAI,CAAC,WAAW,IAAI,MAAM,EAAE,EAAA,EACjD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,CAAA,KAAA,EAAQ,IAAI,CAAC,OAAO,EAAE,EAAA,CAAI,CAC1D;;;;;;;","names":[],"sources":["src/components/dropi-country-flags/dropi-country-flags.css?tag=dropi-country-flags&encapsulation=shadow","src/components/dropi-country-flags/dropi-country-flags.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n}\n\n.flag {\n max-width: 40px;\n max-height: 40px;\n margin: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.flag img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.circle {\n border-radius: 50%;\n overflow: hidden;\n}\n\n.rectangle {\n border-radius: 4px;\n overflow: hidden;\n max-width: 32px !important;\n max-height: 24px !important;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/*\n @component dropi-country-flags\n * Displays a country flag image. Supports circle, rectangle, and flat styles.\n \n @example\n * <dropi-country-flags country=\"CO\" style=\"circle\"></dropi-country-flags>\n /\n@Component({\n tag: 'dropi-country-flags',\n styleUrl: 'dropi-country-flags.css',\n shadow: true,\n})\nexport class DropiCountryFlags {\n /* ISO 3166-1 alpha-2 country code (e.g. \"CO\", \"US\") /\n @Prop() country: string = '';\n /* Visual style: circle uses circle-flags CDN, rectangle/flat uses flagsapi /\n @Prop() customStyle: 'circle' \| 'rectangle' \| 'flat' = 'flat';\n /* Width in px /\n @Prop() width: string = '';\n /* Height in px */\n @Prop() height: string = '';\n\n private get src(): string {\n const code = (this.country \|\| '').toUpperCase();\n if (this.customStyle === 'circle') {\n return `https://hatscripts.github.io/circle-flags/flags/${code.toLowerCase()}.svg`;\n }\n return `https://flagsapi.com/${code}/flat/64.png`;\n }\n\n render() {\n const style: Record<string, string> = {};\n if (this.width) style['width'] = this.width.includes('px') ? this.width : `${this.width}px`;\n if (this.height) style['height'] = this.height.includes('px') ? this.height : `${this.height}px`;\n\n return (\n <figure class={`flag ${this.customStyle ?? 'flat'}`}>\n <img src={this.src} style={style} alt={`flag-${this.country}`} />\n </figure>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-country-flags.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,MAAM,CAAC,kZAAkZ,CAAC;;MCc1a,iBAAiB,GAAA,MAAA;;;;;IAEpB,OAAO,GAAW,EAAE;;IAEpB,WAAW,GAAoC,MAAM;;IAErD,KAAK,GAAW,EAAE;;IAElB,MAAM,GAAW,EAAE;AAE3B,IAAA,IAAY,GAAG,GAAA;AACb,QAAA,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,EAAE,WAAW,EAAE;AAC/C,QAAA,IAAI,IAAI,CAAC,WAAW,KAAK,QAAQ,EAAE;AACjC,YAAA,OAAO,mDAAmD,IAAI,CAAC,WAAW,EAAE,MAAM;;QAEpF,OAAO,CAAA,qBAAA,EAAwB,IAAI,CAAA,YAAA,CAAc;;IAGnD,MAAM,GAAA;QACJ,MAAM,KAAK,GAA2B,EAAE;QACxC,IAAI,IAAI,CAAC,KAAK;YAAE,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,CAAA,EAAG,IAAI,CAAC,KAAK,CAAA,EAAA,CAAI;QAC3F,IAAI,IAAI,CAAC,MAAM;YAAE,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAA,EAAG,IAAI,CAAC,MAAM,CAAA,EAAA,CAAI;QAEhG,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,CAAA,KAAA,EAAQ,IAAI,CAAC,WAAW,IAAI,MAAM,EAAE,EAAA,EACjD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,CAAA,KAAA,EAAQ,IAAI,CAAC,OAAO,EAAE,EAAA,CAAI,CAC1D;;;;;;;","names":[],"sources":["src/components/dropi-country-flags/dropi-country-flags.css?tag=dropi-country-flags&encapsulation=shadow","src/components/dropi-country-flags/dropi-country-flags.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n display: inline-flex;\n}\n\n.flag {\n max-width: 40px;\n max-height: 40px;\n margin: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.flag img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.circle {\n border-radius: 50%;\n overflow: hidden;\n}\n\n.rectangle {\n border-radius: 4px;\n overflow: hidden;\n max-width: 32px !important;\n max-height: 24px !important;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/*\n @component dropi-country-flags\n * Displays a country flag image. Supports circle, rectangle, and flat styles.\n \n @example\n * <dropi-country-flags country=\"CO\" style=\"circle\"></dropi-country-flags>\n /\n@Component({\n tag: 'dropi-country-flags',\n styleUrl: 'dropi-country-flags.css',\n shadow: true,\n})\nexport class DropiCountryFlags {\n /* ISO 3166-1 alpha-2 country code (e.g. \"CO\", \"US\") /\n @Prop() country: string = '';\n /* Visual style: circle uses circle-flags CDN, rectangle/flat uses flagsapi /\n @Prop() customStyle: 'circle' \| 'rectangle' \| 'flat' = 'flat';\n /* Width in px /\n @Prop() width: string = '';\n /* Height in px */\n @Prop() height: string = '';\n\n private get src(): string {\n const code = (this.country \|\| '').toUpperCase();\n if (this.customStyle === 'circle') {\n return `https://hatscripts.github.io/circle-flags/flags/${code.toLowerCase()}.svg`;\n }\n return `https://flagsapi.com/${code}/flat/64.png`;\n }\n\n render() {\n const style: Record<string, string> = {};\n if (this.width) style['width'] = this.width.includes('px') ? this.width : `${this.width}px`;\n if (this.height) style['height'] = this.height.includes('px') ? this.height : `${this.height}px`;\n\n return (\n <figure class={`flag ${this.customStyle ?? 'flat'}`}>\n <img src={this.src} style={style} alt={`flag-${this.country}`} />\n </figure>\n );\n }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-BKkSRXlb.js';
-const dropiCountrySelectorCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}label{display:block;font-size:var(--font-size-xs, 11px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066);margin-bottom:6px}.required{color:var(--Error-Error-500, #ef4444);margin-left:2px}.select-button{width:100%;height:44px;padding:0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 14px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.15s ease}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #3b82f6)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-button.select-completed{color:var(--Gray-Gray-700, #32394d)}.select-button.select-invalid{border-color:var(--Error-Error-500, #ef4444)}.selected-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1}.selected-option{display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 14px)}.placeholder-text{color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}.flag-img{border-radius:var(--Border-1, 4px);width:24px;height:24px;object-fit:cover;flex-shrink:0}.select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);z-index:var(--dropi-z-index-overlay, 11000);list-style:none;padding:0;margin:0;box-shadow:0 8px 24px rgba(0, 0, 0, 0.10);overflow:hidden;transition:max-height 0.2s ease, opacity 0.2s ease}.select-dropdown.expanded{max-height:300px;opacity:1;overflow-y:auto}.select-dropdown.collapsed{max-height:0;opacity:0;pointer-events:none;border-color:transparent;box-shadow:none}.select-dropdown::-webkit-scrollbar{width:6px}.select-dropdown::-webkit-scrollbar-track{background:transparent}.select-dropdown::-webkit-scrollbar-thumb{background:var(--Gray-Gray-200, #c3c9d9);border-radius:4px}.select-dropdown::-webkit-scrollbar-thumb:hover{background:var(--Gray-Gray-300, #a3abbf)}.search-li{padding:10px 12px;position:sticky;top:0;background:var(--Neutral-White, #ffffff);z-index:1;border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2)}.search-field{position:relative;display:flex;align-items:center}.country-search{width:100%;height:36px;padding:0 36px 0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);outline:none;font-size:var(--font-size-s, 14px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:var(--Gray-Gray-50, #f7f8fa);transition:border-color 0.15s, background 0.15s}.country-search:focus{border-color:var(--Info-Info-500, #50a5f1);background:var(--Neutral-White, #ffffff)}.country-search::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-icon{position:absolute;right:10px;display:flex;align-items:center;pointer-events:none}.option{width:100%;min-height:44px;padding:10px 16px;border:none;background:transparent;text-align:left;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 14px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background 0.1s ease;white-space:nowrap}.option:hover{background:var(--Gray-Gray-50, #f7f8fa)}`;
+const dropiCountrySelectorCss = () => `:host{display:block;width:100%;text-align:left;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}label{display:block;font-size:var(--font-size-xs, 11px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066);margin-bottom:6px}.required{color:var(--Error-Error-500, #ef4444);margin-left:2px}.select-button{width:100%;height:40px;padding:0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 14px);font-family:var(--font-family-01, 'Inter', sans-serif);display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.15s ease}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #3b82f6)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-button.select-completed{color:var(--Gray-Gray-700, #32394d)}.select-button.select-invalid{border-color:var(--Error-Error-500, #ef4444)}.selected-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1}.selected-option{display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 14px)}.placeholder-text{color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}.flag-img{border-radius:var(--Border-1, 4px);width:24px;height:24px;object-fit:cover;flex-shrink:0}.select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);z-index:var(--dropi-z-index-overlay, 11000);list-style:none;padding:0;margin:0;box-shadow:0 8px 24px rgba(0, 0, 0, 0.10);overflow:hidden;transition:max-height 0.2s ease, opacity 0.2s ease}.select-dropdown.expanded{max-height:300px;opacity:1;overflow-y:auto}.select-dropdown.collapsed{max-height:0;opacity:0;pointer-events:none;border-color:transparent;box-shadow:none}.select-dropdown::-webkit-scrollbar{width:6px}.select-dropdown::-webkit-scrollbar-track{background:transparent}.select-dropdown::-webkit-scrollbar-thumb{background:var(--Gray-Gray-200, #c3c9d9);border-radius:4px}.select-dropdown::-webkit-scrollbar-thumb:hover{background:var(--Gray-Gray-300, #a3abbf)}.search-li{padding:10px 12px;position:sticky;top:0;background:var(--Neutral-White, #ffffff);z-index:1;border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2)}.search-field{position:relative;display:flex;align-items:center}.country-search{width:100%;height:36px;padding:0 36px 0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);outline:none;font-size:var(--font-size-s, 14px);font-family:var(--font-family-01, 'Inter', sans-serif);color:var(--Gray-Gray-700, #32394d);background:var(--Gray-Gray-50, #f7f8fa);transition:border-color 0.15s, background 0.15s}.country-search:focus{border-color:var(--Info-Info-500, #50a5f1);background:var(--Neutral-White, #ffffff)}.country-search::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-icon{position:absolute;right:10px;display:flex;align-items:center;pointer-events:none}.option{width:100%;min-height:44px;padding:10px 16px;border:none;background:transparent;text-align:left;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 14px);font-family:var(--font-family-01, 'Inter', sans-serif);cursor:pointer;display:flex;align-items:center;gap:10px;transition:background 0.1s ease;white-space:nowrap}.option:hover{background:var(--Gray-Gray-50, #f7f8fa)}`;
 const PORTAL_CSS = `
 .select-dropdown {
@@ -275,11 +275,11 @@ const DropiCountrySelector = class {
         this.dropiChange.emit(country);
     }
     render() {
-        return (h("div", { key: '1e590f390f45a91df010db5a25139f5a5b234105', class: "custom-select" }, this.label && (h("label", { key: '073b9c7fb9c09d0addf66bce1c132632ab726b70' }, this.label, this.showObligatory && h("span", { key: '8471da6b6004c35e71d04c0d649a796391ffb703', class: "required" }, "*"))), h("button", { key: '45fdbd8ae914084fd713708947ee6b2256b78b32', type: "button", ref: (el) => { this.buttonRef = el; }, class: {
+        return (h("div", { key: '2301c76f8096b996d676479583fe7febee746e48', class: "custom-select" }, this.label && (h("label", { key: '7564e69536b9f2040d7ceac30f5e66518ff36a1f' }, this.label, this.showObligatory && h("span", { key: 'c98915803a584c46ad5bcfc650ae52f92c091931', class: "required" }, "*"))), h("button", { key: '6a902ae3b5d2b2b24023eda7708c0f7b418195c9', 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: '75100da9fe6ca3b3e1c60d446374a1ed90ab8419', 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: '3d4ffee3933d05e02236f1283128cb30a876870f', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), h("ul", { key: '5ab2559993f7100c52749b57e15b42605ca503b2', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, h("li", { key: 'da243d50aa04ab24f2ac6b20dd152031458cd474', class: "search-li" }, h("div", { key: 'b27ca2961821252eed8b2917b47b5c03674f5af6', class: "search-field" }, h("input", { key: '4438520038bcf88efabf67d9e6745b51b7f089d3', 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: 'd8753c452b5054e23213b94e83884f5297862abc', class: "search-icon" }, h("dropi-icon", { key: '3fac8e38cf990990a91a8dfda4701796237e8c44', 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: '68bd0e375e7f31e1927a8179070e832d4fe20c94', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && h("dropi-icon", { key: '6328385caf1f3518c9fa0da9f30469d12c0940ef', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '704ee063a80566aed85849c2649c399796069e86' }, this.textHelper)))));
+            }, disabled: this.disabled, onClick: () => this.open() }, h("div", { key: 'bebdf6607a7249032df869b8fd094bcb00b890d7', 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: 'dd5f0d64c4ac8ad055deb4dde05146fcc1402943', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), h("ul", { key: '6976c04e703088beb3126a03c8dbd19aa08b3335', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, h("li", { key: '2db4bcb251972595fa03c39f7dae51e49a1b7cd2', class: "search-li" }, h("div", { key: '0daa1befc77355e8648ff76baabb6a76409e5e24', class: "search-field" }, h("input", { key: '5d3c5afd92be90fadd6637247aecbed3666dcf9e', 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: 'eef0eae53f59020f75ede2c5d28513c23daf1014', class: "search-icon" }, h("dropi-icon", { key: '29dc956de07c22b7f41581d1f4dad94e0049fe06', 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: 'eea28425b7ed7eaed34fd6ebf9c3dfc2ca171bfb', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && h("dropi-icon", { key: '00ec44693c5cbd8806211d529f4c3cc8628f40ed', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: 'b2b930a92889c3927275891a6b8a45fb341b55dd' }, this.textHelper)))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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

	@@ -1 +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, 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}
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 {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\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: 40px;\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: var(--font-family-01, 'Inter', sans-serif);\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: var(--font-family-01, 'Inter', sans-serif);\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: var(--font-family-01, 'Inter', sans-serif);\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}