@koobiq/components 16.0.0-beta.8 → 16.0.0-beta.9

package/form-field/_hint-theme.scss

@@ -9,7 +9,7 @@
     color: map.get($hint, text);
 
     & .kbq-icon {
-        color: map.get($hint, icon);
+        color: map.get($hint, icon) !important;
     }
 }
 
@@ -64,4 +64,8 @@
     .kbq-hint .kbq-hint__text {
         @include kbq-typography-level-to-styles($config, map.get($tokens, hint-font-normal-text));
     }
+
+    .kbq-hint.kbq-hint_compact .kbq-hint__text {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, hint-font-compact-text));
+    }
 }

package/form-field/hint.d.ts

@@ -11,7 +11,10 @@ export declare const KbqHintMixinBase: CanColorCtor & typeof KbqHintBase;
 export declare class KbqHint extends KbqHintMixinBase {
     id: string;
     fillTextOff: boolean;
+    get compact(): any;
+    set compact(value: any);
+    private _compact;
     constructor(elementRef: ElementRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqHint, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqHint, "kbq-hint", ["kbqHint"], { "color": { "alias": "color"; "required": false; }; "id": { "alias": "id"; "required": false; }; "fillTextOff": { "alias": "fillTextOff"; "required": false; }; }, {}, never, ["[kbq-icon]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqHint, "kbq-hint", ["kbqHint"], { "color": { "alias": "color"; "required": false; }; "id": { "alias": "id"; "required": false; }; "fillTextOff": { "alias": "fillTextOff"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; }, {}, never, ["[kbq-icon]", "*"], false, never>;
 }

package/form-field/hint.scss

@@ -10,6 +10,14 @@ $tokens: meta.module-variables(tokens) !default;
     display: block;
 
     & .kbq-icon {
-        margin-right: var(--kbq-hint-size-content-padding, map-get($tokens, hint-size-content-padding));
+        margin-right: var(--kbq-hint-size-normal-content-padding, map-get($tokens, 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)
+            );
+        }
     }
 }

package/icon/_icon-button-theme.scss

@@ -0,0 +1,129 @@
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' 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);
+
+    .kbq-icon-button {
+        &:focus {
+            outline: none;
+        }
+
+        &.kbq-theme {
+            color: map.get($theme, default);
+
+            &:active,
+            &.kbq-active {
+                color: map.get($theme, state-active);
+            }
+
+            &:not(.kbq-disabled):hover {
+                color: map.get($theme, state-hover);
+            }
+
+            &.kbq-disabled {
+                color: map.get($theme, state-disabled);
+            }
+        }
+
+        &.kbq-contrast {
+            color: map.get($contrast, default);
+
+            &:active,
+            &.kbq-active {
+                color: map.get($contrast, state-active);
+            }
+
+            &:not(.kbq-disabled):hover {
+                color: map.get($contrast, state-hover);
+            }
+
+            &.kbq-disabled {
+                color: map.get($contrast, state-disabled);
+            }
+        }
+
+        &.kbq-contrast-fade {
+            color: map.get($fade-contrast, default);
+
+            &:active,
+            &.kbq-active {
+                color: map.get($fade-contrast, state-active);
+            }
+
+            &:not(.kbq-disabled):hover {
+                color: map.get($fade-contrast, state-hover);
+            }
+
+            &.kbq-disabled {
+                color: map.get($fade-contrast, state-disabled);
+            }
+        }
+
+        &.kbq-error {
+            color: map.get($error, default);
+
+            &:active,
+            &.kbq-active {
+                color: map.get($error, state-active);
+            }
+
+            &:not(.kbq-disabled):hover {
+                color: map.get($error, state-hover);
+            }
+
+            &.kbq-disabled {
+                color: map.get($error, state-disabled);
+            }
+        }
+
+        &.kbq-success {
+            color: map.get($success, default);
+
+            &:active,
+            &.kbq-active {
+                color: map.get($success, state-active);
+            }
+
+            &:not(.kbq-disabled):hover {
+                color: map.get($success, state-hover);
+            }
+
+            &.kbq-disabled {
+                color: map.get($success, state-disabled);
+            }
+        }
+
+        &.kbq-warning {
+            color: map.get($warning, default);
+
+            &:active,
+            &.kbq-active {
+                color: map.get($warning, state-active);
+            }
+
+            &:not(.kbq-disabled):hover {
+                color: map.get($warning, state-hover);
+            }
+
+            &.kbq-disabled {
+                color: map.get($warning, 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);
+        }
+    }
+}

package/icon/_icon-item-theme.scss

@@ -0,0 +1,41 @@
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+
+
+@mixin kbq-icon-item-theme($themeObj) {
+    $icon-item: map.get(map.get($themeObj, components), icon-item);
+
+    $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);
+
+    .kbq-icon-item {
+        &.kbq-theme {
+            color: map.get($theme, color);
+            background: map.get($theme, background);
+        }
+
+        &.kbq-contrast {
+            color: map.get($contrast, color);
+            background: map.get($contrast, background);
+        }
+
+        &.kbq-contrast-fade {
+            color: map.get($fade-contrast, color);
+            background: map.get($fade-contrast, background);
+        }
+
+        &.kbq-error {
+            color: map.get($error, color);
+            background: map.get($error, background);
+        }
+
+        &.kbq-success {
+            color: map.get($success, color);
+            background: map.get($success, background);
+        }
+    }
+}

package/icon/_icon-theme.scss

@@ -12,7 +12,7 @@
     $error: map.get($icon, error);
     $success: map.get($icon, success);
 
-    .kbq-icon {
+    .kbq-icon:not(.kbq-icon-button, .kbq-icon-item) {
         &.kbq-theme {
             color: map.get($theme, color);
         }
@@ -32,226 +32,5 @@
         &.kbq-success {
             color: map.get($success, color);
         }
-
-        &.kbq-disabled {
-            cursor: default;
-
-            pointer-events: none;
-        }
-    }
-}
-
-@mixin kbq-icon-item-theme($themeObj) {
-    $icon-item: map.get(map.get($themeObj, components), icon-item);
-
-    $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);
-
-    .kbq-icon-item {
-        &.kbq-theme {
-            color: map.get($theme, color);
-            background: map.get($theme, background);
-        }
-
-        &.kbq-contrast {
-            color: map.get($contrast, color);
-            background: map.get($contrast, background);
-        }
-
-        &.kbq-contrast-fade {
-            color: map.get($fade-contrast, color);
-            background: map.get($fade-contrast, background);
-        }
-
-        &.kbq-error {
-            color: map.get($error, color);
-            background: map.get($error, background);
-        }
-
-        &.kbq-success {
-            color: map.get($success, color);
-            background: map.get($success, background);
-        }
-
-        &.kbq-disabled {
-            cursor: default;
-        }
-    }
-}
-
-@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);
-
-    .kbq-icon_button {
-        &.kbq-theme {
-            &:active,
-            &.kbq-active {
-                color: map.get($theme, state-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: map.get($theme, state-hover);
-            }
-
-            &.kbq-disabled {
-                color: map.get($theme, state-disabled);
-            }
-        }
-
-        &.kbq-contrast {
-            &:active,
-            &.kbq-active {
-                color: map.get($contrast, state-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: map.get($contrast, state-hover);
-            }
-
-            &.kbq-disabled {
-                color: map.get($contrast, state-disabled);
-            }
-        }
-
-        &.kbq-contrast-fade {
-            &:active,
-            &.kbq-active {
-                color: map.get($fade-contrast, state-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: map.get($fade-contrast, state-hover);
-            }
-
-            &.kbq-disabled {
-                color: map.get($fade-contrast, state-disabled);
-            }
-        }
-
-        &.kbq-error {
-            &:active,
-            &.kbq-active {
-                color: map.get($error, state-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: map.get($error, state-hover);
-            }
-
-            &.kbq-disabled {
-                color: map.get($error, state-disabled);
-            }
-        }
-
-        &.kbq-success {
-            &:active,
-            &.kbq-active {
-                color: map.get($success, state-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: map.get($success, state-hover);
-            }
-
-            &.kbq-disabled {
-                color: map.get($success, state-disabled);
-            }
-        }
-    }
-
-    .kbq-icon.kbq-icon_button {
-        &.kbq-theme {
-            &:active,
-            &.kbq-active {
-                color: map.get($theme, state-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: map.get($theme, state-hover);
-            }
-
-            &.kbq-disabled {
-                color: map.get($theme, state-disabled);
-            }
-        }
-
-        &.kbq-contrast {
-            &:active,
-            &.kbq-active {
-                color: map.get($contrast, state-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: map.get($contrast, state-hover);
-            }
-
-            &.kbq-disabled {
-                color: map.get($contrast, state-disabled);
-            }
-        }
-
-        &.kbq-contrast-fade {
-            &:active,
-            &.kbq-active {
-                color: map.get($fade-contrast, state-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: map.get($fade-contrast, state-hover);
-            }
-
-            &.kbq-disabled {
-                color: map.get($fade-contrast, state-disabled);
-            }
-        }
-
-        &.kbq-error {
-            &:active,
-            &.kbq-active {
-                color: map.get($error, state-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: map.get($error, state-hover);
-            }
-
-            &.kbq-disabled {
-                color: map.get($error, state-disabled);
-            }
-        }
-
-        &.kbq-success {
-            &:active,
-            &.kbq-active {
-                color: map.get($success, state-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: map.get($success, state-hover);
-            }
-
-            &.kbq-disabled {
-                color: map.get($success, state-disabled);
-            }
-        }
-
-        &:focus {
-            outline: none;
-        }
-
-        &.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);
-        }
     }
 }

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

@@ -0,0 +1,22 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
+import { CanColor, KbqFormFieldRef } from '@koobiq/components/core';
+import { KbqIcon } from './icon.component';
+import * as i0 from "@angular/core";
+export declare class KbqIconButton extends KbqIcon implements OnDestroy, CanColor {
+    protected changeDetectorRef: ChangeDetectorRef;
+    private focusMonitor;
+    small: boolean;
+    get tabindex(): any;
+    set tabindex(value: any);
+    private _tabindex;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    constructor(elementRef: ElementRef, iconName: string, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
+    ngOnDestroy(): void;
+    private runFocusMonitor;
+    private stopFocusMonitor;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconButton, [null, { attribute: "kbq-icon-button"; }, { optional: true; }, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconButton, "[kbq-icon-button]", never, { "color": { "alias": "color"; "required": false; }; "small": { "alias": "small"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], false, never>;
+}

package/icon/icon-button.scss

@@ -0,0 +1,33 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+.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)
+        );
+
+    &.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)
+            );
+    }
+}

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

@@ -0,0 +1,10 @@
+import { ChangeDetectorRef, ElementRef } from '@angular/core';
+import { CanColor, KbqFormFieldRef } from '@koobiq/components/core';
+import { KbqIcon } from './icon.component';
+import * as i0 from "@angular/core";
+export declare class KbqIconItem extends KbqIcon implements CanColor {
+    protected changeDetectorRef: ChangeDetectorRef;
+    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>;
+}

package/icon/icon-item.scss

@@ -0,0 +1,18 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+.kbq-icon-item {
+    box-sizing: border-box;
+
+    border-radius: 50%;
+
+    padding:
+        var(--kbq-icon-item-size-vertical-padding, map-get($tokens, icon-item-size-vertical-padding))
+        var(--kbq-icon-item-size-horizontal-padding, map-get($tokens, icon-item-size-horizontal-padding));
+}

package/icon/icon.component.d.ts

@@ -1,5 +1,4 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef } from '@angular/core';
 import { CanColor, CanColorCtor, KbqFormFieldRef } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 /** @docs-private */
@@ -22,26 +21,3 @@ export declare class KbqIcon extends KbqIconMixinBase implements CanColor, After
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqIcon, [null, { attribute: "kbq-icon"; }, { optional: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqIcon, "[kbq-icon]", never, { "color": { "alias": "color"; "required": false; }; "small": { "alias": "small"; "required": false; }; "autoColor": { "alias": "autoColor"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
-export declare class KbqIconButton extends KbqIcon implements OnDestroy, CanColor {
-    protected changeDetectorRef: ChangeDetectorRef;
-    private focusMonitor;
-    small: boolean;
-    get tabindex(): any;
-    set tabindex(value: any);
-    private _tabindex;
-    get disabled(): boolean;
-    set disabled(value: boolean);
-    private _disabled;
-    constructor(elementRef: ElementRef, iconName: string, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
-    ngOnDestroy(): void;
-    private runFocusMonitor;
-    private stopFocusMonitor;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconButton, [null, { attribute: "kbq-icon-button"; }, { optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconButton, "[kbq-icon-button]", never, { "color": { "alias": "color"; "required": false; }; "small": { "alias": "small"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], false, never>;
-}
-export declare class KbqIconItem extends KbqIcon implements CanColor {
-    protected changeDetectorRef: ChangeDetectorRef;
-    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>;
-}

package/icon/icon.module.d.ts

@@ -1,10 +1,12 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./icon.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/cdk/a11y";
-import * as i4 from "@angular/cdk/platform";
+import * as i2 from "./icon-button.component";
+import * as i3 from "./icon-item.component";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/cdk/a11y";
+import * as i6 from "@angular/cdk/platform";
 export declare class KbqIconModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqIconModule, [typeof i1.KbqIcon, typeof i1.KbqIconButton, typeof i1.KbqIconItem], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqIcon, typeof i1.KbqIconButton, typeof i1.KbqIconItem]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqIconModule, [typeof i1.KbqIcon, typeof i2.KbqIconButton, typeof i3.KbqIconItem], [typeof i4.CommonModule, typeof i5.A11yModule, typeof i6.PlatformModule], [typeof i1.KbqIcon, typeof i2.KbqIconButton, typeof i3.KbqIconItem]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqIconModule>;
 }

package/icon/icon.scss

@@ -7,47 +7,6 @@
 $tokens: meta.module-variables(tokens) !default;
 
 
-@mixin kbq-icon-size($padding, $line-height, $font-size) {
-    padding: $padding;
-    line-height: $line-height;
-    font-size: $font-size;
-}
-
-.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)
-        );
-
-    &.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)
-            );
-    }
-}
-
-.kbq-icon-item {
-    box-sizing: border-box;
-
-    border-radius: 50%;
-
-    padding:
-        var(--kbq-icon-item-size-vertical-padding, map-get($tokens, icon-item-size-vertical-padding))
-        var(--kbq-icon-item-size-horizontal-padding, map-get($tokens, icon-item-size-horizontal-padding));
-}
-
 .kbq-icon-rotate_90 {
     transform: rotate(90deg);
 }

package/icon/public-api.d.ts

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