@dropi/ui 0.1.37 → 0.1.41

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

@@ -0,0 +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}

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

@@ -0,0 +1,383 @@
+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 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);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return getElement(this); }
+    internals;
+    buttonRef;
+    scrollDebounce;
+    hasEmittedScrollEnd = false;
+    lastScrollTop = 0;
+    // ── Props ────────────────────────────────────────────────────
+    label = '';
+    placeholder = 'Select';
+    /** Array of SelectOption or SelectOptionGroup */
+    options = [];
+    name = '';
+    disabled = false;
+    hasError = false;
+    errorText = '';
+    textHelper = '';
+    showObligatory = false;
+    /** Enables text search inside the dropdown */
+    searchEnabled = false;
+    /** Allows selecting multiple options */
+    multiSelect = false;
+    /** Renders trigger without border (inline/dropdown style) */
+    dropdownType = false;
+    /** Show country flags next to option labels */
+    showCountryFlags = false;
+    /** Renders options as radio buttons with optional image */
+    radioOptions = false;
+    /** Placeholder inside the search field */
+    placeHolderSearch = 'Buscar';
+    /** Icon name shown before the trigger label */
+    preIcon = '';
+    /** Pre-select an option by id */
+    defaultSelectedId;
+    /** Controlled selected option (single select) - matches Angular 'selectedOption' */
+    selectedOption = null;
+    /** Custom CSS class for the dropdown overlay */
+    overlayClass = '';
+    /**
+     * Convenience object prop — matches Angular `selectProperties: SelectProperties`.
+     * Fields: label, placeholder, options, showObligatory, textHelper,
+     * searchEnabled, multiSelect, dropdownType, hasError, errorText,
+     * radioOptions, preIcon.
+     * When provided, its non-null fields override individual props.
+     */
+    selectProperties = null;
+    // ── State ────────────────────────────────────────────────────
+    isOpen = false;
+    _selectedOption = null;
+    multiSelected = [];
+    filteredOptions = [];
+    searchTerm = '';
+    dropdownStyle = {
+        top: '0px', left: '0px', width: '0px',
+    };
+    // ── Events ───────────────────────────────────────────────────
+    /** Emitted when an option is selected — matches Angular 'onChangeSelect' */
+    onChangeSelect;
+    /** Emitted when the selection is cleared — matches Angular 'onClear' */
+    onClear;
+    /** Emitted on search input — matches Angular 'onSearch' */
+    onSearch;
+    /** Emitted when the list is scrolled to the end — matches Angular 'scrolledToEnd' */
+    scrolledToEnd;
+    /** Emitted on Enter key inside search — matches Angular 'onKeyEnter' */
+    onKeyEnter;
+    // ── Lifecycle ────────────────────────────────────────────────
+    componentWillLoad() {
+        if (this.selectProperties)
+            this.selectPropertiesChanged(this.selectProperties);
+        this.normalizeOptions();
+        this.filteredOptions = [...this.options];
+        this.applyDefaultSelection();
+    }
+    selectPropertiesChanged(val) {
+        if (!val)
+            return;
+        if (val.label !== undefined)
+            this.label = val.label;
+        if (val.placeholder !== undefined)
+            this.placeholder = val.placeholder;
+        if (val.options !== undefined)
+            this.options = val.options;
+        if (val.showObligatory !== undefined)
+            this.showObligatory = val.showObligatory;
+        if (val.textHelper !== undefined)
+            this.textHelper = val.textHelper;
+        if (val.searchEnabled !== undefined)
+            this.searchEnabled = val.searchEnabled;
+        if (val.multiSelect !== undefined)
+            this.multiSelect = val.multiSelect;
+        if (val.dropdownType !== undefined)
+            this.dropdownType = val.dropdownType;
+        if (val.hasError !== undefined)
+            this.hasError = val.hasError;
+        if (val.errorText !== undefined)
+            this.errorText = val.errorText;
+        if (val.radioOptions !== undefined)
+            this.radioOptions = val.radioOptions;
+        if (val.preIcon !== undefined)
+            this.preIcon = val.preIcon;
+    }
+    optionsChanged() {
+        this.normalizeOptions();
+        this.filteredOptions = [...this.options];
+        this.applyDefaultSelection();
+    }
+    normalizeOptions() {
+        if (!this.options) {
+            this.options = [];
+            return;
+        }
+        if (typeof this.options === 'string') {
+            try {
+                this.options = JSON.parse(this.options);
+            }
+            catch (_) {
+                this.options = [];
+            }
+        }
+    }
+    defaultChanged(newId) {
+        this.applyDefaultSelection(newId);
+    }
+    valueChanged(v) {
+        this._selectedOption = v;
+        this.internals.setFormValue(v ? String(v.id) : '');
+    }
+    // ── Public Methods ───────────────────────────────────────────
+    /** Select an option by its id */
+    async setById(id) {
+        const opt = this.options.find(o => o.id === id || String(o.id) === String(id));
+        if (opt)
+            this.selectOption(opt);
+    }
+    /** Select an option by its label */
+    async setByLabel(label) {
+        const opt = this.options.find(o => o.label === label);
+        if (opt)
+            this.selectOption(opt);
+    }
+    /** Clear the current selection */
+    async clearSelection() {
+        this._selectedOption = null;
+        this.multiSelected = [];
+        this.internals.setFormValue('');
+        this.onClear.emit();
+    }
+    /** Reset multi-select state and show a placeholder label */
+    async resetMultiSelect(_placeholder) {
+        this.multiSelected = [];
+        this.internals.setFormValue('');
+    }
+    // ── Click outside ────────────────────────────────────────────
+    handleOutsideClick(e) {
+        if (this.isOpen && !e.composedPath().includes(this.el)) {
+            this.closeDropdown();
+        }
+    }
+    // ── Helpers ──────────────────────────────────────────────────
+    applyDefaultSelection(id) {
+        const targetId = id ?? this.defaultSelectedId;
+        if (targetId === '' || targetId === undefined || targetId === null)
+            return;
+        const flat = this.flatOptions();
+        const found = flat.find(o => o.id === targetId || String(o.id) === String(targetId));
+        if (found) {
+            this._selectedOption = found;
+            this.internals.setFormValue(String(found.id));
+        }
+    }
+    flatOptions() {
+        if (!this.options?.length)
+            return [];
+        if ('category' in this.options[0]) {
+            return this.options.flatMap(g => g.options);
+        }
+        return this.options;
+    }
+    get isGrouped() {
+        return this.options?.length > 0 && 'category' in this.options[0];
+    }
+    get triggerLabel() {
+        if (this.multiSelect) {
+            return this.multiSelected.length
+                ? this.multiSelected.map(o => o.label).join(', ')
+                : this.placeholder;
+        }
+        if (this._selectedOption) {
+            return this.showCountryFlags && this._selectedOption.shortLabel
+                ? this._selectedOption.shortLabel
+                : this._selectedOption.label;
+        }
+        return this.placeholder;
+    }
+    // ── Dropdown positioning ─────────────────────────────────────
+    openDropdown() {
+        if (this.disabled)
+            return;
+        const rect = this.buttonRef.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const dropdownHeight = 250;
+        const spaceBelow = viewportHeight - rect.bottom;
+        const top = spaceBelow >= dropdownHeight
+            ? rect.bottom + 4
+            : rect.top - dropdownHeight - 4;
+        this.dropdownStyle = {
+            top: `${top}px`,
+            left: `${rect.left}px`,
+            width: `${rect.width}px`,
+        };
+        this.isOpen = true;
+        if (this.searchEnabled) {
+            setTimeout(() => {
+                const searchInput = this.el.shadowRoot?.querySelector('.search-input');
+                searchInput?.focus();
+            }, 50);
+        }
+    }
+    closeDropdown() {
+        this.isOpen = false;
+        this.searchTerm = '';
+        this.filteredOptions = [...this.options];
+    }
+    toggleDropdown() {
+        this.isOpen ? this.closeDropdown() : this.openDropdown();
+    }
+    // ── Option selection ─────────────────────────────────────────
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        if (this.multiSelect) {
+            const idx = this.multiSelected.findIndex(o => o.id === option.id);
+            if (idx >= 0) {
+                this.multiSelected = this.multiSelected.filter(o => o.id !== option.id);
+            }
+            else {
+                this.multiSelected = [...this.multiSelected, option];
+            }
+            this.internals.setFormValue(this.multiSelected.map(o => o.id).join(','));
+            this.onChangeSelect.emit([...this.multiSelected]);
+        }
+        else {
+            this._selectedOption = option;
+            this.internals.setFormValue(String(option.id));
+            this.onChangeSelect.emit(option);
+            this.closeDropdown();
+        }
+    }
+    isOptionChecked(option) {
+        return this.multiSelected.some(o => o.id === option.id);
+    }
+    // ── Search ───────────────────────────────────────────────────
+    handleSearch(term) {
+        this.searchTerm = term;
+        this.onSearch.emit(term);
+        const lower = term.toLowerCase().trim();
+        if (!lower) {
+            this.filteredOptions = [...this.options];
+            return;
+        }
+        if (this.isGrouped) {
+            this.filteredOptions = this.options
+                .map(g => ({ ...g, options: g.options.filter(o => o.label.toLowerCase().includes(lower)) }))
+                .filter(g => g.options.length > 0);
+        }
+        else {
+            this.filteredOptions = this.options.filter(o => o.label.toLowerCase().includes(lower));
+        }
+    }
+    // ── Scroll to end ─────────────────────────────────────────────
+    handleScroll(e) {
+        const el = e.target;
+        clearTimeout(this.scrollDebounce);
+        this.scrollDebounce = setTimeout(() => {
+            if (!el)
+                return;
+            const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+            const threshold = Math.min(50, el.clientHeight / 2);
+            if (el.scrollTop < this.lastScrollTop)
+                this.hasEmittedScrollEnd = false;
+            this.lastScrollTop = el.scrollTop;
+            if (distFromBottom <= threshold && !this.hasEmittedScrollEnd) {
+                this.scrolledToEnd.emit();
+                this.hasEmittedScrollEnd = true;
+                setTimeout(() => { this.hasEmittedScrollEnd = false; }, 1000);
+            }
+        }, 100);
+    }
+    // ── Render helpers ───────────────────────────────────────────
+    renderTrigger() {
+        const isCompleted = this.multiSelect ? this.multiSelected.length > 0 : !!this._selectedOption;
+        const iconColor = this.disabled ? 'Gray-Gray-300' : this.dropdownType ? 'Gray-Gray-600' : 'Gray-Gray-400';
+        const iconSize = this.dropdownType ? '24px' : '20px';
+        return (h("button", { type: "button", class: {
+                'select-button': true,
+                'select-completed': isCompleted,
+                'select-button-error': this.hasError,
+                'no-border': this.dropdownType,
+            }, disabled: this.disabled, ref: el => (this.buttonRef = el), onClick: () => this.toggleDropdown() }, h("div", { class: {
+                'button-content': true,
+                'option-radio': this.radioOptions && !!this._selectedOption && !this.multiSelect,
+            } }, this.preIcon && (h("dropi-icon", { name: this.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), this.radioOptions && this._selectedOption && !this.multiSelect && [
+            this._selectedOption.imageUrl && !this._selectedOption.isFallback
+                ? h("img", { class: "option-image small-image", src: this._selectedOption.imageUrl, alt: "", onError: () => {
+                        if (this._selectedOption)
+                            this._selectedOption = { ...this._selectedOption, isFallback: true };
+                    } })
+                : this._selectedOption.isFallback
+                    ? h("span", { class: "option-image-fallback small-image" }, this._selectedOption.label.charAt(0).toUpperCase())
+                    : null,
+            h("div", { class: "labels-container elipsis" }, h("span", null, this._selectedOption.label), this._selectedOption.secondLabel && h("span", { class: "option-second-label" }, this._selectedOption.secondLabel)),
+        ], !(this.radioOptions && this._selectedOption && !this.multiSelect) && (h("div", { class: "elipsis" }, this.triggerLabel))), h("dropi-icon", { name: this.isOpen ? 'Dropdown-up' : 'Dropdown-down', iconWidth: iconSize, iconHeight: iconSize, color: iconColor })));
+    }
+    renderOption(option) {
+        const isSelected = this.multiSelect
+            ? this.isOptionChecked(option)
+            : this._selectedOption?.id === option.id;
+        return (h("li", { key: option.id }, h("button", { type: "button", class: {
+                option: true,
+                'option-radio': this.radioOptions,
+                'option-with-flag': this.showCountryFlags && !!option.countryCode,
+                'disabled-option': !!option.disabled,
+                'selected-option': isSelected,
+            }, disabled: option.disabled, onClick: () => this.selectOption(option) }, this.multiSelect && (h("span", { class: { 'multi-checkbox': true, checked: isSelected } }, isSelected && (h("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M20.6 5.7L9.1 17.2c-.2.2-.5.3-.8.3s-.6-.1-.8-.3L3 12.8c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l3.9 3.9L19.2 4.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4z", fill: "white" }))))), this.radioOptions && (h("div", { class: { radio: true, selected: isSelected } }, isSelected && h("div", { class: "circle" }))), !this.radioOptions && option.preIcon && (h("dropi-icon", { name: option.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), this.radioOptions && option.imageUrl && !option.isFallback && (h("img", { class: "option-image", src: option.imageUrl, alt: "", onError: () => { option.isFallback = true; this.options = [...this.options]; } })), this.radioOptions && option.isFallback && (h("span", { class: "option-image-fallback" }, option.label.charAt(0).toUpperCase())), this.showCountryFlags && option.countryCode && (h("span", { class: "flag-placeholder" }, option.countryCode)), this.radioOptions
+            ? (h("div", { class: "labels-container" }, h("span", { class: "elipsis" }, option.label), option.secondLabel && h("span", { class: "option-second-label" }, option.secondLabel)))
+            : (h("span", { class: "elipsis" }, this.showCountryFlags && option.shortLabel ? option.shortLabel : option.label)))));
+    }
+    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) => {
+                if (e.key === 'Enter')
+                    this.onKeyEnter.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()));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "selectProperties": [{
+                "selectPropertiesChanged": 0
+            }],
+        "options": [{
+                "optionsChanged": 0
+            }],
+        "defaultSelectedId": [{
+                "defaultChanged": 0
+            }],
+        "selectedOption": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+DropiSelect.style = dropiSelectCss();
+
+export { DropiSelect as dropi_select };
+//# sourceMappingURL=dropi-select.entry.esm.js.map
+
+//# sourceMappingURL=dropi-select.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"dropi-select.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-select/dropi-select.css?tag=dropi-select&encapsulation=shadow","src/components/dropi-select/dropi-select.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  text-align: left;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n/* ── Wrapper ────────────────────────────────────────────────── */\n.custom-select {\n  position: relative;\n  width: 100%;\n}\n\n.custom-select label {\n  display: block;\n  font-size: var(--font-size-xs, 10px);\n  font-weight: var(--font-weight-regular, 400);\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.disabled-label {\n  color: var(--Gray-Gray-400, #858ea6) !important;\n}\n\n.asterisk {\n  color: var(--Error-Error-500, #f46a6b);\n}\n\n/* ── Trigger row ────────────────────────────────────────────── */\n.dropdown-container {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.left-label {\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-m, 14px);\n  white-space: nowrap;\n}\n\n/* ── Trigger button ─────────────────────────────────────────── */\n.select-button {\n  box-sizing: border-box;\n  width: 100%;\n  height: 40px;\n  padding: 0 0.75rem;\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, 12px);\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.2s ease;\n  gap: 8px;\n}\n\n.select-button:focus {\n  outline: none;\n  border-color: var(--Info-Info-500, #50a5f1);\n}\n\n.select-button:disabled {\n  border-color: var(--Gray-Gray-200, #c3c9d9);\n  color: var(--Gray-Gray-400, #858ea6);\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  cursor: not-allowed;\n}\n\n.select-completed {\n  border-color: var(--Gray-Gray-400, #858ea6);\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.select-button-error {\n  border-color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.no-border {\n  border: none !important;\n  color: var(--Gray-Gray-600, #475066);\n  padding: var(--Size-4, 16px);\n  background-color: transparent !important;\n  gap: var(--Size-2, 8px);\n}\n\n.no-border:disabled {\n  background-color: transparent !important;\n}\n\n/* ── Button content ─────────────────────────────────────────── */\n.button-content {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  overflow: hidden;\n  flex: 1;\n  min-width: 0;\n}\n\n.elipsis {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ── Dropdown overlay (fixed position) ──────────────────────── */\n.select-dropdown-overlay {\n  position: fixed;\n  max-height: 250px;\n  overflow-y: auto;\n  list-style: none;\n  padding: var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);\n  margin: 0;\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);\n  z-index: 9999;\n  animation: dropdown-open 120ms ease-out;\n}\n\n@keyframes dropdown-open {\n  from { opacity: 0; transform: scaleY(0.95); transform-origin: top; }\n  to   { opacity: 1; transform: scaleY(1);    transform-origin: top; }\n}\n\n/* ── Options ────────────────────────────────────────────────── */\n.option {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 40px;\n  border-radius: var(--Border-2, 8px);\n  padding: var(--Size-3, 12px) var(--Size-4, 16px);\n  border: none;\n  background: transparent;\n  text-align: left;\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  transition: background 0.15s ease;\n}\n\n.option:hover:not(:disabled) {\n  background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.option:disabled,\n.disabled-option {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.option.selected-option:not(.option-radio) {\n  background: var(--Primary-Primary-50, #fef8f2);\n  color: var(--Primary-Primary-500, #f49a3d);\n}\n\n/* ── Grouped options ─────────────────────────────────────────── */\n.option-group-title {\n  padding: var(--Size-3, 12px) var(--Size-4, 16px);\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-medium, 500);\n  color: var(--Gray-Gray-500, #69738c);\n  list-style: none;\n}\n\n.option-group {\n  padding-left: var(--Size-6, 32px);\n}\n\n/* ── Sticky search ───────────────────────────────────────────── */\n.sticky-search {\n  position: sticky;\n  top: calc(-1 * var(--Size-4, 16px));\n  background: var(--Neutral-White, #ffffff);\n  z-index: 10;\n  margin: calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;\n  padding: var(--Size-2, 8px) var(--Size-4, 16px);\n  border-bottom: 1px solid var(--Gray-Gray-100, #e6eaf2);\n  list-style: none;\n}\n\n.search-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  padding: 6px 10px;\n  background: var(--Neutral-White, #ffffff);\n}\n\n.search-input {\n  flex: 1;\n  border: none;\n  outline: none;\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  color: var(--Gray-Gray-700, #32394d);\n  background: transparent;\n}\n\n.search-input::placeholder {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.search-clear {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n}\n\n/* ── Multi-select checkbox ───────────────────────────────────── */\n.multi-checkbox {\n  width: 18px;\n  height: 18px;\n  min-width: 18px;\n  border-radius: var(--Border-1, 4px);\n  border: 2px solid var(--Gray-Gray-200, #c3c9d9);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.multi-checkbox.checked {\n  background: var(--Primary-Primary-500, #f49a3d);\n  border-color: var(--Primary-Primary-500, #f49a3d);\n}\n\n/* ── Radio options ───────────────────────────────────────────── */\n.option-radio {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.option-radio.selected-option {\n  border-radius: var(--Border-2, 8px);\n  background: var(--Primary-Primary-50, #fef8f2);\n  color: var(--Primary-Primary-500, #f49a3d);\n}\n\n.option-radio.selected-option .option-second-label {\n  color: var(--Primary-Primary-500, #f49a3d);\n}\n\n.radio {\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  border-radius: 50%;\n  border: 2px solid var(--Gray-Gray-200, #c3c9d9);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.radio.selected {\n  border-color: var(--Primary-Primary-500, #f49a3d);\n}\n\n.circle {\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: var(--Primary-Primary-500, #f49a3d);\n}\n\n.labels-container {\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-width: 0;\n}\n\n.option-image {\n  width: 24px;\n  height: 24px;\n  border-radius: 60px;\n  object-fit: cover;\n  flex-shrink: 0;\n}\n\n.small-image {\n  width: 20px;\n  height: 20px;\n}\n\n.option-image-fallback {\n  width: 24px;\n  height: 24px;\n  border-radius: 60px;\n  background: var(--Primary-Primary-500, #f49a3d);\n  color: white;\n  font-size: 13px;\n  font-weight: var(--font-weight-bold);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.small-image.option-image-fallback {\n  width: 20px;\n  height: 20px;\n}\n\n.option-second-label {\n  color: var(--Gray-Gray-700, #32394d);\n  font-weight: var(--font-weight-bold);\n  white-space: nowrap;\n}\n\n/* ── Country flag placeholder ────────────────────────────────── */\n.flag-placeholder {\n  font-size: 11px;\n  font-weight: var(--font-weight-semibold);\n  color: var(--Gray-Gray-500, #69738c);\n  flex-shrink: 0;\n}\n\n/* ── Helper / error text ────────────────────────────────────── */\n.select-helper,\n.select-helper-error {\n  display: flex;\n  gap: var(--Size-1, 4px);\n  align-items: center;\n  margin-top: var(--Size-1, 4px);\n}\n\n.select-helper span {\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-xs, 10px);\n}\n\n.select-helper-error span {\n  color: var(--Error-Error-500, #f46a6b);\n  font-size: var(--font-size-xs, 10px);\n}\n\n/* ── No results ─────────────────────────────────────────────── */\n.no-results {\n  padding: var(--Size-3, 12px) var(--Size-4, 16px);\n  color: var(--Gray-Gray-400, #858ea6);\n  font-size: var(--font-size-s, 12px);\n  list-style: none;\n  text-align: center;\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n  Listen,\n  Element,\n  AttachInternals,\n  h,\n} from '@stencil/core';\nimport { SelectOption, SelectOptionGroup } from './select.types';\n\n/**\n * @component dropi-select\n * Feature-rich select with support for:\n * - Single / multi select\n * - Grouped options\n * - Search / filter\n * - Country flags\n * - Radio-style options with images\n * - Inline (dropdownType) or bordered trigger\n * - Native form association\n *\n * ## Usage\n * Options must be set via JS property (not HTML attribute) for object arrays:\n * ```js\n * document.querySelector('dropi-select').options = [\n *   { id: 1, label: 'Option A' },\n *   { id: 2, label: 'Option B' },\n * ];\n * ```\n */\n@Component({\n  tag: 'dropi-select',\n  styleUrl: 'dropi-select.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiSelect {\n  @Element() el: HTMLElement;\n  @AttachInternals() internals: ElementInternals;\n\n  private buttonRef!: HTMLButtonElement;\n  private scrollDebounce: any;\n  private hasEmittedScrollEnd = false;\n  private lastScrollTop = 0;\n\n  // ── Props ────────────────────────────────────────────────────\n  @Prop({ mutable: true }) label: string = '';\n  @Prop({ mutable: true }) placeholder: string = 'Select';\n  /** Array of SelectOption or SelectOptionGroup */\n  @Prop({ mutable: true }) options: SelectOption[] | SelectOptionGroup[] = [];\n  @Prop() name: string = '';\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ mutable: true }) hasError: boolean = false;\n  @Prop({ mutable: true }) errorText: string = '';\n  @Prop({ mutable: true }) textHelper: string = '';\n  @Prop({ mutable: true }) showObligatory: boolean = false;\n  /** Enables text search inside the dropdown */\n  @Prop({ mutable: true }) searchEnabled: boolean = false;\n  /** Allows selecting multiple options */\n  @Prop({ mutable: true }) multiSelect: boolean = false;\n  /** Renders trigger without border (inline/dropdown style) */\n  @Prop({ mutable: true }) dropdownType: boolean = false;\n  /** Show country flags next to option labels */\n  @Prop() showCountryFlags: boolean = false;\n  /** Renders options as radio buttons with optional image */\n  @Prop({ mutable: true }) radioOptions: boolean = false;\n  /** Placeholder inside the search field */\n  @Prop() placeHolderSearch: string = 'Buscar';\n  /** Icon name shown before the trigger label */\n  @Prop({ mutable: true }) preIcon: string = '';\n  /** Pre-select an option by id */\n  @Prop({ mutable: true }) defaultSelectedId: string | number;\n  /** Controlled selected option (single select) - matches Angular 'selectedOption' */\n  @Prop({ mutable: true }) selectedOption: SelectOption | null = null;\n  /** Custom CSS class for the dropdown overlay */\n  @Prop() overlayClass: string = '';\n  /**\n   * Convenience object prop — matches Angular `selectProperties: SelectProperties`.\n   * Fields: label, placeholder, options, showObligatory, textHelper,\n   * searchEnabled, multiSelect, dropdownType, hasError, errorText,\n   * radioOptions, preIcon.\n   * When provided, its non-null fields override individual props.\n   */\n  @Prop() selectProperties: any = null;\n\n  // ── State ────────────────────────────────────────────────────\n  @State() private isOpen: boolean = false;\n  @State() private _selectedOption: SelectOption | null = null;\n  @State() private multiSelected: SelectOption[] = [];\n  @State() private filteredOptions: SelectOption[] | SelectOptionGroup[] = [];\n  @State() private searchTerm: string = '';\n  @State() private dropdownStyle: { top: string; left: string; width: string } = {\n    top: '0px', left: '0px', width: '0px',\n  };\n\n  // ── Events ───────────────────────────────────────────────────\n  /** Emitted when an option is selected — matches Angular 'onChangeSelect' */\n  @Event() onChangeSelect: EventEmitter<SelectOption | SelectOption[]>;\n  /** Emitted when the selection is cleared — matches Angular 'onClear' */\n  @Event() onClear: EventEmitter<void>;\n  /** Emitted on search input — matches Angular 'onSearch' */\n  @Event() onSearch: EventEmitter<string>;\n  /** Emitted when the list is scrolled to the end — matches Angular 'scrolledToEnd' */\n  @Event() scrolledToEnd: EventEmitter<void>;\n  /** Emitted on Enter key inside search — matches Angular 'onKeyEnter' */\n  @Event() onKeyEnter: EventEmitter<KeyboardEvent>;\n\n  // ── Lifecycle ────────────────────────────────────────────────\n  componentWillLoad() {\n    if (this.selectProperties) this.selectPropertiesChanged(this.selectProperties);\n    this.normalizeOptions();\n    this.filteredOptions = [...(this.options as any[])];\n    this.applyDefaultSelection();\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.options !== undefined) this.options = val.options;\n    if (val.showObligatory !== undefined) this.showObligatory = val.showObligatory;\n    if (val.textHelper !== undefined) this.textHelper = val.textHelper;\n    if (val.searchEnabled !== undefined) this.searchEnabled = val.searchEnabled;\n    if (val.multiSelect !== undefined) this.multiSelect = val.multiSelect;\n    if (val.dropdownType !== undefined) this.dropdownType = val.dropdownType;\n    if (val.hasError !== undefined) this.hasError = val.hasError;\n    if (val.errorText !== undefined) this.errorText = val.errorText;\n    if (val.radioOptions !== undefined) this.radioOptions = val.radioOptions;\n    if (val.preIcon !== undefined) this.preIcon = val.preIcon;\n  }\n\n  @Watch('options')\n  optionsChanged() {\n    this.normalizeOptions();\n    this.filteredOptions = [...(this.options as any[])];\n    this.applyDefaultSelection();\n  }\n\n  private normalizeOptions() {\n    if (!this.options) { this.options = []; return; }\n    if (typeof this.options === 'string') {\n      try { this.options = JSON.parse(this.options as any); } catch (_) { this.options = []; }\n    }\n  }\n\n  @Watch('defaultSelectedId')\n  defaultChanged(newId: string | number) {\n    this.applyDefaultSelection(newId);\n  }\n\n  @Watch('selectedOption')\n  valueChanged(v: SelectOption | null) {\n    this._selectedOption = v;\n    this.internals.setFormValue(v ? String(v.id) : '');\n  }\n\n  // ── Public Methods ───────────────────────────────────────────\n  /** Select an option by its id */\n  @Method()\n  async setById(id: string | number) {\n    const opt = (this.options as SelectOption[]).find(\n      o => o.id === id || String(o.id) === String(id),\n    );\n    if (opt) this.selectOption(opt);\n  }\n\n  /** Select an option by its label */\n  @Method()\n  async setByLabel(label: string) {\n    const opt = (this.options as SelectOption[]).find(o => o.label === label);\n    if (opt) this.selectOption(opt);\n  }\n\n  /** Clear the current selection */\n  @Method()\n  async clearSelection() {\n    this._selectedOption = null;\n    this.multiSelected = [];\n    this.internals.setFormValue('');\n    this.onClear.emit();\n  }\n\n  /** Reset multi-select state and show a placeholder label */\n  @Method()\n  async resetMultiSelect(_placeholder?: string) {\n    this.multiSelected = [];\n    this.internals.setFormValue('');\n  }\n\n  // ── Click outside ────────────────────────────────────────────\n  @Listen('click', { target: 'document' })\n  handleOutsideClick(e: MouseEvent) {\n    if (this.isOpen && !e.composedPath().includes(this.el)) {\n      this.closeDropdown();\n    }\n  }\n\n  // ── Helpers ──────────────────────────────────────────────────\n  private applyDefaultSelection(id?: string | number) {\n    const targetId = id ?? this.defaultSelectedId;\n    if (targetId === '' || targetId === undefined || targetId === null) return;\n    const flat = this.flatOptions();\n    const found = flat.find(o => o.id === targetId || String(o.id) === String(targetId));\n    if (found) {\n      this._selectedOption = found;\n      this.internals.setFormValue(String(found.id));\n    }\n  }\n\n  private flatOptions(): SelectOption[] {\n    if (!this.options?.length) return [];\n    if ('category' in this.options[0]) {\n      return (this.options as SelectOptionGroup[]).flatMap(g => g.options);\n    }\n    return this.options as SelectOption[];\n  }\n\n  private get isGrouped(): boolean {\n    return this.options?.length > 0 && 'category' in this.options[0];\n  }\n\n  private get triggerLabel(): string {\n    if (this.multiSelect) {\n      return this.multiSelected.length\n        ? this.multiSelected.map(o => o.label).join(', ')\n        : this.placeholder;\n    }\n    if (this._selectedOption) {\n      return this.showCountryFlags && this._selectedOption.shortLabel\n        ? this._selectedOption.shortLabel\n        : this._selectedOption.label;\n    }\n    return this.placeholder;\n  }\n\n  // ── Dropdown positioning ─────────────────────────────────────\n  private openDropdown() {\n    if (this.disabled) return;\n    const rect = this.buttonRef.getBoundingClientRect();\n    const viewportHeight = window.innerHeight;\n    const dropdownHeight = 250;\n    const spaceBelow = viewportHeight - rect.bottom;\n    const top = spaceBelow >= dropdownHeight\n      ? rect.bottom + 4\n      : rect.top - dropdownHeight - 4;\n\n    this.dropdownStyle = {\n      top: `${top}px`,\n      left: `${rect.left}px`,\n      width: `${rect.width}px`,\n    };\n    this.isOpen = true;\n\n    if (this.searchEnabled) {\n      setTimeout(() => {\n        const searchInput = this.el.shadowRoot?.querySelector('.search-input') as HTMLInputElement;\n        searchInput?.focus();\n      }, 50);\n    }\n  }\n\n  private closeDropdown() {\n    this.isOpen = false;\n    this.searchTerm = '';\n    this.filteredOptions = [...(this.options as any[])];\n  }\n\n  private toggleDropdown() {\n    this.isOpen ? this.closeDropdown() : this.openDropdown();\n  }\n\n  // ── Option selection ─────────────────────────────────────────\n  private selectOption(option: SelectOption) {\n    if (option.disabled) return;\n\n    if (this.multiSelect) {\n      const idx = this.multiSelected.findIndex(o => o.id === option.id);\n      if (idx >= 0) {\n        this.multiSelected = this.multiSelected.filter(o => o.id !== option.id);\n      } else {\n        this.multiSelected = [...this.multiSelected, option];\n      }\n      this.internals.setFormValue(this.multiSelected.map(o => o.id).join(','));\n      this.onChangeSelect.emit([...this.multiSelected]);\n    } else {\n      this._selectedOption = option;\n      this.internals.setFormValue(String(option.id));\n      this.onChangeSelect.emit(option);\n      this.closeDropdown();\n    }\n  }\n\n  private isOptionChecked(option: SelectOption): boolean {\n    return this.multiSelected.some(o => o.id === option.id);\n  }\n\n  // ── Search ───────────────────────────────────────────────────\n  private handleSearch(term: string) {\n    this.searchTerm = term;\n    this.onSearch.emit(term);\n    const lower = term.toLowerCase().trim();\n\n    if (!lower) {\n      this.filteredOptions = [...(this.options as any[])];\n      return;\n    }\n\n    if (this.isGrouped) {\n      this.filteredOptions = (this.options as SelectOptionGroup[])\n        .map(g => ({ ...g, options: g.options.filter(o => o.label.toLowerCase().includes(lower)) }))\n        .filter(g => g.options.length > 0);\n    } else {\n      this.filteredOptions = (this.options as SelectOption[]).filter(\n        o => o.label.toLowerCase().includes(lower),\n      );\n    }\n  }\n\n  // ── Scroll to end ─────────────────────────────────────────────\n  private handleScroll(e: Event) {\n    const el = e.target as HTMLElement;\n    clearTimeout(this.scrollDebounce);\n    this.scrollDebounce = setTimeout(() => {\n      if (!el) return;\n      const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;\n      const threshold = Math.min(50, el.clientHeight / 2);\n\n      if (el.scrollTop < this.lastScrollTop) this.hasEmittedScrollEnd = false;\n      this.lastScrollTop = el.scrollTop;\n\n      if (distFromBottom <= threshold && !this.hasEmittedScrollEnd) {\n        this.scrolledToEnd.emit();\n        this.hasEmittedScrollEnd = true;\n        setTimeout(() => { this.hasEmittedScrollEnd = false; }, 1000);\n      }\n    }, 100);\n  }\n\n  // ── Render helpers ───────────────────────────────────────────\n  private renderTrigger() {\n    const isCompleted = this.multiSelect ? this.multiSelected.length > 0 : !!this._selectedOption;\n    const iconColor = this.disabled ? 'Gray-Gray-300' : this.dropdownType ? 'Gray-Gray-600' : 'Gray-Gray-400';\n    const iconSize = this.dropdownType ? '24px' : '20px';\n\n    return (\n      <button\n        type=\"button\"\n        class={{\n          'select-button': true,\n          'select-completed': isCompleted,\n          'select-button-error': this.hasError,\n          'no-border': this.dropdownType,\n        }}\n        disabled={this.disabled}\n        ref={el => (this.buttonRef = el as HTMLButtonElement)}\n        onClick={() => this.toggleDropdown()}\n      >\n        <div class={{\n          'button-content': true,\n          'option-radio': this.radioOptions && !!this._selectedOption && !this.multiSelect,\n        }}>\n          {this.preIcon && (\n            <dropi-icon name={this.preIcon} iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-500\" />\n          )}\n\n          {/* Radio option selected preview */}\n          {this.radioOptions && this._selectedOption && !this.multiSelect && [\n            this._selectedOption.imageUrl && !this._selectedOption.isFallback\n              ? <img class=\"option-image small-image\" src={this._selectedOption.imageUrl} alt=\"\" onError={() => { if (this._selectedOption) this._selectedOption = { ...this._selectedOption, isFallback: true }; }} />\n              : this._selectedOption.isFallback\n              ? <span class=\"option-image-fallback small-image\">{this._selectedOption.label.charAt(0).toUpperCase()}</span>\n              : null,\n            <div class=\"labels-container elipsis\">\n              <span>{this._selectedOption.label}</span>\n              {this._selectedOption.secondLabel && <span class=\"option-second-label\">{this._selectedOption.secondLabel}</span>}\n            </div>,\n          ]}\n\n          {/* Standard label */}\n          {!(this.radioOptions && this._selectedOption && !this.multiSelect) && (\n            <div class=\"elipsis\">{this.triggerLabel}</div>\n          )}\n        </div>\n\n        <dropi-icon\n          name={this.isOpen ? 'Dropdown-up' : 'Dropdown-down'}\n          iconWidth={iconSize}\n          iconHeight={iconSize}\n          color={iconColor}\n        />\n      </button>\n    );\n  }\n\n  private renderOption(option: SelectOption) {\n    const isSelected = this.multiSelect\n      ? this.isOptionChecked(option)\n      : this._selectedOption?.id === option.id;\n\n    return (\n      <li key={option.id}>\n        <button\n          type=\"button\"\n          class={{\n            option: true,\n            'option-radio': this.radioOptions,\n            'option-with-flag': this.showCountryFlags && !!option.countryCode,\n            'disabled-option': !!option.disabled,\n            'selected-option': isSelected,\n          }}\n          disabled={option.disabled}\n          onClick={() => this.selectOption(option)}\n        >\n          {this.multiSelect && (\n            <span class={{ 'multi-checkbox': true, checked: isSelected }}>\n              {isSelected && (\n                <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M20.6 5.7L9.1 17.2c-.2.2-.5.3-.8.3s-.6-.1-.8-.3L3 12.8c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l3.9 3.9L19.2 4.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4z\" fill=\"white\"/>\n                </svg>\n              )}\n            </span>\n          )}\n\n          {this.radioOptions && (\n            <div class={{ radio: true, selected: isSelected }}>\n              {isSelected && <div class=\"circle\" />}\n            </div>\n          )}\n\n          {!this.radioOptions && option.preIcon && (\n            <dropi-icon name={option.preIcon} iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-500\" />\n          )}\n\n          {this.radioOptions && option.imageUrl && !option.isFallback && (\n            <img class=\"option-image\" src={option.imageUrl} alt=\"\" onError={() => { option.isFallback = true; this.options = [...this.options as any[]]; }} />\n          )}\n          {this.radioOptions && option.isFallback && (\n            <span class=\"option-image-fallback\">{option.label.charAt(0).toUpperCase()}</span>\n          )}\n\n          {this.showCountryFlags && option.countryCode && (\n            <span class=\"flag-placeholder\">{option.countryCode}</span>\n          )}\n\n          {this.radioOptions\n            ? (\n              <div class=\"labels-container\">\n                <span class=\"elipsis\">{option.label}</span>\n                {option.secondLabel && <span class=\"option-second-label\">{option.secondLabel}</span>}\n              </div>\n            )\n            : (\n              <span class=\"elipsis\">\n                {this.showCountryFlags && option.shortLabel ? option.shortLabel : option.label}\n              </span>\n            )\n          }\n        </button>\n      </li>\n    );\n  }\n\n  private renderDropdown() {\n    if (!this.isOpen) return null;\n\n    return (\n      <ul\n        class={`select-dropdown-overlay ${this.overlayClass}`}\n        style={this.dropdownStyle}\n        onScroll={(e) => this.handleScroll(e)}\n      >\n        {/* Search */}\n        {this.searchEnabled && (\n          <li class=\"sticky-search\">\n            <div class=\"search-wrapper\">\n              <dropi-icon name=\"Search\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />\n              <input\n                class=\"search-input\"\n                type=\"text\"\n                placeholder={this.placeHolderSearch}\n                value={this.searchTerm}\n                onInput={(e) => this.handleSearch((e.target as HTMLInputElement).value)}\n                onKeyDown={(e) => { if (e.key === 'Enter') this.onKeyEnter.emit(e as KeyboardEvent); }}\n              />\n              {this.searchTerm && (\n                <button type=\"button\" class=\"search-clear\" onClick={() => this.handleSearch('')}>\n                  <dropi-icon name=\"Close\" iconWidth=\"14px\" iconHeight=\"14px\" color=\"Gray-Gray-400\" />\n                </button>\n              )}\n            </div>\n          </li>\n        )}\n\n        {/* Grouped options */}\n        {this.isGrouped && (this.filteredOptions as SelectOptionGroup[]).map(group => [\n          <li class=\"option-group-title\">{group.category}</li>,\n          ...group.options.map(opt => (\n            <li key={opt.id}>\n              <button\n                type=\"button\"\n                class={{ option: true, 'option-group': true, 'disabled-option': !!opt.disabled }}\n                disabled={opt.disabled}\n                onClick={() => this.selectOption(opt)}\n              >\n                {opt.preIcon && <dropi-icon name={opt.preIcon} iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-500\" />}\n                <span class=\"elipsis\">{opt.label}</span>\n              </button>\n            </li>\n          )),\n        ])}\n\n        {/* Flat options (single or multi) */}\n        {!this.isGrouped && (this.filteredOptions as SelectOption[]).map(opt => this.renderOption(opt))}\n\n        {/* Empty state */}\n        {(this.filteredOptions as any[]).length === 0 && (\n          <li class=\"no-results\">Sin resultados</li>\n        )}\n      </ul>\n    );\n  }\n\n  render() {\n    return (\n      <div class=\"custom-select\">\n        {/* Top label */}\n        {!this.dropdownType && this.label && (\n          <label class={{ 'disabled-label': this.disabled }}>\n            {this.label}\n            {this.showObligatory && !this.disabled && <span class=\"asterisk\"> *</span>}\n          </label>\n        )}\n\n        {/* Trigger row */}\n        <div class=\"dropdown-container\">\n          {this.dropdownType && this.label && (\n            <div class=\"left-label\">{this.label}</div>\n          )}\n          {this.renderTrigger()}\n        </div>\n\n        {/* Helper text */}\n        {this.textHelper && !this.hasError && (\n          <div class=\"select-helper\">\n            <span>{this.textHelper}</span>\n          </div>\n        )}\n\n        {/* Error text */}\n        {this.hasError && this.errorText && (\n          <div class=\"select-helper-error\">\n            <dropi-icon name=\"Warning-circle\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Error-Error-500\" />\n            <span>{this.errorText}</span>\n          </div>\n        )}\n\n        {/* Dropdown portal — fixed position */}\n        {this.renderDropdown()}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,79 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
+
+const dropiSidebarCss = () => `:host{display:block}.main-sidebar-container{margin-top:20px}.sidebar-option{height:45px;display:flex;align-items:center;position:relative;font-weight:var(--font-weight-medium, 500);gap:var(--Size-3, 12px);padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);border-radius:var(--Border-1, 4px);min-width:147px;cursor:pointer;user-select:none}.sidebar-option .arrow{position:absolute;right:17px;transition:transform 0.3s ease}.sidebar-option .arrow-expanded{transform:rotate(180deg)}.sidebar-default-option{color:var(--Gray-Gray-500, #68738f)}.sidebar-active-option{color:var(--Primary-Primary-500, #f49a3d);background-color:#fef8f1}.sidebar-sub-item{overflow:hidden;max-height:0;height:auto;font-weight:var(--font-weight-medium, 500);gap:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);cursor:pointer;opacity:0;padding:0 var(--Size-3, 12px) 0 var(--Size-8, 32px);transition:max-height 0.3s ease-out,     opacity 0.3s ease-out,     padding 0.3s ease-out;user-select:none}.sidebar-sub-item.sidebar-expanded{max-height:200px;opacity:1;padding:var(--Size-3, 12px) var(--Size-3, 12px) var(--Size-3, 12px) var(--Size-8, 32px)}.sidebar-sub-item-default{color:var(--Gray-Gray-500, #68738f)}.sidebar-sub-item-active{color:var(--Primary-Primary-500, #f49a3d)}.space-between{justify-content:space-between}`;
+
+const DropiSidebar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onIndexChanged = createEvent(this, "onIndexChanged", 7);
+    }
+    /**
+     * Define las propiedades y la cantidad de elementos a renderizar.
+     * Pasarlo como JSON string o directamente como array de SidebarProperties.
+     */
+    sideBarProperties = [];
+    /**
+     * Evento emitido cuando se selecciona una opción en el menú o un sub-hijo.
+     */
+    onIndexChanged;
+    parsedProperties = [];
+    watchPropHandler(newValue) {
+        this.parsedProperties = typeof newValue === 'string' ? JSON.parse(newValue) : (newValue || []);
+    }
+    componentWillLoad() {
+        this.watchPropHandler(this.sideBarProperties);
+    }
+    setExpandedPropertie(id) {
+        const propertieIndex = this.parsedProperties.findIndex((item) => item.id === id);
+        if (propertieIndex !== -1) {
+            const newProps = [...this.parsedProperties];
+            newProps[propertieIndex] = {
+                ...newProps[propertieIndex],
+                expandedMenu: !newProps[propertieIndex].expandedMenu
+            };
+            this.parsedProperties = newProps;
+        }
+    }
+    onItemClick(itemClicked) {
+        this.onIndexChanged.emit(itemClicked);
+        if (itemClicked.subItems && itemClicked.subItems.length > 0) {
+            this.setExpandedPropertie(itemClicked.id);
+        }
+    }
+    onSubItemClick(itemClicked) {
+        this.onIndexChanged.emit(itemClicked);
+    }
+    render() {
+        return (h("div", { key: '9f79e6370ff61c6278a8238b0dc92881832f9b8f', class: "main-sidebar-container" }, this.parsedProperties.map(item => {
+            return [
+                /* Item Principal */
+                h("div", { class: {
+                        'sidebar-option': true,
+                        'sidebar-active-option': !!item.active,
+                        'sidebar-default-option': !item.active
+                    }, onClick: () => this.onItemClick(item) }, h("dropi-icon", { name: item.icon || 'Cube', iconWidth: "20px", iconHeight: "20px", color: item.active ? 'Primary-Primary-500' : 'Gray-Gray-500' }), h("span", null, item.text), item.subItems && item.subItems.length > 0 && (h("dropi-icon", { class: {
+                        'arrow': true,
+                        'arrow-expanded': !!item.expandedMenu
+                    }, name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: item.active ? 'Primary-Primary-500' : 'Gray-Gray-500' }))),
+                /* SubItems Renderizados al mismo nivel DOM que instruye Angular ng-container */
+                item.subItems && item.subItems.length > 0 && (item.subItems.map(subOption => (h("div", { class: {
+                        'sidebar-sub-item': true,
+                        'sidebar-expanded': !!item.expandedMenu,
+                        'sidebar-sub-item-default': !subOption.active,
+                        'sidebar-sub-item-active': !!subOption.active
+                    }, onClick: (e) => { e.stopPropagation(); this.onSubItemClick(subOption); } }, subOption.text))))
+            ];
+        })));
+    }
+    static get watchers() { return {
+        "sideBarProperties": [{
+                "watchPropHandler": 0
+            }]
+    }; }
+};
+DropiSidebar.style = dropiSidebarCss();
+
+export { DropiSidebar as dropi_sidebar };
+//# sourceMappingURL=dropi-sidebar.entry.esm.js.map
+
+//# sourceMappingURL=dropi-sidebar.entry.js.map