@dropi/ui 0.1.0

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

@@ -0,0 +1,333 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DFz-gwFP.js';
+
+const dropiSelectCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}.custom-select label{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.disabled-label{color:var(--Gray-Gray-400, #858ea6) !important}.asterisk{color:var(--Error-Error-500, #f46a6b)}.dropdown-container{display:flex;align-items:center;gap:4px}.left-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-m, 14px);white-space:nowrap}.select-button{box-sizing:border-box;width:100%;height:40px;padding:0 0.75rem;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.2s ease;gap:8px}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button-error{border-color:var(--Error-Error-500, #f46a6b) !important}.no-border{border:none !important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);background-color:transparent !important;gap:var(--Size-2, 8px)}.no-border:disabled{background-color:transparent !important}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1;min-width:0}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-dropdown-overlay{position:fixed;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);margin:0;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12);z-index:9999;animation:dropdown-open 120ms ease-out}@keyframes dropdown-open{from{opacity:0;transform:scaleY(0.95);transform-origin:top}to{opacity:1;transform:scaleY(1);transform-origin:top}}.option{box-sizing:border-box;width:100%;min-height:40px;border-radius:var(--Border-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:var(--Size-2, 8px);transition:background 0.15s ease}.option:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled,.disabled-option{opacity:0.5;cursor:not-allowed}.option.selected-option:not(.option-radio){background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-group-title{padding:var(--Size-3, 12px) var(--Size-4, 16px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Gray-Gray-500, #69738c);list-style:none}.option-group{padding-left:var(--Size-6, 32px)}.sticky-search{position:sticky;top:calc(-1 * var(--Size-4, 16px));background:var(--Neutral-White, #fff);z-index:10;margin:calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;padding:var(--Size-2, 8px) var(--Size-4, 16px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);list-style:none}.search-wrapper{display:flex;align-items:center;gap:8px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);padding:6px 10px;background:var(--Neutral-White, #fff)}.search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.multi-checkbox{width:18px;height:18px;min-width:18px;border-radius:var(--Border-1, 4px);border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s, border-color 0.15s}.multi-checkbox.checked{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.option-radio{display:flex;align-items:center;gap:12px}.option-radio.selected-option{border-radius:var(--Border-2, 8px);background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-radio.selected-option .option-second-label{color:var(--Primary-Primary-500, #f49a3d)}.radio{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.circle{width:12px;height:12px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.labels-container{display:flex;justify-content:space-between;width:100%;min-width:0}.option-image{width:24px;height:24px;border-radius:60px;object-fit:cover;flex-shrink:0}.small-image{width:20px;height:20px}.option-image-fallback{width:24px;height:24px;border-radius:60px;background:var(--Primary-Primary-500, #f49a3d);color:white;font-size:13px;font-weight:bold;display:flex;justify-content:center;align-items:center;flex-shrink:0}.small-image.option-image-fallback{width:20px;height:20px}.option-second-label{color:var(--Gray-Gray-700, #32394d);font-weight:700;white-space:nowrap}.flag-placeholder{font-size:11px;font-weight:600;color:var(--Gray-Gray-500, #69738c);flex-shrink:0}.select-helper,.select-helper-error{display:flex;gap:var(--Size-1, 4px);align-items:center;margin-top:var(--Size-1, 4px)}.select-helper span{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.select-helper-error span{color:var(--Error-Error-500, #f46a6b);font-size:var(--font-size-xs, 10px)}.no-results{padding:var(--Size-3, 12px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px);list-style:none;text-align:center}`;
+
+const DropiSelect = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiChange = createEvent(this, "dropiChange");
+        this.dropiClear = createEvent(this, "dropiClear");
+        this.dropiSearch = createEvent(this, "dropiSearch");
+        this.dropiScrollEnd = createEvent(this, "dropiScrollEnd");
+        this.dropiKeyEnter = createEvent(this, "dropiKeyEnter");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return getElement(this); }
+    internals;
+    buttonRef;
+    scrollDebounce;
+    hasEmittedScrollEnd = false;
+    lastScrollTop = 0;
+    // ── Props ────────────────────────────────────────────────────
+    label = '';
+    placeholder = 'Seleccionar';
+    /** Array of SelectOption or SelectOptionGroup */
+    options = [];
+    name = '';
+    disabled = false;
+    invalid = false;
+    errorText = '';
+    helperText = '';
+    showObligatory = false;
+    /** Enables text search inside the dropdown */
+    searchEnabled = false;
+    /** Allows selecting multiple options */
+    multiSelect = false;
+    /** Renders trigger without border (inline/dropdown style) */
+    dropdownType = false;
+    /** Show country flags next to option labels */
+    showCountryFlags = false;
+    /** Renders options as radio buttons with optional image */
+    radioOptions = false;
+    /** Placeholder inside the search field */
+    placeHolderSearch = 'Buscar';
+    /** Icon name shown before the trigger label */
+    preIcon = '';
+    /** Pre-select an option by id */
+    defaultSelectedId = '';
+    /** Controlled selected option (single select) */
+    value = null;
+    // ── State ────────────────────────────────────────────────────
+    isOpen = false;
+    selectedOption = null;
+    multiSelected = [];
+    filteredOptions = [];
+    searchTerm = '';
+    dropdownStyle = {
+        top: '0px', left: '0px', width: '0px',
+    };
+    // ── Events ───────────────────────────────────────────────────
+    /** Emitted when an option is selected (single) or selection changes (multi) */
+    dropiChange;
+    /** Emitted when the selection is cleared */
+    dropiClear;
+    /** Emitted on search input */
+    dropiSearch;
+    /** Emitted when the list is scrolled to the end */
+    dropiScrollEnd;
+    /** Emitted on Enter key inside search */
+    dropiKeyEnter;
+    // ── Lifecycle ────────────────────────────────────────────────
+    componentWillLoad() {
+        this.normalizeOptions();
+        this.filteredOptions = [...this.options];
+        this.applyDefaultSelection();
+    }
+    optionsChanged() {
+        this.normalizeOptions();
+        this.filteredOptions = [...this.options];
+        this.applyDefaultSelection();
+    }
+    normalizeOptions() {
+        if (typeof this.options === 'string') {
+            try {
+                this.options = JSON.parse(this.options);
+            }
+            catch (_) {
+                this.options = [];
+            }
+        }
+    }
+    defaultChanged(newId) {
+        this.applyDefaultSelection(newId);
+    }
+    valueChanged(v) {
+        this.selectedOption = v;
+        this.internals.setFormValue(v ? String(v.id) : '');
+    }
+    // ── Public Methods ───────────────────────────────────────────
+    /** Select an option by its id */
+    async setById(id) {
+        const opt = this.options.find(o => o.id === id || String(o.id) === String(id));
+        if (opt)
+            this.selectOption(opt);
+    }
+    /** Select an option by its label */
+    async setByLabel(label) {
+        const opt = this.options.find(o => o.label === label);
+        if (opt)
+            this.selectOption(opt);
+    }
+    /** Clear the current selection */
+    async clearSelection() {
+        this.selectedOption = null;
+        this.multiSelected = [];
+        this.internals.setFormValue('');
+        this.dropiClear.emit();
+    }
+    /** Reset multi-select state and show a placeholder label */
+    async resetMultiSelect(_placeholder) {
+        this.multiSelected = [];
+        this.internals.setFormValue('');
+    }
+    // ── Click outside ────────────────────────────────────────────
+    handleOutsideClick(e) {
+        if (!this.el.contains(e.target)) {
+            this.closeDropdown();
+        }
+    }
+    // ── Helpers ──────────────────────────────────────────────────
+    applyDefaultSelection(id) {
+        const targetId = id ?? this.defaultSelectedId;
+        if (targetId === '' || targetId === undefined || targetId === null)
+            return;
+        const flat = this.flatOptions();
+        const found = flat.find(o => o.id === targetId || String(o.id) === String(targetId));
+        if (found) {
+            this.selectedOption = found;
+            this.internals.setFormValue(String(found.id));
+        }
+    }
+    flatOptions() {
+        if (!this.options?.length)
+            return [];
+        if ('category' in this.options[0]) {
+            return this.options.flatMap(g => g.options);
+        }
+        return this.options;
+    }
+    get isGrouped() {
+        return this.options?.length > 0 && 'category' in this.options[0];
+    }
+    get triggerLabel() {
+        if (this.multiSelect) {
+            return this.multiSelected.length
+                ? this.multiSelected.map(o => o.label).join(', ')
+                : this.placeholder;
+        }
+        if (this.selectedOption) {
+            return this.showCountryFlags && this.selectedOption.shortLabel
+                ? this.selectedOption.shortLabel
+                : this.selectedOption.label;
+        }
+        return this.placeholder;
+    }
+    // ── Dropdown positioning ─────────────────────────────────────
+    openDropdown() {
+        if (this.disabled)
+            return;
+        const rect = this.buttonRef.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const dropdownHeight = 250;
+        const spaceBelow = viewportHeight - rect.bottom;
+        const top = spaceBelow >= dropdownHeight
+            ? rect.bottom + 4
+            : rect.top - dropdownHeight - 4;
+        this.dropdownStyle = {
+            top: `${top}px`,
+            left: `${rect.left}px`,
+            width: `${rect.width}px`,
+        };
+        this.isOpen = true;
+        if (this.searchEnabled) {
+            setTimeout(() => {
+                const searchInput = this.el.shadowRoot?.querySelector('.search-input');
+                searchInput?.focus();
+            }, 50);
+        }
+    }
+    closeDropdown() {
+        this.isOpen = false;
+        this.searchTerm = '';
+        this.filteredOptions = [...this.options];
+    }
+    toggleDropdown() {
+        this.isOpen ? this.closeDropdown() : this.openDropdown();
+    }
+    // ── Option selection ─────────────────────────────────────────
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        if (this.multiSelect) {
+            const idx = this.multiSelected.findIndex(o => o.id === option.id);
+            if (idx >= 0) {
+                this.multiSelected = this.multiSelected.filter(o => o.id !== option.id);
+            }
+            else {
+                this.multiSelected = [...this.multiSelected, option];
+            }
+            this.internals.setFormValue(this.multiSelected.map(o => o.id).join(','));
+            this.dropiChange.emit([...this.multiSelected]);
+        }
+        else {
+            this.selectedOption = option;
+            this.internals.setFormValue(String(option.id));
+            this.dropiChange.emit(option);
+            this.closeDropdown();
+        }
+    }
+    isOptionChecked(option) {
+        return this.multiSelected.some(o => o.id === option.id);
+    }
+    // ── Search ───────────────────────────────────────────────────
+    handleSearch(term) {
+        this.searchTerm = term;
+        this.dropiSearch.emit(term);
+        const lower = term.toLowerCase().trim();
+        if (!lower) {
+            this.filteredOptions = [...this.options];
+            return;
+        }
+        if (this.isGrouped) {
+            this.filteredOptions = this.options
+                .map(g => ({ ...g, options: g.options.filter(o => o.label.toLowerCase().includes(lower)) }))
+                .filter(g => g.options.length > 0);
+        }
+        else {
+            this.filteredOptions = this.options.filter(o => o.label.toLowerCase().includes(lower));
+        }
+    }
+    // ── Scroll to end ─────────────────────────────────────────────
+    handleScroll(e) {
+        const el = e.target;
+        clearTimeout(this.scrollDebounce);
+        this.scrollDebounce = setTimeout(() => {
+            if (!el)
+                return;
+            const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+            const threshold = Math.min(50, el.clientHeight / 2);
+            if (el.scrollTop < this.lastScrollTop)
+                this.hasEmittedScrollEnd = false;
+            this.lastScrollTop = el.scrollTop;
+            if (distFromBottom <= threshold && !this.hasEmittedScrollEnd) {
+                this.dropiScrollEnd.emit();
+                this.hasEmittedScrollEnd = true;
+                setTimeout(() => { this.hasEmittedScrollEnd = false; }, 1000);
+            }
+        }, 100);
+    }
+    // ── Render helpers ───────────────────────────────────────────
+    renderTrigger() {
+        const isCompleted = this.multiSelect ? this.multiSelected.length > 0 : !!this.selectedOption;
+        const iconColor = this.disabled ? 'Gray-Gray-300' : this.dropdownType ? 'Gray-Gray-600' : 'Gray-Gray-400';
+        const iconSize = this.dropdownType ? '24px' : '20px';
+        return (h("button", { type: "button", class: {
+                'select-button': true,
+                'select-completed': isCompleted,
+                'select-button-error': this.invalid,
+                'no-border': this.dropdownType,
+            }, disabled: this.disabled, ref: el => (this.buttonRef = el), onClick: () => this.toggleDropdown() }, h("div", { class: {
+                'button-content': true,
+                'option-radio': this.radioOptions && !!this.selectedOption && !this.multiSelect,
+            } }, this.preIcon && (h("dropi-icon", { name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-500" })), this.radioOptions && this.selectedOption && !this.multiSelect && [
+            this.selectedOption.imageUrl && !this.selectedOption.isFallback
+                ? h("img", { class: "option-image small-image", src: this.selectedOption.imageUrl, alt: "", onError: () => {
+                        if (this.selectedOption)
+                            this.selectedOption = { ...this.selectedOption, isFallback: true };
+                    } })
+                : this.selectedOption.isFallback
+                    ? h("span", { class: "option-image-fallback small-image" }, this.selectedOption.label.charAt(0).toUpperCase())
+                    : null,
+            h("div", { class: "labels-container elipsis" }, h("span", null, this.selectedOption.label), this.selectedOption.secondLabel && h("span", { class: "option-second-label" }, this.selectedOption.secondLabel)),
+        ], !(this.radioOptions && this.selectedOption && !this.multiSelect) && (h("div", { class: "elipsis" }, this.triggerLabel))), h("dropi-icon", { name: this.isOpen ? 'Dropdown-up' : 'Dropdown-down', width: iconSize, height: iconSize, color: iconColor })));
+    }
+    renderOption(option) {
+        const isSelected = this.multiSelect
+            ? this.isOptionChecked(option)
+            : this.selectedOption?.id === option.id;
+        return (h("li", { key: option.id }, h("button", { type: "button", class: {
+                option: true,
+                'option-radio': this.radioOptions,
+                'option-with-flag': this.showCountryFlags && !!option.countryCode,
+                'disabled-option': !!option.disabled,
+                'selected-option': isSelected,
+            }, disabled: option.disabled, onClick: () => this.selectOption(option) }, this.multiSelect && (h("span", { class: { 'multi-checkbox': true, checked: isSelected } }, isSelected && (h("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M20.6 5.7L9.1 17.2c-.2.2-.5.3-.8.3s-.6-.1-.8-.3L3 12.8c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l3.9 3.9L19.2 4.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4z", fill: "white" }))))), this.radioOptions && (h("div", { class: { radio: true, selected: isSelected } }, isSelected && h("div", { class: "circle" }))), !this.radioOptions && option.preIcon && (h("dropi-icon", { name: option.preIcon, width: "20px", height: "20px", color: "Gray-Gray-500" })), this.radioOptions && option.imageUrl && !option.isFallback && (h("img", { class: "option-image", src: option.imageUrl, alt: "", onError: () => { option.isFallback = true; this.options = [...this.options]; } })), this.radioOptions && option.isFallback && (h("span", { class: "option-image-fallback" }, option.label.charAt(0).toUpperCase())), this.showCountryFlags && option.countryCode && (h("span", { class: "flag-placeholder" }, option.countryCode)), this.radioOptions
+            ? (h("div", { class: "labels-container" }, h("span", { class: "elipsis" }, option.label), option.secondLabel && h("span", { class: "option-second-label" }, option.secondLabel)))
+            : (h("span", { class: "elipsis" }, this.showCountryFlags && option.shortLabel ? option.shortLabel : option.label)))));
+    }
+    renderDropdown() {
+        if (!this.isOpen)
+            return null;
+        return (h("ul", { class: "select-dropdown-overlay", style: this.dropdownStyle, onScroll: (e) => this.handleScroll(e) }, this.searchEnabled && (h("li", { class: "sticky-search" }, h("div", { class: "search-wrapper" }, h("dropi-icon", { name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { class: "search-input", type: "text", placeholder: this.placeHolderSearch, value: this.searchTerm, onInput: (e) => this.handleSearch(e.target.value), onKeyDown: (e) => {
+                if (e.key === 'Enter')
+                    this.dropiKeyEnter.emit(e);
+            } }), this.searchTerm && (h("button", { type: "button", class: "search-clear", onClick: () => this.handleSearch('') }, h("dropi-icon", { name: "Close", width: "14px", height: "14px", color: "Gray-Gray-400" })))))), this.isGrouped && this.filteredOptions.map(group => [
+            h("li", { class: "option-group-title" }, group.category),
+            ...group.options.map(opt => (h("li", { key: opt.id }, h("button", { type: "button", class: { option: true, 'option-group': true, 'disabled-option': !!opt.disabled }, disabled: opt.disabled, onClick: () => this.selectOption(opt) }, opt.preIcon && h("dropi-icon", { name: opt.preIcon, width: "20px", height: "20px", color: "Gray-Gray-500" }), h("span", { class: "elipsis" }, opt.label))))),
+        ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (h("li", { class: "no-results" }, "Sin resultados"))));
+    }
+    render() {
+        return (h("div", { key: '94383b3267955dcb8d1a6c523730e291976157b2', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '4ff14d77b301a275f6c608d227361ff2829ac7a1', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '8345af7646d8cea8e66c996f0eb4abf210c9d211', class: "asterisk" }, " *"))), h("div", { key: '290a9521e39c2e1bdb1a8aacf35b2b22bf4966de', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: 'a9ad2741e23d31b3b0dc69a3aa89f54eaa291b04', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (h("div", { key: '8dd7cd895c1124b07020f396ac316390d4ee8cc8', class: "select-helper" }, h("span", { key: 'cdcaeb30b27baf4441d6ef87f6f553fd2b73e145' }, this.helperText))), this.invalid && this.errorText && (h("div", { key: '8e1a4da603de7b6c730a9946b63652fbe5e68321', class: "select-helper-error" }, h("dropi-icon", { key: 'f831c9f543c4f4be52d969f1d26f7d7e8816d08f', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: '1eefbade098b9743b23abee3e43836ed33ecbadb' }, this.errorText))), this.renderDropdown()));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "options": [{
+                "optionsChanged": 0
+            }],
+        "defaultSelectedId": [{
+                "defaultChanged": 0
+            }],
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+DropiSelect.style = dropiSelectCss();
+
+export { DropiSelect as dropi_select };

package/dist/esm/dropi-switch.entry.js

@@ -0,0 +1,28 @@
+import { r as registerInstance, c as createEvent, h } from './index-DFz-gwFP.js';
+
+const dropiSwitchCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.toggle-switch{position:relative;display:inline-block;width:40px;height:21px;margin-bottom:0;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--Gray-Gray-200, #c3c9d9);transition:0.4s;border-radius:34px}.slider::before{position:absolute;content:'';height:17px;width:17px;left:3px;bottom:2px;background-color:var(--Neutral-White, #ffffff);transition:0.4s;border-radius:50%}input:checked+.slider{background-color:var(--Primary-Primary-500, #f49a3d)}input:checked+.slider::before{transform:translateX(17px)}:host([disabled]) .toggle-switch{cursor:not-allowed;opacity:0.5}`;
+
+const DropiSwitch = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiChange = createEvent(this, "dropiChange");
+    }
+    /** Whether the switch is on */
+    isChecked = false;
+    /** Whether the switch is disabled */
+    disabled = false;
+    /** Emitted when the toggle state changes */
+    dropiChange;
+    onToggleChange(event) {
+        const input = event.target;
+        this.isChecked = input.checked;
+        this.dropiChange.emit(this.isChecked);
+    }
+    render() {
+        return (h("label", { key: '336fa18042e7b128d2e6e0b680ddd67e30ce917e', class: "toggle-switch" }, h("input", { key: '57e2fa77fa9b49341b03f6ff041ce4987a6b277b', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: 'e7617599947289a6e21b9db573dd7bec80dbeb43', class: "slider" })));
+    }
+    static get formAssociated() { return true; }
+};
+DropiSwitch.style = dropiSwitchCss();
+
+export { DropiSwitch as dropi_switch };

package/dist/esm/dropi-tag.entry.js

@@ -0,0 +1,66 @@
+import { r as registerInstance, h } from './index-DFz-gwFP.js';
+
+const dropiTagCss = () => `:host{display:inline-block}*,*::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;margin-right:4px}@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: '7044b9b910b9216c8674f5aa21afc8ec79310af2', class: "container-chips" }, h("div", { key: '1097981d0e3709a57a95e4a7c87937a24930e416', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: 'ba69aac6bb39a5cdc27d3d0ff2cc949cff1fb1a1', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: '94aa2c494391b45341f14167bed97fa73f389b69' }, this.text))));
+    }
+    static get watchers() { return {
+        "type": [{
+                "propsChanged": 0
+            }],
+        "state": [{
+                "propsChanged": 0
+            }]
+    }; }
+};
+DropiTag.style = dropiTagCss();
+
+export { DropiTag as dropi_tag };

package/dist/esm/dropi-text-area.entry.js

@@ -0,0 +1,101 @@
+import { r as registerInstance, c as createEvent, h } from './index-DFz-gwFP.js';
+
+const dropiTextAreaCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.textarea-wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:4px}.textarea-wrapper label{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.asterisk{color:var(--Error-Error-500, #f46a6b)}.textarea-container{position:relative}textarea.form-control{box-sizing:border-box;width:100%;overflow:auto;padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:var(--Neutral-White, #fff);transition:border-color 0.3s ease-in-out;outline:none;appearance:none}textarea.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}textarea.form-control:focus::placeholder{color:var(--Gray-Gray-400, #858ea6)}textarea.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}textarea.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}textarea.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.char-counter{position:absolute;bottom:10px;right:16px;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c);pointer-events:none}.form-control-helper{display:flex;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}`;
+
+const DropiTextArea = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiInput = createEvent(this, "dropiInput");
+        this.dropiChange = createEvent(this, "dropiChange");
+        this.dropiFocus = createEvent(this, "dropiFocus");
+        this.dropiBlur = createEvent(this, "dropiBlur");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    internals;
+    /** Input id. Defaults to label. */
+    inputId = '';
+    /** Name for native form submission */
+    name = '';
+    /** Label shown above the textarea */
+    label = '';
+    /** Placeholder text */
+    placeholder = '';
+    /** Current value (controlled) */
+    value = '';
+    /** Max character length */
+    maxlength;
+    /** Min character length */
+    minlength = 0;
+    /** Number of visible rows */
+    rows = 4;
+    /** Resize behavior */
+    resize = 'vertical';
+    /** Disable the textarea */
+    disabled = false;
+    /** Mark as required */
+    required = false;
+    /** Show the required asterisk */
+    showAsterisk = false;
+    /** Helper / error text below the field */
+    helperText = '';
+    /** Mark the field as invalid (consumer-controlled) */
+    invalid = false;
+    touched = false;
+    /** Emitted on every keystroke */
+    dropiInput;
+    /** Emitted on blur */
+    dropiChange;
+    dropiFocus;
+    dropiBlur;
+    valueChanged(val) {
+        this.internals.setFormValue(val);
+    }
+    componentWillLoad() {
+        this.internals.setFormValue(this.value ?? '');
+    }
+    handleInput(e) {
+        const val = e.target.value;
+        this.value = val;
+        this.internals.setFormValue(val);
+        this.dropiInput.emit(val);
+    }
+    handleBlur() {
+        this.touched = true;
+        this.dropiChange.emit(this.value);
+        this.dropiBlur.emit();
+    }
+    get resolvedId() {
+        return this.inputId || this.label;
+    }
+    get isInvalid() {
+        return this.invalid && this.touched;
+    }
+    get charCount() {
+        return this.value?.length ?? 0;
+    }
+    render() {
+        const showAsterisk = this.required && this.showAsterisk && !this.disabled;
+        const showHelper = this.helperText || this.isInvalid;
+        return (h("div", { key: 'b35dec5dc3d7ab2992542f4008b97c330c060fbf', class: "textarea-wrapper" }, this.label && (h("label", { key: '89c67611b34012f24fc8377b181215f20ff5b626', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && h("span", { key: '74f091ab3e5aee1162943e54795e69b789ff1a84', class: "asterisk" }, " *"))), h("div", { key: '4a1193b310160f3a782692faa798390a2c60f32d', class: "textarea-container" }, h("textarea", { key: '68f62069a7b768cbfa2263ff66970b79a2fca007', id: this.resolvedId, class: {
+                'form-control': true,
+                'Body-M-Regular': true,
+                'form-control-valid': !this.isInvalid && this.touched && !!this.value,
+                'form-control-invalid': this.isInvalid,
+            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxlength, minLength: this.minlength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxlength > 0 && (h("div", { key: '71596e1da89db842a391efca26cdef906b4e9982', class: "char-counter" }, this.charCount, "/", this.maxlength))), showHelper && (h("div", { key: '58f1124e504b85e5fdb2737f99524e4334e2dac5', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '9dd89e05639d924d96e0d117ee677461d30801e1', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '823ad2ae0b9e6337a347c83075123b3af675d1a4', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.helperText)))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+DropiTextArea.style = dropiTextAreaCss();
+
+export { DropiTextArea as dropi_text_area };

package/dist/esm/dropi-ui.js

@@ -0,0 +1,20 @@
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-DFz-gwFP.js';
+export { s as setNonce } from './index-DFz-gwFP.js';
+
+/*
+ Stencil Client Patch Browser v4.43.3 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["dropi-icon",[[513,"dropi-icon",{"name":[1],"width":[1],"height":[1],"color":[1]},null,{"color":[{"colorChanged":0}]}]]],["dropi-button",[[769,"dropi-button",{"type":[1],"severity":[1],"size":[1],"state":[1],"preIcon":[1,"pre-icon"],"postIcon":[1,"post-icon"],"text":[1]}]]],["dropi-input",[[577,"dropi-input",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"fixedLabel":[4,"fixed-label"],"inputMode":[1,"input-mode"],"passwordInput":[4,"password-input"],"moneyFormat":[4,"money-format"],"thousandSeparator":[4,"thousand-separator"],"onlyNumbers":[4,"only-numbers"],"allowDecimals":[4,"allow-decimals"],"onlyLetters":[4,"only-letters"],"icon":[1],"iconColor":[1,"icon-color"],"invalid":[4],"helperText":[1,"helper-text"],"showHelperOnlyOnError":[4,"show-helper-only-on-error"],"showPassword":[32],"touched":[32]},null,{"value":[{"valueChanged":0}],"disabled":[{"disabledChanged":0}]}]]],["dropi-select",[[577,"dropi-select",{"label":[1],"placeholder":[1],"options":[1040],"name":[1],"disabled":[516],"invalid":[4],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"showObligatory":[4,"show-obligatory"],"searchEnabled":[4,"search-enabled"],"multiSelect":[4,"multi-select"],"dropdownType":[4,"dropdown-type"],"showCountryFlags":[4,"show-country-flags"],"radioOptions":[4,"radio-options"],"placeHolderSearch":[1,"place-holder-search"],"preIcon":[1,"pre-icon"],"defaultSelectedId":[1032,"default-selected-id"],"value":[1040],"isOpen":[32],"selectedOption":[32],"multiSelected":[32],"filteredOptions":[32],"searchTerm":[32],"dropdownStyle":[32],"setById":[64],"setByLabel":[64],"clearSelection":[64],"resetMultiSelect":[64]},[[4,"click","handleOutsideClick"]],{"options":[{"optionsChanged":0}],"defaultSelectedId":[{"defaultChanged":0}],"value":[{"valueChanged":0}]}]]],["dropi-tag",[[513,"dropi-tag",{"type":[1],"state":[1],"showIcon":[4,"show-icon"],"icon":[1],"text":[1]},null,{"type":[{"propsChanged":0}],"state":[{"propsChanged":0}]}]]],["dropi-text-area",[[577,"dropi-text-area",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"minlength":[2],"rows":[2],"resize":[1],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"helperText":[1,"helper-text"],"invalid":[4],"touched":[32]},null,{"value":[{"valueChanged":0}]}]]],["dropi-badge",[[513,"dropi-badge",{"state":[1]}]]],["dropi-checkbox",[[577,"dropi-checkbox",{"checked":[1540],"disabled":[516]}]]],["dropi-radio-button",[[577,"dropi-radio-button",{"label":[1],"name":[1],"inputId":[1,"input-id"],"checked":[1540],"resetTrigger":[4,"reset-trigger"]},null,{"resetTrigger":[{"onResetTrigger":0}]}]]],["dropi-switch",[[577,"dropi-switch",{"isChecked":[1540,"is-checked"],"disabled":[516]}]]]], options);
+});