@koobiq/components 18.39.2 → 18.39.4

package/navbar/navbar-item.component.d.ts

@@ -101,7 +101,9 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger implements AfterCon
     private bento;
     title: KbqNavbarTitle;
     icon: KbqIcon;
-    collapsedText: string;
+    get collapsedText(): string;
+    set collapsedText(value: string);
+    private _collapsedText;
     get trigger(): string;
     set trigger(value: string);
     set collapsed(value: boolean);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.39.2",
+    "version": "18.39.4",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -24,9 +24,9 @@
         "@angular/cdk": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@angular/forms": "^18.0.0",
-        "@koobiq/cdk": "18.39.2",
-        "@koobiq/angular-moment-adapter": "18.39.2",
-        "@koobiq/angular-luxon-adapter": "18.39.2",
+        "@koobiq/cdk": "18.39.4",
+        "@koobiq/angular-moment-adapter": "18.39.4",
+        "@koobiq/angular-luxon-adapter": "18.39.4",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^10.4.0",
         "@koobiq/tokens-builder": "3.11.0",
@@ -274,18 +274,18 @@
             "esm": "./esm2022/notification-center/koobiq-components-notification-center.mjs",
             "default": "./fesm2022/koobiq-components-notification-center.mjs"
         },
-        "./overflow-items": {
-            "types": "./overflow-items/index.d.ts",
-            "esm2022": "./esm2022/overflow-items/koobiq-components-overflow-items.mjs",
-            "esm": "./esm2022/overflow-items/koobiq-components-overflow-items.mjs",
-            "default": "./fesm2022/koobiq-components-overflow-items.mjs"
-        },
         "./popover": {
             "types": "./popover/index.d.ts",
             "esm2022": "./esm2022/popover/koobiq-components-popover.mjs",
             "esm": "./esm2022/popover/koobiq-components-popover.mjs",
             "default": "./fesm2022/koobiq-components-popover.mjs"
         },
+        "./overflow-items": {
+            "types": "./overflow-items/index.d.ts",
+            "esm2022": "./esm2022/overflow-items/koobiq-components-overflow-items.mjs",
+            "esm": "./esm2022/overflow-items/koobiq-components-overflow-items.mjs",
+            "default": "./fesm2022/koobiq-components-overflow-items.mjs"
+        },
         "./progress-bar": {
             "types": "./progress-bar/index.d.ts",
             "esm2022": "./esm2022/progress-bar/koobiq-components-progress-bar.mjs",

package/popover/_popover-theme.scss

@@ -18,7 +18,7 @@
         background: var(--kbq-popover-container-background);
     }
 
-    .kbq-popover__close {
+    .kbq-popover__close.kbq-popover__close_background-overlay-inverse {
         background-color: var(--kbq-background-overlay-inverse);
     }
 

package/progress-spinner/_progress-spinner-theme.scss

@@ -1,9 +1,19 @@
-@use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/tokens';
 
 @mixin kbq-progress-spinner-theme() {
     .kbq-progress-spinner {
+        --stroke: var(--kbq-progress-spinner-circle-background);
+
         .kbq-progress-spinner__circle {
-            stroke: var(--kbq-progress-spinner-circle-background);
+            stroke: var(--stroke);
+        }
+
+        &.kbq-contrast {
+            --stroke: var(--kbq-progress-spinner-circle-contrast-background);
+        }
+
+        &.kbq-contrast-fade {
+            --stroke: var(--kbq-progress-spinner-circle-contrast-fade-background);
         }
     }
 
@@ -18,10 +28,10 @@
 
 @mixin kbq-progress-spinner-typography() {
     .kbq-progress-spinner-text {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 
     .kbq-progress-spinner-caption {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
     }
 }

package/progress-spinner/progress-spinner-tokens.scss

@@ -9,6 +9,8 @@
     --kbq-progress-spinner-size-big-content-gap-horizontal: var(--kbq-size-s);
     /* THEME TOKENS */
     --kbq-progress-spinner-circle-background: var(--kbq-icon-theme);
+    --kbq-progress-spinner-circle-contrast-background: var(--kbq-icon-contrast);
+    --kbq-progress-spinner-circle-contrast-fade-background: var(--kbq-icon-contrast-fade);
     --kbq-progress-spinner-text-color: var(--kbq-foreground-contrast);
     --kbq-progress-spinner-caption-color: var(--kbq-foreground-contrast-secondary);
 }

package/schematics/ng-add/index.js

@@ -27,8 +27,8 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.14");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.39.2");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.39.2");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.39.4");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.39.4");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.4.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.4.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^10.10.0");

package/search-expandable/search-expandable.d.ts

@@ -1,6 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterViewInit, ChangeDetectorRef, DestroyRef, EventEmitter, InjectionToken } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { AfterViewInit, ChangeDetectorRef, DestroyRef, EventEmitter, InjectionToken, OnDestroy } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { BehaviorSubject } from 'rxjs';
 import * as i0 from "@angular/core";
 /** default configuration of search-expandable */
@@ -12,7 +12,9 @@ export declare const KBQ_SEARCH_EXPANDABLE_DEFAULT_CONFIGURATION: {
 export declare const KBQ_SEARCH_EXPANDABLE_CONFIGURATION: InjectionToken<unknown>;
 export declare const defaultValue = "";
 export declare const defaultEmitValueTimeout = 200;
-export declare class KbqSearchExpandable implements ControlValueAccessor, AfterViewInit {
+export declare class KbqSearchExpandable implements ControlValueAccessor, AfterViewInit, OnDestroy {
+    /** @docs-private */
+    protected readonly ngControl: NgControl | null;
     /** @docs-private */
     protected readonly focusMonitor: FocusMonitor;
     /** @docs-private */
@@ -41,6 +43,12 @@ export declare class KbqSearchExpandable implements ControlValueAccessor, AfterV
     get placeholder(): string;
     set placeholder(value: string);
     private _placeholder;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    get tabIndex(): number;
+    set tabIndex(value: number);
+    private _tabIndex;
     /** Event emitted when the search has been toggled. */
     readonly isOpenedChange: EventEmitter<boolean>;
     /** localized data
@@ -49,6 +57,7 @@ export declare class KbqSearchExpandable implements ControlValueAccessor, AfterV
     private lastEmittedValue;
     constructor();
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     /** @docs-private */
     onChange: (value: string) => void;
     /** @docs-private */
@@ -59,12 +68,18 @@ export declare class KbqSearchExpandable implements ControlValueAccessor, AfterV
     registerOnTouched(fn: () => void): void;
     /** Implemented as part of ControlValueAccessor. */
     writeValue(value: string): void;
+    /** Implemented as part of ControlValueAccessor. */
+    setDisabledState(isDisabled: boolean): void;
     toggle(): void;
     private updateLocaleParams;
     private initDefaultParams;
     private emitValue;
+    private runFocusMonitor;
+    private stopFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSearchExpandable, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSearchExpandable, "kbq-search-expandable", never, { "isOpened": { "alias": "isOpened"; "required": false; }; "isEmitValueByEnterEnabled": { "alias": "isEmitValueByEnterEnabled"; "required": false; }; "emitValueTimeout": { "alias": "emitValueTimeout"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; }, { "isOpenedChange": "isOpenedChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSearchExpandable, "kbq-search-expandable", never, { "isOpened": { "alias": "isOpened"; "required": false; }; "isEmitValueByEnterEnabled": { "alias": "isEmitValueByEnterEnabled"; "required": false; }; "emitValueTimeout": { "alias": "emitValueTimeout"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "isOpenedChange": "isOpenedChange"; }, never, never, true, never>;
     static ngAcceptInputType_isOpened: unknown;
     static ngAcceptInputType_emitValueTimeout: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
 }

package/select/select.component.d.ts

@@ -74,6 +74,7 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     ngControl: NgControl;
     private readonly scrollStrategyFactory;
     protected localeService?: KbqLocaleService | undefined;
+    private readonly useLegacyValidation;
     /** @docs-private */
     protected readonly destroyRef: DestroyRef;
     protected readonly isBrowser: boolean;
@@ -249,8 +250,9 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     get focused(): boolean;
     set focused(value: boolean);
     panelOpen: boolean;
+    /** true if virtual scrolling is used. */
+    withVirtualScroll: boolean;
     private _focused;
-    private withVirtualScroll;
     get isEmptySearchResult(): boolean;
     get canShowCleaner(): boolean;
     get selected(): KbqOptionBase | KbqOptionBase[];

package/tabs/_tabs-common.scss

@@ -67,6 +67,7 @@
     & .kbq-tab-label__content {
         display: flex;
         align-items: center;
+        overflow: hidden;
 
         gap: var(--kbq-tabs-size-tab-item-content-gap-horizontal);
     }
@@ -83,7 +84,7 @@
     &.kbq-tab-label_vertical {
         justify-content: flex-start;
 
-        & .kbq-tab-label__content {
+        & .kbq-tab-label__content:not(.kbq-tab-label__template) {
             display: block;
             overflow: hidden;
             text-overflow: ellipsis;

package/tags/tag-input.d.ts

@@ -37,6 +37,7 @@ export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
      */
     set separatorKeyCodes(value: number[]);
     private _separatorKeyCodes;
+    /** @docs-private */
     get separators(): KbqTagSeparator[];
     private _separators;
     /** Emitted when a tag is to be added. */
@@ -58,10 +59,9 @@ export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     private _addOnBlur;
     /**
      * Whether the tagEnd event will be emitted when the text pasted.
+     * @default true
      */
-    get addOnPaste(): boolean;
-    set addOnPaste(value: boolean);
-    private _addOnPaste;
+    addOnPaste: boolean;
     /** Whether the input is disabled. */
     get disabled(): boolean;
     set disabled(value: boolean);
@@ -106,4 +106,5 @@ export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     private isSeparatorKey;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagInput, [null, null, { optional: true; self: true; }, { optional: true; self: true; }, { optional: true; self: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagInput, "input[kbqTagInputFor]", ["kbqTagInput", "kbqTagInputFor"], { "separatorKeyCodes": { "alias": "kbqTagInputSeparatorKeyCodes"; "required": false; }; "distinct": { "alias": "distinct"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tagList": { "alias": "kbqTagInputFor"; "required": false; }; "addOnBlur": { "alias": "kbqTagInputAddOnBlur"; "required": false; }; "addOnPaste": { "alias": "kbqTagInputAddOnPaste"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "tagEnd": "kbqTagInputTokenEnd"; }, never, never, false, [{ directive: typeof i1.KbqFieldSizingContent; inputs: {}; outputs: {}; }]>;
+    static ngAcceptInputType_addOnPaste: unknown;
 }

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

@@ -28,6 +28,7 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     parentForm: NgForm;
     parentFormGroup: FormGroupDirective;
     ngControl: NgControl;
+    private readonly useLegacyValidation;
     private readonly dropList;
     private readonly destroyRef;
     private readonly focusMonitor;
@@ -154,6 +155,11 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     selectable: boolean;
     /** Whether the tags in the list are editable. */
     editable: boolean;
+    /**
+     * Whether to emit change events when tags are added/removed.
+     * Set to `false` to prevent the form control from being marked as dirty during programmatic updates.
+     */
+    emitOnTagChanges: boolean;
     /** Whether the tags in the list are removable. */
     get removable(): boolean;
     set removable(value: boolean);
@@ -352,11 +358,12 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     private syncDropListDisabledState;
     private setupFocusMonitor;
     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; }; "draggable": { "alias": "draggable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "dropped": "dropped"; "valueChange": "valueChange"; "change": "change"; }, ["cleaner", "tags"], ["*", "kbq-cleaner"], false, [{ directive: typeof i1.CdkDropList; inputs: {}; outputs: {}; }]>;
+    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; }; "draggable": { "alias": "draggable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "emitOnTagChanges": { "alias": "emitOnTagChanges"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "dropped": "dropped"; "valueChange": "valueChange"; "change": "change"; }, ["cleaner", "tags"], ["*", "kbq-cleaner"], false, [{ directive: typeof i1.CdkDropList; inputs: {}; outputs: {}; }]>;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_draggable: unknown;
     static ngAcceptInputType_selectable: unknown;
     static ngAcceptInputType_editable: unknown;
+    static ngAcceptInputType_emitOnTagChanges: unknown;
     static ngAcceptInputType_removable: unknown;
 }

package/tags/tag.component.d.ts

@@ -72,6 +72,8 @@ export declare class KbqTagEditSubmit {
 export declare class KbqTagEditInput {
     private readonly tag;
     /** @docs-private */
+    protected handleClick(event: MouseEvent): void;
+    /** @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: {}; }]>;

package/textarea/textarea.component.d.ts

@@ -15,6 +15,7 @@ export declare class KbqTextarea implements KbqFormFieldControl<any>, OnInit, On
     defaultErrorStateMatcher: ErrorStateMatcher;
     private parent;
     private ngZone;
+    private readonly useLegacyValidation;
     /** Whether the component is in an error state. */
     errorState: boolean;
     /** Parameter enables or disables the ability to automatically increase the height.

package/title/title.directive.d.ts

@@ -5,6 +5,8 @@ import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class KbqTitleDirective extends KbqTooltipTrigger implements AfterViewInit, OnDestroy {
     private componentInstance?;
+    private readonly renderer;
+    private readonly nativeElement;
     private contentObserver;
     set trigger(value: string);
     get trigger(): string;
@@ -14,6 +16,7 @@ export declare class KbqTitleDirective extends KbqTooltipTrigger implements Afte
     get viewValue(): string;
     get parent(): HTMLElement;
     get child(): HTMLElement;
+    get hasOnlyText(): boolean;
     readonly resizeStream: Subject<Event>;
     private readonly debounceInterval;
     private resizeSubscription;

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

@@ -80,6 +80,7 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     ngControl: NgControl;
     private localeService?;
     protected readonly isBrowser: boolean;
+    private readonly useLegacyValidation;
     private readonly defaultOptions;
     /** Whether the component is in an error state. */
     errorState: boolean;