@tedi-design-system/angular 6.4.0-rc.6 → 6.4.0

package/fesm2022/tedi-design-system-angular-tedi.mjs

@@ -5031,6 +5031,38 @@ class SelectComponent {
      * Receives the search term and the option item (with all original properties), returns true to include the option.
      */
     searchFn = input();
+    /**
+     * Whether to clear the search input after an option is selected.
+     * Only has a visible effect in multi-select mode — in single-select mode
+     * the dropdown closes on selection, which already clears the search term.
+     * @default false
+     */
+    clearSearchOnSelect = input(false);
+    /**
+     * Emits whenever the selection changes from any source: option click,
+     * tag removal, clear button, select-all, or group toggle.
+     * Payload is the array of selected values in multi-select mode, or the
+     * single selected value (or `null`) in single-select mode.
+     */
+    selectionChange = output();
+    /**
+     * Emits the current search term whenever the user types in the search input.
+     * Only fires when `searchable` is `true`.
+     */
+    searchChange = output();
+    /**
+     * Emits when the dropdown panel opens.
+     */
+    opened = output();
+    /**
+     * Emits when the dropdown panel closes.
+     */
+    closed = output();
+    /**
+     * Emits when the user clicks the clear button.
+     * Fires alongside `selectionChange`, which carries the new (empty) value.
+     */
+    cleared = output();
     SpecialOptionControls = SpecialOptionControls;
     dropdownPositions = [
         // Open below, expand downward
@@ -5199,8 +5231,7 @@ class SelectComponent {
         const listboxElement = this.listboxRef()?.nativeElement;
         const clickedInside = hostElement.contains(target) || listboxElement?.contains(target);
         if (!clickedInside) {
-            this.isOpen.set(false);
-            this.searchTerm.set("");
+            this.closeDropdown();
         }
     }
     focusListboxWhenVisible = effect(() => {
@@ -5252,6 +5283,7 @@ class SelectComponent {
     onSearchInput(event) {
         const input = event.target;
         this.searchTerm.set(input.value);
+        this.searchChange.emit(input.value);
         if (!this.isOpen()) {
             this.openDropdown();
         }
@@ -5340,8 +5372,11 @@ class SelectComponent {
         }
     }
     openDropdown() {
+        if (this.isOpen())
+            return;
         this.calculateDropdownMaxHeight();
         this.isOpen.set(true);
+        this.opened.emit();
     }
     calculateDropdownMaxHeight() {
         const inputMaxHeight = this.maxDropdownHeight();
@@ -5365,9 +5400,12 @@ class SelectComponent {
         this.dropdownMaxHeight.set(maxHeight);
     }
     closeDropdown() {
+        if (!this.isOpen())
+            return;
         this.isOpen.set(false);
         this.searchTerm.set("");
         this.dropdownMaxHeight.set(null);
+        this.closed.emit();
     }
     handleValueChange(event) {
         const values = event.value;
@@ -5398,6 +5436,10 @@ class SelectComponent {
             }
             this.selectedValues.set(newSelection);
             this.onChange(newSelection);
+            this.selectionChange.emit(newSelection);
+            if (this.clearSearchOnSelect()) {
+                this.searchTerm.set("");
+            }
             if (this.searchable()) {
                 this.searchInputRef()?.nativeElement.focus();
             }
@@ -5406,6 +5448,10 @@ class SelectComponent {
             const selected = values[0] ?? null;
             this.selectedValues.set(selected != null ? [selected] : []);
             this.onChange(selected);
+            this.selectionChange.emit(selected);
+            if (this.clearSearchOnSelect()) {
+                this.searchTerm.set("");
+            }
             this.toggleIsOpen(true);
         }
         this.onTouched();
@@ -5417,10 +5463,13 @@ class SelectComponent {
         this.selectedValues.set([]);
         if (this.allowMultiple()) {
             this.onChange([]);
+            this.selectionChange.emit([]);
         }
         else {
             this.onChange(null);
+            this.selectionChange.emit(null);
         }
+        this.cleared.emit();
         this.onTouched();
         this.focusTrigger();
     }
@@ -5433,6 +5482,7 @@ class SelectComponent {
         const newSelection = this.selectedValues().filter((v) => !compareWith(v, value));
         this.selectedValues.set(newSelection);
         this.onChange(newSelection);
+        this.selectionChange.emit(newSelection);
         this.onTouched();
     }
     isOptionSelected(optionValue) {
@@ -5583,6 +5633,7 @@ class SelectComponent {
             const newSelection = this.selectedValues().filter((val) => !enabledOptions.some((o) => compareWith(val, o.value)));
             this.selectedValues.set(newSelection);
             this.onChange(newSelection);
+            this.selectionChange.emit(newSelection);
         }
         else {
             // Select: add visible enabled options to current selection
@@ -5594,6 +5645,7 @@ class SelectComponent {
             }
             this.selectedValues.set(newSelection);
             this.onChange(newSelection);
+            this.selectionChange.emit(newSelection);
         }
     }
     toggleGroupSelection(groupLabel) {
@@ -5618,6 +5670,7 @@ class SelectComponent {
         }
         this.selectedValues.set(newSelection);
         this.onChange(newSelection);
+        this.selectionChange.emit(newSelection);
     }
     onChange = () => { };
     onTouched = () => { };
@@ -5642,7 +5695,7 @@ class SelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SelectComponent, isStandalone: true, selector: "tedi-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidthRef: { classPropertyName: "dropdownWidthRef", publicName: "dropdownWidthRef", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, allowMultiple: { classPropertyName: "allowMultiple", publicName: "allowMultiple", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectableGroups: { classPropertyName: "selectableGroups", publicName: "selectableGroups", isSignal: true, isRequired: false, transformFunction: null }, isTagRemovable: { classPropertyName: "isTagRemovable", publicName: "isTagRemovable", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, disabledKey: { classPropertyName: "disabledKey", publicName: "disabledKey", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, maxDropdownHeight: { classPropertyName: "maxDropdownHeight", publicName: "maxDropdownHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownType: { classPropertyName: "dropdownType", publicName: "dropdownType", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onWindowResize()", "document:click": "onDocumentClick($event)" }, properties: { "class.tedi-select--multiselect": "allowMultiple()" }, classAttribute: "tedi-select" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SelectComponent, isStandalone: true, selector: "tedi-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidthRef: { classPropertyName: "dropdownWidthRef", publicName: "dropdownWidthRef", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, allowMultiple: { classPropertyName: "allowMultiple", publicName: "allowMultiple", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectableGroups: { classPropertyName: "selectableGroups", publicName: "selectableGroups", isSignal: true, isRequired: false, transformFunction: null }, isTagRemovable: { classPropertyName: "isTagRemovable", publicName: "isTagRemovable", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, disabledKey: { classPropertyName: "disabledKey", publicName: "disabledKey", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, maxDropdownHeight: { classPropertyName: "maxDropdownHeight", publicName: "maxDropdownHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownType: { classPropertyName: "dropdownType", publicName: "dropdownType", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", searchChange: "searchChange", opened: "opened", closed: "closed", cleared: "cleared" }, host: { listeners: { "window:resize": "onWindowResize()", "document:click": "onDocumentClick($event)" }, properties: { "class.tedi-select--multiselect": "allowMultiple()" }, classAttribute: "tedi-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectComponent),