@koobiq/components 18.25.0 → 18.27.0

package/toast/toast.type.d.ts

@@ -1,4 +1,4 @@
-import { InjectionToken, TemplateRef } from '@angular/core';
+import { InjectionToken, Provider, TemplateRef } from '@angular/core';
 export declare enum KbqToastStyle {
     Contrast = "contrast",
     Success = "success",
@@ -29,5 +29,15 @@ export interface KbqToastConfig {
     duration: number;
     delay: number;
     onTop: boolean;
+    /** Custom indentation for positioning the toast stack overlay when using `GlobalPositionStrategy` */
+    indent: {
+        /** Vertical spacing from the top or bottom of the screen. */
+        vertical: number;
+        /** Horizontal spacing from the left or right of the screen. */
+        horizontal: number;
+    };
 }
-export declare const KBQ_TOAST_CONFIG: InjectionToken<unknown>;
+export declare const defaultToastConfig: KbqToastConfig;
+export declare const KBQ_TOAST_CONFIG: InjectionToken<KbqToastConfig>;
+/** Utility provider for `KBQ_TOAST_CONFIG`. */
+export declare const kbqToastConfigurationProvider: (configuration: Partial<KbqToastConfig>) => Provider;

package/toggle/toggle.component.d.ts

@@ -39,6 +39,10 @@ export declare class KbqToggleComponent extends KbqColorDirective implements Aft
     get indeterminate(): boolean;
     set indeterminate(value: boolean);
     private _indeterminate;
+    /**
+     * Property for manually set loading state.
+     */
+    loading: boolean;
     readonly change: EventEmitter<KbqToggleChange>;
     /** Event emitted when the toggle's `indeterminate` value changes. */
     readonly indeterminateChange: EventEmitter<boolean>;
@@ -61,12 +65,12 @@ export declare class KbqToggleComponent extends KbqColorDirective implements Aft
     private setTransitionCheckState;
     private onTouchedCallback;
     private onChangeCallback;
-    private updateModelValue;
     private transitionCheckState;
     private emitChangeEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToggleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqToggleComponent, "kbq-toggle", ["kbqToggle"], { "big": { "alias": "big"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqToggleComponent, "kbq-toggle", ["kbqToggle"], { "big": { "alias": "big"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], false, never>;
     static ngAcceptInputType_tabIndex: unknown;
     static ngAcceptInputType_indeterminate: unknown;
+    static ngAcceptInputType_loading: unknown;
 }
 export {};

package/toggle/toggle.scss

@@ -1,4 +1,7 @@
+// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
+/* stylelint-disable selector-class-pattern */
 @use '../core/styles/common/tokens';
+@use '../core/styles/common/animation';
 @use './toggle-theme' as theme;
 
 $toggle-thumb-offset: 8px;

package/top-bar/top-bar-tokens.scss

@@ -1,12 +1,13 @@
-.kbq-top-bar {
+:where(.kbq-top-bar) {
     --kbq-top-bar-position: sticky;
     --kbq-top-bar-background: var(--kbq-background-bg);
     --kbq-top-bar-spacer-min-width: 80px;
     --kbq-top-bar-padding-vertical: var(--kbq-size-xl);
     --kbq-top-bar-padding-horizontal: var(--kbq-size-xxl);
     --kbq-top-bar-border-radius: 0;
-    --kbq-top-bar-left-gap: 0;
-    --kbq-top-bar-right-gap: var(--kbq-size-s);
+    --kbq-top-bar-container-start-gap: 0;
+    --kbq-top-bar-container-start-basis: 0;
+    --kbq-top-bar-container-end-gap: var(--kbq-size-s);
     --kbq-top-bar-shadow-bottom: var(--kbq-shadow-overflow-normal-bottom);
     --kbq-top-bar-shadow-transition: ease-out 300ms;
 }

package/top-bar/top-bar.d.ts

@@ -1,3 +1,4 @@
+import { KbqOverflowItems } from '@koobiq/components/overflow-items';
 import * as i0 from "@angular/core";
 export declare class KbqTopBarSpacer {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTopBarSpacer, never>;
@@ -11,6 +12,12 @@ export declare class KbqTopBarContainer {
      * Conditionally applies a CSS class based on the value
      */
     placement: import("@angular/core").InputSignal<"start" | "end">;
+    /**
+     * Track if container has `KbqOverflowItems` directive assigned.
+     * Used to replace `gap` with `margin` so `KbqOverflowItems` will calculate correct width on resize.
+     * @docs-private
+     */
+    protected readonly overflowItems: KbqOverflowItems | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTopBarContainer, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTopBarContainer, "[kbqTopBarContainer]", never, { "placement": { "alias": "placement"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/top-bar/top-bar.scss

@@ -14,17 +14,41 @@
 
     .kbq-top-bar-spacer {
         height: 100%;
-        flex: 1 0 var(--kbq-top-bar-spacer-min-width);
+        flex: 0 0 var(--kbq-top-bar-spacer-min-width);
     }
 
     .kbq-top-bar-container__start {
         display: flex;
-        gap: var(--kbq-top-bar-left-gap);
+        gap: var(--kbq-top-bar-container-start-gap);
+        flex: 1 0 var(--kbq-top-bar-container-start-basis);
+        justify-content: flex-start;
+        min-width: 0;
     }
 
     .kbq-top-bar-container__end {
         display: flex;
-        gap: var(--kbq-top-bar-right-gap);
+        gap: var(--kbq-top-bar-container-end-gap);
+        justify-content: end;
+    }
+
+    .kbq-top-bar-container__with-overflow-items {
+        gap: unset;
+        padding: 1px;
+
+        > .kbq-overflow-item {
+            &:not(:last-of-type) {
+                margin-right: var(--kbq-top-bar-container-end-gap);
+            }
+
+            // apply margin if the last item needs to be alwaysVisible
+            &:last-of-type:is([aria-hidden='false']) + .kbq-overflow-items-result {
+                margin-left: var(--kbq-top-bar-container-end-gap);
+            }
+        }
+
+        .kbq-overflow-items-result:first-child {
+            margin-right: var(--kbq-top-bar-container-end-gap);
+        }
     }
 
     &.kbq-top-bar_with-shadow {

package/tree/_tree-theme.scss

@@ -9,12 +9,12 @@
         color: var(--kbq-tree-#{$state-name}-text-color);
     }
 
-    .kbq-tree-node-toggle .kbq-icon,
-    .kbq-icon.kbq-tree-node-toggle {
+    .kbq-tree-node-toggle .kbq-icon.kbq-empty,
+    .kbq-icon.kbq-empty.kbq-tree-node-toggle {
         color: var(--kbq-tree-#{$state-name}-tree-toggle-color);
     }
 
-    .kbq-option-action .kbq-icon {
+    .kbq-option-action .kbq-icon.kbq-empty {
         color: var(--kbq-tree-#{$state-name}-action-button-color);
     }
 
@@ -48,7 +48,7 @@
         &.kbq-disabled {
             @include kbq-tree-option(states-disabled);
 
-            & .kbq-icon {
+            & .kbq-icon.kbq-empty {
                 color: var(--kbq-states-icon-disabled);
             }
         }

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

@@ -181,6 +181,7 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     panelWidth: KbqTreeSelectPanelWidth;
     get panelOpen(): boolean;
     get canShowCleaner(): boolean;
+    /** @docs-private */
     get colorForState(): KbqComponentColors;
     isEmptySearchResult: boolean;
     triggerValues: KbqTreeSelectTriggerValue[];