@dropi/ui 0.1.20 → 0.1.22

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

@@ -1,17 +1,17 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.js');
 
-const dropiSelectCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}.custom-select label{display:block;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.disabled-label{color:var(--Gray-Gray-400, #858ea6) !important}.asterisk{color:var(--Error-Error-500, #f46a6b)}.dropdown-container{display:flex;align-items:center;gap:4px}.left-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-m, 14px);white-space:nowrap}.select-button{box-sizing:border-box;width:100%;height:40px;padding:0 0.75rem;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #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 dropiSelectCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}.custom-select label{display:block;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.disabled-label{color:var(--Gray-Gray-400, #858ea6) !important}.asterisk{color:var(--Error-Error-500, #f46a6b)}.dropdown-container{display:flex;align-items:center;gap:4px}.left-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-m, 14px);white-space:nowrap}.select-button{box-sizing:border-box;width:100%;height:40px;padding:0 0.75rem;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.2s ease;gap:8px}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button-error{border-color:var(--Error-Error-500, #f46a6b) !important}.no-border{border:none !important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);background-color:transparent !important;gap:var(--Size-2, 8px)}.no-border:disabled{background-color:transparent !important}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1;min-width:0}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-dropdown-overlay{position:fixed;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);margin:0;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12);z-index:9999;animation:dropdown-open 120ms ease-out}@keyframes dropdown-open{from{opacity:0;transform:scaleY(0.95);transform-origin:top}to{opacity:1;transform:scaleY(1);transform-origin:top}}.option{box-sizing:border-box;width:100%;min-height:40px;border-radius:var(--Border-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:var(--Size-2, 8px);transition:background 0.15s ease}.option:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled,.disabled-option{opacity:0.5;cursor:not-allowed}.option.selected-option:not(.option-radio){background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-group-title{padding:var(--Size-3, 12px) var(--Size-4, 16px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Gray-Gray-500, #69738c);list-style:none}.option-group{padding-left:var(--Size-6, 32px)}.sticky-search{position:sticky;top:calc(-1 * var(--Size-4, 16px));background:var(--Neutral-White, #ffffff);z-index:10;margin:calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;padding:var(--Size-2, 8px) var(--Size-4, 16px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);list-style:none}.search-wrapper{display:flex;align-items:center;gap:8px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);padding:6px 10px;background:var(--Neutral-White, #ffffff)}.search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.multi-checkbox{width:18px;height:18px;min-width:18px;border-radius:var(--Border-1, 4px);border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s, border-color 0.15s}.multi-checkbox.checked{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.option-radio{display:flex;align-items:center;gap:12px}.option-radio.selected-option{border-radius:var(--Border-2, 8px);background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-radio.selected-option .option-second-label{color:var(--Primary-Primary-500, #f49a3d)}.radio{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.circle{width:12px;height:12px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.labels-container{display:flex;justify-content:space-between;width:100%;min-width:0}.option-image{width:24px;height:24px;border-radius:60px;object-fit:cover;flex-shrink:0}.small-image{width:20px;height:20px}.option-image-fallback{width:24px;height:24px;border-radius:60px;background:var(--Primary-Primary-500, #f49a3d);color:white;font-size:13px;font-weight:var(--font-weight-bold);display:flex;justify-content:center;align-items:center;flex-shrink:0}.small-image.option-image-fallback{width:20px;height:20px}.option-second-label{color:var(--Gray-Gray-700, #32394d);font-weight:var(--font-weight-bold);white-space:nowrap}.flag-placeholder{font-size:11px;font-weight:var(--font-weight-semibold);color:var(--Gray-Gray-500, #69738c);flex-shrink:0}.select-helper,.select-helper-error{display:flex;gap:var(--Size-1, 4px);align-items:center;margin-top:var(--Size-1, 4px)}.select-helper span{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.select-helper-error span{color:var(--Error-Error-500, #f46a6b);font-size:var(--font-size-xs, 10px)}.no-results{padding:var(--Size-3, 12px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px);list-style:none;text-align:center}`;
 
 const DropiSelect = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiChange = index.createEvent(this, "dropiChange", 7);
-        this.dropiClear = index.createEvent(this, "dropiClear", 7);
-        this.dropiSearch = index.createEvent(this, "dropiSearch", 7);
-        this.dropiScrollEnd = index.createEvent(this, "dropiScrollEnd", 7);
-        this.dropiKeyEnter = index.createEvent(this, "dropiKeyEnter", 7);
+        this.onChangeSelect = index.createEvent(this, "onChangeSelect", 7);
+        this.onClear = index.createEvent(this, "onClear", 7);
+        this.onSearch = index.createEvent(this, "onSearch", 7);
+        this.scrolledToEnd = index.createEvent(this, "scrolledToEnd", 7);
+        this.onKeyEnter = index.createEvent(this, "onKeyEnter", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -28,14 +28,14 @@ const DropiSelect = class {
     lastScrollTop = 0;
     // ── Props ────────────────────────────────────────────────────
     label = '';
-    placeholder = 'Seleccionar';
+    placeholder = 'Select';
     /** Array of SelectOption or SelectOptionGroup */
     options = [];
     name = '';
     disabled = false;
-    invalid = false;
+    hasError = false;
     errorText = '';
-    helperText = '';
+    textHelper = '';
     showObligatory = false;
     /** Enables text search inside the dropdown */
     searchEnabled = false;
@@ -52,12 +52,22 @@ const DropiSelect = class {
     /** Icon name shown before the trigger label */
     preIcon = '';
     /** Pre-select an option by id */
-    defaultSelectedId = '';
-    /** Controlled selected option (single select) */
-    value = null;
+    defaultSelectedId;
+    /** Controlled selected option (single select) - matches Angular 'selectedOption' */
+    selectedOption = null;
+    /** Custom CSS class for the dropdown overlay */
+    overlayClass = '';
+    /**
+     * Convenience object prop — matches Angular `selectProperties: SelectProperties`.
+     * Fields: label, placeholder, options, showObligatory, textHelper,
+     * searchEnabled, multiSelect, dropdownType, hasError, errorText,
+     * radioOptions, preIcon.
+     * When provided, its non-null fields override individual props.
+     */
+    selectProperties = null;
     // ── State ────────────────────────────────────────────────────
     isOpen = false;
-    selectedOption = null;
+    _selectedOption = null;
     multiSelected = [];
     filteredOptions = [];
     searchTerm = '';
@@ -65,28 +75,62 @@ const DropiSelect = class {
         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;
+    /** Emitted when an option is selected — matches Angular 'onChangeSelect' */
+    onChangeSelect;
+    /** Emitted when the selection is cleared — matches Angular 'onClear' */
+    onClear;
+    /** Emitted on search input — matches Angular 'onSearch' */
+    onSearch;
+    /** Emitted when the list is scrolled to the end — matches Angular 'scrolledToEnd' */
+    scrolledToEnd;
+    /** Emitted on Enter key inside search — matches Angular 'onKeyEnter' */
+    onKeyEnter;
     // ── Lifecycle ────────────────────────────────────────────────
     componentWillLoad() {
+        if (this.selectProperties)
+            this.selectPropertiesChanged(this.selectProperties);
         this.normalizeOptions();
         this.filteredOptions = [...this.options];
         this.applyDefaultSelection();
     }
+    selectPropertiesChanged(val) {
+        if (!val)
+            return;
+        if (val.label !== undefined)
+            this.label = val.label;
+        if (val.placeholder !== undefined)
+            this.placeholder = val.placeholder;
+        if (val.options !== undefined)
+            this.options = val.options;
+        if (val.showObligatory !== undefined)
+            this.showObligatory = val.showObligatory;
+        if (val.textHelper !== undefined)
+            this.textHelper = val.textHelper;
+        if (val.searchEnabled !== undefined)
+            this.searchEnabled = val.searchEnabled;
+        if (val.multiSelect !== undefined)
+            this.multiSelect = val.multiSelect;
+        if (val.dropdownType !== undefined)
+            this.dropdownType = val.dropdownType;
+        if (val.hasError !== undefined)
+            this.hasError = val.hasError;
+        if (val.errorText !== undefined)
+            this.errorText = val.errorText;
+        if (val.radioOptions !== undefined)
+            this.radioOptions = val.radioOptions;
+        if (val.preIcon !== undefined)
+            this.preIcon = val.preIcon;
+    }
     optionsChanged() {
         this.normalizeOptions();
         this.filteredOptions = [...this.options];
         this.applyDefaultSelection();
     }
     normalizeOptions() {
+        if (!this.options) {
+            this.options = [];
+            return;
+        }
         if (typeof this.options === 'string') {
             try {
                 this.options = JSON.parse(this.options);
@@ -100,7 +144,7 @@ const DropiSelect = class {
         this.applyDefaultSelection(newId);
     }
     valueChanged(v) {
-        this.selectedOption = v;
+        this._selectedOption = v;
         this.internals.setFormValue(v ? String(v.id) : '');
     }
     // ── Public Methods ───────────────────────────────────────────
@@ -118,10 +162,10 @@ const DropiSelect = class {
     }
     /** Clear the current selection */
     async clearSelection() {
-        this.selectedOption = null;
+        this._selectedOption = null;
         this.multiSelected = [];
         this.internals.setFormValue('');
-        this.dropiClear.emit();
+        this.onClear.emit();
     }
     /** Reset multi-select state and show a placeholder label */
     async resetMultiSelect(_placeholder) {
@@ -130,7 +174,7 @@ const DropiSelect = class {
     }
     // ── Click outside ────────────────────────────────────────────
     handleOutsideClick(e) {
-        if (!this.el.contains(e.target)) {
+        if (this.isOpen && !e.composedPath().includes(this.el)) {
             this.closeDropdown();
         }
     }
@@ -142,7 +186,7 @@ const DropiSelect = class {
         const flat = this.flatOptions();
         const found = flat.find(o => o.id === targetId || String(o.id) === String(targetId));
         if (found) {
-            this.selectedOption = found;
+            this._selectedOption = found;
             this.internals.setFormValue(String(found.id));
         }
     }
@@ -163,10 +207,10 @@ const DropiSelect = class {
                 ? this.multiSelected.map(o => o.label).join(', ')
                 : this.placeholder;
         }
-        if (this.selectedOption) {
-            return this.showCountryFlags && this.selectedOption.shortLabel
-                ? this.selectedOption.shortLabel
-                : this.selectedOption.label;
+        if (this._selectedOption) {
+            return this.showCountryFlags && this._selectedOption.shortLabel
+                ? this._selectedOption.shortLabel
+                : this._selectedOption.label;
         }
         return this.placeholder;
     }
@@ -215,12 +259,12 @@ const DropiSelect = class {
                 this.multiSelected = [...this.multiSelected, option];
             }
             this.internals.setFormValue(this.multiSelected.map(o => o.id).join(','));
-            this.dropiChange.emit([...this.multiSelected]);
+            this.onChangeSelect.emit([...this.multiSelected]);
         }
         else {
-            this.selectedOption = option;
+            this._selectedOption = option;
             this.internals.setFormValue(String(option.id));
-            this.dropiChange.emit(option);
+            this.onChangeSelect.emit(option);
             this.closeDropdown();
         }
     }
@@ -230,7 +274,7 @@ const DropiSelect = class {
     // ── Search ───────────────────────────────────────────────────
     handleSearch(term) {
         this.searchTerm = term;
-        this.dropiSearch.emit(term);
+        this.onSearch.emit(term);
         const lower = term.toLowerCase().trim();
         if (!lower) {
             this.filteredOptions = [...this.options];
@@ -258,7 +302,7 @@ const DropiSelect = class {
                 this.hasEmittedScrollEnd = false;
             this.lastScrollTop = el.scrollTop;
             if (distFromBottom <= threshold && !this.hasEmittedScrollEnd) {
-                this.dropiScrollEnd.emit();
+                this.scrolledToEnd.emit();
                 this.hasEmittedScrollEnd = true;
                 setTimeout(() => { this.hasEmittedScrollEnd = false; }, 1000);
             }
@@ -266,33 +310,33 @@ const DropiSelect = class {
     }
     // ── Render helpers ───────────────────────────────────────────
     renderTrigger() {
-        const isCompleted = this.multiSelect ? this.multiSelected.length > 0 : !!this.selectedOption;
+        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 (index.h("button", { type: "button", class: {
                 'select-button': true,
                 'select-completed': isCompleted,
-                'select-button-error': this.invalid,
+                'select-button-error': this.hasError,
                 'no-border': this.dropdownType,
             }, disabled: this.disabled, ref: el => (this.buttonRef = el), onClick: () => this.toggleDropdown() }, index.h("div", { class: {
                 'button-content': true,
-                'option-radio': this.radioOptions && !!this.selectedOption && !this.multiSelect,
-            } }, this.preIcon && (index.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
-                ? index.h("img", { class: "option-image small-image", src: this.selectedOption.imageUrl, alt: "", onError: () => {
-                        if (this.selectedOption)
-                            this.selectedOption = { ...this.selectedOption, isFallback: true };
+                'option-radio': this.radioOptions && !!this._selectedOption && !this.multiSelect,
+            } }, this.preIcon && (index.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
+                ? index.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
-                    ? index.h("span", { class: "option-image-fallback small-image" }, this.selectedOption.label.charAt(0).toUpperCase())
+                : this._selectedOption.isFallback
+                    ? index.h("span", { class: "option-image-fallback small-image" }, this._selectedOption.label.charAt(0).toUpperCase())
                     : null,
-            index.h("div", { class: "labels-container elipsis" }, index.h("span", null, this.selectedOption.label), this.selectedOption.secondLabel && index.h("span", { class: "option-second-label" }, this.selectedOption.secondLabel)),
-        ], !(this.radioOptions && this.selectedOption && !this.multiSelect) && (index.h("div", { class: "elipsis" }, this.triggerLabel))), index.h("dropi-icon", { name: this.isOpen ? 'Dropdown-up' : 'Dropdown-down', width: iconSize, height: iconSize, color: iconColor })));
+            index.h("div", { class: "labels-container elipsis" }, index.h("span", null, this._selectedOption.label), this._selectedOption.secondLabel && index.h("span", { class: "option-second-label" }, this._selectedOption.secondLabel)),
+        ], !(this.radioOptions && this._selectedOption && !this.multiSelect) && (index.h("div", { class: "elipsis" }, this.triggerLabel))), index.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;
+            : this._selectedOption?.id === option.id;
         return (index.h("li", { key: option.id }, index.h("button", { type: "button", class: {
                 option: true,
                 'option-radio': this.radioOptions,
@@ -306,26 +350,29 @@ const DropiSelect = class {
     renderDropdown() {
         if (!this.isOpen)
             return null;
-        return (index.h("ul", { class: "select-dropdown-overlay", style: this.dropdownStyle, onScroll: (e) => this.handleScroll(e) }, this.searchEnabled && (index.h("li", { class: "sticky-search" }, index.h("div", { class: "search-wrapper" }, index.h("dropi-icon", { name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), index.h("input", { class: "search-input", type: "text", placeholder: this.placeHolderSearch, value: this.searchTerm, onInput: (e) => this.handleSearch(e.target.value), onKeyDown: (e) => {
+        return (index.h("ul", { class: `select-dropdown-overlay ${this.overlayClass}`, style: this.dropdownStyle, onScroll: (e) => this.handleScroll(e) }, this.searchEnabled && (index.h("li", { class: "sticky-search" }, index.h("div", { class: "search-wrapper" }, index.h("dropi-icon", { name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), index.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.onKeyEnter.emit(e);
             } }), this.searchTerm && (index.h("button", { type: "button", class: "search-clear", onClick: () => this.handleSearch('') }, index.h("dropi-icon", { name: "Close", width: "14px", height: "14px", color: "Gray-Gray-400" })))))), this.isGrouped && this.filteredOptions.map(group => [
             index.h("li", { class: "option-group-title" }, group.category),
             ...group.options.map(opt => (index.h("li", { key: opt.id }, index.h("button", { type: "button", class: { option: true, 'option-group': true, 'disabled-option': !!opt.disabled }, disabled: opt.disabled, onClick: () => this.selectOption(opt) }, opt.preIcon && index.h("dropi-icon", { name: opt.preIcon, width: "20px", height: "20px", color: "Gray-Gray-500" }), index.h("span", { class: "elipsis" }, opt.label))))),
         ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (index.h("li", { class: "no-results" }, "Sin resultados"))));
     }
     render() {
-        return (index.h("div", { key: '65b15f83612bdb8b11eb321b2c92321b4c621862', class: "custom-select" }, !this.dropdownType && this.label && (index.h("label", { key: '10688d90de470bdc4cdd70c21fd62cc820475c9b', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && index.h("span", { key: 'c8c7e5d8fcc9e029bfd944b4a061289affe39c58', class: "asterisk" }, " *"))), index.h("div", { key: '6a5d1230282ec67dcaed51d9ecda4570f155a895', class: "dropdown-container" }, this.dropdownType && this.label && (index.h("div", { key: '83842d69f63c2738cc3bd7b0fbb1232cb4bc7adf', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (index.h("div", { key: 'a3c1b7552bac043d3d32bfe703f44961bf95df3d', class: "select-helper" }, index.h("span", { key: '060c5a578be91210aec96d8bdb08eddd9446ea41' }, this.helperText))), this.invalid && this.errorText && (index.h("div", { key: '97c6348abd628bb5def8b3a2a667e90f7f27d951', class: "select-helper-error" }, index.h("dropi-icon", { key: '08ab2f0397605bfe0c82ef5ba8ae4b623f98bdb3', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), index.h("span", { key: '97e1d844b586c2da1518bc9a7c0b69aa856515e7' }, this.errorText))), this.renderDropdown()));
+        return (index.h("div", { key: '932cad965441a784f51d6b82ffc5a100cf438fb6', class: "custom-select" }, !this.dropdownType && this.label && (index.h("label", { key: '1c46242dcbd7862b32a36e2132bc4689b3c95aab', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && index.h("span", { key: '79e2df6ae0a55c4e51ff7354486903d58bdb7d36', class: "asterisk" }, " *"))), index.h("div", { key: 'd4a48dcc513b5ae7171598709b0d00c3ffd7f42b', class: "dropdown-container" }, this.dropdownType && this.label && (index.h("div", { key: 'f9d8b6f87dcc8438c00ec04edabe10ebb2cceb79', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (index.h("div", { key: 'e8cc2e4ccb3a5919fe30411003153bfe6434b0d0', class: "select-helper" }, index.h("span", { key: '2fe857a4efac70882ec58835534bb22739c4fb26' }, this.textHelper))), this.hasError && this.errorText && (index.h("div", { key: 'e357992bf4a391052fe3a8444b24777292f71bf0', class: "select-helper-error" }, index.h("dropi-icon", { key: '9a32ef1f5ae2ccf18996bdc451e5de4e2c923a0a', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), index.h("span", { key: '919259f76022b34162f680234a3c1cf93492666b' }, this.errorText))), this.renderDropdown()));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
+        "selectProperties": [{
+                "selectPropertiesChanged": 0
+            }],
         "options": [{
                 "optionsChanged": 0
             }],
         "defaultSelectedId": [{
                 "defaultChanged": 0
             }],
-        "value": [{
+        "selectedOption": [{
                 "valueChanged": 0
             }]
     }; }

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

@@ -1,66 +1,77 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.js');
 
-const dropiSidebarCss = () => `:host{display:block;height:100%}*,*::before,*::after{box-sizing:border-box}.sidebar{display:flex;flex-direction:column;height:100%;background:var(--Neutral-White, #fff);border-right:1px solid var(--Gray-Gray-100, #eceef4);transition:width 0.25s ease;overflow:hidden;flex-shrink:0}.sidebar__logo-wrap{display:flex;align-items:center;justify-content:center;padding:var(--Size-4, 16px) var(--Size-3, 12px);border-bottom:1px solid var(--Gray-Gray-100, #eceef4)}.sidebar__logo{height:28px;object-fit:contain;max-width:100%}.sidebar__toggle{align-self:flex-end;margin:var(--Size-2, 8px);background:none;border:1px solid var(--Gray-Gray-100, #eceef4);border-radius:var(--Border-1, 4px);width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.15s;flex-shrink:0}.sidebar__toggle:hover{background:var(--Gray-Gray-50, #f7f8fa)}.sidebar__nav{flex:1;overflow-y:auto;padding:var(--Size-2, 8px) 0}.sidebar__list,.sidebar__sub{list-style:none;margin:0;padding:0}.sidebar__item{width:100%;display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);background:none;border:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-600, #475066);cursor:pointer;text-align:left;transition:background 0.15s, color 0.15s;white-space:nowrap;overflow:hidden}.sidebar__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.sidebar__item--active{background:var(--Primary-Primary-50, #fff5eb);color:var(--Primary-Primary-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.sidebar__item--depth1{font-size:var(--font-size-xs, 10px)}.sidebar__item-label{flex:1;overflow:hidden;text-overflow:ellipsis}.sidebar__badge{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #fff);font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 4px;flex-shrink:0}.sidebar__sub{padding-left:0}.sidebar__footer{padding:var(--Size-3, 12px);border-top:1px solid var(--Gray-Gray-100, #eceef4);flex-shrink:0}.sidebar__footer:empty{display:none}.sidebar--collapsed .sidebar__item{justify-content:center;padding:var(--Size-2, 8px)}`;
+const dropiSidebarCss = () => `:host{display:block}.main-sidebar-container{margin-top:20px}.sidebar-option{height:45px;display:flex;align-items:center;position:relative;font-weight:var(--font-weight-medium, 500);gap:var(--Size-3, 12px);padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);border-radius:var(--Border-1, 4px);min-width:147px;cursor:pointer;user-select:none}.sidebar-option .arrow{position:absolute;right:17px;transition:transform 0.3s ease}.sidebar-option .arrow-expanded{transform:rotate(180deg)}.sidebar-default-option{color:var(--Gray-Gray-500, #68738f)}.sidebar-active-option{color:var(--Primary-Primary-500, #f49a3d);background-color:#fef8f1}.sidebar-sub-item{overflow:hidden;max-height:0;height:auto;font-weight:var(--font-weight-medium, 500);gap:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);cursor:pointer;opacity:0;padding:0 var(--Size-3, 12px) 0 var(--Size-8, 32px);transition:max-height 0.3s ease-out,     opacity 0.3s ease-out,     padding 0.3s ease-out;user-select:none}.sidebar-sub-item.sidebar-expanded{max-height:200px;opacity:1;padding:var(--Size-3, 12px) var(--Size-3, 12px) var(--Size-3, 12px) var(--Size-8, 32px)}.sidebar-sub-item-default{color:var(--Gray-Gray-500, #68738f)}.sidebar-sub-item-active{color:var(--Primary-Primary-500, #f49a3d)}.space-between{justify-content:space-between}`;
 
 const DropiSidebar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiSidebarItemClick = index.createEvent(this, "dropiSidebarItemClick", 7);
-        this.dropiCollapse = index.createEvent(this, "dropiCollapse", 7);
+        this.onIndexChanged = index.createEvent(this, "onIndexChanged", 7);
     }
-    /** Navigation items (array or JSON string) */
-    items = [];
-    /** Active item ID */
-    activeId = '';
-    /** Collapsed state (icon-only) */
-    collapsed = false;
-    /** Show collapse toggle button */
-    showToggle = true;
-    /** Logo URL (shown at top) */
-    logoUrl = '';
-    /** Sidebar width when expanded */
-    width = '240px';
-    expandedIds = new Set();
-    /** Emitted when an item is clicked. e.detail = item id */
-    dropiSidebarItemClick;
-    /** Emitted when collapse state changes. e.detail = collapsed */
-    dropiCollapse;
-    get parsedItems() {
-        const val = this.items;
-        return typeof val === 'string' ? JSON.parse(val) : (val || []);
+    /**
+     * Define las propiedades y la cantidad de elementos a renderizar.
+     * Pasarlo como JSON string o directamente como array de SidebarProperties.
+     */
+    sideBarProperties = [];
+    /**
+     * Evento emitido cuando se selecciona una opción en el menú o un sub-hijo.
+     */
+    onIndexChanged;
+    parsedProperties = [];
+    watchPropHandler(newValue) {
+        this.parsedProperties = typeof newValue === 'string' ? JSON.parse(newValue) : (newValue || []);
     }
-    toggleExpand(id) {
-        if (this.expandedIds.has(id))
-            this.expandedIds.delete(id);
-        else
-            this.expandedIds.add(id);
-        // Force re-render
-        this.expandedIds = new Set(this.expandedIds);
+    componentWillLoad() {
+        this.watchPropHandler(this.sideBarProperties);
     }
-    renderItem(item, depth = 0) {
-        const hasChildren = item.children && item.children.length > 0;
-        const isExpanded = this.expandedIds.has(item.id);
-        const isActive = item.id === this.activeId;
-        return (index.h("li", null, index.h("button", { class: {
-                'sidebar__item': true,
-                'sidebar__item--active': isActive,
-                'sidebar__item--depth1': depth === 1,
-            }, style: { paddingLeft: depth > 0 ? `${12 + depth * 12}px` : undefined }, onClick: () => {
-                if (hasChildren)
-                    this.toggleExpand(item.id);
-                else
-                    this.dropiSidebarItemClick.emit(item.id);
-            }, type: "button", title: this.collapsed ? item.label : undefined }, item.icon && (index.h("dropi-icon", { name: item.icon, width: "18px", height: "18px", color: isActive ? 'Primary-Primary-500' : 'Gray-Gray-600' })), !this.collapsed && (index.h("span", { class: "sidebar__item-label" }, item.label)), !this.collapsed && item.badge != null && String(item.badge) !== '0' && (index.h("span", { class: "sidebar__badge" }, item.badge)), !this.collapsed && hasChildren && (index.h("dropi-icon", { name: isExpanded ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "12px", height: "12px", color: "Gray-Gray-400" }))), hasChildren && isExpanded && !this.collapsed && (index.h("ul", { class: "sidebar__sub" }, item.children.map(child => this.renderItem(child, depth + 1))))));
+    setExpandedPropertie(id) {
+        const propertieIndex = this.parsedProperties.findIndex((item) => item.id === id);
+        if (propertieIndex !== -1) {
+            const newProps = [...this.parsedProperties];
+            newProps[propertieIndex] = {
+                ...newProps[propertieIndex],
+                expandedMenu: !newProps[propertieIndex].expandedMenu
+            };
+            this.parsedProperties = newProps;
+        }
+    }
+    onItemClick(itemClicked) {
+        this.onIndexChanged.emit(itemClicked);
+        if (itemClicked.subItems && itemClicked.subItems.length > 0) {
+            this.setExpandedPropertie(itemClicked.id);
+        }
+    }
+    onSubItemClick(itemClicked) {
+        this.onIndexChanged.emit(itemClicked);
     }
     render() {
-        const items = this.parsedItems;
-        return (index.h("aside", { key: '97c46e8c84a9e389fb67b34364321c35b0c5ebf2', class: { 'sidebar': true, 'sidebar--collapsed': this.collapsed }, style: { width: this.collapsed ? '56px' : this.width } }, this.logoUrl && (index.h("div", { key: '211e43514bcdd6b613aa1001ef630e5b9629091a', class: "sidebar__logo-wrap" }, index.h("img", { key: 'ce6b7a3b9ce26f4caa1eafd4821f5a2fa70e4dda', class: "sidebar__logo", src: this.logoUrl, alt: "Logo" }))), this.showToggle && (index.h("button", { key: 'ba66d7664b76ecdea519f9d128e998331106da8f', class: "sidebar__toggle", onClick: () => {
-                this.collapsed = !this.collapsed;
-                this.dropiCollapse.emit(this.collapsed);
-            }, "aria-label": this.collapsed ? 'Expandir' : 'Colapsar', type: "button" }, index.h("dropi-icon", { key: '3a362cb657dfa881523ae29c1e677e6cc16afb61', name: this.collapsed ? 'Arrow-Right-2' : 'Arrow-Left-2', width: "16px", height: "16px", color: "Gray-Gray-400" }))), index.h("nav", { key: '02152d2e92f7802daa1192bd9d00d21c13619de4', class: "sidebar__nav" }, index.h("ul", { key: '9e90a7d2d25a63885713b881c6d091528027ec57', class: "sidebar__list" }, items.map(item => this.renderItem(item)))), index.h("div", { key: 'b70d89a324de1b56e022ec66b52ecb2b01031d34', class: "sidebar__footer" }, index.h("slot", { key: '6ead0e515e6a59194cd3495bd691ae9acdb0dd05', name: "footer" }))));
+        return (index.h("div", { key: '9f79e6370ff61c6278a8238b0dc92881832f9b8f', class: "main-sidebar-container" }, this.parsedProperties.map(item => {
+            return [
+                /* Item Principal */
+                index.h("div", { class: {
+                        'sidebar-option': true,
+                        'sidebar-active-option': !!item.active,
+                        'sidebar-default-option': !item.active
+                    }, onClick: () => this.onItemClick(item) }, index.h("dropi-icon", { name: item.icon || 'Cube', width: "20px", height: "20px", color: item.active ? 'Primary-Primary-500' : 'Gray-Gray-500' }), index.h("span", null, item.text), item.subItems && item.subItems.length > 0 && (index.h("dropi-icon", { class: {
+                        'arrow': true,
+                        'arrow-expanded': !!item.expandedMenu
+                    }, name: "Dropdown-down", width: "20px", height: "20px", color: item.active ? 'Primary-Primary-500' : 'Gray-Gray-500' }))),
+                /* SubItems Renderizados al mismo nivel DOM que instruye Angular ng-container */
+                item.subItems && item.subItems.length > 0 && (item.subItems.map(subOption => (index.h("div", { class: {
+                        'sidebar-sub-item': true,
+                        'sidebar-expanded': !!item.expandedMenu,
+                        'sidebar-sub-item-default': !subOption.active,
+                        'sidebar-sub-item-active': !!subOption.active
+                    }, onClick: (e) => { e.stopPropagation(); this.onSubItemClick(subOption); } }, subOption.text))))
+            ];
+        })));
     }
+    static get watchers() { return {
+        "sideBarProperties": [{
+                "watchPropHandler": 0
+            }]
+    }; }
 };
 DropiSidebar.style = dropiSidebarCss();
 

package/dist/cjs/dropi-simple-stepper.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.js');
 
-const dropiSimpleStepperCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.stepper{display:flex;align-items:flex-start;width:100%}.stepper__item{display:flex;flex-direction:column;align-items:center;flex:1}.stepper__circle-row{display:flex;align-items:center;width:100%}.stepper__circle{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s, border-color 0.2s}.stepper__circle--pending{background:var(--Gray-Gray-100, #e6eaf2);border:2px solid var(--Gray-Gray-200, #c3c9d9)}.stepper__circle--active{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d)}.stepper__circle--completed{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d)}.stepper__dot{width:8px;height:8px;border-radius:50%;background:var(--Neutral-White, #fff);display:block}.stepper__circle--pending .stepper__dot{background:var(--Gray-Gray-400, #858ea6)}.stepper__number{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);color:var(--Neutral-White, #fff)}.stepper__circle--pending .stepper__number{color:var(--Gray-Gray-500, #69738c)}.stepper__line{flex:1;height:2px;background:var(--Gray-Gray-200, #c3c9d9);transition:background 0.2s}.stepper__line--done{background:var(--Primary-Primary-500, #f49a3d)}.stepper__label{margin-top:6px;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);text-align:center}`;
+const dropiSimpleStepperCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.stepper{display:flex;align-items:flex-start;width:100%}.stepper__item{display:flex;flex-direction:column;align-items:center;flex:1}.stepper__circle-row{display:flex;align-items:center;width:100%}.stepper__circle{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s, border-color 0.2s}.stepper__circle--pending{background:var(--Gray-Gray-100, #e6eaf2);border:2px solid var(--Gray-Gray-200, #c3c9d9)}.stepper__circle--active{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d)}.stepper__circle--completed{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d)}.stepper__dot{width:8px;height:8px;border-radius:50%;background:var(--Neutral-White, #ffffff);display:block}.stepper__circle--pending .stepper__dot{background:var(--Gray-Gray-400, #858ea6)}.stepper__number{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);color:var(--Neutral-White, #ffffff)}.stepper__circle--pending .stepper__number{color:var(--Gray-Gray-500, #69738c)}.stepper__line{flex:1;height:2px;background:var(--Gray-Gray-200, #c3c9d9);transition:background 0.2s}.stepper__line--done{background:var(--Primary-Primary-500, #f49a3d)}.stepper__label{margin-top:6px;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);text-align:center}`;
 
 const DropiSimpleStepper = class {
     constructor(hostRef) {
@@ -11,13 +11,15 @@ const DropiSimpleStepper = class {
     /** Total steps */
     stepsCount = 3;
     /** Circle content: 'point' (dot) | 'number' */
-    typeStep = 'number';
+    typeStep = 'point';
     /** Current active step (1-based) */
-    currentStep = 1;
+    currentStep = 0;
     /** Labels shown below each step. Pass as JSON string or array */
     labelStepper = [];
     /** Flow mode (visual only) */
-    flowMode = 'Sequential';
+    flowMode = 'Simultaneous';
+    /** White-label brand identifier (matches Angular `white_brand`) */
+    white_brand = 'dropi';
     get parsedLabels() {
         if (typeof this.labelStepper === 'string') {
             try {
@@ -32,7 +34,7 @@ const DropiSimpleStepper = class {
     render() {
         const labels = this.parsedLabels;
         const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
-        return (index.h("div", { key: '9991a928ba08a7720d8ded5aea01b3bc77372e71', class: "stepper" }, steps.map((step, i) => {
+        return (index.h("div", { key: 'f67f6e9404bf67700c46b987923836d5251ae1c4', class: "stepper" }, steps.map((step, i) => {
             const isCompleted = step < this.currentStep;
             const isActive = step === this.currentStep;
             const isLast = i === steps.length - 1;

package/dist/cjs/dropi-skeleton.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiSkeletonCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.skeleton-lines{display:flex;flex-direction:column;gap:8px}.skeleton{background:linear-gradient(     90deg,     var(--Gray-Gray-100, #e6eaf2) 25%,     var(--Gray-Gray-50, #f7f8fa) 50%,     var(--Gray-Gray-100, #e6eaf2) 75%   );background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}`;
 
@@ -11,16 +11,22 @@ const DropiSkeleton = class {
     /** Shape variant: 'text' | 'circle' | 'rect' */
     variant = 'text';
     /** Width (CSS value, e.g. "100%", "200px") */
-    width = '100%';
+    width = '';
     /** Height (CSS value, e.g. "16px", "48px") */
-    height = '16px';
+    height = '';
     /** Border radius override */
-    borderRadius = '';
+    radius = '8px';
     /** Number of lines to repeat (text variant only) */
     lines = 1;
+    /** Base color of the shimmer gradient. Accepts hex (#f6f7f8) or token name (Gray-Gray-100) */
+    baseColor = '#f6f7f8';
+    getBackground() {
+        const color = (this.baseColor ?? '#f6f7f8').startsWith('#') ? (this.baseColor ?? '#f6f7f8') : `var(--${this.baseColor})`;
+        return `linear-gradient(to right, ${color} 8%, #e3e7efe7 28%, ${color} 77%)`;
+    }
     getRadius() {
-        if (this.borderRadius)
-            return this.borderRadius;
+        if (this.radius)
+            return this.radius;
         if (this.variant === 'circle')
             return '50%';
         if (this.variant === 'text')
@@ -33,12 +39,16 @@ const DropiSkeleton = class {
                     width: i === this.lines - 1 ? '70%' : this.width,
                     height: this.height,
                     borderRadius: this.getRadius(),
+                    background: this.getBackground(),
+                    backgroundSize: '1000px 104px',
                 } })))));
         }
         return (index.h("div", { class: "skeleton", style: {
                 width: this.width,
                 height: this.height,
                 borderRadius: this.getRadius(),
+                background: this.getBackground(),
+                backgroundSize: '1000px 104px',
             } }));
     }
 };

package/dist/cjs/dropi-steps.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.js');
 
-const dropiStepsCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.stepper{display:flex;align-items:flex-start;width:100%}.stepper__step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative}.stepper__circle-wrap{display:flex;align-items:center;width:100%;position:relative}.stepper__circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);flex-shrink:0;z-index:1;transition:background 0.2s, border-color 0.2s}.stepper__circle--pending{background:var(--Neutral-White, #fff);border:2px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.stepper__circle--focus{background:var(--Neutral-White, #fff);border:2px solid var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.stepper__circle--completed{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff)}.stepper__line{flex:1;height:2px;background:var(--Gray-Gray-200, #c3c9d9);transition:background 0.2s}.stepper__line--done{background:var(--Primary-Primary-500, #f49a3d)}.stepper__label{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:var(--Size-2, 8px);text-align:center;padding:0 4px}.stepper__title{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.stepper__desc{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}`;
+const dropiStepsCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.stepper{display:flex;align-items:flex-start;width:100%}.stepper__step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative}.stepper__circle-wrap{display:flex;align-items:center;width:100%;position:relative}.stepper__circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);flex-shrink:0;z-index:1;transition:background 0.2s, border-color 0.2s}.stepper__circle--pending{background:var(--Neutral-White, #ffffff);border:2px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.stepper__circle--focus{background:var(--Neutral-White, #ffffff);border:2px solid var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.stepper__circle--completed{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.stepper__line{flex:1;height:2px;background:var(--Gray-Gray-200, #c3c9d9);transition:background 0.2s}.stepper__line--done{background:var(--Primary-Primary-500, #f49a3d)}.stepper__label{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:var(--Size-2, 8px);text-align:center;padding:0 4px}.stepper__title{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.stepper__desc{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}`;
 
 const DropiSteps = class {
     constructor(hostRef) {
@@ -13,9 +13,11 @@ const DropiSteps = class {
     /** Show step number inside the circle */
     showNumberOfStep = true;
     /** Active/current step index (1-based) */
-    currentStep = 1;
+    currentStep = 0;
     /** Labels for each step. Pass as JSON string or array */
     stepLabels = [];
+    /** Visual state applied to the active step (matches Angular `state`) */
+    state = 'pending';
     get parsedLabels() {
         if (typeof this.stepLabels === 'string') {
             try {
@@ -37,7 +39,7 @@ const DropiSteps = class {
     render() {
         const labels = this.parsedLabels;
         const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
-        return (index.h("div", { key: '95573c2ac185f7fc63fa804a03873499ba296e5c', class: "stepper" }, steps.map((step) => {
+        return (index.h("div", { key: '35c28210675370e76f16e2525fdf785b6205ec78', class: "stepper" }, steps.map((step) => {
             const state = this.stepState(step);
             const label = labels[step - 1];
             const isLast = step === this.stepsCount;