@koobiq/components 20.0.0 → 20.2.0

package/tree-select/index.d.ts

@@ -6,7 +6,7 @@ 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, KbqComponentColors } from '@koobiq/components/core';
+import { KbqPanelWidth, KbqPanelMinWidth, KbqPanelMaxWidth, KbqAbstractSelect, CanUpdateErrorState, 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,27 @@ 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;
     /**
      * Whether to enable hiding search by default if options is less than minimum.
      *
@@ -52,11 +60,16 @@ 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;
     /**
      * Whether to enable hiding search by default if options is less than minimum.
      *
@@ -115,11 +128,20 @@ 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;
+    /**
+     * 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;
     /**
      * 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
@@ -132,7 +154,8 @@ 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>;
     overlayDir: CdkConnectedOverlay;
     tags: QueryList<KbqTag>;
     readonly cleaner: _angular_core.Signal<KbqCleaner | undefined>;
@@ -151,6 +174,11 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     readonly closedStream: Observable<void>;
     /** 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.
+     */
+    readonly onSelectAll: _angular_core.OutputEmitterRef<KbqSelectAllEvent<KbqTreeOption, KbqTreeSelect>>;
     /**
      * 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.
@@ -189,6 +217,8 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     get autoSelect(): boolean;
     set autoSelect(value: boolean);
     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>;
     get value(): any;
     get id(): string;
     set id(value: string);
@@ -215,22 +245,25 @@ 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 panelWidth: _angular_core.InputSignal<KbqTreeSelectPanelWidth>;
+    readonly panelMaxWidth: _angular_core.InputSignalWithTransform<KbqPanelMaxWidth, unknown>;
     /**
      * Controls when the search functionality is displayed based on the number of available options.
      *
@@ -340,8 +373,6 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     private closingActions;
     private getTotalItemsWidthInMatcher;
     private getTotalVisibleItems;
-    /** Gets how wide the overlay panel should be. */
-    private getOverlayWidth;
     private buildTriggerClone;
     private getItemWidth;
     private refreshTriggerValues;
@@ -362,7 +393,7 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     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; }; "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"; "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; }; "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; }; "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/username/index.d.ts

@@ -165,6 +165,24 @@ declare class KbqUsernameCustomPipe<T = unknown> implements PipeTransform {
     static ɵpipe: i0.ɵɵPipeDeclaration<KbqUsernameCustomPipe<any>, "kbqUsernameCustom", true>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KbqUsernameCustomPipe<any>>;
 }
+interface KbqUsernameTextOptions {
+    /** Formats the login segment. Defaults to identity. */
+    formatLogin?: (login: string) => string;
+    /**
+     * Formats the site segment.
+     * Defaults to wrapping in parentheses, matching kbq-username display.
+     */
+    formatSite?: (site: string) => string;
+}
+/**
+ * Builds a full username string from a pre-formatted name plus optional login and site,
+ * mirroring the text rendered by `kbq-username`.
+ *
+ * Provide custom `formatLogin` / `formatSite` to tailor the output.
+ */
+declare function kbqBuildUsernameText(data: {
+    name: string;
+} & Partial<Pick<KbqUserInfo, 'login' | 'site'>>, options?: KbqUsernameTextOptions): string;
 
 declare class KbqUsernameModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqUsernameModule, never>;
@@ -172,5 +190,5 @@ declare class KbqUsernameModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqUsernameModule>;
 }
 
-export { KBQ_PROFILE_MAPPING, KbqMappingMissingError, KbqUsername, KbqUsernameCustomPipe, KbqUsernameCustomView, KbqUsernameFormatKey, KbqUsernameModule, KbqUsernamePipe, KbqUsernamePrimary, KbqUsernameSecondary, KbqUsernameSecondaryHint, kbqDefaultFullNameFormat, kbqDefaultFullNameFormatCustom };
-export type { KbqFormatKeyToProfileMapping, KbqFormatKeyToProfileMappingExtended, KbqUserInfo, KbqUsernameMode, KbqUsernameStyle };
+export { KBQ_PROFILE_MAPPING, KbqMappingMissingError, KbqUsername, KbqUsernameCustomPipe, KbqUsernameCustomView, KbqUsernameFormatKey, KbqUsernameModule, KbqUsernamePipe, KbqUsernamePrimary, KbqUsernameSecondary, KbqUsernameSecondaryHint, kbqBuildUsernameText, kbqDefaultFullNameFormat, kbqDefaultFullNameFormatCustom };
+export type { KbqFormatKeyToProfileMapping, KbqFormatKeyToProfileMappingExtended, KbqUserInfo, KbqUsernameMode, KbqUsernameStyle, KbqUsernameTextOptions };