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

package/form-field/cleaner.scss

@@ -1,21 +1,15 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-cleaner {
     display: flex;
     align-items: center;
     justify-content: center;
 
-    width: var(--kbq-form-field-size-icon-button-size, map.get($tokens, form-field-size-icon-button-size));
-    margin-right: var(
-        --kbq-form-field-size-icon-button-margin-right,
-        map.get($tokens, form-field-size-icon-button-margin-right)
-    );
+    width: kbq-css-variable(form-field-size-icon-button-size);
+    margin-right: kbq-css-variable(form-field-size-icon-button-margin-right);
     height: 100%;
 
     cursor: pointer;

package/form-field/form-field.scss

@@ -1,15 +1,15 @@
+/* stylelint-disable scss/operator-no-newline-after */
+
 @use 'sass:meta';
 @use 'sass:map';
 
 @use '../core/forms/forms';
 
 @use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
-/* stylelint-disable no-descending-specificity */
-
 .kbq-form-field {
     position: relative;
     display: inline-block;
@@ -20,13 +20,13 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-form-field:not(.kbq-form-field-type-textarea) {
-        height: var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height));
+        height: kbq-css-variable(form-field-size-height);
     }
 
     &,
     .kbq-input,
     .kbq-textarea {
-        border-radius: var(--kbq-form-field-size-border-radius, map.get($tokens, form-field-size-border-radius));
+        border-radius: kbq-css-variable(form-field-size-border-radius);
     }
 
     &:hover {
@@ -46,8 +46,8 @@ $tokens: meta.module-variables(tokens) !default;
         .kbq-input {
             padding-left: calc(
                 var(--kbq-form-field-size-icon-size, map.get($tokens, form-field-size-icon-size)) +
-                var(--kbq-form-field-size-icon-margin-left, map.get($tokens, form-field-size-icon-margin-left)) +
-                var(--kbq-form-field-size-icon-margin-right, map.get($tokens, form-field-size-icon-margin-right))
+                    var(--kbq-form-field-size-icon-margin-left, map.get($tokens, form-field-size-icon-margin-left)) +
+                    var(--kbq-form-field-size-icon-margin-right, map.get($tokens, form-field-size-icon-margin-right))
             );
         }
     }
@@ -59,30 +59,30 @@ $tokens: meta.module-variables(tokens) !default;
         .kbq-input {
             padding-right: calc(
                 var(--kbq-form-field-size-icon-button-size, map.get($tokens, form-field-size-icon-button-size)) +
-                var(
-                    --kbq-form-field-size-icon-button-margin-left,
-                    map.get($tokens, form-field-size-icon-button-margin-left)
-                ) +
-                var(
-                    --kbq-form-field-size-icon-button-margin-right,
-                    map.get($tokens, form-field-size-icon-button-margin-right)
-                )
+                    var(
+                        --kbq-form-field-size-icon-button-margin-left,
+                        map.get($tokens, form-field-size-icon-button-margin-left)
+                    ) +
+                    var(
+                        --kbq-form-field-size-icon-button-margin-right,
+                        map.get($tokens, form-field-size-icon-button-margin-right)
+                    )
             );
         }
     }
 
     & + .kbq-password-hint {
-        margin-top: var(--kbq-size-m, map.get($tokens, size-m));
+        margin-top: kbq-css-variable(size-m);
     }
 }
 
 .kbq-form-field__container {
     position: relative;
 
-    border-width: var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width));
+    border-width: kbq-css-variable(form-field-size-border-width);
     border-style: solid;
     border-color: transparent;
-    border-radius: var(--kbq-form-field-size-border-radius, map.get($tokens, form-field-size-border-radius));
+    border-radius: kbq-css-variable(form-field-size-border-radius);
 }
 
 .kbq-form-field__prefix,
@@ -122,12 +122,12 @@ $tokens: meta.module-variables(tokens) !default;
     justify-content: center;
     align-items: center;
 
-    width: var(--kbq-form-field-size-button-width, map.get($tokens, form-field-size-button-width));
+    width: kbq-css-variable(form-field-size-button-width);
 
     .kbq-stepper-step-up,
     .kbq-stepper-step-down {
         cursor: pointer;
-        width: var(--kbq-form-field-size-button-width, map.get($tokens, form-field-size-button-width));
+        width: kbq-css-variable(form-field-size-button-width);
         text-align: center;
     }
 
@@ -139,16 +139,13 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-form-field__hint {
     display: flex;
     flex-direction: column;
-    margin-top: var(--kbq-form-field-hint-size-margin-top, map.get($tokens, form-field-hint-size-margin-top));
+    margin-top: kbq-css-variable(form-field-hint-size-margin-top);
 
     & .kbq-password-hint:first-child {
-        margin-top: var(--kbq-size-s, map.get($tokens, size-s));
+        margin-top: kbq-css-variable(size-s);
     }
 }
 
 .kbq-password-hint {
-    margin-top: var(--kbq-form-field-hint-size-gap, map.get($tokens, form-field-hint-size-gap));
+    margin-top: kbq-css-variable(form-field-hint-size-gap);
 }
-
-
-/* stylelint-enable no-descending-specificity */

package/form-field/hint.scss

@@ -1,23 +1,20 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-hint {
     display: flex;
 
     & .kbq-icon {
-        margin-right: var(--kbq-hint-size-normal-content-padding, map-get($tokens, hint-size-normal-content-padding));
+        margin-top: kbq-css-variable(hint-size-normal-margin-top);
+        margin-right: kbq-css-variable(hint-size-normal-content-padding);
     }
 
     &.kbq-hint_compact {
         & .kbq-icon {
-            margin-right: var(
-                --kbq-hint-size-compact-content-padding, map-get($tokens, hint-size-compact-content-padding)
-            );
+            margin-top: kbq-css-variable(hint-size-compact-margin-top);
+            margin-right: kbq-css-variable(hint-size-compact-content-padding);
         }
     }
 }

package/form-field/password-toggle.d.ts

@@ -1,3 +1,4 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, TemplateRef, ViewContainerRef } from '@angular/core';
@@ -15,10 +16,10 @@ export declare class KbqPasswordToggle extends KbqTooltipTrigger implements Afte
     get hidden(): boolean;
     get iconClass(): string;
     get visibility(): string;
-    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, formField: KbqFormFieldRef, changeDetector: ChangeDetectorRef);
+    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, focusMonitor: FocusMonitor, direction: Directionality, formField: KbqFormFieldRef, changeDetector: ChangeDetectorRef);
     ngAfterViewInit(): void;
     toggle(event: KeyboardEvent): void;
     private updateState;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordToggle, [null, null, null, null, null, null, { optional: true; }, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordToggle, [null, null, null, null, null, null, null, { optional: true; }, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordToggle, "kbq-password-toggle", ["kbqPasswordToggle"], { "content": { "alias": "kbqTooltipNotHidden"; "required": false; }; "kbqTooltipHidden": { "alias": "kbqTooltipHidden"; "required": false; }; }, {}, never, never, false, never>;
 }

package/form-field/password-toggle.scss

@@ -1,22 +1,15 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
+@use '../core/styles/common/tokens' as *;
 
 .kbq-password-toggle {
     display: flex;
     align-items: center;
     justify-content: center;
 
-    width: var(--kbq-form-field-size-icon-button-size, map.get($tokens, form-field-size-icon-button-size));
-    margin-right: var(
-        --kbq-form-field-size-icon-button-margin-right,
-        map.get($tokens, form-field-size-icon-button-margin-right)
-    );
+    width: kbq-css-variable(form-field-size-icon-button-size);
+    margin-right: kbq-css-variable(form-field-size-icon-button-margin-right);
     height: 100%;
 
     &::-moz-focus-inner {

package/form-field/public-api.d.ts

@@ -1,12 +1,12 @@
-export * from './form-field.module';
+export * from './cleaner';
 export * from './form-field';
 export * from './form-field-control';
 export * from './form-field-errors';
+export * from './form-field.module';
 export * from './hint';
 export * from './password-hint';
 export * from './password-toggle';
-export * from './suffix';
 export * from './prefix';
-export * from './cleaner';
 export * from './stepper';
+export * from './suffix';
 export * from './validate.directive';

package/form-field/stepper.scss

@@ -1,11 +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-stepper {
     display: flex;
@@ -13,17 +9,14 @@ $tokens: meta.module-variables(tokens) !default;
     justify-content: center;
     align-items: center;
 
-    width: var(--kbq-form-field-size-icon-button-size, map.get($tokens, form-field-size-icon-button-size));
-    margin-right: var(
-        --kbq-form-field-size-icon-button-margin-right,
-        map.get($tokens, form-field-size-icon-button-margin-right)
-    );
+    width: kbq-css-variable(form-field-size-icon-button-size);
+    margin-right: kbq-css-variable(form-field-size-icon-button-margin-right);
     height: 100%;
 
     .kbq-stepper-step-up,
     .kbq-stepper-step-down {
         cursor: pointer;
-        width: var(--kbq-form-field-size-button-width, map.get($tokens, form-field-size-button-width));
+        width: kbq-css-variable(form-field-size-button-width);
         text-align: center;
     }
 

package/icon/_icon-button-theme.scss

@@ -1,17 +1,10 @@
 @use 'sass:map';
 
 @use '../core/styles/theming/theming' as *;
+@use '../core/styles/common/tokens' as *;
 
-
-@mixin kbq-icon-button-theme($themeObj) {
-    $icon-button: map.get(map.get($themeObj, components), icon-button);
-
-    $theme: map.get($icon-button, theme);
-    $contrast: map.get($icon-button, contrast);
-    $fade-contrast: map.get($icon-button, fade-contrast);
-    $error: map.get($icon-button, error);
-    $success: map.get($icon-button, success);
-    $warning: map.get($icon-button, warning);
+@mixin kbq-icon-button-theme($theme) {
+    $icon-button: map.get($theme, components, icon-button);
 
     .kbq-icon-button {
         &:focus {
@@ -19,111 +12,129 @@
         }
 
         &.kbq-theme {
-            color: map.get($theme, default);
+            color: kbq-css-variable(icon-button-heme-default, map.get($icon-button, theme, default));
 
             &:active,
             &.kbq-active {
-                color: map.get($theme, state-active);
+                color: kbq-css-variable(icon-button-heme-state-active, map.get($icon-button, theme, state-active));
             }
 
             &:not(.kbq-disabled):hover {
-                color: map.get($theme, state-hover);
+                color: kbq-css-variable(icon-button-heme-state-hover, map.get($icon-button, theme, state-hover));
             }
 
             &.kbq-disabled {
-                color: map.get($theme, state-disabled);
+                color: kbq-css-variable(icon-button-heme-state-disabled, map.get($icon-button, theme, state-disabled));
             }
         }
 
         &.kbq-contrast {
-            color: map.get($contrast, default);
+            color: kbq-css-variable(icon-button-ontrast-default, map.get($icon-button, contrast, default));
 
             &:active,
             &.kbq-active {
-                color: map.get($contrast, state-active);
+                color: kbq-css-variable(
+                    icon-button-ontrast-state-active,
+                    map.get($icon-button, contrast, state-active)
+                );
             }
 
             &:not(.kbq-disabled):hover {
-                color: map.get($contrast, state-hover);
+                color: kbq-css-variable(icon-button-ontrast-state-hover, map.get($icon-button, contrast, state-hover));
             }
 
             &.kbq-disabled {
-                color: map.get($contrast, state-disabled);
+                color: kbq-css-variable(
+                    icon-button-ontrast-state-disabled,
+                    map.get($icon-button, contrast, state-disabled)
+                );
             }
         }
 
         &.kbq-contrast-fade {
-            color: map.get($fade-contrast, default);
+            color: kbq-css-variable(icon-button-ade-contrast-default, map.get($icon-button, fade-contrast, default));
 
             &:active,
             &.kbq-active {
-                color: map.get($fade-contrast, state-active);
+                color: kbq-css-variable(
+                    icon-button-ade-contrast-state-active,
+                    map.get($icon-button, fade-contrast, state-active)
+                );
             }
 
             &:not(.kbq-disabled):hover {
-                color: map.get($fade-contrast, state-hover);
+                color: kbq-css-variable(
+                    icon-button-ade-contrast-state-hover,
+                    map.get($icon-button, fade-contrast, state-hover)
+                );
             }
 
             &.kbq-disabled {
-                color: map.get($fade-contrast, state-disabled);
+                color: kbq-css-variable(
+                    icon-button-ade-contrast-state-disabled,
+                    map.get($icon-button, fade-contrast, state-disabled)
+                );
             }
         }
 
         &.kbq-error {
-            color: map.get($error, default);
+            color: kbq-css-variable(icon-button-rror-default, map.get($icon-button, error, default));
 
             &:active,
             &.kbq-active {
-                color: map.get($error, state-active);
+                color: kbq-css-variable(icon-button-rror-state-active, map.get($icon-button, error, state-active));
             }
 
             &:not(.kbq-disabled):hover {
-                color: map.get($error, state-hover);
+                color: kbq-css-variable(icon-button-rror-state-hover, map.get($icon-button, error, state-hover));
             }
 
             &.kbq-disabled {
-                color: map.get($error, state-disabled);
+                color: kbq-css-variable(icon-button-rror-state-disabled, map.get($icon-button, error, state-disabled));
             }
         }
 
         &.kbq-success {
-            color: map.get($success, default);
+            color: kbq-css-variable(icon-button-uccess-default, map.get($icon-button, success, default));
 
             &:active,
             &.kbq-active {
-                color: map.get($success, state-active);
+                color: kbq-css-variable(icon-button-uccess-state-active, map.get($icon-button, success, state-active));
             }
 
             &:not(.kbq-disabled):hover {
-                color: map.get($success, state-hover);
+                color: kbq-css-variable(icon-button-uccess-state-hover, map.get($icon-button, success, state-hover));
             }
 
             &.kbq-disabled {
-                color: map.get($success, state-disabled);
+                color: kbq-css-variable(
+                    icon-button-uccess-state-disabled,
+                    map.get($icon-button, success, state-disabled)
+                );
             }
         }
 
         &.kbq-warning {
-            color: map.get($warning, default);
+            color: kbq-css-variable(icon-button-default, map.get($icon-button, default));
 
             &:active,
             &.kbq-active {
-                color: map.get($warning, state-active);
+                color: kbq-css-variable(icon-button-state-active, map.get($icon-button, state-active));
             }
 
             &:not(.kbq-disabled):hover {
-                color: map.get($warning, state-hover);
+                color: kbq-css-variable(icon-button-state-hover, map.get($icon-button, state-hover));
             }
 
             &.kbq-disabled {
-                color: map.get($warning, state-disabled);
+                color: kbq-css-variable(icon-button-state-disabled, map.get($icon-button, state-disabled));
             }
         }
 
         &.cdk-keyboard-focused {
             box-shadow:
-                inset 0 0 0 1px map.get(map.get($themeObj, states), focused-color),
-                0 0 0 1px map.get(map.get($themeObj, states), focused-color);
+                inset 0 0 0.1px 1px map.get($theme, states, focused-color),
+                0 0 0.1px 1px map.get($theme, states, focused-color);
         }
     }
 }

package/icon/_icon-item-theme.scss

@@ -1,41 +1,62 @@
 @use 'sass:map';
 
 @use '../core/styles/theming/theming' as *;
+@use '../core/styles/common/tokens' as *;
 
+@mixin kbq-icon-item-style($component, $type, $style-name) {
+    $style: map.get($component, $type, $style-name);
+    $base: icon-item-filled-#{$type}-#{$type}-#{$style-name};
 
-@mixin kbq-icon-item-theme($themeObj) {
-    $icon-item: map.get(map.get($themeObj, components), icon-item);
+    color: kbq-css-variable(#{$base}-color, map.get($component, $type, $style-name, color));
+    background: kbq-css-variable(#{$base}-background, map.get($component, $type, $style-name, background));
+}
 
-    $theme: map.get($icon-item, theme);
-    $contrast: map.get($icon-item, contrast);
-    $fade-contrast: map.get($icon-item, fade-contrast);
-    $error: map.get($icon-item, error);
-    $success: map.get($icon-item, success);
+@mixin kbq-icon-item-theme($theme) {
+    $icon-item: map.get($theme, components, icon-item);
 
-    .kbq-icon-item {
-        &.kbq-theme {
-            color: map.get($theme, color);
-            background: map.get($theme, background);
-        }
+    .kbq-icon-item.kbq-icon-item_filled {
+        &.kbq-icon-item_fade-off {
+            &.kbq-theme {
+                @include kbq-icon-item-style($icon-item, fade-off, theme);
+            }
 
-        &.kbq-contrast {
-            color: map.get($contrast, color);
-            background: map.get($contrast, background);
-        }
+            &.kbq-contrast {
+                @include kbq-icon-item-style($icon-item, fade-off, contrast);
+            }
 
-        &.kbq-contrast-fade {
-            color: map.get($fade-contrast, color);
-            background: map.get($fade-contrast, background);
-        }
+            &.kbq-error {
+                @include kbq-icon-item-style($icon-item, fade-off, error);
+            }
+
+            &.kbq-warning {
+                @include kbq-icon-item-style($icon-item, fade-off, warning);
+            }
 
-        &.kbq-error {
-            color: map.get($error, color);
-            background: map.get($error, background);
+            &.kbq-success {
+                @include kbq-icon-item-style($icon-item, fade-off, success);
+            }
         }
 
-        &.kbq-success {
-            color: map.get($success, color);
-            background: map.get($success, background);
+        &.kbq-icon-item_fade-on {
+            &.kbq-theme {
+                @include kbq-icon-item-style($icon-item, fade-on, theme);
+            }
+
+            &.kbq-contrast {
+                @include kbq-icon-item-style($icon-item, fade-on, contrast);
+            }
+
+            &.kbq-error {
+                @include kbq-icon-item-style($icon-item, fade-on, error);
+            }
+
+            &.kbq-warning {
+                @include kbq-icon-item-style($icon-item, fade-on, warning);
+            }
+
+            &.kbq-success {
+                @include kbq-icon-item-style($icon-item, fade-on, success);
+            }
         }
     }
 }

package/icon/_icon-theme.scss

@@ -1,36 +1,34 @@
 @use 'sass:map';
 
 @use '../core/styles/theming/theming' as *;
+@use '../core/styles/common/tokens' as *;
 
-
-@mixin kbq-icon-theme($themeObj) {
-    $icon: map.get(map.get($themeObj, components), icon);
-
-    $theme: map.get($icon, theme);
-    $contrast: map.get($icon, contrast);
-    $fade-contrast: map.get($icon, fade-contrast);
-    $error: map.get($icon, error);
-    $success: map.get($icon, success);
+@mixin kbq-icon-theme($theme) {
+    $icon: map.get($theme, components, icon);
 
     .kbq-icon:not(.kbq-icon-button, .kbq-icon-item) {
         &.kbq-theme {
-            color: map.get($theme, color);
+            color: kbq-css-variable(icon-theme-color, map.get($icon, theme, color));
         }
 
         &.kbq-contrast {
-            color: map.get($contrast, color);
+            color: kbq-css-variable(icon-contrast-color, map.get($icon, contrast, color));
         }
 
         &.kbq-contrast-fade {
-            color: map.get($fade-contrast, color);
+            color: kbq-css-variable(icon-fade-contrast-color, map.get($icon, fade-contrast, color));
         }
 
         &.kbq-error {
-            color: map.get($error, color);
+            color: kbq-css-variable(icon-error-color, map.get($icon, error, color));
+        }
+
+        &.kbq-warning {
+            color: kbq-css-variable(icon-warning-color, map.get($icon, warning, color));
         }
 
         &.kbq-success {
-            color: map.get($success, color);
+            color: kbq-css-variable(icon-success-color, map.get($icon, success, color));
         }
     }
 }

package/icon/icon-button.scss

@@ -1,33 +1,18 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
+@use '../core/styles/common/tokens' as *;
 
 .kbq-icon-button {
     &:not(.kbq-disabled) {
         cursor: pointer;
     }
 
-    padding:
-        var(--kbq-icon-button-size-small-vertical-padding, map-get($tokens, icon-button-size-small-vertical-padding))
-        var(
-            --kbq-icon-button-size-small-horizontal-padding,
-            map-get($tokens, icon-button-size-small-horizontal-padding)
-        );
+    padding: kbq-css-variable(icon-button-size-small-vertical-padding)
+        kbq-css-variable(icon-button-size-small-horizontal-padding);
 
     &.kbq-icon-button_small {
-        padding:
-            var(
-                --kbq-icon-button-size-normal-vertical-padding,
-                map-get($tokens, icon-button-size-normal-vertical-padding)
-            )
-            var(
-                --kbq-icon-button-size-normal-horizontal-padding,
-                map-get($tokens, icon-button-size-normal-horizontal-padding)
-            );
+        padding: kbq-css-variable(icon-button-size-normal-vertical-padding)
+            kbq-css-variable(icon-button-size-normal-horizontal-padding);
     }
 }

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

@@ -5,7 +5,9 @@ import * as i0 from "@angular/core";
 export declare class KbqIconItem extends KbqIcon implements CanColor {
     protected changeDetectorRef: ChangeDetectorRef;
     name: string;
+    fade: boolean;
+    big: boolean;
     constructor(elementRef: ElementRef, iconName: string, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconItem, [null, { attribute: "kbq-icon-item"; }, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconItem, "[kbq-icon-item]", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconItem, "[kbq-icon-item]", never, { "color": { "alias": "color"; "required": false; }; "fade": { "alias": "fade"; "required": false; }; "big": { "alias": "big"; "required": false; }; }, {}, never, ["*"], false, never>;
 }