@dropi/ui 0.1.41 → 0.1.42

package/dist/dropi-ui/dropi-read-more.entry.js

@@ -30,7 +30,7 @@ const DropiReadMore = class {
     }
     render() {
         const showToggle = this.needsTruncation && (this.expanded ? this.showSeeLess : true);
-        return (h("div", { key: '125c5f1d75c1e06f02d9898f375626bb75a67cd8', class: "read-more" }, h("p", { key: '4a4450a3468e7fe7297fdae98d370f8cd77b8553', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (h("button", { key: 'cfe58b2781b908d9a0a802b4bd68cedf8dea827e', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
+        return (h("div", { key: '6accf9aa0a6f7377c7de6e8cbcb9e2a7ee99573a', class: "read-more" }, h("p", { key: '96e5493df8b065008f9bc45cea1ba768eabfc0a2', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (h("button", { key: '195d962715c5c618701c3e86df618289915e3a9b', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
     }
 };
 DropiReadMore.style = dropiReadMoreCss();

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

@@ -5,12 +5,12 @@ const dropiSearchCss = () => `:host{display:block;width:100%;position:relative}*
 const DropiSearch = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onInput = createEvent(this, "onInput", 7);
-        this.onBlur = createEvent(this, "onBlur", 7);
-        this.onKeyEnter = createEvent(this, "onKeyEnter", 7);
-        this.onChange = createEvent(this, "onChange", 7);
-        this.onClear = createEvent(this, "onClear", 7);
-        this.modelChange = createEvent(this, "modelChange", 7);
+        this.dropiInput = createEvent(this, "dropiInput", 7);
+        this.dropiBlur = createEvent(this, "dropiBlur", 7);
+        this.dropiKeyEnter = createEvent(this, "dropiKeyEnter", 7);
+        this.dropiChange = createEvent(this, "dropiChange", 7);
+        this.dropiClear = createEvent(this, "dropiClear", 7);
+        this.dropiModelChange = createEvent(this, "dropiModelChange", 7);
     }
     /** Visual variant (matches Angular `type`) */
     type = 'default';
@@ -44,17 +44,17 @@ const DropiSearch = class {
     selected = [];
     parsedOptions = [];
     /** Emitted on input change. e.detail = current text */
-    onInput;
+    dropiInput;
     /** Emitted on blur */
-    onBlur;
+    dropiBlur;
     /** Emitted when Enter is pressed. e.detail = current text */
-    onKeyEnter;
+    dropiKeyEnter;
     /** Emitted on change event of the native input (matches Angular `onChange`) */
-    onChange;
+    dropiChange;
     /** Emitted when clear button clicked */
-    onClear;
+    dropiClear;
     /** Emitted when selection changes. e.detail = selected items */
-    modelChange;
+    dropiModelChange;
     optionsChanged(val) {
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
@@ -70,20 +70,20 @@ const DropiSearch = class {
     handleInput(e) {
         this.textInput = e.target.value;
         this.open = this.parsedOptions.length > 0;
-        this.onInput.emit(this.textInput);
-        this.onChange.emit(this.textInput);
+        this.dropiInput.emit(this.textInput);
+        this.dropiChange.emit(this.textInput);
     }
     handleKeyDown(e) {
         if (e.key === 'Enter')
-            this.onKeyEnter.emit(this.textInput);
+            this.dropiKeyEnter.emit(this.textInput);
         if (e.key === 'Escape')
             this.open = false;
     }
     handleClear() {
         this.textInput = '';
         this.open = false;
-        this.onClear.emit();
-        this.onInput.emit('');
+        this.dropiClear.emit();
+        this.dropiInput.emit('');
     }
     isSelected(opt) {
         return this.selected.some(s => s[this.dataName] === opt[this.dataName]);
@@ -102,14 +102,14 @@ const DropiSearch = class {
             this.selected = [opt];
             this.open = false;
         }
-        this.modelChange.emit(this.selected);
+        this.dropiModelChange.emit(this.selected);
     }
     render() {
         const showDropdown = this.open && this.parsedOptions.length > 0;
-        return (h("div", { key: 'ec00c8851a1d2d4ddda50edea458589a62d9451a', class: "search-wrap" }, this.label && h("label", { key: '31cadba1b21276ec43f3623676fe1a7f9bac4da2', class: "search-label" }, this.label), h("div", { key: 'bf68dbb7cfa657e8a7e441a2fe47db0e7d214e44', class: `search-input-row search-input-row--${this.type}` }, this.showIcon && h("dropi-icon", { key: '21239271d90ba7adcc64e3f7ecb9b836619bd11e', class: "search-icon", name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("input", { key: '64735f2618f993cbca379e72b3c87435158b4f0c', class: "search-input", type: this.typeInput, placeholder: this.placeholder, value: this.textInput, maxLength: this.maxLength, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => {
+        return (h("div", { key: '594b15b4b31044f4a02376dc773ea36da893d773', class: "search-wrap" }, this.label && h("label", { key: '297a989441ad892715b09421f9a53618851c1b52', class: "search-label" }, this.label), h("div", { key: '6bbaf4ea5c1bc6ff831626117fccde647e68ba19', class: `search-input-row search-input-row--${this.type}` }, this.showIcon && h("dropi-icon", { key: 'e94c3a3895a14e950a018023d5d7a281a230abae', class: "search-icon", name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("input", { key: '820bf2f4c9ecaf9907aceaaa08bd3fa309606e90', class: "search-input", type: this.typeInput, placeholder: this.placeholder, value: this.textInput, maxLength: this.maxLength, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => {
                 if (this.parsedOptions.length)
                     this.open = true;
-            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.onBlur.emit(); } }), this.showClear && this.textInput && (h("button", { key: 'c6a1dab911f262e0b2da88e59cdbaf6b4c1c74a9', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, h("dropi-icon", { key: 'ddf404e0be3d95f1154ecd22dd9b9f7a06e3c187', name: "Close-small", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), showDropdown && (h("div", { key: 'a8c5ecbfe700bcb116119f172c3cb017b9693113', class: `search-dropdown search-dropdown--${this.position}`, style: { '--dropdown-height': `${this.heightOverlay}px` } }, this.filtered.length === 0 ? (h("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (h("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multipleSelectModel && h("dropi-checkbox", { checked: this.isSelected(opt) }), h("span", { class: "search-option__label" }, opt[this.dataName])))))))));
+            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.dropiBlur.emit(); } }), this.showClear && this.textInput && (h("button", { key: 'e2fd7c3d5fee45a83f030589f58d4fee9f3af69c', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, h("dropi-icon", { key: 'a530b0adb83d76b205cd2b22792f14229950836e', name: "Close-small", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), showDropdown && (h("div", { key: '8c062d43dccb41c84b2a599ed6d1a5e049a75b65', class: `search-dropdown search-dropdown--${this.position}`, style: { '--dropdown-height': `${this.heightOverlay}px` } }, this.filtered.length === 0 ? (h("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (h("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multipleSelectModel && h("dropi-checkbox", { checked: this.isSelected(opt) }), h("span", { class: "search-option__label" }, opt[this.dataName])))))))));
     }
     static get watchers() { return {
         "dataToSearch": [{

package/dist/dropi-ui/dropi-search.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-search.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-search/dropi-search.css?tag=dropi-search&encapsulation=shadow","src/components/dropi-search/dropi-search.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  position: relative;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.search-label {\n  display: block;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-600, #475066);\n  margin-bottom: 4px;\n}\n\n/* ── Input row ──────────────────────────────────────────── */\n.search-input-row {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n.search-icon {\n  position: absolute;\n  left: 10px;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.search-input {\n  width: 100%;\n  height: 40px;\n  padding: 0 36px 0 34px;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  color: var(--Gray-Gray-700, #32394d);\n  outline: none;\n  transition: border-color 0.2s;\n}\n\n.search-input:focus {\n  border-color: var(--Info-Info-500, #50a5f1);\n}\n\n.search-input::placeholder {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.search-clear {\n  position: absolute;\n  right: 10px;\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  z-index: 1;\n}\n\n/* ── Dropdown ───────────────────────────────────────────── */\n.search-dropdown {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  right: 0;\n  max-height: var(--dropdown-height, 240px);\n  overflow-y: auto;\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 4px 16px rgba(0, 0, 0, 0.08);\n  z-index: 100;\n}\n\n.search-option {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  padding: var(--Size-2, 8px) var(--Size-3, 12px);\n  cursor: pointer;\n  transition: background 0.15s;\n  user-select: none;\n}\n\n.search-option:hover {\n  background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.search-option--selected {\n  background: var(--Primary-Primary-50, #fff5eb);\n}\n\n.search-option__label {\n  flex: 1;\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-700, #32394d);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.search-no-results {\n  padding: var(--Size-3, 12px);\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-400, #858ea6);\n  text-align: center;\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\nexport interface SearchOption {\n  [key: string]: any;\n}\n\n/**\n * @component dropi-search\n * Text search input with optional dropdown results list.\n * Supports single and multi-select, keyboard navigation, and clear button.\n */\n@Component({\n  tag: 'dropi-search',\n  styleUrl: 'dropi-search.css',\n  shadow: true,\n})\nexport class DropiSearch {\n  /** Visual variant (matches Angular `type`) */\n  @Prop() type: 'default' | 'dropdown' | 'dropdown-button' | 'default-light' = 'default';\n  /** Placeholder text */\n  @Prop() placeholder: string = 'Search...';\n  /** Controlled input value */\n  @Prop({ mutable: true }) textInput: string = '';\n  /** HTML input type: text | number (matches Angular `typeInput`) */\n  @Prop() typeInput: 'text' | 'number' = 'text';\n  /** Max character length */\n  @Prop() maxLength: number;\n  /** Show the search icon (matches Angular `showIcon`) */\n  @Prop() showIcon: boolean = true;\n  /** Show clear (×) button when input has text */\n  @Prop() showClear: boolean = true;\n  /** Data source to filter. Pass as array or JSON string */\n  @Prop() dataToSearch: SearchOption[] | string = [];\n  /** Property name to display and search */\n  @Prop() dataName: string = 'name';\n  /** Dropdown open direction: down | top (matches Angular `position`) */\n  @Prop() position: 'down' | 'top' = 'down';\n  /** Allow multiple selection */\n  @Prop() multipleSelectModel: boolean = true;\n  /** Max height of dropdown (numeric value) */\n  @Prop() heightOverlay: number = 230;\n  /** Label shown above the input */\n  @Prop() label: string = '';\n  /** Controlled selected items array (matches Angular `model`) */\n  @Prop({ mutable: true }) model: SearchOption[] | string = [];\n\n  @State() private open: boolean = false;\n  @State() private selected: SearchOption[] = [];\n  @State() private parsedOptions: SearchOption[] = [];\n\n  /** Emitted on input change. e.detail = current text */\n  @Event() onInput: EventEmitter<string>;\n  /** Emitted on blur */\n  @Event() onBlur: EventEmitter<void>;\n  /** Emitted when Enter is pressed. e.detail = current text */\n  @Event() onKeyEnter: EventEmitter<string>;\n  /** Emitted on change event of the native input (matches Angular `onChange`) */\n  @Event() onChange: EventEmitter<string>;\n  /** Emitted when clear button clicked */\n  @Event() onClear: EventEmitter<void>;\n  /** Emitted when selection changes. e.detail = selected items */\n  @Event() modelChange: EventEmitter<SearchOption[]>;\n\n  @Watch('dataToSearch')\n  optionsChanged(val: SearchOption[] | string) {\n    this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);\n  }\n\n  componentWillLoad() {\n    this.optionsChanged(this.dataToSearch);\n  }\n\n  private get filtered(): SearchOption[] {\n    if (!this.textInput) return this.parsedOptions;\n    const q = this.textInput.toLowerCase();\n    return this.parsedOptions.filter(o => String(o[this.dataName] ?? '').toLowerCase().includes(q));\n  }\n\n  private handleInput(e: InputEvent) {\n    this.textInput = (e.target as HTMLInputElement).value;\n    this.open = this.parsedOptions.length > 0;\n    this.onInput.emit(this.textInput);\n    this.onChange.emit(this.textInput);\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter') this.onKeyEnter.emit(this.textInput);\n    if (e.key === 'Escape') this.open = false;\n  }\n\n  private handleClear() {\n    this.textInput = '';\n    this.open = false;\n    this.onClear.emit();\n    this.onInput.emit('');\n  }\n\n  private isSelected(opt: SearchOption): boolean {\n    return this.selected.some(s => s[this.dataName] === opt[this.dataName]);\n  }\n\n  private selectOption(opt: SearchOption) {\n    if (this.multipleSelectModel) {\n      if (this.isSelected(opt)) {\n        this.selected = this.selected.filter(s => s[this.dataName] !== opt[this.dataName]);\n      } else {\n        this.selected = [...this.selected, opt];\n      }\n    } else {\n      this.textInput = opt[this.dataName] ?? '';\n      this.selected = [opt];\n      this.open = false;\n    }\n    this.modelChange.emit(this.selected);\n  }\n\n  render() {\n    const showDropdown = this.open && this.parsedOptions.length > 0;\n\n    return (\n      <div class=\"search-wrap\">\n        {this.label && <label class=\"search-label\">{this.label}</label>}\n\n        <div class={`search-input-row search-input-row--${this.type}`}>\n          {this.showIcon && <dropi-icon class=\"search-icon\" name=\"Search\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />}\n\n          <input\n            class=\"search-input\"\n            type={this.typeInput}\n            placeholder={this.placeholder}\n            value={this.textInput}\n            maxLength={this.maxLength}\n            onInput={(e) => this.handleInput(e as InputEvent)}\n            onKeyDown={(e) => this.handleKeyDown(e as KeyboardEvent)}\n            onFocus={() => { if (this.parsedOptions.length) this.open = true; }}\n            onBlur={() => { setTimeout(() => this.open = false, 150); this.onBlur.emit(); }}\n          />\n\n          {this.showClear && this.textInput && (\n            <button class=\"search-clear\" onClick={() => this.handleClear()} aria-label=\"Limpiar\">\n              <dropi-icon name=\"Close-small\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />\n            </button>\n          )}\n        </div>\n\n        {showDropdown && (\n          <div class={`search-dropdown search-dropdown--${this.position}`} style={{ '--dropdown-height': `${this.heightOverlay}px` } as any}>\n            {this.filtered.length === 0 ? (\n              <div class=\"search-no-results\">Sin resultados</div>\n            ) : (\n              this.filtered.map((opt, i) => (\n                <div\n                  class={{ 'search-option': true, 'search-option--selected': this.isSelected(opt) }}\n                  key={i}\n                  onMouseDown={(e) => { e.preventDefault(); this.selectOption(opt); }}\n                >\n                  {this.multipleSelectModel && <dropi-checkbox checked={this.isSelected(opt)} />}\n                  <span class=\"search-option__label\">{opt[this.dataName]}</span>\n                </div>\n              ))\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-search.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-search/dropi-search.css?tag=dropi-search&encapsulation=shadow","src/components/dropi-search/dropi-search.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  position: relative;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.search-label {\n  display: block;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-600, #475066);\n  margin-bottom: 4px;\n}\n\n/* ── Input row ──────────────────────────────────────────── */\n.search-input-row {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n.search-icon {\n  position: absolute;\n  left: 10px;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.search-input {\n  width: 100%;\n  height: 40px;\n  padding: 0 36px 0 34px;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  color: var(--Gray-Gray-700, #32394d);\n  outline: none;\n  transition: border-color 0.2s;\n}\n\n.search-input:focus {\n  border-color: var(--Info-Info-500, #50a5f1);\n}\n\n.search-input::placeholder {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.search-clear {\n  position: absolute;\n  right: 10px;\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  z-index: 1;\n}\n\n/* ── Dropdown ───────────────────────────────────────────── */\n.search-dropdown {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  right: 0;\n  max-height: var(--dropdown-height, 240px);\n  overflow-y: auto;\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 4px 16px rgba(0, 0, 0, 0.08);\n  z-index: 100;\n}\n\n.search-option {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  padding: var(--Size-2, 8px) var(--Size-3, 12px);\n  cursor: pointer;\n  transition: background 0.15s;\n  user-select: none;\n}\n\n.search-option:hover {\n  background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.search-option--selected {\n  background: var(--Primary-Primary-50, #fff5eb);\n}\n\n.search-option__label {\n  flex: 1;\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-700, #32394d);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.search-no-results {\n  padding: var(--Size-3, 12px);\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-400, #858ea6);\n  text-align: center;\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\nexport interface SearchOption {\n  [key: string]: any;\n}\n\n/**\n * @component dropi-search\n * Text search input with optional dropdown results list.\n * Supports single and multi-select, keyboard navigation, and clear button.\n */\n@Component({\n  tag: 'dropi-search',\n  styleUrl: 'dropi-search.css',\n  shadow: true,\n})\nexport class DropiSearch {\n  /** Visual variant (matches Angular `type`) */\n  @Prop() type: 'default' | 'dropdown' | 'dropdown-button' | 'default-light' = 'default';\n  /** Placeholder text */\n  @Prop() placeholder: string = 'Search...';\n  /** Controlled input value */\n  @Prop({ mutable: true }) textInput: string = '';\n  /** HTML input type: text | number (matches Angular `typeInput`) */\n  @Prop() typeInput: 'text' | 'number' = 'text';\n  /** Max character length */\n  @Prop() maxLength: number;\n  /** Show the search icon (matches Angular `showIcon`) */\n  @Prop() showIcon: boolean = true;\n  /** Show clear (×) button when input has text */\n  @Prop() showClear: boolean = true;\n  /** Data source to filter. Pass as array or JSON string */\n  @Prop() dataToSearch: SearchOption[] | string = [];\n  /** Property name to display and search */\n  @Prop() dataName: string = 'name';\n  /** Dropdown open direction: down | top (matches Angular `position`) */\n  @Prop() position: 'down' | 'top' = 'down';\n  /** Allow multiple selection */\n  @Prop() multipleSelectModel: boolean = true;\n  /** Max height of dropdown (numeric value) */\n  @Prop() heightOverlay: number = 230;\n  /** Label shown above the input */\n  @Prop() label: string = '';\n  /** Controlled selected items array (matches Angular `model`) */\n  @Prop({ mutable: true }) model: SearchOption[] | string = [];\n\n  @State() private open: boolean = false;\n  @State() private selected: SearchOption[] = [];\n  @State() private parsedOptions: SearchOption[] = [];\n\n  /** Emitted on input change. e.detail = current text */\n  @Event() dropiInput: EventEmitter<string>;\n  /** Emitted on blur */\n  @Event() dropiBlur: EventEmitter<void>;\n  /** Emitted when Enter is pressed. e.detail = current text */\n  @Event() dropiKeyEnter: EventEmitter<string>;\n  /** Emitted on change event of the native input (matches Angular `onChange`) */\n  @Event() dropiChange: EventEmitter<string>;\n  /** Emitted when clear button clicked */\n  @Event() dropiClear: EventEmitter<void>;\n  /** Emitted when selection changes. e.detail = selected items */\n  @Event() dropiModelChange: EventEmitter<SearchOption[]>;\n\n  @Watch('dataToSearch')\n  optionsChanged(val: SearchOption[] | string) {\n    this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);\n  }\n\n  componentWillLoad() {\n    this.optionsChanged(this.dataToSearch);\n  }\n\n  private get filtered(): SearchOption[] {\n    if (!this.textInput) return this.parsedOptions;\n    const q = this.textInput.toLowerCase();\n    return this.parsedOptions.filter(o => String(o[this.dataName] ?? '').toLowerCase().includes(q));\n  }\n\n  private handleInput(e: InputEvent) {\n    this.textInput = (e.target as HTMLInputElement).value;\n    this.open = this.parsedOptions.length > 0;\n    this.dropiInput.emit(this.textInput);\n    this.dropiChange.emit(this.textInput);\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter') this.dropiKeyEnter.emit(this.textInput);\n    if (e.key === 'Escape') this.open = false;\n  }\n\n  private handleClear() {\n    this.textInput = '';\n    this.open = false;\n    this.dropiClear.emit();\n    this.dropiInput.emit('');\n  }\n\n  private isSelected(opt: SearchOption): boolean {\n    return this.selected.some(s => s[this.dataName] === opt[this.dataName]);\n  }\n\n  private selectOption(opt: SearchOption) {\n    if (this.multipleSelectModel) {\n      if (this.isSelected(opt)) {\n        this.selected = this.selected.filter(s => s[this.dataName] !== opt[this.dataName]);\n      } else {\n        this.selected = [...this.selected, opt];\n      }\n    } else {\n      this.textInput = opt[this.dataName] ?? '';\n      this.selected = [opt];\n      this.open = false;\n    }\n    this.dropiModelChange.emit(this.selected);\n  }\n\n  render() {\n    const showDropdown = this.open && this.parsedOptions.length > 0;\n\n    return (\n      <div class=\"search-wrap\">\n        {this.label && <label class=\"search-label\">{this.label}</label>}\n\n        <div class={`search-input-row search-input-row--${this.type}`}>\n          {this.showIcon && <dropi-icon class=\"search-icon\" name=\"Search\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />}\n\n          <input\n            class=\"search-input\"\n            type={this.typeInput}\n            placeholder={this.placeholder}\n            value={this.textInput}\n            maxLength={this.maxLength}\n            onInput={(e) => this.handleInput(e as InputEvent)}\n            onKeyDown={(e) => this.handleKeyDown(e as KeyboardEvent)}\n            onFocus={() => { if (this.parsedOptions.length) this.open = true; }}\n            onBlur={() => { setTimeout(() => this.open = false, 150); this.dropiBlur.emit(); }}\n          />\n\n          {this.showClear && this.textInput && (\n            <button class=\"search-clear\" onClick={() => this.handleClear()} aria-label=\"Limpiar\">\n              <dropi-icon name=\"Close-small\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />\n            </button>\n          )}\n        </div>\n\n        {showDropdown && (\n          <div class={`search-dropdown search-dropdown--${this.position}`} style={{ '--dropdown-height': `${this.heightOverlay}px` } as any}>\n            {this.filtered.length === 0 ? (\n              <div class=\"search-no-results\">Sin resultados</div>\n            ) : (\n              this.filtered.map((opt, i) => (\n                <div\n                  class={{ 'search-option': true, 'search-option--selected': this.isSelected(opt) }}\n                  key={i}\n                  onMouseDown={(e) => { e.preventDefault(); this.selectOption(opt); }}\n                >\n                  {this.multipleSelectModel && <dropi-checkbox checked={this.isSelected(opt)} />}\n                  <span class=\"search-option__label\">{opt[this.dataName]}</span>\n                </div>\n              ))\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,15 +1,15 @@
 import { r as registerInstance, d as createEvent, a as getElement, h } from './index-Cvp2LQOM.js';
 
-const dropiSelectCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}.custom-select label{display:block;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.disabled-label{color:var(--Gray-Gray-400, #858ea6) !important}.asterisk{color:var(--Error-Error-500, #f46a6b)}.dropdown-container{display:flex;align-items:center;gap:4px}.left-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-m, 14px);white-space:nowrap}.select-button{box-sizing:border-box;width:100%;height:40px;padding:0 0.75rem;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, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.2s ease;gap:8px}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button-error{border-color:var(--Error-Error-500, #f46a6b) !important}.no-border{border:none !important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);background-color:transparent !important;gap:var(--Size-2, 8px)}.no-border:disabled{background-color:transparent !important}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1;min-width:0}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-dropdown-overlay{position:fixed;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);margin:0;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12);z-index:9999;animation:dropdown-open 120ms ease-out}@keyframes dropdown-open{from{opacity:0;transform:scaleY(0.95);transform-origin:top}to{opacity:1;transform:scaleY(1);transform-origin:top}}.option{box-sizing:border-box;width:100%;min-height:40px;border-radius:var(--Border-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:var(--Size-2, 8px);transition:background 0.15s ease}.option:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled,.disabled-option{opacity:0.5;cursor:not-allowed}.option.selected-option:not(.option-radio){background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-group-title{padding:var(--Size-3, 12px) var(--Size-4, 16px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Gray-Gray-500, #69738c);list-style:none}.option-group{padding-left:var(--Size-6, 32px)}.sticky-search{position:sticky;top:calc(-1 * var(--Size-4, 16px));background:var(--Neutral-White, #ffffff);z-index:10;margin:calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;padding:var(--Size-2, 8px) var(--Size-4, 16px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);list-style:none}.search-wrapper{display:flex;align-items:center;gap:8px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);padding:6px 10px;background:var(--Neutral-White, #ffffff)}.search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.multi-checkbox{width:18px;height:18px;min-width:18px;border-radius:var(--Border-1, 4px);border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s, border-color 0.15s}.multi-checkbox.checked{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.option-radio{display:flex;align-items:center;gap:12px}.option-radio.selected-option{border-radius:var(--Border-2, 8px);background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-radio.selected-option .option-second-label{color:var(--Primary-Primary-500, #f49a3d)}.radio{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.circle{width:12px;height:12px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.labels-container{display:flex;justify-content:space-between;width:100%;min-width:0}.option-image{width:24px;height:24px;border-radius:60px;object-fit:cover;flex-shrink:0}.small-image{width:20px;height:20px}.option-image-fallback{width:24px;height:24px;border-radius:60px;background:var(--Primary-Primary-500, #f49a3d);color:white;font-size:13px;font-weight:var(--font-weight-bold);display:flex;justify-content:center;align-items:center;flex-shrink:0}.small-image.option-image-fallback{width:20px;height:20px}.option-second-label{color:var(--Gray-Gray-700, #32394d);font-weight:var(--font-weight-bold);white-space:nowrap}.flag-placeholder{font-size:11px;font-weight:var(--font-weight-semibold);color:var(--Gray-Gray-500, #69738c);flex-shrink:0}.select-helper,.select-helper-error{display:flex;gap:var(--Size-1, 4px);align-items:center;margin-top:var(--Size-1, 4px)}.select-helper span{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.select-helper-error span{color:var(--Error-Error-500, #f46a6b);font-size:var(--font-size-xs, 10px)}.no-results{padding:var(--Size-3, 12px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px);list-style:none;text-align:center}`;
+const dropiSelectCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}.custom-select label{display:block;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.disabled-label{color:var(--Gray-Gray-400, #858ea6) !important}.asterisk{color:var(--Error-Error-500, #f46a6b)}.dropdown-container{display:flex;align-items:center;gap:4px}.left-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-m, 14px);white-space:nowrap}.select-button{box-sizing:border-box;width:100%;height:40px;padding:0 0.75rem;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, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.2s ease;gap:8px}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button-error{border-color:var(--Error-Error-500, #f46a6b) !important}.no-border{border:none !important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);background-color:transparent !important;gap:var(--Size-2, 8px)}.no-border:disabled{background-color:transparent !important}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1;min-width:0}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-dropdown-overlay{position:fixed;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);margin:0;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12);z-index:9999;animation:dropdown-open 120ms ease-out}.select-dropdown-overlay.within-modal{position:absolute}@keyframes dropdown-open{from{opacity:0;transform:scaleY(0.95);transform-origin:top}to{opacity:1;transform:scaleY(1);transform-origin:top}}.option{box-sizing:border-box;width:100%;min-height:40px;border-radius:var(--Border-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:var(--Size-2, 8px);transition:background 0.15s ease}.option:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled,.disabled-option{opacity:0.5;cursor:not-allowed}.option.selected-option:not(.option-radio){background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-group-title{padding:var(--Size-3, 12px) var(--Size-4, 16px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Gray-Gray-500, #69738c);list-style:none}.option-group{padding-left:var(--Size-6, 32px)}.sticky-search{position:sticky;top:calc(-1 * var(--Size-4, 16px));background:var(--Neutral-White, #ffffff);z-index:10;margin:calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;padding:var(--Size-2, 8px) var(--Size-4, 16px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);list-style:none}.search-wrapper{display:flex;align-items:center;gap:8px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);padding:6px 10px;background:var(--Neutral-White, #ffffff)}.search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.multi-checkbox{width:18px;height:18px;min-width:18px;border-radius:var(--Border-1, 4px);border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s, border-color 0.15s}.multi-checkbox.checked{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.option-radio{display:flex;align-items:center;gap:12px}.option-radio.selected-option{border-radius:var(--Border-2, 8px);background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-radio.selected-option .option-second-label{color:var(--Primary-Primary-500, #f49a3d)}.radio{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.circle{width:12px;height:12px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.labels-container{display:flex;justify-content:space-between;width:100%;min-width:0}.option-image{width:24px;height:24px;border-radius:60px;object-fit:cover;flex-shrink:0}.small-image{width:20px;height:20px}.option-image-fallback{width:24px;height:24px;border-radius:60px;background:var(--Primary-Primary-500, #f49a3d);color:white;font-size:13px;font-weight:var(--font-weight-bold);display:flex;justify-content:center;align-items:center;flex-shrink:0}.small-image.option-image-fallback{width:20px;height:20px}.option-second-label{color:var(--Gray-Gray-700, #32394d);font-weight:var(--font-weight-bold);white-space:nowrap}.flag-placeholder{font-size:11px;font-weight:var(--font-weight-semibold);color:var(--Gray-Gray-500, #69738c);flex-shrink:0}.select-helper,.select-helper-error{display:flex;gap:var(--Size-1, 4px);align-items:center;margin-top:var(--Size-1, 4px)}.select-helper span{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.select-helper-error span{color:var(--Error-Error-500, #f46a6b);font-size:var(--font-size-xs, 10px)}.no-results{padding:var(--Size-3, 12px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px);list-style:none;text-align:center}`;
 
 const DropiSelect = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChangeSelect = createEvent(this, "onChangeSelect", 7);
-        this.onClear = createEvent(this, "onClear", 7);
-        this.onSearch = createEvent(this, "onSearch", 7);
-        this.scrolledToEnd = createEvent(this, "scrolledToEnd", 7);
-        this.onKeyEnter = createEvent(this, "onKeyEnter", 7);
+        this.dropiChangeSelect = createEvent(this, "dropiChangeSelect", 7);
+        this.dropiClear = createEvent(this, "dropiClear", 7);
+        this.dropiSearch = createEvent(this, "dropiSearch", 7);
+        this.dropiScrollEnd = createEvent(this, "dropiScrollEnd", 7);
+        this.dropiKeyEnter = createEvent(this, "dropiKeyEnter", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -55,6 +55,8 @@ const DropiSelect = class {
     selectedOption = null;
     /** Custom CSS class for the dropdown overlay */
     overlayClass = '';
+    /** If true, uses absolute positioning instead of fixed (better for modals with transforms) */
+    withinModal = false;
     /**
      * Convenience object prop — matches Angular `selectProperties: SelectProperties`.
      * Fields: label, placeholder, options, showObligatory, textHelper,
@@ -74,15 +76,15 @@ const DropiSelect = class {
     };
     // ── Events ───────────────────────────────────────────────────
     /** Emitted when an option is selected — matches Angular 'onChangeSelect' */
-    onChangeSelect;
+    dropiChangeSelect;
     /** Emitted when the selection is cleared — matches Angular 'onClear' */
-    onClear;
+    dropiClear;
     /** Emitted on search input — matches Angular 'onSearch' */
-    onSearch;
+    dropiSearch;
     /** Emitted when the list is scrolled to the end — matches Angular 'scrolledToEnd' */
-    scrolledToEnd;
+    dropiScrollEnd;
     /** Emitted on Enter key inside search — matches Angular 'onKeyEnter' */
-    onKeyEnter;
+    dropiKeyEnter;
     // ── Lifecycle ────────────────────────────────────────────────
     componentWillLoad() {
         if (this.selectProperties)
@@ -163,13 +165,27 @@ const DropiSelect = class {
         this._selectedOption = null;
         this.multiSelected = [];
         this.internals.setFormValue('');
-        this.onClear.emit();
+        this.dropiClear.emit();
     }
     /** Reset multi-select state and show a placeholder label */
     async resetMultiSelect(_placeholder) {
         this.multiSelected = [];
         this.internals.setFormValue('');
     }
+    // ── Scroll & Resize listeners ──────────────────────────────
+    handleWindowScroll(e) {
+        if (!this.isOpen || this.withinModal)
+            return;
+        // When scroll originates inside shadow DOM, e.target is retargeted to the host element
+        if (e.target === this.el)
+            return;
+        this.closeDropdown();
+    }
+    handleWindowResize() {
+        if (this.isOpen && !this.withinModal) {
+            this.closeDropdown();
+        }
+    }
     // ── Click outside ────────────────────────────────────────────
     handleOutsideClick(e) {
         if (this.isOpen && !e.composedPath().includes(this.el)) {
@@ -213,8 +229,8 @@ const DropiSelect = class {
         return this.placeholder;
     }
     // ── Dropdown positioning ─────────────────────────────────────
-    openDropdown() {
-        if (this.disabled)
+    updateDropdownPosition() {
+        if (!this.buttonRef)
             return;
         const rect = this.buttonRef.getBoundingClientRect();
         const viewportHeight = window.innerHeight;
@@ -228,6 +244,18 @@ const DropiSelect = class {
             left: `${rect.left}px`,
             width: `${rect.width}px`,
         };
+    }
+    openDropdown() {
+        if (this.withinModal) {
+            this.dropdownStyle = {
+                top: `${this.el.offsetHeight}px`,
+                left: '0px',
+                width: '100%',
+            };
+        }
+        else {
+            this.updateDropdownPosition();
+        }
         this.isOpen = true;
         if (this.searchEnabled) {
             setTimeout(() => {
@@ -257,12 +285,12 @@ const DropiSelect = class {
                 this.multiSelected = [...this.multiSelected, option];
             }
             this.internals.setFormValue(this.multiSelected.map(o => o.id).join(','));
-            this.onChangeSelect.emit([...this.multiSelected]);
+            this.dropiChangeSelect.emit([...this.multiSelected]);
         }
         else {
             this._selectedOption = option;
             this.internals.setFormValue(String(option.id));
-            this.onChangeSelect.emit(option);
+            this.dropiChangeSelect.emit(option);
             this.closeDropdown();
         }
     }
@@ -272,7 +300,7 @@ const DropiSelect = class {
     // ── Search ───────────────────────────────────────────────────
     handleSearch(term) {
         this.searchTerm = term;
-        this.onSearch.emit(term);
+        this.dropiSearch.emit(term);
         const lower = term.toLowerCase().trim();
         if (!lower) {
             this.filteredOptions = [...this.options];
@@ -300,7 +328,7 @@ const DropiSelect = class {
                 this.hasEmittedScrollEnd = false;
             this.lastScrollTop = el.scrollTop;
             if (distFromBottom <= threshold && !this.hasEmittedScrollEnd) {
-                this.scrolledToEnd.emit();
+                this.dropiScrollEnd.emit();
                 this.hasEmittedScrollEnd = true;
                 setTimeout(() => { this.hasEmittedScrollEnd = false; }, 1000);
             }
@@ -348,16 +376,16 @@ const DropiSelect = class {
     renderDropdown() {
         if (!this.isOpen)
             return null;
-        return (h("ul", { class: `select-dropdown-overlay ${this.overlayClass}`, style: this.dropdownStyle, onScroll: (e) => this.handleScroll(e) }, this.searchEnabled && (h("li", { class: "sticky-search" }, h("div", { class: "search-wrapper" }, h("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("input", { class: "search-input", type: "text", placeholder: this.placeHolderSearch, value: this.searchTerm, onInput: (e) => this.handleSearch(e.target.value), onKeyDown: (e) => {
+        return (h("ul", { class: `select-dropdown-overlay ${this.overlayClass} ${this.withinModal ? 'within-modal' : ''}`, style: this.dropdownStyle, onScroll: (e) => this.handleScroll(e) }, this.searchEnabled && (h("li", { class: "sticky-search" }, h("div", { class: "search-wrapper" }, h("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("input", { class: "search-input", type: "text", placeholder: this.placeHolderSearch, value: this.searchTerm, onInput: (e) => this.handleSearch(e.target.value), onKeyDown: (e) => {
                 if (e.key === 'Enter')
-                    this.onKeyEnter.emit(e);
+                    this.dropiKeyEnter.emit(e);
             } }), this.searchTerm && (h("button", { type: "button", class: "search-clear", onClick: () => this.handleSearch('') }, h("dropi-icon", { name: "Close", iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-400" })))))), this.isGrouped && this.filteredOptions.map(group => [
             h("li", { class: "option-group-title" }, group.category),
             ...group.options.map(opt => (h("li", { key: opt.id }, h("button", { type: "button", class: { option: true, 'option-group': true, 'disabled-option': !!opt.disabled }, disabled: opt.disabled, onClick: () => this.selectOption(opt) }, opt.preIcon && h("dropi-icon", { name: opt.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }), h("span", { class: "elipsis" }, opt.label))))),
         ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (h("li", { class: "no-results" }, "Sin resultados"))));
     }
     render() {
-        return (h("div", { key: '9f5397dca313ba676a5a038f89ded457c324ac7a', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '5924d81286019ca01ca5eda924078e64db5ead66', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '1565c47c081c8fb497185417aa46559f3754db89', class: "asterisk" }, " *"))), h("div", { key: '6be308aeafb7a4a2da302db925ccc07e5eb27718', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: 'a2ea9c5e67274181c5bc020c990281ac425b489b', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (h("div", { key: 'a13ebbf9fe6e975724b2441f5c1c71b18dacf128', class: "select-helper" }, h("span", { key: '55f2369bc0a8c156454b4c29a323f98bd13321fb' }, this.textHelper))), this.hasError && this.errorText && (h("div", { key: 'bc5dc3394916459576798d5f1db4126992b30d58', class: "select-helper-error" }, h("dropi-icon", { key: '12bcece304d9de3cc807921ba69af29b9b763fc9', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: 'c221b88fde03aa2d66ce212272ff999f2ba5a9ad' }, this.errorText))), this.renderDropdown()));
+        return (h("div", { key: '4f34c329d9993926758230f0e9ca0f8d0e57ef6e', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '743013592658ee415d4a9e3db8ec648472a3428e', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '56183248733eb18956664c859c8f7d4057f3fa11', class: "asterisk" }, " *"))), h("div", { key: 'c93f45456478ac5419d542512092e877a04f28b7', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: '0632779b9ba71f1fb91944b54b477999f607a3f5', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (h("div", { key: '3e57fc2b53715abb9800db573119cf77b0333d37', class: "select-helper" }, h("span", { key: 'baf3d1f0ae4d535acae2a08df8d2079996afdcff' }, this.textHelper))), this.hasError && this.errorText && (h("div", { key: '8b25aae92b9370a02fcfd81f50b98df145d3cb0e', class: "select-helper-error" }, h("dropi-icon", { key: '60643f0b7e54f8533dc9fd7dd17715aec59d851c', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '35bcdfd3c9825cbac269b1085d4c552df694f33a' }, this.errorText))), this.renderDropdown()));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {