@koobiq/components 19.1.0 → 19.3.0

package/file-upload/dropzone.d.ts

@@ -0,0 +1,147 @@
+import { OverlayRef } from '@angular/cdk/overlay';
+import { InjectionToken, OnDestroy, TemplateRef } from '@angular/core';
+import { KbqDefaultSizes } from '@koobiq/components/core';
+import { KbqEmptyState } from '@koobiq/components/empty-state';
+import { KbqMultipleFileUploadComponent } from './multiple-file-upload.component';
+import { KbqDrop } from './primitives';
+import { KbqSingleFileUploadComponent } from './single-file-upload.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/a11y";
+/** Dropzone overlay content configuration. */
+export type KbqDropzoneData = Partial<{
+    /** Optional caption text displayed below the title. */
+    caption: string;
+    /** Visual size of the dropzone empty state content. */
+    size: KbqDefaultSizes;
+    /** Title text displayed in the dropzone; falls back to localized default. */
+    title: string;
+    /** Whether focus should be automatically captured when the overlay opens. */
+    autoCapture: boolean;
+}>;
+/** Injection token that can be used to access the data that was passed in to a modal. */
+export declare const KBQ_DROPZONE_DATA: InjectionToken<Partial<{
+    /** Optional caption text displayed below the title. */
+    caption: string;
+    /** Visual size of the dropzone empty state content. */
+    size: KbqDefaultSizes;
+    /** Title text displayed in the dropzone; falls back to localized default. */
+    title: string;
+    /** Whether focus should be automatically captured when the overlay opens. */
+    autoCapture: boolean;
+}>>;
+/**
+ * Determines if a mouse event occurred outside the viewport boundaries.
+ * @docs-private
+ */
+export declare const isOutsideViewport: ({ event, innerWidth, innerHeight, xAxisMinThreshold, yAxisMinThreshold }: {
+    event: MouseEvent;
+    innerWidth: number;
+    innerHeight: number;
+    xAxisMinThreshold: number;
+    yAxisMinThreshold: number;
+}) => boolean;
+/**
+ * Service that provides full-screen drag-and-drop overlay functionality.
+ */
+export declare class KbqFullScreenDropzoneService extends KbqDrop implements OnDestroy {
+    /** Completely terminates all subscriptions when emitted */
+    private readonly dropAbort;
+    private readonly overlay;
+    private readonly window;
+    private readonly injector;
+    private readonly ngZone;
+    private overlayRef?;
+    constructor();
+    ngOnDestroy(): void;
+    /**
+     * Initializes drag-and-drop event listeners on the document body.
+     * @param config - Dropzone configuration
+     */
+    init(config?: KbqDropzoneData): void;
+    /** Stops all drag-and-drop event listeners and cleans up subscriptions. */
+    stop(): void;
+    /**
+     * Opens the dropzone overlay.
+     * @param config - Dropzone configuration
+     */
+    open(config?: KbqDropzoneData): void;
+    /** Closes and disposes the overlay. */
+    close(): void;
+    /** @docs-private */
+    onDrop(event: DragEvent): void;
+    /** @docs-private */
+    protected createOverlay(): OverlayRef;
+    /** @see https://bugs.webkit.org/show_bug.cgi?id=66547 */
+    private onDragLeave;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqFullScreenDropzoneService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqFullScreenDropzoneService>;
+}
+/**
+ * Directive that turns an element into a local drag-and-drop zone.
+ *
+ * Displays an overlay over the host element on drag enter, handles drag events,
+ * and emits dropped files to a connected file upload component.
+ */
+export declare class KbqLocalDropzone extends KbqDrop {
+    /** File upload component to connect dropped files to */
+    readonly connectedTo: import("@angular/core").InputSignal<KbqMultipleFileUploadComponent | KbqSingleFileUploadComponent | undefined>;
+    private readonly elementRef;
+    private readonly rects;
+    private readonly overlay;
+    private readonly viewContainerRef;
+    private readonly injector;
+    private readonly ngZone;
+    private readonly destroyRef;
+    private overlayRef?;
+    constructor();
+    /** Opens the dropzone overlay positioned over the host element. */
+    open(config?: KbqDropzoneData): void;
+    /** Closes and disposes the overlay. */
+    close(): void;
+    /** @docs-private */
+    onDrop(event: DragEvent): void;
+    /**
+     * Initializes drag-and-drop event listeners on the overlay element.
+     * Handles dragover, dragleave, and drop events to manage overlay state and file drops.
+     */
+    protected init(): void;
+    /** Creates an overlay positioned and sized to match the host element. */
+    protected createOverlay(): OverlayRef;
+    private onDragLeave;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLocalDropzone, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLocalDropzone, "[kbqLocalDropzone]", ["kbqLocalDropzone"], { "connectedTo": { "alias": "kbqConnectedTo"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Component that displays an empty state for file upload areas. */
+export declare class KbqFileUploadEmptyState extends KbqEmptyState {
+    /** Title text to display below the upload icon */
+    title: import("@angular/core").InputSignal<string | undefined>;
+    /** Caption text or template to display below the title */
+    caption: import("@angular/core").InputSignal<string | TemplateRef<any> | undefined>;
+    constructor();
+    /** @docs-private */
+    protected isTemplateRef(value: string | TemplateRef<any>): value is TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqFileUploadEmptyState, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFileUploadEmptyState, "kbq-file-upload-empty-state", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export declare class KbqDropzoneContent {
+    /** @docs-private */
+    protected readonly localeService: import("@koobiq/components/core").KbqLocaleService | null;
+    /** @docs-private */
+    protected readonly config: Partial<{
+        /** Optional caption text displayed below the title. */
+        caption: string;
+        /** Visual size of the dropzone empty state content. */
+        size: KbqDefaultSizes;
+        /** Title text displayed in the dropzone; falls back to localized default. */
+        title: string;
+        /** Whether focus should be automatically captured when the overlay opens. */
+        autoCapture: boolean;
+    }> | null;
+    private readonly trapFocus;
+    private readonly localeId;
+    constructor();
+    /** @docs-private */
+    protected readonly title: import("@angular/core").Signal<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDropzoneContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDropzoneContent, "kbq-dropzone-content", never, {}, {}, never, never, true, [{ directive: typeof i1.CdkTrapFocus; inputs: {}; outputs: {}; }]>;
+}

package/file-upload/dropzone.scss

@@ -0,0 +1,57 @@
+.kbq-dropzone-overlay {
+    --kbq-dropzone-padding: var(--kbq-size-s);
+    --kbq-dropzone-overlay-background: var(--kbq-background-overlay-theme);
+    --kbq-dropzone-component-background: var(--kbq-background-overlay-theme);
+    --kbq-dropzone-border-color: var(--kbq-line-theme-fade);
+
+    padding: var(--kbq-dropzone-padding);
+    background-color: var(--kbq-dropzone-overlay-background);
+
+    opacity: 0;
+    transition: opacity 100ms ease-in-out;
+
+    &.kbq-dropzone-overlay__attached {
+        opacity: 1;
+    }
+
+    .kbq-dropzone-content {
+        display: flex;
+        width: 100%;
+
+        align-items: center;
+        justify-content: center;
+
+        border-radius: var(--kbq-size-border-radius);
+        border: var(--kbq-size-border-width) dashed var(--kbq-dropzone-border-color);
+        background-color: var(--kbq-dropzone-component-background);
+
+        outline: none;
+    }
+}
+
+.kbq-fullscreen-dropzone {
+    --kbq-dropzone-component-background: transparent;
+}
+
+.kbq-local-dropzone {
+    --kbq-dropzone-overlay-background: transparent;
+
+    .kbq-empty-state.kbq-multiple-file-upload__empty-state {
+        --kbq-empty-state-size-compact-padding-top: 0;
+        --kbq-empty-state-size-compact-padding-horizontal: 0;
+        --kbq-empty-state-size-compact-padding-bottom: 0;
+
+        --kbq-empty-state-size-normal-padding-top: 0;
+        --kbq-empty-state-size-normal-padding-horizontal: 0;
+        --kbq-empty-state-size-normal-padding-bottom: 0;
+
+        --kbq-empty-state-size-big-padding-top: 0;
+        --kbq-empty-state-size-big-padding-horizontal: 0;
+        --kbq-empty-state-size-big-padding-bottom: 0;
+    }
+}
+
+.kbq-empty-state.kbq-multiple-file-upload__empty-state {
+    --kbq-empty-state-size-normal-image-margin-bottom: var(--kbq-size-m);
+    --kbq-empty-state-size-normal-title-margin-bottom: var(--kbq-size-xs);
+}

package/file-upload/file-upload-tokens.scss

@@ -1,47 +1,51 @@
 :where(.kbq-file-upload) {
+    --kbq-file-upload-size-dropzone-content-gap-horizontal: var(--kbq-size-s);
     --kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
 }
 
 :where(.kbq-single-file-upload) {
+    --kbq-form-field-hint-size-margin-top: var(--kbq-size-xs);
+    --kbq-form-field-hint-size-gap: var(--kbq-size-xxs);
     --kbq-file-upload-size-single-container-border-radius: var(--kbq-size-s);
     --kbq-file-upload-size-single-container-border-width: 1px;
     --kbq-file-upload-size-single-container-content-gap-horizontal: var(--kbq-size-s);
     --kbq-file-upload-size-single-container-padding-vertical: var(--kbq-size-m);
-    --kbq-file-upload-size-single-container-padding-horizontal: var(--kbq-size-m);
+    --kbq-file-upload-size-single-container-padding-horizontal: var(--kbq-size-l);
     --kbq-file-upload-size-single-text-block-padding-vertical: var(--kbq-size-3xs);
     --kbq-file-upload-size-single-text-block-content-gap-horizontal: var(--kbq-size-xxs);
-    --kbq-file-upload-single-min-height: var(--kbq-size-5xl);
+    --kbq-file-upload-single-min-height: 44px;
     /* THEME TOKENS */
     --kbq-file-upload-single-default-container-border: var(--kbq-line-contrast-fade);
     --kbq-file-upload-single-default-container-background: var(--kbq-background-bg);
-    --kbq-file-upload-single-default-upload-icon-color: var(--kbq-icon-contrast-fade);
+    --kbq-file-upload-single-default-dropzone-icon-color: var(--kbq-icon-contrast-fade);
     --kbq-file-upload-single-default-left-icon-color: var(--kbq-icon-contrast-fade);
     --kbq-file-upload-single-default-text-block-color: var(--kbq-foreground-contrast);
-    --kbq-file-upload-single-default-icon-button-color: var(--kbq-icon-contrast);
     --kbq-file-upload-single-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);
     --kbq-file-upload-single-states-on-drag-container-border: var(--kbq-line-theme-fade);
     --kbq-file-upload-single-states-on-drag-container-background: var(--kbq-background-theme-fade);
-    --kbq-file-upload-single-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);
+    --kbq-file-upload-single-states-on-drag-dropzone-icon-color: var(--kbq-icon-contrast-fade);
     --kbq-file-upload-single-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);
     --kbq-file-upload-single-states-on-drag-text-block-color: var(--kbq-foreground-contrast);
     --kbq-file-upload-single-states-error-container-border: var(--kbq-line-error);
     --kbq-file-upload-single-states-error-container-background: var(--kbq-background-error-less);
-    --kbq-file-upload-single-states-error-upload-icon-color: var(--kbq-icon-error);
+    --kbq-file-upload-single-states-error-dropzone-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-single-states-error-left-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-single-states-error-text-block-color: var(--kbq-foreground-error);
-    --kbq-file-upload-single-states-error-icon-button-color: var(--kbq-icon-error);
     --kbq-file-upload-single-states-error-file-size-text-color: var(--kbq-foreground-error);
     --kbq-file-upload-single-states-disabled-container-border: var(--kbq-states-line-disabled);
     --kbq-file-upload-single-states-disabled-container-background: var(--kbq-states-background-disabled);
-    --kbq-file-upload-single-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);
+    --kbq-file-upload-single-states-disabled-dropzone-icon-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-single-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-file-upload-single-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-single-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);
     --kbq-file-upload-single-states-disabled-file-size-text-color: var(--kbq-states-foreground-disabled);
     --kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
 }
 
 :where(.kbq-multiple-file-upload) {
+    --kbq-form-field-hint-size-margin-top: var(--kbq-size-xs);
+    --kbq-form-field-hint-size-gap: var(--kbq-size-xxs);
+    --kbq-file-upload-size-multiple-min-height: 120px;
+    --kbq-file-upload-size-multiple-max-height: unset;
     --kbq-file-upload-size-multiple-big-container-min-height: 192px;
     --kbq-file-upload-size-multiple-big-container-min-width: 320px;
     --kbq-file-upload-size-multiple-big-container-border-radius: var(--kbq-size-s);
@@ -54,34 +58,37 @@
     --kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: var(--kbq-size-xxs);
     --kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: var(--kbq-size-s);
     --kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: var(--kbq-size-s);
-    --kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: var(--kbq-size-xxs);
+    --kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: var(--kbq-size-s);
     --kbq-file-upload-size-multiple-big-grid-cell-file-size-width: var(--kbq-size-7xl);
     /* THEME TOKENS */
     --kbq-file-upload-multiple-default-container-border: var(--kbq-line-contrast-fade);
     --kbq-file-upload-multiple-default-container-background: var(--kbq-background-bg);
-    --kbq-file-upload-multiple-default-upload-icon-color: var(--kbq-icon-contrast-fade);
+    --kbq-file-upload-multiple-default-upload-icon-color: var(--kbq-icon-contrast);
+    --kbq-file-upload-multiple-default-dropzone-icon-color: var(--kbq-icon-contrast-fade);
     --kbq-file-upload-multiple-default-left-icon-color: var(--kbq-icon-contrast-fade);
     --kbq-file-upload-multiple-default-text-block-color: var(--kbq-foreground-contrast);
-    --kbq-file-upload-multiple-default-icon-button-color: var(--kbq-icon-contrast);
     --kbq-file-upload-multiple-default-grid-divider-color: var(--kbq-line-contrast-less);
     --kbq-file-upload-multiple-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);
+
     --kbq-file-upload-multiple-states-on-drag-container-border: var(--kbq-line-theme-fade);
     --kbq-file-upload-multiple-states-on-drag-container-background: var(--kbq-background-theme-fade);
-    --kbq-file-upload-multiple-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);
+    --kbq-file-upload-multiple-states-on-drag-upload-icon-color: var(--kbq-icon-contrast);
+    --kbq-file-upload-multiple-states-on-drag-dropzone-icon-color: var(--kbq-icon-contrast-fade);
     --kbq-file-upload-multiple-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);
-    --kbq-file-upload-multiple-states-on-drag-icon-button-color: var(--kbq-icon-contrast);
     --kbq-file-upload-multiple-states-on-drag-text-block-color: var(--kbq-foreground-contrast);
     --kbq-file-upload-multiple-states-on-drag-grid-divider-color: var(--kbq-line-contrast-less);
-    --kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-background-error-less);
+
+    --kbq-file-upload-multiple-states-error-container-border: var(--kbq-line-error);
+    --kbq-file-upload-multiple-states-error-container-background: var(--kbq-background-error-less);
     --kbq-file-upload-multiple-states-error-upload-icon-color: var(--kbq-icon-error);
+    --kbq-file-upload-multiple-states-error-dropzone-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-multiple-states-error-left-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-multiple-states-error-text-block-color: var(--kbq-foreground-error);
-    --kbq-file-upload-multiple-states-error-icon-button-color: var(--kbq-icon-error);
     --kbq-file-upload-multiple-states-disabled-container-border: var(--kbq-states-line-disabled);
     --kbq-file-upload-multiple-states-disabled-container-background: var(--kbq-states-background-disabled);
     --kbq-file-upload-multiple-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);
+    --kbq-file-upload-multiple-states-disabled-dropzone-icon-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-multiple-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-file-upload-multiple-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-multiple-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);
     --kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);
     --kbq-file-upload-multiple-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
@@ -91,5 +98,5 @@
     --kbq-file-upload-multiple-compact-container-content-gap-horizontal: var(--kbq-size-s);
     --kbq-file-upload-multiple-compact-text-block-padding-vertical: var(--kbq-size-3xs);
     --kbq-file-upload-multiple-compact-container-padding-vertical: 11px;
-    --kbq-file-upload-multiple-compact-container-padding-horizontal: 11px;
+    --kbq-file-upload-multiple-compact-container-padding-horizontal: 15px;
 }

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

@@ -2,6 +2,7 @@ import { ChangeDetectorRef, DestroyRef, ElementRef, InjectionToken, InputSignal,
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { CanUpdateErrorState, ErrorStateMatcher, KbqBaseFileUploadLocaleConfig, KbqEnumValues, KbqMultipleFileUploadLocaleConfig } from '@koobiq/components/core';
 import { BehaviorSubject, Subject } from 'rxjs';
+import { KbqFullScreenDropzoneService } from './dropzone';
 import { KbqFileList, KbqFileUploadContext } from './primitives';
 export interface KbqFile extends File {
     fullPath: string;
@@ -91,6 +92,8 @@ export declare abstract class KbqFileUploadBase<T = KbqBaseFileUploadLocaleConfi
     protected readonly defaultErrorStateMatcher: ErrorStateMatcher;
     /** @docs-private */
     protected readonly elementRef: ElementRef<HTMLElement>;
+    /** @docs-private */
+    protected readonly dropzoneService: KbqFullScreenDropzoneService;
     /** implemented as part of base class. Decided not use mixinErrorState, not to overcomplicate
      * @docs-private */
     updateErrorState(): void;

package/file-upload/file-upload.scss

@@ -1,4 +1,5 @@
 @use './file-upload-theme' as theme;
+@use '../form-field/form-field';
 
 .kbq-file-upload {
     box-sizing: border-box;
@@ -6,12 +7,17 @@
     align-items: center;
     position: relative;
 
-    .kbq-file-dropzone,
     .kbq-file-item {
         display: flex;
         align-items: center;
     }
 
+    .kbq-file-dropzone {
+        display: flex;
+        align-items: baseline;
+        gap: var(--dropzone-gap, var(--kbq-file-upload-size-dropzone-content-gap-horizontal));
+    }
+
     .kbq-ellipsis-center {
         position: relative;
         display: flex;
@@ -32,9 +38,7 @@
 }
 
 .kbq-file-upload__hint {
-    .kbq-hint {
-        margin-top: var(--kbq-size-xxs);
-    }
+    @include form-field.kbq-form-field-hint-geometry();
 }
 
 @include theme.kbq-file-upload-theme();

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

@@ -40,6 +40,16 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
      * @default mixed
      */
     allowed: import("@angular/core").InputSignal<"file" | "folder" | "mixed">;
+    /**
+     * Controls whether to display fullscreen dropzone.
+     * Provide configuration object to enable, or undefined to disable.
+     */
+    fullScreenDropZone: import("@angular/core").InputSignal<boolean | Partial<{
+        caption: string;
+        size: import("@koobiq/components/core").KbqDefaultSizes;
+        title: string;
+        autoCapture: boolean;
+    }> | undefined>;
     /** Optional configuration to override default labels with localized text.*/
     readonly localeConfig: import("@angular/core").InputSignal<Partial<KbqMultipleFileUploadLocaleConfig> | undefined>;
     /** Emits an event containing updated file list.
@@ -58,7 +68,6 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
     /** File Icon Template */
     protected readonly customFileIcon: TemplateRef<HTMLElement>;
     protected readonly fileLoader: KbqFileLoader | undefined;
-    private readonly fileSizeHeaderCell;
     /** @docs-private */
     protected readonly hint: QueryList<TemplateRef<any>>;
     /** @docs-private */
@@ -90,11 +99,8 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
      * @docs-private
      */
     get invalid(): boolean;
-    /**
-     * Set maxWidth for filesize cell to enable proper ellipsis center,
-     * @docs-private
-     */
-    protected get fileSizeCellMaxWidth(): number;
+    /** @docs-private */
+    protected get captionTextWhenSelected(): string;
     /** @docs-private */
     readonly configuration: KbqMultipleFileUploadLocaleConfig | null;
     private readonly localeId;
@@ -128,5 +134,5 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
     private validateFile;
     private onFileAdded;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqMultipleFileUploadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqMultipleFileUploadComponent, "kbq-multiple-file-upload,kbq-file-upload[multiple]", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "size": { "alias": "size"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "files": { "alias": "files"; "required": false; }; "allowed": { "alias": "allowed"; "required": false; "isSignal": true; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "filesChange": "fileQueueChanged"; "filesAdded": "filesAdded"; "fileRemoved": "fileRemoved"; }, ["customFileIcon", "hint"], ["kbq-hint"], true, [{ directive: typeof i1.KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; }; outputs: {}; }, { directive: typeof i1.KbqFileList; inputs: {}; outputs: { "listChange": "filesChange"; "itemsAdded": "itemsAdded"; "itemRemoved": "itemRemoved"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqMultipleFileUploadComponent, "kbq-multiple-file-upload,kbq-file-upload[multiple]", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "size": { "alias": "size"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "files": { "alias": "files"; "required": false; }; "allowed": { "alias": "allowed"; "required": false; "isSignal": true; }; "fullScreenDropZone": { "alias": "fullScreenDropZone"; "required": false; "isSignal": true; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "filesChange": "fileQueueChanged"; "filesAdded": "filesAdded"; "fileRemoved": "fileRemoved"; }, ["customFileIcon", "hint"], ["kbq-hint"], true, [{ directive: typeof i1.KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; }; outputs: {}; }, { directive: typeof i1.KbqFileList; inputs: {}; outputs: { "listChange": "filesChange"; "itemsAdded": "itemsAdded"; "itemRemoved": "itemRemoved"; }; }]>;
 }