@koobiq/components 19.8.1 → 20.0.0

package/tree/tree-option.scss

@@ -36,13 +36,6 @@
 
     gap: var(--kbq-tree-size-container-content-gap-horizontal);
 
-    & > *[kbqtreenodetoggle],
-    & > .kbq-tree-node-toggle,
-    & > .kbq-pseudo-checkbox {
-        margin-top: var(--kbq-size-3xs);
-        align-self: flex-start;
-    }
-
     & .kbq-option-text {
         @include common.kbq-line-wrapper-base();
         display: inline-block;
@@ -53,6 +46,26 @@
         padding-bottom: var(--kbq-list-size-text-padding-vertical, 0);
     }
 
+    // Two-line options only: align leading content to the center of the FIRST line.
+    &:has(.kbq-option-caption) {
+        & > [kbq-tree-node-toggle],
+        & > [kbqTreeNodeToggle],
+        & > .kbq-tree-node-toggle,
+        & > .kbq-pseudo-checkbox,
+        & > kbq-checkbox,
+        & > [kbq-icon],
+        & > kbq-progress-spinner {
+            align-self: flex-start;
+            // (20px line-height − 16px element box) / 2 = 2px
+            margin-top: var(--kbq-size-3xs);
+        }
+
+        & > .kbq-tree-node-toggle {
+            height: var(--kbq-typography-text-normal-line-height);
+            margin-top: 0;
+        }
+    }
+
     &:focus {
         outline: none;
     }

package/tree-select/_tree-select-theme.scss

@@ -1,4 +1,5 @@
 @use '../core/styles/common/tokens' as *;
+@use '../tree/tree-theme' as tree-theme;
 
 @mixin kbq-tree-select-theme() {
     .kbq-tree-select {
@@ -34,6 +35,44 @@
         box-shadow: var(--kbq-select-panel-dropdown-shadow);
         background: var(--kbq-select-panel-dropdown-background);
 
+        .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled) {
+            &:hover:not(.kbq-focused),
+            &.kbq-hovered:not(.kbq-focused) {
+                @include tree-theme.kbq-tree-option(default);
+            }
+
+            &.kbq-focused {
+                @include tree-theme.kbq-tree-option(states-hover);
+            }
+
+            &.kbq-selected {
+                &:hover:not(.kbq-focused),
+                &.kbq-hovered:not(.kbq-focused) {
+                    @include tree-theme.kbq-tree-option(states-selected);
+                }
+
+                &.kbq-focused {
+                    @include tree-theme.kbq-tree-option(states-selected-hover);
+                }
+            }
+
+            &.kbq-checked:not(.kbq-selected),
+            &.kbq-tree-option_multiple.kbq-selected {
+                &:hover:not(.kbq-focused),
+                &.kbq-hovered:not(.kbq-focused) {
+                    background: var(--kbq-tree-multiple-states-selected-container-background);
+                }
+
+                &.kbq-focused {
+                    background: var(--kbq-tree-multiple-states-selected-hover-container-background);
+                }
+            }
+
+            &.kbq-focused:not(.kbq-action-button-focused) {
+                border-color: transparent;
+            }
+        }
+
         & .kbq-select__footer {
             border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
         }

package/tree-select/index.d.ts

@@ -1 +1,377 @@
-export * from './public-api';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Provider, AfterContentInit, AfterViewInit, OnDestroy, OnInit, DoCheck, ElementRef, ChangeDetectorRef, QueryList, TemplateRef, EventEmitter } 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, 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';
+import { KbqTag } from '@koobiq/components/tags';
+import * as i2 from '@koobiq/components/tree';
+import { KbqTreeOption, KbqTreeSelection } from '@koobiq/components/tree';
+import { Subject, Observable } from 'rxjs';
+import * as i3 from '@koobiq/components/icon';
+import * as i6 from '@angular/common';
+import * as i7 from '@angular/cdk/a11y';
+
+/** Tree select trigger value type. */
+type KbqTreeSelectTriggerValue = {
+    disabled: boolean;
+    value: string;
+    viewValue: string;
+};
+/** Tree select panel width type. */
+type KbqTreeSelectPanelWidth = 'auto' | number | null;
+/** 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;
+    /**
+     * 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'>;
+    /**
+     * Whether to enable hiding search by default if options is less than minimum.
+     *
+     * - `'auto'` uses `KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD` as min value.
+     * - number - will enables search hiding and uses value as min.
+     * @see KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD
+     */
+    searchMinOptionsThreshold: 'auto' | number;
+}>;
+/** Injection token that can be used to provide the default options for the `kbq-tree-select`. */
+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;
+    /**
+     * 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">;
+    /**
+     * Whether to enable hiding search by default if options is less than minimum.
+     *
+     * - `'auto'` uses `KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD` as min value.
+     * - number - will enables search hiding and uses value as min.
+     * @see KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD
+     */
+    searchMinOptionsThreshold: "auto" | number;
+}>>;
+/** Utility provider for `KBQ_TREE_SELECT_OPTIONS`. */
+declare const kbqTreeSelectOptionsProvider: (options: KbqTreeSelectOptions) => Provider;
+/** Change event object that is emitted when the select value has changed. */
+declare class KbqTreeSelectChange {
+    source: KbqTreeSelect;
+    value: any;
+    isUserInput: boolean;
+    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 {
+    elementRef: ElementRef<HTMLElement>;
+    readonly changeDetectorRef: ChangeDetectorRef;
+    private readonly ngZone;
+    private readonly renderer;
+    defaultErrorStateMatcher: ErrorStateMatcher;
+    private readonly scrollStrategyFactory;
+    private readonly dir;
+    parentForm: NgForm | null;
+    parentFormGroup: FormGroupDirective | null;
+    private readonly parentFormField;
+    ngControl: NgControl | null;
+    private localeService;
+    protected readonly isBrowser: boolean;
+    private readonly defaultOptions;
+    /** Whether the component is in an error state. */
+    errorState: boolean;
+    /**
+     * Emits whenever the component state changes and should cause the parent
+     * form-field to update. Implemented as part of `KbqFormFieldControl`.
+     * @docs-private
+     */
+    readonly stateChanges: Subject<void>;
+    /** A name for this control that can be used by `kbq-form-field`. */
+    controlType: string;
+    hiddenItems: number;
+    /** The last measured value for the trigger's client bounding rect. */
+    triggerRect: DOMRect;
+    /** The cached font-size of the trigger element. */
+    triggerFontSize: number;
+    /** Deals with the selection logic. */
+    selectionModel: SelectionModel<any>;
+    /** The value of the select panel's transform-origin property. */
+    transformOrigin: string;
+    /** Emits when the panel element is finished transforming in. */
+    panelDoneAnimatingStream: Subject<string>;
+    /** 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.
+     */
+    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.
+     */
+    positions: ConnectedPosition[];
+    options: QueryList<KbqTreeOption>;
+    /**
+     * Trigger - is a clickable field to open select dropdown panel
+     */
+    readonly trigger: _angular_core.Signal<ElementRef<any>>;
+    readonly panel: _angular_core.Signal<ElementRef<any>>;
+    overlayDir: CdkConnectedOverlay;
+    tags: QueryList<KbqTag>;
+    readonly cleaner: _angular_core.Signal<KbqCleaner | undefined>;
+    /** User-supplied override of the trigger element. */
+    readonly customTrigger: _angular_core.Signal<KbqSelectTrigger | undefined>;
+    readonly customMatcher: _angular_core.Signal<KbqSelectMatcher | undefined>;
+    readonly customTagTemplateRef: _angular_core.Signal<TemplateRef<any> | undefined>;
+    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. */
+    readonly openedChange: EventEmitter<boolean>;
+    /** Event emitted when the select has been opened. */
+    readonly openedStream: Observable<void>;
+    /** Event emitted when the select has been closed. */
+    readonly closedStream: Observable<void>;
+    /** Event emitted when the selected value has been changed by the user. */
+    readonly selectionChange: _angular_core.OutputEmitterRef<KbqTreeSelectChange>;
+    /**
+     * 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.
+     * @docs-private
+     */
+    readonly valueChange: _angular_core.OutputEmitterRef<any>;
+    /** Classes to be passed to the select panel. Supports the same syntax as the `[class]` binding. */
+    readonly panelClass: _angular_core.InputSignal<string | string[] | Set<string> | {
+        [key: string]: any;
+    }>;
+    readonly backdropClass: _angular_core.InputSignal<string>;
+    /** Object used to control when error messages are shown. */
+    errorStateMatcher: ErrorStateMatcher;
+    /**
+     * Function used to sort the values in a select in multiple mode.
+     * Follows the same logic as `Array.prototype.sort`.
+     */
+    readonly sortComparator: _angular_core.InputSignal<(a: KbqTreeOption, b: KbqTreeOption, options: KbqTreeOption[]) => number>;
+    /**
+     * Whether to use a multiline matcher or not. Default is false
+     */
+    readonly multiline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Combined stream of all of the child options' change events. */
+    readonly optionSelectionChanges: Observable<KbqTreeSelectChange>;
+    /** Combined stream of all of the child options userInteraction events. */
+    readonly userInteractionChanges: Observable<void>;
+    get placeholder(): string;
+    set placeholder(value: string);
+    private _placeholder;
+    get required(): boolean;
+    set required(value: boolean);
+    private _required;
+    get multiple(): boolean;
+    set multiple(value: boolean);
+    private _multiple;
+    get autoSelect(): boolean;
+    set autoSelect(value: boolean);
+    private _autoSelect;
+    get value(): any;
+    get id(): string;
+    set id(value: string);
+    private _id;
+    get hasBackdrop(): boolean;
+    set hasBackdrop(value: boolean);
+    private _hasBackdrop;
+    get tabIndex(): number | null;
+    set tabIndex(value: number | null);
+    private _tabIndex;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    /**
+     * Function for handling the combination Ctrl + A (select all). By default, the internal handler is used.
+     */
+    get selectAllHandler(): (event: KeyboardEvent, select: KbqTreeSelect) => void;
+    set selectAllHandler(fn: (event: KeyboardEvent, select: KbqTreeSelect) => void);
+    /** Function for handling the combination Ctrl + A (select all). By default, the internal handler is used. */
+    private _selectAllHandler;
+    /** Whether the select is focused. */
+    get focused(): boolean;
+    set focused(value: boolean);
+    /** 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>;
+    /** 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.
+     */
+    readonly panelWidth: _angular_core.InputSignal<KbqTreeSelectPanelWidth>;
+    /**
+     * Controls when the search functionality is displayed based on the number of available options.
+     *
+     * Automatically enables search hiding if value provided, even if `defaultOptions.searchMinOptionsThreshold` is provided.
+     * @default undefined
+     */
+    set searchMinOptionsThreshold(value: 'auto' | number | undefined);
+    get searchMinOptionsThreshold(): number | undefined;
+    private _searchMinOptionsThreshold;
+    get panelOpen(): boolean;
+    get canShowCleaner(): boolean;
+    /** @docs-private */
+    get colorForState(): KbqComponentColors;
+    isEmptySearchResult: boolean;
+    triggerValues: KbqTreeSelectTriggerValue[];
+    private closeSubscription;
+    private _panelOpen;
+    private originalOnKeyDown;
+    /** The scroll position of the overlay panel, calculated to center the selected option. */
+    private scrollTop;
+    /** Unique id for this input. */
+    private readonly uid;
+    private tempValues;
+    private readonly destroyRef;
+    private readonly window;
+    constructor();
+    ngOnInit(): void;
+    ngDoCheck(): void;
+    ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    updateErrorState(): void;
+    hiddenItemsTextFormatter(hiddenItemsText: string, hiddenItems: number): string;
+    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;
+    handleClick(): void;
+    toggle(): void;
+    open(): void;
+    /** Closes the overlay panel and focuses the host element. */
+    close(): void;
+    /**
+     * Sets the select's value. Part of the ControlValueAccessor interface
+     * required to integrate with Angular's core forms API.
+     *
+     * @param value New value to be written to the model.
+     */
+    writeValue(value: any): void;
+    /**
+     * Saves a callback function to be invoked when the select's value
+     * changes from user input. Part of the ControlValueAccessor interface
+     * required to integrate with Angular's core forms API.
+     *
+     * @param fn Callback to be triggered when the value changes.
+     */
+    registerOnChange(fn: (value: any) => void): void;
+    /**
+     * Saves a callback function to be invoked when the select is blurred
+     * by the user. Part of the ControlValueAccessor interface required
+     * to integrate with Angular's core forms API.
+     *
+     * @param fn Callback to be triggered when the component has been touched.
+     */
+    registerOnTouched(fn: () => {}): void;
+    /**
+     * Disables the select. Part of the ControlValueAccessor interface required
+     * to integrate with Angular's core forms API.
+     *
+     * @param isDisabled Sets whether the component is disabled.
+     */
+    setDisabledState(isDisabled: boolean): void;
+    get selected(): any;
+    get selectedValues(): any;
+    get triggerValue(): string;
+    get empty(): boolean;
+    isRtl(): boolean;
+    get firstSelected(): any;
+    handleKeydown(event: KeyboardEvent): void;
+    onFocus(): void;
+    /**
+     * Calls the touched callback only if the panel is closed. Otherwise, the trigger will
+     * "blur" to the panel when it opens, causing a false positive.
+     */
+    onBlur(): void;
+    /** Callback that is invoked when the overlay panel has been attached. */
+    onAttached(): void;
+    /** 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`. */
+    protected getPanelClasses(): string;
+    focus(): void;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    onContainerClick(): void;
+    /** Invoked when an option is clicked. */
+    onRemoveSelectedOption(selectedOption: any, $event: any): void;
+    calculateHiddenItems: () => void;
+    triggerKeydownHandler(event: KeyboardEvent): void;
+    panelKeydownHandler(event: KeyboardEvent): any;
+    /** @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;
+    private getItemWidth;
+    private refreshTriggerValues;
+    /**
+     * Sets the selected option based on a value. If no option can be
+     * found with the designated value, the select trigger is cleared.
+     */
+    private setSelectionByValue;
+    private initKeyManager;
+    /** Sorts the selected values in the selected based on their order in the panel. */
+    private sortValues;
+    /**
+     * Highlights the selected item. If no option is selected, it will highlight
+     * 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; }; "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 ngAcceptInputType_multiple: unknown;
+    static ngAcceptInputType_disabled: unknown;
+}
+
+declare class KbqTreeSelectModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqTreeSelectModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqTreeSelectModule, never, [typeof i1.OverlayModule, typeof i2.KbqTreeModule, typeof i3.KbqIconModule, typeof i4.KbqTagsModule, typeof i5.KbqPseudoCheckboxModule, typeof i5.KbqSelectSearch, typeof i5.KbqSelectFooter, typeof i5.KbqSelectMatcher, typeof i5.KbqSelectTrigger, typeof i5.KbqSelectSearchEmptyResult, typeof i6.NgTemplateOutlet, typeof i7.A11yModule, typeof KbqTreeSelect], [typeof KbqTreeSelect, typeof i5.KbqSelectSearch, typeof i5.KbqSelectFooter, typeof i5.KbqSelectMatcher, typeof i5.KbqSelectTrigger, typeof i5.KbqSelectSearchEmptyResult, typeof i9.KbqFormFieldModule]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqTreeSelectModule>;
+}
+
+export { KBQ_TREE_SELECT_OPTIONS, KbqTreeSelect, KbqTreeSelectChange, KbqTreeSelectModule, kbqTreeSelectOptionsProvider };
+export type { KbqTreeSelectOptions, KbqTreeSelectPanelWidth, KbqTreeSelectTriggerValue };

package/username/index.d.ts

@@ -1,5 +1,176 @@
-export * from './constants';
-export * from './module';
-export * from './types';
-export * from './username';
-export * from './username.pipe';
+import * as i0 from '@angular/core';
+import { InjectionToken, PipeTransform } from '@angular/core';
+
+/**
+ * Keys for formatting username parts in short (initial) or full form.
+ */
+declare enum KbqUsernameFormatKey {
+    /**
+     * Short form of the first name (e.g., "John" → "J")
+     */
+    FirstNameShort = "f",
+    /**
+     * Full form of the first name (e.g., "John")
+     */
+    FirstNameFull = "F",
+    /**
+     * Short form of the middle name (e.g., "Henry" → "H")
+     */
+    MiddleNameShort = "m",
+    /**
+     * Full form of the middle name (e.g., "Henry")
+     */
+    MiddleNameFull = "M",
+    /**
+     * Short form of the last name (e.g., "Doe" → "D")
+     */
+    LastNameShort = "l",
+    /**
+     * Full form of the last name (e.g., "Doe")
+     */
+    LastNameFull = "L",
+    Dot = "."
+}
+/**
+ * Maps each format key to a property name in the user profile object.
+ * Allows flexible formatting regardless of profile field names.
+ */
+type KbqFormatKeyToProfileMapping<T = any> = {
+    [key in Exclude<KbqUsernameFormatKey, KbqUsernameFormatKey.FirstNameFull | KbqUsernameFormatKey.MiddleNameFull | KbqUsernameFormatKey.LastNameFull>]: keyof T | undefined;
+};
+/**
+ * Maps each format key to a property name in the user profile object.
+ * Allows flexible formatting regardless of profile field names.
+ * @see KbqUsernameCustomPipe
+ */
+type KbqFormatKeyToProfileMappingExtended<T = any> = {
+    [key in KbqUsernameFormatKey]: keyof T | undefined;
+};
+/**
+ * Layout mode for displaying a username and applying text-ellipsis.
+ *
+ * - `stacked`: Elements shown vertically.
+ * - `inline`: Elements shown in one line. Text ellipsis is applied to both parts.
+ * - `text`: Plain text, no layout styling. No text-ellipsis.
+ */
+type KbqUsernameMode = 'stacked' | 'inline' | 'text';
+/**
+ * Visual style of the username.
+ *
+ * - `default`: standard styling with primary and secondary colors.
+ * - `error`: error colors (e.g., red).
+ * - `accented`: no color theming; emphasizes via typography only.
+ * - `inherit`: inherits parent styles, no theming. For example, useful when using inside links.
+ */
+type KbqUsernameStyle = 'default' | 'error' | 'accented' | 'inherit';
+
+/** Default name format: Last name full, first and middle as initials. */
+declare const kbqDefaultFullNameFormatCustom = "L f. m.";
+/** Default name format: Last name full, first and middle as initials. */
+declare const kbqDefaultFullNameFormat = "lf.m.";
+/**
+ * Throws an error when no profile field mapping is provided to the username pipe.
+ * @docs-private
+ */
+declare function KbqMappingMissingError(): Error;
+/**
+ * Injection token for providing a global username format-to-profile mapping.
+ */
+declare const KBQ_PROFILE_MAPPING: InjectionToken<KbqFormatKeyToProfileMapping | KbqFormatKeyToProfileMappingExtended>;
+
+/**
+ * Basic user info
+ * @docs-private
+ */
+type KbqUserInfo = {
+    firstName?: string;
+    lastName?: string;
+    middleName?: string;
+    login?: string;
+    site?: string;
+};
+/** Styles the primary part of the username (e.g. full name). */
+declare class KbqUsernamePrimary {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUsernamePrimary, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqUsernamePrimary, "[kbqUsernamePrimary]", ["kbqUsernamePrimary"], {}, {}, never, never, true, never>;
+}
+/** Styles the secondary part. */
+declare class KbqUsernameSecondary {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUsernameSecondary, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqUsernameSecondary, "[kbqUsernameSecondary]", ["kbqUsernameSecondary"], {}, {}, never, never, true, never>;
+}
+/** Styles a secondary hint. */
+declare class KbqUsernameSecondaryHint {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUsernameSecondaryHint, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqUsernameSecondaryHint, "[kbqUsernameSecondaryHint]", ["kbqUsernameSecondaryHint"], {}, {}, never, never, true, never>;
+}
+/** Custom content for `KbqUsername`, overrides default view. */
+declare class KbqUsernameCustomView {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUsernameCustomView, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqUsernameCustomView, "kbq-username-custom-view, [kbq-username-custom-view]", ["kbqUsernameCustomView"], {}, {}, never, never, true, never>;
+}
+/**
+ * Displays a user's name based on profile data.
+ * Supports different display modes and visual styles.
+ * A custom view can be provided via `<kbq-username-custom-view>` for full control over the output.
+ * Accepts input profile data and optional formatting options.
+ */
+declare class KbqUsername {
+    /** User profile data used for display. */
+    readonly userInfo: i0.InputSignal<KbqUserInfo | undefined>;
+    /** Enables compact display mode */
+    readonly isCompact: i0.InputSignalWithTransform<boolean, unknown>;
+    /** Format string for rendering the user's full name. */
+    readonly fullNameFormat: i0.InputSignal<string>;
+    /**
+     * Display mode of the username.
+     * @default inline
+     */
+    readonly mode: i0.InputSignal<KbqUsernameMode>;
+    /**
+     * Visual style of the username.
+     * @default default
+     */
+    readonly type: i0.InputSignal<KbqUsernameStyle>;
+    /**
+     * Custom projected view for username rendering.
+     * @docs-private
+     */
+    protected readonly customView: i0.Signal<KbqUsernameCustomView | undefined>;
+    /** @docs-private */
+    protected readonly hasFullName: i0.Signal<string | false | undefined>;
+    /** @docs-private */
+    protected readonly class: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUsername, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqUsername, "kbq-username", ["kbqUsername"], { "userInfo": { "alias": "userInfo"; "required": false; "isSignal": true; }; "isCompact": { "alias": "isCompact"; "required": false; "isSignal": true; }; "fullNameFormat": { "alias": "fullNameFormat"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, ["customView"], ["kbq-username-custom-view,[kbq-username-custom-view]"], true, never>;
+}
+
+declare class KbqUsernamePipe<T = unknown> implements PipeTransform {
+    private readonly mapping;
+    /** Builds a formatted name string from the user profile using the provided format and mapping. */
+    transform(profile: T, format?: string, customMapping?: KbqFormatKeyToProfileMapping): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUsernamePipe<any>, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<KbqUsernamePipe<any>, "kbqUsername", true>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqUsernamePipe<any>>;
+}
+/**
+ * Pipe to format a user profile into a name string using a format pattern and field mapping.
+ * Lowercase keys output initials; uppercase keys show full values.
+ */
+declare class KbqUsernameCustomPipe<T = unknown> implements PipeTransform {
+    private readonly mapping;
+    /** Builds a formatted name string from the user profile using the provided format and mapping. */
+    transform(profile: T, format?: string, customMapping?: KbqFormatKeyToProfileMappingExtended<T>): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUsernameCustomPipe<any>, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<KbqUsernameCustomPipe<any>, "kbqUsernameCustom", true>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqUsernameCustomPipe<any>>;
+}
+
+declare class KbqUsernameModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUsernameModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqUsernameModule, never, [typeof KbqUsername, typeof KbqUsernameCustomView, typeof KbqUsernamePrimary, typeof KbqUsernameSecondary, typeof KbqUsernameCustomPipe, typeof KbqUsernamePipe], [typeof KbqUsername, typeof KbqUsernameCustomView, typeof KbqUsernamePrimary, typeof KbqUsernameSecondary, typeof KbqUsernameCustomPipe, typeof KbqUsernamePipe]>;
+    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 };

package/accordion/accordion-content.d.ts

@@ -1,6 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./accordion-content.directive";
-export declare class KbqAccordionContent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionContent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAccordionContent, "kbq-accordion-content, [kbq-accordion-content]", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.KbqAccordionContentDirective; inputs: {}; outputs: {}; }]>;
-}