@koobiq/components 17.0.0-rc.10 → 17.0.0-rc.12

package/alert/public-api.d.ts

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

package/autocomplete/public-api.d.ts

@@ -1,4 +1,4 @@
+export * from './autocomplete-origin.directive';
+export * from './autocomplete-trigger.directive';
 export * from './autocomplete.component';
 export * from './autocomplete.module';
-export * from './autocomplete-trigger.directive';
-export * from './autocomplete-origin.directive';

package/badge/public-api.d.ts

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

package/button/button.component.d.ts

@@ -1,6 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { ChangeDetectorRef, ElementRef, OnDestroy, Renderer2, QueryList, AfterContentInit } from '@angular/core';
-import { CanColor, CanDisable, CanColorCtor, HasTabIndexCtor, KbqTitleTextRef } from '@koobiq/components/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, OnDestroy, QueryList, Renderer2 } from '@angular/core';
+import { CanColor, CanColorCtor, CanDisable, HasTabIndexCtor, KbqTitleTextRef } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
 export declare enum KbqButtonStyles {

package/button/public-api.d.ts

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

package/button-toggle/public-api.d.ts

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

package/card/card.component.d.ts

@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { ElementRef, OnDestroy, EventEmitter } from '@angular/core';
+import { ElementRef, EventEmitter, OnDestroy } from '@angular/core';
 import { CanColorCtor } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 /** @docs-private */

package/card/public-api.d.ts

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

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/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/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/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,13 +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/pop-up/pop-up-trigger.d.ts

@@ -1,5 +1,5 @@
 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 { Observable, Subject, Subscription } from 'rxjs';

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/styles/common/_animation.scss

@@ -4,7 +4,7 @@
     }
 
     to {
-        background-position: 29px 0;
+        background-position: 64px 0;
     }
 }
 
@@ -21,17 +21,17 @@
         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
+                $darker 12px,
+                $lighter 12px,
+                $lighter 22px,
+                $darker 22px,
+                $darker 34px,
+                $lighter 34px
             )
             repeat;
         background-size: 32px 32px;

package/core/styles/common/_list.scss

@@ -29,7 +29,7 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    box-sizing: border-box;
+    box-sizing: content-box;
     overflow: hidden;
 
     // Must remove wrapper when lines are empty or it takes up horizontal
@@ -48,93 +48,54 @@
 }
 
 @mixin kbq-list-text() {
-    $tokens: meta.module-variables(tokens) !default;
-
     @include kbq-line-wrapper-base();
     display: inline-block;
 
     @include kbq-truncate-line();
-
-    padding-top: kbq-css-variable(list-size-text-padding-vertical);
-    padding-bottom: kbq-css-variable(list-size-text-padding-vertical);
 }
 
 // This mixin provides all list-item styles, changing font size and height based on whether the list is in dense mode.
 @mixin kbq-list-item-base() {
-    $tokens: meta.module-variables(tokens) !default;
-
-    $outline-width: map.get($tokens, list-size-container-focus-outline-width);
-
-    $padding-vertical: map.get($tokens, list-size-container-padding-vertical);
-    $padding-left: map.get($tokens, list-size-container-padding-left);
-    $padding-right: map.get($tokens, list-size-container-padding-right);
-
     position: relative;
-
     display: flex;
     flex-direction: row;
     align-items: center;
-
     box-sizing: border-box;
-
     outline: none;
     -webkit-tap-highlight-color: transparent;
-
     min-height: 32px;
+    gap: kbq-css-variable(size-s);
 
-    gap: kbq-css-variable(list-size-container-content-gap-horizontal);
-
-    border-width: kbq-css-variable(list-size-container-focus-outline-width);
-    border-style: solid;
-    border-color: transparent;
-
-    padding: calc(
-            var(--kbq-list-size-container-padding-vertical, $padding-vertical) - var(
-                    --kbq-list-size-container-focus-outline-width,
-                    $outline-width
-                )
-        )
-        calc(
-            var(--kbq-list-size-container-padding-right, $padding-right) - var(
-                    --kbq-list-size-container-focus-outline-width,
-                    $outline-width
-                )
-        )
-        calc(
-            var(--kbq-list-size-container-padding-vertical, $padding-vertical) - var(
-                    --kbq-list-size-container-focus-outline-width,
-                    $outline-width
-                )
-        )
-        calc(
-            var(--kbq-list-size-container-padding-left, $padding-left) - var(
-                    --kbq-list-size-container-focus-outline-width,
-                    $outline-width
-                )
-        );
+    border: kbq-css-variable(size-3xs) solid transparent;
+
+    padding-top: kbq-css-variable(size-xxs);
+    padding-left: kbq-css-variable(size-m);
+    padding-right: kbq-css-variable(size-m);
+    padding-bottom: kbq-css-variable(size-xxs);
 
     .kbq-list-text {
         @include kbq-list-text();
     }
 
     .kbq-list-option-caption {
-        padding-top: kbq-css-variable(list-size-container-content-gap-vertical);
+        padding-top: kbq-css-variable(size-3xs);
     }
 }
 
 @mixin kbq-list-header-base() {
-    $tokens: meta.module-variables(tokens) !default;
-
     display: flex;
     flex-direction: row;
     align-items: center;
-
     box-sizing: border-box;
-
     min-height: 32px;
 
-    padding: kbq-css-variable(list-size-header-padding-top) kbq-css-variable(list-size-header-padding-horizontal)
-        kbq-css-variable(list-size-header-padding-bottom) kbq-css-variable(list-size-header-padding-horizontal);
+    border-left: kbq-css-variable(size-3xs) solid transparent;
+    border-right: kbq-css-variable(size-3xs) solid transparent;
+
+    padding-top: kbq-css-variable(size-xs);
+    padding-left: kbq-css-variable(size-m);
+    padding-right: kbq-css-variable(size-m);
+    padding-bottom: kbq-css-variable(size-3xs);
 
     .kbq-list-text {
         @include kbq-list-text();
@@ -142,19 +103,19 @@
 }
 
 @mixin kbq-list-subheading-base() {
-    $tokens: meta.module-variables(tokens) !default;
-
     display: flex;
     flex-direction: row;
     align-items: center;
-
     box-sizing: border-box;
-
     min-height: 32px;
 
-    padding: kbq-css-variable(list-size-subheading-padding-top)
-        kbq-css-variable(list-size-subheading-padding-horizontal) kbq-css-variable(list-size-subheading-padding-bottom)
-        kbq-css-variable(list-size-subheading-padding-horizontal);
+    border-left: kbq-css-variable(size-3xs) solid transparent;
+    border-right: kbq-css-variable(size-3xs) solid transparent;
+
+    padding-top: kbq-css-variable(size-m);
+    padding-left: kbq-css-variable(size-m);
+    padding-right: kbq-css-variable(size-m);
+    padding-bottom: kbq-css-variable(size-xxs);
 
     .kbq-list-text {
         @include kbq-list-text();