@koobiq/components 17.0.0-rc.9 → 17.0.0

package/splitter/splitter.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, Renderer2 } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, Renderer2 } from '@angular/core';
 import * as i0 from "@angular/core";
 interface IArea {
     area: KbqSplitterAreaDirective;
@@ -58,7 +58,7 @@ export declare class KbqGutterGhostDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqGutterGhostDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqGutterGhostDirective, "kbq-gutter-ghost", never, { "visible": { "alias": "visible"; "required": false; }; "x": { "alias": "x"; "required": false; }; "y": { "alias": "y"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, false, never>;
 }
-export declare class KbqSplitterComponent implements OnInit {
+export declare class KbqSplitterComponent implements OnInit, AfterContentInit, OnDestroy {
     elementRef: ElementRef;
     changeDetectorRef: ChangeDetectorRef;
     private ngZone;

package/splitter/splitter.scss

@@ -13,7 +13,6 @@
             pointer-events: none;
         }
     }
-
 }
 
 .kbq-gutter {

package/table/_table-theme.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-table-theme($theme) {
     $foreground: map.get($theme, foreground);
     $states-background: map.get($theme, states, background);
@@ -21,15 +20,17 @@
 
         & > tbody {
             & > tr {
-                &:hover td {
-                    background-color: kbq-css-variable(
-                        states-background-transparent-hover, map.get($states-background, transparent-hover));
-                }
-
                 & > th,
                 & > td {
                     color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
                 }
+
+                &:hover td {
+                    background-color: kbq-css-variable(
+                        states-background-transparent-hover,
+                        map.get($states-background, transparent-hover)
+                    );
+                }
             }
         }
 
@@ -63,4 +64,3 @@
         }
     }
 }
-

package/table/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './table.module';
 export * from './table.component';
+export * from './table.module';

package/table/table.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-table {
@@ -20,7 +19,7 @@ $tokens: meta.module-variables(tokens) !default;
                     right: kbq-css-variable(table-size-row-padding-horizontal);
                     bottom: kbq-css-variable(table-size-row-padding-vertical);
                     left: kbq-css-variable(table-size-row-padding-horizontal);
-                };
+                }
 
                 vertical-align: baseline;
                 text-align: left;
@@ -40,6 +39,7 @@ $tokens: meta.module-variables(tokens) !default;
         padding-bottom: kbq-css-variable(size-xxs);
     }
 }
+
 .kbq-table.kbq-table_bordered {
     & > tbody > tr {
         & th,

package/tabs/_tabs-common.scss

@@ -4,10 +4,8 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
-
 @mixin tab-label {
     position: relative;
 
@@ -26,14 +24,17 @@ $tokens: meta.module-variables(tokens) !default;
     $padding-horizontal: map.get($tokens, tabs-size-tab-item-padding-horizontal);
     $border-width: map.get($tokens, tabs-size-tab-item-focus-outline-width);
 
-    padding:
-        calc(
-            var(--kbq-tabs-size-tab-item-padding-vertical, $padding-vertical) -
-            var(--kbq-tabs-size-tab-item-focus-outline-width, $border-width)
+    padding: calc(
+            var(--kbq-tabs-size-tab-item-padding-vertical, $padding-vertical) - var(
+                    --kbq-tabs-size-tab-item-focus-outline-width,
+                    $border-width
+                )
         )
         calc(
-            var(--kbq-tabs-size-tab-item-padding-horizontal, $padding-horizontal) -
-            var(--kbq-tabs-size-tab-item-focus-outline-width, $border-width)
+            var(--kbq-tabs-size-tab-item-padding-horizontal, $padding-horizontal) - var(
+                    --kbq-tabs-size-tab-item-focus-outline-width,
+                    $border-width
+                )
         );
 
     border: {
@@ -59,6 +60,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     & .kbq-tab-label__content {
         display: flex;
+        align-items: center;
 
         gap: kbq-css-variable(tabs-size-tab-item-content-gap-horizontal);
     }

package/tabs/_tabs-theme.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-tab-item-state($component, $type, $sub-type, $style-name) {
     $style: map.get($component, $type, $sub-type, $style-name);
 

package/tabs/paginated-tab-header.d.ts

@@ -2,7 +2,7 @@ import { FocusableOption } from '@angular/cdk/a11y';
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import { Platform } from '@angular/cdk/platform';
 import { ViewportRuler } from '@angular/cdk/scrolling';
-import { ChangeDetectorRef, ElementRef, NgZone, QueryList, EventEmitter, AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy } from '@angular/core';
+import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, QueryList } from '@angular/core';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 /**

package/tabs/public-api.d.ts

@@ -1,10 +1,10 @@
-export * from './tabs.module';
+export { KbqTabBody, KbqTabBodyOriginState, KbqTabBodyPortal, KbqTabBodyPositionState } from './tab-body.component';
+export { KbqTabContent } from './tab-content.directive';
 export * from './tab-group.component';
-export { KbqTabBody, KbqTabBodyOriginState, KbqTabBodyPositionState, KbqTabBodyPortal } from './tab-body.component';
 export { KbqTabHeader, ScrollDirection } from './tab-header.component';
 export { KbqTabLabelWrapper } from './tab-label-wrapper.directive';
-export { KbqTab } from './tab.component';
 export { KbqTabLabel } from './tab-label.directive';
-export { KbqTabNav, KbqTabLink } from './tab-nav-bar/index';
-export { KbqTabContent } from './tab-content.directive';
+export { KbqTabLink, KbqTabNav } from './tab-nav-bar/index';
+export { KbqTab } from './tab.component';
 export * from './tabs-animations';
+export * from './tabs.module';

package/tabs/tab-body.component.d.ts

@@ -1,7 +1,7 @@
 import { AnimationEvent } from '@angular/animations';
-import { Directionality, Direction } from '@angular/cdk/bidi';
-import { TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
-import { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit, ElementRef, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
+import { Direction, Directionality } from '@angular/cdk/bidi';
+import { CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
+import { ChangeDetectorRef, ComponentFactoryResolver, ElementRef, EventEmitter, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * These position states are used internally as animation states for the tab body. Setting the

package/tabs/tab-group.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterContentChecked, AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList, InjectionToken, AfterViewInit } from '@angular/core';
+import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, OnDestroy, QueryList } from '@angular/core';
 import { CanDisableCtor } from '@koobiq/components/core';
 import { Subject } from 'rxjs';
 import { KbqTabHeader } from './tab-header.component';

package/tabs/tab-group.scss

@@ -5,7 +5,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-tab-group {
     display: flex;
     flex-direction: column;

package/tabs/tab-header.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/common/vendor-prefixes';
 @use 'tabs-common' as *;
 
-
 .kbq-tab-header {
     display: flex;
     overflow: hidden;
@@ -43,16 +42,11 @@
     padding-left: 12px;
     padding-right: 12px;
 
-    &.kbq-tab-header__pagination_before {}
-
-    &.kbq-tab-header__pagination_after {}
-
     .kbq-tab-header__pagination-controls_enabled & {
         display: flex;
     }
 }
 
-
 .kbq-tab-header__content {
     display: flex;
     flex-grow: 1;

package/tabs/tab-nav-bar/tab-nav-bar.d.ts

@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterContentInit, ElementRef, OnDestroy, QueryList, Renderer2 } from '@angular/core';
+import { AfterViewInit, ElementRef, OnDestroy, QueryList, Renderer2 } from '@angular/core';
 import { CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 /** @docs-private */
@@ -7,36 +7,36 @@ export declare class KbqTabLinkBase {
 }
 /** @docs-private */
 export declare const KbqTabLinkMixinBase: HasTabIndexCtor & CanDisableCtor & typeof KbqTabLinkBase;
+/**
+ * Navigation component matching the styles of the tab group header.
+ */
+export declare class KbqTabNav {
+    vertical: boolean;
+    transparent: boolean;
+    onSurface: boolean;
+    links: QueryList<KbqTabLink>;
+    constructor(vertical: string);
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabNav, [{ attribute: "vertical"; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabNav, "[kbq-tab-nav-bar]", ["kbqTabNavBar", "kbqTabNav"], { "transparent": { "alias": "transparent"; "required": false; }; "onSurface": { "alias": "onSurface"; "required": false; }; }, {}, ["links"], ["*"], false, never>;
+}
 /**
  * Link inside of a `kbq-tab-nav-bar`.
  */
-export declare class KbqTabLink extends KbqTabLinkMixinBase implements OnDestroy, CanDisable, HasTabIndex {
+export declare class KbqTabLink extends KbqTabLinkMixinBase implements OnDestroy, CanDisable, HasTabIndex, AfterViewInit {
     elementRef: ElementRef;
     private readonly focusMonitor;
     private readonly renderer;
-    vertical: boolean;
+    private tabNav;
+    get vertical(): boolean;
     /** Whether the link is active. */
     get active(): boolean;
     set active(value: boolean);
     /** Whether the tab link is active or not. */
     protected isActive: boolean;
-    constructor(elementRef: ElementRef, focusMonitor: FocusMonitor, renderer: Renderer2);
+    constructor(elementRef: ElementRef, focusMonitor: FocusMonitor, renderer: Renderer2, tabNav: KbqTabNav);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private addClassModifierForIcons;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabLink, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabLink, "a[kbq-tab-link], a[kbqTabLink]", ["kbqTabLink"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
-/**
- * Navigation component matching the styles of the tab group header.
- */
-export declare class KbqTabNav implements AfterContentInit {
-    vertical: boolean;
-    transparent: boolean;
-    onSurface: boolean;
-    links: QueryList<KbqTabLink>;
-    constructor(vertical: string);
-    ngAfterContentInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabNav, [{ attribute: "vertical"; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabNav, "[kbq-tab-nav-bar]", ["kbqTabNavBar", "kbqTabNav"], { "transparent": { "alias": "transparent"; "required": false; }; "onSurface": { "alias": "onSurface"; "required": false; }; }, {}, ["links"], ["*"], false, never>;
-}

package/tabs/tab-nav-bar/tab-nav-bar.scss

@@ -5,7 +5,6 @@
 
 @use '../../core/styles/common/tokens' as *;
 
-
 .kbq-tab-link {
     vertical-align: top;
     text-decoration: none;

package/tags/_tag-theme.scss

@@ -5,7 +5,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-tag-state($component, $type, $style-name) {
     $style: map.get($component, $type, $style-name);
 
@@ -70,4 +69,3 @@
         @include kbq-typography-css-variables(tag-input, default);
     }
 }
-

package/tags/public-api.d.ts

@@ -1,5 +1,5 @@
-export * from './tag.module';
-export * from './tag.component';
-export * from './tag-list.component';
-export * from './tag-input';
 export * from './tag-default-options';
+export * from './tag-input';
+export * from './tag-list.component';
+export * from './tag.component';
+export * from './tag.module';

package/tags/tag-input.d.ts

@@ -1,10 +1,10 @@
 import { ElementRef, EventEmitter, OnChanges, Renderer2 } from '@angular/core';
 import { NgControl } from '@angular/forms';
+import { KbqAutocompleteTrigger } from '@koobiq/components/autocomplete';
 import { KbqTrim } from '@koobiq/components/form-field';
 import { KbqTagsDefaultOptions } from './tag-default-options';
 import { KbqTagList } from './tag-list.component';
 import { KbqTagTextControl } from './tag-text-control';
-import { KbqAutocompleteTrigger } from '@koobiq/components/autocomplete';
 import * as i0 from "@angular/core";
 /** Represents an input event on a `kbqTagInput`. */
 export interface KbqTagInputEvent {

package/tags/tag-list.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-tag-list {
@@ -62,15 +61,18 @@ $tokens: meta.module-variables(tokens) !default;
         $padding-vertical: map.get($tokens, tag-input-size-padding-vertical);
         $border-width: map.get($tokens, form-field-size-border-width);
 
-        padding:
-            calc(
-                var(--kbq-tag-input-size-padding-vertical, #{$padding-vertical}) -
-                var(--kbq-form-field-size-border-width, $border-width)
+        padding: calc(
+                var(--kbq-tag-input-size-padding-vertical, #{$padding-vertical}) - var(
+                        --kbq-form-field-size-border-width,
+                        $border-width
+                    )
             )
             kbq-css-variable(tag-input-size-padding-right)
             calc(
-                var(--kbq-tag-input-size-padding-vertical, #{$padding-vertical}) -
-                var(--kbq-form-field-size-border-width, $border-width)
+                var(--kbq-tag-input-size-padding-vertical, #{$padding-vertical}) - var(
+                        --kbq-form-field-size-border-width,
+                        $border-width
+                    )
             )
             kbq-css-variable(tag-input-size-padding-left);
     }

package/tags/tag.component.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, QueryList } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, QueryList } from '@angular/core';
 import { IFocusableOption } from '@koobiq/cdk/a11y';
 import { CanColor, CanColorCtor, CanDisable, CanDisableCtor, KbqTitleTextRef } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';
@@ -37,7 +37,7 @@ export declare class KbqTagBase {
 }
 /** @docs-private */
 export declare const KbqTagMixinBase: CanColorCtor & CanDisableCtor & typeof KbqTagBase;
-export declare class KbqTag extends KbqTagMixinBase implements IFocusableOption, OnDestroy, CanColor, CanDisable, KbqTitleTextRef {
+export declare class KbqTag extends KbqTagMixinBase implements IFocusableOption, OnDestroy, CanColor, CanDisable, KbqTitleTextRef, AfterContentInit {
     elementRef: ElementRef;
     changeDetectorRef: ChangeDetectorRef;
     private _ngZone;

package/tags/tag.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-tag {
     position: relative;
 
@@ -11,9 +10,7 @@
 
     max-width: 100%;
 
-    padding:
-        kbq-css-variable(tag-size-padding-vertical)
-        kbq-css-variable(tag-size-padding-horizontal);
+    padding: kbq-css-variable(tag-size-padding-vertical) kbq-css-variable(tag-size-padding-horizontal);
 
     border-radius: 4px;
 

package/textarea/_textarea-theme.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-textarea-typography($config) {
     .kbq-textarea {
         @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

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-textarea {
     display: inline-block;
 
@@ -19,9 +18,7 @@
 
     box-sizing: border-box;
 
-    padding:
-        kbq-css-variable(textarea-size-padding-vertical)
-        kbq-css-variable(textarea-size-padding-horizontal);
+    padding: kbq-css-variable(textarea-size-padding-vertical) kbq-css-variable(textarea-size-padding-horizontal);
 
     -webkit-appearance: none; // Chrome textarea height sizing fix
     vertical-align: bottom; // Chrome textarea height sizing fix

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,6 +119,7 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
     private spaceKeyHandler;
     private getNewValue;
     private verticalArrowKeyHandler;
+    private fixEmptyDigit;
     private horizontalArrowKeyHandler;
     private createSelectionOfTimeComponentInInput;
     private incrementTime;
@@ -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

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-timepicker {
     padding-right: kbq-css-variable(timepicker-size-padding-right);
 }

package/timezone/_timezone-option-theme.scss

@@ -4,7 +4,6 @@
 @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);
 

package/timezone/timezone-option.component.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-timezone-option.kbq-option {
     display: flex;
     flex-direction: row;

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

@@ -1,7 +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";

package/timezone/timezone-select.component.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-timezone-select__panel.kbq-select__panel {
     .kbq-optgroup-label {
         display: block;

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

@@ -1,12 +1,12 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
-import { AfterViewInit, ElementRef, NgZone, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, ElementRef, NgZone, OnDestroy, ViewContainerRef } from '@angular/core';
 import { KbqTitleTextRef } from '@koobiq/components/core';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
-export declare class KbqTitleDirective extends KbqTooltipTrigger implements AfterViewInit {
+export declare class KbqTitleDirective extends KbqTooltipTrigger implements AfterViewInit, OnDestroy {
     private componentInstance?;
     get isOverflown(): boolean;
     get viewValue(): string;

package/toast/_toast-theme.scss

@@ -4,7 +4,6 @@
 @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);
 
@@ -21,7 +20,6 @@
     }
 }
 
-
 @mixin kbq-toast-theme($theme) {
     $toast: map.get($theme, components, toast);
 

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

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-toast-container {
     display: flex;
     flex-direction: column;

package/toast/toast.component.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-toast {
@@ -30,7 +29,10 @@ $tokens: meta.module-variables(tokens) !default;
 
     margin-right: kbq-css-variable(toast-size-icon-margin-right);
 
-    padding-top: kbq-css-variable(toast-size-content-padding-top);
+    $padding-top: kbq-css-variable(toast-size-content-padding-top);
+    $toast-font-title-line-height: kbq-css-variable(toast-font-title-line-height);
+    $toast-size-icon-height: kbq-css-variable(toast-size-icon-height);
+    padding-top: calc($padding-top + (($toast-font-title-line-height - $toast-size-icon-height) / 2));
 }
 
 .kbq-toast__container {