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

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.KbqDataSizeModule, typeof i14.KbqLinkModule], [typeof i2.KbqSingleFileUploadComponent, typeof i3.KbqMultipleFileUploadComponent, typeof i1.KbqFileDropDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqFileUploadModule>;
 }

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

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

@@ -1,41 +1,68 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
 import { CanDisable, KbqLocaleService } from '@koobiq/components/core';
+import { Subscription } from 'rxjs';
+import { ProgressSpinnerMode } from '@koobiq/components/progress-spinner';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
 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 {
-    private focusMonitor;
+export declare class KbqSingleFileUploadComponent implements AfterViewInit, OnDestroy, KbqInputFile, CanDisable, ControlValueAccessor {
     private cdr;
     private renderer;
     readonly configuration: KbqInputFileLabel;
     private localeService?;
-    accept: string[];
+    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[];
     inputId: string;
+    /**
+     * Alternative for FormControl's validation
+     */
     customValidation?: KbqFileValidatorFn[];
-    fileQueueChanged: EventEmitter<KbqFileItem | null>;
+    private _file;
+    get file(): KbqFileItem | null;
+    set file(currentFile: KbqFileItem | null);
+    fileQueueChange: EventEmitter<KbqFileItem | null>;
     input: ElementRef<HTMLInputElement>;
-    hasFocus: boolean;
     config: KbqInputFileLabel;
     separatedCaptionText: string[];
-    private focusMonitorSubscription;
+    statusChangeSubscription?: Subscription;
+    /** cvaOnChange function registered via registerOnChange (ControlValueAccessor). */
+    cvaOnChange: (_: KbqFileItem | null) => void;
+    /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
+    onTouched: () => void;
     get acceptedFiles(): string;
-    constructor(focusMonitor: FocusMonitor, cdr: ChangeDetectorRef, renderer: Renderer2, configuration: KbqInputFileLabel, localeService?: KbqLocaleService | undefined);
+    constructor(cdr: ChangeDetectorRef, renderer: Renderer2, configuration: KbqInputFileLabel, localeService?: KbqLocaleService | undefined, ngControl?: NgControl | undefined);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    /** Implemented as part of ControlValueAccessor.
+     * @docs-private */
+    writeValue(file: File | 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;
     deleteItem(event?: MouseEvent): void;
     onFileDropped(files: FileList | KbqFile[]): void;
-    onFocus(focusState: boolean): void;
     private updateLocaleParams;
     private mapToFileItem;
     private validateFile;
-    private isCorrectExtension;
     private initDefaultParams;
     private getCaptionText;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSingleFileUploadComponent, [null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload", never, { "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "files": { "alias": "files"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; }, { "fileQueueChanged": "fileQueueChanged"; }, never, ["[hint]", "[kbq-icon]"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSingleFileUploadComponent, [null, null, { optional: true; }, { optional: true; }, { optional: true; self: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload,kbq-file-upload:not([multiple])", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "file": { "alias": "file"; "required": false; }; }, { "fileQueueChange": "fileQueueChange"; }, never, ["[hint]", "[kbq-icon]"], false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "17.0.0-beta.2",
+    "version": "17.0.0-rc.2",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -19,13 +19,13 @@
     "peerDependencies": {
         "@angular/cdk": "^17.2.0",
         "@angular/forms": "^17.2.0",
-        "@koobiq/cdk": "^17.0.0-beta.2",
-        "@koobiq/angular-moment-adapter": "^17.0.0-beta.2",
-        "@koobiq/angular-luxon-adapter": "^17.0.0-beta.2",
+        "@koobiq/cdk": "^17.0.0-rc.2",
+        "@koobiq/angular-moment-adapter": "^17.0.0-rc.2",
+        "@koobiq/angular-luxon-adapter": "^17.0.0-rc.2",
         "@koobiq/date-formatter": "^3.0.2",
         "@koobiq/icons": "^7.1.0",
-        "@koobiq/tokens-builder": "3.0.0-beta.31",
-        "@koobiq/design-tokens": "3.0.0-beta.31",
+        "@koobiq/tokens-builder": "3.0.0-beta.32",
+        "@koobiq/design-tokens": "3.0.0-beta.32",
         "marked": "^4.0.18",
         "overlayscrollbars": "^2.2.0",
         "ngx-highlightjs": "^10.0.0"
@@ -64,18 +64,18 @@
             "esm": "./esm2022/alert/koobiq-components-alert.mjs",
             "default": "./fesm2022/koobiq-components-alert.mjs"
         },
-        "./badge": {
-            "types": "./badge/index.d.ts",
-            "esm2022": "./esm2022/badge/koobiq-components-badge.mjs",
-            "esm": "./esm2022/badge/koobiq-components-badge.mjs",
-            "default": "./fesm2022/koobiq-components-badge.mjs"
-        },
         "./autocomplete": {
             "types": "./autocomplete/index.d.ts",
             "esm2022": "./esm2022/autocomplete/koobiq-components-autocomplete.mjs",
             "esm": "./esm2022/autocomplete/koobiq-components-autocomplete.mjs",
             "default": "./fesm2022/koobiq-components-autocomplete.mjs"
         },
+        "./badge": {
+            "types": "./badge/index.d.ts",
+            "esm2022": "./esm2022/badge/koobiq-components-badge.mjs",
+            "esm": "./esm2022/badge/koobiq-components-badge.mjs",
+            "default": "./fesm2022/koobiq-components-badge.mjs"
+        },
         "./button": {
             "types": "./button/index.d.ts",
             "esm2022": "./esm2022/button/koobiq-components-button.mjs",
@@ -335,6 +335,7 @@
             "default": "./fesm2022/koobiq-components-tree-select.mjs"
         }
     },
+    "schematics": "./schematics/collection.json",
     "module": "fesm2022/koobiq-components.mjs",
     "typings": "index.d.ts",
     "sideEffects": false