@koobiq/components 17.0.0-beta.2 → 17.0.0-rc.10

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

@@ -2,81 +2,107 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
-
-@use '../core/styles/tokens';
-
-$tokens: meta.module-variables(tokens) !default;
-
-/* stylelint-disable no-descending-specificity */
-@mixin kbq-file-upload-text-color($states) {
-    &,
-    .kbq-icon,
-    .kbq-link {
-        color: map.get($states, border);
-    }
-}
-
-@mixin kbq-file-upload-color($states) {
-    background-color: map.get($states, background);
-    border-color: map.get($states, border) !important;
-}
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-file-upload-theme($theme) {
-    $file-upload: map.get(map.get($theme, components), file-upload);
-
-    $single: map.get($file-upload, single);
-    $single-states: map.get($single, states);
-
-    $multiple: map.get($file-upload, multiple);
-    $multiple-states: map.get($multiple, states);
+    $file-upload: map.get($theme, components, file-upload);
 
     .kbq-file-upload {
-        .kbq-focused, .kbq-link.kbq-focused {
-            border: 2px solid map.get(map.get($single, states), focused);
+        .kbq-focused,
+        .kbq-link.kbq-focused {
+            border: 2px solid
+                kbq-css-variable(file-upload-single-states-focused, map.get($file-upload, single, states, focused));
         }
     }
 
     .kbq-single-file-upload {
         .kbq-file-upload {
-            @include kbq-file-upload-color(map.get($single, default));
+            background-color: kbq-css-variable(
+                file-upload-single-default-background,
+                map.get($file-upload, single, default, background)
+            );
+            border-color: kbq-css-variable(
+                file-upload-single-default-border,
+                map.get($file-upload, single, default, border)
+            ) !important;
 
             &.dragover {
-                @include kbq-file-upload-color(map.get($single-states, on-drag));
+                background-color: kbq-css-variable(
+                    file-upload-single-states-on-drag-background,
+                    map.get($file-upload, single, states, on-drag, background)
+                );
+                border-color: kbq-css-variable(
+                    file-upload-single-states-on-drag-border,
+                    map.get($file-upload, single, states, on-drag, border)
+                ) !important;
             }
 
             &.kbq-error:not(.kbq-disabled) {
-                $state-error: map.get($single-states, error);
-
                 &:not(.dragover) {
-                    @include kbq-file-upload-color($state-error);
+                    background-color: kbq-css-variable(
+                        file-upload-single-states-error-background,
+                        map.get($file-upload, single, states, error, background)
+                    );
+                    border-color: kbq-css-variable(
+                        file-upload-single-states-error-border,
+                        map.get($file-upload, single, states, error, border)
+                    ) !important;
                 }
 
                 *,
                 .kbq-icon {
-                    color: map.get($state-error, text-block);
+                    color: kbq-css-variable(
+                        file-upload-single-states-error-text-block,
+                        map.get($file-upload, single, states, error, text-block)
+                    );
                 }
             }
 
             &.kbq-disabled {
-                @include kbq-file-upload-color(map.get($single-states, disabled));
-
-                @include kbq-file-upload-text-color(map.get($single-states, disabled));
+                background-color: kbq-css-variable(
+                    file-upload-single-states-disabled-background,
+                    map.get($file-upload, single, states, disabled, background)
+                );
+                border-color: kbq-css-variable(
+                    file-upload-single-states-disabled-border,
+                    map.get($file-upload, single, states, disabled, border)
+                ) !important;
+
+                &,
+                .kbq-icon,
+                .kbq-link {
+                    color: kbq-css-variable(
+                        file-upload-single-states-disabled-border,
+                        map.get($file-upload, single, states, disabled, border)
+                    );
+                }
             }
         }
     }
 
     .kbq-multiple-file-upload {
         .kbq-file-upload {
-            $default: map.get($multiple, default);
-
-            @include kbq-file-upload-color($default);
+            background-color: kbq-css-variable(
+                file-upload-multiple-default-background,
+                map.get($file-upload, multiple, default, background)
+            );
+            border-color: kbq-css-variable(
+                file-upload-multiple-default-border,
+                map.get($file-upload, multiple, default, border)
+            ) !important;
 
             .btn-upload {
-                border-top-color: map.get($default, border);
+                border-top-color: kbq-css-variable(
+                    file-upload-multiple-default-border,
+                    map.get($file-upload, multiple, default, border)
+                );
             }
 
             .kbq-file-multiple-uploaded__header {
-                border-bottom-color: map.get($default, grid-divider);
+                border-bottom-color: kbq-css-variable(
+                    file-upload-multiple-default-grid-divider,
+                    map.get($file-upload, multiple, default, grid-divider)
+                );
 
                 .kbq-file-multiple-uploaded__header-inner {
                     //color: map.get(map.get($multiple, default), border);;
@@ -84,49 +110,86 @@ $tokens: meta.module-variables(tokens) !default;
             }
 
             &.dragover {
-                @include kbq-file-upload-color(map.get($multiple-states, on-drag));
+                background-color: kbq-css-variable(
+                    file-upload-multiple-states-on-drag-background,
+                    map.get($file-upload, multiple, states, on-drag, background)
+                );
+                border-color: kbq-css-variable(
+                    file-upload-multiple-states-on-drag-border,
+                    map.get($file-upload, multiple, states, on-drag, border)
+                ) !important;
 
                 .kbq-file-multiple-uploaded__header {
-                    border-bottom-color: map.get(map.get($multiple-states, on-drag), background) !important;
+                    border-bottom-color: kbq-css-variable(
+                        file-upload-multiple-states-on-drag-background,
+                        map.get($file-upload, multiple, states, on-drag, background)
+                    ) !important;
                 }
 
                 &.selected {
                     .dropzone {
-                        border-top-color: map.get(map.get($multiple-states, on-drag), border);
+                        border-top-color: kbq-css-variable(
+                            file-upload-multiple-states-on-drag-border,
+                            map.get($file-upload, multiple, states, on-drag, border)
+                        );
                     }
                 }
             }
 
             &.kbq-disabled {
-                @include kbq-file-upload-color(map.get($multiple-states, disabled));
-
-                @include kbq-file-upload-text-color(map.get($multiple-states, disabled));
+                background-color: kbq-css-variable(
+                    file-upload-multiple-states-disabled-background,
+                    map.get($file-upload, multiple, states, disabled, background)
+                );
+                border-color: kbq-css-variable(
+                    file-upload-multiple-states-disabled-border,
+                    map.get($file-upload, multiple, states, disabled, border)
+                ) !important;
+
+                &,
+                .kbq-icon,
+                .kbq-link {
+                    color: kbq-css-variable(
+                        file-upload-multiple-states-disabled-border,
+                        map.get($file-upload, multiple, states, disabled, border)
+                    );
+                }
 
                 &.selected {
                     .dropzone {
-                        border-top-color: map.get(map.get($multiple-states, disabled), border);
+                        border-top-color: kbq-css-variable(
+                            file-upload-multiple-states-disabled-border,
+                            map.get($file-upload, multiple, states, disabled, border)
+                        );
                     }
                 }
             }
 
             &:not(.kbq-disabled) {
                 .kbq-file-upload__row.error {
-                    $state-error: map.get($multiple-states, error);
-
                     *,
                     .kbq-icon {
-                        color: map.get($state-error, text-block);
+                        color: kbq-css-variable(
+                            file-upload-multiple-states-error-text-block,
+                            map.get($file-upload, multiple, states, error, text-block)
+                        );
                     }
                 }
             }
 
             .multiple__uploaded-item {
                 & .kbq-file-upload__file .kbq-icon {
-                    color: map.get($default, left-icon)
+                    color: kbq-css-variable(
+                        file-upload-multiple-default-left-icon,
+                        map.get($file-upload, multiple, default, left-icon)
+                    );
                 }
 
                 & .kbq-file-upload__action .kbq-icon {
-                    color: map.get($default, icon-button)
+                    color: kbq-css-variable(
+                        file-upload-multiple-default-icon-button,
+                        map.get($file-upload, multiple, default, icon-button)
+                    );
                 }
             }
         }
@@ -135,54 +198,43 @@ $tokens: meta.module-variables(tokens) !default;
     .kbq-single-file-upload,
     .kbq-multiple-file-upload {
         .kbq-file-upload__hint:not(.kbq-error) {
-            $form-field-hint: map.get(map.get($theme, components), form-field-hint);
-
-            color: map.get($form-field-hint, text);
+            color: kbq-css-variable(form-field-hint-text, map.get($theme, components, form-field-hint, text));
         }
     }
 }
 
-
 @mixin kbq-file-upload-typography($config) {
     .kbq-single-file-upload {
         & .file-item__text-wrapper,
         & .dropzone__text {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, file-upload-font-single-text-block));
+            @include kbq-typography-css-variables(file-upload, single-text-block);
         }
     }
 
     .kbq-multiple-file-upload {
         .multiple__header {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, file-upload-font-multiple-title));
+            @include kbq-typography-css-variables(file-upload, multiple-title);
         }
 
         .multiple__caption {
             &,
             .kbq-link {
-                @include kbq-typography-level-to-styles(
-                    $config, map.get($tokens, file-upload-font-multiple-text-block)
-                );
+                @include kbq-typography-css-variables(file-upload, multiple-text-block);
             }
         }
 
         .kbq-file-multiple-uploaded__header {
-            @include kbq-typography-level-to-styles(
-                $config,
-                map.get($tokens, file-upload-font-multiple-grid)
-            );
+            @include kbq-typography-css-variables(file-upload, multiple-grid);
         }
 
         .multiple__uploaded-item {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, file-upload-font-multiple-grid));
+            @include kbq-typography-css-variables(file-upload, multiple-grid);
         }
 
         .kbq-file-upload {
             .kbq-list-item,
             .kbq-list-option {
-                @include kbq-typography-level-to-styles(
-                    $config,
-                    map.get($tokens, file-upload-font-multiple-grid)
-                );
+                @include kbq-typography-css-variables(file-upload, multiple-grid);
             }
         }
     }
@@ -190,8 +242,7 @@ $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));
+            @include kbq-typography-css-variables(form-field-hint, text);
         }
     }
 }
-/* stylelint-enable no-descending-specificity */

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

@@ -11,7 +11,6 @@ export interface KbqFileItem {
 }
 export interface KbqInputFile {
     disabled: boolean;
-    files: KbqFileItem[] | KbqFileItem | null;
     accept?: string[];
     onFileSelectedViaClick(event: Event): void;
     onFileDropped(files: FileList | KbqFile[]): void;
@@ -23,3 +22,4 @@ export interface KbqInputFileLabel {
 }
 export type KbqFileValidatorFn = (file: File) => string | null;
 export declare const KBQ_FILE_UPLOAD_CONFIGURATION: InjectionToken<KbqInputFileLabel>;
+export declare const isCorrectExtension: (file: File, accept?: string[]) => boolean;

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

@@ -3,16 +3,18 @@ import * as i1 from "./file-drop";
 import * as i2 from "./single-file-upload.component";
 import * as i3 from "./multiple-file-upload.component";
 import * as i4 from "@angular/common";
-import * as i5 from "@koobiq/components/tooltip";
-import * as i6 from "@koobiq/components/progress-spinner";
-import * as i7 from "@koobiq/components/icon";
-import * as i8 from "@koobiq/components/button";
-import * as i9 from "@koobiq/components/list";
-import * as i10 from "@koobiq/components/form-field";
-import * as i11 from "@koobiq/components/ellipsis-center";
-import * as i12 from "@koobiq/components/core";
+import * as i5 from "@angular/forms";
+import * as i6 from "@koobiq/components/tooltip";
+import * as i7 from "@koobiq/components/progress-spinner";
+import * as i8 from "@koobiq/components/icon";
+import * as i9 from "@koobiq/components/button";
+import * as i10 from "@koobiq/components/list";
+import * as i11 from "@koobiq/components/form-field";
+import * as i12 from "@koobiq/components/ellipsis-center";
+import * as i13 from "@koobiq/components/core";
+import * as i14 from "@koobiq/components/link";
 export declare class KbqFileUploadModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFileUploadModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqFileUploadModule, [typeof i1.KbqFileDropDirective, typeof i2.KbqSingleFileUploadComponent, typeof i3.KbqMultipleFileUploadComponent], [typeof i4.CommonModule, typeof i5.KbqToolTipModule, typeof i6.KbqProgressSpinnerModule, typeof i7.KbqIconModule, typeof i8.KbqButtonModule, typeof i9.KbqListModule, typeof i10.KbqFormFieldModule, typeof i11.KbqEllipsisCenterModule, typeof i12.KbqDataSizeModule], [typeof i2.KbqSingleFileUploadComponent, typeof i3.KbqMultipleFileUploadComponent, typeof i1.KbqFileDropDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqFileUploadModule, [typeof i1.KbqFileDropDirective, typeof i2.KbqSingleFileUploadComponent, typeof i3.KbqMultipleFileUploadComponent], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i5.ReactiveFormsModule, typeof i6.KbqToolTipModule, typeof i7.KbqProgressSpinnerModule, typeof i8.KbqIconModule, typeof i9.KbqButtonModule, typeof i10.KbqListModule, typeof i11.KbqFormFieldModule, typeof i12.KbqEllipsisCenterModule, typeof i13.KbqDataSizePipe, typeof i14.KbqLinkModule], [typeof i2.KbqSingleFileUploadComponent, typeof i3.KbqMultipleFileUploadComponent, typeof i1.KbqFileDropDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqFileUploadModule>;
 }

package/file-upload/file-upload.scss

@@ -1,12 +1,6 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-@use '../core/styles/common';
-
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-file-upload {
     box-sizing: border-box;
     display: flex;

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

@@ -1,7 +1,9 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
 import { CanDisable, KbqLocaleService } from '@koobiq/components/core';
+import { Subscription } from 'rxjs';
 import { KbqFile, KbqFileItem, KbqFileValidatorFn, KbqInputFile, KbqInputFileLabel } from './file-upload';
+import { ProgressSpinnerMode } from '@koobiq/components/progress-spinner';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
 import * as i0 from "@angular/core";
 export interface KbqInputFileMultipleLabel extends KbqInputFileLabel {
     captionTextWhenSelected: string;
@@ -13,19 +15,28 @@ export interface KbqInputFileMultipleLabel extends KbqInputFileLabel {
     [k: string | number | symbol]: unknown;
 }
 export declare const KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqInputFileMultipleLabel;
-export declare class KbqMultipleFileUploadComponent implements AfterViewInit, OnDestroy, KbqInputFile, CanDisable {
-    private focusMonitor;
+export declare class KbqMultipleFileUploadComponent implements AfterViewInit, OnDestroy, KbqInputFile, CanDisable, ControlValueAccessor {
     private cdr;
     private renderer;
     readonly configuration: KbqInputFileMultipleLabel;
     private localeService?;
+    ngControl?: NgControl | undefined;
+    /**
+     * A value responsible for progress spinner type.
+     * Loading logic depends on selected mode */
+    progressMode: ProgressSpinnerMode;
     accept?: string[];
     disabled: boolean;
     errors: string[];
-    files: KbqFileItem[];
     size: 'compact' | 'default';
     inputId: string;
+    /**
+     * Alternative for FormControl's validation
+     */
     customValidation?: KbqFileValidatorFn[];
+    private _files;
+    get files(): KbqFileItem[];
+    set files(currentFileList: KbqFileItem[]);
     fileQueueChanged: EventEmitter<KbqFileItem[]>;
     customFileIcon: TemplateRef<HTMLElement>;
     input: ElementRef<HTMLInputElement>;
@@ -38,23 +49,40 @@ export declare class KbqMultipleFileUploadComponent implements AfterViewInit, On
     separatedCaptionText: string[];
     separatedCaptionTextWhenSelected: string[];
     separatedCaptionTextForCompactSize: string[];
-    private focusMonitorSubscription;
+    statusChangeSubscription?: Subscription;
+    /** cvaOnChange function registered via registerOnChange (ControlValueAccessor). */
+    cvaOnChange: (_: KbqFileItem[]) => void;
+    /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
+    onTouched: () => void;
     get acceptedFiles(): string;
     get hasErrors(): boolean;
-    constructor(focusMonitor: FocusMonitor, cdr: ChangeDetectorRef, renderer: Renderer2, configuration: KbqInputFileMultipleLabel, localeService?: KbqLocaleService | undefined);
+    constructor(cdr: ChangeDetectorRef, renderer: Renderer2, configuration: KbqInputFileMultipleLabel, localeService?: KbqLocaleService | undefined, ngControl?: NgControl | undefined);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    /** Implemented as part of ControlValueAccessor.
+     * @docs-private */
+    writeValue(files: FileList | KbqFileItem[] | null): void;
+    /** Implemented as part of ControlValueAccessor.
+     * @docs-private */
+    registerOnChange(fn: any): void;
+    /** Implemented as part of ControlValueAccessor.
+     * @docs-private */
+    registerOnTouched(fn: any): void;
+    /**
+     * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.
+     * @param isDisabled Whether the control should be disabled.
+     * @docs-private
+     */
+    setDisabledState(isDisabled: boolean): void;
     onFileSelectedViaClick({ target }: Event): void;
     onFileDropped(files: FileList | KbqFile[]): void;
     deleteFile(index: number, event?: MouseEvent): void;
     onFileListChange(): void;
-    onFocus(focusState: boolean): void;
     private updateLocaleParams;
     private mapToFileItem;
     private validateFile;
-    private isCorrectExtension;
     private initDefaultParams;
     private getCaptionText;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMultipleFileUploadComponent, [null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqMultipleFileUploadComponent, "kbq-multiple-file-upload", never, { "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "files": { "alias": "files"; "required": false; }; "size": { "alias": "size"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; }, { "fileQueueChanged": "fileQueueChanged"; }, ["customFileIcon"], ["[hint]"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMultipleFileUploadComponent, [null, null, { optional: true; }, { optional: true; }, { optional: true; self: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqMultipleFileUploadComponent, "kbq-multiple-file-upload,kbq-file-upload[multiple]", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "size": { "alias": "size"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "files": { "alias": "files"; "required": false; }; }, { "fileQueueChanged": "fileQueueChanged"; }, ["customFileIcon"], ["[hint]"], false, never>;
 }