@dropi/ui 0.1.19 → 0.1.21

package/dist/collection/components/dropi-select/dropi-select.js

@@ -28,14 +28,14 @@ export class DropiSelect {
     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 @@ export class DropiSelect {
     /** 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,22 +75,52 @@ export class DropiSelect {
         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];
@@ -100,7 +140,7 @@ export class DropiSelect {
         this.applyDefaultSelection(newId);
     }
     valueChanged(v) {
-        this.selectedOption = v;
+        this._selectedOption = v;
         this.internals.setFormValue(v ? String(v.id) : '');
     }
     // ── Public Methods ───────────────────────────────────────────
@@ -118,10 +158,10 @@ export class DropiSelect {
     }
     /** 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 +170,7 @@ export class DropiSelect {
     }
     // ── Click outside ────────────────────────────────────────────
     handleOutsideClick(e) {
-        if (!this.el.contains(e.target)) {
+        if (this.isOpen && !e.composedPath().includes(this.el)) {
             this.closeDropdown();
         }
     }
@@ -142,7 +182,7 @@ export class DropiSelect {
         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 +203,10 @@ export class DropiSelect {
                 ? 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 +255,12 @@ export class DropiSelect {
                 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 +270,7 @@ export class DropiSelect {
     // ── 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 +298,7 @@ export class DropiSelect {
                 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 +306,33 @@ export class DropiSelect {
     }
     // ── 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 (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() }, 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 };
+                '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())
+                : 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 })));
+            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;
+            : this._selectedOption?.id === option.id;
         return (h("li", { key: option.id }, h("button", { type: "button", class: {
                 option: true,
                 'option-radio': this.radioOptions,
@@ -306,16 +346,16 @@ export class DropiSelect {
     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) => {
+        return (h("ul", { class: `select-dropdown-overlay ${this.overlayClass}`, style: this.dropdownStyle, onScroll: (e) => this.handleScroll(e) }, this.searchEnabled && (h("li", { class: "sticky-search" }, h("div", { class: "search-wrapper" }, h("dropi-icon", { name: "Search", 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.onKeyEnter.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: '276daabfaed1bf21977f4dfee1c5da3aefed63ba', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '59a04e375f10bf2f9f85f17aaa47fe7b169f98d3', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: 'e801bfc29322e1e389b0d838a38b04168cb5a6b3', class: "asterisk" }, " *"))), h("div", { key: '190fdc37fc2b7464aea841514fb3ab7f71ef0d04', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: '41c952f237f08af7d499d82fb49b9230fccfed99', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (h("div", { key: 'f87a7f09f8c0cb3f4768e4c18604dc626a8769a7', class: "select-helper" }, h("span", { key: 'fc967f18d637b2469997ec67d252e0f28c66ec7d' }, this.helperText))), this.invalid && this.errorText && (h("div", { key: '3b59c1c81921f5a5890d464c4d9072ef09965232', class: "select-helper-error" }, h("dropi-icon", { key: '83d0975b4e606ec11e1f8f1a43ec8407d0b22c0e', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: 'ab365dad523b9069006d12942b169477b26a242e' }, this.errorText))), this.renderDropdown()));
+        return (h("div", { key: 'daa9915ec481b2a7d1bb6a74abf9c5ac7f5c8abd', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '184da51081bd5f31220670dd846c07dab8b8caea', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '5bfe13da6e2cd1cbf151a87b6cf987d20581afbe', class: "asterisk" }, " *"))), h("div", { key: 'e5c55f5d269cd0c6fe532b18e5b12e86399504ae', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: 'b49dd08e94004da615553a6ffd85097a16357c0e', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (h("div", { key: '28d9fa19c9c5f8d4fbea5643e606cae70613dcee', class: "select-helper" }, h("span", { key: '078e8b23953a41e8cd99eab055322ceb543afeb3' }, this.textHelper))), this.hasError && this.errorText && (h("div", { key: '746c5293426a3bbe8327e349a484465a4995b135', class: "select-helper-error" }, h("dropi-icon", { key: '34d227f3e0d92c490f617d1624b5ef84c2647df5', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: 'd90c7e1fd0e8c7c40d35ec7dc9e4648d448bf559' }, this.errorText))), this.renderDropdown()));
     }
     static get is() { return "dropi-select"; }
     static get encapsulation() { return "shadow"; }
@@ -334,7 +374,7 @@ export class DropiSelect {
         return {
             "label": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -354,7 +394,7 @@ export class DropiSelect {
             },
             "placeholder": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -370,7 +410,7 @@ export class DropiSelect {
                 "setter": false,
                 "reflect": false,
                 "attribute": "placeholder",
-                "defaultValue": "'Seleccionar'"
+                "defaultValue": "'Select'"
             },
             "options": {
                 "type": "unknown",
@@ -443,9 +483,9 @@ export class DropiSelect {
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "invalid": {
+            "hasError": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -460,12 +500,12 @@ export class DropiSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "invalid",
+                "attribute": "has-error",
                 "defaultValue": "false"
             },
             "errorText": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -483,9 +523,9 @@ export class DropiSelect {
                 "attribute": "error-text",
                 "defaultValue": "''"
             },
-            "helperText": {
+            "textHelper": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -500,12 +540,12 @@ export class DropiSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "helper-text",
+                "attribute": "text-helper",
                 "defaultValue": "''"
             },
             "showObligatory": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -525,7 +565,7 @@ export class DropiSelect {
             },
             "searchEnabled": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -545,7 +585,7 @@ export class DropiSelect {
             },
             "multiSelect": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -565,7 +605,7 @@ export class DropiSelect {
             },
             "dropdownType": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -605,7 +645,7 @@ export class DropiSelect {
             },
             "radioOptions": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -645,7 +685,7 @@ export class DropiSelect {
             },
             "preIcon": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -680,10 +720,9 @@ export class DropiSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "default-selected-id",
-                "defaultValue": "''"
+                "attribute": "default-selected-id"
             },
-            "value": {
+            "selectedOption": {
                 "type": "unknown",
                 "mutable": true,
                 "complexType": {
@@ -702,10 +741,50 @@ export class DropiSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Controlled selected option (single select)"
+                    "text": "Controlled selected option (single select) - matches Angular 'selectedOption'"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "overlayClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom CSS class for the dropdown overlay"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overlay-class",
+                "defaultValue": "''"
+            },
+            "selectProperties": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Convenience object prop \u2014 matches Angular `selectProperties: SelectProperties`.\nFields: label, placeholder, options, showObligatory, textHelper,\nsearchEnabled, multiSelect, dropdownType, hasError, errorText,\nradioOptions, preIcon.\nWhen provided, its non-null fields override individual props."
                 },
                 "getter": false,
                 "setter": false,
+                "reflect": false,
+                "attribute": "select-properties",
                 "defaultValue": "null"
             }
         };
@@ -713,7 +792,7 @@ export class DropiSelect {
     static get states() {
         return {
             "isOpen": {},
-            "selectedOption": {},
+            "_selectedOption": {},
             "multiSelected": {},
             "filteredOptions": {},
             "searchTerm": {},
@@ -722,14 +801,14 @@ export class DropiSelect {
     }
     static get events() {
         return [{
-                "method": "dropiChange",
-                "name": "dropiChange",
+                "method": "onChangeSelect",
+                "name": "onChangeSelect",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when an option is selected (single) or selection changes (multi)"
+                    "text": "Emitted when an option is selected \u2014 matches Angular 'onChangeSelect'"
                 },
                 "complexType": {
                     "original": "SelectOption | SelectOption[]",
@@ -744,14 +823,14 @@ export class DropiSelect {
                     }
                 }
             }, {
-                "method": "dropiClear",
-                "name": "dropiClear",
+                "method": "onClear",
+                "name": "onClear",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the selection is cleared"
+                    "text": "Emitted when the selection is cleared \u2014 matches Angular 'onClear'"
                 },
                 "complexType": {
                     "original": "void",
@@ -759,14 +838,14 @@ export class DropiSelect {
                     "references": {}
                 }
             }, {
-                "method": "dropiSearch",
-                "name": "dropiSearch",
+                "method": "onSearch",
+                "name": "onSearch",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted on search input"
+                    "text": "Emitted on search input \u2014 matches Angular 'onSearch'"
                 },
                 "complexType": {
                     "original": "string",
@@ -774,14 +853,14 @@ export class DropiSelect {
                     "references": {}
                 }
             }, {
-                "method": "dropiScrollEnd",
-                "name": "dropiScrollEnd",
+                "method": "scrolledToEnd",
+                "name": "scrolledToEnd",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the list is scrolled to the end"
+                    "text": "Emitted when the list is scrolled to the end \u2014 matches Angular 'scrolledToEnd'"
                 },
                 "complexType": {
                     "original": "void",
@@ -789,14 +868,14 @@ export class DropiSelect {
                     "references": {}
                 }
             }, {
-                "method": "dropiKeyEnter",
-                "name": "dropiKeyEnter",
+                "method": "onKeyEnter",
+                "name": "onKeyEnter",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted on Enter key inside search"
+                    "text": "Emitted on Enter key inside search \u2014 matches Angular 'onKeyEnter'"
                 },
                 "complexType": {
                     "original": "KeyboardEvent",
@@ -909,13 +988,16 @@ export class DropiSelect {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "selectProperties",
+                "methodName": "selectPropertiesChanged"
+            }, {
                 "propName": "options",
                 "methodName": "optionsChanged"
             }, {
                 "propName": "defaultSelectedId",
                 "methodName": "defaultChanged"
             }, {
-                "propName": "value",
+                "propName": "selectedOption",
                 "methodName": "valueChanged"
             }];
     }

package/dist/collection/components/dropi-sidebar/dropi-sidebar.css

@@ -0,0 +1,76 @@
+: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;
+}