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

package/dl/_dl-theme.scss

@@ -2,31 +2,28 @@
 @use 'sass:map';
 
 @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);
 
     .kbq-dt {
-        color: map.get($dl, dt);
+        color: kbq-css-variable(dl-dt, map.get($dl, dt));
     }
 
     .kbq-dd {
-        color: map.get($dl, dd);
+        color: kbq-css-variable(dl-dd, map.get($dl, dd));
     }
 }
 
 @mixin kbq-dl-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-dl {
         & .kbq-dt {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, description-list-font-term));
+            @include kbq-typography-css-variables(description-list, term);
         }
 
         & .kbq-dd {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, description-list-font-description));
+            @include kbq-typography-css-variables(description-list, description);
         }
     }
 }
-

package/dl/dl.scss

@@ -1,21 +1,12 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-dl {
     display: grid;
-    column-gap: var(
-        --kbq-description-list-size-horizontal-content-gap-horizontal,
-        map.get($tokens, description-list-size-horizontal-content-gap-horizontal)
-    );
-    row-gap: var(
-        --kbq-description-list-size-horizontal-gap-vertical,
-        map.get($tokens, description-list-size-horizontal-gap-vertical)
-    );
+    column-gap: kbq-css-variable(description-list-size-horizontal-content-gap-horizontal);
+    row-gap: kbq-css-variable(description-list-size-horizontal-gap-vertical);
 
     grid-template-columns: repeat(4, 1fr);
 
@@ -42,10 +33,7 @@ $tokens: meta.module-variables(tokens) !default;
     &.kbq-dl_vertical {
         grid-template-columns: repeat(1, 1fr);
 
-        row-gap: var(
-            --kbq-description-list-size-vertical-content-gap-vertical,
-            map.get($tokens, description-list-size-vertical-content-gap-vertical)
-        );
+        row-gap: kbq-css-variable(description-list-size-vertical-content-gap-vertical);
 
         .kbq-dt,
         .kbq-dd {
@@ -53,10 +41,7 @@ $tokens: meta.module-variables(tokens) !default;
         }
 
         .kbq-dd {
-            margin-bottom: var(
-                --kbq-description-list-size-vertical-gap-vertical,
-                map.get($tokens, description-list-size-vertical-gap-vertical)
-            );
+            margin-bottom: kbq-css-variable(description-list-size-vertical-gap-vertical);
         }
     }
 }

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

@@ -3,50 +3,60 @@
 
 @use '../core/styles/theming/theming' as *;
 @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);
 
-@mixin kbq-dropdown-item-state($state) {
-    background: map.get($state, container-background);
-    color: map.get($state, text);
+    background: kbq-css-variable(list-#{$style-name}-container-background, map.get($state, container-background));
+    color: kbq-css-variable(list-#{$style-name}-text, map.get($state, text));
 
     .kbq-dropdown-item__caption {
-        color: map.get($state, caption);
+        color: kbq-css-variable(list-#{$style-name}-caption, map.get($state, caption));
     }
 }
 
 @mixin kbq-dropdown-theme($theme) {
     $dropdown: map.get(map.get($theme, components), dropdown);
-    $divider: map.get(map.get($theme, components), divider);
 
     .kbq-dropdown__panel {
-        box-shadow: map.get($dropdown, box-shadow);
-        background: map.get($dropdown, background);
+        box-shadow: kbq-css-variable(dropdown-box-shadow, map.get($dropdown, box-shadow));
+        background: kbq-css-variable(dropdown-background, map.get($dropdown, background));
     }
 
     .kbq-dropdown-item {
-        $dropdown-item: map.get(map.get($theme, components), list-item);
+        $list-item: map.get(map.get($theme, components), list-item);
 
-        @include kbq-dropdown-item-state(map.get($dropdown-item, default));
+        @include kbq-dropdown-item-state($list-item, default);
 
         &.kbq-dropdown-item_highlighted,
         &:hover:not(.kbq-disabled) {
-            @include kbq-dropdown-item-state(map.get($dropdown-item, hover));
+            @include kbq-dropdown-item-state($list-item, states-hover);
         }
 
         &.cdk-keyboard-focused {
-            border-color: map.get(map.get($dropdown-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 {
-            @include kbq-dropdown-item-state(map.get($dropdown-item, selected));
+            @include kbq-dropdown-item-state($list-item, states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-dropdown-item-state(map.get($dropdown-item, selected-hover));
+                @include kbq-dropdown-item-state($list-item, states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-dropdown-item-state(map.get($dropdown-item, disabled));
+            @include kbq-dropdown-item-state($list-item, states-disabled);
+        }
+    }
+
+    .kbq-dropdown__group-header {
+        &.kbq-dropdown__group-header_small {
+            color: kbq-css-variable(foreground-contrast-secondary, map.get($theme, foreground, contrast-secondary));
         }
     }
 
@@ -56,22 +66,20 @@
 }
 
 @mixin kbq-dropdown-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-dropdown-item,
     .kbq-dropdown__content {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-text));
-    }
+        @include kbq-typography-css-variables(list, text);
 
-    .kbq-dropdown-item__caption {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-caption));
+        .kbq-dropdown-item__caption {
+            @include kbq-typography-css-variables(list, caption);
+        }
     }
 
     .kbq-dropdown__group-header {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-header));
+        @include kbq-typography-css-variables(list, header);
 
         &.kbq-dropdown__group-header_small {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-subheading));
+            @include kbq-typography-css-variables(list, subheading);
         }
     }
 }

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

@@ -3,12 +3,11 @@
 
 @use '../core/styles/common';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-dropdown-item {
+    width: 100%;
+
     @include common.user-select(none);
     @include common.kbq-list-item-base();
 
@@ -17,21 +16,18 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     text-align: left;
-
-    & > .kbq-icon:first-child {
-        $outline-width: map.get($tokens, list-size-container-focus-outline-width);
-        $padding-vertical: map.get($tokens, list-size-container-padding-vertical);
-
-        align-self: flex-start;
-
-        margin-top: var(--kbq-list-size-container-padding-vertical, $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: var(
-            --kbq-list-size-container-content-gap-vertical,
-            map.get($tokens, list-size-container-content-gap-vertical)
-        );
+        padding-top: kbq-css-variable(size-3xs);
     }
 }
 

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

@@ -31,7 +31,7 @@ export declare class KbqDropdownTrigger implements AfterContentInit, OnDestroy {
     private parent;
     private dropdownItemInstance;
     private _dir;
-    private changeDetecotrRef;
+    private changeDetectorRef;
     private focusMonitor?;
     lastDestroyReason: DropdownCloseReason;
     /** Data to be passed along to any lazily-rendered content. */
@@ -61,7 +61,7 @@ export declare class KbqDropdownTrigger implements AfterContentInit, OnDestroy {
     private overlayRef;
     private closeSubscription;
     private hoverSubscription;
-    constructor(overlay: Overlay, elementRef: ElementRef<HTMLElement>, viewContainerRef: ViewContainerRef, scrollStrategy: any, parent: KbqDropdown, dropdownItemInstance: KbqDropdownItem, _dir: Directionality, changeDetecotrRef: ChangeDetectorRef, focusMonitor?: FocusMonitor | undefined);
+    constructor(overlay: Overlay, elementRef: ElementRef<HTMLElement>, viewContainerRef: ViewContainerRef, scrollStrategy: any, parent: KbqDropdown, dropdownItemInstance: KbqDropdownItem, _dir: Directionality, changeDetectorRef: ChangeDetectorRef, focusMonitor?: FocusMonitor | undefined);
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     /** Whether the dropdown triggers a nested dropdown or a top-level one. */

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

@@ -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-dropdown-trigger.kbq-button-icon_right.kbq-button-icon_left {
     & .kbq-icon_left {
@@ -23,20 +20,14 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-dropdown__panel {
     margin-top: 2px;
 
-    min-width: var(--kbq-dropdown-size-container-width-min, map.get($tokens, dropdown-size-container-width-min));
-    max-width: var(--kbq-dropdown-size-container-width-max, map.get($tokens, dropdown-size-container-width-max));
+    min-width: kbq-css-variable(dropdown-size-container-width-min);
+    max-width: kbq-css-variable(dropdown-size-container-width-max);
 
-    border-radius: var(
-        --kbq-dropdown-size-container-border-radius, map.get($tokens, dropdown-size-container-border-radius)
-    );
+    border-radius: kbq-css-variable(dropdown-size-container-border-radius);
 
-    padding-top: var(
-        --kbq-dropdown-size-container-padding-vertical, map.get($tokens, dropdown-size-container-padding-vertical)
-    );
+    padding-top: kbq-css-variable(dropdown-size-container-padding-vertical);
 
-    padding-bottom: var(
-        --kbq-dropdown-size-container-padding-vertical, map.get($tokens, dropdown-size-container-padding-vertical)
-    );
+    padding-bottom: kbq-css-variable(dropdown-size-container-padding-vertical);
 
     // Prevent users from interacting with the panel while it's animating. Note that
     // people won't be able to click through it, because the overlay pane will catch the click.

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,6 +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";
@@ -12,12 +13,12 @@ export declare class KbqEllipsisCenterDirective extends KbqTooltipTrigger implem
     private _kbqEllipsisCenter;
     private resizeSubscription;
     private readonly debounceInterval;
-    constructor(overlay: Overlay, elementRef: ElementRef<HTMLElement>, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, renderer: Renderer2);
+    constructor(overlay: Overlay, elementRef: ElementRef<HTMLElement>, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, focusMonitor: FocusMonitor, renderer: Renderer2);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private refresh;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEllipsisCenterDirective, [null, null, null, null, null, null, { optional: true; }, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEllipsisCenterDirective, [null, null, null, null, null, null, { optional: true; }, null, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqEllipsisCenterDirective, "[kbqEllipsisCenter]", never, { "kbqEllipsisCenter": { "alias": "kbqEllipsisCenter"; "required": false; }; "minVisibleLength": { "alias": "minVisibleLength"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class KbqEllipsisCenterModule {

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';