@yuuvis/client-framework 0.6.5

package/README.md

@@ -0,0 +1,62 @@
+# @yuuvis/client-framework
+
+Component library for creating applications facing a yuuvis® MOMENTUM backend.
+
+## Intentions
+
+This library provides yuuvis developers with a collection of UI components for creating their own client applications.
+
+## Installation
+
+First you need to install the npm module:
+
+```sh
+npm install @yuuvis/client-framework --save
+```
+
+## Usage
+
+As `@yuuvis/client-framework` is build on top of `@yuuvis/client-core` (a collection of services to interact with a yuuvis® MOMENTUM backend) you need to [import and configure `@yuuvis/client-core`](https://www.npmjs.com/package/@yuuvis/client-core) first.
+
+### Add styles
+
+You can import styles in your apps root `style.scss`:
+
+```scss
+@import '@yuuvis/client-framework/styles/client-framework.scss';
+```
+
+... or set it up in your `angular.json`:
+
+```json
+{
+    "project": {
+        "architect": {
+            "build": {
+                "styles": [
+                    "node_modules/@yuuvis/client-framework/styles/client-framework.scss"
+                ]
+            }
+        }
+    }
+}
+```
+
+### Use components
+
+Once you have everything in place you can use the libraries standalone components:
+
+```ts
+@Component({
+  selector: 'my-component',
+  standalone: true,
+  imports: [CommonModule, TreeComponent],
+  template: ` <yuv-tree [tree]="folderTree" selectable (selectionChange)="nodeSelected($event)"></yuv-tree> `,
+  styles: ''
+})
+export class FolderTreeComponent {
+  nodeSelected(nodes: TreeNode[]) {
+    console.log('Selected tree nodes', nodes);
+  }
+}
+```

package/actions/README.md

@@ -0,0 +1,3 @@
+# @yuuvis/client-framework/actions
+
+Secondary entry point of `@yuuvis/client-framework`. It can be used by importing from `@yuuvis/client-framework/actions`.

package/actions/index.d.ts

@@ -0,0 +1,6 @@
+export * from './lib/actions.module';
+export * from './lib/actions.service';
+export * from './lib/actions/delete-action/delete-action';
+export * from './lib/actions/download-action/download-action';
+export * from './lib/actions.interface';
+export * from './lib/actions.icon';

package/actions/lib/actions/copy-action/copy-action.d.ts

@@ -0,0 +1,17 @@
+import { DmsObject } from '@yuuvis/client-core';
+import { Observable } from 'rxjs';
+import { AbstractContextAction, Action, ActionSupport, SelectionRange } from '../../actions.interface';
+export declare class CopyAction extends AbstractContextAction implements Action {
+    private clipboardService;
+    private translate;
+    id: string;
+    label: any;
+    description: any;
+    priority: number;
+    icon: string;
+    group: string;
+    range: SelectionRange;
+    supports: ActionSupport;
+    isExecutable(items: DmsObject[]): Observable<boolean>;
+    run(items: DmsObject[]): Observable<boolean>;
+}

package/actions/lib/actions/cut-action/cut-action.d.ts

@@ -0,0 +1,17 @@
+import { DmsObject } from '@yuuvis/client-core';
+import { Observable } from 'rxjs';
+import { AbstractContextAction, Action, ActionSupport, SelectionRange } from '../../actions.interface';
+export declare class CutAction extends AbstractContextAction implements Action {
+    private clipboardService;
+    private translate;
+    id: string;
+    label: any;
+    description: any;
+    priority: number;
+    icon: string;
+    group: string;
+    range: SelectionRange;
+    supports: ActionSupport;
+    isExecutable(items: DmsObject[]): Observable<boolean>;
+    run(items: DmsObject[]): Observable<boolean>;
+}

package/actions/lib/actions/delete-action/delete/delete.component.d.ts

@@ -0,0 +1,22 @@
+import { DmsObject } from '@yuuvis/client-core';
+import { ActionContext } from '../../../actions.interface';
+import * as i0 from "@angular/core";
+/**
+ * @ignore
+ */
+export declare class DeleteComponent {
+    #private;
+    private readonly translate;
+    errors?: {
+        status: number;
+        subject: string;
+        message: string;
+    }[];
+    deleting: boolean;
+    deleteItems: DmsObject[];
+    context: ActionContext;
+    run(): void;
+    cancel(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DeleteComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DeleteComponent, "yuv-delete", never, {}, {}, never, never, true, never>;
+}

package/actions/lib/actions/delete-action/delete-action.d.ts

@@ -0,0 +1,17 @@
+import { DmsObject } from '@yuuvis/client-core';
+import { Observable } from 'rxjs';
+import { AbstractContextAction, Action, ActionSupport, SelectionRange } from '../../actions.interface';
+export declare class DeleteAction extends AbstractContextAction implements Action {
+    private translate;
+    private overlay;
+    id: string;
+    label: any;
+    description: any;
+    priority: number;
+    icon: string;
+    group: string;
+    range: SelectionRange;
+    supports: ActionSupport;
+    isExecutable(items: DmsObject[]): Observable<boolean>;
+    run(items: DmsObject[]): Observable<boolean>;
+}

package/actions/lib/actions/download-action/download-action.d.ts

@@ -0,0 +1,17 @@
+import { DmsObject } from '@yuuvis/client-core';
+import { Observable } from 'rxjs';
+import { AbstractContextAction, Action, ActionSupport, SelectionRange } from '../../actions.interface';
+export declare class DownloadAction extends AbstractContextAction implements Action {
+    private translate;
+    private dmsService;
+    id: string;
+    label: any;
+    description: any;
+    priority: number;
+    icon: string;
+    group: string;
+    range: SelectionRange;
+    supports: ActionSupport;
+    isExecutable(selection: DmsObject[]): Observable<boolean>;
+    run(selection: DmsObject[]): Observable<boolean>;
+}

package/actions/lib/actions.icon.d.ts

@@ -0,0 +1,7 @@
+export declare const ACTION_ICON: {
+    download: string;
+    delete: string;
+    copy: string;
+    cut: string;
+    manageFlavor: string;
+};

package/actions/lib/actions.interface.d.ts

@@ -0,0 +1,86 @@
+import { DmsObject } from '@yuuvis/client-core';
+import { Observable } from 'rxjs';
+export type ActionClass = {
+    new (...args: any[]): any;
+};
+export declare class AbstractContextAction {
+    context?: ActionContext;
+    constructor(context?: ActionContext);
+}
+export interface BaseAction {
+    /**
+     * Equals the selector of the actions selector (will be set by the action service)
+     */
+    id: string;
+    /**
+     * label to be displayed inside the action menu
+     */
+    label: string;
+    /**
+     * description to be displayed inside the action menu
+     */
+    description: string;
+    /**
+     * @ignore
+     */
+    icon: string;
+    /**
+     * actions priority defining the position of the action within the whole list of actions
+     */
+    priority: number;
+    /**
+     * group of actions the action should be part of ('common' or 'further')
+     */
+    group: string;
+    /**
+     * number of selected items supported by the action
+     * (SelectionRange.SINGLE_SELECT, SelectionRange.MULTI_SELECT, SelectionRange.MULTI_SELECT_ONLY )
+     */
+    range: SelectionRange;
+    /**
+     * Types that are supported by the action
+     */
+    supports: ActionSupport;
+    /**
+     * Determining whether or not the action is executable for the given selection
+     * @param item Current selection
+     * @returns true if the action is executable for the current selection, false otherwise
+     */
+    isExecutable: (items: DmsObject[]) => Observable<boolean>;
+}
+export interface ActionSupport {
+    types?: string[];
+    sots?: string[];
+    pattern?: string;
+}
+export interface ActionContext {
+    /**
+     * As actions deal with DmsObjects the subject property is the property that
+     * should be used to display the name of the object. This may be used for
+     * showing the name of the object in a confirmation/error dialog or similar.
+     */
+    subjectProperty?: string;
+    /**
+     * The appId is the id of the application that the action is executed in.
+     */
+    appId?: string;
+}
+export interface Action extends BaseAction {
+    run: (items: DmsObject[]) => Observable<boolean>;
+}
+export interface ActionOptions {
+    context?: ActionContext;
+    exclude?: string[] | RegExp;
+}
+export declare enum SelectionRange {
+    SINGLE_SELECT = 0,
+    MULTI_SELECT = 1,
+    MULTI_SELECT_ONLY = 2,
+    ANY = 3
+}
+export declare const BASE_ACTION: {
+    copy: string;
+    cut: string;
+    download: string;
+    delete: string;
+};

package/actions/lib/actions.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@ngx-translate/core";
+export declare class ActionsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ActionsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ActionsModule, never, [typeof i1.CommonModule, typeof i2.TranslateModule], never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ActionsModule>;
+}

package/actions/lib/actions.service.d.ts

@@ -0,0 +1,38 @@
+import { Signal } from '@angular/core';
+import { DmsObject } from '@yuuvis/client-core';
+import { Observable } from 'rxjs';
+import { Action, ActionClass, ActionContext, ActionOptions } from './actions.interface';
+import { FlexibleConnectedPositionStrategyOrigin } from '@angular/cdk/overlay';
+import * as i0 from "@angular/core";
+export declare class ActionsService {
+    private readonly injector;
+    private overlay;
+    private _registeredActions;
+    registerActions(a: {
+        id: string;
+        action: ActionClass;
+    }[]): void;
+    concealActions(actionIDs: string[]): void;
+    /**
+     * Returns all actions that are executable for the given selection.
+     * @param selection Array of DmsObjects to check for executable actions
+     * @param options options to filter the actions
+     * @returns Observable of actions that are executable for the given selection
+     */
+    getActions(selection: DmsObject[], options?: ActionOptions): Observable<Action[]>;
+    /**
+     * Get all available actions. This includes the default actions and all registered actions but
+     * without checking if they are executable.
+     * @param context Context passed to the actions
+     * @returns Array of available actions
+     */
+    getAvailableActions(context?: ActionContext): Action[];
+    getActionsForType(objectTypeId: string, context?: ActionContext): Action[];
+    getActionById(id: string, context?: ActionContext): Action | undefined;
+    getActionsById(ids: string[], context?: ActionContext): Action[];
+    openContextMenu(actions: Signal<Action[]>, callback: (action: Action) => void, element: FlexibleConnectedPositionStrategyOrigin): void;
+    private _actionsSupportsType;
+    private _getDefaulActions;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ActionsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ActionsService>;
+}

package/actions/lib/components/contextmenu/contextmenu.component.d.ts

@@ -0,0 +1,11 @@
+import { Signal } from '@angular/core';
+import { Action } from '../../actions.interface';
+import * as i0 from "@angular/core";
+export declare class ContextmenuComponent {
+    private oRef;
+    actions: Signal<Action[]>;
+    callback: (action: Action) => void;
+    onItemSelect(index: number[]): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ContextmenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ContextmenuComponent, "yuv-contextmenu", never, {}, {}, never, never, true, never>;
+}

package/app-bar/README.md

@@ -0,0 +1,3 @@
+# @yuuvis/client-framework/app-bar
+
+Secondary entry point of `@yuuvis/client-framework`. It can be used by importing from `@yuuvis/client-framework/app-bar`.

package/app-bar/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/app-bar.component';

package/app-bar/lib/app-bar.component.d.ts

@@ -0,0 +1,47 @@
+import { ElementRef, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Application bar for yuuvis Momentum apps.
+ *
+ * Adding a `#appBarSideNav` template to the components body will show a menu icon
+ * that opens its content in a sidenav element.
+ *
+ * Adding a `#appBarActions` template to the component will add its content to
+ * the actions section (at the end of the app bar).
+ *
+ * @example
+ * <yuv-app-bar title="MyMomentumApp">
+ *   <ng-template #appBarSideNav>
+ *     ... content supposed to end up in a sidenav ...
+ *   </ng-template>
+ *   <ng-template #appBarPrimaryActions>
+ *     ... content supposed to end up in the app bars primary actions section ...
+ *   </ng-template>
+ *   <ng-template #appBarActions>
+ *     ... content supposed to end up in the app bars actions section ...
+ *   </ng-template>
+ * </yuv-app-bar>
+ */
+export declare class AppBarComponent {
+    dialogElement: ElementRef<HTMLDialogElement> | null;
+    appBarSideNav: TemplateRef<any> | null;
+    appBarActions: TemplateRef<any> | null;
+    appBarPrimaryActions: TemplateRef<any> | null;
+    /**
+     * Menu icon SVG. By default this will be the hamburger menu icon
+     */
+    menuIcon: string;
+    /**
+     * App title visible in the app beside the menu
+     */
+    appTitle?: string;
+    /**
+     * Where to route to, when the title is clicked. Defaults to '/'
+     */
+    appTitleRoute?: string;
+    sidenavVisible: boolean;
+    toggleSideNav(): void;
+    onDialogClick(e: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppBarComponent, "yuv-app-bar", never, { "menuIcon": { "alias": "menuIcon"; "required": false; }; "appTitle": { "alias": "appTitle"; "required": false; }; "appTitleRoute": { "alias": "appTitleRoute"; "required": false; }; }, {}, ["appBarSideNav", "appBarActions", "appBarPrimaryActions"], never, true, never>;
+}

package/clipboard/README.md

@@ -0,0 +1,3 @@
+# @yuuvis/client-framework/clipboard
+
+Secondary entry point of `@yuuvis/client-framework`. It can be used by importing from `@yuuvis/client-framework/clipboard`.

package/clipboard/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/clipboard.component';

package/clipboard/lib/clipboard.component.d.ts

@@ -0,0 +1,16 @@
+import { OnInit } from '@angular/core';
+import { ClipboardData, TranslateService } from '@yuuvis/client-core';
+import * as i0 from "@angular/core";
+export declare class ClipboardComponent implements OnInit {
+    #private;
+    translate: TranslateService;
+    clipboardData?: ClipboardData;
+    label?: string;
+    enablePaste: import("@angular/core").InputSignal<boolean>;
+    bucket: import("@angular/core").InputSignal<string | undefined>;
+    paste: import("@angular/core").OutputEmitterRef<void>;
+    clearClipboard(): void;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClipboardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClipboardComponent, "yuv-clipboard", never, { "enablePaste": { "alias": "enablePaste"; "required": false; "isSignal": true; }; "bucket": { "alias": "bucket"; "required": false; "isSignal": true; }; }, { "paste": "paste"; }, never, never, true, never>;
+}

package/common/README.md

@@ -0,0 +1,3 @@
+# @yuuvis/client-framework/common
+
+Secondary entry point of `@yuuvis/client-framework`. It can be used by importing from `@yuuvis/client-framework/common`.

package/common/index.d.ts

@@ -0,0 +1,5 @@
+export * from './lib/directives';
+export * from './lib/components/token-input/token-input.component';
+export * from './lib/components/token-input/token-input.interface';
+export * from './lib/components/focus-indicator/focus-indicator.component';
+export * from './lib/directives/noop-value-accessor.directive';

package/common/lib/components/focus-indicator/focus-indicator.component.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class FocusIndicatorComponent {
+    #private;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<FocusIndicatorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FocusIndicatorComponent, "yuv-focus-indicator", never, {}, {}, never, never, true, never>;
+}

package/common/lib/components/token-input/token-input.component.d.ts

@@ -0,0 +1,55 @@
+import { TemplateRef } from '@angular/core';
+import { InputToken } from './token-input.interface';
+import * as i0 from "@angular/core";
+export declare class TokenInputComponent {
+    private elRef;
+    private overlay;
+    private ngZone;
+    optionsTemplate: import("@angular/core").Signal<TemplateRef<any>>;
+    /**
+     * Template to be used for rendering selected tokens
+     */
+    tokenTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
+    /**
+     * Template to be used for rendering autocomplete suggestion entries
+     */
+    optionTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
+    TEXT_TOKEN_TYPE: string;
+    private _inputElement?;
+    private _overlayRef?;
+    tokens: import("@angular/core").InputSignal<InputToken[]>;
+    caseSensitive: import("@angular/core").InputSignal<boolean>;
+    change: import("@angular/core").OutputEmitterRef<InputToken[]>;
+    private readonly _cleanFormTokens;
+    formTokens: InputToken[];
+    autocompleteValues: InputToken[];
+    autocompleteSelectedIndex: number;
+    focusedTokenIndex: number;
+    onArrowUpKey(event: KeyboardEvent): void;
+    onArrowDownKey(event: KeyboardEvent): void;
+    onEnterKey(event: KeyboardEvent): void;
+    clear(): void;
+    onInputFocus(e: any): void;
+    onInput(e: any): void;
+    onArrowLeft(e: Event): void;
+    onArrowRight(e: Event): void;
+    onDelete(e: Event, index: number): void;
+    onBackspace(e: Event, index: number): void;
+    private _focusFirst;
+    private _focusInput;
+    private _setCaretPos;
+    private _getCaretPos;
+    onOptionSelect(o: InputToken): void;
+    private _focusTokenInput;
+    openOptions(): void;
+    closeOptions(): void;
+    onTokenEnter(e: Event): void;
+    private _emitChange;
+    private _newTextToken;
+    private _textTokenId;
+    private _tokenize;
+    private _getInputValue;
+    private _processValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TokenInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TokenInputComponent, "yuv-token-input", never, { "tokens": { "alias": "tokens"; "required": false; "isSignal": true; }; "caseSensitive": { "alias": "caseSensitive"; "required": false; "isSignal": true; }; }, { "change": "change"; }, ["tokenTemplate", "optionTemplate"], never, true, never>;
+}

package/common/lib/components/token-input/token-input.interface.d.ts

@@ -0,0 +1,8 @@
+export interface InputToken {
+    id: string;
+    label: string;
+    type: string;
+}
+export interface InnerInputToken extends InputToken {
+    isInbetweenToken?: boolean;
+}

package/common/lib/directives/busy-overlay.directive.d.ts

@@ -0,0 +1,25 @@
+import { OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * A directive that will overlay its host component with a translucent background
+ * and a loading spinner once the condition resolves with true. This is useful for example to
+ * prevent user intercation while component data is loading or some processing is done.
+ *
+ * It'll also set the `inert` attribute on the host element. This will disable the host and
+ * all elements inside (like buttons, inputs etc.)
+ *
+ * @example
+ * <div class="result-list" [yuvBusyOverlay]="waitingForServerResponse">...</div>
+ *
+ */
+export declare class BusyOverlayDirective implements OnInit {
+    #private;
+    stylePosition: string;
+    /**
+     * The Boolean expression to evaluate as the condition for showing the busy overlay
+     */
+    set yuvBusyOverlay(b: boolean);
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BusyOverlayDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BusyOverlayDirective, "[yuvBusyOverlay]", never, { "yuvBusyOverlay": { "alias": "yuvBusyOverlay"; "required": false; }; }, {}, never, never, true, never>;
+}

package/common/lib/directives/click-double.directive.d.ts

@@ -0,0 +1,17 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Fixes the issue of 'click' event beeing triggered on 'doubleclick' by defining new outputs that
+ * distinguish between single and double click.
+ */
+export declare class ClickDoubleDirective {
+    debounceTime: number;
+    doubleClick: EventEmitter<any>;
+    singleClick: EventEmitter<any>;
+    private clicksSubject;
+    constructor();
+    clickEvent(event: MouseEvent): void;
+    doubleClickEvent(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClickDoubleDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ClickDoubleDirective, "[click.single],[click.double]", never, { "debounceTime": { "alias": "debounceTime"; "required": false; }; }, { "doubleClick": "click.double"; "singleClick": "click.single"; }, never, never, true, never>;
+}

package/common/lib/directives/container-size.directive.d.ts

@@ -0,0 +1,30 @@
+import { OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Directive to watch the size of an element inside the DOM. Usefull for example to provide
+ * a different layout (different components) depending on the available screen estate. You
+ * should first try to use CSS container queries but somtimes you need a different set of
+ * components to be loaded for a certain component size.
+ *
+ * Let's say you have components designed for bigger screens. You do not want to load them
+ * if there is not enough space for them. So you rather load components that are designed to
+ * take less space by providing the best user experience on smaller devices.
+ *
+ * ```html
+ * <div yuvContainerSize (containerHeight)="onContainerResize($event)" (containerWidth)="onContainerResize($event)"></div>
+ * ```
+ *
+ */
+export declare class ContainerSizeDirective implements OnDestroy {
+    private elRef;
+    private ngZone;
+    containerHeight: import("@angular/core").OutputEmitterRef<number>;
+    containerWidth: import("@angular/core").OutputEmitterRef<number>;
+    private _size?;
+    private _resizeObserver;
+    constructor();
+    private _emit;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ContainerSizeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ContainerSizeDirective, "[yuvContainerSize]", never, {}, { "containerHeight": "containerHeight"; "containerWidth": "containerWidth"; }, never, never, true, never>;
+}

package/common/lib/directives/drag-select.directive.d.ts

@@ -0,0 +1,21 @@
+import * as i0 from "@angular/core";
+export interface DragSelectOptions {
+    disabled?: boolean;
+    selectorColor?: string;
+}
+export declare class DragSelectDirective {
+    #private;
+    onPointerDown(event: PointerEvent): void;
+    items: import("@angular/core").Signal<readonly DragSelectItemDirective[]>;
+    yuvDragSelect: import("@angular/core").InputSignal<DragSelectOptions | undefined>;
+    dragSelectChange: import("@angular/core").OutputEmitterRef<number[]>;
+    dragSelect: import("@angular/core").OutputEmitterRef<number[]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DragSelectDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DragSelectDirective, "[yuvDragSelect]", never, { "yuvDragSelect": { "alias": "yuvDragSelect"; "required": false; "isSignal": true; }; }, { "dragSelectChange": "dragSelectChange"; "dragSelect": "dragSelect"; }, ["items"], never, true, never>;
+}
+export declare class DragSelectItemDirective {
+    #private;
+    el: HTMLElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DragSelectItemDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DragSelectItemDirective, "[yuvDragSelectItem]", never, {}, {}, never, never, true, never>;
+}

package/common/lib/directives/file-drop-zone/file-drop-zone.directive.d.ts

@@ -0,0 +1,18 @@
+import { FileDropZoneOptions } from './file-drop-zone.interface';
+import * as i0 from "@angular/core";
+export declare class FileDropZoneDirective {
+    #private;
+    set fileOver(fo: boolean);
+    get fileOver(): boolean;
+    yuvFileDropZone: import("@angular/core").InputSignal<FileDropZoneOptions | undefined>;
+    fileDropDisabled: import("@angular/core").InputSignal<boolean>;
+    fileDrop: import("@angular/core").OutputEmitterRef<File[]>;
+    fileDropOver: import("@angular/core").OutputEmitterRef<boolean>;
+    onDrop(event: DragEvent): void;
+    onDragOver(event: DragEvent): void;
+    onDragLeave(event: DragEvent): void;
+    onBodyDragOver(event: DragEvent): void;
+    onBodyDrop(event: DragEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FileDropZoneDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FileDropZoneDirective, "[yuvFileDropZone]", never, { "yuvFileDropZone": { "alias": "yuvFileDropZone"; "required": false; "isSignal": true; }; "fileDropDisabled": { "alias": "fileDropDisabled"; "required": false; "isSignal": true; }; }, { "fileDrop": "fileDrop"; "fileDropOver": "fileDropOver"; }, never, never, true, never>;
+}

package/common/lib/directives/file-drop-zone/file-drop-zone.interface.d.ts

@@ -0,0 +1,5 @@
+export interface FileDropZoneOptions {
+    label?: string;
+    coverStyles?: Record<string, string>;
+    coverLabelStyles?: Record<string, string>;
+}