@koobiq/components 18.33.0 → 18.35.0

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-theme.scss

@@ -36,6 +36,14 @@
     &.kbq-disabled {
         @include kbq-tag-state($type, states-disabled);
     }
+
+    &.kbq-tag_editing {
+        background-color: var(--kbq-background-bg);
+    }
+
+    .kbq-tag-edit-input {
+        color: inherit;
+    }
 }
 
 @mixin kbq-tag-theme() {
@@ -59,7 +67,8 @@
 }
 
 @mixin kbq-tag-typography() {
-    .kbq-tag {
+    .kbq-tag,
+    .kbq-tag-edit-input {
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
     }
 

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

@@ -7,7 +7,7 @@ import { CanUpdateErrorState, ErrorStateMatcher } from '@koobiq/components/core'
 import { KbqCleaner, KbqFormFieldControl } from '@koobiq/components/form-field';
 import { Observable, Subject } from 'rxjs';
 import { KbqTagTextControl } from './tag-text-control';
-import { KbqTag, KbqTagEvent, KbqTagSelectionChange } from './tag.component';
+import { KbqTag, KbqTagEditChange, KbqTagEvent, KbqTagSelectionChange } from './tag.component';
 import * as i0 from "@angular/core";
 /** Change event object that is emitted when the tag list value has changed. */
 export declare class KbqTagListChange {
@@ -38,6 +38,8 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     get tagBlurChanges(): Observable<KbqTagEvent>;
     /** Combined stream of all of the child tags' remove change events. */
     get tagRemoveChanges(): Observable<KbqTagEvent>;
+    /** Combined stream of all of the child tags' edit change events. */
+    get tagEditChanges(): Observable<KbqTagEditChange>;
     /** The array of selected tags inside tag list. */
     get selected(): KbqTag[] | KbqTag;
     get canShowCleaner(): boolean;
@@ -98,6 +100,8 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
      */
     get selectable(): boolean;
     set selectable(value: boolean);
+    /** Whether the tag list is editable. */
+    editable: boolean;
     get tabIndex(): number;
     set tabIndex(value: number);
     private _tabIndex;
@@ -149,11 +153,13 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     private tagSelectionSubscription;
     /** Subscription to remove changes in tags. */
     private tagRemoveSubscription;
+    /** Subscription to edit changes in tags. */
+    private tagEditSubscription;
     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;
@@ -229,6 +235,7 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     /** Listens to user-generated selection events on each tag. */
     private listenToTagsFocus;
     private listenToTagsRemoved;
+    private listenToTagsEdit;
     /** Checks whether an event comes from inside a tag element. */
     private originatesFromTag;
     /** Checks whether any of the tags is focused. */
@@ -239,5 +246,6 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     private revalidate;
     private propagateSelectableToChildren;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagList, [null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTagList, "kbq-tag-list", ["kbqTagList"], { "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["cleaner", "tags"], ["*", "kbq-cleaner"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTagList, "kbq-tag-list", ["kbqTagList"], { "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["cleaner", "tags"], ["*", "kbq-cleaner"], false, never>;
+    static ngAcceptInputType_editable: unknown;
 }

package/tags/tag-list.scss

@@ -24,6 +24,11 @@
     padding-bottom: var(--kbq-tag-size-padding-vertical);
     padding-left: 4px;
     padding-right: unset;
+
+    &.kbq-input {
+        padding: unset;
+        min-height: unset;
+    }
 }
 
 .kbq-tags-list__list-container {

package/tags/tag.component.d.ts

@@ -1,12 +1,22 @@
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, QueryList } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, QueryList } from '@angular/core';
 import { IFocusableOption } from '@koobiq/cdk/a11y';
 import { KbqColorDirective, KbqTitleTextRef } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
+import * as i1 from "@koobiq/components/core";
 export interface KbqTagEvent {
     tag: KbqTag;
 }
+/**
+ * Event object emitted by KbqTag when the tag is edited.
+ */
+export declare class KbqTagEditChange {
+    readonly tag: KbqTag;
+    readonly type: 'start' | 'submit' | 'cancel';
+    readonly reason: string;
+    constructor(tag: KbqTag, type: 'start' | 'submit' | 'cancel', reason: string);
+}
 /** Event object emitted by KbqTag when selected or deselected. */
 export declare class KbqTagSelectionChange {
     source: KbqTag;
@@ -30,20 +40,67 @@ export declare class KbqTagTrailingIcon {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagTrailingIcon, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagTrailingIcon, "kbq-tag-trailing-icon, [kbqTagTrailingIcon]", never, {}, {}, never, never, false, never>;
 }
-export declare class KbqTag extends KbqColorDirective implements IFocusableOption, OnDestroy, KbqTitleTextRef, AfterContentInit {
-    elementRef: ElementRef;
+/**
+ * Directive to add submit behavior for the editable tag.
+ */
+export declare class KbqTagEditSubmit {
+    /** @docs-private */
+    protected readonly tag: KbqTag;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagEditSubmit, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagEditSubmit, "[kbqTagEditSubmit]", ["kbqTagEditSubmit"], {}, {}, never, never, true, never>;
+}
+/**
+ * Directive to add input behavior for the editable tag.
+ */
+export declare class KbqTagEditInput {
+    private readonly tag;
+    /** @docs-private */
+    protected handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagEditInput, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagEditInput, "[kbqTagEditInput]", ["kbqTagEditInput"], {}, {}, never, never, true, [{ directive: typeof i1.KbqFieldSizingContent; inputs: {}; outputs: {}; }]>;
+}
+export declare class KbqTag extends KbqColorDirective implements IFocusableOption, OnDestroy, KbqTitleTextRef, AfterContentInit, AfterViewInit {
     changeDetectorRef: ChangeDetectorRef;
     private _ngZone;
+    private readonly focusMonitor;
+    private readonly tagList;
+    /** @docs-private */
+    readonly elementRef: ElementRef<HTMLElement>;
     /** Emits when the tag is focused. */
     readonly onFocus: Subject<KbqTagEvent>;
     /** Emits when the tag is blurred. */
     readonly onBlur: Subject<KbqTagEvent>;
-    nativeElement: HTMLElement;
+    /** @docs-private */
+    readonly nativeElement: HTMLElement;
     /** Whether the tag has focus. */
     hasFocus: boolean;
     /** Whether the tag list is selectable */
     tagListSelectable: boolean;
-    textElement: ElementRef;
+    /**
+     * Whether the tag list is editable.
+     *
+     * @docs-private
+     */
+    private get tagListEditable();
+    /** Whether the tag is editable. */
+    get editable(): boolean;
+    set editable(value: boolean);
+    private _editable;
+    /** Whether the tag edits can't be submitted. */
+    preventEditSubmit: boolean;
+    private readonly editInputElementRef;
+    /**
+     * Emits event when the tag is edited.
+     */
+    readonly editChange: EventEmitter<KbqTagEditChange>;
+    /**
+     * @docs-private
+     */
+    protected readonly editing: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * @docs-private
+     */
+    readonly textElement: ElementRef<HTMLSpanElement>;
     contentChildren: QueryList<KbqIcon>;
     /** The tag avatar */
     avatar: KbqTagAvatar;
@@ -86,11 +143,12 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
     get disabled(): any;
     set disabled(value: any);
     private _disabled;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone);
+    constructor(changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone);
     ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     addClassModificatorForIcons(): void;
     addHostClassName(): void;
-    ngOnDestroy(): void;
     select(): void;
     deselect(): void;
     selectViaInteraction(): void;
@@ -104,12 +162,24 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
      * Informs any listeners of the removal request. Does not remove the tag from the DOM.
      */
     remove(): void;
+    /** @docs-private */
     handleMousedown(event: Event): void;
+    /** @docs-private */
     handleKeydown(event: KeyboardEvent): void;
+    /** @docs-private */
     blur(): void;
+    /** @docs-private */
+    protected handleDblClick(event: MouseEvent): void;
+    private startEditing;
+    /** @docs-private */
+    cancelEditing(reason: string): void;
+    /** @docs-private */
+    submitEditing(reason: string): void;
     private dispatchSelectionChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTag, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTag, "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", ["kbqTag"], { "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["avatar", "trailingIcon", "removeIcon", "contentChildren"], ["[kbq-icon]:not([kbqTagRemove])", "*", "[kbqTagRemove]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTag, "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", ["kbqTag"], { "editable": { "alias": "editable"; "required": false; }; "preventEditSubmit": { "alias": "preventEditSubmit"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "editChange": "editChange"; "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["editInputElementRef", "avatar", "trailingIcon", "removeIcon", "contentChildren"], ["[kbq-icon]:not([kbqTagRemove]):not([kbqTagEditSubmit])", "[kbqTagEditInput]", "*", "[kbqTagEditSubmit]", "[kbqTagRemove]"], false, never>;
+    static ngAcceptInputType_editable: unknown;
+    static ngAcceptInputType_preventEditSubmit: unknown;
 }
 /**
  *

package/tags/tag.module.d.ts

@@ -5,6 +5,6 @@ import * as i3 from "./tag-input";
 import * as i4 from "@angular/cdk/platform";
 export declare class KbqTagsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTagsModule, [typeof i1.KbqTagList, typeof i2.KbqTag, typeof i3.KbqTagInput, typeof i2.KbqTagTrailingIcon, typeof i2.KbqTagAvatar, typeof i2.KbqTagRemove], [typeof i4.PlatformModule], [typeof i1.KbqTagList, typeof i2.KbqTag, typeof i3.KbqTagInput, typeof i2.KbqTagTrailingIcon, typeof i2.KbqTagAvatar, typeof i2.KbqTagRemove]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTagsModule, [typeof i1.KbqTagList, typeof i2.KbqTag, typeof i3.KbqTagInput, typeof i2.KbqTagTrailingIcon, typeof i2.KbqTagAvatar, typeof i2.KbqTagRemove], [typeof i4.PlatformModule, typeof i2.KbqTagEditSubmit, typeof i2.KbqTagEditInput], [typeof i1.KbqTagList, typeof i2.KbqTag, typeof i3.KbqTagInput, typeof i2.KbqTagTrailingIcon, typeof i2.KbqTagAvatar, typeof i2.KbqTagRemove, typeof i2.KbqTagEditSubmit, typeof i2.KbqTagEditInput]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTagsModule>;
 }

package/tags/tag.scss

@@ -1,5 +1,6 @@
 @use '../core/styles/common/tokens' as *;
 @use '../core/styles/common/vendor-prefixes';
+@use '../core/styles/common/input';
 
 .kbq-tag {
     @include vendor-prefixes.user-select(none);
@@ -49,6 +50,23 @@
     & .kbq-icon_left {
         margin-left: var(--kbq-tag-size-icon-margin-left);
     }
+
+    .kbq-tag-edit-input {
+        @include input.kbq-reset-input();
+
+        min-width: var(--kbq-size-xs);
+        max-width: 100%;
+
+        &.kbq-input {
+            min-height: unset !important;
+            border-radius: unset !important;
+            padding: unset !important;
+        }
+    }
+
+    .kbq-tag-edit-submit {
+        margin-right: var(--kbq-size-3xs);
+    }
 }
 
 .kbq-tag__wrapper {

package/textarea/textarea-tokens.scss

@@ -2,5 +2,5 @@
     --kbq-textarea-size-min-height: 64px;
     --kbq-textarea-size-max-height: 96px;
     --kbq-textarea-size-padding-vertical: 5px;
-    --kbq-textarea-size-padding-horizontal: var(--kbq-size-m);
+    --kbq-textarea-size-padding-horizontal: 11px;
 }

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-theme.scss

@@ -1,8 +1,6 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-tooltip-color($style-name) {
-    box-shadow: var(--kbq-tooltip-#{$style-name}-shadow);
-
     & .kbq-tooltip__inner {
         color: var(--kbq-tooltip-#{$style-name}-text);
 
@@ -11,11 +9,20 @@
 
     & .kbq-tooltip__arrow {
         background-color: var(--kbq-tooltip-#{$style-name}-background);
+        box-shadow: var(--kbq-tooltip-borderless-shadow);
+    }
+
+    &.kbq-tooltip_arrowless {
         box-shadow: var(--kbq-tooltip-#{$style-name}-shadow);
     }
 }
 
 @mixin kbq-tooltip-theme() {
+    .kbq-tooltip,
+    .kbq-tooltip__arrow {
+        box-shadow: var(--kbq-tooltip-borderless-shadow);
+    }
+
     .kbq-tooltip.kbq-theme {
         @include kbq-tooltip-color(theme-fade-off);
     }

package/tooltip/tooltip-tokens.scss

@@ -20,4 +20,6 @@
     --kbq-tooltip-error-fade-off-background: var(--kbq-background-error);
     --kbq-tooltip-error-fade-off-text: var(--kbq-foreground-white);
     --kbq-tooltip-error-fade-off-shadow: var(--kbq-shadow-popup);
+
+    --kbq-tooltip-borderless-shadow: 0 2px 8px var(--kbq-shadow-key), 0 3px 8px var(--kbq-shadow-ambient);
 }

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-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-select/tree-select.component.d.ts

@@ -210,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;

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);
+}