@koobiq/components 18.32.0 → 18.34.0

package/select/select.component.d.ts

@@ -25,6 +25,10 @@ export type KbqSelectOptions = Partial<{
      * If set to null or an empty string, the panel will grow to match the longest option's text.
      */
     panelWidth: KbqSelectPanelWidth;
+    /**
+     * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
+     */
+    panelMinWidth: Exclude<KbqSelectPanelWidth, 'auto'>;
 }>;
 /** Injection token that can be used to provide the default options for the `kbq-select`. */
 export declare const KBQ_SELECT_OPTIONS: InjectionToken<Partial<{
@@ -33,6 +37,10 @@ export declare const KBQ_SELECT_OPTIONS: InjectionToken<Partial<{
      * If set to null or an empty string, the panel will grow to match the longest option's text.
      */
     panelWidth: KbqSelectPanelWidth;
+    /**
+     * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
+     */
+    panelMinWidth: Exclude<KbqSelectPanelWidth, "auto">;
 }>>;
 /** Utility provider for `KBQ_SELECT_OPTIONS`. */
 export declare const kbqSelectOptionsProvider: (options: KbqSelectOptions) => Provider;
@@ -59,6 +67,10 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
          * If set to null or an empty string, the panel will grow to match the longest option's text.
          */
         panelWidth: KbqSelectPanelWidth;
+        /**
+         * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
+         */
+        panelMinWidth: Exclude<KbqSelectPanelWidth, "auto">;
     }> | null;
     private readonly window;
     /** Whether the component is in an error state. */
@@ -133,6 +145,10 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
      * Follows the same logic as `Array.prototype.sort`.
      */
     sortComparator: (a: KbqOptionBase, b: KbqOptionBase, options: KbqOptionBase[]) => number;
+    /**
+     * Whether to use a multiline matcher or not. Default is false
+     */
+    multiline: boolean;
     /** Combined stream of all of the child options' change events. */
     readonly optionSelectionChanges: Observable<KbqOptionSelectionChange>;
     /** Event emitted when the select panel has been toggled. */
@@ -182,7 +198,7 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
      * Minimum width of the panel.
      * If minWidth is larger than window width, it will be ignored.
      */
-    panelMinWidth: number;
+    panelMinWidth: Exclude<KbqSelectPanelWidth, 'auto'>;
     /** Value of the select control. */
     get value(): any;
     set value(newValue: any);
@@ -212,6 +228,8 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     get firstFiltered(): boolean;
     /** @docs-private */
     get colorForState(): KbqComponentColors;
+    /** Whether multiple choice is enabled or not. True if multiple or multiline */
+    get multiSelection(): boolean;
     private closeSubscription;
     /** The scroll position of the overlay panel, calculated to center the selected option. */
     private scrollTop;
@@ -226,9 +244,9 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     protected overlayOrigin?: CdkOverlayOrigin | ElementRef;
     constructor(_changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, elementRef: ElementRef, overlayContainer: OverlayContainer, _dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl, scrollStrategyFactory: any, localeService?: KbqLocaleService | undefined);
     ngOnInit(): void;
+    ngDoCheck(): void;
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
-    ngDoCheck(): void;
     ngOnDestroy(): void;
     updateErrorState(): void;
     hiddenItemsTextFormatter(hiddenItemsText: string, hiddenItems: number): string;
@@ -351,7 +369,8 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     private getTotalVisibleItems;
     private buildTriggerClone;
     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; }; "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]"], false, never>;
+    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; }; "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]"], false, never>;
+    static ngAcceptInputType_multiline: unknown;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_panelMinWidth: unknown;
     static ngAcceptInputType_tabIndex: unknown;

package/sidebar/sidebar.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { AfterContentInit, ElementRef, EventEmitter, NgZone, OnDestroy } from '@angular/core';
 import { KbqSidebarAnimationState } from './sidebar-animations';
 import * as i0 from "@angular/core";
 export declare enum SidebarPositions {
@@ -23,30 +23,56 @@ export declare class KbqSidebarClosed {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidebarClosed, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidebarClosed, "[kbq-sidebar-closed]", ["kbqSidebarClosed"], { "width": { "alias": "width"; "required": false; }; }, {}, never, never, false, never>;
 }
-export declare class KbqSidebar implements OnDestroy, OnInit, AfterContentInit {
+export declare class KbqSidebar implements OnDestroy, AfterContentInit {
     private ngZone;
     private elementRef;
+    /**
+     * @docs-private
+     */
     protected readonly document: Document;
+    private readonly renderer;
+    private readonly changeDetectorRef;
     get opened(): boolean;
     set opened(value: boolean);
     private _opened;
     position: SidebarPositions;
+    /**
+     * @docs-private
+     */
     params: KbqSidebarParams;
     readonly stateChanged: EventEmitter<boolean>;
+    /**
+     * @docs-private
+     */
     openedContent: KbqSidebarOpened;
+    /**
+     * @docs-private
+     */
     closedContent: KbqSidebarClosed;
+    /**
+     * @docs-private
+     */
     get animationState(): KbqSidebarAnimationState;
+    /**
+     * @docs-private
+     */
     internalState: boolean;
-    private documentKeydownListener;
+    private unbindKeydownListener;
     constructor(ngZone: NgZone, elementRef: ElementRef);
-    ngOnInit(): void;
+    ngAfterContentInit(): void;
     ngOnDestroy(): void;
     toggle(): void;
+    /**
+     * @docs-private
+     */
     onAnimationStart(): void;
+    /**
+     * @docs-private
+     */
     onAnimationDone(): void;
-    ngAfterContentInit(): void;
     private registerKeydownListener;
     private unRegisterKeydownListener;
+    private handleKeydown;
     private saveWidth;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidebar, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqSidebar, "kbq-sidebar", ["kbqSidebar"], { "opened": { "alias": "opened"; "required": false; }; "position": { "alias": "position"; "required": false; }; }, { "stateChanged": "stateChanged"; }, ["openedContent", "closedContent"], ["[kbq-sidebar-opened]", "[kbq-sidebar-closed]"], false, never>;

package/sidepanel/sidepanel-container.component.d.ts

@@ -1,6 +1,7 @@
 import { AnimationEvent } from '@angular/animations';
 import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { ChangeDetectorRef, ComponentRef, ElementRef, EmbeddedViewRef, EventEmitter, InjectionToken, OnDestroy } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
 import { KbqSidepanelAnimationState } from './sidepanel-animations';
 import { KbqSidepanelConfig } from './sidepanel-config';
 import * as i0 from "@angular/core";
@@ -27,10 +28,18 @@ export declare class KbqSidepanelContainerComponent extends BasePortalOutlet imp
     get size(): string;
     get trapFocusAutoCapture(): boolean;
     get trapFocus(): boolean;
+    /** @docs-private */
+    protected readonly indentClickEmitter: Subject<MouseEvent>;
     /** Whether the component has been destroyed. */
     private destroyed;
     constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, sidepanelConfig: KbqSidepanelConfig, withIndent: boolean, withShadow: boolean);
     ngOnDestroy(): void;
+    /**
+     * Gets an observable that emits when the indent has been clicked.
+     *
+     * @docs-private
+     */
+    indentClick(): Observable<MouseEvent>;
     /** Attach a component portal as content to this sidepanel container. */
     attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
     /** Attach a template portal as content to this sidepanel container. */

package/sidepanel/sidepanel-ref.d.ts

@@ -3,9 +3,9 @@ import { Observable } from 'rxjs';
 import { KbqSidepanelConfig } from './sidepanel-config';
 import { KbqSidepanelContainerComponent } from './sidepanel-container.component';
 export declare class KbqSidepanelRef<T = any, R = any> {
-    containerInstance: KbqSidepanelContainerComponent;
-    private overlayRef;
-    config: KbqSidepanelConfig;
+    readonly containerInstance: KbqSidepanelContainerComponent;
+    readonly overlayRef: OverlayRef;
+    readonly config: KbqSidepanelConfig;
     readonly id: string;
     /** Instance of the component making up the content of the sidepanel. */
     instance: T;

package/splitter/splitter.component.d.ts

@@ -63,7 +63,7 @@ export declare class KbqSplitterComponent implements OnInit, AfterContentInit, O
     changeDetectorRef: ChangeDetectorRef;
     private ngZone;
     private renderer;
-    gutterPositionChange: EventEmitter<void>;
+    readonly gutterPositionChange: EventEmitter<void>;
     areas: IArea[];
     gutters: QueryList<KbqGutterDirective>;
     ghost: KbqGutterGhostDirective;
@@ -111,7 +111,7 @@ export declare class KbqSplitterAreaDirective implements AfterViewInit, OnDestro
     private elementRef;
     private renderer;
     private splitter;
-    sizeChange: EventEmitter<number>;
+    readonly sizeChange: EventEmitter<number>;
     private readonly window;
     constructor(elementRef: ElementRef, renderer: Renderer2, splitter: KbqSplitterComponent);
     isResizing(): boolean;

package/tabs/tab-group.component.d.ts

@@ -85,6 +85,7 @@ export declare class KbqTabGroup implements AfterContentInit, AfterViewInit, Aft
     private readonly groupId;
     private readonly resizeDebounceInterval;
     constructor(changeDetectorRef: ChangeDetectorRef, defaultConfig?: KbqTabsConfig);
+    ngAfterContentInit(): void;
     /**
      * After the content is checked, this component knows what tabs have been defined
      * and what the selected index should be. This is where we can know exactly what position
@@ -92,7 +93,6 @@ export declare class KbqTabGroup implements AfterContentInit, AfterViewInit, Aft
      * a new selected tab should transition in (from the left or right).
      */
     ngAfterContentChecked(): void;
-    ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     focusChanged(index: number): void;

package/tabs/tab.component.d.ts

@@ -52,8 +52,8 @@ export declare class KbqTab implements OnInit, OnChanges, OnDestroy {
     private contentPortal;
     constructor(viewContainerRef: ViewContainerRef);
     ngOnChanges(changes: SimpleChanges): void;
-    ngOnDestroy(): void;
     ngOnInit(): void;
+    ngOnDestroy(): void;
     /**
      * This has been extracted to a util because of TS 4 and VE.
      * View Engine doesn't support property rename inheritance.

package/tags/tag-input.d.ts

@@ -40,7 +40,7 @@ export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     get separators(): KbqTagSeparator[];
     private _separators;
     /** Emitted when a tag is to be added. */
-    tagEnd: EventEmitter<KbqTagInputEvent>;
+    readonly tagEnd: EventEmitter<KbqTagInputEvent>;
     /** A value indicating whether allow/prevent tags duplication  */
     distinct: boolean;
     /** The input's placeholder text. */

package/tags/tag-list.component.d.ts

@@ -151,9 +151,9 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     private tagRemoveSubscription;
     private readonly destroyRef;
     constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, defaultErrorStateMatcher: ErrorStateMatcher, dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, ngControl: NgControl);
-    ngAfterContentInit(): void;
     ngOnInit(): void;
     ngDoCheck(): void;
+    ngAfterContentInit(): void;
     ngOnDestroy(): void;
     updateErrorState(): void;
     onTouched: () => void;

package/timepicker/timepicker.directive.d.ts

@@ -64,7 +64,7 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
     set value(value: D | null);
     private _value;
     set kbqValidationTooltip(tooltip: KbqWarningTooltipTrigger);
-    incorrectInput: EventEmitter<void>;
+    readonly incorrectInput: EventEmitter<void>;
     get hasSelection(): boolean;
     get isFullFormat(): boolean;
     get isShortFormat(): boolean;

package/tooltip/tooltip.component.d.ts

@@ -78,8 +78,8 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     private _color;
     arrow: boolean;
     offset: number | null;
-    placementChange: EventEmitter<any>;
-    visibleChange: EventEmitter<boolean>;
+    readonly placementChange: EventEmitter<any>;
+    readonly visibleChange: EventEmitter<boolean>;
     private get hasClickInTrigger();
     protected originSelector: string;
     protected overlayConfig: OverlayConfig;

package/tree/_tree-theme.scss

@@ -3,6 +3,8 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-tree-option($state-name) {
+    --kbq-option-background: var(--kbq-tree-#{$state-name}-container-background);
+
     background: var(--kbq-tree-#{$state-name}-container-background);
 
     .kbq-option-text {
@@ -34,11 +36,14 @@
         @include kbq-tree-option(default);
 
         &:not(.kbq-disabled) {
-            &:hover {
+            &:hover,
+            &.kbq-action-button-focused {
                 @include kbq-tree-option(states-hover);
             }
 
             &:active {
+                --kbq-option-background: var(--kbq-tree-states-active-container-background);
+
                 background: var(--kbq-tree-states-active-container-background);
             }
 
@@ -50,6 +55,8 @@
                 }
 
                 &:active {
+                    --kbq-option-background: var(--kbq-tree-states-selected-active-container-background);
+
                     background: var(--kbq-tree-states-selected-active-container-background);
                 }
             }
@@ -78,8 +85,12 @@
     }
 
     .cdk-keyboard-focused {
-        & .kbq-tree-option.kbq-focused {
+        & .kbq-tree-option.kbq-focused:not(.kbq-action-button-focused) {
             border-color: var(--kbq-tree-states-focused-focus-outline-color);
+
+            & .kbq-action-container {
+                display: flex;
+            }
         }
     }
 }

package/tree/tree-option.scss

@@ -5,6 +5,8 @@
 .kbq-tree-option {
     @include vendor-prefixes.user-select(none);
 
+    position: relative;
+
     box-sizing: border-box;
 
     display: flex;
@@ -20,15 +22,15 @@
     border-radius: var(--kbq-tree-option-border-radius);
 
     padding-top: kbq-difference-series-css-variables(
-        [ tree-size-container-padding-vertical,
+        [tree-size-container-padding-vertical,
         tree-size-container-focus-outline-width]
     );
     padding-right: kbq-difference-series-css-variables(
-        [ tree-size-container-padding-right,
+        [tree-size-container-padding-right,
         tree-size-container-focus-outline-width]
     );
     padding-bottom: kbq-difference-series-css-variables(
-        [ tree-size-container-padding-vertical,
+        [tree-size-container-padding-vertical,
         tree-size-container-focus-outline-width]
     );
 
@@ -48,25 +50,18 @@
         outline: none;
     }
 
-    &.kbq-disabled {
-        .kbq-icon {
-            cursor: default;
-        }
+    &.kbq-disabled .kbq-icon {
+        cursor: default;
     }
 
     &:not(.kbq-disabled) {
         cursor: pointer;
-    }
-
-    & .kbq-option-action {
-        display: none;
-    }
 
-    &:not(.kbq-disabled):hover,
-    &:not(.kbq-disabled).kbq-focused,
-    &:not(.kbq-disabled).kbq-action-button-focused {
-        & .kbq-option-action {
-            display: flex;
+        &:hover,
+        &.kbq-action-button-focused {
+            & .kbq-action-container {
+                display: flex;
+            }
         }
     }
 

package/tree/tree-selection.component.d.ts

@@ -77,8 +77,8 @@ export declare class KbqTreeSelection extends KbqTreeBase<any> implements Contro
     private optionFocusSubscription;
     private optionBlurSubscription;
     constructor(elementRef: ElementRef, scheduler: AsyncScheduler, differs: IterableDiffers, changeDetectorRef: ChangeDetectorRef, multiple: MultipleMode, clipboard: Clipboard);
-    ngAfterViewInit(): void;
     ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     focus($event: any): void;
     highlightSelectedOption(): void;

package/tree/tree.module.d.ts

@@ -11,6 +11,6 @@ import * as i9 from "@koobiq/components/core";
 import * as i10 from "@koobiq/components/icon";
 export declare class KbqTreeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTreeModule, [typeof i1.KbqTreeNodeOutlet, typeof i2.KbqTreeNodeDef, typeof i3.KbqTreeNode, typeof i4.KbqTreeNodePadding, typeof i5.KbqTree, typeof i6.KbqTreeSelection, typeof i7.KbqTreeOption, typeof i8.KbqTreeNodeToggleComponent, typeof i8.KbqTreeNodeToggleDirective], [typeof i9.KbqPseudoCheckboxModule, typeof i10.KbqIconModule], [typeof i1.KbqTreeNodeOutlet, typeof i2.KbqTreeNodeDef, typeof i3.KbqTreeNode, typeof i4.KbqTreeNodePadding, typeof i5.KbqTree, typeof i6.KbqTreeSelection, typeof i7.KbqTreeOption, typeof i8.KbqTreeNodeToggleComponent, typeof i8.KbqTreeNodeToggleDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTreeModule, [typeof i1.KbqTreeNodeOutlet, typeof i2.KbqTreeNodeDef, typeof i3.KbqTreeNode, typeof i4.KbqTreeNodePadding, typeof i5.KbqTree, typeof i6.KbqTreeSelection, typeof i7.KbqTreeOption, typeof i8.KbqTreeNodeToggleComponent, typeof i8.KbqTreeNodeToggleDirective], [typeof i9.KbqPseudoCheckboxModule, typeof i10.KbqIconModule, typeof i9.KbqActionContainer], [typeof i1.KbqTreeNodeOutlet, typeof i2.KbqTreeNodeDef, typeof i3.KbqTreeNode, typeof i4.KbqTreeNodePadding, typeof i5.KbqTree, typeof i6.KbqTreeSelection, typeof i7.KbqTreeOption, typeof i8.KbqTreeNodeToggleComponent, typeof i8.KbqTreeNodeToggleDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTreeModule>;
 }

package/tree-select/tree-select.component.d.ts

@@ -135,6 +135,10 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
      * Follows the same logic as `Array.prototype.sort`.
      */
     sortComparator: (a: KbqTreeOption, b: KbqTreeOption, options: KbqTreeOption[]) => number;
+    /**
+     * Whether to use a multiline matcher or not. Default is false
+     */
+    multiline: boolean;
     /** Combined stream of all of the child options' change events. */
     readonly optionSelectionChanges: Observable<KbqTreeSelectChange>;
     /** Combined stream of all of the child options userInteraction events. */
@@ -174,6 +178,8 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     /** 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;
@@ -204,9 +210,9 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     private readonly window;
     constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, scrollStrategyFactory: any, dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl, localeService?: KbqLocaleService | undefined);
     ngOnInit(): void;
+    ngDoCheck(): void;
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
-    ngDoCheck(): void;
     ngOnDestroy(): void;
     updateErrorState(): void;
     hiddenItemsTextFormatter(hiddenItemsText: string, hiddenItems: number): string;
@@ -303,7 +309,8 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     private scrollActiveOptionIntoView;
     private subscribeOnSearchChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; host: true; }, { optional: true; self: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "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; }; "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; }; "panelWidth": { "alias": "panelWidth"; "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]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "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; }; "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; }; "panelWidth": { "alias": "panelWidth"; "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]"], false, never>;
+    static ngAcceptInputType_multiline: unknown;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_tabIndex: unknown;
     static ngAcceptInputType_disabled: unknown;

package/username/constants.d.ts

@@ -0,0 +1,15 @@
+import { InjectionToken } from '@angular/core';
+import { KbqFormatKeyToProfileMapping, KbqFormatKeyToProfileMappingExtended } from './types';
+/** Default name format: Last name full, first and middle as initials. */
+export declare const kbqDefaultFullNameFormatCustom = "L f. m.";
+/** Default name format: Last name full, first and middle as initials. */
+export declare const kbqDefaultFullNameFormat = "lf.m.";
+/**
+ * Throws an error when no profile field mapping is provided to the username pipe.
+ * @docs-private
+ */
+export declare function KbqMappingMissingError(): Error;
+/**
+ * Injection token for providing a global username format-to-profile mapping.
+ */
+export declare const KBQ_PROFILE_MAPPING: InjectionToken<KbqFormatKeyToProfileMapping | KbqFormatKeyToProfileMappingExtended>;

package/username/index.d.ts

@@ -0,0 +1,5 @@
+export * from './constants';
+export * from './module';
+export * from './types';
+export * from './username';
+export * from './username.pipe';

package/username/module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./username";
+import * as i2 from "./username.pipe";
+export declare class KbqUsernameModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUsernameModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqUsernameModule, never, [typeof i1.KbqUsername, typeof i1.KbqUsernameCustomView, typeof i1.KbqUsernamePrimary, typeof i1.KbqUsernameSecondary, typeof i2.KbqUsernameCustomPipe, typeof i2.KbqUsernamePipe], [typeof i1.KbqUsername, typeof i1.KbqUsernameCustomView, typeof i1.KbqUsernamePrimary, typeof i1.KbqUsernameSecondary, typeof i2.KbqUsernameCustomPipe, typeof i2.KbqUsernamePipe]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqUsernameModule>;
+}

package/username/types.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Keys for formatting username parts in short (initial) or full form.
+ */
+export 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.
+ */
+export 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
+ */
+export 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.
+ */
+export 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.
+ */
+export type KbqUsernameStyle = 'default' | 'error' | 'accented' | 'inherit';

package/username/username-tokens.scss

@@ -0,0 +1,6 @@
+:where(.kbq-username) {
+    --kbq-username-primary-color: var(--kbq-foreground-contrast);
+    --kbq-username-secondary-color: inherit;
+    --kbq-username-vertical-gap: var(--kbq-size-xxs);
+    --kbq-username-horizontal-gap: var(--kbq-size-xxs);
+}

package/username/username.d.ts

@@ -0,0 +1,68 @@
+import { KbqUsernameMode, KbqUsernameStyle } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Basic user info
+ * @docs-private
+ */
+export type KbqUserInfo = {
+    firstName?: string;
+    lastName?: string;
+    middleName?: string;
+    login?: string;
+    site?: string;
+};
+/** Styles the primary part of the username (e.g. full name). */
+export declare class KbqUsernamePrimary {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUsernamePrimary, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqUsernamePrimary, "[kbqUsernamePrimary]", ["kbqUsernamePrimary"], {}, {}, never, never, true, never>;
+}
+/** Styles the secondary part. */
+export declare class KbqUsernameSecondary {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUsernameSecondary, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqUsernameSecondary, "[kbqUsernameSecondary]", ["kbqUsernameSecondary"], {}, {}, never, never, true, never>;
+}
+/** Styles a secondary hint. */
+export 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. */
+export 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.
+ */
+export declare class KbqUsername {
+    /** User profile data used for display. */
+    readonly userInfo: import("@angular/core").InputSignal<KbqUserInfo | undefined>;
+    /** Enables compact display mode */
+    readonly isCompact: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Format string for rendering the user's full name. */
+    readonly fullNameFormat: import("@angular/core").InputSignal<string>;
+    /**
+     * Display mode of the username.
+     * @default inline
+     */
+    readonly mode: import("@angular/core").InputSignal<KbqUsernameMode>;
+    /**
+     * Visual style of the username.
+     * @default default
+     */
+    readonly type: import("@angular/core").InputSignal<KbqUsernameStyle>;
+    /**
+     * Custom projected view for username rendering.
+     * @docs-private
+     */
+    protected readonly customView: import("@angular/core").Signal<KbqUsernameCustomView | undefined>;
+    /** @docs-private */
+    protected readonly hasFullName: import("@angular/core").Signal<string | false | undefined>;
+    /** @docs-private */
+    protected readonly class: import("@angular/core").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>;
+}