@koobiq/components 20.0.0 → 20.1.0

package/fesm2022/koobiq-components-select.mjs

@@ -4,7 +4,8 @@ import * as i1 from '@koobiq/components/progress-spinner';
 import { KbqProgressSpinnerModule } from '@koobiq/components/progress-spinner';
 import { ContentObserver } from '@angular/cdk/observers';
 import { SharedResizeObserver } from '@angular/cdk/observers/private';
-import { KbqOption, KbqAbstractSelect, getKbqSelectDynamicMultipleError, getKbqSelectNonFunctionValueError, KbqComponentColors, ErrorStateMatcher, KBQ_SELECT_SCROLL_STRATEGY, KBQ_LOCALE_SERVICE, KBQ_WINDOW, defaultOffsetY, KbqSelectFooter, KbqSelectTrigger, KbqSelectMatcher, KbqOptgroup, KbqSelectSearch, KbqSelectSearchEmptyResult, isUndefined, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, ESCAPE, TAB, HOME, END, PAGE_UP, PAGE_DOWN, A, BACKSPACE, DELETE, getKbqSelectNonArrayValueError, KbqVirtualOption, ActiveDescendantKeyManager, kbqSelectAnimations, KBQ_OPTION_PARENT_COMPONENT, KBQ_PARENT_POPUP, KbqOptionModule, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER } from '@koobiq/components/core';
+import { Platform } from '@angular/cdk/platform';
+import { KbqOption, KbqAbstractSelect, getKbqSelectDynamicMultipleError, getKbqSelectNonFunctionValueError, KbqComponentColors, ErrorStateMatcher, KBQ_SELECT_SCROLL_STRATEGY, KBQ_LOCALE_SERVICE, KBQ_WINDOW, defaultOffsetY, KbqSelectFooter, KbqSelectTrigger, KbqSelectMatcher, KbqOptgroup, KbqSelectSearch, KbqSelectSearchEmptyResult, isUndefined, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, ESCAPE, TAB, HOME, END, PAGE_UP, PAGE_DOWN, isSelectAll, BACKSPACE, DELETE, getKbqSelectNonArrayValueError, KbqVirtualOption, ActiveDescendantKeyManager, isInput, shouldSelectSearchText, toggleSelectAll, KbqSelectAllEvent, kbqSelectAnimations, KBQ_OPTION_PARENT_COMPONENT, KBQ_PARENT_POPUP, KbqOptionModule, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER } from '@koobiq/components/core';
 import { KbqTooltipTrigger, KbqToolTipModule } from '@koobiq/components/tooltip';
 import { Subscription, throttleTime, Subject, defer, merge, EMPTY, BehaviorSubject, fromEvent } from 'rxjs';
 import { debounceTime, switchMap, startWith, take, filter, map, delay, distinctUntilChanged, auditTime, takeUntil } from 'rxjs/operators';
@@ -13,7 +14,6 @@ import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { SelectionModel } from '@angular/cdk/collections';
 import { OverlayContainer, CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
-import { Platform } from '@angular/cdk/platform';
 import { CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -120,6 +120,8 @@ class KbqOptionTooltip extends KbqTooltipTrigger {
         return this.option.textElement.nativeElement;
     }
     get isOverflown() {
+        if (!this.isBrowser)
+            return false;
         return this.textElement.clientWidth < this.textElement.scrollWidth;
     }
     constructor() {
@@ -127,6 +129,7 @@ class KbqOptionTooltip extends KbqTooltipTrigger {
         this.option = inject(KbqOption);
         this.resizeObserver = inject(SharedResizeObserver);
         this.contentObserver = inject(ContentObserver);
+        this.isBrowser = inject(Platform).isBrowser;
         this.debounceInterval = 100;
         this.resizeSubscription = Subscription.EMPTY;
         this.contentObserverSubscription = Subscription.EMPTY;
@@ -584,6 +587,11 @@ class KbqSelect extends KbqAbstractSelect {
         this.closedStream = this.openedChange.pipe(filter((o) => !o), map(() => { }));
         /** Event emitted when the selected value has been changed by the user. */
         this.selectionChange = output();
+        /**
+         * Event emitted when all options are selected or deselected via the Ctrl/Cmd + A shortcut.
+         * Not emitted when a custom `selectAllHandler` is supplied — the handler owns the behaviour then.
+         */
+        this.onSelectAll = output();
         /**
          * Event that emits whenever the raw value of the select changes. This is here primarily
          * to facilitate the two-way binding for the `value` input.
@@ -614,6 +622,8 @@ class KbqSelect extends KbqAbstractSelect {
          * for primitive values where `value` itself is the display label.
          */
         this.virtualOptionFactory = input(...(ngDevMode ? [undefined, { debugName: "virtualOptionFactory" }] : []));
+        /** When `true`, a repeated Ctrl/Cmd+A deselects all options. Off by default (Ctrl+A only selects). */
+        this.selectAllToggle = input(false, ...(ngDevMode ? [{ debugName: "selectAllToggle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /**
          * Width of the panel. If set to `auto`, the panel will match the trigger width.
          * If set to null or an empty string, the panel will grow to match the longest option's text.
@@ -805,7 +815,7 @@ class KbqSelect extends KbqAbstractSelect {
         $event.stopPropagation();
         // need to prevent scrolling
         $event.preventDefault();
-        this.selectionModel.clear(false);
+        this.selectionModel.clear();
         this.keyManager.setActiveItem(-1);
         this.propagateChanges();
         this.focus();
@@ -1109,6 +1119,8 @@ class KbqSelect extends KbqAbstractSelect {
     }
     /** Checks if the component is currently visible in the viewport. */
     isVisible() {
+        if (!this.isBrowser)
+            return false;
         return this.elementRef.nativeElement.offsetTop < this.elementRef.nativeElement.offsetHeight;
     }
     /** Gets the current overlay position index in the container. */
@@ -1240,7 +1252,7 @@ class KbqSelect extends KbqAbstractSelect {
             event.preventDefault();
             this.keyManager.activeItem.selectViaInteraction();
         }
-        else if (this.multiSelection && keyCode === A && event.ctrlKey) {
+        else if (this.multiSelection && isSelectAll(event)) {
             this.selectAllHandler(event, this);
         }
         else {
@@ -1477,16 +1489,26 @@ class KbqSelect extends KbqAbstractSelect {
     }
     /** Function for handling the combination Ctrl + A (select all). By default, the internal handler is used. */
     _selectAllHandler(event, select) {
+        const searchInput = isInput(event) ? event.target : null;
+        if (shouldSelectSearchText(searchInput)) {
+            searchInput.select();
+            event.preventDefault();
+            return;
+        }
         event.preventDefault();
-        const hasDeselectedOptions = select.options.some((option) => !option.selected);
-        select.options.forEach((option) => {
-            if (hasDeselectedOptions && !option.disabled) {
-                option.select();
-            }
-            else {
-                option.deselect();
-            }
-        });
+        const options = select.options.toArray();
+        const selectableOptions = options.filter((option) => !option.disabled);
+        toggleSelectAll({
+            items: options,
+            isSelectable: (option) => !option.disabled,
+            isSelected: (option) => option.selected,
+            setSelected: (option, selected) => (selected ? option.select() : option.deselect())
+        }, { allowDeselect: select.selectAllToggle() });
+        // `selected` per the KbqSelectAllEvent contract: `true` only when every selectable option is
+        // now selected, `false` otherwise (deselected or partial). Reading the live option state keeps
+        // this correct even on a no-op (Ctrl+A while everything is already selected, selectAllToggle off).
+        const selected = selectableOptions.length > 0 && selectableOptions.every((option) => option.selected);
+        select.onSelectAll.emit(new KbqSelectAllEvent(select, selectableOptions, selected));
     }
     /**
      * Calculates the total width and count of visible items.
@@ -1538,7 +1560,7 @@ class KbqSelect extends KbqAbstractSelect {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqSelect, isStandalone: true, selector: "kbq-select", inputs: { hiddenItemsText: { classPropertyName: "hiddenItemsText", publicName: "hiddenItemsText", isSignal: false, isRequired: false, transformFunction: null }, showPreselectedValues: { classPropertyName: "showPreselectedValues", publicName: "showPreselectedValues", isSignal: true, isRequired: false, transformFunction: null }, triggerValuesLimit: { classPropertyName: "triggerValuesLimit", publicName: "triggerValuesLimit", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: false, isRequired: false, transformFunction: null }, sortComparator: { classPropertyName: "sortComparator", publicName: "sortComparator", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, searchMinOptionsThreshold: { classPropertyName: "searchMinOptionsThreshold", publicName: "searchMinOptionsThreshold", isSignal: false, isRequired: false, transformFunction: null }, scrolledToBottomOffset: { classPropertyName: "scrolledToBottomOffset", publicName: "scrolledToBottomOffset", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, virtualOptionFactory: { classPropertyName: "virtualOptionFactory", publicName: "virtualOptionFactory", isSignal: true, isRequired: false, transformFunction: null }, selectAllHandler: { classPropertyName: "selectAllHandler", publicName: "selectAllHandler", isSignal: false, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: false, isRequired: false, transformFunction: null }, panelMinWidth: { classPropertyName: "panelMinWidth", publicName: "panelMinWidth", isSignal: false, isRequired: false, transformFunction: numberAttribute }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hiddenItemsTextFormatter: { classPropertyName: "hiddenItemsTextFormatter", publicName: "hiddenItemsTextFormatter", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange", beforeOpened: "beforeOpened", openedStream: "opened", closedStream: "closed", selectionChange: "selectionChange", valueChange: "valueChange", scrolledToBottom: "scrolledToBottom" }, host: { listeners: { "click": "toggle()", "keydown": "handleKeydown($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null", "class.kbq-select_multiple": "multiple", "class.kbq-select_multiline": "multiline()", "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState" }, classAttribute: "kbq-select" }, providers: [
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqSelect, isStandalone: true, selector: "kbq-select", inputs: { hiddenItemsText: { classPropertyName: "hiddenItemsText", publicName: "hiddenItemsText", isSignal: false, isRequired: false, transformFunction: null }, showPreselectedValues: { classPropertyName: "showPreselectedValues", publicName: "showPreselectedValues", isSignal: true, isRequired: false, transformFunction: null }, triggerValuesLimit: { classPropertyName: "triggerValuesLimit", publicName: "triggerValuesLimit", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: false, isRequired: false, transformFunction: null }, sortComparator: { classPropertyName: "sortComparator", publicName: "sortComparator", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, searchMinOptionsThreshold: { classPropertyName: "searchMinOptionsThreshold", publicName: "searchMinOptionsThreshold", isSignal: false, isRequired: false, transformFunction: null }, scrolledToBottomOffset: { classPropertyName: "scrolledToBottomOffset", publicName: "scrolledToBottomOffset", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, virtualOptionFactory: { classPropertyName: "virtualOptionFactory", publicName: "virtualOptionFactory", isSignal: true, isRequired: false, transformFunction: null }, selectAllToggle: { classPropertyName: "selectAllToggle", publicName: "selectAllToggle", isSignal: true, isRequired: false, transformFunction: null }, selectAllHandler: { classPropertyName: "selectAllHandler", publicName: "selectAllHandler", isSignal: false, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: false, isRequired: false, transformFunction: null }, panelMinWidth: { classPropertyName: "panelMinWidth", publicName: "panelMinWidth", isSignal: false, isRequired: false, transformFunction: numberAttribute }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hiddenItemsTextFormatter: { classPropertyName: "hiddenItemsTextFormatter", publicName: "hiddenItemsTextFormatter", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange", beforeOpened: "beforeOpened", openedStream: "opened", closedStream: "closed", selectionChange: "selectionChange", onSelectAll: "onSelectAll", valueChange: "valueChange", scrolledToBottom: "scrolledToBottom" }, host: { listeners: { "click": "toggle()", "keydown": "handleKeydown($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null", "class.kbq-select_multiple": "multiple", "class.kbq-select_multiline": "multiline()", "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState" }, classAttribute: "kbq-select" }, providers: [
             { provide: KbqFormFieldControl, useExisting: KbqSelect },
             { provide: KBQ_OPTION_PARENT_COMPONENT, useExisting: KbqSelect },
             { provide: KBQ_PARENT_POPUP, useExisting: KbqSelect }
@@ -1599,7 +1621,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], closedStream: [{
                 type: Output,
                 args: ['closed']
-            }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], scrolledToBottomOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrolledToBottomOffset", required: false }] }], scrolledToBottom: [{ type: i0.Output, args: ["scrolledToBottom"] }], hasBackdrop: [{
+            }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], onSelectAll: [{ type: i0.Output, args: ["onSelectAll"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], scrolledToBottomOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrolledToBottomOffset", required: false }] }], scrolledToBottom: [{ type: i0.Output, args: ["scrolledToBottom"] }], hasBackdrop: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -1610,7 +1632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 args: [{ transform: booleanAttribute }]
             }], compareWith: [{
                 type: Input
-            }], virtualOptionFactory: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualOptionFactory", required: false }] }], selectAllHandler: [{
+            }], virtualOptionFactory: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualOptionFactory", required: false }] }], selectAllToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllToggle", required: false }] }], selectAllHandler: [{
                 type: Input
             }], panelWidth: [{
                 type: Input