npm - @dropi/ui - Versions diffs - 0.1.27 → 0.1.29 - Mend

@dropi/ui 0.1.27 → 0.1.29

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

Files changed (489) hide show

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

@@ -1 +0,0 @@

- {"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\" width=\"16px\" height=\"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\" width=\"16px\" height=\"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.map DELETED Viewed

@@ -1 +0,0 @@

- {"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} width=\"20px\" height=\"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 width={iconSize}\n height={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} width=\"20px\" height=\"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\" width=\"16px\" height=\"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\" width=\"14px\" height=\"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} width=\"20px\" height=\"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\" width=\"12px\" height=\"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.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dropi-sidebar.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-sidebar/dropi-sidebar.css?tag=dropi-sidebar&encapsulation=shadow","src/components/dropi-sidebar/dropi-sidebar.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.main-sidebar-container {\n margin-top: 20px;\n}\n\n.sidebar-option {\n height: 45px;\n display: flex;\n align-items: center;\n position: relative;\n font-weight: var(--font-weight-medium, 500);\n gap: var(--Size-3, 12px);\n padding: var(--Size-3, 12px);\n font-size: var(--font-size-s, 12px);\n border-radius: var(--Border-1, 4px);\n min-width: 147px;\n cursor: pointer;\n user-select: none;\n}\n\n.sidebar-option .arrow {\n position: absolute;\n right: 17px;\n transition: transform 0.3s ease;\n}\n\n.sidebar-option .arrow-expanded {\n transform: rotate(180deg);\n}\n\n.sidebar-default-option {\n color: var(--Gray-Gray-500, #68738f);\n}\n\n.sidebar-active-option {\n color: var(--Primary-Primary-500, #f49a3d);\n background-color: #fef8f1;\n}\n\n.sidebar-sub-item {\n overflow: hidden;\n max-height: 0;\n height: auto;\n font-weight: var(--font-weight-medium, 500);\n gap: var(--Size-3, 12px);\n font-size: var(--font-size-s, 12px);\n cursor: pointer;\n opacity: 0;\n padding: 0 var(--Size-3, 12px) 0 var(--Size-8, 32px);\n transition:\n max-height 0.3s ease-out,\n opacity 0.3s ease-out,\n padding 0.3s ease-out;\n user-select: none;\n}\n\n.sidebar-sub-item.sidebar-expanded {\n max-height: 200px;\n opacity: 1;\n padding: var(--Size-3, 12px) var(--Size-3, 12px) var(--Size-3, 12px) var(--Size-8, 32px);\n}\n\n.sidebar-sub-item-default {\n color: var(--Gray-Gray-500, #68738f);\n}\n\n.sidebar-sub-item-active {\n color: var(--Primary-Primary-500, #f49a3d);\n}\n\n.space-between {\n justify-content: space-between;\n}\n","import { Component, Prop, Event, EventEmitter, h, State, Watch } from '@stencil/core';\n\nexport interface SidebarItem {\n id: number;\n icon: string;\n text: string;\n route: string;\n expandedMenu?: boolean;\n active?: boolean;\n}\n\nexport interface SidebarProperties {\n id: number;\n icon: string;\n text: string;\n route: string;\n expandedMenu?: boolean;\n active?: boolean;\n subItems?: SidebarItem[];\n}\n\n/**\n * @component dropi-sidebar\n * Sidebar list container (Strictly ported from Angular core). \n * This component handles rendering the sidebar items array natively.\n */\n@Component({\n tag: 'dropi-sidebar',\n styleUrl: 'dropi-sidebar.css',\n shadow: true,\n})\nexport class DropiSidebar {\n /**\n * Define las propiedades y la cantidad de elementos a renderizar.\n * Pasarlo como JSON string o directamente como array de SidebarProperties.\n */\n @Prop({ mutable: true }) sideBarProperties: SidebarProperties[] | string = [];\n \n /**\n * Evento emitido cuando se selecciona una opción en el menú o un sub-hijo.\n */\n @Event() onIndexChanged: EventEmitter<SidebarProperties>;\n\n @State() parsedProperties: SidebarProperties[] = [];\n\n @Watch('sideBarProperties')\n watchPropHandler(newValue: SidebarProperties[] | string) {\n this.parsedProperties = typeof newValue === 'string' ? JSON.parse(newValue) : (newValue || []);\n }\n\n componentWillLoad() {\n this.watchPropHandler(this.sideBarProperties);\n }\n\n private setExpandedPropertie(id: number) {\n const propertieIndex = this.parsedProperties.findIndex((item) => item.id === id);\n if (propertieIndex !== -1) {\n const newProps = [...this.parsedProperties];\n newProps[propertieIndex] = {\n ...newProps[propertieIndex],\n expandedMenu: !newProps[propertieIndex].expandedMenu\n };\n this.parsedProperties = newProps;\n }\n }\n\n private onItemClick(itemClicked: SidebarProperties) {\n this.onIndexChanged.emit(itemClicked);\n \n if (itemClicked.subItems && itemClicked.subItems.length > 0) {\n this.setExpandedPropertie(itemClicked.id);\n }\n }\n\n private onSubItemClick(itemClicked: SidebarProperties) {\n this.onIndexChanged.emit(itemClicked);\n }\n\n render() {\n return (\n <div class=\"main-sidebar-container\">\n {this.parsedProperties.map(item => {\n return [\n /* Item Principal */\n <div\n class={{\n 'sidebar-option': true,\n 'sidebar-active-option': !!item.active,\n 'sidebar-default-option': !item.active\n }}\n onClick={() => this.onItemClick(item)}\n >\n <dropi-icon\n name={item.icon || 'Cube'}\n width=\"20px\"\n height=\"20px\"\n color={item.active ? 'Primary-Primary-500' : 'Gray-Gray-500'}\n ></dropi-icon>\n \n <span>{item.text}</span>\n \n {item.subItems && item.subItems.length > 0 && (\n <dropi-icon\n class={{\n 'arrow': true,\n 'arrow-expanded': !!item.expandedMenu\n }}\n name=\"Dropdown-down\"\n width=\"20px\"\n height=\"20px\"\n color={item.active ? 'Primary-Primary-500' : 'Gray-Gray-500'}\n ></dropi-icon>\n )}\n </div>,\n\n /* SubItems Renderizados al mismo nivel DOM que instruye Angular ng-container */\n item.subItems && item.subItems.length > 0 && (\n item.subItems.map(subOption => (\n <div\n class={{\n 'sidebar-sub-item': true,\n 'sidebar-expanded': !!item.expandedMenu,\n 'sidebar-sub-item-default': !subOption.active,\n 'sidebar-sub-item-active': !!subOption.active\n }}\n onClick={(e) => { e.stopPropagation(); this.onSubItemClick(subOption); }}\n >\n {subOption.text}\n </div>\n ))\n )\n ];\n })}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-simple-stepper.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dropi-simple-stepper.entry.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,MAAM,CAAC,09CAA09C,CAAC;;MCcn/C,kBAAkB,GAAA,MAAA;;;;;IAErB,UAAU,GAAW,CAAC;;IAEtB,QAAQ,GAAgB,OAAO;;IAE/B,WAAW,GAAW,CAAC;;IAEvB,YAAY,GAAsB,EAAE;;IAEpC,QAAQ,GAAa,cAAc;;IAEnC,WAAW,GAAW,OAAO;AAErC,IAAA,IAAY,YAAY,GAAA;AACtB,QAAA,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,EAAE;AACzC,YAAA,IAAI;gBAAE,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;;AAAI,YAAA,MAAM;AAAE,gBAAA,OAAO,EAAE;;;AAEjE,QAAA,OAAO,IAAI,CAAC,YAAY,IAAI,EAAE;;IAGhC,MAAM,GAAA;AACJ,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY;QAChC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAEtE,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EACjB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;AACrB,YAAA,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC,WAAW;AAC3C,YAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC,WAAW;YAC1C,MAAM,MAAM,GAAG,CAAC,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;AACrC,YAAA,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC;AAEvB,YAAA,QACE,WAAK,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,EAAA,EAClC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE;AACV,oBAAA,iBAAiB,EAAE,IAAI;AACvB,oBAAA,yBAAyB,EAAE,QAAQ;AACnC,oBAAA,4BAA4B,EAAE,WAAW;AACzC,oBAAA,0BAA0B,EAAE,CAAC,QAAQ,IAAI,CAAC,WAAW;AACtD,iBAAA,EAAA,EACE,IAAI,CAAC,QAAQ,KAAK,OAAO,IACxB,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,cAAc,EAAA,CAAG,KAE7B,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,iBAAiB,EAAA,EAAE,IAAI,CAAQ,CAC5C,CACG,EACL,CAAC,MAAM,IAAI,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,qBAAqB,EAAE,WAAW,EAAE,GAAI,CACrF,EACL,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,gBAAgB,IAAE,KAAK,CAAQ,CACjD;SAET,CAAC,CACE;;;;;;;","names":[],"sources":["src/components/dropi-simple-stepper/dropi-simple-stepper.css?tag=dropi-simple-stepper&encapsulation=shadow","src/components/dropi-simple-stepper/dropi-simple-stepper.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.stepper {\n display: flex;\n align-items: flex-start;\n width: 100%;\n}\n\n.stepper__item {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex: 1;\n}\n\n.stepper__circle-row {\n display: flex;\n align-items: center;\n width: 100%;\n}\n\n/* ── Circle ─────────────────────────────────────────────── */\n.stepper__circle {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: background 0.2s, border-color 0.2s;\n}\n\n.stepper__circle--pending {\n background: var(--Gray-Gray-100, #e6eaf2);\n border: 2px solid var(--Gray-Gray-200, #c3c9d9);\n}\n\n.stepper__circle--active {\n background: var(--Primary-Primary-500, #f49a3d);\n border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n\n.stepper__circle--completed {\n background: var(--Primary-Primary-500, #f49a3d);\n border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n\n.stepper__dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--Neutral-White, #ffffff);\n display: block;\n}\n\n.stepper__circle--pending .stepper__dot {\n background: var(--Gray-Gray-400, #858ea6);\n}\n\n.stepper__number {\n font-size: var(--font-size-xs, 10px);\n font-weight: var(--font-weight-bold, 700);\n color: var(--Neutral-White, #ffffff);\n}\n\n.stepper__circle--pending .stepper__number {\n color: var(--Gray-Gray-500, #69738c);\n}\n\n/* ── Connecting line ────────────────────────────────────── */\n.stepper__line {\n flex: 1;\n height: 2px;\n background: var(--Gray-Gray-200, #c3c9d9);\n transition: background 0.2s;\n}\n\n.stepper__line--done {\n background: var(--Primary-Primary-500, #f49a3d);\n}\n\n/* ── Label ──────────────────────────────────────────────── */\n.stepper__label {\n margin-top: 6px;\n font-size: var(--font-size-xs, 10px);\n color: var(--Gray-Gray-600, #475066);\n text-align: center;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type StepperType = 'point' | 'number';\nexport type FlowMode = 'Simultaneous' | 'Sequential';\n\n/**\n * @component dropi-simple-stepper\n * Compact horizontal stepper using dots or numbers.\n */\n@Component({\n tag: 'dropi-simple-stepper',\n styleUrl: 'dropi-simple-stepper.css',\n shadow: true,\n})\nexport class DropiSimpleStepper {\n /** Total steps */\n @Prop() stepsCount: number = 3;\n /** Circle content: 'point' (dot) | 'number' */\n @Prop() typeStep: StepperType = 'point';\n /** Current active step (1-based) */\n @Prop() currentStep: number = 0;\n /** Labels shown below each step. Pass as JSON string or array */\n @Prop() labelStepper: string[] | string = [];\n /** Flow mode (visual only) */\n @Prop() flowMode: FlowMode = 'Simultaneous';\n /** White-label brand identifier (matches Angular `white_brand`) */\n @Prop() white_brand: string = 'dropi';\n\n private get parsedLabels(): string[] {\n if (typeof this.labelStepper === 'string') {\n try { return JSON.parse(this.labelStepper); } catch { return []; }\n }\n return this.labelStepper || [];\n }\n\n render() {\n const labels = this.parsedLabels;\n const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);\n\n return (\n <div class=\"stepper\">\n {steps.map((step, i) => {\n const isCompleted = step < this.currentStep;\n const isActive = step === this.currentStep;\n const isLast = i === steps.length - 1;\n const label = labels[i];\n\n return (\n <div class=\"stepper__item\" key={step}>\n <div class=\"stepper__circle-row\">\n <div class={{\n 'stepper__circle': true,\n 'stepper__circle--active': isActive,\n 'stepper__circle--completed': isCompleted,\n 'stepper__circle--pending': !isActive && !isCompleted,\n }}>\n {this.typeStep === 'point' ? (\n <span class=\"stepper__dot\" />\n ) : (\n <span class=\"stepper__number\">{step}</span>\n )}\n </div>\n {!isLast && <div class={{ 'stepper__line': true, 'stepper__line--done': isCompleted }} />}\n </div>\n {label && <span class=\"stepper__label\">{label}</span>}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-skeleton.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dropi-skeleton.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,2bAA2b,CAAC;;MCa/c,aAAa,GAAA,MAAA;;;;;IAEhB,OAAO,GAAoB,MAAM;;IAEjC,KAAK,GAAW,EAAE;;IAElB,MAAM,GAAW,EAAE;;IAEnB,MAAM,GAAW,KAAK;;IAEtB,KAAK,GAAW,CAAC;;IAEjB,SAAS,GAAW,SAAS;IAE7B,aAAa,GAAA;AACnB,QAAA,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,EAAE,UAAU,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,SAAS,IAAI,CAAA,MAAA,EAAS,IAAI,CAAC,SAAS,GAAG;AACxH,QAAA,OAAO,CAAA,0BAAA,EAA6B,KAAK,CAAA,oBAAA,EAAuB,KAAK,OAAO;;IAGtE,SAAS,GAAA;QACf,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC,MAAM;AACnC,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ;AAAE,YAAA,OAAO,KAAK;AAC3C,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;AAAE,YAAA,OAAO,KAAK;AACzC,QAAA,OAAO,sBAAsB;;IAG/B,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE;YAC7C,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACxB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAC3C,WACE,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE;AACL,oBAAA,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,KAAK;oBAChD,MAAM,EAAE,IAAI,CAAC,MAAM;AACnB,oBAAA,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE;AAC9B,oBAAA,UAAU,EAAE,IAAI,CAAC,aAAa,EAAE;AAChC,oBAAA,cAAc,EAAE,cAAc;AAC/B,iBAAA,EAAA,CACD,CACH,CAAC,CACE;;QAIV,QACE,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;AACnB,gBAAA,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE;AAC9B,gBAAA,UAAU,EAAE,IAAI,CAAC,aAAa,EAAE;AAChC,gBAAA,cAAc,EAAE,cAAc;aAC/B,EAAA,CACD;;;;;;;","names":[],"sources":["src/components/dropi-skeleton/dropi-skeleton.css?tag=dropi-skeleton&encapsulation=shadow","src/components/dropi-skeleton/dropi-skeleton.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.skeleton-lines {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.skeleton {\n background: linear-gradient(\n 90deg,\n var(--Gray-Gray-100, #e6eaf2) 25%,\n var(--Gray-Gray-50, #f7f8fa) 50%,\n var(--Gray-Gray-100, #e6eaf2) 75%\n );\n background-size: 200% 100%;\n animation: shimmer 1.6s ease-in-out infinite;\n}\n\n@keyframes shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type SkeletonVariant = 'text' | 'circle' | 'rect';\n\n/**\n * @component dropi-skeleton\n * Loading placeholder with shimmer animation.\n */\n@Component({\n tag: 'dropi-skeleton',\n styleUrl: 'dropi-skeleton.css',\n shadow: true,\n})\nexport class DropiSkeleton {\n /** Shape variant: 'text' | 'circle' | 'rect' */\n @Prop() variant: SkeletonVariant = 'text';\n /** Width (CSS value, e.g. \"100%\", \"200px\") */\n @Prop() width: string = '';\n /** Height (CSS value, e.g. \"16px\", \"48px\") */\n @Prop() height: string = '';\n /** Border radius override */\n @Prop() radius: string = '8px';\n /** Number of lines to repeat (text variant only) */\n @Prop() lines: number = 1;\n /** Base color of the shimmer gradient. Accepts hex (#f6f7f8) or token name (Gray-Gray-100) */\n @Prop() baseColor: string = '#f6f7f8';\n\n private getBackground(): string {\n const color = (this.baseColor ?? '#f6f7f8').startsWith('#') ? (this.baseColor ?? '#f6f7f8') : `var(--${this.baseColor})`;\n return `linear-gradient(to right, ${color} 8%, #e3e7efe7 28%, ${color} 77%)`;\n }\n\n private getRadius(): string {\n if (this.radius) return this.radius;\n if (this.variant === 'circle') return '50%';\n if (this.variant === 'text') return '4px';\n return 'var(--Border-1, 4px)';\n }\n\n render() {\n if (this.variant === 'text' && this.lines > 1) {\n return (\n <div class=\"skeleton-lines\">\n {Array.from({ length: this.lines }).map((_, i) => (\n <div\n class=\"skeleton\"\n style={{\n width: i === this.lines - 1 ? '70%' : this.width,\n height: this.height,\n borderRadius: this.getRadius(),\n background: this.getBackground(),\n backgroundSize: '1000px 104px',\n }}\n />\n ))}\n </div>\n );\n }\n\n return (\n <div\n class=\"skeleton\"\n style={{\n width: this.width,\n height: this.height,\n borderRadius: this.getRadius(),\n background: this.getBackground(),\n backgroundSize: '1000px 104px',\n }}\n />\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-steps.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dropi-steps.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,6hDAA6hD,CAAC;;MCkB9iD,UAAU,GAAA,MAAA;;;;;IAEb,UAAU,GAAW,CAAC;;IAEtB,gBAAgB,GAAY,IAAI;;IAEhC,WAAW,GAAW,CAAC;;IAEvB,UAAU,GAAyB,EAAE;;IAErC,KAAK,GAAc,SAAS;AAEpC,IAAA,IAAY,YAAY,GAAA;AACtB,QAAA,IAAI,OAAO,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE;AACvC,YAAA,IAAI;gBAAE,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC;;AAAI,YAAA,MAAM;AAAE,gBAAA,OAAO,EAAE;;;AAE/D,QAAA,OAAO,IAAI,CAAC,UAAU,IAAI,EAAE;;AAGtB,IAAA,SAAS,CAAC,KAAa,EAAA;AAC7B,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,WAAW;AAAE,YAAA,OAAO,WAAW;AAChD,QAAA,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW;AAAE,YAAA,OAAO,OAAO;AAC9C,QAAA,OAAO,SAAS;;IAGlB,MAAM,GAAA;AACJ,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY;QAChC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAEtE,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EACjB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;YAClB,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC;AAC9B,YAAA,MAAM,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC,UAAU;AAEvC,YAAA,QACE,WAAK,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,EAAA,EAClC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,CAAC,oBAAoB,KAAK,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EACzE,KAAK,KAAK,WAAW,IACpB,CAAA,CAAA,YAAA,EAAA,EAAY,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG,KAE5E,IAAI,CAAC,gBAAgB,GAAG,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAQ,GAAG,IAAI,CACnD,CACG,EACL,CAAC,MAAM,IAAI,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,qBAAqB,EAAE,KAAK,KAAK,WAAW,EAAE,GAAI,CAC/F,EAEL,KAAK,KACJ,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACxB,KAAK,CAAC,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,EAAE,KAAK,CAAC,KAAK,CAAQ,EAChE,KAAK,CAAC,WAAW,IAAI,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,eAAe,EAAA,EAAE,KAAK,CAAC,WAAW,CAAQ,CACxE,CACP,CACG;SAET,CAAC,CACE;;;;;;;","names":[],"sources":["src/components/dropi-steps/dropi-steps.css?tag=dropi-steps&encapsulation=shadow","src/components/dropi-steps/dropi-steps.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.stepper {\n display: flex;\n align-items: flex-start;\n width: 100%;\n}\n\n/* ── Each step ──────────────────────────────────────────── */\n.stepper__step {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex: 1;\n position: relative;\n}\n\n/* ── Circle row (circle + connecting line) ──────────────── */\n.stepper__circle-wrap {\n display: flex;\n align-items: center;\n width: 100%;\n position: relative;\n}\n\n.stepper__circle {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--font-size-xs, 10px);\n font-weight: var(--font-weight-bold, 700);\n flex-shrink: 0;\n z-index: 1;\n transition: background 0.2s, border-color 0.2s;\n}\n\n.stepper__circle--pending {\n background: var(--Neutral-White, #ffffff);\n border: 2px solid var(--Gray-Gray-200, #c3c9d9);\n color: var(--Gray-Gray-400, #858ea6);\n}\n\n.stepper__circle--focus {\n background: var(--Neutral-White, #ffffff);\n border: 2px solid var(--Primary-Primary-500, #f49a3d);\n color: var(--Primary-Primary-500, #f49a3d);\n}\n\n.stepper__circle--completed {\n background: var(--Primary-Primary-500, #f49a3d);\n border: 2px solid var(--Primary-Primary-500, #f49a3d);\n color: var(--Neutral-White, #ffffff);\n}\n\n/* ── Connecting line ────────────────────────────────────── */\n.stepper__line {\n flex: 1;\n height: 2px;\n background: var(--Gray-Gray-200, #c3c9d9);\n transition: background 0.2s;\n}\n\n.stepper__line--done {\n background: var(--Primary-Primary-500, #f49a3d);\n}\n\n/* ── Labels ─────────────────────────────────────────────── */\n.stepper__label {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2px;\n margin-top: var(--Size-2, 8px);\n text-align: center;\n padding: 0 4px;\n}\n\n.stepper__title {\n font-size: var(--font-size-s, 12px);\n font-weight: var(--font-weight-bold, 700);\n color: var(--Gray-Gray-700, #32394d);\n}\n\n.stepper__desc {\n font-size: var(--font-size-xs, 10px);\n color: var(--Gray-Gray-500, #69738c);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type StepState = 'pending' | 'focus' | 'completed';\n\nexport interface StepLabel {\n title?: string;\n description?: string;\n}\n\n/**\n * @component dropi-steps\n * Horizontal stepper showing step progress with number/title/description.\n */\n@Component({\n tag: 'dropi-steps',\n styleUrl: 'dropi-steps.css',\n shadow: true,\n})\nexport class DropiSteps {\n /** Total number of steps */\n @Prop() stepsCount: number = 3;\n /** Show step number inside the circle */\n @Prop() showNumberOfStep: boolean = true;\n /** Active/current step index (1-based) */\n @Prop() currentStep: number = 0;\n /** Labels for each step. Pass as JSON string or array */\n @Prop() stepLabels: StepLabel[] | string = [];\n /** Visual state applied to the active step (matches Angular `state`) */\n @Prop() state: StepState = 'pending';\n\n private get parsedLabels(): StepLabel[] {\n if (typeof this.stepLabels === 'string') {\n try { return JSON.parse(this.stepLabels); } catch { return []; }\n }\n return this.stepLabels || [];\n }\n\n private stepState(index: number): 'completed' | 'focus' | 'pending' {\n if (index < this.currentStep) return 'completed';\n if (index === this.currentStep) return 'focus';\n return 'pending';\n }\n\n render() {\n const labels = this.parsedLabels;\n const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);\n\n return (\n <div class=\"stepper\">\n {steps.map((step) => {\n const state = this.stepState(step);\n const label = labels[step - 1];\n const isLast = step === this.stepsCount;\n\n return (\n <div class=\"stepper__step\" key={step}>\n <div class=\"stepper__circle-wrap\">\n <div class={{ 'stepper__circle': true, [`stepper__circle--${state}`]: true }}>\n {state === 'completed' ? (\n <dropi-icon name=\"Check\" width=\"12px\" height=\"12px\" color=\"Neutral-White\" />\n ) : (\n this.showNumberOfStep ? <span>{step}</span> : null\n )}\n </div>\n {!isLast && <div class={{ 'stepper__line': true, 'stepper__line--done': state === 'completed' }} />}\n </div>\n\n {label && (\n <div class=\"stepper__label\">\n {label.title && <span class=\"stepper__title\">{label.title}</span>}\n {label.description && <span class=\"stepper__desc\">{label.description}</span>}\n </div>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-switch.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dropi-switch.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,wuBAAwuB,CAAC;;MCY1vB,WAAW,GAAA,MAAA;;;;;;IAEkB,SAAS,GAAY,KAAK;;IAEzC,QAAQ,GAAY,KAAK;;AAGzC,IAAA,QAAQ;AAET,IAAA,cAAc,CAAC,KAAY,EAAA;AACjC,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAC9C,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO;QAC9B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;;IAGpC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,eAAe,EAAA,EAC1B,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAA,CACvC,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAA,CAAQ,CACtB;;;;;;;;","names":[],"sources":["src/components/dropi-switch/dropi-switch.css?tag=dropi-switch&encapsulation=shadow","src/components/dropi-switch/dropi-switch.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.toggle-switch {\n position: relative;\n display: inline-block;\n width: 40px;\n height: 21px;\n margin-bottom: 0;\n cursor: pointer;\n}\n\n.toggle-switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--Gray-Gray-200, #c3c9d9);\n transition: 0.4s;\n border-radius: 34px;\n}\n\n.slider::before {\n position: absolute;\n content: '';\n height: 17px;\n width: 17px;\n left: 3px;\n bottom: 2px;\n background-color: var(--Neutral-White, #ffffff);\n transition: 0.4s;\n border-radius: 50%;\n}\n\ninput:checked + .slider {\n background-color: var(--Primary-Primary-500, #f49a3d);\n}\n\ninput:checked + .slider::before {\n transform: translateX(17px);\n}\n\n:host([disabled]) .toggle-switch {\n cursor: not-allowed;\n opacity: 0.5;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @component dropi-switch\n * Toggle switch component. Emits dropiChange on toggle.\n */\n@Component({\n tag: 'dropi-switch',\n styleUrl: 'dropi-switch.css',\n shadow: true,\n formAssociated: true,\n})\nexport class DropiSwitch {\n /** Whether the switch is on */\n @Prop({ mutable: true, reflect: true }) isChecked: boolean = false;\n /** Whether the switch is disabled */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Emitted when the toggle state changes */\n @Event() onChange: EventEmitter<boolean>;\n\n private onToggleChange(event: Event) {\n const input = event.target as HTMLInputElement;\n this.isChecked = input.checked;\n this.onChange.emit(this.isChecked);\n }\n\n render() {\n return (\n <label class=\"toggle-switch\">\n <input\n type=\"checkbox\"\n checked={this.isChecked}\n disabled={this.disabled}\n onChange={(e) => this.onToggleChange(e)}\n />\n <span class=\"slider\"></span>\n </label>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-table.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dropi-table.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-table/dropi-table.css?tag=dropi-table&encapsulation=shadow","src/components/dropi-table/dropi-table.tsx"],"sourcesContent":[":host { display: block; width: 100%; min-width: 0; }\n*, *::before, *::after { box-sizing: border-box; }\n\n/* ── Contenedor principal ─────────────────────────────────────────── */\n.table-container {\n width: 100%;\n min-width: 0;\n border-radius: var(--Border-3);\n padding: 0 var(--Size-4) var(--Size-4) var(--Size-4);\n background-color: var(--Neutral-White);\n}\n\n/* ── Search / toolbar ─────────────────────────────────────────────── */\n.search-container {\n margin-block: var(--Size-5);\n display: flex;\n flex-direction: column;\n gap: var(--Size-4);\n}\n\n.table-title {\n padding-block: var(--Size-2);\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-bold);\n color: var(--Gray-Gray-700);\n margin: 0;\n}\n\n.search-actions {\n display: flex;\n align-items: flex-end;\n gap: var(--Size-3);\n width: 100%;\n}\n\n.search-actions dropi-input { flex: 1; }\n\n.search-actions.only-filter { justify-content: flex-end; }\n\n.table-tools { display: flex; justify-content: flex-end; }\n\n.column-selector-container { position: relative; }\n\n.column-selector-btn {\n min-width: 40px;\n width: 40px;\n height: 40px;\n padding: 0;\n border: 1px solid var(--Gray-Gray-200);\n border-radius: var(--Border-2);\n background: var(--Neutral-White);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.column-selector-btn:hover { background: var(--Gray-Gray-50); }\n\n.column-selector-menu {\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n width: min(320px, 88vw);\n border: 1px solid var(--Gray-Gray-200);\n border-radius: var(--Border-2);\n background: var(--Neutral-White);\n box-shadow: var(--Shadow-medium);\n z-index: 20;\n padding: var(--Size-1);\n}\n\n.column-selector-footer {\n border-top: 1px solid var(--Gray-Gray-100);\n margin-top: var(--Size-1);\n padding: var(--Size-2) var(--Size-4);\n display: flex;\n align-items: center;\n}\n\n.column-selector-all {\n display: inline-flex;\n align-items: center;\n gap: var(--Size-2);\n color: var(--Gray-Gray-700);\n font-size: var(--font-size-s);\n cursor: pointer;\n user-select: none;\n}\n\n.column-selector-option {\n display: flex;\n align-items: center;\n gap: var(--Size-2);\n padding: var(--Size-2) var(--Size-3);\n font-size: var(--font-size-s);\n color: var(--Gray-Gray-700);\n cursor: pointer;\n border-radius: var(--Border-1);\n}\n.column-selector-option:hover { background: var(--Gray-Gray-50); }\n\n/* ── Table wrapper ────────────────────────────────────────────────── */\n.table-wrapper {\n overflow-x: auto;\n width: 100%;\n position: relative;\n}\n\n/* Cuando hay acciones, el wrapper es más angosto igual que el host Angular\n para que la columna sticky quede siempre visible sin tapar contenido */\n.table-wrapper.has-sticky-actions { width: 100%; }\n\n.table-wrapper::-webkit-scrollbar { height: 6px; }\n.table-wrapper::-webkit-scrollbar-track { background: transparent; }\n.table-wrapper::-webkit-scrollbar-thumb { background: var(--Gray-Gray-200, #c3c9d9); border-radius: 3px; }\n.table-wrapper::-webkit-scrollbar-thumb:hover { background: var(--Gray-Gray-400, #858ea6); }\n\n/* ── Table ────────────────────────────────────────────────────────── */\n.custom-table {\n width: 100%;\n border-collapse: collapse;\n}\n\n\n/* th/td shared separator via ::after */\n.custom-table th,\n.custom-table td {\n position: relative;\n padding: var(--Size-3);\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-bold);\n color: var(--Gray-Gray-700);\n}\n\n.custom-table th::after,\n.custom-table td::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: var(--Gray-Gray-100);\n}\n\n/* th */\n.custom-table th {\n height: 55px;\n user-select: none;\n}\n\n.custom-table th.sortable { cursor: pointer; }\n\n/* td */\n.custom-table td {\n height: 80px;\n min-width: 100px;\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-s);\n}\n\n/* Headers inner */\n.headers-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--Size-1);\n}\n\n.headers-container.align-left { align-items: flex-start; }\n.headers-container.align-right { align-items: flex-end; }\n\n.headers {\n display: flex;\n flex-wrap: nowrap;\n justify-content: space-around;\n align-items: center;\n gap: 4px;\n}\n\n.headers span {\n font-weight: var(--font-weight-bold);\n color: var(--Gray-Gray-600);\n font-size: var(--font-size-xs);\n text-align: center;\n}\n\n.headers.align-left span { text-align: left; }\n.headers.align-right span { text-align: right; }\n\n.order-icons {\n display: flex;\n flex-direction: column;\n}\n\n.order-icons dropi-icon {\n height: 6px;\n display: flex;\n}\n\n/* Checkbox column */\n.checkbox-header {\n width: fit-content;\n min-width: fit-content;\n max-width: fit-content;\n text-align: center;\n padding: var(--Size-3) !important;\n}\n\n.custom-table.has-checkbox td:first-child {\n width: fit-content;\n min-width: fit-content;\n max-width: fit-content;\n text-align: center;\n padding: 8px !important;\n}\n\n/* Row */\n.table-row:hover { background-color: var(--Gray-Gray-50); transition: background-color 0.3s ease; }\n.table-row:hover td:last-child { background-color: var(--Gray-Gray-50); transition: background-color 0.3s ease; }\n.table-row.sub-row td:first-child { padding-left: 2rem !important; }\n\n/* Cell content */\n.cell-content {\n display: inline-block;\n width: 100%;\n text-align: left;\n}\n\n/* ── Actions column (sticky) ─────────────────────────────────── */\ntd.actions,\nth.actions {\n position: sticky;\n right: 0;\n z-index: 2;\n background-color: var(--Neutral-White);\n width: 120px;\n min-width: 120px;\n max-width: 120px;\n text-align: center;\n}\n\ntd.actions {\n vertical-align: middle;\n}\n\n/* Forzar que el interior de la celda de acciones se centre siempre */\ntd.actions > div {\n display: flex !important;\n justify-content: center !important;\n align-items: center !important;\n width: 100%;\n height: 100%;\n}\n\n.table-row:hover td.actions {\n background-color: var(--Gray-Gray-50);\n transition: background-color 0.3s ease;\n}\n\n.actions-header {\n width: 100%;\n text-align: center;\n user-select: none;\n}\n\n.short-actions {\n display: flex;\n gap: var(--Size-2);\n align-items: center;\n justify-content: center;\n}\n\n.action-icon { cursor: pointer; }\n\n.action-button { position: relative; }\n\n.actions-menu {\n position: absolute;\n top: 0;\n right: 80px;\n padding: var(--Size-2);\n border-radius: var(--Border-2);\n background-color: var(--Neutral-White);\n box-shadow: var(--Shadow-medium);\n z-index: 10;\n animation: fadeIn 0.3s ease-in-out forwards;\n}\n\n.action-item {\n padding: var(--Size-2);\n font-size: var(--font-size-xs);\n color: var(--Gray-Gray-600);\n height: 45px;\n width: 190px;\n display: flex;\n gap: var(--Size-4);\n align-items: center;\n justify-content: left;\n cursor: pointer;\n border-radius: var(--Border-1);\n}\n.action-item:hover { background-color: var(--Gray-Gray-50); }\n\n/* ── Cell types ───────────────────────────────────────────────────── */\n.table-labels {\n color: var(--Gray-Gray-600);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-s);\n white-space: nowrap;\n}\n\n.table-labels.multiline {\n white-space: pre;\n line-height: 1.6;\n}\n\n.text-wrap-label {\n color: var(--Gray-Gray-600);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-s);\n white-space: normal;\n word-break: break-word;\n overflow-wrap: break-word;\n line-height: 1.5;\n}\n\n.date-label {\n display: inline-flex;\n flex-direction: column;\n}\n\n.date-label span {\n font-weight: var(--font-weight-regular);\n color: var(--Gray-Gray-600);\n white-space: nowrap;\n font-size: var(--font-size-s);\n}\n\n.flag-container {\n display: inline-flex;\n align-items: center;\n gap: var(--Size-3);\n}\n\n.flag-container span {\n color: var(--Gray-Gray-600);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-s);\n}\n\n.text-icon-label {\n display: inline-flex;\n flex-wrap: nowrap;\n gap: var(--Size-2);\n align-items: center;\n}\n\n.text-icon-label span {\n color: var(--Gray-Gray-600);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-s);\n}\n\n.image-label {\n display: inline-flex;\n flex-direction: column;\n justify-content: center;\n}\n\n.img-container {\n display: flex;\n width: 24px;\n padding-bottom: var(--Size-1);\n align-items: center;\n}\n\n.img-container img {\n border-radius: 60px;\n height: 24px;\n width: 24px;\n object-fit: cover;\n}\n\n.container-cell {\n display: inline-flex;\n flex-direction: column;\n}\n\n.status-label {\n display: inline-flex;\n flex-direction: column;\n gap: var(--Size-1);\n}\n\n.status-dot {\n display: flex;\n gap: var(--Size-2);\n align-items: center;\n}\n\n.status-text {\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-xs);\n color: var(--Gray-Gray-700);\n}\n\n.status-description {\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-s);\n color: var(--Gray-Gray-600);\n}\n\n.dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n flex-shrink: 0;\n}\n\n.dot-low { background-color: var(--Success-Success-500); }\n.dot-medium { background-color: var(--Warning-Warning-500); }\n.dot-high { background-color: var(--Error-Error-500); }\n\n.low-opacity { opacity: 0.5; }\n.highlight-column { background: var(--Primary-Primary-50); }\n\n.text-link-label {\n display: flex;\n flex-wrap: nowrap;\n white-space: nowrap;\n gap: var(--Size-1);\n}\n\n.text-link-label span {\n color: var(--Gray-Gray-600);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-s);\n}\n\n.text-link-label a {\n color: var(--Info-Info-500);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-s);\n}\n\n/* ── Empty state ──────────────────────────────────────────────────── */\n.empty-table {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n min-height: 400px;\n}\n\n.empty-message-container {\n display: flex;\n width: 420px;\n padding: var(--Size-4);\n flex-direction: column;\n align-items: center;\n gap: var(--Size-4);\n text-align: center;\n color: var(--Gray-Gray-500);\n font-size: var(--font-size-s);\n}\n\n/* ── Pagination ───────────────────────────────────────────────────── */\n.pagination {\n margin-top: var(--Size-4);\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.page-size-selector {\n display: flex;\n gap: 5px;\n align-items: baseline;\n}\n\n.page-size-selector label {\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-xs);\n color: var(--Gray-Gray-700);\n}\n\n.page-size-selector select {\n width: fit-content;\n height: 29px;\n border-radius: var(--Border-2);\n padding: var(--Size-1);\n border: 1px solid var(--Gray-Gray-200);\n color: var(--Gray-Gray-500);\n background: var(--Neutral-White);\n font-size: var(--font-size-xs);\n cursor: pointer;\n}\n\n.total-results {\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-xs);\n color: var(--Gray-Gray-600);\n}\n\n/* ── Skeleton ─────────────────────────────────────────────────────── */\n.skeleton {\n height: 14px;\n background: linear-gradient(90deg, var(--Gray-Gray-100) 25%, var(--Gray-Gray-50) 50%, var(--Gray-Gray-100) 75%);\n background-size: 200% 100%;\n animation: shimmer 1.4s infinite;\n border-radius: var(--Border-1);\n}\n.skeleton--sm { width: 20px; }\n\n@keyframes shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(-10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n/* ── Responsive ───────────────────────────────────────────────────── */\n@media (max-width: 768px) {\n .search-actions { flex-direction: column; align-items: stretch; }\n .column-selector-menu { left: 0; right: 0; width: 100%; max-height: 45vh; overflow-y: auto; }\n .pagination { flex-direction: column; align-items: center; gap: var(--Size-3); }\n\n td.actions,\n th.actions {\n width: 60px;\n min-width: 60px;\n }\n\n .table-wrapper.has-sticky-actions { width: calc(100% - 60px); }\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\nexport interface TableColumn {\n key: string;\n label: string;\n sortable?: boolean;\n align?: 'left' | 'center' | 'right';\n highlightColumn?: boolean;\n disabledColumn?: boolean;\n minWidth?: string;\n maxWidth?: string;\n}\n\nexport interface TableRow {\n [key: string]: any;\n}\n\nexport type SortDir = 'asc' | 'desc' | null;\n\n/**\n * @component dropi-table\n * Data table with sortable columns, row selection, search, column selector and pagination.\n */\n@Component({\n tag: 'dropi-table',\n styleUrl: 'dropi-table.css',\n shadow: true,\n})\nexport class DropiTable {\n /** Column definitions */\n @Prop() columns: TableColumn[] | string = [];\n /** Row data */\n @Prop() rows: TableRow[] | string = [];\n /** Show checkbox column */\n @Prop() showCheckbox: boolean = false;\n /** Show loading skeleton */\n @Prop() loading: boolean = false;\n /** Empty state message */\n @Prop() emptyMessage: string = 'No hay datos disponibles';\n /** Table title */\n @Prop() title: string = '';\n /** Show search input */\n @Prop() showSearch: boolean = false;\n /** Show column selector button */\n @Prop() showColumnSelector: boolean = false;\n /** Show paginator */\n @Prop() showPaginator: boolean = false;\n /** Page sizes options */\n @Prop() pageSizes: number[] | string = [5, 10, 25, 50];\n /** Current page (1-based) */\n @Prop({ mutable: true }) currentPage: number = 1;\n /** Total pages */\n @Prop() totalPages: number = 1;\n /** Show row actions (3-dot menu or inline icons) */\n @Prop() rowActions: any[] | string = [];\n\n // ── Angular-parity props ─────────────────────────────────────\n /**\n * Column definitions — matches Angular `headers: DropiTableColumn[]`.\n * Alias of `columns`; when provided, takes precedence.\n */\n @Prop() headers: any[] | string = [];\n /**\n * Row data — matches Angular `data: DropiTableRow[]`.\n * Alias of `rows`; when provided, takes precedence.\n */\n @Prop() data: any[] | string = [];\n /** Pre-selected row ids (matches Angular `selectedRowIds`) */\n @Prop() selectedRowIds: any[] | null = null;\n /** Child / expanded rows data (matches Angular `childData`) */\n @Prop() childData: any[] | string = [];\n /** Visible child rows (matches Angular `visibleRowsChildrens`) */\n @Prop() visibleRowsChildrens: any[] | string = [];\n /** Table-level configuration object (matches Angular `dropiTableConfiguration`) */\n @Prop() dropiTableConfiguration: any = null;\n /** Backend pagination / filter params (matches Angular `dropiTableBackendParams`) */\n @Prop() dropiTableBackendParams: any = null;\n /** Use cursor-based pagination instead of offset (matches Angular `isCursorPagination`) */\n @Prop() isCursorPagination: boolean = false;\n\n @State() private parsedColumns: TableColumn[] = [];\n @State() private parsedRows: TableRow[] = [];\n @State() private parsedPageSizes: number[] = [5, 10, 25, 50];\n @State() private parsedRowActions: any[] = [];\n @State() private sortKey: string = '';\n @State() private sortDir: SortDir = null;\n @State() private sortAsc: boolean = true;\n @State() private selectedKeys: Set<number> = new Set();\n @State() private searchTerm: string = '';\n @State() private pageSize: number = 5;\n @State() private showColumnMenu: boolean = false;\n @State() private hiddenColumns: Set<string> = new Set();\n @State() private openActionRow: number = -1;\n\n @Event() dropiSort: EventEmitter<{ key: string; dir: SortDir }>;\n @Event() dropiSelection: EventEmitter<number[]>;\n @Event() dropiRowClick: EventEmitter<{ row: TableRow; index: number }>;\n @Event() dropiSearch: EventEmitter<string>;\n @Event() dropiPageChange: EventEmitter<number>;\n @Event() dropiPageSizeChange: EventEmitter<number>;\n @Event() dropiAction: EventEmitter<{ row: TableRow; action: any }>;\n\n // ── Angular-parity events ────────────────────────────────────\n /** Matches Angular `rowsSelected` */\n @Event() rowsSelected: EventEmitter<any[]>;\n /** Matches Angular `actionClicked` */\n @Event() actionClicked: EventEmitter<{ row: any; action: any }>;\n /** Matches Angular `onPageChange` */\n @Event() onPageChange: EventEmitter<number>;\n /** Matches Angular `onSizeChange` */\n @Event() onSizeChange: EventEmitter<number>;\n /** Matches Angular `onSortChange` */\n @Event() onSortChange: EventEmitter<any>;\n /** Matches Angular `onSearchChange` */\n @Event() onSearchChange: EventEmitter<string>;\n /** Matches Angular `expandChildren` */\n @Event() expandChildren: EventEmitter<{ row: any }>;\n\n @Watch('columns')\n columnsChanged(val: TableColumn[] | string) {\n this.parsedColumns = typeof val === 'string' ? JSON.parse(val) : (val || []);\n }\n\n @Watch('rows')\n rowsChanged(val: TableRow[] | string) {\n this.parsedRows = typeof val === 'string' ? JSON.parse(val) : (val || []);\n this.selectedKeys = new Set();\n }\n\n @Watch('pageSizes')\n pageSizesChanged(val: number[] | string) {\n this.parsedPageSizes = typeof val === 'string' ? JSON.parse(val) : (val || [5, 10, 25, 50]);\n this.pageSize = this.parsedPageSizes[0] ?? 5;\n }\n\n @Watch('rowActions')\n rowActionsChanged(val: any[] | string) {\n this.parsedRowActions = typeof val === 'string' ? JSON.parse(val) : (val || []);\n }\n\n @Watch('headers')\n headersChanged(val: any[] | string) {\n // `headers` is an alias for `columns`\n const parsed = typeof val === 'string' ? JSON.parse(val) : (val || []);\n if (parsed.length > 0) this.parsedColumns = parsed;\n }\n\n @Watch('data')\n dataChanged(val: any[] | string) {\n // `data` is an alias for `rows`\n const parsed = typeof val === 'string' ? JSON.parse(val) : (val || []);\n if (parsed.length > 0) { this.parsedRows = parsed; this.selectedKeys = new Set(); }\n }\n\n componentWillLoad() {\n // SSR hydration guard: if no data props provided, preserve server-rendered DOM\n if (this.data == null && this.rows == null && this.headers == null && this.columns == null) return;\n\n // headers/data take precedence over columns/rows when provided\n const headersSrc = (Array.isArray(this.headers) ? this.headers : []).length\n ? this.headers : this.columns;\n const dataSrc = (Array.isArray(this.data) ? this.data : []).length\n ? this.data : this.rows;\n this.columnsChanged(headersSrc);\n this.rowsChanged(dataSrc);\n this.pageSizesChanged(this.pageSizes);\n this.rowActionsChanged(this.rowActions);\n }\n\n private get visibleColumns(): TableColumn[] {\n const hidden = this.hiddenColumns ?? new Set<string>();\n return (this.parsedColumns ?? []).filter(c => !hidden.has(c.key));\n }\n\n private get filteredRows(): TableRow[] {\n if (!this.searchTerm) return this.parsedRows;\n const q = this.searchTerm.toLowerCase();\n return this.parsedRows.filter(row =>\n Object.values(row).some(v => String(v ?? '').toLowerCase().includes(q))\n );\n }\n\n private get sortedRows(): TableRow[] {\n const rows = this.filteredRows;\n if (!this.sortKey || !this.sortDir) return rows;\n const key = this.sortKey;\n const dir = this.sortDir === 'asc' ? 1 : -1;\n return [...rows].sort((a, b) => {\n const av = a[key] ?? '';\n const bv = b[key] ?? '';\n if (av < bv) return -dir;\n if (av > bv) return dir;\n return 0;\n });\n }\n\n private get pagedRows(): TableRow[] {\n if (!this.showPaginator) return this.sortedRows;\n const start = (this.currentPage - 1) * this.pageSize;\n return this.sortedRows.slice(start, start + this.pageSize);\n }\n\n private handleSort(col: TableColumn) {\n if (!col.sortable) return;\n if (this.sortKey === col.key) {\n this.sortDir = this.sortDir === 'asc' ? 'desc' : this.sortDir === 'desc' ? null : 'asc';\n this.sortAsc = this.sortDir !== 'desc';\n if (this.sortDir === null) this.sortKey = '';\n } else {\n this.sortKey = col.key;\n this.sortDir = 'asc';\n this.sortAsc = true;\n }\n this.dropiSort.emit({ key: this.sortKey, dir: this.sortDir });\n this.onSortChange.emit({ key: this.sortKey, dir: this.sortDir });\n }\n\n private toggleRow(idx: number) {\n const next = new Set(this.selectedKeys);\n if (next.has(idx)) next.delete(idx);\n else next.add(idx);\n this.selectedKeys = next;\n const selected = Array.from(next);\n this.dropiSelection.emit(selected);\n this.rowsSelected.emit(selected.map(i => this.pagedRows[i]));\n }\n\n private toggleAll(checked: boolean) {\n this.selectedKeys = checked ? new Set(this.pagedRows.map((_, i) => i)) : new Set();\n const selected = Array.from(this.selectedKeys);\n this.dropiSelection.emit(selected);\n this.rowsSelected.emit(selected.map(i => this.pagedRows[i]));\n }\n\n private renderCellValue(value: any) {\n if (value === null || value === undefined) return '—';\n if (typeof value === 'object' && value.type) {\n switch (value.type) {\n case 'tag':\n return <dropi-tag type=\"secondary\" state={value.typeTag} text={value.value} />;\n case 'date':\n return (\n <div class=\"date-label\">\n <span>{new Date(value.value).toLocaleDateString('es-CO')}</span>\n {!value.hideTime && <span>{new Date(value.value).toLocaleTimeString('es-CO', { hour: '2-digit', minute: '2-digit' })}</span>}\n </div>\n );\n case 'country':\n return (\n <div class=\"flag-container\">\n {value.flag && <dropi-country-flags width=\"24\" height=\"24\" country={value.flag} style={{ display: 'inline-flex' }} />}\n <span>{value.value}</span>\n </div>\n );\n case 'textIcon':\n return (\n <div class=\"text-icon-label\">\n <dropi-icon name={value.icon} width=\"24px\" height=\"24px\" color={value.iconColor || 'Gray-Gray-500'} />\n {value.value && <span>{value.value}</span>}\n </div>\n );\n case 'status':\n return (\n <div class=\"status-label\">\n <div class=\"status-dot\">\n <div class={`dot dot-${(value.status || '').toLowerCase()}`} />\n <span class=\"status-text\">{value.status}</span>\n </div>\n {value.value && <span class=\"status-description\">{value.value}</span>}\n </div>\n );\n case 'image':\n return (\n <div class=\"image-label\">\n <div class=\"img-container\"><img src={value.imageUrl} alt={value.value} /></div>\n <span>{value.value}</span>\n </div>\n );\n case 'textWrap':\n return <div class=\"text-wrap-label\" style={{ maxWidth: value.maxWidth || '220px' }}>{value.value}</div>;\n default:\n return <span class=\"table-labels\">{String(value.value ?? '—')}</span>;\n }\n }\n return <span class=\"table-labels\">{String(value)}</span>;\n }\n\n render() {\n // SSR hydration: if parsedRows not yet initialized, preserve server-rendered shadow DOM\n if (this.parsedRows === undefined) return null;\n\n const rows = this.pagedRows;\n const allSelected = rows.length > 0 && this.selectedKeys.size === rows.length;\n const hasActions = this.parsedRowActions.length > 0;\n const cols = this.visibleColumns;\n\n return (\n <div class=\"table-container\">\n\n {/* ── Search / toolbar ── */}\n {(this.showSearch || this.showColumnSelector || this.title) && (\n <div class=\"search-container\">\n {this.title && <h3 class=\"table-title\">{this.title}</h3>}\n <div class={`search-actions${this.showSearch ? '' : ' only-filter'}`}>\n {this.showSearch && (\n <dropi-input\n placeholder=\"Buscar\"\n value={this.searchTerm}\n onOnInput={(e: CustomEvent) => {\n this.searchTerm = e.detail;\n this.dropiSearch.emit(e.detail);\n this.onSearchChange.emit(e.detail);\n }}\n />\n )}\n {this.showColumnSelector && (\n <div class=\"table-tools\">\n <div class=\"column-selector-container\">\n <button class=\"column-selector-btn\" onClick={() => this.showColumnMenu = !this.showColumnMenu}>\n <dropi-icon name=\"list-table\" width=\"20px\" height=\"20px\" color=\"Gray-Gray-500\" />\n </button>\n {this.showColumnMenu && (\n <div class=\"column-selector-menu\">\n {this.parsedColumns.map(col => (\n <div class=\"column-selector-option\" onClick={() => {\n const next = new Set(this.hiddenColumns);\n if (next.has(col.key)) next.delete(col.key); else next.add(col.key);\n this.hiddenColumns = next;\n }}>\n <dropi-checkbox checked={!this.hiddenColumns.has(col.key)} />\n <span>{col.label}</span>\n </div>\n ))}\n <div class=\"column-selector-footer\">\n <div class=\"column-selector-all\" onClick={() => {\n this.hiddenColumns = this.hiddenColumns.size === 0\n ? new Set(this.parsedColumns.map(c => c.key))\n : new Set();\n }}>\n <dropi-checkbox checked={this.hiddenColumns.size === 0} />\n <span>Mostrar / Ocultar todo</span>\n </div>\n </div>\n </div>\n )}\n </div>\n </div>\n )}\n </div>\n </div>\n )}\n\n {/* ── Table wrapper ── */}\n <div class={`table-wrapper${hasActions ? ' has-sticky-actions' : ''}`}>\n <table class={`custom-table${this.showCheckbox ? ' has-checkbox' : ''}`}>\n <thead>\n <tr>\n {this.showCheckbox && (\n <th class=\"checkbox-header\">\n <dropi-checkbox checked={allSelected} onOnChange={(e: CustomEvent) => this.toggleAll(e.detail)} />\n </th>\n )}\n {cols.map(col => (\n <th\n class={{ sortable: !!col.sortable, 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }}\n style={{ textAlign: col.align || 'center', minWidth: col.minWidth, maxWidth: col.maxWidth }}\n onClick={() => this.handleSort(col)}\n >\n <div class={`headers-container${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}`}>\n <div class={`headers${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}`}>\n <span>{col.label}</span>\n {col.sortable && (\n <div class=\"order-icons\">\n <dropi-icon name=\"Caret-up\" width=\"12px\" height=\"12px\" color={this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200'} />\n <dropi-icon name=\"Caret-down\" width=\"12px\" height=\"12px\" color={!this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200'} />\n </div>\n )}\n </div>\n </div>\n </th>\n ))}\n {hasActions && <th class=\"actions-header actions\">Acciones</th>}\n </tr>\n </thead>\n\n <tbody>\n {this.loading ? (\n Array.from({ length: 5 }).map(() => (\n <tr class=\"table-row\">\n {this.showCheckbox && <td><div class=\"skeleton skeleton--sm\" /></td>}\n {cols.map(() => <td><div class=\"skeleton\" /></td>)}\n {hasActions && <td />}\n </tr>\n ))\n ) : rows.length === 0 ? (\n <tr>\n <td colSpan={cols.length + (this.showCheckbox ? 1 : 0) + (hasActions ? 1 : 0)}>\n <div class=\"empty-table\">\n <div class=\"empty-message-container\">{this.emptyMessage}</div>\n </div>\n </td>\n </tr>\n ) : (\n rows.map((row, i) => (\n <tr class=\"table-row\" onClick={() => this.dropiRowClick.emit({ row, index: i })}>\n {this.showCheckbox && (\n <td onClick={(e) => e.stopPropagation()}>\n <dropi-checkbox checked={this.selectedKeys.has(i)} onOnChange={() => this.toggleRow(i)} />\n </td>\n )}\n {cols.map(col => (\n <td\n class={{ 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }}\n style={{ minWidth: col.minWidth, maxWidth: col.maxWidth, overflow: col.maxWidth ? 'hidden' : undefined }}\n >\n <div class=\"cell-content\" style={{ textAlign: col.align || 'center' }}>\n {this.renderCellValue(row[col.key])}\n </div>\n </td>\n ))}\n {hasActions && (\n <td class=\"action-button actions\" onClick={(e) => e.stopPropagation()}>\n {this.parsedRowActions.length > 3 ? (\n <div style={{ display: \"flex\", justifyContent: \"center\", width: \"100%\" }}>\n <dropi-icon\n class=\"action-icon\"\n name=\"Menu-dots-vertical\"\n width=\"24px\" height=\"24px\"\n color=\"Gray-Gray-500\"\n onClick={() => this.openActionRow = this.openActionRow === i ? -1 : i}\n />\n {this.openActionRow === i && (\n <div class=\"actions-menu\">\n {this.parsedRowActions.map(action => (\n <div class=\"action-item\" onClick={() => { this.openActionRow = -1; this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); }}>\n <dropi-icon name={action.icon} width=\"20px\" height=\"20px\" color={action.iconColor || 'Gray-Gray-500'} />\n {action.label}\n </div>\n ))}\n </div>\n )}\n </div>\n ) : (\n <div class=\"short-actions\">\n {this.parsedRowActions.map(action => (\n <dropi-icon\n class=\"action-icon\"\n name={action.icon}\n width=\"24px\" height=\"24px\"\n color={action.iconColor || 'Gray-Gray-500'}\n onClick={() => { this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); }}\n />\n ))}\n </div>\n )}\n </td>\n )}\n </tr>\n ))\n )}\n </tbody>\n </table>\n </div>\n\n {/* ── Empty + Paginator ── */}\n {this.showPaginator && (\n <div class=\"pagination\">\n <div class=\"page-size-selector\">\n <label>Mostrar</label>\n <select onChange={(e: any) => {\n this.pageSize = Number(e.target.value);\n this.currentPage = 1;\n this.dropiPageSizeChange.emit(this.pageSize);\n this.onSizeChange.emit(this.pageSize);\n }}>\n {this.parsedPageSizes.map(s => (\n <option value={s} selected={this.pageSize === s}>{s}</option>\n ))}\n </select>\n </div>\n <dropi-paginator\n totalPages={this.totalPages}\n currentPage={this.currentPage}\n onPageChange={(e: CustomEvent<number>) => {\n this.currentPage = e.detail;\n this.dropiPageChange.emit(e.detail);\n this.onPageChange.emit(e.detail);\n }}\n />\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-tabs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dropi-tabs.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,gsDAAgsD,CAAC;;MC8BhtD,SAAS,GAAA,MAAA;;;;;;IAEZ,aAAa,GAAuB,EAAE;;IAEN,SAAS,GAAoB,CAAC;;IAE9D,QAAQ,GAAY,KAAK;;IAEzB,UAAU,GAAY,KAAK;;AAG1B,IAAA,cAAc;IAEN,UAAU,GAAc,EAAE;AAG3C,IAAA,WAAW,CAAC,GAAuB,EAAA;QACjC,IAAI,CAAC,UAAU,GAAG,OAAO,GAAG,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,CAAC;;IAG3E,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC;;AAG9B,IAAA,WAAW,CAAC,GAAY,EAAA;AAC9B,QAAA,IAAI,GAAG,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU;YAAE;AACrC,QAAA,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,EAAE;AACvB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG/B,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,EAAA,EACvC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,IAAG;YACzB,MAAM,QAAQ,GAAG,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS;AAC1C,YAAA,QACE,WACE,IAAI,EAAC,KAAK,EAAA,eAAA,EACK,MAAM,CAAC,QAAQ,CAAC,EAC/B,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,kBAAkB,EAAE,QAAQ,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,oBAAoB,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,EAChH,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAA,EAEpC,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,eAAe,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,WAAW,IAAE,GAAG,CAAC,KAAK,CAAQ,EACzC,GAAG,CAAC,OAAO,KAAK,SAAS,IAAI,GAAG,CAAC,OAAO,KAAK,IAAI,KAChD,YAAM,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,qBAAqB,EAAE,QAAQ,EAAE,EAAA,EAClE,GAAG,CAAC,OAAO,CACP,CACR,CACI,EACN,IAAI,CAAC,QAAQ,KACZ,GAAG,CAAC;kBACA,CAAA,CAAA,YAAA,EAAA,EAAY,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,qBAAqB,EAAA;AACxF,kBAAE,YAAM,KAAK,EAAC,gBAAgB,EAAA,CAAG,CACpC,CACG;SAET,CAAC,CACE;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-tabs/dropi-tabs.css?tag=dropi-tabs&encapsulation=shadow","src/components/dropi-tabs/dropi-tabs.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.tabs-container {\n display: flex; flex-wrap: nowrap; overflow-x: auto; width: 100%; height: 52px;\n scrollbar-width: none;\n}\n.tabs-container::-webkit-scrollbar { width: 0; height: 0; }\n\n.tab-item {\n padding: var(--Size-4,16px) var(--Size-5,20px);\n background: var(--Neutral-White, #ffffff);\n border-bottom: 2px solid var(--Gray-Gray-100,#e6eaf2);\n cursor: pointer; display: flex; gap: 16px; align-items: center;\n white-space: nowrap; flex-shrink: 0;\n transition: border-color 0.15s ease; user-select: none;\n}\n.tab-item:hover:not(.tab-item--disabled):not(.tab-item--active) { border-color: var(--Gray-Gray-300,#a3abbf); }\n.tab-item--active { border-bottom: 2px solid var(--Primary-Primary-500,#f49a3d); }\n.tab-item--disabled { background: rgba(223,228,237,0.22); cursor: not-allowed; opacity: 0.7; pointer-events: none; }\n\n.tab-label-row { display: flex; align-items: center; gap: 8px; }\n.tab-label { font-size: var(--font-size-s,14px); font-weight: var(--font-weight-bold,700); color: var(--Gray-Gray-400,#858ea6); line-height: 20px; }\n.tab-item--active .tab-label { color: var(--Gray-Gray-600,#475066); }\n.tab-item--disabled .tab-label { font-weight: var(--font-weight-light); color: var(--Gray-Gray-300,#a3abbf); }\n\n.tab-counter {\n display: inline-flex; align-items: center; justify-content: center;\n min-width: 20px; height: 20px; padding: 0 6px; border-radius: 20px;\n font-size: var(--font-size-xxs);\n font-weight: var(--font-weight-bold);\n line-height: var(--lineheight-simple);\n background: var(--Gray-Gray-100,#e6eaf2); color: var(--Gray-Gray-500,#69738c);\n}\n.tab-counter--active { \n background-color: var(--Primary-Primary-500, #F49A3D);\n color: var(--Neutral-White);\n}\n\n.tab-status-dot {\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--Primary-Primary-500, #f49a3d);\n flex-shrink: 0;\n}\n","import { Component, Prop, Event, EventEmitter, Watch, State, h } from '@stencil/core';\n\nexport interface TabItem {\n /** Unique identifier */\n id: string | number;\n /** Display label */\n label: string;\n /** Whether the tab is disabled */\n disabled?: boolean;\n /** Optional numeric counter badge */\n counter?: number;\n /** Whether to show completed checkmark (requires showIcon) */\n completed?: boolean;\n}\n\n/**\n * @component dropi-tabs\n * Horizontal tab navigation with optional counter badges and completed state icons.\n *\n * @example\n * <dropi-tabs\n * tabs='[{\"id\":1,\"label\":\"Activos\"},{\"id\":2,\"label\":\"Histórico\",\"counter\":5}]'\n * active-tab=\"1\"\n * />\n */\n@Component({\n tag: 'dropi-tabs',\n styleUrl: 'dropi-tabs.css',\n shadow: true,\n})\nexport class DropiTabs {\n /** Array of TabItem or JSON string (matches Angular 'configuration') */\n @Prop() configuration: TabItem[] | string = [];\n /** Id of the active tab */\n @Prop({ mutable: true, reflect: true }) activeTab: string | number = 0;\n /** Whether to show a check/pending icon per tab */\n @Prop() showIcon: boolean = false;\n /** Stop tab action programmatically */\n @Prop() stopAction: boolean = false;\n\n /** Emitted on tab click. e.detail = TabItem */\n @Event() onIndexChanged: EventEmitter<TabItem>;\n\n @State() private parsedTabs: TabItem[] = [];\n\n @Watch('configuration')\n tabsChanged(val: TabItem[] | string) {\n this.parsedTabs = typeof val === 'string' ? JSON.parse(val) : (val ?? []);\n }\n\n componentWillLoad() {\n this.tabsChanged(this.configuration);\n }\n\n private handleClick(tab: TabItem) {\n if (tab.disabled || this.stopAction) return;\n this.activeTab = tab.id;\n this.onIndexChanged.emit(tab);\n }\n\n render() {\n return (\n <div class=\"tabs-container\" role=\"tablist\">\n {this.parsedTabs.map(tab => {\n const isActive = tab.id === this.activeTab;\n return (\n <div\n role=\"tab\"\n aria-selected={String(isActive)}\n class={{ 'tab-item': true, 'tab-item--active': isActive && !tab.disabled, 'tab-item--disabled': !!tab.disabled }}\n onClick={() => this.handleClick(tab)}\n >\n <span class=\"tab-label-row\">\n <span class=\"tab-label\">{tab.label}</span>\n {tab.counter !== undefined && tab.counter !== null && (\n <span class={{ 'tab-counter': true, 'tab-counter--active': isActive }}>\n {tab.counter}\n </span>\n )}\n </span>\n {this.showIcon && (\n tab.completed\n ? <dropi-icon name=\"Check-circle\" width=\"12px\" height=\"12px\" color=\"Success-Success-500\" />\n : <span class=\"tab-status-dot\" />\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-tag-type-product.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dropi-tag-type-product.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,MAAM,CAAC,+PAA+P,CAAC;;MCWzR,mBAAmB,GAAA,MAAA;;;;;IAEtB,KAAK,GAAW,UAAU;IAElC,MAAM,GAAA;AACJ,QAAA,OAAO,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAO;;;;;;;","names":[],"sources":["src/components/dropi-tag-type-product/dropi-tag-type-product.css?tag=dropi-tag-type-product&encapsulation=shadow","src/components/dropi-tag-type-product/dropi-tag-type-product.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.type-variation {\n border-radius: 4px;\n background: var(--Warning-Warning-500);\n padding: 2px 6px;\n font-size: var(--font-size-xs);\n color: var(--Neutral-White);\n text-transform: capitalize;\n font-weight: var(--font-weight-regular);\n width: fit-content;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @component dropi-tag-type-product\n * Tag badge showing the product variation type.\n */\n@Component({\n tag: 'dropi-tag-type-product',\n styleUrl: 'dropi-tag-type-product.css',\n shadow: true,\n})\nexport class DropiTagTypeProduct {\n /** Label text. Default: VARIABLE */\n @Prop() label: string = 'VARIABLE';\n\n render() {\n return <div class=\"type-variation\">{this.label}</div>;\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-tag.entry.js DELETED Viewed

@@ -1,69 +0,0 @@
-import { r as registerInstance, h } from './index-Cvp2LQOM.js';
-const dropiTagCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.container-chips{display:inline-block}.tags{display:inline-flex;padding:4px 8px;justify-content:center;align-items:center;gap:4px;border-radius:var(--Border-5, 9999px);overflow:hidden;text-align:center;text-overflow:ellipsis;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);line-height:var(--Size-5, 24px);animation:fade-in 200ms ease-out}.tags.icon-only{gap:0}.file-icon{display:flex}@keyframes fade-in{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}`;
-const DropiTag = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /** primary (filled) | secondary (soft) */
-    type = 'primary';
-    /** Color state of the tag */
-    state = 'default';
-    /** Whether to show the icon */
-    showIcon = false;
-    /** Icon name from the sprite */
-    icon = '';
-    /** Label text */
-    text = '';
-    colorMap = {
-        default: 'Primary-Primary',
-        success: 'Success-Success',
-        info: 'Info-Info',
-        warning: 'Warning-Warning',
-        error: 'Error-Error',
-        legacy: 'Gray-Gray',
-    };
-    propsChanged() { }
-    get bgColor() {
-        const base = this.colorMap[this.state];
-        if (this.type === 'primary')
-            return `var(--${base}-500)`;
-        const shade = this.state === 'default' || this.state === 'legacy' ? '-100' : '-50';
-        return `var(--${base}${shade})`;
-    }
-    get textColor() {
-        const base = this.colorMap[this.state];
-        if (this.type === 'primary')
-            return `var(--Neutral-White)`;
-        const shade = this.state === 'default' ? '-500' : '-700';
-        return `var(--${base}${shade})`;
-    }
-    get iconColor() {
-        if (this.type === 'primary')
-            return 'Neutral-White';
-        const base = this.colorMap[this.state];
-        const shade = this.state === 'default' ? '-500' : '-700';
-        return `${base}${shade}`;
-    }
-    get hasContent() {
-        return typeof this.text === 'string' && this.text.trim().length > 0;
-    }
-    render() {
-        return (h("div", { key: '1736efc48b3ccaf5f3ca85ad29622f42b4fb3c8d', class: "container-chips" }, h("div", { key: '96c2b0e9d22881ca71c58488dcd622a1eef1a120', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: 'aab0330382fe0690177edcb364ab043459b9a316', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: 'be38207ca7668b6b4976d5f3f2f506c380ee0491' }, this.text))));
-    }
-    static get watchers() { return {
-        "type": [{
-                "propsChanged": 0
-            }],
-        "state": [{
-                "propsChanged": 0
-            }]
-    }; }
-};
-DropiTag.style = dropiTagCss();
-export { DropiTag as dropi_tag };
-//# sourceMappingURL=dropi-tag.entry.esm.js.map
-//# sourceMappingURL=dropi-tag.entry.js.map

package/dist/dropi-ui/dropi-tag.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dropi-tag.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-tag/dropi-tag.css?tag=dropi-tag&encapsulation=shadow","src/components/dropi-tag/dropi-tag.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.container-chips {\n display: inline-block;\n}\n\n.tags {\n display: inline-flex;\n padding: 4px 8px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n border-radius: var(--Border-5, 9999px);\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n font-size: var(--font-size-s, 12px);\n font-weight: var(--font-weight-medium, 500);\n line-height: var(--Size-5, 24px);\n /* Animation */\n animation: fade-in 200ms ease-out;\n}\n\n.tags.icon-only {\n gap: 0;\n}\n\n.file-icon {\n display: flex;\n}\n\n@keyframes fade-in {\n from { opacity: 0; transform: scale(0.8); }\n to { opacity: 1; transform: scale(1); }\n}\n","import { Component, Prop, Watch, h } from '@stencil/core';\n\nexport type TagState = 'default' | 'success' | 'info' | 'warning' | 'error' | 'legacy';\nexport type TagType = 'primary' | 'secondary';\n\n/**\n * @component dropi-tag\n * Colored tag/chip for statuses, categories, and labels.\n */\n@Component({\n tag: 'dropi-tag',\n styleUrl: 'dropi-tag.css',\n shadow: true,\n})\nexport class DropiTag {\n /** primary (filled) | secondary (soft) */\n @Prop({ reflect: true }) type: TagType = 'primary';\n /** Color state of the tag */\n @Prop({ reflect: true }) state: TagState = 'default';\n /** Whether to show the icon */\n @Prop() showIcon: boolean = false;\n /** Icon name from the sprite */\n @Prop({ reflect: true }) icon: string = '';\n /** Label text */\n @Prop({ reflect: true }) text: string = '';\n\n private readonly colorMap: Record<TagState, string> = {\n default: 'Primary-Primary',\n success: 'Success-Success',\n info: 'Info-Info',\n warning: 'Warning-Warning',\n error: 'Error-Error',\n legacy: 'Gray-Gray',\n };\n\n @Watch('type') @Watch('state')\n propsChanged() {}\n\n private get bgColor(): string {\n const base = this.colorMap[this.state];\n if (this.type === 'primary') return `var(--${base}-500)`;\n const shade = this.state === 'default' || this.state === 'legacy' ? '-100' : '-50';\n return `var(--${base}${shade})`;\n }\n\n private get textColor(): string {\n const base = this.colorMap[this.state];\n if (this.type === 'primary') return `var(--Neutral-White)`;\n const shade = this.state === 'default' ? '-500' : '-700';\n return `var(--${base}${shade})`;\n }\n\n private get iconColor(): string {\n if (this.type === 'primary') return 'Neutral-White';\n const base = this.colorMap[this.state];\n const shade = this.state === 'default' ? '-500' : '-700';\n return `${base}${shade}`;\n }\n\n private get hasContent(): boolean {\n return typeof this.text === 'string' && this.text.trim().length > 0;\n }\n\n render() {\n return (\n <div class=\"container-chips\">\n <div\n class={{ tags: true, 'icon-only': this.showIcon && !this.hasContent }}\n style={{ backgroundColor: this.bgColor, color: this.textColor }}\n >\n {this.showIcon && this.icon && (\n <dropi-icon\n class=\"file-icon\"\n name={this.icon}\n width=\"16px\"\n height=\"16px\"\n color={this.iconColor}\n />\n )}\n {this.hasContent && <span>{this.text}</span>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-text-area.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dropi-text-area.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-text-area/dropi-text-area.css?tag=dropi-text-area&encapsulation=shadow","src/components/dropi-text-area/dropi-text-area.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.textarea-wrapper {\n position: relative;\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.textarea-wrapper label {\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.asterisk {\n color: var(--Error-Error-500, #f46a6b);\n}\n\n.textarea-container {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n\ntextarea.form-control {\n box-sizing: border-box;\n width: 100%;\n flex: 1;\n overflow: auto;\n padding: var(--Size-3, 12px);\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: var(--Border-2, 8px);\n font-size: var(--font-size-s, 12px);\n font-family: inherit;\n color: var(--Gray-Gray-700, #32394d);\n background: var(--Neutral-White, #ffffff);\n transition: border-color 0.3s ease-in-out;\n outline: none;\n appearance: none;\n}\n\ntextarea.form-control:focus {\n border-color: var(--Info-Info-500, #50a5f1);\n}\n\ntextarea.form-control:focus::placeholder {\n color: var(--Gray-Gray-400, #858ea6);\n}\n\ntextarea.form-control-valid {\n border-color: var(--Gray-Gray-400, #858ea6) !important;\n color: var(--Gray-Gray-600, #475066);\n}\n\ntextarea.form-control-invalid {\n border-color: var(--Error-Error-500, #f46a6b) !important;\n color: var(--Gray-Gray-600, #475066);\n}\n\ntextarea.form-control:disabled {\n border-color: var(--Gray-Gray-200, #c3c9d9) !important;\n color: var(--Gray-Gray-400, #858ea6);\n background-color: var(--Gray-Gray-50, #f7f8fa);\n cursor: not-allowed;\n}\n\n/* ── Char counter ───────────────────────────────────────────── */\n.char-counter {\n position: absolute;\n bottom: 10px;\n right: 16px;\n font-size: var(--font-size-xs, 10px);\n color: var(--Gray-Gray-500, #69738c);\n pointer-events: none;\n}\n\n/* ── Helper ─────────────────────────────────────────────────── */\n.form-control-helper {\n display: flex;\n gap: 4px;\n align-items: center;\n}\n\n.form-control-helper span {\n display: block;\n color: var(--Gray-Gray-600, #475066);\n font-size: var(--font-size-xs, 10px);\n}\n\n.invalid-color {\n color: var(--Error-Error-500, #f46a6b) !important;\n}\n","import { Component, Prop, State, Event, EventEmitter, AttachInternals, Watch, h } from '@stencil/core';\n\n/**\n * Simplified TextAreaProperties interface (matches Angular `TextAreaProperties`).\n * `formControl` is intentionally excluded — use `value` + dropiInput event instead.\n */\nexport interface TextAreaProperties {\n id?: string;\n label?: string;\n placeholder?: string;\n maxLength?: number;\n minLength?: number;\n textHelper?: string;\n rows?: number;\n resize?: 'none' | 'both' | 'horizontal' | 'vertical';\n}\n\nexport type ResizeMode = 'none' | 'both' | 'horizontal' | 'vertical';\n\n/**\n * @component dropi-text-area\n * Multi-line text area with label, char counter, validation states,\n * helper text, and native form association.\n */\n@Component({\n tag: 'dropi-text-area',\n styleUrl: 'dropi-text-area.css',\n shadow: true,\n formAssociated: true,\n})\nexport class DropiTextArea {\n @AttachInternals() internals: ElementInternals;\n\n /** Input id. Defaults to label. */\n @Prop({ mutable: true }) id: string = '';\n /** Name for native form submission */\n @Prop() name: string = '';\n /** Label shown above the textarea */\n @Prop({ mutable: true }) label: string = '';\n /** Placeholder text */\n @Prop({ mutable: true }) placeholder: string = '';\n /** Current value (controlled) */\n @Prop({ mutable: true }) value: string = '';\n /** Max character length */\n @Prop({ mutable: true }) maxLength: number;\n /** Min character length */\n @Prop({ mutable: true }) minLength: number = 0;\n /** Number of visible rows */\n @Prop({ mutable: true }) rows: number = 4;\n /** Resize behavior */\n @Prop({ mutable: true }) resize: ResizeMode = 'vertical';\n /** Disable the textarea */\n @Prop({ reflect: true }) disabled: boolean = false;\n /** Mark as required */\n @Prop({ reflect: true }) required: boolean = false;\n /** Show the required asterisk */\n @Prop() showObligatoryAsterisk: boolean = false;\n /** Helper / error text below the field */\n @Prop({ mutable: true }) textHelper: string = '';\n /** Mark the field as invalid (consumer-controlled) */\n @Prop() hasError: boolean = false;\n /**\n * Convenience object prop — matches Angular `textAreaProperties: TextAreaProperties`.\n * When provided, its non-null fields override individual props.\n * Note: `formControl` is not supported in web components; use `value` + dropiInput instead.\n */\n @Prop() textAreaProperties: TextAreaProperties | null = null;\n\n @Watch('textAreaProperties')\n textAreaPropertiesChanged(val: TextAreaProperties) {\n if (!val) return;\n if (val.id !== undefined) this.id = val.id;\n if (val.label !== undefined) this.label = val.label;\n if (val.placeholder !== undefined) this.placeholder = val.placeholder;\n if (val.maxLength !== undefined) this.maxLength = val.maxLength;\n if (val.minLength !== undefined) this.minLength = val.minLength;\n if (val.textHelper !== undefined) this.textHelper = val.textHelper;\n if (val.rows !== undefined) this.rows = val.rows;\n if (val.resize !== undefined) this.resize = val.resize;\n }\n\n @State() private touched: boolean = false;\n\n /** Emitted on every keystroke */\n @Event() dropiInput: EventEmitter<string>;\n /** Emitted on blur */\n @Event() dropiChange: EventEmitter<string>;\n @Event() dropiFocus: EventEmitter<void>;\n @Event() dropiBlur: EventEmitter<void>;\n\n @Watch('value')\n valueChanged(val: string) {\n this.internals.setFormValue(val);\n }\n\n componentWillLoad() {\n this.internals.setFormValue(this.value ?? '');\n if (this.textAreaProperties) this.textAreaPropertiesChanged(this.textAreaProperties);\n }\n\n private handleInput(e: InputEvent) {\n const val = (e.target as HTMLTextAreaElement).value;\n this.value = val;\n this.internals.setFormValue(val);\n this.dropiInput.emit(val);\n }\n\n private handleBlur() {\n this.touched = true;\n this.dropiChange.emit(this.value);\n this.dropiBlur.emit();\n }\n\n private get resolvedId(): string {\n return this.id || this.label;\n }\n\n private get isInvalid(): boolean {\n return this.hasError && this.touched;\n }\n\n private get charCount(): number {\n return this.value?.length ?? 0;\n }\n\n render() {\n const showAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;\n const showHelper = this.textHelper || this.isInvalid;\n\n return (\n <div class=\"textarea-wrapper\">\n\n {this.label && (\n <label\n htmlFor={this.resolvedId}\n style={{ color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' }}\n >\n {this.label}\n {showAsterisk && <span class=\"asterisk\"> *</span>}\n </label>\n )}\n\n <div class=\"textarea-container\">\n <textarea\n id={this.resolvedId}\n class={{\n 'form-control': true,\n 'Body-M-Regular': true,\n 'form-control-valid': !this.isInvalid && this.touched && !!this.value,\n 'form-control-invalid': this.isInvalid,\n }}\n rows={this.rows}\n placeholder={this.placeholder}\n maxLength={this.maxLength}\n minLength={this.minLength}\n disabled={this.disabled}\n required={this.required}\n style={{ resize: this.resize }}\n onInput={(e) => this.handleInput(e as InputEvent)}\n onFocus={() => this.dropiFocus.emit()}\n onBlur={() => this.handleBlur()}\n >\n {this.value}\n </textarea>\n\n {this.maxLength > 0 && (\n <div class=\"char-counter\">\n {this.charCount}/{this.maxLength}\n </div>\n )}\n </div>\n\n {showHelper && (\n <div class=\"form-control-helper\">\n {this.isInvalid && (\n <dropi-icon name=\"Warning-circle\" width=\"12px\" height=\"12px\" color=\"Error-Error-500\" />\n )}\n <span\n class={{ 'invalid-color': this.isInvalid }}\n style={{ color: this.disabled ? 'var(--Gray-Gray-400)' : undefined }}\n >\n {this.textHelper}\n </span>\n </div>\n )}\n\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-time-line.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dropi-time-line.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,4wDAA4wD,CAAC;;MCqBhyD,aAAa,GAAA,MAAA;;;;;IAEhB,KAAK,GAA4B,EAAE;AAE3C,IAAA,IAAY,WAAW,GAAA;AACrB,QAAA,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;AAClC,YAAA,IAAI;gBAAE,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;;AAAI,YAAA,MAAM;AAAE,gBAAA,OAAO,EAAE;;;AAE1D,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE;;IAGzB,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW;QAE9B,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EAClB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;YACrB,MAAM,MAAM,GAAG,CAAC,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;AAErC,YAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAA,SAAA,EAAY,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,EAAA,EACnF,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACvB,IAAI,CAAC,IAAI,IACR,CAAA,CAAA,YAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,KAAK,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM,GAAG,eAAe,GAAG,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,eAAe,EAAA,CACpH,KAEF,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,cAAc,EAAA,CAAG,CAC9B,CACG,EACL,CAAC,MAAM,IAAI,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,eAAe,GAAG,CACrC,EAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC/C,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,mBAAmB,EAAA,EAAE,IAAI,CAAC,QAAQ,CAAQ,CACpE,CACF;SAET,CAAC,CACE;;;;;;;","names":[],"sources":["src/components/dropi-time-line/dropi-time-line.css?tag=dropi-time-line&encapsulation=shadow","src/components/dropi-time-line/dropi-time-line.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.timeline {\n display: flex;\n flex-direction: column;\n}\n\n.tl-step {\n display: flex;\n align-items: flex-start;\n gap: var(--Size-3, 12px);\n}\n\n/* ── Left column: icon + line ───────────────────────────── */\n.tl-step__marker {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-shrink: 0;\n}\n\n.tl-step__icon {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.2s, border-color 0.2s;\n}\n\n.tl-step--pending .tl-step__icon {\n background: var(--Gray-Gray-100, #e6eaf2);\n border: 2px solid var(--Gray-Gray-200, #c3c9d9);\n}\n\n.tl-step--active .tl-step__icon {\n background: var(--Neutral-White, #ffffff);\n border: 2px solid var(--Primary-Primary-500, #f49a3d);\n box-shadow: 0 0 0 4px var(--Primary-Primary-100, #fde9d0);\n}\n\n.tl-step--done .tl-step__icon {\n background: var(--Primary-Primary-500, #f49a3d);\n border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n\n.tl-step__dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n display: block;\n}\n\n.tl-step--pending .tl-step__dot {\n background: var(--Gray-Gray-300, #a3abbf);\n}\n\n.tl-step--active .tl-step__dot {\n background: var(--Primary-Primary-500, #f49a3d);\n}\n\n.tl-step--done .tl-step__dot {\n background: var(--Neutral-White, #ffffff);\n}\n\n/* ── Vertical connector ─────────────────────────────────── */\n.tl-step__line {\n flex: 1;\n width: 2px;\n min-height: 24px;\n margin: 4px 0;\n background: var(--Gray-Gray-200, #c3c9d9);\n}\n\n.tl-step--done + .tl-step .tl-step__line,\n.tl-step--done .tl-step__line {\n background: var(--Primary-Primary-500, #f49a3d);\n}\n\n/* ── Content ────────────────────────────────────────────── */\n.tl-step__content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding-top: 6px;\n padding-bottom: var(--Size-4, 16px);\n}\n\n.tl-step__label {\n font-size: var(--font-size-s, 12px);\n font-weight: var(--font-weight-bold, 700);\n color: var(--Gray-Gray-700, #32394d);\n}\n\n.tl-step--pending .tl-step__label {\n color: var(--Gray-Gray-400, #858ea6);\n font-weight: var(--font-weight-regular, 400);\n}\n\n.tl-step__subtitle {\n font-size: var(--font-size-xs, 10px);\n color: var(--Gray-Gray-500, #69738c);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type TimelineStepStatus = 'pending' | 'active' | 'done';\n\nexport interface TimelineStep {\n status: TimelineStepStatus;\n label: string;\n icon?: string;\n id?: string;\n subtitle?: string;\n}\n\n/**\n * @component dropi-time-line\n * Vertical timeline showing ordered steps with status indicators.\n */\n@Component({\n tag: 'dropi-time-line',\n styleUrl: 'dropi-time-line.css',\n shadow: true,\n})\nexport class DropiTimeLine {\n /** Array of timeline steps. Pass as JSON string or array */\n @Prop() steps: TimelineStep[] | string = [];\n\n private get parsedSteps(): TimelineStep[] {\n if (typeof this.steps === 'string') {\n try { return JSON.parse(this.steps); } catch { return []; }\n }\n return this.steps || [];\n }\n\n render() {\n const steps = this.parsedSteps;\n\n return (\n <div class=\"timeline\">\n {steps.map((step, i) => {\n const isLast = i === steps.length - 1;\n\n return (\n <div class={{ 'tl-step': true, [`tl-step--${step.status}`]: true }} key={step.id || i}>\n <div class=\"tl-step__marker\">\n <div class=\"tl-step__icon\">\n {step.icon ? (\n <dropi-icon\n name={step.icon}\n width=\"16px\"\n height=\"16px\"\n color={step.status === 'done' ? 'Neutral-White' : step.status === 'active' ? 'Primary-Primary-500' : 'Gray-Gray-400'}\n />\n ) : (\n <span class=\"tl-step__dot\" />\n )}\n </div>\n {!isLast && <div class=\"tl-step__line\" />}\n </div>\n\n <div class=\"tl-step__content\">\n <span class=\"tl-step__label\">{step.label}</span>\n {step.subtitle && <span class=\"tl-step__subtitle\">{step.subtitle}</span>}\n </div>\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-toast.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dropi-toast.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-toast/dropi-toast.css?tag=dropi-toast&encapsulation=shadow","src/components/dropi-toast/dropi-toast.tsx"],"sourcesContent":[":host { display: contents; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.toast-container { position: fixed; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 380px; width: 100%; pointer-events: none; }\n.toast-container--top-right { top: 80px; right: 0; padding: var(--Size-2, 8px); }\n.toast-container--top-left { top: 80px; left: 0; padding: var(--Size-2, 8px); }\n.toast-container--bottom-right { bottom: 24px; right: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }\n.toast-container--bottom-left { bottom: 24px; left: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }\n.toast-container--top-center { top: 80px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); }\n.toast-container--bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); flex-direction: column-reverse; }\n\n.toast-wrapper { pointer-events: auto; animation: toast-in 0.28s ease; transition: opacity 0.28s ease, transform 0.28s ease, max-height 0.32s ease; overflow: hidden; max-height: 200px; }\n.toast-wrapper--leaving { opacity: 0; transform: translateX(20px); max-height: 0; pointer-events: none; }\n@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }\n\n.toast { position: relative; display: flex; align-items: flex-start; border-radius: var(--Border-2,8px); background: var(--Neutral-White, #ffffff); box-shadow: 0.5px -1px 7px 0px rgba(0, 0, 0, 0.06), 0px 4px 20px 0px rgba(0, 0, 0, 0.12); border-left: var(--Size-2, 8px) solid; overflow: hidden; min-width: 300px; }\n.toast--success { border-color: var(--Success-Success-500,#34c38f); }\n.toast--error { border-color: var(--Error-Error-500,#f46a6b); }\n.toast--warn { border-color: var(--Warning-Warning-500,#f1b44c); }\n.toast--info { border-color: var(--Info-Info-500,#50a5f1); }\n\n.toast-content {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: var(--Size-5) var(--Size-5) var(--Size-5) calc(var(--Size-5) - var(--Size-2, 8px));\n gap: var(--Size-4, 16px);\n}\n\n.lottie-img {\n width: 50px;\n height: 50px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n\n.lottie-player-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\nlottie-player {\n width: 100%;\n height: 100%;\n display: block;\n}\n\n.info-container { flex: 1; min-width: 0; align-self: center; display: flex; flex-direction: column; gap: var(--Size-1, 4px); }\n.title { margin: 0; font-size: var(--font-size-l,18px); font-weight: var(--font-weight-bold,700); color: var(--Gray-Gray-700,#32394d); line-height: 1.1; text-align: left; max-width: 250px; }\n.description { margin: 0; font-size: var(--font-size-s,14px); color: var(--Gray-Gray-500, #69738c); line-height: 1.4; text-align: left; max-width: 250px; }\n\n.toast-close { position: absolute; top: 18px; right: 10px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n.toast-close:hover { opacity: 0.7; }\n","import { Component, Prop, State, Method, h } from '@stencil/core';\n\nexport type ToastSeverity = 'success' | 'error' | 'warn' | 'info';\n\nexport interface ToastMessage {\n id?: string;\n /** Visual style and icon */\n severity: ToastSeverity;\n /** Bold title */\n summary: string;\n /** Optional body text */\n detail?: string;\n /** Whether to show a close button. Default: true */\n closable?: boolean;\n /** Auto-close after N ms. 0 = manual only. Default: uses component `life` prop */\n life?: number;\n}\n\ninterface ToastItem {\n msg: ToastMessage;\n leaving: boolean;\n timer?: any;\n}\n\n/**\n * @component dropi-toast\n * Global toast notification stack. Place once in the app root, call show() from JS.\n *\n * @example\n * const t = document.querySelector('dropi-toast');\n * t.show({ severity: 'success', summary: '¡Guardado!', detail: 'Cambios aplicados.' });\n */\n@Component({\n tag: 'dropi-toast',\n styleUrl: 'dropi-toast.css',\n shadow: true,\n})\nexport class DropiToast {\n /** Toast position */\n @Prop() position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center' = 'top-right';\n /** Default auto-close ms (0 = manual) */\n @Prop() life: number = 3000;\n\n @State() private items: ToastItem[] = [];\n private idCounter = 0;\n\n /** Show a toast */\n @Method()\n async show(msg: ToastMessage) {\n console.log('DropiToast show() called with:', msg);\n const id = msg.id ?? `t${++this.idCounter}`;\n const item: ToastItem = { msg: { ...msg, id, closable: msg.closable ?? true }, leaving: false };\n this.items = [...(this.items || []), item];\n const ms = msg.life !== undefined ? msg.life : this.life;\n if (ms > 0) item.timer = setTimeout(() => this.remove(id), ms);\n }\n\n /** Remove all toasts */\n @Method()\n async clear() {\n (this.items || []).forEach(i => {\n if (i.timer) clearTimeout(i.timer);\n });\n this.items = [];\n }\n\n private remove(id: string) {\n this.items = this.items.map(i => (i.msg.id === id ? { ...i, leaving: true } : i));\n setTimeout(() => {\n this.items = this.items.filter(i => i.msg.id !== id);\n }, 320);\n }\n\n private readonly lottieMap: Record<ToastSeverity, string> = {\n success: '/assets/lottie-files/success.json',\n error: '/assets/lottie-files/failure.json',\n warn: '/assets/lottie-files/warning.json',\n info: '/assets/lottie-files/question.json',\n };\n\n private getLottieHtml(severity: ToastSeverity): string {\n return `<lottie-player src=\"${this.lottieMap[severity]}\" background=\"transparent\" speed=\"1\" loop autoplay></lottie-player>`;\n }\n\n render() {\n return (\n <div class={`toast-container toast-container--${this.position}`}>\n {(this.items ?? []).map(item => (\n <div key={item.msg.id} class={{ 'toast-wrapper': true, 'toast-wrapper--leaving': item.leaving }}>\n <div class={`toast toast--${item.msg.severity}`}>\n <div class=\"toast-content\">\n <div class=\"lottie-img\">\n <div class=\"lottie-player-container\" innerHTML={this.getLottieHtml(item.msg.severity)}></div>\n </div>\n <div class=\"info-container\">\n <p class=\"title\">{item.msg.summary}</p>\n {item.msg.detail && <p class=\"description\">{item.msg.detail}</p>}\n </div>\n </div>\n {item.msg.closable && (\n <button class=\"toast-close\" onClick={() => this.remove(item.msg.id!)}>\n <dropi-icon name=\"Close-small\" width=\"20px\" height=\"20px\" color=\"Gray-Gray-400\" />\n </button>\n )}\n </div>\n </div>\n ))}\n </div>\n );\n }\n}\n"],"version":3}