@koobiq/components 16.0.0-beta.1 → 16.0.0-beta.11

package/file-upload/single-file-upload.component.scss

@@ -7,32 +7,48 @@
 
 $tokens: meta.module-variables(tokens) !default;
 
-.kbq-file-upload {
-    height: var(
-        --kbq-file-upload-size-single-height,
-        map.get($tokens, file-upload-size-single-height)
-    );
-    padding-top: var(
-        --kbq-file-upload-size-single-vertical-padding,
-        map.get($tokens, file-upload-size-single-vertical-padding)
-    );
-    padding-bottom: var(
-        --kbq-file-upload-size-single-vertical-padding,
-        map.get($tokens, file-upload-size-single-vertical-padding)
-    );
-    padding-left: map.get($tokens, size-m);
+.kbq-single-file-upload .kbq-file-upload {
+    $padding-vertical: map.get($tokens, file-upload-size-single-container-padding-vertical);
+    $padding-horizontal: map.get($tokens, file-upload-size-single-container-padding-horizontal);
+    $border-width: map.get($tokens, file-upload-size-single-container-border-width);
+
+    padding:
+        calc(var(--kbq-file-upload-size-single-container-padding-vertical, $padding-vertical) - $border-width)
+        calc(var(--kbq-file-upload-size-single-container-padding-horizontal, $padding-horizontal) - $border-width);
 
     border-radius: var(
-        --kbq-file-upload-size-single-border-radius,
-        map.get($tokens, file-upload-size-single-border-radius)
+        --kbq-file-upload-size-single-container-border-radius,
+        map.get($tokens, file-upload-size-single-container-border-radius)
     );
     border-width: var(
-        --kbq-file-upload-size-single-border-width,
-        map.get($tokens, file-upload-size-single-border-width));
-    border-style: var(
-        --kbq-file-upload-size-single-border-style,
-        map.get($tokens, file-upload-size-single-border-style)
+        --kbq-file-upload-size-single-container-border-width,
+        map.get($tokens, file-upload-size-single-container-border-width)
     );
+    border-style: dashed;
+
+    & .dropzone__text {
+        padding-top: var(
+            --kbq-file-upload-size-single-text-block-padding-vertical,
+            map.get($tokens, file-upload-size-single-text-block-padding-vertical)
+        );
+
+        padding-bottom: var(
+            --kbq-file-upload-size-single-text-block-padding-vertical,
+            map.get($tokens, file-upload-size-single-text-block-padding-vertical)
+        );
+
+        gap: var(
+            --kbq-file-upload-size-single-text-block-content-gap-horizontal,
+            map.get($tokens, file-upload-size-single-text-block-content-gap-horizontal)
+        );
+    }
+
+    & .dropzone {
+        gap: var(
+            --kbq-file-upload-size-single-container-content-gap-horizontal,
+            map.get($tokens, file-upload-size-single-container-content-gap-horizontal)
+        );
+    }
 
     .file-item {
         width: 100%;
@@ -42,8 +58,12 @@ $tokens: meta.module-variables(tokens) !default;
             align-items: center;
             width: 100%;
 
+            gap: var(
+                --kbq-file-upload-size-single-container-content-gap-horizontal,
+                map.get($tokens, file-upload-size-single-container-content-gap-horizontal)
+            );
+
             .file-item__text {
-                margin-left: map.get($tokens, size-s);
                 width: 120px;
                 flex-grow: 1;
             }

package/form-field/_form-field-theme.scss

@@ -75,11 +75,8 @@
         &.kbq-disabled {
             @include kbq-form-field-state($disabled);
 
-            .kbq-icon,
-            .kbq-input,
-            .kbq-textarea {
+            .kbq-icon {
                 color: map.get($disabled, text);
-                background: map.get($disabled, background);
                 -webkit-text-fill-color: map.get($disabled, text);
             }
         }
@@ -103,10 +100,10 @@
     $tokens: map.get($config, tokens);
 
     .kbq-form-field {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-font-label));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-font-text));
     }
 
-    .kbq-form-field__hint > .kbq-hint {
+    .kbq-form-field__hint > .kbq-hint .kbq-hint__text {
         @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-hint-font-text));
     }
 }

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;
     }
 }
 
@@ -62,6 +62,10 @@
     $tokens: map.get($config, tokens);
 
     .kbq-hint .kbq-hint__text {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, hint-font-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/cleaner.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class KbqCleaner {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCleaner, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCleaner, "kbq-cleaner", ["mcCleaner"], {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCleaner, "kbq-cleaner", ["kbqCleaner"], {}, {}, never, never, false, never>;
 }

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

@@ -36,7 +36,6 @@ export declare class KbqFormField extends KbqFormFieldMixinBase implements After
     canCleanerClearByEsc: boolean;
     private $unsubscribe;
     get hasHint(): boolean;
-    get hasPasswordStrengthError(): boolean;
     get hasSuffix(): boolean;
     get hasPrefix(): boolean;
     get hasCleaner(): boolean;
@@ -66,11 +65,11 @@ export declare class KbqFormField extends KbqFormFieldMixinBase implements After
     /** Throws an error if the form field's control is missing. */
     protected validateControlChild(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFormField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFormField, "kbq-form-field", ["mcFormField"], { "color": { "alias": "color"; "required": false; }; }, {}, ["control", "stepper", "cleaner", "passwordToggle", "hint", "passwordHints", "suffix", "prefix"], ["[mcPrefix]", "*", "[mcSuffix]", "kbq-cleaner", "kbq-password-toggle", "kbq-stepper", "kbq-hint, kbq-password-hint"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFormField, "kbq-form-field", ["kbqFormField"], { "color": { "alias": "color"; "required": false; }; }, {}, ["control", "stepper", "cleaner", "passwordToggle", "hint", "passwordHints", "suffix", "prefix"], ["[kbqPrefix]", "*", "[kbqSuffix]", "kbq-cleaner", "kbq-password-toggle", "kbq-stepper", "kbq-hint, kbq-password-hint"], false, never>;
 }
 export declare class KbqFormFieldWithoutBorders {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFormFieldWithoutBorders, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFormFieldWithoutBorders, "kbq-form-field[mcFormFieldWithoutBorders]", ["mcFormFieldWithoutBorders"], {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFormFieldWithoutBorders, "kbq-form-field[kbqFormFieldWithoutBorders]", ["kbqFormFieldWithoutBorders"], {}, {}, never, never, false, never>;
 }
 export declare class KbqTrim {
     private readonly noTrim;
@@ -80,5 +79,5 @@ export declare class KbqTrim {
     trim(value: any): any;
     private registerOnChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTrim, [{ attribute: "no-trim"; }, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTrim, "[mcInput], [mcTextarea]", ["KbqTrim"], {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTrim, "[kbqInput], [kbqTextarea]", ["KbqTrim"], {}, {}, never, never, false, never>;
 }

package/form-field/form-field.scss

@@ -38,8 +38,8 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     &.kbq-form-field_without-borders .kbq-form-field__container {
-        border-color: transparent;
-        box-shadow: none;
+        border-color: transparent !important;
+        box-shadow: none !important;
     }
 
     &.kbq-form-field_has-prefix {

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", ["mcHint"], { "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/form-field/password-hint.d.ts

@@ -1,4 +1,5 @@
-import { AfterContentInit, ChangeDetectorRef } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, QueryList } from '@angular/core';
+import { KbqFormField } from './form-field';
 import * as i0 from "@angular/core";
 export declare enum PasswordRules {
     Length = 0,
@@ -14,6 +15,7 @@ export declare const regExpPasswordValidator: {
     3: RegExp;
     4: RegExp;
 };
+export declare const hasPasswordStrengthError: (passwordHints: QueryList<KbqPasswordHint>) => boolean;
 export declare class KbqPasswordHint implements AfterContentInit {
     private changeDetectorRef;
     private formField;
@@ -22,6 +24,8 @@ export declare class KbqPasswordHint implements AfterContentInit {
     min: number;
     max: number;
     regex: RegExp | null;
+    customCheckRule: (value: string) => boolean;
+    viewFormField?: KbqFormField;
     hasError: boolean;
     checked: boolean;
     get icon(): string;
@@ -35,6 +39,6 @@ export declare class KbqPasswordHint implements AfterContentInit {
     private checkRegexRule;
     private checkSpecialSymbolsRegexRule;
     private isValueChanged;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordHint, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordHint, "kbq-password-hint", never, { "id": { "alias": "id"; "required": false; }; "rule": { "alias": "rule"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "regex": { "alias": "regex"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordHint, [null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordHint, "kbq-password-hint", never, { "id": { "alias": "id"; "required": false; }; "rule": { "alias": "rule"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "regex": { "alias": "regex"; "required": false; }; "customCheckRule": { "alias": "checkRule"; "required": false; }; "viewFormField": { "alias": "viewFormField"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

package/form-field/password-hint.scss

@@ -8,4 +8,10 @@ $tokens: meta.module-variables(tokens) !default;
 
 .kbq-password-hint {
     display: block;
+
+    & .kbq-icon {
+        margin-right: var(
+            --kbq-hint-size-compact-content-padding, map-get($tokens, hint-size-compact-content-padding)
+        );
+    }
 }

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

@@ -1,18 +1,24 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
-import { ElementRef, NgZone, TemplateRef, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, TemplateRef, ViewContainerRef } from '@angular/core';
 import { KbqFormFieldRef } from '@koobiq/components/core';
+import { KbqIconButton } from '@koobiq/components/icon';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import * as i0 from "@angular/core";
-export declare class KbqPasswordToggle extends KbqTooltipTrigger {
+export declare class KbqPasswordToggle extends KbqTooltipTrigger implements AfterViewInit {
     private formField;
+    private changeDetector;
+    icon: KbqIconButton;
     get content(): string | TemplateRef<any>;
     set content(content: string | TemplateRef<any>);
-    mcTooltipHidden: string | TemplateRef<any>;
+    kbqTooltipHidden: string | TemplateRef<any>;
     get hidden(): boolean;
-    get icon(): string;
-    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, formField: KbqFormFieldRef);
+    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);
+    ngAfterViewInit(): void;
     toggle(event: KeyboardEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordToggle, [null, null, null, null, null, null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordToggle, "kbq-password-toggle", ["mcPasswordToggle"], { "content": { "alias": "mcTooltipNotHidden"; "required": false; }; "mcTooltipHidden": { "alias": "mcTooltipHidden"; "required": false; }; }, {}, never, never, false, never>;
+    private updateState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordToggle, [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/prefix.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class KbqPrefix {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPrefix, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPrefix, "[mcPrefix]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPrefix, "[kbqPrefix]", never, {}, {}, never, never, false, never>;
 }

package/form-field/suffix.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class KbqSuffix {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSuffix, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSuffix, "[mcSuffix]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSuffix, "[kbqSuffix]", never, {}, {}, never, never, false, never>;
 }

package/form-field/validate.directive.d.ts

@@ -29,5 +29,5 @@ export declare class KbqValidateDirective implements AfterContentInit {
     setMosaicValidationForModelControl(): void;
     setMosaicValidationForFormControl(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqValidateDirective, [null, { optional: true; self: true; }, { optional: true; self: true; }, { optional: true; }, { optional: true; }, { optional: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqValidateDirective, "        input[mcInput],        input[mcInputPassword],        input[mcTimepicker],        input[mcDatepicker],        textarea[mcTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", ["KbqValidate"], {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqValidateDirective, "        input[kbqInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", ["KbqValidate"], {}, {}, never, never, false, never>;
 }

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);
+        }
+    }
+}