@koobiq/components 17.0.0-rc.8 → 17.0.0

package/datepicker/_datepicker-theme.scss

@@ -5,7 +5,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-datepicker-theme($theme) {
     $datepicker: map.get(map.get($theme, components), datepicker);
 
@@ -24,39 +23,53 @@
 
     .kbq-calendar__body-cell-content {
         background: kbq-css-variable(
-            datepicker-cell-default-background, map.get($datepicker, cell, default, background));
+            datepicker-cell-default-background,
+            map.get($datepicker, cell, default, background)
+        );
         color: kbq-css-variable(datepicker-cell-default-text, map.get($datepicker, cell, default, text));
 
         &.kbq-calendar__body-today {
             background: kbq-css-variable(
-                datepicker-cell-today-background, map.get($datepicker, cell, today, background));
+                datepicker-cell-today-background,
+                map.get($datepicker, cell, today, background)
+            );
             color: kbq-css-variable(datepicker-cell-today-text, map.get($datepicker, cell, today, text));
         }
 
         &:hover:not(.kbq-disabled) {
             background: kbq-css-variable(
-                datepicker-cell-hover-background, map.get($datepicker, cell, hover, background));
+                datepicker-cell-hover-background,
+                map.get($datepicker, cell, hover, background)
+            );
         }
 
         &:active:not(.kbq-disabled) {
             background: kbq-css-variable(
-                datepicker-cell-active-background, map.get($datepicker, cell, active, background));
+                datepicker-cell-active-background,
+                map.get($datepicker, cell, active, background)
+            );
         }
 
         &.kbq-selected:not(.kbq-disabled) {
             background: kbq-css-variable(
-                datepicker-cell-selected-background, map.get($datepicker, cell, selected, background));
+                datepicker-cell-selected-background,
+                map.get($datepicker, cell, selected, background)
+            );
             color: kbq-css-variable(datepicker-cell-selected-text, map.get($datepicker, cell, selected, text));
 
             &:hover {
                 background: kbq-css-variable(
-                    datepicker-cell-selected-hover-background, map.get($datepicker, cell, selected-hover, background));
+                    datepicker-cell-selected-hover-background,
+                    map.get($datepicker, cell, selected-hover, background)
+                );
             }
         }
 
         &.kbq-disabled {
             background: kbq-css-variable(
-                datepicker-cell-disabled-background, map.get($datepicker, cell, disabled, background));
+                datepicker-cell-disabled-background,
+                map.get($datepicker, cell, disabled, background)
+            );
         }
     }
 }

package/datepicker/calendar-body.scss

@@ -4,10 +4,8 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
-
 .kbq-calendar__body-cell {
     position: relative;
     height: 0;
@@ -38,4 +36,3 @@ $tokens: meta.module-variables(tokens) !default;
 
     margin-bottom: kbq-css-variable(datepicker-size-grid-content-gap-vertical);
 }
-

package/datepicker/calendar-header.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-calendar-header {

package/datepicker/calendar.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-calendar {
@@ -33,7 +32,7 @@ $tokens: meta.module-variables(tokens) !default;
         position: relative;
 
         box-sizing: border-box;
-        height: kbq-css-variable(datepicker-size-grid-content-gap-vertical);;
+        height: kbq-css-variable(datepicker-size-grid-content-gap-vertical);
 
         $horizontal-padding: map.get($tokens, datepicker-size-grid-padding-horizontal);
         // We use an absolutely positioned pseudo-element as the divider line for the table header so we

package/datepicker/datepicker-content.scss

@@ -4,13 +4,11 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 $kbq-datepicker-non-touch-calendar-cell-size: 40px;
 
-$kbq-datepicker-non-touch-calendar-width:
-    $kbq-datepicker-non-touch-calendar-cell-size * 7 +
+$kbq-datepicker-non-touch-calendar-width: $kbq-datepicker-non-touch-calendar-cell-size * 7 +
     map.get($tokens, datepicker-size-grid-padding-horizontal) * 2;
 // Based on the natural height of the calendar in a month with 6 rows of dates
 // (largest the calendar will get).

package/datepicker/datepicker-input.directive.d.ts

@@ -148,6 +148,7 @@ export declare class KbqDatepickerInput<D> implements KbqFormFieldControl<D>, Co
     private decrementDate;
     private verticalArrowKeyHandler;
     private changeCaretPosition;
+    private fixEmptyDigit;
     private selectDigitByCursor;
     private selectNextDigitByCursor;
     private selectNextDigit;

package/datepicker/datepicker-input.scss

@@ -1,7 +1,6 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-
 .kbq-form-field-type-datepicker {
     width: auto;
 }

package/datepicker/datepicker-toggle.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-datepicker-toggle:focus {

package/datepicker/datepicker.component.d.ts

@@ -1,6 +1,6 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, OverlayRef, ScrollStrategy } from '@angular/cdk/overlay';
-import { ChangeDetectorRef, EventEmitter, InjectionToken, NgZone, OnDestroy, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, EventEmitter, InjectionToken, NgZone, OnDestroy, ViewContainerRef } from '@angular/core';
 import { DateAdapter } from '@koobiq/components/core';
 import { Subject } from 'rxjs';
 import { KbqCalendarCellCssClasses } from './calendar-body.component';
@@ -24,7 +24,7 @@ export declare const KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
  * future. (e.g. confirmation buttons).
  * @docs-private
  */
-export declare class KbqDatepickerContent<D> implements OnDestroy {
+export declare class KbqDatepickerContent<D> implements OnDestroy, AfterViewInit {
     private changeDetectorRef;
     /** Emits when an animation has finished. */
     readonly animationDone: Subject<void>;

package/datepicker/public-api.d.ts

@@ -1,10 +1,10 @@
-export * from './datepicker-module';
-export * from './calendar.component';
-export * from './calendar-header.component';
 export * from './calendar-body.component';
-export * from './datepicker.component';
+export * from './calendar-header.component';
+export * from './calendar.component';
 export * from './datepicker-animations';
 export * from './datepicker-input.directive';
 export * from './datepicker-intl';
+export * from './datepicker-module';
 export * from './datepicker-toggle.component';
+export * from './datepicker.component';
 export * from './month-view.component';

package/divider/_divider-theme.scss

@@ -2,7 +2,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-divider-theme($theme) {
     $divider: map.get(map.get($theme, components), divider);
 

package/divider/divider.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-divider {
     display: block;
     margin: 0;

package/dl/_dl-theme.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-dl-theme($theme) {
     $dl: map.get(map.get($theme, components), dl);
 
@@ -28,4 +27,3 @@
         }
     }
 }
-

package/dl/dl.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-dl {
     display: grid;
     column-gap: kbq-css-variable(description-list-size-horizontal-content-gap-horizontal);

package/dl/public-api.d.ts

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

package/dropdown/_dropdown-theme.scss

@@ -5,7 +5,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-dropdown-item-state($component, $style-name) {
     $state: map.get($component, $style-name);
 
@@ -36,7 +35,10 @@
         }
 
         &.cdk-keyboard-focused {
-            border-color: kbq-css-variable(list-focused-focus-outline, map.get($list-item, focused, focus-outline));
+            border-color: kbq-css-variable(
+                list-states-focused-focus-outline-color,
+                map.get($list-item, states-focused, focus-outline)
+            );
         }
 
         &.kbq-selected {

package/dropdown/dropdown-content.directive.d.ts

@@ -1,4 +1,4 @@
-import { TemplateRef, ComponentFactoryResolver, ApplicationRef, Injector, ViewContainerRef, OnDestroy } from '@angular/core';
+import { ApplicationRef, ComponentFactoryResolver, Injector, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 /**

package/dropdown/dropdown-item.component.d.ts

@@ -1,5 +1,5 @@
 import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
-import { ElementRef, OnDestroy, AfterViewInit } from '@angular/core';
+import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
 import { IFocusableOption } from '@koobiq/cdk/a11y';
 import { CanDisable, CanDisableCtor, KbqTitleTextRef } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';

package/dropdown/dropdown-item.scss

@@ -5,7 +5,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-dropdown-item {
     width: 100%;
 
@@ -17,15 +16,18 @@
     }
 
     text-align: left;
-
-    & > .kbq-icon:first-child {
-        align-self: flex-start;
-
-        margin-top: kbq-css-variable(list-size-container-padding-vertical);
+    align-items: flex-start;
+
+    & > .kbq-icon:first-child:before {
+        align-self: center;
+        display: flex;
+        height: kbq-css-variable(size-xl);
+        width: 16px;
+        align-items: center;
     }
 
     & .kbq-dropdown-item__caption {
-        padding-top: kbq-css-variable(list-size-container-content-gap-vertical);
+        padding-top: kbq-css-variable(size-3xs);
     }
 }
 

package/dropdown/dropdown.component.d.ts

@@ -1,7 +1,7 @@
 import { AnimationEvent } from '@angular/animations';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { Direction } from '@angular/cdk/bidi';
-import { AfterContentInit, ElementRef, EventEmitter, NgZone, OnDestroy, TemplateRef, QueryList, OnInit } from '@angular/core';
+import { AfterContentInit, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, TemplateRef } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { KbqDropdownContent } from './dropdown-content.directive';
 import { KbqDropdownItem } from './dropdown-item.component';

package/dropdown/dropdown.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-dropdown-trigger.kbq-button-icon_right.kbq-button-icon_left {
     & .kbq-icon_left {
         margin-right: 2px;

package/dropdown/public-api.d.ts

@@ -1,8 +1,8 @@
-export * from './dropdown.types';
-export * from './dropdown.module';
-export * from './dropdown.component';
-export * from './dropdown-item.component';
-export * from './dropdown-errors';
 export * from './dropdown-animations';
 export * from './dropdown-content.directive';
+export * from './dropdown-errors';
+export * from './dropdown-item.component';
 export * from './dropdown-trigger.directive';
+export * from './dropdown.component';
+export * from './dropdown.module';
+export * from './dropdown.types';

package/ellipsis-center/ellipsis-center.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 { ElementRef, OnInit, OnDestroy, NgZone, ViewContainerRef, Renderer2, AfterViewInit } from '@angular/core';
+import { AfterViewInit, ElementRef, NgZone, OnDestroy, OnInit, Renderer2, ViewContainerRef } from '@angular/core';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";

package/empty-state/_empty-state-theme.scss

@@ -0,0 +1,56 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
+@mixin kbq-empty-state-theme($theme) {
+    $empty-state: map.get($theme, components, empty-state);
+
+    .kbq-empty-state_normal-color {
+        .kbq-empty-state-title {
+            color: kbq-css-variable(empty-state-title, map.get($empty-state, title));
+        }
+
+        .kbq-empty-state-text {
+            color: kbq-css-variable(empty-state-title, map.get($empty-state, title));
+        }
+    }
+
+    .kbq-empty-state_error-color {
+        .kbq-empty-state-title {
+            color: kbq-css-variable(empty-state-title, map.get($theme, foreground, error));
+        }
+
+        .kbq-empty-state-text {
+            color: kbq-css-variable(empty-state-title, map.get($theme, foreground, error));
+        }
+    }
+}
+
+@mixin kbq-empty-state-typography($config) {
+    .kbq-empty-state-title,
+    .kbq-empty-state-text {
+        text-align: center;
+    }
+
+    .kbq-empty-state_normal {
+        .kbq-empty-state-title {
+            @include kbq-typography-css-variables(empty-state, normal-title);
+        }
+
+        .kbq-empty-state-text {
+            @include kbq-typography-css-variables(empty-state, normal-text);
+        }
+    }
+
+    .kbq-empty-state_big {
+        .kbq-empty-state-title {
+            @include kbq-typography-css-variables(empty-state, big-title);
+        }
+
+        .kbq-empty-state-text {
+            @include kbq-typography-css-variables(empty-state, big-text);
+        }
+    }
+}

package/empty-state/empty-state.component.d.ts

@@ -0,0 +1,31 @@
+import { AfterContentInit } from '@angular/core';
+import { KbqIconItem } from '@koobiq/components/icon';
+import * as i0 from "@angular/core";
+export declare class KbqEmptyStateIcon {
+    private icon;
+    constructor(icon: KbqIconItem);
+    setErrorColor(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEmptyStateIcon, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqEmptyStateIcon, "[kbq-empty-state-icon]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqEmptyStateText {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEmptyStateText, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqEmptyStateText, "[kbq-empty-state-text]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqEmptyStateTitle {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEmptyStateTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqEmptyStateTitle, "[kbq-empty-state-title]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqEmptyStateActions {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEmptyStateActions, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqEmptyStateActions, "[kbq-empty-state-actions]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqEmptyState implements AfterContentInit {
+    errorColor: boolean;
+    big: boolean;
+    alignTop: boolean;
+    icon: KbqEmptyStateIcon | null;
+    ngAfterContentInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEmptyState, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqEmptyState, "kbq-empty-state", never, { "errorColor": { "alias": "errorColor"; "required": false; }; "big": { "alias": "big"; "required": false; }; "alignTop": { "alias": "alignTop"; "required": false; }; }, {}, ["icon"], ["[kbq-empty-state-icon]", "[kbq-empty-state-title]", "[kbq-empty-state-text]", "[kbq-empty-state-actions]"], false, never>;
+}

package/empty-state/empty-state.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./empty-state.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/cdk/a11y";
+import * as i4 from "@angular/cdk/platform";
+export declare class KbqEmptyStateModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEmptyStateModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqEmptyStateModule, [typeof i1.KbqEmptyState, typeof i1.KbqEmptyStateIcon, typeof i1.KbqEmptyStateText, typeof i1.KbqEmptyStateTitle, typeof i1.KbqEmptyStateTitle, typeof i1.KbqEmptyStateActions], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqEmptyState, typeof i1.KbqEmptyStateIcon, typeof i1.KbqEmptyStateText, typeof i1.KbqEmptyStateTitle, typeof i1.KbqEmptyStateActions]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqEmptyStateModule>;
+}

package/empty-state/empty-state.scss

@@ -0,0 +1,81 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
+
+.kbq-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    flex: 1;
+
+    &.kbq-empty-state_normal {
+        padding: kbq-css-variable(empty-state-size-normal-padding-top)
+            kbq-css-variable(empty-state-size-normal-padding-horizontal)
+            kbq-css-variable(empty-state-size-normal-padding-bottom);
+
+        & .kbq-empty-state-icon {
+            margin-bottom: kbq-css-variable(empty-state-size-normal-image-margin-bottom);
+        }
+
+        & .kbq-empty-state-text {
+            max-width: kbq-css-variable(empty-state-size-normal-max-width);
+        }
+
+        & .kbq-empty-state-title {
+            max-width: kbq-css-variable(empty-state-size-normal-max-width);
+
+            margin-bottom: kbq-css-variable(empty-state-size-normal-title-margin-bottom);
+        }
+
+        & .kbq-empty-state-actions {
+            max-width: kbq-css-variable(empty-state-size-normal-max-width);
+
+            margin-top: kbq-css-variable(empty-state-size-normal-actions-margin-top);
+        }
+
+        &.kbq-empty-state_align-center.kbq-empty-state_has-icon {
+            margin-bottom: kbq-css-variable(empty-state-size-normal-image-addon-height);
+        }
+    }
+
+    &.kbq-empty-state_big {
+        padding: kbq-css-variable(empty-state-size-big-padding-top)
+            kbq-css-variable(empty-state-size-big-padding-horizontal)
+            kbq-css-variable(empty-state-size-big-padding-bottom);
+
+        & .kbq-empty-state-icon {
+            margin-bottom: kbq-css-variable(empty-state-size-big-image-margin-bottom);
+        }
+
+        & .kbq-empty-state-text {
+            max-width: kbq-css-variable(empty-state-size-big-max-width);
+        }
+
+        & .kbq-empty-state-title {
+            max-width: kbq-css-variable(empty-state-size-big-max-width);
+
+            margin-bottom: kbq-css-variable(empty-state-size-big-title-margin-bottom);
+        }
+
+        & .kbq-empty-state-actions {
+            max-width: kbq-css-variable(empty-state-size-big-max-width);
+
+            margin-top: kbq-css-variable(empty-state-size-big-actions-margin-top);
+        }
+
+        &.kbq-empty-state_align-center.kbq-empty-state_has-icon {
+            margin-bottom: kbq-css-variable(empty-state-size-big-image-addon-height);
+        }
+    }
+
+    &.kbq-empty-state_align-center {
+        justify-content: center;
+    }
+
+    &.kbq-empty-state_align-top {
+        justify-content: flex-start;
+    }
+}

package/empty-state/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/empty-state/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './empty-state.component';
+export * from './empty-state.module';