@koobiq/components 18.26.0 → 18.28.0

package/textarea/textarea.component.d.ts

@@ -19,8 +19,8 @@ export declare class KbqTextarea implements KbqFormFieldControl<any>, OnInit, On
     errorState: boolean;
     /** Parameter enables or disables the ability to automatically increase the height.
      * If set to false, the textarea becomes vertically resizable. */
-    set canGrow(value: boolean);
     get canGrow(): boolean;
+    set canGrow(value: boolean);
     protected readonly isBrowser: boolean;
     protected readonly renderer: Renderer2;
     private _canGrow;

package/toast/toast-container.component.scss

@@ -5,8 +5,34 @@
     flex-direction: column;
     align-items: flex-end;
 
-    margin-top: var(--kbq-toast-stack-size-margin-top);
-    margin-right: var(--kbq-toast-stack-size-margin-right);
-
     gap: var(--kbq-toast-stack-size-gap);
+
+    // @see KbqToastPosition
+    &.kbq-toast-container-top-right {
+        margin-top: var(--kbq-toast-stack-size-margin-vertical);
+        margin-right: var(--kbq-toast-stack-size-margin-horizontal);
+    }
+
+    &.kbq-toast-container-top-left {
+        margin-top: var(--kbq-toast-stack-size-margin-vertical);
+        margin-left: var(--kbq-toast-stack-size-margin-horizontal);
+    }
+
+    &.kbq-toast-container-top-center {
+        margin-top: var(--kbq-toast-stack-size-margin-vertical);
+    }
+
+    &.kbq-toast-container-bottom-right {
+        margin-bottom: var(--kbq-toast-stack-size-margin-vertical);
+        margin-right: var(--kbq-toast-stack-size-margin-horizontal);
+    }
+
+    &.kbq-toast-container-bottom-left {
+        margin-bottom: var(--kbq-toast-stack-size-margin-vertical);
+        margin-left: var(--kbq-toast-stack-size-margin-horizontal);
+    }
+
+    &.kbq-toast-container-bottom-center {
+        margin-bottom: var(--kbq-toast-stack-size-margin-vertical);
+    }
 }

package/toast/toast-tokens.scss

@@ -1,6 +1,10 @@
-.kbq-toast-container {
+:where(.kbq-toast-container) {
+    // @deprecated use --kbq-toast-stack-size-margin-vertical
     --kbq-toast-stack-size-margin-top: var(--kbq-size-m);
+    // @deprecated use --kbq-toast-stack-size-margin-horizontal
     --kbq-toast-stack-size-margin-right: var(--kbq-size-m);
+    --kbq-toast-stack-size-margin-vertical: var(--kbq-size-m);
+    --kbq-toast-stack-size-margin-horizontal: var(--kbq-size-m);
     --kbq-toast-stack-size-gap: var(--kbq-size-s);
     --kbq-toast-size-container-width: 360px;
     --kbq-toast-size-container-border-radius: var(--kbq-size-s);

package/toast/toast.component.scss

@@ -90,7 +90,8 @@
                             16px]
                         ),
                         typography-text-normal-line-height]
-                    ) / 2
+                    ) /
+                    2
             )]
     );
     margin-right: var(--kbq-toast-size-close-button-margin-right);

package/toast/toast.service.d.ts

@@ -6,7 +6,6 @@ import { KbqToastComponent } from './toast.component';
 import { KbqToastConfig, KbqToastData } from './toast.type';
 import * as i0 from "@angular/core";
 export declare const KBQ_TOAST_FACTORY: InjectionToken<typeof KbqToastComponent>;
-export declare const defaultToastConfig: KbqToastConfig;
 export declare class KbqToastService<T extends KbqToastComponent = KbqToastComponent> implements OnDestroy {
     private overlay;
     private injector;

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/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[];