@koobiq/components 16.0.0-beta.8 → 17.0.0-beta.1

package/file-upload/_file-upload-theme.scss

@@ -135,7 +135,9 @@ $tokens: meta.module-variables(tokens) !default;
     .kbq-single-file-upload,
     .kbq-multiple-file-upload {
         .kbq-file-upload__hint:not(.kbq-error) {
-            //color: map-get($foreground, text-less-contrast);
+            $form-field-hint: map.get(map.get($theme, components), form-field-hint);
+
+            color: map.get($form-field-hint, text);
         }
     }
 }
@@ -184,5 +186,12 @@ $tokens: meta.module-variables(tokens) !default;
             }
         }
     }
+
+    .kbq-single-file-upload,
+    .kbq-multiple-file-upload {
+        .kbq-file-upload__hint.kbq-hint .kbq-hint__text {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-hint-font-text));
+        }
+    }
 }
 /* stylelint-enable no-descending-specificity */

package/file-upload/file-drop.d.ts

@@ -1,8 +1,9 @@
 import { EventEmitter } from '@angular/core';
+import { KbqFile } from './file-upload';
 import * as i0 from "@angular/core";
 export declare class KbqFileDropDirective {
     dragover: boolean;
-    filesDropped: EventEmitter<FileList>;
+    filesDropped: EventEmitter<FileList | KbqFile[]>;
     onDragOver(event: DragEvent): void;
     onDragLeave(event: DragEvent): void;
     onDrop(event: DragEvent): void;

package/file-upload/file-upload.d.ts

@@ -1,5 +1,8 @@
 import { InjectionToken } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
+export interface KbqFile extends File {
+    fullPath: string;
+}
 export interface KbqFileItem {
     file: File;
     hasError?: boolean;
@@ -11,7 +14,7 @@ export interface KbqInputFile {
     files: KbqFileItem[] | KbqFileItem | null;
     accept?: string[];
     onFileSelectedViaClick(event: Event): void;
-    onFileDropped(files: FileList): void;
+    onFileDropped(files: FileList | KbqFile[]): void;
 }
 export interface KbqInputFileLabel {
     captionText: string;

package/file-upload/multiple-file-upload.component.d.ts

@@ -1,7 +1,7 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
 import { CanDisable } from '@koobiq/components/core';
-import { KbqFileItem, KbqFileValidatorFn, KbqInputFile, KbqInputFileLabel } from './file-upload';
+import { KbqFile, KbqFileItem, KbqFileValidatorFn, KbqInputFile, KbqInputFileLabel } from './file-upload';
 import * as i0 from "@angular/core";
 export interface KbqInputFileMultipleLabel extends KbqInputFileLabel {
     captionTextWhenSelected: string;
@@ -40,7 +40,7 @@ export declare class KbqMultipleFileUploadComponent implements AfterViewInit, On
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     onFileSelectedViaClick({ target }: Event): void;
-    onFileDropped(files: FileList): void;
+    onFileDropped(files: FileList | KbqFile[]): void;
     deleteFile(index: number, event?: MouseEvent): void;
     onFileListChange(): void;
     onFocus(focusState: boolean): void;

package/file-upload/single-file-upload.component.d.ts

@@ -1,7 +1,7 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
 import { CanDisable } from '@koobiq/components/core';
-import { KbqFileItem, KbqFileValidatorFn, KbqInputFile, KbqInputFileLabel } from './file-upload';
+import { KbqFile, KbqFileItem, KbqFileValidatorFn, KbqInputFile, KbqInputFileLabel } from './file-upload';
 import * as i0 from "@angular/core";
 export declare const KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqInputFileLabel;
 export declare class KbqSingleFileUploadComponent implements AfterViewInit, OnDestroy, KbqInputFile, CanDisable {
@@ -25,7 +25,7 @@ export declare class KbqSingleFileUploadComponent implements AfterViewInit, OnDe
     ngOnDestroy(): void;
     onFileSelectedViaClick({ target }: Event): void;
     deleteItem(event?: MouseEvent): void;
-    onFileDropped(files: FileList): void;
+    onFileDropped(files: FileList | KbqFile[]): void;
     onFocus(focusState: boolean): void;
     private mapToFileItem;
     private validateFile;

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

@@ -12,6 +12,7 @@
     }
 
     .kbq-input,
+    .kbq-tag-input,
     .kbq-textarea {
         color: map.get($state, text);
 
@@ -75,27 +76,20 @@
         &.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);
             }
         }
         /* stylelint-enable no-descending-specificity */
     }
 
-    .kbq-form-field__hint > .kbq-hint {
-        $form-field-hint: map.get(map.get($theme, components), form-field-hint);
+    .kbq-form-field__hint {
+        & > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
+            $form-field-hint: map.get(map.get($theme, components), form-field-hint);
 
-        color: map.get($form-field-hint, text);
-    }
-
-    .kbq-password-hint {
-        $password-hint: map.get(map.get($theme, components), form-field-password-hint);
-
-        color: map.get($password-hint, text-color);
+            color: map.get($form-field-hint, text);
+        }
     }
 }
 
@@ -106,7 +100,7 @@
         @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-font-text));
     }
 
-    .kbq-form-field__hint > .kbq-hint .kbq-hint__text {
+    .kbq-form-field__hint > .kbq-hint:not(.kbq-password-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;
     }
 }
 
@@ -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/form-field.d.ts

@@ -35,6 +35,7 @@ export declare class KbqFormField extends KbqFormFieldMixinBase implements After
     hovered: boolean;
     canCleanerClearByEsc: boolean;
     private $unsubscribe;
+    get hasFocus(): boolean;
     get hasHint(): boolean;
     get hasSuffix(): boolean;
     get hasPrefix(): boolean;
@@ -48,6 +49,7 @@ export declare class KbqFormField extends KbqFormFieldMixinBase implements After
     ngAfterContentInit(): void;
     ngAfterContentChecked(): void;
     ngAfterViewInit(): void;
+    focusViaKeyboard(): void;
     clearValue($event: any): void;
     onContainerClick($event: any): void;
     onKeyDown(event: KeyboardEvent): void;

package/form-field/form-field.scss

@@ -70,6 +70,10 @@ $tokens: meta.module-variables(tokens) !default;
             );
         }
     }
+
+    & + .kbq-password-hint {
+        margin-top: var(--kbq-size-m, map.get($tokens, size-m));
+    }
 }
 
 .kbq-form-field__container {
@@ -137,7 +141,14 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: column;
     margin-top: var(--kbq-form-field-hint-size-margin-top, map.get($tokens, form-field-hint-size-margin-top));
 
-    gap: var(--kbq-form-field-hint-size-gap, map.get($tokens, form-field-hint-size-gap));
+    & .kbq-password-hint:first-child {
+        margin-top: var(--kbq-size-s, map.get($tokens, size-s));
+    }
+}
+
+.kbq-password-hint {
+    margin-top: var(--kbq-form-field-hint-size-gap, map.get($tokens, form-field-hint-size-gap));
 }
 
+
 /* stylelint-enable no-descending-specificity */

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

@@ -7,9 +7,17 @@
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-hint {
-    display: block;
+    display: flex;
 
     & .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,5 +1,6 @@
-import { AfterContentInit, ChangeDetectorRef, QueryList } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, QueryList } from '@angular/core';
 import { KbqFormField } from './form-field';
+import { KbqHint } from './hint';
 import * as i0 from "@angular/core";
 export declare enum PasswordRules {
     Length = 0,
@@ -16,7 +17,7 @@ export declare const regExpPasswordValidator: {
     4: RegExp;
 };
 export declare const hasPasswordStrengthError: (passwordHints: QueryList<KbqPasswordHint>) => boolean;
-export declare class KbqPasswordHint implements AfterContentInit {
+export declare class KbqPasswordHint extends KbqHint implements AfterContentInit {
     private changeDetectorRef;
     private formField;
     id: string;
@@ -26,19 +27,20 @@ export declare class KbqPasswordHint implements AfterContentInit {
     regex: RegExp | null;
     customCheckRule: (value: string) => boolean;
     viewFormField?: KbqFormField;
+    fillTextOff: boolean;
     hasError: boolean;
     checked: boolean;
     get icon(): string;
     private checkRule;
     private get control();
     private lastControlValue;
-    constructor(changeDetectorRef: ChangeDetectorRef, formField: any);
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, formField: any);
     ngAfterContentInit(): void;
     private checkValue;
     private checkLengthRule;
     private checkRegexRule;
     private checkSpecialSymbolsRegexRule;
     private isValueChanged;
-    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>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordHint, [null, 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; }; "fillTextOff": { "alias": "fillTextOff"; "required": false; }; }, {}, 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);
+        }
+    }
+}

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