@koobiq/components 19.5.0 → 19.7.0

package/search-expandable/search-expandable.d.ts

@@ -39,9 +39,13 @@ export declare class KbqSearchExpandable implements ControlValueAccessor, AfterV
     isEmitValueByEnterEnabled: boolean;
     /** Timeout in milliseconds for emit event. The default value is taken from defaultEmitValueTimeout */
     emitValueTimeout: number;
+    /** Tooltip text for the search button. When set, overrides localeData.tooltip */
+    get tooltipText(): string;
+    set tooltipText(value: string | null);
+    private _tooltipText;
     /** Placeholder for input when expanded */
     get placeholder(): string;
-    set placeholder(value: string);
+    set placeholder(value: string | null);
     private _placeholder;
     get disabled(): boolean;
     set disabled(value: boolean);
@@ -77,7 +81,7 @@ export declare class KbqSearchExpandable implements ControlValueAccessor, AfterV
     private runFocusMonitor;
     private stopFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSearchExpandable, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSearchExpandable, "kbq-search-expandable", never, { "isOpened": { "alias": "isOpened"; "required": false; }; "isEmitValueByEnterEnabled": { "alias": "isEmitValueByEnterEnabled"; "required": false; }; "emitValueTimeout": { "alias": "emitValueTimeout"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "isOpenedChange": "isOpenedChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSearchExpandable, "kbq-search-expandable", never, { "isOpened": { "alias": "isOpened"; "required": false; }; "isEmitValueByEnterEnabled": { "alias": "isEmitValueByEnterEnabled"; "required": false; }; "emitValueTimeout": { "alias": "emitValueTimeout"; "required": false; }; "tooltipText": { "alias": "tooltipText"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "isOpenedChange": "isOpenedChange"; }, never, never, true, never>;
     static ngAcceptInputType_isOpened: unknown;
     static ngAcceptInputType_emitValueTimeout: unknown;
     static ngAcceptInputType_disabled: unknown;

package/select/public-api.d.ts

@@ -1,3 +1,4 @@
+export * from './select-common';
 export * from './select-option.directive';
 export * from './select.component';
 export * from './select.module';

package/select/select-common.d.ts

@@ -0,0 +1,30 @@
+import * as i0 from "@angular/core";
+export declare class KbqSelectLoading {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectLoading, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelectLoading, "kbq-select-loading, [kbq-select-loading]", ["kbqSelectLoading"], {}, {}, never, ["kbq-progress-spinner"], true, never>;
+}
+/**
+ * This component renders the error for a Select component.
+ * The error message can be displayed in two visual variants: a default centered layout (when [paging] is falsy)
+ * or a variant with left‑aligned text suitable for pagination controls (when [paging] is truthy).
+ */
+export declare class KbqSelectError {
+    /** Indicates whether styles for pagination controls should be used. */
+    paging: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectError, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelectError, "kbq-select-error, [kbq-select-error]", ["kbqSelectError"], { "paging": { "alias": "paging"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * Marks an element as the error text container for a *KbqSelect* component.
+ */
+export declare class KbqSelectErrorText {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectErrorText, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectErrorText, "[kbq-select-error-text]", ["kbqSelectErrorText"], {}, {}, never, never, true, never>;
+}
+/**
+ * Component that represents the empty state of a select dropdown.
+ */
+export declare class KbqSelectNoOptions {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectNoOptions, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelectNoOptions, "kbq-select-no-options, [kbq-select-no-options]", ["kbqSelectNoOptions"], {}, {}, never, ["*"], true, never>;
+}

package/select/select-tokens.scss

@@ -1,8 +1,8 @@
 .kbq-select,
 .kbq-tree-select,
 .kbq-select__panel {
-    --kbq-select-size-single-padding-left: var(--kbq-form-field-size-infix-padding);
-    --kbq-select-size-single-padding-right: var(--kbq-form-field-size-suffix-padding);
+    --kbq-select-size-single-padding-left: 0;
+    --kbq-select-size-single-padding-right: 0;
     --kbq-select-size-single-padding-vertical: var(--kbq-size-xs);
     --kbq-select-size-single-content-gap: var(--kbq-size-xxs);
     --kbq-select-size-multiple-padding-left: 0;

package/select/select.component.d.ts

@@ -5,7 +5,7 @@ import { CdkVirtualForOf } from '@angular/cdk/scrolling';
 import { AfterContentInit, ChangeDetectorRef, DestroyRef, DoCheck, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, OnInit, Provider, QueryList, Renderer2, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { ActiveDescendantKeyManager } from '@koobiq/cdk/a11y';
-import { CanUpdateErrorState, ErrorStateMatcher, KbqAbstractSelect, KbqComponentColors, KbqLocaleService, KbqOptgroup, KbqOption, KbqOptionBase, KbqOptionSelectionChange, KbqSelectMatcher, KbqSelectSearch, KbqSelectTrigger } from '@koobiq/components/core';
+import { CanUpdateErrorState, ErrorStateMatcher, KbqAbstractSelect, KbqComponentColors, KbqLocaleService, KbqOptgroup, KbqOption, KbqOptionBase, KbqOptionSelectionChange, KbqSelectMatcher, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqSelectTrigger } from '@koobiq/components/core';
 import { KbqCleaner, KbqFormField, KbqFormFieldControl } from '@koobiq/components/form-field';
 import { KbqTag } from '@koobiq/components/tags';
 import { Observable, Subject } from 'rxjs';
@@ -60,6 +60,10 @@ export declare const KBQ_SELECT_OPTIONS: InjectionToken<Partial<{
 }>>;
 /** Utility provider for `KBQ_SELECT_OPTIONS`. */
 export declare const kbqSelectOptionsProvider: (options: KbqSelectOptions) => Provider;
+/** Delay in milliseconds before displaying a result when there are no options. */
+export declare const delayBeforeDisplayingResultWithoutOptions = 101;
+/** Minimum time in milliseconds to display the loading state. */
+export declare const minimumTimeToDisplayLoading = 300;
 export declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, OnDestroy, OnInit, DoCheck, ControlValueAccessor, KbqFormFieldControl<any>, CanUpdateErrorState {
     private readonly _changeDetectorRef;
     private readonly _ngZone;
@@ -111,14 +115,15 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     hiddenItems: number;
     /** The last measured value for the trigger's client bounding rect. */
     triggerRect: DOMRect;
-    /** The cached font-size of the trigger element. */
+    /** The cached font-size of the trigger element in pixels. */
     triggerFontSize: number;
-    /** Deals with the selection logic. */
+    /** Deals with the selection logic. Manages selected options and their states. */
     selectionModel: SelectionModel<KbqOptionBase>;
+    /** Previously selected options before the current selection was made. */
     previousSelectionModelSelected: KbqOptionBase[];
     /** Manages keyboard events for options in the panel. */
     keyManager: ActiveDescendantKeyManager<KbqOption>;
-    /** The value of the select panel's transform-origin property. */
+    /** The value of the select panel's transform-origin property for animations. */
     transformOrigin: string;
     /** Emits when the panel element is finished transforming in. */
     panelDoneAnimatingStream: Subject<string>;
@@ -126,7 +131,7 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     scrollStrategy: any;
     /**
      * The y-offset of the overlay panel in relation to the trigger's top start corner.
-     * This must be adjusted to align the selected option text over the trigger text.
+     * This must be adjusted to align the selected option text over the trigger text
      * when the panel opens. Will change based on the y-position of the selected option.
      */
     offsetY: number;
@@ -141,27 +146,50 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
      * Trigger - is a clickable field to open select dropdown panel
      */
     trigger: ElementRef;
+    /** Reference to the overlay panel element. */
     panel: ElementRef;
+    /** Reference to the container element that holds the options. */
     optionsContainer: ElementRef;
+    /** Reference to the CDK connected overlay directive. */
     overlayDir: CdkConnectedOverlay;
+    /** Reference to the optional footer element in the panel. */
     footer?: ElementRef;
+    /** Reference to the CDK virtual scroll directive for virtual scrolling support. */
     cdkVirtualForOf?: CdkVirtualForOf<any>;
+    /** Query list of tags displayed in multiple selection mode. */
     tags: QueryList<KbqTag>;
-    /** User-supplied override of the trigger element. */
+    /** User-supplied override of the trigger element for custom rendering. */
     customTrigger: KbqSelectTrigger;
+    /** User-supplied matcher component for custom value matching logic. */
     customMatcher: KbqSelectMatcher;
+    /** Custom template reference for rendering tag content. */
     customTagTemplateRef: TemplateRef<any>;
+    /** Reference to the optional cleaner element for clearing selection. */
     cleaner: KbqCleaner;
     /** All of the defined select options. */
     options: QueryList<KbqOption>;
     /** All of the defined groups of options. */
     optionGroups: QueryList<KbqOptgroup>;
+    /** Reference to the optional search component. */
     search: KbqSelectSearch;
+    /** Reference to the optional empty search result component. */
+    searchEmpty: KbqSelectSearchEmptyResult;
+    /** Template string for hidden items text. Supports {{ number }} placeholder. */
     hiddenItemsText: string;
+    /** Determines whether preselected values are displayed. */
+    showPreselectedValues: boolean;
+    /**
+     * Specifies the maximum number of trigger values allowed.
+     * This constant limits the size of the trigger values array to ensure performance
+     * and prevent excessive memory usage.
+     * A value of `0` indicates that there is no limit.
+     */
+    triggerValuesLimit: number;
     /** Classes to be passed to the select panel. Supports the same syntax as `ngClass`. */
     panelClass: string | string[] | Set<string> | {
         [key: string]: any;
     };
+    /** Classes to be passed to the overlay backdrop. */
     backdropClass: string;
     /** Object used to control when error messages are shown. */
     errorStateMatcher: ErrorStateMatcher;
@@ -171,13 +199,14 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
      */
     sortComparator: (a: KbqOptionBase, b: KbqOptionBase, options: KbqOptionBase[]) => number;
     /**
-     * Whether to use a multiline matcher or not. Default is false
+     * Whether to use a multiline matcher or not. Default is false.
+     * When true, allows multiple lines of text in the selected value display.
      */
     multiline: boolean;
     /**
      * Controls when the search functionality is displayed based on the number of available options.
      *
-     * Automatically enables search hiding if value provided, even if `defaultOptions.minOptionsThreshold` is provided.
+     * Automatically enables search hiding if value provided, even if `defaultOptions.searchMinOptionsThreshold` is provided.
      * @default undefined
      */
     set searchMinOptionsThreshold(value: 'auto' | number | undefined);
@@ -185,8 +214,10 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     private _searchMinOptionsThreshold;
     /** Combined stream of all of the child options' change events. */
     readonly optionSelectionChanges: Observable<KbqOptionSelectionChange>;
-    /** Event emitted when the select panel has been toggled. */
+    /** Event emitted when the select panel has been toggled. Emits true when opened, false when closed. */
     readonly openedChange: EventEmitter<boolean>;
+    /** Event emitted before the select panel starts opening. */
+    readonly beforeOpened: import("@angular/core").OutputEmitterRef<void>;
     /** Event emitted when the select has been opened. */
     readonly openedStream: Observable<void>;
     /** Event emitted when the select has been closed. */
@@ -199,27 +230,47 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
      * @docs-private
      */
     readonly valueChange: EventEmitter<any>;
+    /**
+     * Whether the overlay should have a backdrop.
+     * When true, clicking the backdrop will close the select.
+     */
     get hasBackdrop(): boolean;
     set hasBackdrop(value: boolean);
     private _hasBackdrop;
+    /**
+     * Placeholder text to be shown when no value is selected.
+     * Displayed in the trigger when the select is closed and no value is selected.
+     */
     get placeholder(): string;
     set placeholder(value: string);
     private _placeholder;
+    /**
+     * Whether the select is required. Affects validation and display of placeholder.
+     */
     get required(): boolean;
     set required(value: boolean);
     private _required;
+    /**
+     * Whether multiple options can be selected.
+     * Note: This cannot be changed dynamically after initialization.
+     */
     get multiple(): boolean;
     set multiple(value: boolean);
     private _multiple;
     /**
-     * Function to compare the option values with the selected values. The first argument
-     * is a value from an option. The second is a value from the selection. A boolean
-     * should be returned.
+     * Function to compare the option values with the selected values.
+     * The first argument is a value from an option.
+     * The second is a value from the selection.
+     * Should return true if the values match.
+     * Defaults to strict equality comparison.
      */
     get compareWith(): (o1: any, o2: any) => boolean;
     set compareWith(fn: (o1: any, o2: any) => boolean);
     /**
-     * Function for handling the combination Ctrl + A (select all). By default, the internal handler is used.
+     * Function for handling the Ctrl + A (select all) keyboard combination.
+     * By default, the internal handler selects all options.
+     * @param event The keyboard event that triggered the handler.
+     * @param select Reference to this select component.
      */
     get selectAllHandler(): (event: KeyboardEvent, select: KbqSelect) => void;
     set selectAllHandler(fn: (event: KeyboardEvent, select: KbqSelect) => void);
@@ -229,71 +280,126 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
      */
     panelWidth: KbqSelectPanelWidth;
     /**
-     * Minimum width of the panel.
+     * Minimum width of the panel in pixels.
      * If minWidth is larger than window width, it will be ignored.
      */
     panelMinWidth: Exclude<KbqSelectPanelWidth, 'auto'>;
-    /** Value of the select control. */
+    /** Value of the select control. Can be a single value or array of values for multiple selection. */
     get value(): any;
     set value(newValue: any);
     private _value;
+    /**
+     * Unique identifier for the select component.
+     * Auto-generates an ID if not provided.
+     */
     get id(): string;
     set id(value: string);
     private _id;
+    /**
+     * Sets the tabIndex of the select element.
+     * Automatically set to -1 when disabled.
+     */
     get tabIndex(): number;
     set tabIndex(value: number);
     private _tabIndex;
+    /**
+     * Whether the select is disabled.
+     * When disabled, the select cannot be opened and its value cannot be changed.
+     */
     get disabled(): boolean;
     set disabled(value: boolean);
     private _disabled;
     /** Whether the select is focused. */
     get focused(): boolean;
     set focused(value: boolean);
+    /** Whether the select panel is currently open. */
     panelOpen: boolean;
-    /** true if virtual scrolling is used. */
+    /** Whether virtual scrolling is enabled for the options panel. */
     withVirtualScroll: boolean;
     private _focused;
+    /** Whether the search returned no results. */
     get isEmptySearchResult(): boolean;
+    /** Whether the cleaner (clear button) should be shown. */
     get canShowCleaner(): boolean;
+    /** Returns the currently selected option(s). Single value or array for multiple selection. */
     get selected(): KbqOptionBase | KbqOptionBase[];
+    /** Returns the display value for the trigger element. */
     get triggerValue(): string;
+    /** Returns all selected options in display order. */
     get triggerValues(): KbqOptionBase[];
+    /** Whether no option is currently selected. */
     get empty(): boolean;
+    /** Whether there are no options available. */
+    get noOptions(): boolean;
+    /** Returns the first selected option that is not disabled. */
     get firstSelected(): KbqOptionBase | null;
+    /** Whether the first selected option is filtered (not visible in the list). */
     get firstFiltered(): boolean;
     /** @docs-private */
     get colorForState(): KbqComponentColors;
-    /** Whether multiple choice is enabled or not. True if multiple or multiline */
+    /** Whether multiple choice is enabled. True if multiple or multiline mode is active. */
     get multiSelection(): boolean;
+    /** Subscription to the close event of the overlay. */
     private closeSubscription;
     /** The scroll position of the overlay panel, calculated to center the selected option. */
     private scrollTop;
-    /** Unique id for this input. */
+    /** Unique id for this input. Auto-incremented for each instance. */
     private readonly uid;
+    /** Subject that emits when the component visibility changes. */
     private visibleChanges;
-    /** Width of the overlay panel. */
+    /** Width of the overlay panel in pixels or as a string. */
     protected overlayWidth: string | number;
-    /** Min width of the overlay panel. */
+    /** Minimum width of the overlay panel in pixels. */
     protected overlayMinWidth: string | number;
-    /** Origin for the overlay panel. */
+    /** Origin element for the overlay panel positioning. */
     protected overlayOrigin?: CdkOverlayOrigin | ElementRef;
+    /** Flag indicating if the dropdown class has been added to the overlay container. */
+    private classAddedToOverlayContainer;
+    private openPanelTimeout;
     constructor(_changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, elementRef: ElementRef<HTMLElement>, overlayContainer: OverlayContainer, _dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl, scrollStrategyFactory: any, localeService?: KbqLocaleService | undefined);
+    /** Lifecycle hook called after component initialization. Initializes selection model and subscriptions. */
     ngOnInit(): void;
+    /** Lifecycle hook for change detection. Updates visibility and error state. */
     ngDoCheck(): void;
+    /** Lifecycle hook after content initialization. Sets up key manager and option subscriptions. */
     ngAfterContentInit(): void;
+    /** Lifecycle hook when component is destroyed. Cleans up subscriptions. */
     ngOnDestroy(): void;
+    /** Updates the error state based on the error state matcher. */
     updateErrorState(): void;
+    /**
+     * Formats the hidden items text with the number of hidden items.
+     * @param hiddenItemsText Template string with {{ number }} placeholder.
+     * @param hiddenItems Number of hidden items to display.
+     * @returns Formatted string with the number of hidden items.
+     */
     hiddenItemsTextFormatter(hiddenItemsText: string, hiddenItems: number): string;
+    /**
+     * Clears the current selection.
+     * @param $event Mouse event to prevent default behavior.
+     */
     clearValue($event: any): void;
     /** `View -> model callback called when value changes` */
     onChange: (value: any) => void;
     /** `View -> model callback called when select has been touched` */
     onTouched: () => void;
+    /** Resets the search component if present. */
     resetSearch(): void;
     /** Toggles the overlay panel open or closed. */
     toggle(): void;
-    /** Opens the overlay panel. */
+    /**
+     * Triggers the opening of the panel component.
+     * If the component is disabled or the panel is already open, the call is ignored.
+     * Otherwise, the (beforeOpened) event is emitted.
+     * When no options are available, the panel is opened after a short delay;
+     * if options exist, it opens immediately.
+     */
     open(): void;
+    /**
+     * Internal method to open the panel. Handles overlay positioning and sizing.
+     * Sets up the overlay dimensions based on trigger size and configured options.
+     */
+    openPanel(): void;
     /** Closes the overlay panel and focuses the host element. */
     close(): void;
     /**
@@ -326,8 +432,18 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
      * @param isDisabled Sets whether the component is disabled.
      */
     setDisabledState(isDisabled: boolean): void;
+    /**
+     * Checks if the current direction is RTL (right-to-left).
+     * @returns True if RTL mode is active, false otherwise.
+     */
     isRtl(): boolean;
+    /**
+     * Handles all keyboard events for the select.
+     * Delegates to appropriate handler based on panel state.
+     * @param event The keyboard event to handle.
+     */
     handleKeydown(event: KeyboardEvent): void;
+    /** Handles focus event on the select element. */
     onFocus(): void;
     /**
      * Calls the touched callback only if the panel is closed. Otherwise, the trigger will
@@ -336,9 +452,10 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     onBlur(): void;
     /**
      * Callback that is invoked when the overlay panel has been attached.
+     * Sets up position change subscription and closing actions.
      */
     onAttached(): void;
-    /** Returns the theme to be used on the panel. */
+    /** Returns the theme to be used on the panel based on parent form field color. */
     getPanelTheme(): string;
     /** Focuses the select element. */
     focus(): void;
@@ -347,34 +464,77 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
      * @docs-private
      */
     onContainerClick(): void;
-    /** Invoked when an option is clicked. */
+    /**
+     * Handles removal of a matched item in the trigger.
+     * @param option The option to remove from selection.
+     * @param $event The mouse event that triggered the removal.
+     */
     onRemoveMatcherItem(option: KbqOptionBase, $event: any): void;
+    /**
+     * Calculates the number of hidden items in multiple selection mode.
+     * Updates the hiddenItems property and triggers change detection.
+     */
     calculateHiddenItems: () => void;
+    /**
+     * Gets the height of a single option item.
+     * @returns The height in pixels of the first option, or 0 if no options exist.
+     */
     getItemHeight(): number;
+    /**
+     * Handles click events on the select.
+     * Closes the panel if click is inside the footer.
+     * @param $event The mouse event to handle.
+     */
     handleClick($event: MouseEvent): void;
     /** @docs-private */
     setSelectedOptionsByClick(option: KbqOption): void;
     /** @docs-private */
     protected shouldShowSearch(): boolean;
+    /** Updates locale parameters from the locale service. */
     private updateLocaleParams;
+    /** Checks if the component is currently visible in the viewport. */
     private isVisible;
+    /** Gets the current overlay position index in the container. */
     private currentOverlayPosition;
+    /** Gets the position index of modal overlay in the container. */
     private modalOverlayPosition;
+    /**
+     * Creates an observable of actions that should close the select panel.
+     * Includes outside pointer events and overlay detachments.
+     */
     private closingActions;
+    /** Gets the height of the options container element. */
     private getHeightOfOptionsContainer;
+    /** Updates the keyboard manager scroll size based on options container height. */
     private updateScrollSize;
+    /** Calculates the total width of all selected items in the matcher. */
     private getTotalItemsWidthInMatcher;
+    /**
+     * Calculates the width of a single item including margins.
+     * @param element The DOM element to measure.
+     * @returns Total width including margins and gap.
+     */
     private getItemWidth;
     /** Handles keyboard events while the select is closed. */
     private handleClosedKeydown;
-    /** Handles keyboard events when the selected is open. */
+    /** Handles keyboard events when the select is open. */
     private handleOpenKeydown;
+    /**
+     * Initializes the selection based on the current value.
+     * Defers execution to avoid change detection errors.
+     */
     private initializeSelection;
     /**
-     * Sets the selected option based on a value. If no option can be
-     * found with the designated value, the select trigger is cleared.
+     * Sets the selected option based on a value.
+     * If no option can be found with the designated value, the select trigger is cleared.
+     * @param value The value to select. Can be a single value or array for multiple selection.
      */
     private setSelectionByValue;
+    /**
+     * Finds the option that corresponds to the given value.
+     * @param value The value to find.
+     * @returns The matching option or undefined if not found.
+     */
     private getCorrespondOption;
     /**
      * Finds and selects and option based on its value.
@@ -387,7 +547,7 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     private resetOptions;
     /** Invoked when an option is clicked. */
     private onSelect;
-    /** Sorts the selected values in the selected based on their order in the panel. */
+    /** Sorts the selected values based on their order in the panel. */
     private sortValues;
     /** Emits change event to set the model value. */
     private propagateChanges;
@@ -404,10 +564,22 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     private _compareWith;
     /** Function for handling the combination Ctrl + A (select all). By default, the internal handler is used. */
     private _selectAllHandler;
+    /**
+     * Calculates the total width and count of visible items.
+     * @returns Tuple of [totalVisibleItemsWidth, visibleItemsCount].
+     */
     private getTotalVisibleItems;
+    /**
+     * Creates a hidden clone of the trigger element for width calculations.
+     * @returns Clone of the trigger element positioned off-screen.
+     */
     private buildTriggerClone;
+    /** Adds the dropdown class to the overlay container when first select opens. */
+    private addClassToOverlayContainer;
+    /** Removes the dropdown class from the overlay container when select closes. */
+    private removeClassFromOverlayContainer;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; host: true; }, { optional: true; self: true; }, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "showPreselectedValues": { "alias": "showPreselectedValues"; "required": false; }; "triggerValuesLimit": { "alias": "triggerValuesLimit"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "beforeOpened": "beforeOpened"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "searchEmpty", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], true, never>;
     static ngAcceptInputType_multiline: unknown;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_panelMinWidth: unknown;

package/select/select.module.d.ts

@@ -8,9 +8,10 @@ import * as i6 from "@angular/common";
 import * as i7 from "@angular/cdk/a11y";
 import * as i8 from "./select.component";
 import * as i9 from "./select-option.directive";
-import * as i10 from "@koobiq/components/form-field";
+import * as i10 from "./select-common";
+import * as i11 from "@koobiq/components/form-field";
 export declare class KbqSelectModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSelectModule, never, [typeof i1.OverlayModule, typeof i2.KbqOptionModule, typeof i3.KbqIconModule, typeof i4.KbqTagsModule, typeof i5.KbqToolTipModule, typeof i2.KbqSelectSearch, typeof i2.KbqSelectFooter, typeof i2.KbqSelectMatcher, typeof i2.KbqSelectTrigger, typeof i2.KbqSelectSearchEmptyResult, typeof i6.NgClass, typeof i6.NgTemplateOutlet, typeof i7.A11yModule, typeof i8.KbqSelect, typeof i9.KbqOptionTooltip], [typeof i8.KbqSelect, typeof i9.KbqOptionTooltip, typeof i2.KbqOptionModule, typeof i2.KbqSelectSearch, typeof i2.KbqSelectFooter, typeof i2.KbqSelectMatcher, typeof i2.KbqSelectTrigger, typeof i2.KbqSelectSearchEmptyResult, typeof i10.KbqFormFieldModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSelectModule, never, [typeof i1.OverlayModule, typeof i2.KbqOptionModule, typeof i3.KbqIconModule, typeof i4.KbqTagsModule, typeof i5.KbqToolTipModule, typeof i2.KbqSelectSearch, typeof i2.KbqSelectFooter, typeof i2.KbqSelectMatcher, typeof i2.KbqSelectTrigger, typeof i2.KbqSelectSearchEmptyResult, typeof i6.NgClass, typeof i6.NgTemplateOutlet, typeof i7.A11yModule, typeof i8.KbqSelect, typeof i9.KbqOptionTooltip, typeof i10.KbqSelectLoading, typeof i10.KbqSelectError, typeof i10.KbqSelectNoOptions, typeof i10.KbqSelectErrorText], [typeof i8.KbqSelect, typeof i9.KbqOptionTooltip, typeof i2.KbqOptionModule, typeof i2.KbqSelectSearch, typeof i2.KbqSelectFooter, typeof i2.KbqSelectMatcher, typeof i2.KbqSelectTrigger, typeof i2.KbqSelectSearchEmptyResult, typeof i10.KbqSelectLoading, typeof i11.KbqFormFieldModule, typeof i10.KbqSelectError, typeof i10.KbqSelectNoOptions, typeof i10.KbqSelectErrorText]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqSelectModule>;
 }

package/sidepanel/sidepanel-config.d.ts

@@ -1,4 +1,4 @@
-import { InjectionToken } from '@angular/core';
+import { InjectionToken, Injector } from '@angular/core';
 /** Injection token that can be used to access the data that was passed in to a sidepanel. */
 export declare const KBQ_SIDEPANEL_DATA: InjectionToken<any>;
 export declare enum KbqSidepanelPosition {
@@ -35,4 +35,9 @@ export declare class KbqSidepanelConfig<D = any> {
     disableClose?: boolean;
     /** Custom class for the overlay pane. */
     overlayPanelClass?: string | string[];
+    /**
+     * Injector used for the instantiation of the component to be attached.
+     * Allows to pass a custom injector to provide a dependency injection hierarchy for the sidepanel content.
+     */
+    injector?: Injector;
 }

package/skeleton/skeleton.d.ts

@@ -1,13 +1,17 @@
+import { OnDestroy } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Component representing a skeleton placeholder.
+ * Directive representing a skeleton placeholder.
  */
-export declare class KbqSkeleton {
+export declare class KbqSkeleton implements OnDestroy {
+    private readonly styleLoader;
     private readonly element;
     private readonly window;
-    private readonly createdAt;
+    /** Whether the skeleton is enabled. */
+    readonly enabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     constructor();
+    ngOnDestroy(): void;
     private syncAnimation;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSkeleton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSkeleton, "kbq-skeleton", ["kbqSkeleton"], {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSkeleton, "kbq-skeleton, [kbqSkeleton]", ["kbqSkeleton"], { "enabled": { "alias": "kbqSkeleton"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/skeleton/skeleton.scss

@@ -8,22 +8,35 @@
     }
 }
 
-.kbq-skeleton {
+.kbq-skeleton:not(.kbq-skeleton_disabled) {
     --kbq-skeleton-min-height: var(--kbq-size-l);
     --kbq-skeleton-animation-duration: 1200ms;
     --kbq-skeleton-animation-delay: 0ms;
     --kbq-skeleton-border-radius: var(--kbq-size-xxs);
     --kbq-skeleton-wave-width: 100px;
+    --kbq-skeleton-z-index: 1;
+
+    &:is(kbq-skeleton) {
+        display: flex;
+        min-height: var(--kbq-skeleton-min-height);
+        border-radius: var(--kbq-skeleton-border-radius);
+    }
 
     position: relative;
-    display: flex;
-    min-height: var(--kbq-skeleton-min-height);
-    border-radius: var(--kbq-skeleton-border-radius);
-    background-color: var(--kbq-skeleton-background);
     overflow: hidden;
     clip-path: inset(0);
     user-select: none;
     pointer-events: none;
+    border-color: transparent;
+    outline-color: transparent;
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: var(--kbq-skeleton-background);
+        z-index: var(--kbq-skeleton-z-index);
+    }
 
     &::after {
         content: '';
@@ -31,6 +44,7 @@
         inset-block: 0;
         left: calc(var(--kbq-skeleton-wave-width) * -1);
         width: var(--kbq-skeleton-wave-width);
+        z-index: var(--kbq-skeleton-z-index);
         background: linear-gradient(
             90deg,
             var(--kbq-skeleton-animation-wave-start) 0%,