@koobiq/components 20.1.0 → 20.3.0

package/tree-select/index.d.ts

@@ -1,12 +1,12 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, Provider, AfterContentInit, AfterViewInit, OnDestroy, OnInit, DoCheck, ElementRef, ChangeDetectorRef, QueryList, TemplateRef, EventEmitter } from '@angular/core';
+import { InjectionToken, AfterContentInit, AfterViewInit, OnDestroy, OnInit, DoCheck, ElementRef, ChangeDetectorRef, QueryList, TemplateRef, EventEmitter, Provider } from '@angular/core';
 import * as _angular_cdk_overlay_module_d from '@angular/cdk/overlay-module.d';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i1 from '@angular/cdk/overlay';
 import { ConnectedPosition, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { ControlValueAccessor, NgForm, FormGroupDirective, NgControl } from '@angular/forms';
 import * as i5 from '@koobiq/components/core';
-import { KbqAbstractSelect, CanUpdateErrorState, ErrorStateMatcher, KbqSelectTrigger, KbqSelectMatcher, KbqSelectSearch, KbqSelectAllEvent, KbqComponentColors } from '@koobiq/components/core';
+import { KbqPanelWidth, KbqPanelMinWidth, KbqPanelMaxWidth, KbqPanelMaxHeight, KbqAbstractSelect, CanUpdateErrorState, KbqSiblingPopup, ErrorStateMatcher, KbqSelectTrigger, KbqSelectMatcher, KbqSelectSearch, KbqSelectAllEvent, KbqComponentColors } from '@koobiq/components/core';
 import * as i9 from '@koobiq/components/form-field';
 import { KbqFormFieldControl, KbqCleaner } from '@koobiq/components/form-field';
 import * as i4 from '@koobiq/components/tags';
@@ -24,19 +24,32 @@ type KbqTreeSelectTriggerValue = {
     value: string;
     viewValue: string;
 };
-/** Tree select panel width type. */
-type KbqTreeSelectPanelWidth = 'auto' | number | null;
+/**
+ * Tree select panel width type.
+ * @deprecated Use `KbqPanelWidth` from `@koobiq/components/core` instead.
+ */
+type KbqTreeSelectPanelWidth = KbqPanelWidth;
 /** Options for the `kbq-tree-select` that can be configured using the `KBQ_TREE_SELECT_OPTIONS` injection token. */
 type KbqTreeSelectOptions = Partial<{
     /**
      * 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.
      */
-    panelWidth: KbqTreeSelectPanelWidth;
+    panelWidth: KbqPanelWidth;
     /**
      * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
      */
-    panelMinWidth: Exclude<KbqTreeSelectPanelWidth, 'auto'>;
+    panelMinWidth: KbqPanelMinWidth;
+    /**
+     * Maximum width of the panel. Caps growth by content only — it never overrides the trigger width or an
+     * explicit `panelWidth`. If null, the `--kbq-panel-size-width-max` token applies.
+     */
+    panelMaxWidth: KbqPanelMaxWidth;
+    /**
+     * Maximum height of the panel's scrollable option list. Does not include the search field or the
+     * footer. If null, the `--kbq-select-panel-size-max-height` token applies.
+     */
+    panelMaxHeight: KbqPanelMaxHeight;
     /**
      * Whether to enable hiding search by default if options is less than minimum.
      *
@@ -52,11 +65,21 @@ declare const KBQ_TREE_SELECT_OPTIONS: InjectionToken<Partial<{
      * 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.
      */
-    panelWidth: KbqTreeSelectPanelWidth;
+    panelWidth: KbqPanelWidth;
     /**
      * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
      */
-    panelMinWidth: Exclude<KbqTreeSelectPanelWidth, "auto">;
+    panelMinWidth: KbqPanelMinWidth;
+    /**
+     * Maximum width of the panel. Caps growth by content only — it never overrides the trigger width or an
+     * explicit `panelWidth`. If null, the `--kbq-panel-size-width-max` token applies.
+     */
+    panelMaxWidth: KbqPanelMaxWidth;
+    /**
+     * Maximum height of the panel's scrollable option list. Does not include the search field or the
+     * footer. If null, the `--kbq-select-panel-size-max-height` token applies.
+     */
+    panelMaxHeight: KbqPanelMaxHeight;
     /**
      * Whether to enable hiding search by default if options is less than minimum.
      *
@@ -76,7 +99,7 @@ declare class KbqTreeSelectChange {
     values?: unknown[] | undefined;
     constructor(source: KbqTreeSelect, value: any, isUserInput?: boolean, values?: unknown[] | undefined);
 }
-declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentInit, AfterViewInit, OnDestroy, OnInit, DoCheck, ControlValueAccessor, KbqFormFieldControl<KbqTreeOption>, CanUpdateErrorState {
+declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentInit, AfterViewInit, OnDestroy, OnInit, DoCheck, ControlValueAccessor, KbqFormFieldControl<KbqTreeOption>, CanUpdateErrorState, KbqSiblingPopup {
     elementRef: ElementRef<HTMLElement>;
     readonly changeDetectorRef: ChangeDetectorRef;
     private readonly ngZone;
@@ -115,16 +138,25 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     /** Strategy that will be used to handle scrolling while the select panel is open. */
     scrollStrategy: _angular_cdk_overlay_module_d.ScrollStrategy;
     /**
-     * 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.
-     * when the panel opens. Will change based on the y-position of the selected option.
+     * The y-offset of the overlay panel in relation to the trigger.
+     *
+     * @deprecated noop. The trigger↔panel gap is now controlled by the `--kbq-connected-overlay-gap` CSS
+     * variable (transparent padding inside the pane via the `kbq-connected-overlay_below/_above` panel
+     * classes), not by a physical overlay offset — so setting this has no effect. Will be removed in 21.0.0.
      */
     offsetY: number;
     /**
-     * This position config ensures that the top "start" corner of the overlay
-     * is aligned with with the top "start" of the origin by default (overlapping
-     * the trigger completely). If the panel cannot fit below the trigger, it
-     * will fall back to a position above the trigger.
+     * Minimum space to keep between the overlay and the viewport edge.
+     * At least `defaultOffsetY` so CDK's fit check — which runs before the `kbq-connected-overlay_below/_above`
+     * gap padding is applied to the pane — stays conservative enough to absorb that padding instead of
+     * letting the panel overflow the viewport by the size of the gap.
+     */
+    protected readonly viewportMargin: number;
+    /**
+     * Opens the panel below the trigger, falling back to above it when it does not fit.
+     *
+     * A third position is appended at runtime by `updatePanelAnchor`: a multiline trigger that has grown
+     * taller than the panel gets it anchored to its first row and drawn over the rest of it.
      */
     positions: ConnectedPosition[];
     options: QueryList<KbqTreeOption>;
@@ -132,9 +164,16 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
      * Trigger - is a clickable field to open select dropdown panel
      */
     readonly trigger: _angular_core.Signal<ElementRef<any>>;
-    readonly panel: _angular_core.Signal<ElementRef<any>>;
+    /** Reference to the overlay panel element. */
+    readonly panel: _angular_core.Signal<ElementRef<any> | undefined>;
+    /** Scrollable option list inside the panel. */
+    protected readonly optionsContainer: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
     overlayDir: CdkConnectedOverlay;
     tags: QueryList<KbqTag>;
+    /**
+     * Reference to the optional cleaner element for clearing selection.
+     * @docs-private
+     */
     readonly cleaner: _angular_core.Signal<KbqCleaner | undefined>;
     /** User-supplied override of the trigger element. */
     readonly customTrigger: _angular_core.Signal<KbqSelectTrigger | undefined>;
@@ -143,7 +182,12 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     readonly tree: _angular_core.Signal<KbqTreeSelection | undefined>;
     readonly search: _angular_core.Signal<KbqSelectSearch | undefined>;
     hiddenItemsText: string;
-    /** Event emitted when the select panel has been toggled. */
+    /**
+     * Event emitted when the select panel has been toggled.
+     * Also serves as the `openedChange` member of the `KbqSiblingPopup` contract — a tooltip sharing
+     * this element's host reacts to it, so its emission timing (gated on `panelDoneAnimatingStream`, see
+     * `ngOnInit`) matters beyond this output's original consumers.
+     */
     readonly openedChange: EventEmitter<boolean>;
     /** Event emitted when the select has been opened. */
     readonly openedStream: Observable<void>;
@@ -152,8 +196,8 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     /** Event emitted when the selected value has been changed by the user. */
     readonly selectionChange: _angular_core.OutputEmitterRef<KbqTreeSelectChange>;
     /**
-     * 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.
+     * Event emitted whenever the tree's `selectAllOptions()` runs — a click on the `selectAll` master
+     * checkbox, the Ctrl/Cmd + A shortcut, or a custom `selectAllHandler` that delegates to it.
      */
     readonly onSelectAll: _angular_core.OutputEmitterRef<KbqSelectAllEvent<KbqTreeOption, KbqTreeSelect>>;
     /**
@@ -196,6 +240,15 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     private _autoSelect;
     /** When `true`, a repeated Ctrl/Cmd+A deselects all options. Off by default (Ctrl+A only selects). */
     readonly selectAllToggle: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to render the "select all" master checkbox above the tree. Multiple selection only.
+     *
+     * The row acts on the nodes the user can actually toggle — enabled and selectable. Without a search
+     * query that covers the whole data set, collapsed branches included; while a query is active it
+     * covers only the matches. Enabling it also makes Ctrl/Cmd + A a two-way toggle, so the shortcut and
+     * the checkbox never disagree (`selectAllToggle` is implied).
+     */
+    readonly selectAll: _angular_core.InputSignalWithTransform<boolean, unknown>;
     get value(): any;
     get id(): string;
     set id(value: string);
@@ -222,22 +275,39 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     /** Whether multiple choice is enabled or not. True if multiple or multiline */
     get multiSelection(): boolean;
     private _focused;
-    /** Width of the overlay panel. */
-    protected overlayWidth: string | number;
-    /** Min width of the overlay panel. */
-    protected overlayMinWidth: string | number;
     /**
      * Minimum width of the panel.
      * If minWidth is larger than window width, it will be ignored.
      */
-    readonly panelMinWidth: _angular_core.InputSignalWithTransform<number | null, unknown>;
+    readonly panelMinWidth: _angular_core.InputSignalWithTransform<KbqPanelMinWidth, unknown>;
     /** Origin for the overlay panel. */
     protected overlayOrigin?: CdkOverlayOrigin | ElementRef;
     /**
-     * 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.
+     * Width of the panel. If set to `auto`, the panel will match the trigger width, but will never be
+     * narrower than `panelMinWidth`. If set to null or an empty string, the panel will grow to match the
+     * longest option's text. Any other value is used as an exact width, and `panelMinWidth` is not applied.
+     */
+    readonly panelWidth: _angular_core.InputSignal<KbqPanelWidth>;
+    /**
+     * Maximum width of the panel in pixels. Caps how far the panel grows with its content — it never makes
+     * the panel narrower than the trigger, and never clamps an explicit `panelWidth`.
+     * When null, the `--kbq-panel-size-width-max` token applies.
+     */
+    readonly panelMaxWidth: _angular_core.InputSignalWithTransform<KbqPanelMaxWidth, unknown>;
+    /**
+     * Maximum height of the panel's scrollable option list, in pixels. Applied as the
+     * `--kbq-select-panel-size-max-height` custom property on the panel.
+     *
+     * The search field and the footer sit outside the scrollable area and add to the panel's total height.
+     * When null, the token default (256px) applies.
      */
-    readonly panelWidth: _angular_core.InputSignal<KbqTreeSelectPanelWidth>;
+    readonly panelMaxHeight: _angular_core.InputSignalWithTransform<KbqPanelMaxHeight, unknown>;
+    /**
+     * `panelMaxHeight` rendered as a CSS length for the `--kbq-select-panel-size-max-height` token.
+     * A non-finite value (e.g. `null`) leaves the stylesheet default in place.
+     * @docs-private
+     */
+    protected readonly panelMaxHeightToken: _angular_core.Signal<string | null>;
     /**
      * Controls when the search functionality is displayed based on the number of available options.
      *
@@ -248,6 +318,12 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     get searchMinOptionsThreshold(): number | undefined;
     private _searchMinOptionsThreshold;
     get panelOpen(): boolean;
+    /** Whether the overlay panel is currently on screen. Part of the `KbqSiblingPopup` contract. */
+    get isAttached(): boolean;
+    /**
+     * Whether the cleaner (clear button) should be shown.
+     * @docs-private
+     */
     get canShowCleaner(): boolean;
     /** @docs-private */
     get colorForState(): KbqComponentColors;
@@ -256,13 +332,12 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     private closeSubscription;
     private _panelOpen;
     private originalOnKeyDown;
-    /** The scroll position of the overlay panel, calculated to center the selected option. */
+    /** The scroll offset the panel is restored to when it attaches — the list always opens at the top. */
     private scrollTop;
     /** Unique id for this input. */
     private readonly uid;
     private tempValues;
     private readonly destroyRef;
-    private readonly window;
     constructor();
     ngOnInit(): void;
     ngDoCheck(): void;
@@ -271,7 +346,17 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     ngOnDestroy(): void;
     updateErrorState(): void;
     hiddenItemsTextFormatter(hiddenItemsText: string, hiddenItems: number): string;
-    clearValue($event: any): void;
+    /**
+     * Clears the current selection.
+     * @docs-private
+     */
+    clear(): void;
+    /**
+     * Clears the current selection.
+     * @deprecated Activate the projected `KbqCleaner` instead.
+     * @docs-private
+     */
+    clearValue(event: Event): void;
     /** `View -> model callback called when value changes` */
     onChange: (value: any) => void;
     /** `View -> model callback called when select has been touched` */
@@ -326,6 +411,9 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     onBlur(): void;
     /** Callback that is invoked when the overlay panel has been attached. */
     onAttached(): void;
+    /** Element the overlay is positioned and sized against. */
+    protected getOverlayOriginElement(): HTMLElement | undefined;
+    protected isPanelOpen(): boolean;
     /** Returns the theme to be used on the panel. */
     getPanelTheme(): string;
     /** Returns the full set of classes for the panel: base class, theme and custom `panelClass`. */
@@ -340,16 +428,20 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     onRemoveSelectedOption(selectedOption: any, $event: any): void;
     calculateHiddenItems: () => void;
     triggerKeydownHandler(event: KeyboardEvent): void;
-    panelKeydownHandler(event: KeyboardEvent): any;
+    panelKeydownHandler(event: KeyboardEvent): void;
     /** @docs-private */
     protected shouldShowSearch(): boolean;
     private updateLocaleParams;
     private closingActions;
     private getTotalItemsWidthInMatcher;
     private getTotalVisibleItems;
-    /** Gets how wide the overlay panel should be. */
-    private getOverlayWidth;
     private buildTriggerClone;
+    /**
+     * Width of a single `kbq-tag` in the matcher, including margins and the inter-tag gap.
+     *
+     * Tags are `border-box` and carry horizontal padding, which `getComputedStyle().width` — always
+     * the used content-box width — leaves out. See the twin in `KbqSelect`.
+     */
     private getItemWidth;
     private refreshTriggerValues;
     /**
@@ -365,11 +457,10 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
      * the first item instead.
      */
     private highlightCorrectOption;
-    /** Scrolls the active option into view. */
     private scrollActiveOptionIntoView;
     private subscribeOnSearchChanges;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqTreeSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelMaxWidth": { "alias": "panelMaxWidth"; "required": false; "isSignal": true; }; "panelMaxHeight": { "alias": "panelMaxHeight"; "required": false; "isSignal": true; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], true, never>;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_disabled: unknown;
 }

package/accordion/accordion.component.scss

@@ -1,50 +0,0 @@
-@use './accordion-theme' as *;
-
-.kbq-accordion {
-    display: block;
-}
-
-.kbq-accordion-item {
-    box-sizing: border-box;
-    display: block;
-
-    border-width: 2px;
-    border-style: solid;
-    border-color: transparent;
-}
-
-.kbq-accordion-header {
-    display: flex;
-
-    height: var(--kbq-accordion-size-item-header-height);
-}
-
-.kbq-accordion-content {
-    display: block;
-    overflow: hidden;
-
-    & > p {
-        margin: unset;
-        padding: var(--kbq-accordion-size-item-content-padding);
-    }
-
-    &[data-state='open'] {
-        transition: height 300ms ease-out;
-        height: var(--radix-accordion-content-height);
-    }
-
-    &[data-state='closed'] {
-        transition: height 300ms ease-out;
-        height: 0;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        &[data-state='open'],
-        &[data-state='closed'] {
-            transition: none;
-        }
-    }
-}
-
-@include kbq-accordion-theme();
-@include kbq-accordion-typography();

package/core/styles/_tokens.kbq.import.scss

@@ -1,4 +0,0 @@
-@import '../../../../node_modules/@koobiq/design-tokens/web/variables';
-@import '../../../../node_modules/@koobiq/design-tokens/web/palette';
-@import '../../../../node_modules/@koobiq/design-tokens/web/typography';
-@import '../../../../node_modules/@koobiq/design-tokens/web/md-typography';