@dropi/ui 0.1.42 → 0.1.44

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

@@ -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: 200;\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}
+{"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}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-Cvp2LQOM.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-D0Z06C2b.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}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-Cvp2LQOM.js';
+import { r as registerInstance, h } from './index-D0Z06C2b.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}`;
 

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

@@ -1,7 +1,36 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-Cvp2LQOM.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-D0Z06C2b.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:200;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}*,*::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 PORTAL_CSS = `
+.select-dropdown {
+  background: #ffffff;
+  border: 1px solid #c3c9d9;
+  border-radius: 8px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  box-shadow: 0 8px 24px rgba(0,0,0,.10);
+  overflow: hidden;
+  transition: max-height .2s ease, opacity .2s ease;
+  font-family: inherit;
+  font-size: 14px;
+}
+.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: #c3c9d9; border-radius: 4px; }
+.search-li { padding: 10px 12px; position: sticky; top: 0; background: #ffffff; z-index: 1; border-bottom: 1px solid #e6eaf2; }
+.search-field { position: relative; display: flex; align-items: center; }
+.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; }
+.country-search:focus { border-color: #50a5f1; background: #ffffff; }
+.country-search::placeholder { color: #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: #32394d; font-size: 14px; font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background .1s ease; white-space: nowrap; }
+.option:hover { background: #f7f8fa; }
+.flag-img { border-radius: 4px; width: 24px; height: 24px; object-fit: cover; flex-shrink: 0; }
+`;
 const COUNTRIES = [
     { name: 'Afghanistan', code: 'AF', codePhone: '93' },
     { name: 'Albania', code: 'AL', codePhone: '355' },
@@ -97,7 +126,17 @@ const DropiCountrySelector = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.dropiChange = createEvent(this, "dropiChange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
+    internals;
+    /** Name for native form submission */
+    name = '';
     /** Label above the select */
     label = '';
     /** Placeholder when nothing is selected */
@@ -119,19 +158,30 @@ const DropiCountrySelector = class {
      * When provided, its non-null fields override individual props.
      */
     selectProperties = null;
+    /** When set to "body", the dropdown renders with fixed positioning to escape parent overflow clipping */
+    appendTo = '';
     /** Emitted when a country is selected. Detail is the CountryItem. */
     dropiChange;
     isOpen = false;
     selected = null;
     get el() { return getElement(this); }
+    buttonRef;
+    portalContainer = null;
+    portalFocusedSelector = null;
     handleDocClick(e) {
-        if (this.isOpen && !e.composedPath().includes(this.el)) {
-            this.isOpen = false;
-        }
+        if (!this.isOpen)
+            return;
+        const path = e.composedPath();
+        if (path.includes(this.el))
+            return;
+        if (this.portalContainer && path.includes(this.portalContainer))
+            return;
+        this.isOpen = false;
     }
     searchInputRef;
     currentSelectionChanged(val) {
         this.selected = COUNTRIES.find(c => c.code === val) || null;
+        this.internals.setFormValue(val);
     }
     selectPropertiesChanged(val) {
         if (!val)
@@ -152,6 +202,56 @@ const DropiCountrySelector = class {
             this.selectPropertiesChanged(this.selectProperties);
         if (this.currentSelection)
             this.currentSelectionChanged(this.currentSelection);
+        this.internals.setFormValue(this.currentSelection ?? '');
+    }
+    componentDidLoad() {
+        if (this.appendTo !== 'body')
+            return;
+        this.portalContainer = document.createElement('div');
+        const style = document.createElement('style');
+        style.textContent = PORTAL_CSS;
+        this.portalContainer.appendChild(style);
+        document.body.appendChild(this.portalContainer);
+    }
+    disconnectedCallback() {
+        this.returnUlToShadow();
+        this.portalContainer?.remove();
+        this.portalContainer = null;
+    }
+    componentWillRender() {
+        if (!this.portalContainer)
+            return;
+        const active = document.activeElement;
+        if (active && this.portalContainer.contains(active)) {
+            this.portalFocusedSelector = '.' + Array.from(active.classList).join('.');
+        }
+        this.returnUlToShadow();
+    }
+    componentDidRender() {
+        if (!this.portalContainer || !this.buttonRef)
+            return;
+        const ul = this.el.shadowRoot?.querySelector('ul.select-dropdown');
+        if (!ul)
+            return;
+        const rect = this.buttonRef.getBoundingClientRect();
+        ul.style.cssText = `position:fixed;top:${rect.bottom + 4}px;left:${rect.left}px;width:${rect.width}px;z-index:11000;`;
+        this.portalContainer.appendChild(ul);
+        if (this.portalFocusedSelector) {
+            const el = this.portalContainer.querySelector(this.portalFocusedSelector);
+            if (el) {
+                const len = el.value?.length ?? 0;
+                el.focus();
+                el.setSelectionRange?.(len, len);
+            }
+            this.portalFocusedSelector = null;
+        }
+    }
+    returnUlToShadow() {
+        if (!this.portalContainer)
+            return;
+        const ul = this.portalContainer.querySelector('ul.select-dropdown');
+        if (ul)
+            this.el.shadowRoot?.querySelector('.custom-select')?.appendChild(ul);
     }
     get filtered() {
         if (!this.searchTerm)
@@ -175,12 +275,13 @@ const DropiCountrySelector = class {
         this.dropiChange.emit(country);
     }
     render() {
-        return (h("div", { key: '036ea5668f8ff842f69f13c9d94000ecdc96126b', class: "custom-select" }, this.label && (h("label", { key: '457b2a26a2e9ea425aa95a2a162f2f3e547376e3' }, this.label, this.showObligatory && h("span", { key: 'fc2b04e48d9372e0e5c1f593e57797558dc2e359', class: "required" }, "*"))), h("button", { key: '0239ee64b4859e45a9b8dcff0e175124d16cdc09', type: "button", class: {
+        return (h("div", { key: '98292dbf6f84139b409cefe4690fb5ce834372c7', class: "custom-select" }, this.label && (h("label", { key: '7dd60d54e701108f7061623a89e8ff29edbb8dc6' }, this.label, this.showObligatory && h("span", { key: '971fd2a900d9ef4740a96145cadc948aab95232a', class: "required" }, "*"))), h("button", { key: '6c0067cfaf920160a4f8c05f59c34f3539540d29', type: "button", ref: (el) => { this.buttonRef = el; }, class: {
                 'select-button': true,
                 'select-completed': !!this.selected,
                 'select-invalid': this.hasError,
-            }, disabled: this.disabled, onClick: () => this.open() }, h("div", { key: 'dd468a1977089ada40f93e1e76f0d55349c5f80d', 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: '397055b90b0dab05effdcd2bc26a9839f963fa89', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), h("ul", { key: 'cac3fd861f38331eb4fada4f65ee897d1017cc52', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, h("li", { key: '0ccd958e816ff47fd53647d59f078483c7dbb3eb', class: "search-li" }, h("div", { key: '7ad42859a5743aa27aea9a001f1424e50cdc9f60', class: "search-field" }, h("input", { key: 'cb599f62e811383caeda0e329b688123f74fa571', 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: 'c60f6af4051d721a9c4c9b09f562f80d72a538eb', class: "search-icon" }, h("dropi-icon", { key: '93477b3d42c8022424ea886820db795c5dc1194a', 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: 'e8fd998ffea654db0bac5e91b40ebd221781b12d', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && h("dropi-icon", { key: 'c7a334f5c2813cd0c4db5c8d36157b14ed2bdb11', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '04c7b006f67d6a4a3564fbe39c214f2fe9708cb4' }, this.textHelper)))));
+            }, disabled: this.disabled, onClick: () => this.open() }, h("div", { key: 'b28c2c5b0de9b8052bb920a272b9dcc51f4eac6f', class: "selected-content" }, this.selected ? (h("span", { class: "selected-option" }, h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (h("span", { class: "placeholder-text" }, this.placeholder))), h("dropi-icon", { key: '2ec568b0ad4efdb3a22ffceb1e85fbc6f1d483e8', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), h("ul", { key: '34f0e5772ebb21e85cb246cbb91196d128d9ca59', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, h("li", { key: '77cdf81222a7c593f1d54198e2b897468db890a5', class: "search-li" }, h("div", { key: '970723feefd04adf0b113ae63931092f58d0264a', class: "search-field" }, h("input", { key: '294868580087dc1bdb04258ad84672f3d10e7ba7', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), h("span", { key: '02781dc595e568865ab5ae14aeed326b71b36e10', class: "search-icon" }, h("dropi-icon", { key: '0c06d5e5f26d2a2e5ec20967a2ebb9430397f3ea', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (h("li", { key: country.code }, h("button", { class: "option", type: "button", onClick: () => this.select(country) }, h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (h("div", { key: 'aae58bc17bbb6953a676818fe02da94b5a4e9f73', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && h("dropi-icon", { key: '7542ef4620499957711079c587f6cb650096f6d3', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: 'ea4c5cedd3b87444a90b4e210f7afa3a318a4832' }, this.textHelper)))));
     }
+    static get formAssociated() { return true; }
     static get watchers() { return {
         "currentSelection": [{
                 "currentSelectionChanged": 0

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

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

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
+import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
 
 const dropiDatePickerRangeCss = () => `:host{display:block;width:100%;max-width:380px}*,*::before,*::after{box-sizing:border-box}.date-picker-range{width:100%;font-family:inherit}.label{font-size:11px;font-weight:var(--font-weight-medium);color:#7b8190;margin-bottom:8px}.inputs-row{display:flex;align-items:flex-end;gap:8px}.input-group{flex:1;display:flex;flex-direction:column;gap:4px}.input-label{font-size:var(--font-size-xs, 11px);color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-medium, 500)}.date-input{width:100%;height:40px;padding:0 10px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-600, #475066);font-size:13px;font-family:inherit;outline:none;cursor:pointer;transition:border-color 0.15s ease}.date-input:focus{border-color:var(--Primary-Primary-500, #f49a3d)}.separator{padding-bottom:8px;color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-m)}.shortcuts{display:flex;flex-direction:column;gap:2px;margin-top:10px;border-left:1px solid var(--Gray-Gray-100, #e6eaf2);padding-left:10px}.shortcut-btn{background:transparent;border:none;padding:4px 6px;font-size:13px;font-family:inherit;color:var(--Gray-Gray-700, #32394d);cursor:pointer;text-align:left;border-radius:5px;transition:background 0.1s ease;font-weight:var(--font-weight-regular)}.shortcut-btn:hover{background:var(--Gray-Gray-50, #f5f6f8)}.shortcut-btn.active{background:var(--Gray-Gray-50, #f5f6f8);font-weight:var(--font-weight-semibold)}.warning-box{margin-top:8px;padding:4px 8px;border:1px solid var(--Warning-Warning-400);border-radius:4px;background:var(--Warning-Warning-50)}.warning-message{color:#495057;font-size:var(--font-size-xxs);line-height:16px}@keyframes shimmer{0%{background-position:-468px 0}100%{background-position:468px 0}}.skeleton{height:40px;width:100%;min-width:180px;border-radius:6px;animation:shimmer 1s linear infinite;background:linear-gradient(to right, #f5f6f8 8%, #e3e7ef 28%, #f5f6f8 77%);background-size:800px 104px}@media screen and (max-width: 480px){.inputs-row{flex-direction:column}.separator{display:none}.shortcuts{flex-direction:row;flex-wrap:wrap;border-left:none;padding-left:0;border-top:1px solid var(--Gray-Gray-100, #e6eaf2);padding-top:8px}}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-Cvp2LQOM.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-D0Z06C2b.js';
 
 const dropiDatePickerCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.dp-label{display:block;font-size:var(--font-size-xxs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.dp-trigger{width:100%;height:44px;display:flex;align-items:center;gap:var(--Size-2, 8px);padding:0 var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);cursor:pointer;font-family:inherit;transition:border-color 0.2s}.dp-trigger:hover:not(:disabled){border-color:var(--Info-Info-500, #50a5f1)}.dp-trigger--disabled{background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed;opacity:0.6}.dp-trigger__value{flex:1;text-align:left;font-size:var(--font-size-xs, 12px);color:var(--Gray-Gray-700, #32394d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dp-trigger__placeholder{color:var(--Gray-Gray-400, #858ea6)}.dp-popup{position:absolute;top:calc(100% + 8px);left:0;width:320px;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-3, 12px);box-shadow:0 4px 16px rgba(0,0,0,0.08);z-index:300;padding:var(--Size-4, 16px)}.dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--Size-4, 16px)}.dp-nav__btn{background:none;border:none;padding:0;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;width:32px;height:32px;transition:background 0.15s}.dp-nav__btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-nav__title{font-size:var(--font-size-s, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);display:flex;gap:8px}.dp-grid{display:grid;grid-template-columns:repeat(7, 1fr);row-gap:8px;column-gap:4px}.dp-day-header{font-size:var(--font-size-s, 14px);color:var(--Gray-Gray-700, #32394d);text-align:center;padding:8px 0;font-weight:var(--font-weight-bold, 700)}.dp-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 12px);font-family:inherit;border:none;cursor:pointer;background:transparent;color:var(--Gray-Gray-600, #475066);width:100%;position:relative;z-index:1;padding:0}.dp-cell::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;transition:all 0.2s;z-index:-1;background:transparent}.dp-cell::before{content:"";position:absolute;top:0;bottom:0;z-index:-2;border-radius:0;background:transparent}.dp-cell:hover:not(:disabled)::after{background:var(--Gray-Gray-100, #e6eaf2)}.dp-cell--other-month{color:var(--Gray-Gray-300, #a0a9c0)}.dp-cell--today{font-weight:var(--font-weight-bold, 700)}.dp-cell--today::after{background:var(--Gray-Gray-100, #e6eaf2)}.dp-cell--selected{color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.dp-cell--selected::after{background:var(--Orange-orange-500, #f49a3d) !important}.dp-cell--range-start,.dp-cell--range-end{color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.dp-cell--range-start::after,.dp-cell--range-end::after{background:var(--Orange-orange-500, #f49a3d) !important}.dp-cell--in-range{color:var(--Orange-orange-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.dp-cell--in-range::before{left:-2px;right:-2px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-start::before{left:50%;right:-2px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-end::before{left:-2px;right:50%;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-start.dp-cell--range-end::before{background:transparent}.dp-cell--disabled{opacity:0.35;cursor:not-allowed}.dp-footer{display:flex;justify-content:space-between;margin-top:var(--Size-3, 12px);border-top:1px solid var(--Gray-Gray-100, #e6eaf2);padding-top:var(--Size-2, 8px)}.dp-footer__clear,.dp-footer__today{background:none;border:none;padding:4px 8px;font-size:var(--font-size-xxs, 10px);font-family:inherit;cursor:pointer;border-radius:var(--Border-1, 4px);transition:background 0.15s}.dp-footer__clear{color:var(--Gray-Gray-500, #69738c)}.dp-footer__today{color:var(--Orange-orange-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.dp-footer__clear:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-footer__today:hover{background:var(--Orange-orange-50, #fef5ec)}`;
 
@@ -13,13 +13,26 @@ const DropiDatePicker = class {
         this.dropiChangeDate = createEvent(this, "dropiChangeDate", 7);
         this.dropiClosePanel = createEvent(this, "dropiClosePanel", 7);
         this.dropiRangeChange = createEvent(this, "dropiRangeChange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
+    internals;
+    /** Name for native form submission */
+    name = '';
     /** Selected date (ISO string, single mode) - matches Angular 'selectedDate' */
     selectedDate = '';
     /** Range start date (ISO string, range mode) */
     startDate = '';
     /** Range end date (ISO string, range mode) */
     endDate = '';
+    valueChanged() {
+        this.updateFormValue();
+    }
     /** Enable range selection - matches Angular selectionMode */
     selectionMode = 'single';
     /** Min selectable date (ISO string) */
@@ -52,6 +65,17 @@ const DropiDatePicker = class {
     dropiClosePanel;
     /** Emitted when range selected */
     dropiRangeChange;
+    componentWillLoad() {
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        if (this.selectionMode === 'range') {
+            this.internals.setFormValue(this.startDate && this.endDate ? `${this.startDate},${this.endDate}` : '');
+        }
+        else {
+            this.internals.setFormValue(this.selectedDate || '');
+        }
+    }
     get displayValue() {
         if (this.selectionMode === 'range') {
             if (this.startDate && this.endDate)
@@ -171,12 +195,12 @@ const DropiDatePicker = class {
     render() {
         const days = this.buildDays();
         const today = new Date().toISOString().slice(0, 10);
-        return (h("div", { key: '0c3cb89d77d6d8e7d3f955354d6be4b7a1f507fb', class: "dp-wrap" }, this.label && h("label", { key: '672ad3d08337ed0df7c7e7d582ba8fe5af8d2b23', class: "dp-label" }, this.label), h("button", { key: '848428a5ce236b37e8e988223c9ef8bd91ea16b3', class: {
+        return (h("div", { key: '97a96b56b0e8ae551f747bad4a3459a1f4945411', class: "dp-wrap" }, this.label && h("label", { key: 'a1792032ab9ae2dbe574f50b7a537df687eae40c', class: "dp-label" }, this.label), h("button", { key: '4237c2b988f1e9fbaa77dc2a989964216e3fe902', class: {
                 'dp-trigger': true,
                 'dp-trigger--disabled': this.disabled,
                 'dp-trigger--invalid': this.isInvalid,
                 'dp-trigger--loading': this.loading
-            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, h("dropi-icon", { key: 'c51b9238996ec454f64f53d4e9ede35bf494fd95', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("span", { key: 'b34ed963710695296a2986b0e790457b90a3ee60', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { key: '8cbefce39dab39a5cba941f4538f46cf97db1c06', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: '36a5db42655b136cee1abf31bb5e206a6d118beb', class: "dp-popup" }, h("div", { key: '456c2778f035fae19450841baa20df5092f6dca4', class: "dp-nav" }, h("button", { key: '8f05a6aa4e1f4e0dda08ee9dad89f189c130eef0', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { key: '41f4e9b157e56669fa179cfed62d960ff1eadfd6', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), h("span", { key: '53556f3a356e1d2b63b59d4edda40ddf5fda9e5f', class: "dp-nav__title" }, h("span", { key: '4bad1d735d4235b2ddaac33f3fa8f6335e753984' }, MONTHS_ES[this.viewMonth]), h("span", { key: 'c7af6bb7edc5dead7751c65ee024485aa2a6cf65' }, this.viewYear)), h("button", { key: '5ff7b70b69732c01ae7a45c7b65336982ea6eed8', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { key: '718725e17a530de4e8081c97e639342ff7fd9a96', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), h("div", { key: 'd3d899342a15a9a0f2b508dbd39945831ebbad0d', class: "dp-grid" }, DAYS_ES.map(d => (h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
+            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, h("dropi-icon", { key: '39591fedb92b92e6507b564fc8c145711f1a21b1', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("span", { key: '305e3f81d64c01603687d53edc59e1d19ef06c3c', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { key: '13feb346ad7b07a7e2f208e299f62a8261a97655', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: '4cdf8a69422a0b54d0f7c1a6711a683dab7d1f34', class: "dp-popup" }, h("div", { key: '0c6fb31094003c66c5b471e738dd75e7b865401f', class: "dp-nav" }, h("button", { key: '4fa24f9450cf6c5e888cea374619e14245c0c005', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { key: '2196f85700b252d4f83536f11ed197c083fc45ec', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), h("span", { key: '01619de7c5218b506f75234745f3184af813a491', class: "dp-nav__title" }, h("span", { key: '8074e7deeb6c102bad7f1911739e785187783a7c' }, MONTHS_ES[this.viewMonth]), h("span", { key: '69e9c3b41361e293a843f911b5bcf4690995d2b4' }, this.viewYear)), h("button", { key: '51c0ad3da96835736170fbf94338fd70c942c3d2', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { key: '24eb4385639c9a71f5312f32b33b36593c2b0259', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), h("div", { key: 'c18cecd81af38b3a6f23402501011c09b8b453d7', class: "dp-grid" }, DAYS_ES.map(d => (h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
             const isSelected = this.selectionMode !== 'range'
                 ? iso === this.selectedDate
                 : iso === this.startDate || iso === this.endDate;
@@ -198,12 +222,12 @@ const DropiDatePicker = class {
                     if (this.selectionMode === 'range' && this.startDate && !this.endDate)
                         this.hoverDate = iso;
                 }, onMouseLeave: () => this.hoverDate = '' }, day));
-        })), h("div", { key: '84c799762393b9de0161795f20188a680490d4d8', class: "dp-footer" }, h("button", { key: '4696558b1be6bf8abe8461f341c129c640af46ce', class: "dp-footer__clear", type: "button", onClick: () => {
+        })), h("div", { key: '594f280cb269c32ac3a129401e13b710af1a7c7e', class: "dp-footer" }, h("button", { key: '6028ef84bc17f0d1bb0fd587a991698a8fc69338', class: "dp-footer__clear", type: "button", onClick: () => {
                 this.selectedDate = '';
                 this.startDate = '';
                 this.endDate = '';
                 this.open = false;
-            } }, "Limpiar"), h("button", { key: 'a87f6f92fa10829560d223835e70fd2951edc482', class: "dp-footer__today", type: "button", onClick: () => {
+            } }, "Limpiar"), h("button", { key: 'ab01840a18d657621205d4fba69cc53feb474d11', class: "dp-footer__today", type: "button", onClick: () => {
                 if (this.selectionMode !== 'range') {
                     this.selectedDate = today;
                     this.open = false;
@@ -215,6 +239,18 @@ const DropiDatePicker = class {
                 }
             } }, "Hoy"))))));
     }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "selectedDate": [{
+                "valueChanged": 0
+            }],
+        "startDate": [{
+                "valueChanged": 0
+            }],
+        "endDate": [{
+                "valueChanged": 0
+            }]
+    }; }
 };
 DropiDatePicker.style = dropiDatePickerCss();