@koobiq/components 17.0.0-rc.3 → 17.0.0-rc.4

package/schematics/ng-add/index.js

@@ -52,13 +52,13 @@ function ngAdd(options) {
         }
         // Installing dependencies
         addPackageToPackageJson(tree, '@angular/cdk', "^17.2.0");
-        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.0.0-rc.3");
-        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.0.0-rc.3");
+        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.0.0-rc.4");
+        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.0.0-rc.4");
         addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.0.2");
         addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.0.2");
         addPackageToPackageJson(tree, '@koobiq/icons', "^7.1.1");
         addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.0.0-rc.2");
-        addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.0.0-rc.2");
+        addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.0.0-rc.4");
         addPackageToPackageJson(tree, '@messageformat/core', "^3.0.1");
         addPackageToPackageJson(tree, 'luxon', "^3.4.4");
         addPackageToPackageJson(tree, 'marked', "^4.0.18");

package/splitter/splitter.component.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, Renderer2 } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, Renderer2 } from '@angular/core';
 import * as i0 from "@angular/core";
 interface IArea {
     area: KbqSplitterAreaDirective;
@@ -64,13 +64,15 @@ export declare class KbqSplitterComponent implements OnInit {
     private ngZone;
     private renderer;
     gutterPositionChange: EventEmitter<void>;
-    readonly areas: IArea[];
+    areas: IArea[];
     gutters: QueryList<KbqGutterDirective>;
     ghost: KbqGutterGhostDirective;
+    areaRefs: QueryList<KbqSplitterAreaDirective>;
     get isDragging(): boolean;
     private _isDragging;
     private readonly areaPositionDivider;
     private readonly listeners;
+    private areasChangeSubscription;
     get hideGutters(): boolean;
     set hideGutters(value: boolean);
     private _hideGutters;
@@ -91,18 +93,21 @@ export declare class KbqSplitterComponent implements OnInit {
     constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, renderer: Renderer2);
     addArea(area: KbqSplitterAreaDirective): void;
     ngOnInit(): void;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
     onMouseDown(event: MouseEvent, leftAreaIndex: number, rightAreaIndex: number): void;
     removeArea(area: KbqSplitterAreaDirective): void;
     isVertical(): boolean;
+    private mapAndOrderArea;
     private updateGutter;
     private onMouseMove;
     private resizeAreas;
     private onMouseUp;
     private setStyle;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSplitterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSplitterComponent, "kbq-splitter", ["kbqSplitter"], { "hideGutters": { "alias": "hideGutters"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "useGhost": { "alias": "useGhost"; "required": false; }; "gutterSize": { "alias": "gutterSize"; "required": false; }; }, { "gutterPositionChange": "gutterPositionChange"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSplitterComponent, "kbq-splitter", ["kbqSplitter"], { "hideGutters": { "alias": "hideGutters"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "useGhost": { "alias": "useGhost"; "required": false; }; "gutterSize": { "alias": "gutterSize"; "required": false; }; }, { "gutterPositionChange": "gutterPositionChange"; }, ["areaRefs"], ["*"], false, never>;
 }
-export declare class KbqSplitterAreaDirective implements OnInit, OnDestroy {
+export declare class KbqSplitterAreaDirective implements AfterViewInit, OnDestroy {
     private elementRef;
     private renderer;
     private splitter;
@@ -110,7 +115,7 @@ export declare class KbqSplitterAreaDirective implements OnInit, OnDestroy {
     constructor(elementRef: ElementRef, renderer: Renderer2, splitter: KbqSplitterComponent);
     isResizing(): boolean;
     disableFlex(): void;
-    ngOnInit(): void;
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     setOrder(order: number): void;
     setSize(size: number): void;

package/toast/_toast-theme.scss

@@ -22,16 +22,21 @@
 @mixin kbq-toast-theme($theme) {
     $toast: map.get(map.get($theme, components), toast);
 
-    $contrast: map.get($toast, contrast);
-    $error: map.get($toast, error);
-
     .kbq-toast {
         &.kbq-toast_contrast {
-            @include kbq-toast($contrast);
+            @include kbq-toast(map.get($toast, contrast));
+        }
+
+        &.kbq-toast_success {
+            @include kbq-toast(map.get($toast, success));
+        }
+
+        &.kbq-toast_warning {
+            @include kbq-toast(map.get($toast, success));
         }
 
         &.kbq-toast_error {
-            @include kbq-toast($error);
+            @include kbq-toast(map.get($toast, error));
         }
     }
 }

package/toast/toast-container.component.scss

@@ -12,5 +12,8 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: column;
     align-items: flex-end;
 
-    gap: map.get($tokens, size-m);
+    margin-top: var(--kbq-toast-stack-size-margin-top, map.get($tokens, toast-stack-size-margin-top));
+    margin-right: var(--kbq-toast-stack-size-margin-right, map.get($tokens, toast-stack-size-margin-right));
+
+    gap: var(--kbq-toast-stack-size-gap, map.get($tokens, toast-stack-size-gap));
 }

package/toast/toast.component.scss

@@ -10,21 +10,27 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     box-sizing: border-box;
 
-    min-width: var(--kbq-toast-size-container-min-width, map.get($tokens, toast-size-container-min-width));
-    max-width: 480px;
+    width: var(--kbq-toast-size-container-width, map.get($tokens, toast-size-container-width));
 
     height: auto;
 
     border-radius: var(--kbq-toast-size-container-border-radius, map.get($tokens, toast-size-container-border-radius));
 
-    padding:
-        var(--kbq-toast-size-container-padding-vertical, map.get($tokens, toast-size-container-padding-vertical))
-        var(--kbq-toast-size-container-padding-horizontal, map.get($tokens, toast-size-container-padding-horizontal));
+    padding-left: var(--kbq-toast-size-container-padding-left, map.get($tokens, toast-size-container-padding-left));
+    padding-right: var(--kbq-toast-size-container-padding-right, map.get($tokens, toast-size-container-padding-right));
+}
 
-    gap: var(
-        --kbq-toast-size-container-content-gap-horizontal,
-        map.get($tokens, toast-size-container-content-gap-horizontal)
-    );
+.kbq-toast__icon-container {
+    width: var(--kbq-toast-size-icon-width, map.get($tokens, toast-size-icon-width));
+    max-width: var(--kbq-toast-size-icon-width, map.get($tokens, toast-size-icon-width));
+    height: var(--kbq-toast-size-icon-height, map.get($tokens, toast-size-icon-height));
+    max-height: var(--kbq-toast-size-icon-height, map.get($tokens, toast-size-icon-height));
+
+    border-radius: var(--kbq-toast-size-border-raius, map.get($tokens, toast-size-border-raius));
+
+    margin-right: var(--kbq-toast-size-icon-margin-right, map.get($tokens, toast-size-icon-margin-right));
+
+    padding-top: var(--kbq-toast-size-content-padding-top, map.get($tokens, toast-size-content-padding-top));
 }
 
 .kbq-toast__container {
@@ -33,10 +39,9 @@ $tokens: meta.module-variables(tokens) !default;
 
     flex: 1;
 
-    gap: var(
-        --kbq-toast-size-container-content-gap-vertical,
-        map.get($tokens, toast-size-container-content-gap-vertical)
-    )
+    padding-top: var(--kbq-toast-size-content-padding-top, map.get($tokens, toast-size-content-padding-top));
+    padding-right: map.get($tokens, size-s);
+    padding-bottom: var(--kbq-toast-size-content-padding-bottom, map.get($tokens, toast-size-content-padding-bottom));
 }
 
 .kbq-toast__title {
@@ -45,6 +50,10 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
+.kbq-toast__title_with-content {
+    padding-bottom: var(--kbq-toast-size-caption-padding-bottom, map.get($tokens, toast-size-caption-padding-bottom));
+}
+
 .kbq-toast__text {
     display: flex;
     flex: 1;
@@ -65,10 +74,6 @@ $tokens: meta.module-variables(tokens) !default;
         --kbq-toast-size-button-stack-content-gap-horizontal,
         map.get($tokens, toast-size-button-stack-content-gap-horizontal)
     );
-
-    & * + .kbq-link {
-        margin-left: 12px;
-    }
 }
 
 .kbq-toast__close-button {

package/toast/toast.type.d.ts

@@ -1,6 +1,8 @@
 import { TemplateRef, InjectionToken } from '@angular/core';
 export declare enum KbqToastStyle {
     Contrast = "contrast",
+    Success = "success",
+    Warning = "warning",
     Error = "error"
 }
 export declare enum KbqToastPosition {