@koobiq/components 17.0.0-rc.8 → 17.0.0

package/code-block/_code-block-theme.scss

@@ -5,7 +5,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-code-block-style($component, $style-name) {
     $style: map.get($component, $style-name);
     $base: code-block-#{$style-name};
@@ -41,26 +40,32 @@
         & .kbq-code-block__fade-gradient {
             display: block;
 
-            background: kbq-css-variable(#{$base}-actionbar-fade-gradient, map.get($style, actionbar, fade-gradient))
+            background: kbq-css-variable(#{$base}-actionbar-fade-gradient, map.get($style, actionbar, fade-gradient));
         }
     }
 
     .kbq-code-block__show-more {
         .bg-wrapper {
             background: kbq-css-variable(
-                #{$base}-collapse-button-expand-background, map.get($style, collapse, button-expand-background));
+                #{$base}-collapse-button-expand-background,
+                map.get($style, collapse, button-expand-background)
+            );
             opacity: 90%;
         }
     }
 
     & .kbq-code-block__show-more_expanded {
         background: kbq-css-variable(
-            #{$base}-collapse-expanded-background, map.get($style, collapse, expanded-background));
+            #{$base}-collapse-expanded-background,
+            map.get($style, collapse, expanded-background)
+        );
     }
 
     & .kbq-code-block__show-more_collapsed {
         background: kbq-css-variable(
-            #{$base}-collapse-collapsed-background, map.get($style, collapse, collapsed-background));
+            #{$base}-collapse-collapsed-background,
+            map.get($style, collapse, collapsed-background)
+        );
     }
 }
 
@@ -346,6 +351,13 @@
             @include kbq-code-block-style($code-block, filled);
         }
 
+        .kbq-tab-header {
+            & .kbq-tab-label.kbq-tab-label_horizontal,
+            & .kbq-tab-header__pagination {
+                border-bottom-color: transparent;
+            }
+        }
+
         .kbq-tab-group.kbq-focused {
             // paint focus border from the top since because of border constraints
             .kbq-tab-header {
@@ -354,15 +366,8 @@
 
             .kbq-tab-body__wrapper {
                 border-color: kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
-                box-shadow: inset 0 0 0.1 1px kbq-css-variable(
-                    states-focused-color, map.get($theme, states, focused-color));
-            }
-        }
-
-        .kbq-tab-header {
-            & .kbq-tab-label.kbq-tab-label_horizontal,
-            & .kbq-tab-header__pagination {
-                border-bottom-color: transparent;
+                box-shadow: inset 0 0 0.1 1px
+                    kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
             }
         }
     }
@@ -370,11 +375,13 @@
     .kbq-code-block-actionbar {
         .kbq-code-block-actionbar_less-contrast {
             background-color: kbq-css-variable(
-                code-block-actionbar-bg-less-contrast, map-get($code-block, actionbar, bg-less-contrast));
+                code-block-actionbar-bg-less-contrast,
+                map.get($code-block, actionbar, bg-less-contrast)
+            );
         }
 
         &.kbq-actionbar-block_floating {
-            background-color: kbq-css-variable(code-block-actionbar-bg, map-get($code-block, actionbar, bg));
+            background-color: kbq-css-variable(code-block-actionbar-bg, map.get($code-block, actionbar, bg));
         }
     }
 }

package/code-block/actionbar.component.scss

@@ -3,10 +3,8 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
-
 .kbq-code-block-actionbar {
     display: flex;
     justify-content: right;
@@ -17,8 +15,7 @@ $tokens: meta.module-variables(tokens) !default;
     top: -1px;
     right: 0;
 
-    margin:
-        kbq-css-variable(code-block-size-actionbar-padding-vertical)
+    margin: kbq-css-variable(code-block-size-actionbar-padding-vertical)
         kbq-css-variable(code-block-size-actionbar-padding-horizontal);
 
     gap: kbq-css-variable(code-block-size-actionbar-content-gap-horizontal);
@@ -31,9 +28,9 @@ $tokens: meta.module-variables(tokens) !default;
 
         margin-top: calc(
             var(
-                --kbq-code-block-size-actionbar-padding-vertical,
-                map.get($tokens, code-block-size-actionbar-padding-vertical)
-            ) * -1
+                    --kbq-code-block-size-actionbar-padding-vertical,
+                    map.get($tokens, code-block-size-actionbar-padding-vertical)
+                ) * -1
         );
     }
 

package/code-block/code-block.component.d.ts

@@ -1,9 +1,9 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
 import { Clipboard } from '@angular/cdk/clipboard';
-import { InjectionToken, ElementRef, ChangeDetectorRef, OnDestroy, Renderer2, AfterViewInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, InjectionToken, OnDestroy, Renderer2 } from '@angular/core';
 import { KbqTabChangeEvent, KbqTabGroup } from '@koobiq/components/tabs';
 import { Subject } from 'rxjs';
 import { KbqCodeBlockConfiguration, KbqCodeFile } from './code-block.types';
-import { FocusMonitor } from '@angular/cdk/a11y';
 import * as i0 from "@angular/core";
 export declare const COPIED_MESSAGE_TOOLTIP_TIMEOUT = 100;
 export declare const DEFAULT_EXTENSION = "txt";

package/code-block/code-block.scss

@@ -3,13 +3,11 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 $border-radius: kbq-css-variable(code-block-size-container-border-radius);
 $border-width: kbq-css-variable(code-block-size-container-border-width);
 
-/* stylelint-disable no-descending-specificity */
 .kbq-code-block {
     display: block;
     position: relative;
@@ -29,12 +27,11 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
         // 4 buttons + margin
         $buttons-margin: calc(32 * 4) + 24px;
 
-        padding:
-            kbq-css-variable(code-block-size-header-padding-vertical)
-            calc(var(
-                --kbq-code-block-size-header-padding-right,
-                map.get($tokens, code-block-size-header-padding-right)
-            ) + $buttons-margin)
+        padding: kbq-css-variable(code-block-size-header-padding-vertical)
+            calc(
+                var(--kbq-code-block-size-header-padding-right, map.get($tokens, code-block-size-header-padding-right)) +
+                    $buttons-margin
+            )
             kbq-css-variable(code-block-size-header-padding-vertical)
             kbq-css-variable(code-block-size-header-padding-left);
 
@@ -54,8 +51,7 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
 
     .kbq-code-block__code {
         > code {
-            padding:
-                kbq-css-variable(code-block-size-with-header-content-padding-top)
+            padding: kbq-css-variable(code-block-size-with-header-content-padding-top)
                 kbq-css-variable(code-block-size-with-header-content-padding-horizontal)
                 kbq-css-variable(code-block-size-with-header-content-padding-bottom)
                 kbq-css-variable(code-block-size-with-header-content-padding-horizontal);
@@ -108,8 +104,7 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
             position: relative;
 
             & > code {
-                padding:
-                    kbq-css-variable(code-block-size-no-header-content-padding-vertical)
+                padding: kbq-css-variable(code-block-size-no-header-content-padding-vertical)
                     kbq-css-variable(code-block-size-no-header-content-padding-horizontal);
             }
 
@@ -152,7 +147,7 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
     }
 
     &.kbq-code-block__code_soft-wrap {
-        white-space: pre-wrap
+        white-space: pre-wrap;
     }
 
     .hljs-ln {
@@ -200,4 +195,3 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
         border-radius: kbq-css-variable(button-size-border-radius);
     }
 }
-/* stylelint-enable no-descending-specificity */

package/code-block/public-api.d.ts

@@ -1,3 +1,3 @@
+export * from './code-block.component';
 export * from './code-block.module';
 export * from './code-block.types';
-export * from './code-block.component';

package/core/animation/index.d.ts

@@ -1,3 +1,3 @@
-export { fadeAnimation } from './fade-animations';
 export * from './animation';
+export { fadeAnimation } from './fade-animations';
 export { kbqSelectAnimations } from './select-animations';

package/core/common-behaviors/index.d.ts

@@ -1,7 +1,7 @@
 import { InjectionToken } from '@angular/core';
-export { KbqCommonModule, KBQ_SANITY_CHECKS } from './common-module';
+export { CanColor, CanColorCtor, KbqComponentColors, ThemePalette, mixinColor } from './color';
+export { KBQ_SANITY_CHECKS, KbqCommonModule } from './common-module';
 export { CanDisable, CanDisableCtor, mixinDisabled } from './disabled';
-export { CanColor, CanColorCtor, mixinColor, ThemePalette, KbqComponentColors } from './color';
+export { CanUpdateErrorState, CanUpdateErrorStateCtor, mixinErrorState } from './error-state';
 export { HasTabIndex, HasTabIndexCtor, mixinTabIndex } from './tabindex';
-export { CanUpdateErrorStateCtor, CanUpdateErrorState, mixinErrorState } from './error-state';
 export declare const KBQ_PARENT_ANIMATION_COMPONENT: InjectionToken<any>;

package/core/datetime/index.d.ts

@@ -1,2 +1,2 @@
-export * from './date-formats';
 export * from './date-adapter';
+export * from './date-formats';

package/core/formatters/index.d.ts

@@ -6,6 +6,6 @@ export declare class KbqFormattersModule {
     static ɵmod: i0.ɵɵNgModuleDeclaration<KbqFormattersModule, [typeof i1.KbqDecimalPipe, typeof i1.KbqRoundDecimalPipe, typeof i1.KbqTableNumberPipe, typeof i2.AbsoluteDateFormatterPipe, typeof i2.AbsoluteDateTimeFormatterPipe, typeof i2.AbsoluteDateShortFormatterPipe, typeof i2.AbsoluteShortDateTimeFormatterPipe, typeof i2.RelativeDateFormatterPipe, typeof i2.RelativeDateTimeFormatterPipe, typeof i2.RelativeShortDateFormatterPipe, typeof i2.RelativeShortDateTimeFormatterPipe, typeof i2.RangeDateFormatterPipe, typeof i2.RangeShortDateFormatterPipe, typeof i2.RangeDateTimeFormatterPipe, typeof i2.RangeShortDateTimeFormatterPipe, typeof i2.RangeMiddleDateTimeFormatterPipe], never, [typeof i1.KbqDecimalPipe, typeof i1.KbqRoundDecimalPipe, typeof i1.KbqTableNumberPipe, typeof i2.AbsoluteDateFormatterPipe, typeof i2.AbsoluteDateTimeFormatterPipe, typeof i2.AbsoluteDateShortFormatterPipe, typeof i2.AbsoluteShortDateTimeFormatterPipe, typeof i2.RelativeDateFormatterPipe, typeof i2.RelativeDateTimeFormatterPipe, typeof i2.RelativeShortDateFormatterPipe, typeof i2.RelativeShortDateTimeFormatterPipe, typeof i2.RangeDateFormatterPipe, typeof i2.RangeShortDateFormatterPipe, typeof i2.RangeDateTimeFormatterPipe, typeof i2.RangeShortDateTimeFormatterPipe, typeof i2.RangeMiddleDateTimeFormatterPipe]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqFormattersModule>;
 }
-export * from './number/formatter';
 export * from './date/formatter';
 export * from './date/formatter.pipe';
+export * from './number/formatter';

package/core/forms/_forms-theme.scss

@@ -5,7 +5,6 @@
 @use './forms' as *;
 @use '../styles/common/tokens' as *;
 
-
 @mixin kbq-forms-theme($theme) {
     @include kbq-form-geometry(map.get($theme, tokens));
 

package/core/forms/_forms.scss

@@ -6,7 +6,6 @@
 @use '../styles/typography/typography-utils' as *;
 @use '../styles/common/tokens' as *;
 
-
 @mixin kbq-form-geometry($tokens) {
     .kbq-form {
         display: flex;

package/core/forms/index.d.ts

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

package/core/locales/index.d.ts

@@ -4,6 +4,6 @@ export * from './fa-IR';
 export * from './pt-BR';
 export * from './ru-RU';
 export * from './zh-CN';
+export * from './formatters';
 export * from './locale-service';
 export * from './locale-service.module';
-export * from './formatters';

package/core/option/_optgroup-theme.scss

@@ -4,7 +4,6 @@
 @use '../styles/typography/typography-utils' as *;
 @use '../styles/common/tokens' as *;
 
-
 @mixin kbq-optgroup-theme($theme) {
     $foreground: map.get($theme, foreground);
 

package/core/option/_option-action-theme.scss

@@ -4,7 +4,6 @@
 @use '../styles/typography/typography-utils' as *;
 @use '../styles/common/tokens' as *;
 
-
 @mixin kbq-option-action-theme($theme) {
     $background: map.get($theme, background);
 

package/core/option/_option-theme.scss

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

package/core/option/action.scss

@@ -1,3 +1,5 @@
+@use '../styles/common/tokens' as *;
+
 .kbq-option-action {
     box-sizing: border-box;
 
@@ -10,8 +12,8 @@
 
     margin-right: -2px;
 
-    width: 24px;
-    height: 24px;
+    width: kbq-css-variable(list-font-text-line-height);
+    height: kbq-css-variable(list-font-text-line-height);
 
     cursor: pointer;
 

package/core/option/index.d.ts

@@ -1,4 +1,4 @@
-export * from './option';
-export * from './optgroup';
 export * from './action';
+export * from './optgroup';
+export * from './option';
 export * from './option-module';

package/core/option/optgroup.scss

@@ -3,14 +3,13 @@
 
 @use '../styles/common/vendor-prefixes';
 @use '../styles/tokens';
-
+@use '../styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-optgroup-label {
-    padding-left: var(--kbq-optgroup-size-padding-left, map.get($tokens, optgroup-size-padding-left));
+    padding-left: kbq-css-variable(size-m);
 
     @include vendor-prefixes.user-select(none);
-
     cursor: default;
 }

package/core/option/option.scss

@@ -3,7 +3,6 @@
 
 @use '../styles/common';
 
-
 .kbq-option {
     @include common.kbq-list-item-base();
 

package/core/pop-up/_pop-up.scss

@@ -88,7 +88,6 @@
         top: $arrow-offset;
         right: $arrow-padding;
     }
-
 }
 
 @mixin popup-arrow-borders-color($name, $value) {

package/core/pop-up/pop-up-trigger.d.ts

@@ -1,11 +1,11 @@
 import { Directionality } from '@angular/cdk/bidi';
-import { ConnectedOverlayPositionChange, ConnectionPositionPair, Overlay, OverlayRef, ScrollDispatcher, OverlayConfig } from '@angular/cdk/overlay';
+import { ConnectedOverlayPositionChange, ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef, ScrollDispatcher } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { ElementRef, EventEmitter, NgZone, TemplateRef, Type, ViewContainerRef } from '@angular/core';
+import { ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, TemplateRef, Type, ViewContainerRef } from '@angular/core';
 import { Observable, Subject, Subscription } from 'rxjs';
 import { PopUpPlacements } from './constants';
 import * as i0 from "@angular/core";
-export declare abstract class KbqPopUpTrigger<T> {
+export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     protected overlay: Overlay;
     protected elementRef: ElementRef;
     protected ngZone: NgZone;

package/core/public-api.d.ts

@@ -2,21 +2,21 @@ export * from './animation/index';
 export * from './common-behaviors/index';
 export * from './datetime/index';
 export * from './error/error-options';
-export * from './formatters/index';
 export * from './form-field/index';
+export * from './formatters/index';
 export * from './forms/index';
 export * from './highlight/index';
 export * from './label/label-options';
 export * from './line/line';
+export * from './locales/index';
 export * from './option/index';
 export * from './overlay/overlay-position-map';
 export * from './pop-up/index';
 export * from './select/index';
 export * from './selection/index';
-export * from './locales/index';
-export * from './title/index';
 export * from './services/measure-scrollbar.service';
 export * from './services/theme.service';
+export * from './title/index';
 export * from './utils/index';
 export * from './validation/index';
 export * from './version';

package/core/select/constants.d.ts

@@ -1,4 +1,4 @@
-import { ScrollStrategy, Overlay, RepositionScrollStrategy } from '@angular/cdk/overlay';
+import { Overlay, RepositionScrollStrategy, ScrollStrategy } from '@angular/cdk/overlay';
 import { InjectionToken } from '@angular/core';
 /** The max height of the select's overlay panel */
 export declare const SELECT_PANEL_MAX_HEIGHT = 224;

package/core/select/index.d.ts

@@ -1,4 +1,4 @@
-export * from './events';
-export * from './errors';
-export * from './constants';
 export * from './common';
+export * from './constants';
+export * from './errors';
+export * from './events';

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -1,14 +1,13 @@
 @use 'sass:map';
 
-
 @use '../../styles/common/tokens' as *;
 
-
 @mixin kbq-pseudo-checkbox-color($component, $style-name) {
     $style: map.get($component, $style-name);
     $base: checkbox-#{$style-name};
 
     border-color: kbq-css-variable(#{$base}-default-border, map.get($style, default, border));
+    background: kbq-css-variable(#{$base}-default-background, map.get($style, default, background));
 
     & .kbq-checkbox-checkmark,
     & .kbq-checkbox-mixedmark {

package/core/selection/pseudo-checkbox/pseudo-checkbox.scss

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

package/core/services/theme.service.d.ts

@@ -1,4 +1,4 @@
-import { Renderer2, RendererFactory2 } from '@angular/core';
+import { OnDestroy, Renderer2, RendererFactory2 } from '@angular/core';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
 export interface KbqTheme {
@@ -7,13 +7,14 @@ export interface KbqTheme {
     selected: boolean;
 }
 export declare const KbqDefaultThemes: KbqTheme[];
-export declare class ThemeService<T extends KbqTheme | null = KbqTheme> {
+export declare class ThemeService<T extends KbqTheme | null = KbqTheme> implements OnDestroy {
     private rendererFactory;
     current: BehaviorSubject<T>;
     themes: T[];
     protected renderer: Renderer2;
     protected subscription: Subscription;
     constructor(rendererFactory: RendererFactory2);
+    ngOnDestroy(): void;
     setThemes(items: T[]): void;
     setTheme(value: T | number): void;
     getTheme(): T;

package/core/styles/_core.scss

@@ -3,7 +3,6 @@
 @use 'common/overlay' as *;
 @use 'common/visually-hidden' as *;
 
-
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin kbq-core() {
     @include a11y-visually-hidden();

package/core/styles/_koobiq-theme.scss

@@ -17,6 +17,7 @@
 @use '../../datepicker/datepicker-theme' as *;
 @use '../../divider/divider-theme' as *;
 @use '../../dropdown/dropdown-theme' as *;
+@use '../../empty-state/empty-state-theme' as *;
 @use '../../file-upload/file-upload-theme' as *;
 @use '../../form-field/form-field-theme' as *;
 @use '../../form-field/hint-theme' as *;
@@ -56,7 +57,6 @@
 @use '../highlight/highlight-theme' as *;
 @use '../../dl/dl-theme' as *;
 
-
 @mixin koobiq-theme($theme) {
     @include kbq-core-theme($theme);
 
@@ -72,6 +72,7 @@
     @include kbq-dl-theme($theme);
     @include kbq-divider-theme($theme);
     @include kbq-dropdown-theme($theme);
+    @include kbq-empty-state-theme($theme);
     @include kbq-form-field-theme($theme);
     @include kbq-file-upload-theme($theme);
     @include kbq-hint-theme($theme);
@@ -112,11 +113,11 @@
 }
 
 @mixin koobiq-typography($tokens, $config: null, $md-config: null) {
-    @if $config == null {
+    @if not $config {
         $config: kbq-typography-config($tokens);
     }
 
-    @if $md-config == null {
+    @if not $md-config {
         $md-config: kbq-markdown-typography-config($tokens);
     }
 
@@ -131,6 +132,7 @@
     @include kbq-code-block-typography($config);
     @include kbq-datepicker-typography($config);
     @include kbq-dropdown-typography($config);
+    @include kbq-empty-state-typography($config);
     @include kbq-dl-typography($config);
     @include kbq-form-field-typography($config);
     @include kbq-hint-typography($config);

package/core/styles/common/_animation.scss

@@ -4,7 +4,7 @@
     }
 
     to {
-        background-position: 29px 0;
+        background-position: 64px 0;
     }
 }
 
@@ -21,18 +21,19 @@
         bottom: 0;
         left: 0;
 
-        $lighter: rgba(255, 255, 255, 0.04);
+        $lighter: rgba(255, 255, 255, 0.1);
         $darker: rgba(0, 0, 0, 0.04);
 
         background: linear-gradient(
-            135deg,
-            $darker 10px,
-            $lighter 10px,
-            $lighter 20px,
-            $darker 20px,
-            $darker 30px,
-            $lighter 31px
-        ) repeat;
+                135deg,
+                $darker 12px,
+                $lighter 12px,
+                $lighter 22px,
+                $darker 22px,
+                $darker 34px,
+                $lighter 34px
+            )
+            repeat;
         background-size: 32px 32px;
         animation: kbq-progress 1s linear infinite;
     }

package/core/styles/common/_button.scss

@@ -1,10 +1,8 @@
 @use 'vendor-prefixes';
 
-
 @mixin kbq-button-reset {
     @include vendor-prefixes.user-select(none);
     cursor: pointer;
     outline: none;
     border: none;
 }
-

package/core/styles/common/_clearfix.scss

@@ -3,7 +3,7 @@
 
     &:before,
     &:after {
-        content: "";
+        content: '';
         display: table;
     }
 

package/core/styles/common/_groups.scss

@@ -4,7 +4,6 @@
 @use '../tokens';
 @use '../common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 @mixin border-top-radius($radius) {
@@ -78,7 +77,6 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     flex-direction: column;
 
-    /* stylelint-disable no-descending-specificity */
     > .kbq-group-item {
         &:first-child:not(:last-child) {
             @include border-bottom-radius(0);
@@ -112,6 +110,4 @@ $tokens: meta.module-variables(tokens) !default;
     .kbq-group-item + .kbq-group-item {
         margin-top: calc(-1 * var(--kbq-button-size-border-width, #{map.get($tokens, button-size-border-width)}));
     }
-    /* stylelint-enable no-descending-specificity */
 }
-