@koobiq/components 17.0.0-rc.1 → 17.0.0-rc.11

package/tags/tag.scss

@@ -1,10 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-tag {
     position: relative;
@@ -13,9 +10,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     max-width: 100%;
 
-    padding:
-        var(--kbq-tag-size-padding-vertical, map.get($tokens, tag-size-padding-vertical))
-        var(--kbq-tag-size-padding-horizontal, map.get($tokens, tag-size-padding-horizontal));
+    padding: kbq-css-variable(tag-size-padding-vertical) kbq-css-variable(tag-size-padding-horizontal);
 
     border-radius: 4px;
 
@@ -32,8 +27,7 @@ $tokens: meta.module-variables(tokens) !default;
 
         flex-shrink: 0;
 
-        margin-right:
-            var(--kbq-tag-size-close-button-margin-right, map.get($tokens, tag-size-close-button-margin-right));
+        margin-right: kbq-css-variable(tag-size-close-button-margin-right);
 
         &:hover {
             cursor: pointer;
@@ -49,11 +43,11 @@ $tokens: meta.module-variables(tokens) !default;
         white-space: nowrap;
         overflow: hidden;
 
-        margin: 0 var(--kbq-tag-size-content-gap-horizontal, map.get($tokens, tag-size-content-gap-horizontal));
+        margin: 0 kbq-css-variable(tag-size-content-gap-horizontal);
     }
 
     & .kbq-icon_left {
-        margin-left: var(--kbq-tag-size-icon-margin-left, map.get($tokens, tag-size-icon-margin-left));
+        margin-left: kbq-css-variable(tag-size-icon-margin-left);
     }
 }
 

package/textarea/_textarea-theme.scss

@@ -1,13 +1,10 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/typography/typography-utils' as *;
-
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-textarea-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-textarea {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, textarea-font-default));
+        @include kbq-typography-css-variables(textarea, default);
     }
 }

package/textarea/textarea.component.d.ts

@@ -1,4 +1,4 @@
-import { DoCheck, ElementRef, OnChanges, OnDestroy, InjectionToken, NgZone, OnInit } from '@angular/core';
+import { DoCheck, ElementRef, InjectionToken, NgZone, OnChanges, OnDestroy, OnInit } from '@angular/core';
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher } from '@koobiq/components/core';
 import { KbqFormFieldControl } from '@koobiq/components/form-field';

package/textarea/textarea.scss

@@ -1,10 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-textarea {
     display: inline-block;
@@ -21,12 +18,10 @@ $tokens: meta.module-variables(tokens) !default;
 
     box-sizing: border-box;
 
-    padding:
-        var(--kbq-textarea-size-padding-vertical, map.get($tokens, textarea-size-padding-vertical))
-        var(--kbq-textarea-size-padding-horizontal, map.get($tokens, textarea-size-padding-horizontal));
+    padding: kbq-css-variable(textarea-size-padding-vertical) kbq-css-variable(textarea-size-padding-horizontal);
 
-    -webkit-appearance: none; // Chrome textaria height sizing fix
-    vertical-align: bottom; // Chrome textaria height sizing fix
+    -webkit-appearance: none; // Chrome textarea height sizing fix
+    vertical-align: bottom; // Chrome textarea height sizing fix
 
     &:not(.kbq-textarea-resizable) {
         box-sizing: border-box;
@@ -35,7 +30,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     &.kbq-textarea-resizable {
         resize: vertical;
-        min-height: var(--kbq-textarea-size-min-height, map.get($tokens, textarea-size-min-height));
+        min-height: kbq-css-variable(textarea-size-min-height);
     }
 }
 

package/timepicker/public-api.d.ts

@@ -1,3 +1,3 @@
-export * from './timepicker.module';
 export * from './timepicker.constants';
 export * from './timepicker.directive';
+export * from './timepicker.module';

package/timepicker/timepicker.constants.d.ts

@@ -10,6 +10,8 @@ export declare enum TimeFormats {
 export declare const TIMEFORMAT_PLACEHOLDERS: {
     [timeFormat: string]: string;
 };
+/** Object that maps each time format to a related locale key */
+export declare const TimeFormatToLocaleKeys: Record<TimeFormats, 'full' | 'short'>;
 export declare const DEFAULT_TIME_FORMAT: TimeFormats;
 export declare const HOURS_MINUTES_SECONDS_REGEXP: RegExp;
 export declare const HOURS_MINUTES_REGEXP: RegExp;

package/timepicker/timepicker.directive.d.ts

@@ -1,6 +1,6 @@
 import { ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
-import { DateAdapter } from '@koobiq/components/core';
+import { DateAdapter, KbqLocaleService } from '@koobiq/components/core';
 import { KbqFormFieldControl } from '@koobiq/components/form-field';
 import { KbqWarningTooltipTrigger } from '@koobiq/components/tooltip';
 import { Subject } from 'rxjs';
@@ -14,6 +14,7 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
     private elementRef;
     private renderer;
     private dateAdapter;
+    private localeService?;
     /**
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
@@ -78,14 +79,18 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
     set selectionStart(value: number | null);
     get selectionEnd(): number | null;
     set selectionEnd(value: number | null);
+    /** Localized placeholder */
+    get timeFormatPlaceholder(): string;
     private readonly uid;
     private readonly validator;
     private lastValueValid;
     private control;
     private defaultPlaceholder;
+    private separator;
     private onChange;
     private onTouched;
-    constructor(elementRef: ElementRef, renderer: Renderer2, dateAdapter: DateAdapter<any>);
+    private localeSubscription;
+    constructor(elementRef: ElementRef, renderer: Renderer2, dateAdapter: DateAdapter<any>, localeService?: KbqLocaleService | undefined);
     ngOnDestroy(): void;
     getSize(): number;
     focus(): void;
@@ -114,12 +119,13 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
     private spaceKeyHandler;
     private getNewValue;
     private verticalArrowKeyHandler;
+    private fixEmptyDigit;
     private horizontalArrowKeyHandler;
     private createSelectionOfTimeComponentInInput;
     private incrementTime;
     private decrementTime;
     /**
-     * @description Get params for arrow-keys (up/down) time valie edit.
+     * @description Get params for arrow-keys (up/down) time value edit.
      * @param cursorPosition Current cursor position in timeString
      */
     private getTimeEditMetrics;
@@ -136,6 +142,7 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
     private updateView;
     private setControl;
     private validatorOnChange;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimepicker<any>, [null, null, { optional: true; }]>;
+    private updateLocaleParams;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimepicker<any>, [null, null, { optional: true; }, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTimepicker<any>, "input[kbqTimepicker]", ["kbqTimepicker"], { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "format": { "alias": "format"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "value": { "alias": "value"; "required": false; }; "kbqValidationTooltip": { "alias": "kbqValidationTooltip"; "required": false; }; }, { "incorrectInput": "incorrectInput"; }, never, never, false, never>;
 }

package/timepicker/timepicker.scss

@@ -1,16 +1,10 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-timepicker {
-    padding-right: calc(
-        var(--kbq-timepicker-size-padding-right, #{map.get($tokens, timepicker-size-padding-right)}) -
-        var(--kbq-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
-    );
+    padding-right: kbq-css-variable(timepicker-size-padding-right);
 }
 
 .kbq-form-field-type-timepicker {

package/timezone/_timezone-option-theme.scss

@@ -2,41 +2,39 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
-
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-timezone-option-theme($theme) {
     $timezone: map.get(map.get($theme, components), timezone);
 
     .kbq-timezone-option__offset,
     .kbq-timezone-option__city {
-        color: map.get($timezone, text);
+        color: kbq-css-variable(timezone-text, map.get($timezone, text));
     }
 
     .kbq-timezone-option__cities {
-        color: map.get($timezone, caption);
+        color: kbq-css-variable(timezone-caption, map.get($timezone, caption));
     }
 
     .kbq-timezone-select__panel.kbq-select__panel .kbq-optgroup-label {
-        color: map.get($timezone, optgroup-label);
+        color: kbq-css-variable(timezone-optgroup-label, map.get($timezone, optgroup-label));
     }
 }
 
 @mixin kbq-timezone-option-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-timezone-option__offset {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, timezone-option-font-offset-text));
+        @include kbq-typography-css-variables(timezone-option, offset-text);
     }
 
     .kbq-timezone-option__city {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, timezone-option-font-text));
+        @include kbq-typography-css-variables(timezone-option, text);
     }
 
     .kbq-timezone-option__cities {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, timezone-option-font-caption));
+        @include kbq-typography-css-variables(timezone-option, caption);
     }
 
     .kbq-timezone-select__panel.kbq-select__panel .kbq-optgroup-label {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, timezone-option-font-optgroup-label));
+        @include kbq-typography-css-variables(timezone-option, optgroup-label);
     }
 }

package/timezone/timezone-option.component.scss

@@ -1,18 +1,15 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-timezone-option.kbq-option {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
 
-    padding: var(--kbq-timezone-option-size-padding, map.get($tokens, timezone-option-size-padding));
-    column-gap: var(--kbq-timezone-option-size-column-gap, map.get($tokens, timezone-option-size-column-gap));
+    padding: kbq-css-variable(timezone-option-size-padding);
+    column-gap: kbq-css-variable(timezone-option-size-column-gap);
 }
 
 .kbq-timezone-option__label {
@@ -30,10 +27,10 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-timezone-option__cities {
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    max-height: var(--kbq-timezone-option-size-max-height, map.get($tokens, timezone-option-size-max-height));
+    max-height: kbq-css-variable(timezone-option-size-max-height);
     overflow: hidden;
 }
 
 .kbq-select__panel .kbq-timezone-option {
-    height: var(--kbq-timezone-option-size-height, map.get($tokens, timezone-option-size-height));
+    height: kbq-css-variable(timezone-option-size-height);
 }

package/timezone/timezone-option.directive.d.ts

@@ -1,6 +1,7 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
-import { AfterViewInit, ElementRef, NgZone, OnDestroy, ViewContainerRef, ChangeDetectorRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy, ViewContainerRef } from '@angular/core';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { KbqTimezoneOption } from './timezone-option.component';
 import * as i0 from "@angular/core";
@@ -9,12 +10,12 @@ export declare class KbqTimezoneOptionTooltip extends KbqTooltipTrigger implemen
     private changeDetectorRef;
     private option;
     private resizeObserver;
-    constructor(changeDetectorRef: ChangeDetectorRef, option: KbqTimezoneOption, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
+    constructor(changeDetectorRef: ChangeDetectorRef, option: KbqTimezoneOption, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, focusMonitor: FocusMonitor);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     onMouseEnter(): void;
     onMouseLeave(): void;
     private checkTooltipDisabled;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneOptionTooltip, [null, null, null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneOptionTooltip, [null, null, null, null, null, null, null, null, { optional: true; }, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTimezoneOptionTooltip, "kbq-timezone-option", never, {}, {}, never, never, false, never>;
 }

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

@@ -1,5 +1,6 @@
+import { KbqSelectSearch } from '@koobiq/components/core';
 import { KbqCleaner } from '@koobiq/components/form-field';
-import { KbqSelect, KbqSelectSearch } from '@koobiq/components/select';
+import { KbqSelect } from '@koobiq/components/select';
 import * as i0 from "@angular/core";
 export declare class KbqTimezoneSelectTrigger {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneSelectTrigger, never>;

package/timezone/timezone-select.component.scss

@@ -1,13 +1,11 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-timezone-select__panel.kbq-select__panel {
     .kbq-optgroup-label {
         display: block;
-        padding: map.get($tokens, timezone-option-size-optgroup-label-padding);
+        padding: kbq-css-variable(timezone-option-size-optgroup-label-padding);
     }
 }

package/timezone/timezone.utils.d.ts

@@ -1,4 +1,4 @@
-import { KbqTimezoneZone, KbqTimezoneGroup } from './timezone.models';
+import { KbqTimezoneGroup, KbqTimezoneZone } from './timezone.models';
 /**
  * Convert string timezone offset (formatted offset) to number (minutes)
  */

package/title/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './title.module';
 export * from './title.directive';
+export * from './title.module';

package/title/title.directive.d.ts

@@ -7,7 +7,6 @@ import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class KbqTitleDirective extends KbqTooltipTrigger implements AfterViewInit {
-    private focusMonitor;
     private componentInstance?;
     get isOverflown(): boolean;
     get viewValue(): string;

package/toast/_toast-theme.scss

@@ -2,48 +2,52 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
+@mixin kbq-toast($component, $style-name) {
+    $style: map.get($component, $style-name);
 
-@mixin kbq-toast($toast) {
-    box-shadow: map.get($toast, box-shadow);
+    box-shadow: kbq-css-variable(toast-#{$style-name}-container-box-shadow, map.get($style, box-shadow));
 
-    background: map.get($toast, background);
+    background: kbq-css-variable(toast-#{$style-name}-container-background, map.get($style, background));
 
     .kbq-toast__title {
-        color: map.get($toast, title);
+        color: kbq-css-variable(toast-#{$style-name}-container-title, map.get($style, title));
     }
 
     .kbq-toast__text {
-        color: map.get($toast, text);
+        color: kbq-css-variable(toast-#{$style-name}-container-text, map.get($style, text));
     }
 }
 
-
 @mixin kbq-toast-theme($theme) {
-    $toast: map.get(map.get($theme, components), toast);
-
-    $contrast: map.get($toast, contrast);
-    $error: map.get($toast, error);
+    $toast: map.get($theme, components, toast);
 
     .kbq-toast {
         &.kbq-toast_contrast {
-            @include kbq-toast($contrast);
+            @include kbq-toast($toast, contrast);
+        }
+
+        &.kbq-toast_success {
+            @include kbq-toast($toast, success);
+        }
+
+        &.kbq-toast_warning {
+            @include kbq-toast($toast, success);
         }
 
         &.kbq-toast_error {
-            @include kbq-toast($error);
+            @include kbq-toast($toast, error);
         }
     }
 }
 
 @mixin kbq-toast-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-toast {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, toast-font-text));
+        @include kbq-typography-css-variables(toast, text);
     }
 
     .kbq-toast__title {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, toast-font-title));
+        @include kbq-typography-css-variables(toast, title);
     }
 }

package/toast/public-api.d.ts

@@ -1,5 +1,5 @@
-export * from './toast.service';
+export * from './toast-container.component';
+export * from './toast.component';
 export * from './toast.module';
+export * from './toast.service';
 export * from './toast.type';
-export * from './toast.component';
-export * from './toast-container.component';

package/toast/toast-container.component.scss

@@ -1,16 +1,15 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
+@use '../core/styles/common/tokens' as *;
 
 .kbq-toast-container {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
 
-    gap: map.get($tokens, size-m);
+    margin-top: kbq-css-variable(toast-stack-size-margin-top);
+    margin-right: kbq-css-variable(toast-stack-size-margin-right);
+
+    gap: kbq-css-variable(toast-stack-size-gap);
 }

package/toast/toast.component.scss

@@ -1,8 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -10,21 +9,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: kbq-css-variable(toast-size-container-width);
 
     height: auto;
 
-    border-radius: var(--kbq-toast-size-container-border-radius, map.get($tokens, toast-size-container-border-radius));
+    border-radius: kbq-css-variable(toast-size-container-border-radius);
+
+    padding-left: kbq-css-variable(toast-size-container-padding-left);
+    padding-right: kbq-css-variable(toast-size-container-padding-right);
+}
+
+.kbq-toast__icon-container {
+    width: kbq-css-variable(toast-size-icon-width);
+    max-width: kbq-css-variable(toast-size-icon-width);
+    height: kbq-css-variable(toast-size-icon-height);
+    max-height: kbq-css-variable(toast-size-icon-height);
+
+    border-radius: kbq-css-variable(toast-size-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));
+    margin-right: kbq-css-variable(toast-size-icon-margin-right);
 
-    gap: var(
-        --kbq-toast-size-container-content-gap-horizontal,
-        map.get($tokens, toast-size-container-content-gap-horizontal)
-    );
+    padding-top: kbq-css-variable(toast-size-content-padding-top);
 }
 
 .kbq-toast__container {
@@ -33,10 +38,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: kbq-css-variable(toast-size-content-padding-top);
+    padding-right: kbq-css-variable(size-s);
+    padding-bottom: kbq-css-variable(toast-size-content-padding-bottom);
 }
 
 .kbq-toast__title {
@@ -45,6 +49,10 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
+.kbq-toast__title_with-content {
+    padding-bottom: kbq-css-variable(toast-size-caption-padding-bottom);
+}
+
 .kbq-toast__text {
     display: flex;
     flex: 1;
@@ -59,21 +67,12 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-toast__actions {
     display: flex;
 
-    padding-top: var(--kbq-toast-size-button-stack-padding-top, map.get($tokens, toast-size-button-stack-padding-top));
+    padding-top: kbq-css-variable(toast-size-button-stack-padding-top);
 
-    gap: var(
-        --kbq-toast-size-button-stack-content-gap-horizontal,
-        map.get($tokens, toast-size-button-stack-content-gap-horizontal)
-    );
-
-    & * + .kbq-link {
-        margin-left: 12px;
-    }
+    gap: kbq-css-variable(toast-size-button-stack-content-gap-horizontal);
 }
 
 .kbq-toast__close-button {
-    margin-top: var(--kbq-toast-size-close-button-margin-top, map.get($tokens, toast-size-close-button-margin-top));
-    margin-right: var(
-        --kbq-toast-size-close-button-margin-right, map.get($tokens, toast-size-close-button-margin-right)
-    );
+    margin-top: kbq-css-variable(toast-size-close-button-margin-top);
+    margin-right: kbq-css-variable(toast-size-close-button-margin-right);
 }

package/toast/toast.service.d.ts

@@ -1,16 +1,17 @@
 import { AnimationEvent } from '@angular/animations';
 import { Overlay, OverlayContainer } from '@angular/cdk/overlay';
-import { Injector, ComponentRef, TemplateRef, EmbeddedViewRef, InjectionToken } from '@angular/core';
+import { ComponentRef, EmbeddedViewRef, InjectionToken, Injector, NgZone, OnDestroy, TemplateRef } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { KbqToastComponent } from './toast.component';
-import { KbqToastData, KbqToastConfig } from './toast.type';
+import { KbqToastConfig, KbqToastData } from './toast.type';
 import * as i0 from "@angular/core";
 export declare const KBQ_TOAST_FACTORY: InjectionToken<unknown>;
 export declare const defaultToastConfig: KbqToastConfig;
-export declare class KbqToastService<T extends KbqToastComponent = KbqToastComponent> {
+export declare class KbqToastService<T extends KbqToastComponent = KbqToastComponent> implements OnDestroy {
     private overlay;
     private injector;
     private overlayContainer;
+    private ngZone;
     private toastFactory;
     private toastConfig;
     get toasts(): ComponentRef<T>[];
@@ -18,12 +19,15 @@ export declare class KbqToastService<T extends KbqToastComponent = KbqToastCompo
     readonly hovered: BehaviorSubject<boolean>;
     readonly focused: BehaviorSubject<boolean>;
     readonly animation: BehaviorSubject<AnimationEvent | null>;
+    timer: import("rxjs").Observable<number>;
     private containerInstance;
     private overlayRef;
     private portal;
+    private timerSubscription;
     private toastsDict;
     private templatesDict;
-    constructor(overlay: Overlay, injector: Injector, overlayContainer: OverlayContainer, toastFactory: any, toastConfig: KbqToastConfig);
+    constructor(overlay: Overlay, injector: Injector, overlayContainer: OverlayContainer, ngZone: NgZone, toastFactory: any, toastConfig: KbqToastConfig);
+    ngOnDestroy(): void;
     show(data: KbqToastData, duration?: number, onTop?: boolean): {
         ref: ComponentRef<T>;
         id: number;
@@ -50,6 +54,6 @@ export declare class KbqToastService<T extends KbqToastComponent = KbqToastCompo
     private getBottomRight;
     private getCenter;
     private getGlobalOverlayPosition;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastService<any>, [null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastService<any>, [null, null, null, null, null, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KbqToastService<any>>;
 }

package/toast/toast.type.d.ts

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