@koobiq/components 19.8.3 → 20.1.0

package/file-upload/index.d.ts

@@ -1 +1,577 @@
-export * from './public-api';
+import * as _koobiq_components_core from '@koobiq/components/core';
+import { KbqBaseFileUploadLocaleConfig, CanUpdateErrorState, ErrorStateMatcher, KbqEnumValues, KbqMultipleFileUploadLocaleConfig, KbqFileUploadLocaleConfig, KbqDefaultSizes } from '@koobiq/components/core';
+import * as _angular_core from '@angular/core';
+import { ElementRef, InputSignal, ChangeDetectorRef, Renderer2, DestroyRef, InjectionToken, AfterViewInit, DoCheck, TemplateRef, OnDestroy } from '@angular/core';
+import { OverlayRef } from '@angular/cdk/overlay';
+import { KbqEmptyState } from '@koobiq/components/empty-state';
+import * as i1 from '@angular/cdk/a11y';
+import { FocusOrigin } from '@angular/cdk/a11y';
+import * as i1$1 from '@angular/forms';
+import { NgControl, NgForm, FormGroupDirective, ControlValueAccessor } from '@angular/forms';
+import * as i7 from '@koobiq/components/form-field';
+import { KbqHint } from '@koobiq/components/form-field';
+import * as i3 from '@koobiq/components/progress-spinner';
+import { ProgressSpinnerMode } from '@koobiq/components/progress-spinner';
+import { Subject, BehaviorSubject } from 'rxjs';
+import * as i2 from '@koobiq/components/tooltip';
+import * as i4 from '@koobiq/components/icon';
+import * as i5 from '@koobiq/components/button';
+import * as i6 from '@koobiq/components/list';
+import * as i8 from '@koobiq/components/ellipsis-center';
+import * as i10 from '@koobiq/components/link';
+import * as i11 from '@angular/common';
+
+declare class KbqDrop {
+    /** @docs-private */
+    isSafari: boolean;
+    /**
+     * Controls whether drag-and-drop functionality is enabled.
+     * When true, all drag events are filtered out and ignored.
+     */
+    readonly disabled: _angular_core.ModelSignal<boolean>;
+    /** Emits an event when file items were dropped. */
+    readonly filesDropped: _angular_core.OutputEmitterRef<KbqFile[]>;
+    /** @docs-private */
+    protected onDrop(event: DragEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqDrop, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqDrop, never, never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "filesDropped": "filesDropped"; }, never, never, true, never>;
+}
+declare class KbqFileDropDirective extends KbqDrop {
+    /** Flag that controls css-class modifications on drag events. */
+    protected readonly dragover: _angular_core.WritableSignal<boolean>;
+    private readonly ngZone;
+    private readonly nativeElement;
+    private readonly destroyRef;
+    constructor();
+    onDragEnter(event: DragEvent): void;
+    /** @docs-private */
+    onDragOver(event: DragEvent): void;
+    /** @docs-private */
+    onDragLeave(event: DragEvent): void;
+    /** @docs-private */
+    onDrop(event: DragEvent): void;
+    private init;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqFileDropDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqFileDropDirective, "[kbqFileDrop]", ["kbqFileDrop"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * File upload context.
+ */
+declare class KbqFileUploadContext {
+    /** id for file input */
+    readonly id: _angular_core.InputSignal<string | null>;
+    /** Whether file input selectable or not */
+    readonly disabled: _angular_core.ModelSignal<boolean | null>;
+    /** Selection mode for file input */
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean | null, unknown>;
+    /** File type specifiers */
+    readonly accept: _angular_core.InputSignal<string | null>;
+    /**
+     * Reflects webkitdirectory attribute, which indicates that elements can only select directories instead of files.
+     */
+    readonly onlyDirectory: _angular_core.InputSignal<boolean | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqFileUploadContext, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqFileUploadContext, "[kbqFileUploadContext]", ["kbqFileUploadContext"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "onlyDirectory": { "alias": "onlyDirectory"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, never, never, true, never>;
+}
+/**
+ * Loader component to trigger Browser API.
+ */
+declare class KbqFileLoader {
+    private fileUploadContext;
+    /** Whether file input selectable or not */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Selection mode for file input */
+    readonly multiple: _angular_core.InputSignal<boolean | null>;
+    /** File type specifiers */
+    readonly accept: _angular_core.InputSignal<string | null>;
+    /** id for file input  */
+    readonly for: _angular_core.InputSignal<string | null>;
+    /**
+     * Reflects webkitdirectory attribute,
+     * which indicates that elements can only select directories instead of files.
+     * @link [`HTMLInputElement: webkitdirectory property`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
+     */
+    readonly onlyDirectory: _angular_core.InputSignal<boolean | null>;
+    /** Event fires when file selected in file-picker. */
+    readonly fileChange: _angular_core.OutputEmitterRef<Event>;
+    /** Underlying file input element */
+    readonly input: _angular_core.Signal<ElementRef<HTMLInputElement>>;
+    /** @docs-private */
+    protected readonly innerDisabled: _angular_core.Signal<boolean>;
+    /** @docs-private */
+    protected readonly innerMultiple: _angular_core.Signal<boolean | null>;
+    /** @docs-private */
+    protected readonly innerAccept: _angular_core.Signal<string | null>;
+    /** @docs-private */
+    protected readonly innerFor: _angular_core.Signal<string | null>;
+    /** @docs-private */
+    protected readonly innerOnlyDirectory: _angular_core.Signal<boolean | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqFileLoader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqFileLoader, "[kbqFileLoader]", ["kbqFileLoader"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "for": { "alias": "for"; "required": false; "isSignal": true; }; "onlyDirectory": { "alias": "onlyDirectory"; "required": false; "isSignal": true; }; }, { "fileChange": "fileChange"; }, never, ["*"], true, never>;
+}
+/**
+ * Responsible for list update (add/remove)
+ */
+declare class KbqFileList<T> {
+    /** Current list of items. */
+    readonly list: _angular_core.ModelSignal<T[]>;
+    /**
+     * Emits an event containing a tuple of file and file's index when removed from the file list.
+     * Useful when handle removed files, skipping filtering file list.
+     */
+    readonly itemRemoved: _angular_core.OutputEmitterRef<[T, number]>;
+    /** Emits array of items that were added to the list. */
+    readonly itemsAdded: _angular_core.OutputEmitterRef<T[]>;
+    /** Adds a single item to the list and emits event */
+    add(item: T): void;
+    /** Adds multiple items to the list and emits event */
+    addArray(items: T[]): void;
+    /** Removes the first occurrence of the specified item. Returns removed items and emits event. */
+    remove(item: T): T[];
+    /** Removes item at specified index. Returns removed items and emits event. */
+    removeAt(index: number): T[];
+    private update;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqFileList<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqFileList<any>, "[kbqFileList]", ["kbqFileList"], { "list": { "alias": "list"; "required": false; "isSignal": true; }; }, { "list": "listChange"; "itemRemoved": "itemRemoved"; "itemsAdded": "itemsAdded"; }, never, never, true, never>;
+}
+
+interface KbqFile extends File {
+    fullPath: string;
+}
+interface KbqFileItem {
+    file: File;
+    hasError?: boolean;
+    loading?: BehaviorSubject<boolean>;
+    progress?: BehaviorSubject<number>;
+}
+/** Upload modes enum. */
+declare enum KbqFileUploadAllowedType {
+    File = "file",
+    Folder = "folder",
+    Mixed = "mixed"
+}
+/** Allowed upload modes for the upload component. */
+type KbqFileUploadAllowedTypeValues = KbqEnumValues<KbqFileUploadAllowedType>;
+/** @docs-private */
+type KbqFileUploadCaptionContext = {
+    captionText: string;
+    browseLink?: string;
+    captionTextSeparator?: string;
+    browseLinkFolder?: string;
+};
+declare const KBQ_FILE_UPLOAD_CONFIGURATION: InjectionToken<KbqBaseFileUploadLocaleConfig | KbqMultipleFileUploadLocaleConfig>;
+/** @docs-private */
+declare abstract class KbqFileUploadBase<T = KbqBaseFileUploadLocaleConfig> implements CanUpdateErrorState {
+    protected abstract localeConfig: InputSignal<Partial<T> | undefined>;
+    /** Tracks whether the component is in an error state based on the control, parent form,
+     * and `errorStateMatcher`, triggering visual updates and state changes if needed. */
+    errorState: boolean;
+    /** An object used to control the error state of the component. */
+    abstract errorStateMatcher: ErrorStateMatcher;
+    /**
+     * Emits whenever the component state changes and should cause the parent
+     * form-field to update. Implemented as part of `KbqFormFieldControl`.
+     * @docs-private
+     */
+    readonly stateChanges: Subject<void>;
+    /** @docs-private */
+    protected readonly fileUploadContext: KbqFileUploadContext;
+    /** @docs-private */
+    protected readonly fileList: KbqFileList<KbqFileItem>;
+    /** @docs-private */
+    get disabled(): boolean;
+    /** @docs-private */
+    protected readonly cdr: ChangeDetectorRef;
+    /** @docs-private */
+    protected readonly renderer: Renderer2;
+    /** @docs-private */
+    protected readonly destroyRef: DestroyRef;
+    /** @docs-private */
+    protected readonly localeService: _koobiq_components_core.KbqLocaleService | null;
+    /** @docs-private */
+    protected readonly ngControl: NgControl | null;
+    /** @docs-private */
+    protected readonly parentForm: NgForm | null;
+    /** @docs-private */
+    protected readonly parentFormGroup: FormGroupDirective | null;
+    /** @docs-private */
+    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;
+    /** Merges base configuration with locale-specific overrides. */
+    protected buildConfig<T>(config: T): T;
+}
+
+interface KbqInputFileMultipleLabel extends KbqMultipleFileUploadLocaleConfig {
+    [k: string | number | symbol]: unknown;
+}
+declare const KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqMultipleFileUploadLocaleConfig;
+declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase implements AfterViewInit, ControlValueAccessor, DoCheck {
+    /**
+     * A value responsible for progress spinner type.
+     * Loading logic depends on selected mode */
+    readonly progressMode: _angular_core.InputSignal<ProgressSpinnerMode>;
+    /** Array of file type specifiers */
+    readonly accept: _angular_core.InputSignal<string[] | undefined>;
+    readonly size: _angular_core.InputSignal<"compact" | "default">;
+    /**
+     * custom ID for the file input element.
+     */
+    readonly inputId: _angular_core.InputSignal<string>;
+    /** An object used to control the error state of the component. */
+    errorStateMatcher: ErrorStateMatcher;
+    get files(): KbqFileItem[];
+    set files(currentFileList: KbqFileItem[]);
+    /**
+     * Determines which kind of items the upload component can accept.
+     * @default mixed
+     */
+    allowed: _angular_core.InputSignal<"file" | "folder" | "mixed">;
+    /**
+     * Controls whether to display fullscreen dropzone.
+     * Provide configuration object to enable, or undefined to disable.
+     */
+    fullScreenDropZone: _angular_core.InputSignal<boolean | Partial<{
+        caption: string;
+        size: _koobiq_components_core.KbqDefaultSizes;
+        title: string;
+        autoCapture: boolean;
+    }> | undefined>;
+    /** Optional configuration to override default labels with localized text.*/
+    readonly localeConfig: _angular_core.InputSignal<Partial<KbqMultipleFileUploadLocaleConfig> | undefined>;
+    /** Emits an event containing an updated file list. */
+    readonly filesChange: _angular_core.OutputEmitterRef<KbqFileItem[]>;
+    /** @deprecated Use `filesChange` instead.
+     * Will be removed in next major release (#DS-5229) */
+    readonly fileQueueChanged: _angular_core.OutputEmitterRef<KbqFileItem[]>;
+    /**
+     * Emits an event containing a chunk of files added to the file list.
+     * Useful when handling added files, skipping filtering file list.
+     */
+    readonly filesAdded: _angular_core.OutputEmitterRef<KbqFileItem[]>;
+    /**
+     * Emits an event containing a tuple of file and file's index when removed from the file list.
+     * Useful when handle removed files, skipping filtering file list.
+     */
+    readonly fileRemoved: _angular_core.OutputEmitterRef<[KbqFileItem, number]>;
+    /** File Icon Template */
+    protected readonly customFileIcon: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly fileLoader: _angular_core.Signal<KbqFileLoader | undefined>;
+    /** @docs-private */
+    protected readonly hint: _angular_core.Signal<readonly KbqHint[]>;
+    /** @docs-private */
+    hasFocus: boolean;
+    /** @docs-private */
+    readonly resolvedLocaleConfig: _angular_core.Signal<KbqMultipleFileUploadLocaleConfig>;
+    /** @docs-private */
+    protected readonly captionContext: _angular_core.Signal<KbqFileUploadCaptionContext>;
+    /** cvaOnChange function registered via registerOnChange (ControlValueAccessor).
+     * @docs-private
+     */
+    cvaOnChange: (_: KbqFileItem[]) => void;
+    /** onTouch function registered via registerOnTouch (ControlValueAccessor).
+     * @docs-private */
+    onTouched: () => void;
+    /** @docs-private */
+    get input(): ElementRef<HTMLInputElement> | undefined;
+    /** @docs-private */
+    get acceptedFiles(): string;
+    /** @docs-private */
+    get hasHint(): boolean;
+    /**
+     * Indicates an invalid state based on `errorState`,
+     * applying a CSS class in HTML for visual feedback.
+     * @docs-private
+     */
+    get invalid(): boolean;
+    /** @docs-private */
+    protected get captionTextWhenSelected(): string;
+    /** @docs-private */
+    readonly configuration: KbqMultipleFileUploadLocaleConfig | null;
+    private readonly localeId;
+    private readonly focusMonitor;
+    private readonly platformId;
+    constructor();
+    ngDoCheck(): void;
+    ngAfterViewInit(): 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;
+    /** @docs-private */
+    onFileSelectedViaClick({ target }: Event): void;
+    /** @docs-private */
+    onFileDropped(files: KbqFile[]): void;
+    /** @docs-private */
+    deleteFile(index: number, event?: MouseEvent, origin?: FocusOrigin): void;
+    private mapToFileItem;
+    private onFileAdded;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqMultipleFileUploadComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqMultipleFileUploadComponent, "kbq-multiple-file-upload,kbq-file-upload[multiple]", never, { "progressMode": { "alias": "progressMode"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "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": "filesChange"; "fileQueueChanged": "fileQueueChanged"; "filesAdded": "filesAdded"; "fileRemoved": "fileRemoved"; }, ["customFileIcon", "hint"], ["kbq-hint"], true, [{ directive: typeof KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; }; outputs: {}; }, { directive: typeof KbqFileList; inputs: {}; outputs: { "itemsAdded": "itemsAdded"; "itemRemoved": "itemRemoved"; }; }]>;
+}
+
+declare const KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqFileUploadLocaleConfig['single'];
+declare class KbqSingleFileUploadComponent extends KbqFileUploadBase implements AfterViewInit, ControlValueAccessor, DoCheck {
+    /**
+     * A value responsible for progress spinner type.
+     * Loading logic depends on selected mode */
+    readonly progressMode: _angular_core.InputSignal<ProgressSpinnerMode>;
+    /** Array of file type specifiers */
+    readonly accept: _angular_core.InputSignal<string[] | undefined>;
+    readonly inputId: _angular_core.InputSignal<string>;
+    /** An object used to control the error state of the component. */
+    errorStateMatcher: ErrorStateMatcher;
+    get file(): KbqFileItem | null;
+    set file(currentFile: KbqFileItem | null);
+    /**
+     * Controls whether to display the file size information.
+     * @default true
+     */
+    readonly showFileSize: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Determines which kind of items the upload component can accept.
+     * @default mixed
+     */
+    allowed: _angular_core.InputSignal<"file" | "folder" | "mixed">;
+    /**
+     * Controls whether to display fullscreen dropzone.
+     * Provide configuration object to enable, or undefined to disable.
+     */
+    fullScreenDropZone: _angular_core.InputSignal<boolean | Partial<{
+        caption: string;
+        size: _koobiq_components_core.KbqDefaultSizes;
+        title: string;
+        autoCapture: boolean;
+    }> | undefined>;
+    /** Optional configuration to override default labels with localized text.*/
+    readonly localeConfig: _angular_core.InputSignal<Partial<KbqBaseFileUploadLocaleConfig> | undefined>;
+    /** Emits an event containing an updated file. */
+    readonly fileChange: _angular_core.OutputEmitterRef<KbqFileItem | null>;
+    /** @deprecated Use `fileChange` instead.
+     * Will be removed in next major release (#DS-5229) */
+    readonly fileQueueChange: _angular_core.OutputEmitterRef<KbqFileItem | null>;
+    /** @docs-private */
+    protected readonly fileLoader: _angular_core.Signal<KbqFileLoader>;
+    /** @docs-private */
+    private readonly hint;
+    /** cvaOnChange function registered via registerOnChange (ControlValueAccessor).
+     * @docs-private
+     */
+    cvaOnChange: (_: KbqFileItem | null) => void;
+    /** onTouch function registered via registerOnTouch (ControlValueAccessor).
+     * @docs-private
+     */
+    onTouched: () => void;
+    /** @docs-private */
+    get input(): ElementRef<HTMLInputElement> | undefined;
+    /** @docs-private */
+    get acceptedFiles(): string;
+    /** @docs-private */
+    get hasHint(): boolean;
+    /**
+     * Indicates an invalid state based on file errors or `errorState`,
+     * applying a CSS class in HTML for visual feedback.
+     * @docs-private
+     */
+    get invalid(): boolean;
+    /** @docs-private */
+    readonly configuration: KbqBaseFileUploadLocaleConfig | null;
+    /** @docs-private */
+    protected readonly captionContext: _angular_core.Signal<KbqFileUploadCaptionContext>;
+    private readonly localeId;
+    /** @docs-private */
+    readonly resolvedLocaleConfig: _angular_core.Signal<KbqBaseFileUploadLocaleConfig>;
+    private readonly focusMonitor;
+    private readonly platformId;
+    constructor();
+    ngDoCheck(): void;
+    ngAfterViewInit(): 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;
+    /** @docs-private */
+    onFileSelectedViaClick({ target }: Event): void;
+    /** @docs-private */
+    onFileDropped(files: KbqFile[]): void;
+    /** @docs-private */
+    deleteItem(event?: MouseEvent, origin?: FocusOrigin): void;
+    private mapToFileItem;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqSingleFileUploadComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload,kbq-file-upload:not([multiple])", never, { "progressMode": { "alias": "progressMode"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "file": { "alias": "file"; "required": false; }; "showFileSize": { "alias": "showFileSize"; "required": false; "isSignal": true; }; "allowed": { "alias": "allowed"; "required": false; "isSignal": true; }; "fullScreenDropZone": { "alias": "fullScreenDropZone"; "required": false; "isSignal": true; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "fileChange": "fileChange"; "fileQueueChange": "fileQueueChange"; }, ["hint"], ["[kbq-icon]", "kbq-hint"], true, [{ directive: typeof KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; "multiple": "multiple"; }; outputs: {}; }, { directive: typeof KbqFileList; inputs: {}; outputs: {}; }]>;
+}
+
+/** Dropzone overlay content configuration. */
+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. */
+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
+ */
+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.
+ */
+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: _angular_core.ɵɵFactoryDeclaration<KbqFullScreenDropzoneService, never>;
+    static ɵprov: _angular_core.ɵɵ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.
+ */
+declare class KbqLocalDropzone extends KbqDrop {
+    /** File upload component to connect dropped files to */
+    readonly connectedTo: _angular_core.InputSignal<KbqMultipleFileUploadComponent | KbqSingleFileUploadComponent | undefined>;
+    private readonly elementRef;
+    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: _angular_core.ɵɵFactoryDeclaration<KbqLocalDropzone, never>;
+    static ɵdir: _angular_core.ɵɵ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. */
+declare class KbqFileUploadEmptyState extends KbqEmptyState {
+    /** Title text to display below the upload icon */
+    title: _angular_core.InputSignal<string | undefined>;
+    /** Caption text or template to display below the title */
+    caption: _angular_core.InputSignal<string | TemplateRef<any> | undefined>;
+    constructor();
+    /** @docs-private */
+    protected isTemplateRef(value: string | TemplateRef<any>): value is TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqFileUploadEmptyState, never>;
+    static ɵcmp: _angular_core.ɵɵ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>;
+}
+declare class KbqDropzoneContent {
+    /** @docs-private */
+    protected readonly localeService: _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: _angular_core.Signal<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqDropzoneContent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqDropzoneContent, "kbq-dropzone-content", never, {}, {}, never, never, true, [{ directive: typeof i1.CdkTrapFocus; inputs: {}; outputs: {}; }]>;
+}
+
+declare class KbqFileUploadModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqFileUploadModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqFileUploadModule, never, [typeof i1$1.FormsModule, typeof i1$1.ReactiveFormsModule, typeof i2.KbqToolTipModule, typeof i3.KbqProgressSpinnerModule, typeof i4.KbqIconModule, typeof i5.KbqButtonModule, typeof i6.KbqListModule, typeof i7.KbqFormFieldModule, typeof i8.KbqEllipsisCenterModule, typeof _koobiq_components_core.KbqDataSizePipe, typeof i10.KbqLinkModule, typeof i11.AsyncPipe, typeof i11.NgTemplateOutlet, typeof KbqFileDropDirective, typeof KbqSingleFileUploadComponent, typeof KbqMultipleFileUploadComponent], [typeof KbqSingleFileUploadComponent, typeof KbqMultipleFileUploadComponent, typeof KbqFileDropDirective]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqFileUploadModule>;
+}
+
+export { KBQ_DROPZONE_DATA, KBQ_FILE_UPLOAD_CONFIGURATION, KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION, KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION, KbqDrop, KbqDropzoneContent, KbqFileDropDirective, KbqFileList, KbqFileLoader, KbqFileUploadAllowedType, KbqFileUploadBase, KbqFileUploadContext, KbqFileUploadEmptyState, KbqFileUploadModule, KbqFullScreenDropzoneService, KbqLocalDropzone, KbqMultipleFileUploadComponent, KbqSingleFileUploadComponent, isOutsideViewport };
+export type { KbqDropzoneData, KbqFile, KbqFileItem, KbqFileUploadAllowedTypeValues, KbqFileUploadCaptionContext, KbqInputFileMultipleLabel };

package/filter-bar/_filter-bar-theme.scss

@@ -6,6 +6,92 @@
     }
 }
 
+// Shared scroll height for the select/tree overlay panels rendered outside the bar.
+// Keeps the single magic value in one place (used by every select-family pipe panel).
+@mixin kbq-filter-bar-panel-content-max-height() {
+    max-height: 404px;
+}
+
+// Themable colour surfaces of a pipe. Kept out of the layout SCSS so every colour
+// lives behind a theme hook (they still resolve through the global semantic tokens).
+@mixin kbq-filter-bar-pipe-theme() {
+    .kbq-pipe {
+        .kbq-pipe__name {
+            color: var(--kbq-foreground-contrast-secondary);
+        }
+
+        .kbq-pipe__separator {
+            color: var(--kbq-line-contrast-less);
+        }
+
+        .kbq-select:not(:hover, .kbq-active),
+        .kbq-tree-select:not(:hover, .kbq-active),
+        .kbq-button:not(:hover, .kbq-active, [disabled]) {
+            & + .kbq-pipe-button:not(:hover, .kbq-active)::after {
+                background: var(--kbq-line-contrast-less);
+            }
+        }
+
+        &.kbq-pipe_disabled {
+            .kbq-pipe__name,
+            .kbq-pipe__value {
+                color: var(--kbq-states-foreground-disabled);
+            }
+        }
+    }
+
+    .kbq-pipe.kbq-pipe_removable,
+    .kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) {
+        .kbq-button.cdk-keyboard-focused::after {
+            background: var(--kbq-states-line-focus-theme);
+        }
+
+        .kbq-button-icon.cdk-keyboard-focused::after {
+            background: var(--kbq-states-line-focus-theme);
+        }
+    }
+
+    .kbq-pipe-tooltip__name {
+        color: var(--kbq-foreground-white-secondary);
+    }
+
+    .kbq-pipe-tooltip__value {
+        color: var(--kbq-foreground-white);
+    }
+}
+
+// Themable colour surfaces of a read-only pipe.
+@mixin kbq-filter-bar-readonly-theme() {
+    .kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) {
+        & .kbq-button-icon.kbq-button_filled:not(:hover),
+        & .kbq-button.kbq-button_filled,
+        & .kbq-button.kbq-button_filled:hover {
+            background: var(--kbq-states-background-disabled);
+        }
+
+        & .kbq-pipe__name,
+        & .kbq-pipe__value {
+            color: var(--kbq-states-foreground-disabled);
+        }
+    }
+}
+
+// Themable colour surfaces of the filters list (the changed-and-saved warning dot and the
+// separator drawn between the trigger and its action button).
+@mixin kbq-filter-bar-filters-theme() {
+    .kbq-filters {
+        .kbq-button_changed-saved-filter::before {
+            border-color: var(--kbq-background-bg);
+
+            background: var(--kbq-icon-warning);
+        }
+
+        .kbq-button:not(:hover, .kbq-active) + .kbq-button_action:not(:hover, .kbq-active)::after {
+            background: var(--kbq-line-contrast-less);
+        }
+    }
+}
+
 @mixin _icon($left-icon, $right-icon) {
     .kbq-icon.kbq-empty {
         color: $left-icon;