@dropi/ui 0.1.20 → 0.1.22

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,28 +75,62 @@ 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];
         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 @@ 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 +162,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 +174,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 +186,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 +207,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 +259,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 +274,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 +302,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 +310,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 +350,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: '65b15f83612bdb8b11eb321b2c92321b4c621862', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '10688d90de470bdc4cdd70c21fd62cc820475c9b', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: 'c8c7e5d8fcc9e029bfd944b4a061289affe39c58', class: "asterisk" }, " *"))), h("div", { key: '6a5d1230282ec67dcaed51d9ecda4570f155a895', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: '83842d69f63c2738cc3bd7b0fbb1232cb4bc7adf', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (h("div", { key: 'a3c1b7552bac043d3d32bfe703f44961bf95df3d', class: "select-helper" }, h("span", { key: '060c5a578be91210aec96d8bdb08eddd9446ea41' }, this.helperText))), this.invalid && this.errorText && (h("div", { key: '97c6348abd628bb5def8b3a2a667e90f7f27d951', class: "select-helper-error" }, h("dropi-icon", { key: '08ab2f0397605bfe0c82ef5ba8ae4b623f98bdb3', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: '97e1d844b586c2da1518bc9a7c0b69aa856515e7' }, this.errorText))), this.renderDropdown()));
+        return (h("div", { key: '932cad965441a784f51d6b82ffc5a100cf438fb6', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '1c46242dcbd7862b32a36e2132bc4689b3c95aab', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '79e2df6ae0a55c4e51ff7354486903d58bdb7d36', class: "asterisk" }, " *"))), h("div", { key: 'd4a48dcc513b5ae7171598709b0d00c3ffd7f42b', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: 'f9d8b6f87dcc8438c00ec04edabe10ebb2cceb79', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (h("div", { key: 'e8cc2e4ccb3a5919fe30411003153bfe6434b0d0', class: "select-helper" }, h("span", { key: '2fe857a4efac70882ec58835534bb22739c4fb26' }, this.textHelper))), this.hasError && this.errorText && (h("div", { key: 'e357992bf4a391052fe3a8444b24777292f71bf0', class: "select-helper-error" }, h("dropi-icon", { key: '9a32ef1f5ae2ccf18996bdc451e5de4e2c923a0a', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: '919259f76022b34162f680234a3c1cf93492666b' }, this.errorText))), this.renderDropdown()));
     }
     static get is() { return "dropi-select"; }
     static get encapsulation() { return "shadow"; }
@@ -334,7 +378,7 @@ export class DropiSelect {
         return {
             "label": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -354,7 +398,7 @@ export class DropiSelect {
             },
             "placeholder": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -370,7 +414,7 @@ export class DropiSelect {
                 "setter": false,
                 "reflect": false,
                 "attribute": "placeholder",
-                "defaultValue": "'Seleccionar'"
+                "defaultValue": "'Select'"
             },
             "options": {
                 "type": "unknown",
@@ -443,9 +487,9 @@ export class DropiSelect {
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "invalid": {
+            "hasError": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -460,12 +504,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 +527,9 @@ export class DropiSelect {
                 "attribute": "error-text",
                 "defaultValue": "''"
             },
-            "helperText": {
+            "textHelper": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -500,12 +544,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 +569,7 @@ export class DropiSelect {
             },
             "searchEnabled": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -545,7 +589,7 @@ export class DropiSelect {
             },
             "multiSelect": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -565,7 +609,7 @@ export class DropiSelect {
             },
             "dropdownType": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -605,7 +649,7 @@ export class DropiSelect {
             },
             "radioOptions": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -645,7 +689,7 @@ export class DropiSelect {
             },
             "preIcon": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -680,10 +724,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 +745,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 +796,7 @@ export class DropiSelect {
     static get states() {
         return {
             "isOpen": {},
-            "selectedOption": {},
+            "_selectedOption": {},
             "multiSelected": {},
             "filteredOptions": {},
             "searchTerm": {},
@@ -722,14 +805,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 +827,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 +842,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 +857,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 +872,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 +992,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"
             }];
     }