Koobiq

KbqFullScreenDropzoneService extends KbqDrop

Service that provides full-screen drag-and-drop overlay functionality.

Properties

Name	Description
disabled: ModelSignal	Controls whether drag-and-drop functionality is enabled. When true, all drag events are filtered out and ignored.
filesDropped: OutputEmitterRef	Emits an event when file items were dropped.

Name

Description

disabled: ModelSignal

Controls whether drag-and-drop functionality is enabled. When true, all drag events are filtered out and ignored.

filesDropped: OutputEmitterRef

Emits an event when file items were dropped.

Methods

close

Closes and disposes the overlay.

init

Initializes drag-and-drop event listeners on the document body.

open

Opens the dropzone overlay.

stop

Stops all drag-and-drop event listeners and cleans up subscriptions.

KbqFileUploadContext

File upload context.

Selector: [kbqFileUploadContext]

Exported as: kbqFileUploadContext

Properties

Name	Description
@Input() accept: InputSignal	File type specifiers
@Input() @Output('disabledChange') disabled: ModelSignal	Whether file input selectable or not
@Input() id: InputSignal	id for file input
@Input() multiple: InputSignalWithTransform	Selection mode for file input
@Input() onlyDirectory: InputSignal	Reflects webkitdirectory attribute, which indicates that elements can only select directories instead of files.

Name

Description

@Input()

accept: InputSignal

File type specifiers

@Input()

@Output('disabledChange')

disabled: ModelSignal

Whether file input selectable or not

@Input()

id: InputSignal

id for file input

@Input()

multiple: InputSignalWithTransform

Selection mode for file input

@Input()

onlyDirectory: InputSignal

Reflects webkitdirectory attribute, which indicates that elements can only select directories instead of files.

KbqDrop

Properties

Name	Description
@Input() @Output('disabledChange') disabled: ModelSignal	Controls whether drag-and-drop functionality is enabled. When true, all drag events are filtered out and ignored.
@Output('filesDropped') filesDropped: OutputEmitterRef	Emits an event when file items were dropped.

Name

Description

@Input()

@Output('disabledChange')

disabled: ModelSignal

Controls whether drag-and-drop functionality is enabled. When true, all drag events are filtered out and ignored.

@Output('filesDropped')

filesDropped: OutputEmitterRef

Emits an event when file items were dropped.

KbqFileLoader

Loader component to trigger Browser API.

Selector: [kbqFileLoader]

Exported as: kbqFileLoader

Properties

Name	Description
@Input() accept: InputSignal	File type specifiers
@Input() disabled: InputSignal	Whether file input selectable or not
@Input() for: InputSignal	id for file input
@Input() multiple: InputSignal	Selection mode for file input
@Input() onlyDirectory: InputSignal	Reflects webkitdirectory attribute, which indicates that elements can only select directories instead of files.
@Output('fileChange') fileChange: OutputEmitterRef	Event fires when file selected in file-picker.
input: Signal>	Underlying file input element

Name

Description

@Input()

accept: InputSignal

File type specifiers

@Input()

disabled: InputSignal

Whether file input selectable or not

@Input()

for: InputSignal

id for file input

@Input()

multiple: InputSignal

Selection mode for file input

@Input()

onlyDirectory: InputSignal

Reflects webkitdirectory attribute, which indicates that elements can only select directories instead of files.

@Output('fileChange')

fileChange: OutputEmitterRef

Event fires when file selected in file-picker.

input: Signal>

Underlying file input element

KbqSingleFileUploadComponent

Selector: kbq-single-file-upload,kbq-file-upload:not([multiple])

Properties

Name	Description
@Input() accept: string[]	Array of file type specifiers
@Input() allowed: InputSignal<"mixed" \| "folder" \| "file">	Determines which kind of items the upload component can accept.
@Input() errorStateMatcher: ErrorStateMatcher	An object used to control the error state of the component.
@Input() file: KbqFileItem
@Input() fullScreenDropZone: InputSignal>	Controls whether to display fullscreen dropzone. Provide configuration object to enable, or undefined to disable.
@Input() inputId: string
@Input() localeConfig: InputSignal>	Optional configuration to override default labels with localized text.
@Input() progressMode: ProgressSpinnerMode	A value responsible for progress spinner type. Loading logic depends on selected mode
@Input() showFileSize: boolean	Controls whether to display the file size information.
@Output('fileQueueChange') fileChange: EventEmitter	Emits an event containing updated file. public output will be renamed to fileChange in next major release (#DS-3700)
errorState: boolean	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.
@Input() Deprecated customValidation: KbqFileValidatorFn[]
@Input() Deprecated errors: string[]

Name

Description

@Input()

accept: string[]

Array of file type specifiers

@Input()

allowed: InputSignal<"mixed" | "folder" | "file">

Determines which kind of items the upload component can accept.

@Input()

errorStateMatcher: ErrorStateMatcher

An object used to control the error state of the component.

@Input()

file: KbqFileItem

@Input()

fullScreenDropZone: InputSignal>

Controls whether to display fullscreen dropzone. Provide configuration object to enable, or undefined to disable.

@Input()

inputId: string

@Input()

localeConfig: InputSignal>

Optional configuration to override default labels with localized text.

@Input()

progressMode: ProgressSpinnerMode

A value responsible for progress spinner type. Loading logic depends on selected mode

@Input()

showFileSize: boolean

Controls whether to display the file size information.

@Output('fileQueueChange')

fileChange: EventEmitter

Emits an event containing updated file. public output will be renamed to fileChange in next major release (#DS-3700)

errorState: boolean

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.

@Input()

Deprecated

customValidation: KbqFileValidatorFn[]

@Input()

Deprecated

errors: string[]

Methods

buildConfig

Merges base configuration with locale-specific overrides.

KbqFileDropDirective

Selector: [kbqFileDrop]

Exported as: kbqFileDrop

Properties

Name	Description
disabled: ModelSignal	Controls whether drag-and-drop functionality is enabled. When true, all drag events are filtered out and ignored.
dragover: WritableSignal	Flag that controls css-class modifications on drag events.
filesDropped: OutputEmitterRef	Emits an event when file items were dropped.

Name

Description

disabled: ModelSignal

Controls whether drag-and-drop functionality is enabled. When true, all drag events are filtered out and ignored.

dragover: WritableSignal

Flag that controls css-class modifications on drag events.

filesDropped: OutputEmitterRef

Emits an event when file items were dropped.

Methods

onDragEnter

KbqMultipleFileUploadComponent

Selector: kbq-multiple-file-upload,kbq-file-upload[multiple]

Properties

Name	Description
@Input() accept: string[]	Array of file type specifiers
@Input() allowed: InputSignal<"mixed" \| "folder" \| "file">	Determines which kind of items the upload component can accept.
@Input() errorStateMatcher: ErrorStateMatcher	An object used to control the error state of the component.
@Input() files: KbqFileItem[]
@Input() fullScreenDropZone: InputSignal>	Controls whether to display fullscreen dropzone. Provide configuration object to enable, or undefined to disable.
@Input() inputId: string	custom ID for the file input element.
@Input() localeConfig: InputSignal>	Optional configuration to override default labels with localized text.
@Input() progressMode: ProgressSpinnerMode	A value responsible for progress spinner type. Loading logic depends on selected mode
@Input() size: "compact" \| "default"
@Output('fileRemoved') fileRemoved: EventEmitter<[KbqFileItem, number]>	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.
@Output('filesAdded') filesAdded: EventEmitter	Emits an event containing a chunk of files added to the file list. Useful when handling added files, skipping filtering file list.
@Output('fileQueueChanged') filesChange: EventEmitter	Emits an event containing updated file list. public output will be renamed to filesChange in next major release (#DS-3700)
customFileIcon: TemplateRef	File Icon Template
errorState: boolean	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.
fileLoader: KbqFileLoader
@Input() Deprecated customValidation: KbqFileValidatorFn[]
@Input() Deprecated errors: string[]
Deprecated hasErrors: boolean

Name

Description

@Input()

accept: string[]

Array of file type specifiers

@Input()

allowed: InputSignal<"mixed" | "folder" | "file">

Determines which kind of items the upload component can accept.

@Input()

errorStateMatcher: ErrorStateMatcher

An object used to control the error state of the component.

@Input()

files: KbqFileItem[]

@Input()

fullScreenDropZone: InputSignal>

Controls whether to display fullscreen dropzone. Provide configuration object to enable, or undefined to disable.

@Input()

inputId: string

custom ID for the file input element.

@Input()

localeConfig: InputSignal>

Optional configuration to override default labels with localized text.

@Input()

progressMode: ProgressSpinnerMode

A value responsible for progress spinner type. Loading logic depends on selected mode

@Input()

size: "compact" | "default"

@Output('fileRemoved')

fileRemoved: EventEmitter<[KbqFileItem, number]>

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.

@Output('filesAdded')

filesAdded: EventEmitter

Emits an event containing a chunk of files added to the file list. Useful when handling added files, skipping filtering file list.

@Output('fileQueueChanged')

filesChange: EventEmitter

Emits an event containing updated file list. public output will be renamed to filesChange in next major release (#DS-3700)

customFileIcon: TemplateRef

File Icon Template

errorState: boolean

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.

fileLoader: KbqFileLoader

@Input()

Deprecated

customValidation: KbqFileValidatorFn[]

@Input()

Deprecated

errors: string[]

Deprecated

hasErrors: boolean

Methods

buildConfig

Merges base configuration with locale-specific overrides.

KbqFileList

Responsible for list update (add/remove)

Selector: [kbqFileList]

Exported as: kbqFileList

Properties

Name	Description
@Input() @Output('listChange') list: ModelSignal	Current list of items.
@Output('itemRemoved') itemRemoved: OutputEmitterRef<[T, number]>	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.
@Output('itemsAdded') itemsAdded: OutputEmitterRef	Emits array of items that were added to the list.

Name

Description

@Input()

@Output('listChange')

list: ModelSignal

Current list of items.

@Output('itemRemoved')

itemRemoved: OutputEmitterRef<[T, number]>

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.

@Output('itemsAdded')

itemsAdded: OutputEmitterRef

Emits array of items that were added to the list.

Methods

add

Adds a single item to the list and emits event

addArray

Adds multiple items to the list and emits event

remove

Removes the first occurrence of the specified item. Returns removed items and emits event.

removeAt

Removes item at specified index. Returns removed items and emits event.

KbqLocalDropzone extends KbqDrop

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.

Selector: [kbqLocalDropzone]

Exported as: kbqLocalDropzone

Properties

Name	Description
@Input('kbqConnectedTo') connectedTo: InputSignal	File upload component to connect dropped files to
disabled: ModelSignal	Controls whether drag-and-drop functionality is enabled. When true, all drag events are filtered out and ignored.
filesDropped: OutputEmitterRef	Emits an event when file items were dropped.

Name

Description

@Input('kbqConnectedTo')

connectedTo: InputSignal

File upload component to connect dropped files to

disabled: ModelSignal

Controls whether drag-and-drop functionality is enabled. When true, all drag events are filtered out and ignored.

filesDropped: OutputEmitterRef

Emits an event when file items were dropped.

Methods

close

Closes and disposes the overlay.

createOverlay

Creates an overlay positioned and sized to match the host element.

init

Initializes drag-and-drop event listeners on the overlay element. Handles dragover, dragleave, and drop events to manage overlay state and file drops.

open

Opens the dropzone overlay positioned over the host element.

KbqFileUploadEmptyState

Component that displays an empty state for file upload areas.

Selector: kbq-file-upload-empty-state

Properties

Name	Description
@Input() caption: InputSignal>	Caption text or template to display below the title
@Input() title: InputSignal	Title text to display below the upload icon
alignTop: boolean
errorColor: boolean
icon: KbqEmptyStateIcon
size: KbqDefaultSizes

Name

Description

@Input()

caption: InputSignal>

Caption text or template to display below the title

@Input()

title: InputSignal

Title text to display below the upload icon

alignTop: boolean

errorColor: boolean

icon: KbqEmptyStateIcon

size: KbqDefaultSizes

KbqDropzoneContent

Selector: kbq-dropzone-content

KbqFile

Properties

Name	Description
fullPath: string
lastModified: number	[MDN Reference](https://developer.mozilla.org/docs/Web/API/File/lastModified)
name: string	[MDN Reference](https://developer.mozilla.org/docs/Web/API/File/name)
size: number	[MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/size)
type: string	[MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/type)
webkitRelativePath: string	[MDN Reference](https://developer.mozilla.org/docs/Web/API/File/webkitRelativePath)

Name

Description

fullPath: string

lastModified: number

[MDN Reference](https://developer.mozilla.org/docs/Web/API/File/lastModified)

name: string

[MDN Reference](https://developer.mozilla.org/docs/Web/API/File/name)

size: number

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/size)

type: string

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/type)

webkitRelativePath: string

[MDN Reference](https://developer.mozilla.org/docs/Web/API/File/webkitRelativePath)

Methods

arrayBuffer

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/arrayBuffer)

bytes

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/bytes)

slice

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/slice)

stream

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/stream)

text

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/text)

KbqFileItem

Properties

Name	Description
file: File
hasError: boolean
loading: BehaviorSubject
progress: BehaviorSubject

Name

Description

file: File

hasError: boolean

loading: BehaviorSubject

progress: BehaviorSubject

KbqInputFileMultipleLabel

Properties

Name	Description
browseLink: string
browseLinkFolder: string
browseLinkFolderMixed: string
captionText: string
captionTextForCompactSize: string
captionTextOnlyFolder: string
captionTextWhenSelected: string
captionTextWithFolder: string
title: string

Name

Description

browseLink: string

browseLinkFolder: string

browseLinkFolderMixed: string

captionText: string

captionTextForCompactSize: string

captionTextOnlyFolder: string

captionTextWhenSelected: string

captionTextWithFolder: string

title: string

KbqDropzoneData

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

KbqFileUploadAllowedTypeValues

Allowed upload modes for the upload component.

type KbqFileUploadAllowedTypeValues = KbqEnumValues<KbqFileUploadAllowedType>;

KbqFileValidatorFn

Deprecated

type KbqFileValidatorFn = (file: File) => string | null;

KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION

const KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqBaseFileUploadLocaleConfig;

KBQ_DROPZONE_DATA

Injection token that can be used to access the data that was passed in to a modal.

const KBQ_DROPZONE_DATA: InjectionToken<Partial<{ caption: string; size: KbqDefaultSizes; title: string; autoCapture: boolean; }>>;

KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION

const KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqMultipleFileUploadLocaleConfig;

KBQ_FILE_UPLOAD_CONFIGURATION

const KBQ_FILE_UPLOAD_CONFIGURATION: InjectionToken<KbqBaseFileUploadLocaleConfig | KbqMultipleFileUploadLocaleConfig>;

isCorrectExtension

Deprecated

const isCorrectExtension: (file: File, accept?: string[]) => boolean;