@sebgroup/green-angular 0.0.0-v-angular-20250113082841

package/fesm2022/sebgroup-green-angular-src-v-angular-drag-drop.mjs

@@ -0,0 +1,685 @@
+import { HttpEventType, HttpClientModule } from '@angular/common/http';
+import * as i0 from '@angular/core';
+import { Pipe, inject, KeyValueDiffers, EventEmitter, Component, ViewChild, HostBinding, Input, Output, HostListener, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { throwError, timer } from 'rxjs';
+import { mergeMap, finalize, switchMap, retryWhen, tap, filter, take } from 'rxjs/operators';
+import * as i2 from '@sebgroup/green-angular/src/v-angular/modal';
+import { NggvModalModule } from '@sebgroup/green-angular/src/v-angular/modal';
+import '@sebgroup/green-core/components/icon/icons/cloud-upload.js';
+import '@sebgroup/green-core/components/icon/icons/cross-small.js';
+import '@sebgroup/green-core/components/icon/icons/checkmark.js';
+import * as i1 from '@jsverse/transloco';
+import { TranslocoModule, TRANSLOCO_SCOPE } from '@jsverse/transloco';
+import * as i3 from '@sebgroup/green-angular/src/lib/shared';
+import { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+/**
+ * Helper to extend the base file with {@link APIFile} defaults
+ * @param file file base that will be extended with {@link APIFile} defaults
+ * @param data extra data to override defaults
+ */
+const extendFile = (file, ...data) => {
+    return Object.assign({
+        id: file ? btoa(file.name) : '',
+        fileName: file ? file.name : 'na',
+        status: '',
+        statusReasonInformation: null,
+        principal: '',
+        uploadDate: (file
+            ? new Date(file.lastModified)
+            : new Date()).toISOString(),
+        registrarId: '',
+        registrarName: '',
+        progress: 0,
+        uploadState: 'local',
+        uploadRequests: undefined,
+        raw: file,
+    }, ...data);
+};
+/**
+ * Checks if file matches allowed mime types
+ * @param type file mime type
+ * @param accept allowed mime types
+ */
+const verifyAccept = (type, accept) => {
+    if (!accept)
+        return true;
+    const regex = new RegExp(accept.replace(/\*/g, '.*').replace(/\s*,\s*/g, '|'));
+    return regex.test(type);
+};
+/**
+ * Determines if browser supports drag and drop
+ */
+const isDragDropAvailable = () => {
+    const div = document.createElement('div');
+    return (('draggable' in div || ('ondragstart' in div && 'ondrop' in div)) &&
+        'FormData' in window &&
+        'FileReader' in window);
+};
+/**
+ * Pick only specified keys from a given object
+ * @param keys keys to pick from a given object
+ * @param object to extract keys from
+ */
+const pick = (object, ...keys) => {
+    const copy = {};
+    keys.forEach((key) => {
+        copy[key] = object[key];
+    });
+    return copy;
+};
+/**
+ * Will retry running the observable when an error occurs to a maximum limit, increasing delay between executions.
+ * @param options specifies number of retries, scaling duration and statuses to exclude
+ */
+const retryStrategy = ({ maxRetryAttempts = 3, scalingDuration = 1000, excludedStatusCodes = [], } = {}) => (attempts) => {
+    return attempts.pipe(mergeMap((error, i) => {
+        const retryAttempt = i + 1;
+        // if maximum number of retries have been met
+        // or response is a status code we don't wish to retry, throw error
+        if (retryAttempt > maxRetryAttempts ||
+            excludedStatusCodes.find((e) => e === error.status)) {
+            return throwError(() => error);
+        }
+        console.warn(`Attempt ${retryAttempt}: retrying in ${retryAttempt * scalingDuration}ms`);
+        return timer(retryAttempt * scalingDuration);
+    }), finalize(() => console.warn(`Failed after ${maxRetryAttempts} retry attempts, standing down.`)));
+};
+
+class ValuePipe {
+    constructor(differs) {
+        this.differs = differs;
+        this.values = [];
+    }
+    transform(input) {
+        if (!input || (!(input instanceof Map) && typeof input !== 'object')) {
+            return null;
+        }
+        if (!this.differ) {
+            // make a differ for whatever type we've been passed in
+            this.differ = this.differs.find(input).create();
+        }
+        const differChanges = this.differ.diff(input);
+        if (differChanges) {
+            this.values = [];
+            differChanges.forEachItem((r) => {
+                this.values.push(r.currentValue);
+            });
+        }
+        return this.values;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValuePipe, deps: [{ token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ValuePipe, name: "value", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValuePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'value', pure: false }]
+        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }] });
+/**
+ * Stand-alone version of existing value pipe.
+ *
+ * Impure flag needed due to keep track of changes in complex values (such as objects or arrays).
+ */
+class ValueImpurePipe {
+    constructor() {
+        this.differs = inject(KeyValueDiffers);
+        this.values = [];
+    }
+    transform(input) {
+        if (!input || (!(input instanceof Map) && typeof input !== 'object')) {
+            return null;
+        }
+        if (!this.differ) {
+            // make a differ for whatever type we've been passed in
+            this.differ = this.differs.find(input).create();
+        }
+        const differChanges = this.differ.diff(input);
+        if (differChanges) {
+            this.values = [];
+            differChanges.forEachItem(({ currentValue }) => {
+                this.values.push(currentValue);
+            });
+        }
+        return this.values;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValueImpurePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ValueImpurePipe, isStandalone: true, name: "valueImpure", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValueImpurePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'valueImpure',
+                    pure: false,
+                    standalone: true,
+                }]
+        }] });
+
+class NggvDragDropComponent {
+    constructor() {
+        /** Special property used for selecting DOM elements during automated UI testing. */
+        this.thook = 'drag-drop';
+        /** Disables deletion or cancellation during defined states [local | uploading | aborted | uploaded | validating | error | deleted | done]. */
+        this.disableRemove = [];
+        /** File size limit in mega bytes. */
+        this.fileLimit = 250 * 1024 * 1024;
+        /** Allowing selecting or dropping multiple files. */
+        this.multiple = true;
+        /** Determines if list should be shown under upload, disabling list disables multiple upload. */
+        this.list = true;
+        /** Frequency of requests which to send to the API requesting status updates. */
+        this.throttle = 5000;
+        /** Maximum number of attempts to request a status update from the API if service is unreachable. */
+        this.retryAttempts = 5;
+        /** If selection of multiple file should be possible with a checkbox.
+         * @experimental work in progress and should not yet be used.
+         * @internal
+         */
+        this.selectable = false;
+        /** Allows multiple values from `apiFile.status` to be mapped to a single file upload state. */
+        this.stateMap = {
+            local: 'local',
+            uploading: 'uploading',
+            aborted: 'aborted',
+            uploaded: 'uploaded',
+            validating: 'validating',
+            error: 'error',
+            deleted: 'deleted',
+            done: 'done',
+        };
+        /** Statuses allowed to be fetch during the initial load. Used to hide "done" states from list. */
+        this.fetchStatuses = [];
+        /** Statuses allowed be shown when status is "rejected". Will fallback to generic message. `null` allows all. */
+        this.errorCodes = null;
+        /** Event triggered on initialization and every time the "uploadState" for a file changes. */
+        this.stateChange = new EventEmitter();
+        /** Event triggered when view details is clicked. */
+        this.detailsClick = new EventEmitter();
+        /** @internal */
+        this.isDragDropAvailable = isDragDropAvailable();
+        /** @internal */
+        this.componentState = 'normal';
+        /** @internal */
+        this.files = new Map();
+        /** @internal */
+        this.selected = [];
+        /** @internal */
+        this.loading = false;
+    }
+    /**
+     * Initialize the component and warn if service is not defined. Will also fetch files for the list if enabled.
+     */
+    ngOnInit() {
+        if (!this.service) {
+            return console.error('Drag and drop component will not work without the [service] property defined!');
+        }
+        if (this.list) {
+            this.service.fetchFiles(this.fetchStatuses).subscribe((apiFiles) => {
+                for (const apiFile of apiFiles) {
+                    const extendedFile = extendFile(undefined, apiFile, {
+                        progress: 100,
+                        uploadState: this.determineUploadState(apiFile.status),
+                        internalStatusReasonCode: this.fallbackError(apiFile.internalStatusReasonCode),
+                    });
+                    this.files.set(extendedFile.id, extendedFile);
+                    this.stateChange.emit(pick(extendedFile, 'uploadState', 'fileName', 'id', 'status', 'internalStatusReasonCode', 'statusReasonInformation'));
+                    // Check if validation is required, then start polling
+                    if (extendedFile.uploadState === 'uploaded' ||
+                        extendedFile.uploadState === 'validating') {
+                        this.checkValidity(extendedFile, this.throttle);
+                    }
+                }
+            });
+        }
+    }
+    /** Destroy all event listeners and polling running */
+    ngOnDestroy() {
+        this.files.forEach((file) => {
+            file.uploadRequests?.unsubscribe();
+            if (file.uploadState === 'uploading') {
+                file.uploadState = 'aborted';
+                file.internalStatusReasonCode = 'MFEFHM004';
+                this.stateChange.emit(pick(file, 'uploadState', 'fileName', 'status', 'internalStatusReasonCode'));
+            }
+        });
+    }
+    /** @internal Warn user trying to leave page before all uploads are done. Custom message only works in older browsers. */
+    onBeforeUnload(event) {
+        if (!this.allUploadingDone(this.files)) {
+            const confirmationMessage = `You still have files uploading, are you sure you want to leave this page?`;
+            (event || window.event).returnValue =
+                confirmationMessage;
+            return confirmationMessage;
+        }
+        return;
+    }
+    /* Drag & Drop Events */
+    /** @internal Event handler for when a file is held over the drop area */
+    onDragEnter(event) {
+        if (!this.service)
+            return;
+        event.preventDefault();
+        // Update the visual state
+        this.componentState = 'over';
+    }
+    /** @internal Event handler for when a file leaves the drop area */
+    onDragLeave(event) {
+        if (!this.service)
+            return;
+        event.preventDefault();
+        this.componentState = 'normal';
+    }
+    /** @internal Event handler for when a file is dropped on the drop area or when `input` files are selected */
+    onDrop(event) {
+        if (!this.service)
+            return;
+        event.preventDefault();
+        this.componentState = 'normal';
+        let files;
+        // Determine if files are from the drop event or input element
+        if (event instanceof DragEvent && event.dataTransfer) {
+            files = event.dataTransfer.files;
+        }
+        else if (event.target &&
+            event.target instanceof HTMLInputElement &&
+            event.target.files) {
+            files = event.target.files;
+        }
+        if (files) {
+            const extendedFiles = Array.from(files, (file) => {
+                let abort = false;
+                let statusCode = null;
+                // Check if file size is larger than limit
+                if (file.size > this.fileLimit) {
+                    abort = true;
+                    statusCode = 'MFEFHM003';
+                }
+                // Check if file type is not acceptable
+                if (!verifyAccept(file.type, this.accept)) {
+                    abort = true;
+                    statusCode = 'MFEFHM002';
+                }
+                // Add default values expected by the API
+                const extendedFile = extendFile(file, {
+                    internalStatusReasonCode: statusCode,
+                    uploadState: (abort ? 'aborted' : 'local'),
+                });
+                // Emit initial local upload event
+                this.stateChange.emit({
+                    uploadState: 'local',
+                    fileName: extendedFile.fileName,
+                });
+                if (abort) {
+                    // Emit aborted upload event
+                    this.stateChange.emit({
+                        uploadState: 'aborted',
+                        fileName: extendedFile.fileName,
+                        status: 'aborted',
+                        internalStatusReasonCode: statusCode,
+                    });
+                }
+                return extendedFile;
+            });
+            // Append to previous files
+            let i = 0;
+            for (const file of extendedFiles) {
+                // If multiple or list is false append only file then break loop
+                if ((!this.multiple || !this.list) && i >= 1)
+                    break;
+                this.lastFile = file;
+                this.files.set(file.id, file);
+                i++;
+            }
+            // Clear file input so that same file can be uploaded
+            if (event.target &&
+                event.target instanceof HTMLInputElement &&
+                event.target.files) {
+                event.target.value = '';
+            }
+            this.onSubmit();
+        }
+    }
+    /** @internal Event trigger for when delete button is pressed */
+    onRemove(id, state) {
+        // Only allow removal in certain states
+        if (!this.service || this.disableRemove.includes(state))
+            return;
+        const file = this.files.get(id);
+        if (!file)
+            return;
+        // Skip confirmation for aborted and deleted files
+        if (file.uploadState === 'error' ||
+            file.uploadState === 'aborted' ||
+            file.uploadState === 'deleted') {
+            this.onConfirmRemove({ original: undefined, payload: file });
+        }
+        else {
+            this.markedForDeletion = file;
+            this.deleteModalRef.open();
+        }
+    }
+    /** @internal */
+    onConfirmRemove(event) {
+        const { payload: file } = event;
+        if (!file || !this.service)
+            return;
+        // Abort upload and set local state to aborted to inform user
+        switch (file.uploadState) {
+            case 'local':
+            case 'uploading':
+                file.uploadRequests?.unsubscribe();
+                file.uploadState = 'aborted';
+                file.internalStatusReasonCode = 'MFEFHM004';
+                this.stateChange.emit(pick(file, 'uploadState', 'fileName', 'status', 'internalStatusReasonCode'));
+                break;
+            // Remove file from service then set local state to aborted to inform user
+            case 'uploaded':
+            case 'validating':
+                this.service
+                    .removeFile(file.id)
+                    .subscribe({
+                    error: console.warn,
+                })
+                    .add(() => {
+                    // Abort regardless of response from server
+                    file.uploadRequests?.unsubscribe();
+                    file.uploadState = 'aborted';
+                    file.internalStatusReasonCode = 'MFEFHM005';
+                    this.stateChange.emit(pick(file, 'uploadState', 'fileName', 'status', 'internalStatusReasonCode'));
+                });
+                break;
+            // Remove file from service then locally for "completed" states
+            case 'error':
+            case 'done':
+                ;
+                (this.service.removeFileFor
+                    ? this.service.removeFileFor(file)
+                    : this.service.removeFile(file.id))
+                    .subscribe({
+                    error: console.warn,
+                })
+                    .add(() => {
+                    // Remove regardless of response from server
+                    this.files.delete(file.id);
+                    const event = pick(file, 'uploadState', 'fileName', 'id', 'status', 'internalStatusReasonCode', 'statusReasonInformation');
+                    event.uploadState = 'deleted';
+                    this.stateChange.emit(event);
+                });
+                break;
+            // Just remove the file locally to clean up
+            case 'aborted':
+            case 'deleted':
+            default:
+                this.files.delete(file.id);
+                this.stateChange.emit({
+                    ...pick(file, 'uploadState', 'fileName', 'id', 'status', 'internalStatusReasonCode', 'statusReasonInformation'),
+                    uploadState: 'deleted',
+                });
+                break;
+        }
+    }
+    /** @internal Event handler for when the files should be uploaded */
+    onSubmit() {
+        if (!this.files || !this.service)
+            return;
+        // If list is not enabled update the component state to show progress
+        if (!this.list)
+            this.componentState = 'uploading';
+        this.loading = true;
+        this.files.forEach((file) => {
+            // Filter out all files that aren't currently considered local
+            if (!file.raw || file.uploadState !== 'local')
+                return;
+            file.uploadRequests = this.service.uploadFile(file.raw).subscribe({
+                next: (event) => {
+                    switch (event.type) {
+                        case HttpEventType.UploadProgress:
+                            // Update upload progress
+                            if (file.uploadState !== 'uploading') {
+                                file.uploadState = 'uploading';
+                                this.stateChange.emit(pick(file, 'uploadState', 'fileName'));
+                            }
+                            file.progress = Math.round((100 * event.loaded) / (event.total || 100));
+                            file.uploadState = 'uploading';
+                            break;
+                        case HttpEventType.Response:
+                            if (event.body?.id) {
+                                // Remove old file id
+                                this.files.delete(file.id);
+                                // Update file with information from the API
+                                Object.assign(file, event.body);
+                                file.progress = 100;
+                                file.uploadState = this.determineUploadState(file.status);
+                                // Update with new file id
+                                this.files.set(file.id, file);
+                            }
+                            this.stateChange.emit(pick(file, 'uploadState', 'fileName', 'id', 'status', 'statusReasonInformation'));
+                            // Check if validation is required, then start polling
+                            if (file.uploadState === 'uploaded' ||
+                                file.uploadState === 'validating') {
+                                this.checkValidity(file, this.throttle);
+                            }
+                            else
+                                this.setComponentStateDone();
+                            this.loading = false;
+                            break;
+                    }
+                },
+                error: (error) => {
+                    console.warn(error);
+                    file.uploadState = 'aborted';
+                    file.status = 'aborted';
+                    // todo: wrong
+                    file.statusReasonInformation = [
+                        { originatorId: 'local', reason: 'dragDrop.error.MFEFHM001' },
+                    ];
+                    this.stateChange.emit(pick(file, 'uploadState', 'fileName', 'id', 'status', 'statusReasonInformation'));
+                    this.loading = false;
+                },
+            });
+        });
+    }
+    /**
+     * @internal
+     * Using the state map convert `apiFile.state` to one of {@link UploadState}
+     * @param apiState the state given by the file to be used for mapping
+     */
+    determineUploadState(apiState) {
+        // Reverse so that later states override earlier
+        const stateEntries = Object.entries(this.stateMap).reverse();
+        for (const [uploadState, apiStates] of stateEntries) {
+            if (this.uploadStateIsArray(apiStates)) {
+                if (apiStates.includes(apiState))
+                    return uploadState;
+            }
+            else {
+                if (apiStates === apiState)
+                    return uploadState;
+            }
+        }
+        return 'error';
+    }
+    /** @internal */
+    uploadStateIsArray(state) {
+        return Array.isArray(state);
+    }
+    /** @internal used for translation templating parameters */
+    translateParams(file) {
+        return { ...file, fileLimit: (this.fileLimit / 1024 / 1024).toFixed(3) };
+    }
+    /**
+     * Poll the status endpoint to determine when file is valid
+     * @param file file used to check state and update
+     * @param delay how long each interval should wait before sending a request
+     */
+    checkValidity(file, delay) {
+        if (!this.service)
+            return;
+        file.uploadRequests = timer(0, delay)
+            .pipe(switchMap(() => {
+            const asyncFetchStatus = this.service && this.service.fetchStatusFor
+                ? this.service.fetchStatusFor(file)
+                : this.service.fetchStatus(file.id);
+            return asyncFetchStatus;
+        }), retryWhen(retryStrategy({
+            maxRetryAttempts: this.retryAttempts,
+        })), tap((fileStatus) => {
+            // Continuously update file state to show step progress
+            if (fileStatus) {
+                // Emit event when status changes
+                if (file.status !== fileStatus.status) {
+                    file.status = fileStatus.status;
+                    file.internalStatusReasonCode = this.fallbackError(fileStatus.internalStatusReasonCode);
+                    file.statusReasonInformation = fileStatus.statusReasonInformation;
+                    file.uploadState = this.determineUploadState(fileStatus.status);
+                    this.stateChange.emit(pick(file, 'uploadState', 'fileName', 'id', 'status', 'internalStatusReasonCode', 'statusReasonInformation'));
+                }
+            }
+        }), 
+        // Remove validation state
+        filter((apiFile) => !!apiFile &&
+            this.determineUploadState(apiFile.status) !== 'uploaded' &&
+            this.determineUploadState(apiFile.status) !== 'validating'), 
+        // Take first state after validation
+        take(1))
+            .subscribe({
+            next: () => {
+                if (this.allValidationDone(this.files)) {
+                    this.setComponentStateDone();
+                }
+            },
+            error: (err) => {
+                console.warn(err);
+                file.uploadState = 'aborted';
+                file.status = 'aborted';
+                file.internalStatusReasonCode = 'MFEFHM001';
+                this.stateChange.emit(pick(file, 'uploadState', 'fileName', 'id', 'status', 'internalStatusReasonCode'));
+                this.setComponentStateDone();
+            },
+        });
+    }
+    fallbackError(code) {
+        if (this.errorCodes == null || (code && this.errorCodes.includes(code))) {
+            return code ?? null;
+        }
+        else {
+            return 'MFEFHM001';
+        }
+    }
+    /**
+     * Check so that no files are still validating
+     */
+    allValidationDone(files) {
+        return Array.from(files.values()).every((file) => file.uploadState !== 'validating');
+    }
+    /**
+     * Check so that no files are still uploading
+     */
+    allUploadingDone(files) {
+        return Array.from(files.values()).every((file) => file.uploadState !== 'uploading');
+    }
+    /**
+     * Helper to update the component state to done and then back to normal
+     */
+    setComponentStateDone() {
+        if (!this.list)
+            this.componentState = 'done';
+        setTimeout(() => {
+            if (this.componentState === 'done')
+                this.componentState = 'normal';
+        }, 3000);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDragDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvDragDropComponent, selector: "nggv-drag-drop", inputs: { thook: "thook", service: "service", accept: "accept", disableRemove: "disableRemove", fileLimit: "fileLimit", multiple: "multiple", list: "list", throttle: "throttle", retryAttempts: "retryAttempts", selectable: "selectable", stateMap: "stateMap", fetchStatuses: "fetchStatuses", errorCodes: "errorCodes" }, outputs: { stateChange: "stateChange", detailsClick: "detailsClick" }, host: { listeners: { "window:beforeunload": "onBeforeUnload($event)" }, properties: { "attr.data-thook": "this.thook" } }, viewQueries: [{ propertyName: "deleteModalRef", first: true, predicate: ["deleteModalRef"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <form enctype=\"multipart/form-data\" #dragDropForm>\n    <div class=\"gds-drag-drop\">\n      <input\n        class=\"gds-drag-drop__input\"\n        id=\"drag-drop\"\n        type=\"file\"\n        [accept]=\"accept\"\n        [multiple]=\"multiple && list\"\n        (change)=\"onDrop($event)\"\n      />\n      <label\n        [ngClass]=\"{\n          'gds-drag-drop__label': true,\n          'gds-drag-drop__label--above': componentState === 'over',\n        }\"\n        for=\"drag-drop\"\n        [attr.data-thook]=\"thook + '-picker'\"\n        [attr.aria-busy]=\"loading\"\n        (dragenter)=\"onDragEnter($event)\"\n        (dragover)=\"onDragEnter($event)\"\n        (dragleave)=\"onDragLeave($event)\"\n        (dragend)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\"\n        [ngSwitch]=\"componentState\"\n      >\n        <!-- COMPONENT STATE NORMAL -->\n        <ng-template [ngSwitchCase]=\"'normal'\">\n          <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n          ><em>{{ t('dragDrop.label.fileChoose') }}</em>\n          <ng-template [ngIf]=\"isDragDropAvailable\">\n            {{ t('dragDrop.label.fileDrag') }}</ng-template\n          >\n        </ng-template>\n\n        <!-- COMPONENT STATE OVER -->\n        <ng-template [ngSwitchCase]=\"'over'\">\n          <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n          >{{ t('dragDrop.label.fileDrop') }}\n        </ng-template>\n\n        <!-- COMPONENT STATE UPLOADING -->\n        <ng-template [ngSwitchCase]=\"'uploading'\">\n          <strong class=\"filename\">{{ lastFile?.fileName }}</strong>\n\n          <!-- UPLOADING STATE -->\n          <ng-template [ngIf]=\"lastFile?.uploadState === 'uploading'\">\n            <ng-template\n              [ngTemplateOutlet]=\"progressTemplate\"\n              [ngTemplateOutletContext]=\"{\n                file: lastFile,\n              }\"\n            ></ng-template>\n          </ng-template>\n\n          <!-- UPLOADED STATE -->\n          <ng-template [ngIf]=\"lastFile?.uploadState === 'uploaded'\">\n            <ng-template\n              [ngTemplateOutlet]=\"progressTemplate\"\n              [ngTemplateOutletContext]=\"{\n                file: lastFile,\n                text: t('dragDrop.text.fileStateUploaded'),\n              }\"\n            ></ng-template>\n          </ng-template>\n\n          <!-- VALIDATING STATE -->\n          <ng-template [ngIf]=\"lastFile?.uploadState === 'validating'\">\n            <ng-template\n              [ngTemplateOutlet]=\"progressTemplate\"\n              [ngTemplateOutletContext]=\"{\n                file: lastFile,\n                text: t('dragDrop.text.fileStateValidating'),\n              }\"\n            ></ng-template>\n          </ng-template>\n        </ng-template>\n\n        <!-- COMPONENT STATE DONE -->\n        <ng-template [ngSwitchCase]=\"'done'\">\n          {{ t('dragDrop.label.fileUploaded', { filename: lastFile?.fileName })\n          }}<gds-icon-checkmark *nggCoreElement></gds-icon-checkmark>\n        </ng-template>\n      </label>\n\n      <!-- LIST -->\n      <table\n        class=\"gds-table file-list\"\n        [attr.data-thook]=\"thook + '-file-list'\"\n        *ngIf=\"list\"\n      >\n        <thead>\n          <tr>\n            <th *ngIf=\"selectable\">\n              <div class=\"gds-field-checkbox-wrap\">\n                <input\n                  type=\"checkbox\"\n                  aria-label=\"Field label\"\n                  id=\"select-all\"\n                />\n                <label for=\"select-all\"></label>\n              </div>\n            </th>\n            <th class=\"gds-table__primary-col col-name\">\n              {{ t('dragDrop.label.fileName') }}\n            </th>\n            <th class=\"col-status\">\n              {{ t('dragDrop.label.fileStatus') }}\n            </th>\n            <th class=\"col-actions\"></th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            [attr.data-thook]=\"thook + '-file'\"\n            *ngFor=\"let file of files | value\"\n          >\n            <td *ngIf=\"selectable\">\n              <div class=\"gds-field-checkbox-wrap\">\n                <input\n                  type=\"checkbox\"\n                  aria-label=\"Field label\"\n                  [id]=\"'file-checkbox-' + file.id\"\n                />\n                <label [for]=\"'file-checkbox-' + file.id\"></label>\n              </div>\n            </td>\n            <td\n              class=\"gds-table__primary-col\"\n              [attr.data-thook]=\"thook + '-file-name'\"\n            >\n              {{ file.fileName }}\n            </td>\n            <td\n              [attr.data-thook]=\"thook + '-file-status'\"\n              [ngSwitch]=\"file.uploadState\"\n            >\n              <!-- UPLOADING STATE -->\n              <ng-template [ngSwitchCase]=\"'uploading'\">\n                <ng-template\n                  [ngTemplateOutlet]=\"progressTemplate\"\n                  [ngTemplateOutletContext]=\"{\n                    file: file,\n                  }\"\n                ></ng-template>\n              </ng-template>\n\n              <!-- UPLOADED STATE -->\n              <ng-template [ngSwitchCase]=\"'uploaded'\">\n                <ng-template\n                  [ngTemplateOutlet]=\"progressTemplate\"\n                  [ngTemplateOutletContext]=\"{\n                    file: file,\n                    text: t('dragDrop.text.fileStateUploaded'),\n                  }\"\n                ></ng-template>\n              </ng-template>\n\n              <!-- VALIDATING STATE -->\n              <ng-template [ngSwitchCase]=\"'validating'\">\n                <ng-template\n                  [ngTemplateOutlet]=\"progressTemplate\"\n                  [ngTemplateOutletContext]=\"{\n                    file: file,\n                    text: t('dragDrop.text.fileStateValidating'),\n                  }\"\n                ></ng-template>\n              </ng-template>\n\n              <!-- ABORTED STATE -->\n              <ng-template [ngSwitchCase]=\"'aborted'\">\n                <span\n                  class=\"error-text\"\n                  [transloco]=\"\n                    'dragDrop.error.' + file.internalStatusReasonCode\n                  \"\n                  [translocoParams]=\"translateParams(file)\"\n                  *ngIf=\"file.internalStatusReasonCode\"\n                ></span>\n              </ng-template>\n\n              <!-- ERROR STATE -->\n              <ng-template [ngSwitchCase]=\"'error'\">\n                <span\n                  class=\"error-text\"\n                  [transloco]=\"\n                    'dragDrop.error.' + file.internalStatusReasonCode\n                  \"\n                  [translocoParams]=\"translateParams(file)\"\n                  *ngIf=\"file.internalStatusReasonCode\"\n                ></span>\n                <br />\n                <a\n                  (click)=\"detailsClick.emit(file)\"\n                  style=\"cursor: pointer\"\n                  *ngIf=\"\n                    file.statusReasonInformation &&\n                    file.statusReasonInformation.length\n                  \"\n                >\n                  {{ t('dragDrop.link.viewDetails') }}\n                </a>\n              </ng-template>\n\n              <!-- DONE STATE -->\n              <ng-template [ngSwitchCase]=\"'done'\">\n                <span class=\"success-text\">{{\n                  t('dragDrop.text.fileStateDone')\n                }}</span>\n              </ng-template>\n            </td>\n\n            <td class=\"gds-table__numeric-col\">\n              <a\n                class=\"remove\"\n                tabindex=\"0\"\n                (click)=\"onRemove(file.id, file.uploadState)\"\n                *ngIf=\"!disableRemove.includes(file.uploadState)\"\n              >\n                <gds-icon-cross-small *nggCoreElement></gds-icon-cross-small>\n              </a>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </form>\n\n  <nggv-dialog\n    #deleteModalRef\n    [title]=\"t('dragDrop.text.fileCancelModalTitle')\"\n    [content]=\"\n      t('dragDrop.text.fileCancelModalContent', {\n        name: markedForDeletion?.fileName,\n      })\n    \"\n    [payload]=\"markedForDeletion\"\n    [buttons]=\"{\n      negative: 'dragDrop.text.fileCancelConfirm',\n      positive: 'dragDrop.text.fileCancelDeny',\n    }\"\n    (nggvNegativeEvent)=\"onConfirmRemove($any($event))\"\n  ></nggv-dialog>\n\n  <!-- PROGRESS TEMPLATE -->\n\n  <ng-template\n    #progressTemplate\n    let-file=\"\n    file\"\n    let-text=\"text\"\n  >\n    <div class=\"progress-wrapper\">\n      <progress\n        class=\"gds-progress-bar progress\"\n        max=\"100\"\n        [value]=\"file.progress\"\n      >\n        {{\n          t('dragDrop.text.fileStateUploading', {\n            uploaded:\n              (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n            size: file.raw?.size / 1024 | number: '0.0-0',\n            progress: file.progress,\n            unit: 'kB',\n          })\n        }}\n      </progress>\n      <ng-template [ngIf]=\"stateMap.validating.length\">\n        <div\n          class=\"gds-progress-indicator indicator\"\n          *ngIf=\"uploadStateIsArray(stateMap.validating); else singleValidation\"\n        >\n          <div\n            class=\"gds-progress-indicator__step\"\n            [class.-done]=\"i <= stateMap.validating.indexOf(file.status)\"\n            *ngFor=\"let state of stateMap.validating; let i = index\"\n          ></div>\n        </div>\n      </ng-template>\n      <ng-template #singleValidation>\n        <div class=\"gds-progress-indicator indicator\">\n          <!-- eslint-disable @angular-eslint/template/eqeqeq -->\n          <div\n            class=\"gds-progress-indicator__step\"\n            [class.-done]=\"file.status == stateMap.validating\"\n          ></div>\n          <!-- eslint-enable @angular-eslint/template/eqeqeq -->\n        </div>\n      </ng-template>\n    </div>\n    <span class=\"progress-text\">\n      {{\n        text ||\n          t('dragDrop.text.fileStateUploading', {\n            uploaded:\n              (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n            size: file.raw?.size / 1024 | number: '0.0-0',\n            progress: file.progress,\n            unit: 'kB',\n          })\n      }}\n    </span>\n  </ng-template>\n</ng-container>\n", styles: [":host .gds-drag-drop{width:100%}:host .gds-drag-drop__input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}:host .gds-drag-drop__label{display:flex;justify-content:center;align-items:center;gap:.5rem;border:2px dashed #868686;font-weight:500;padding:2.25em 1.5em}:host .gds-drag-drop__input+.gds-drag-drop__label em{font-style:normal;color:#0092e1;cursor:pointer}:host .gds-drag-drop table,:host .gds-drag-drop .gds-table{margin-top:2.25em}:host .gds-table{width:100%;font-family:SEBSansSerif,Arial,sans-serif;border-spacing:0}:host .gds-table th,:host .gds-table td{text-align:left;border-bottom:1px solid #e9e9e9}:host .gds-table thead{color:#333;font-size:1em}:host .gds-table thead tr{min-height:2em}:host .gds-table thead th,:host .gds-table thead td{border-bottom:1px solid #cecece;font-weight:500}:host .gds-table tbody{font-size:1em}:host .gds-table tbody tr{height:2.5em;border-bottom:1px solid #adadad}:host .gds-table tbody tr:hover td,:host .gds-table tbody tr:hover th{background-color:#f8f8f8}:host .gds-table tfoot{font-weight:500;font-size:1em}:host .gds-table tfoot tr{height:2.5em}:host .gds-table tfoot td{border-top:1px solid #cecece;border-bottom-width:0}:host tr .gds-table__numeric-col{text-align:right}:host tr .gds-table__negative-col{color:#bb000c}:host tr .gds-table__primary-col{color:#000}:host .gds-table__sortable-col{cursor:pointer;white-space:nowrap;margin-left:.5em}:host .gds-table__sortable-col:after{content:\"\";display:inline-block;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\");background-repeat:no-repeat;margin-left:.25rem;width:.625rem;height:1rem;vertical-align:text-bottom}:host .gds-table__sortable-col:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23007ac7' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%2341b0ee' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23007ac7' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%2341b0ee' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table .gds-field-checkbox-wrap{width:2.5rem}:host .gds-table .gds-field-checkbox-wrap label{box-shadow:none!important}:host .gds-table--fixed-l-col{overflow:auto;display:block;position:relative;max-width:100%}:host .gds-table--fixed-l-col td,:host .gds-table--fixed-l-col th{width:auto!important;min-width:150px}:host .gds-table--fixed-l-col td:first-child,:host .gds-table--fixed-l-col th:first-child{position:sticky;left:0;background-color:#fff;border-right:1px solid #e9e9e9}:host .gds-table--fixed-l-col thead th{top:0;z-index:1;position:sticky;background-color:#fff}:host .gds-table--fixed-l-col thead th:first-child{z-index:2}:host .gds-progress-bar{appearance:none;height:.3125rem;width:100%;position:relative;overflow:hidden;color:#45b400;border-width:0;background-color:#e9e9e9}:host .gds-progress-bar:before{display:block;position:absolute;content:\"\";left:-200px;width:200px;height:.3125rem;background-color:#45b400;animation:gds-progressbar-loading 2s linear infinite}:host .gds-progress-bar::-webkit-progress-value{background-color:transparent}:host .gds-progress-bar::-moz-progress-bar{background-color:transparent}:host .gds-progress-bar::-ms-fill{background-color:transparent;border-width:0}:host .gds-progress-bar::-webkit-progress-bar{background-color:#e9e9e9}@keyframes gds-progressbar-loading{0%{left:-30%;width:30%}50%{width:30%}70%{width:70%}80%{left:50%}95%{left:120%}to{left:100%}}:host .gds-progress-bar[value]:before{content:none}:host .gds-progress-bar[value]::-webkit-progress-value{background-color:#45b400}:host .gds-progress-bar[value]::-moz-progress-bar{background-color:#45b400}:host .gds-progress-bar[value]::-ms-fill{background-color:#45b400}:host .gds-progress-indicator{display:flex;width:100%}:host .gds-progress-indicator__step{flex-grow:1;height:.5rem;margin-right:.125rem;background-color:#e9e9e9}:host .gds-progress-indicator__step.-done{background-color:#45b400}:host .gds-progress-indicator__step:last-child{margin-right:0}:host .file-list th:first-child,:host .file-list td:first-child{width:auto}:host .filename{display:block;margin-bottom:.5rem}:host .col-name{width:40%}:host .col-status{width:30%}:host .col-actions{width:.1%}:host .progress-wrapper{display:flex}:host .progress,:host .indicator{height:.5rem}:host .gds-progress-indicator__step{margin-right:0}:host .progress{color:#45b400}:host .progress::-webkit-progress-value{background-color:#45b400}:host .progress::-moz-progress-bar{background-color:#45b400}:host .progress::-ms-fill{background-color:#45b400}:host .progress-text{display:block;margin-top:.125rem}:host .error-text{color:#bb000c}:host .success-text{color:#308800}:host .remove{padding:0 .5rem;font-size:1.5em;color:#868686;cursor:pointer;display:grid;place-content:center}:host .remove:hover,:host .remove:focus{color:#bb000c}\n"], dependencies: [{ kind: "directive", type: i1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i2.NggvDialogComponent, selector: "nggv-dialog", inputs: ["thook", "shown", "initiallyShown", "heading", "title", "content", "autoClose", "payload", "dialogTitleId", "dialogBodyId", "closeModalOnEscape", "closeButtonAriaLabel", "buttons"], outputs: ["nggvCloseEvent", "nggvPositiveEvent", "nggvNeutralEvent", "nggvNegativeEvent"], exportAs: ["dialog"] }, { kind: "directive", type: i3.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: ValuePipe, name: "value" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDragDropComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nggv-drag-drop', template: "<ng-container *transloco=\"let t\">\n  <form enctype=\"multipart/form-data\" #dragDropForm>\n    <div class=\"gds-drag-drop\">\n      <input\n        class=\"gds-drag-drop__input\"\n        id=\"drag-drop\"\n        type=\"file\"\n        [accept]=\"accept\"\n        [multiple]=\"multiple && list\"\n        (change)=\"onDrop($event)\"\n      />\n      <label\n        [ngClass]=\"{\n          'gds-drag-drop__label': true,\n          'gds-drag-drop__label--above': componentState === 'over',\n        }\"\n        for=\"drag-drop\"\n        [attr.data-thook]=\"thook + '-picker'\"\n        [attr.aria-busy]=\"loading\"\n        (dragenter)=\"onDragEnter($event)\"\n        (dragover)=\"onDragEnter($event)\"\n        (dragleave)=\"onDragLeave($event)\"\n        (dragend)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\"\n        [ngSwitch]=\"componentState\"\n      >\n        <!-- COMPONENT STATE NORMAL -->\n        <ng-template [ngSwitchCase]=\"'normal'\">\n          <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n          ><em>{{ t('dragDrop.label.fileChoose') }}</em>\n          <ng-template [ngIf]=\"isDragDropAvailable\">\n            {{ t('dragDrop.label.fileDrag') }}</ng-template\n          >\n        </ng-template>\n\n        <!-- COMPONENT STATE OVER -->\n        <ng-template [ngSwitchCase]=\"'over'\">\n          <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n          >{{ t('dragDrop.label.fileDrop') }}\n        </ng-template>\n\n        <!-- COMPONENT STATE UPLOADING -->\n        <ng-template [ngSwitchCase]=\"'uploading'\">\n          <strong class=\"filename\">{{ lastFile?.fileName }}</strong>\n\n          <!-- UPLOADING STATE -->\n          <ng-template [ngIf]=\"lastFile?.uploadState === 'uploading'\">\n            <ng-template\n              [ngTemplateOutlet]=\"progressTemplate\"\n              [ngTemplateOutletContext]=\"{\n                file: lastFile,\n              }\"\n            ></ng-template>\n          </ng-template>\n\n          <!-- UPLOADED STATE -->\n          <ng-template [ngIf]=\"lastFile?.uploadState === 'uploaded'\">\n            <ng-template\n              [ngTemplateOutlet]=\"progressTemplate\"\n              [ngTemplateOutletContext]=\"{\n                file: lastFile,\n                text: t('dragDrop.text.fileStateUploaded'),\n              }\"\n            ></ng-template>\n          </ng-template>\n\n          <!-- VALIDATING STATE -->\n          <ng-template [ngIf]=\"lastFile?.uploadState === 'validating'\">\n            <ng-template\n              [ngTemplateOutlet]=\"progressTemplate\"\n              [ngTemplateOutletContext]=\"{\n                file: lastFile,\n                text: t('dragDrop.text.fileStateValidating'),\n              }\"\n            ></ng-template>\n          </ng-template>\n        </ng-template>\n\n        <!-- COMPONENT STATE DONE -->\n        <ng-template [ngSwitchCase]=\"'done'\">\n          {{ t('dragDrop.label.fileUploaded', { filename: lastFile?.fileName })\n          }}<gds-icon-checkmark *nggCoreElement></gds-icon-checkmark>\n        </ng-template>\n      </label>\n\n      <!-- LIST -->\n      <table\n        class=\"gds-table file-list\"\n        [attr.data-thook]=\"thook + '-file-list'\"\n        *ngIf=\"list\"\n      >\n        <thead>\n          <tr>\n            <th *ngIf=\"selectable\">\n              <div class=\"gds-field-checkbox-wrap\">\n                <input\n                  type=\"checkbox\"\n                  aria-label=\"Field label\"\n                  id=\"select-all\"\n                />\n                <label for=\"select-all\"></label>\n              </div>\n            </th>\n            <th class=\"gds-table__primary-col col-name\">\n              {{ t('dragDrop.label.fileName') }}\n            </th>\n            <th class=\"col-status\">\n              {{ t('dragDrop.label.fileStatus') }}\n            </th>\n            <th class=\"col-actions\"></th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            [attr.data-thook]=\"thook + '-file'\"\n            *ngFor=\"let file of files | value\"\n          >\n            <td *ngIf=\"selectable\">\n              <div class=\"gds-field-checkbox-wrap\">\n                <input\n                  type=\"checkbox\"\n                  aria-label=\"Field label\"\n                  [id]=\"'file-checkbox-' + file.id\"\n                />\n                <label [for]=\"'file-checkbox-' + file.id\"></label>\n              </div>\n            </td>\n            <td\n              class=\"gds-table__primary-col\"\n              [attr.data-thook]=\"thook + '-file-name'\"\n            >\n              {{ file.fileName }}\n            </td>\n            <td\n              [attr.data-thook]=\"thook + '-file-status'\"\n              [ngSwitch]=\"file.uploadState\"\n            >\n              <!-- UPLOADING STATE -->\n              <ng-template [ngSwitchCase]=\"'uploading'\">\n                <ng-template\n                  [ngTemplateOutlet]=\"progressTemplate\"\n                  [ngTemplateOutletContext]=\"{\n                    file: file,\n                  }\"\n                ></ng-template>\n              </ng-template>\n\n              <!-- UPLOADED STATE -->\n              <ng-template [ngSwitchCase]=\"'uploaded'\">\n                <ng-template\n                  [ngTemplateOutlet]=\"progressTemplate\"\n                  [ngTemplateOutletContext]=\"{\n                    file: file,\n                    text: t('dragDrop.text.fileStateUploaded'),\n                  }\"\n                ></ng-template>\n              </ng-template>\n\n              <!-- VALIDATING STATE -->\n              <ng-template [ngSwitchCase]=\"'validating'\">\n                <ng-template\n                  [ngTemplateOutlet]=\"progressTemplate\"\n                  [ngTemplateOutletContext]=\"{\n                    file: file,\n                    text: t('dragDrop.text.fileStateValidating'),\n                  }\"\n                ></ng-template>\n              </ng-template>\n\n              <!-- ABORTED STATE -->\n              <ng-template [ngSwitchCase]=\"'aborted'\">\n                <span\n                  class=\"error-text\"\n                  [transloco]=\"\n                    'dragDrop.error.' + file.internalStatusReasonCode\n                  \"\n                  [translocoParams]=\"translateParams(file)\"\n                  *ngIf=\"file.internalStatusReasonCode\"\n                ></span>\n              </ng-template>\n\n              <!-- ERROR STATE -->\n              <ng-template [ngSwitchCase]=\"'error'\">\n                <span\n                  class=\"error-text\"\n                  [transloco]=\"\n                    'dragDrop.error.' + file.internalStatusReasonCode\n                  \"\n                  [translocoParams]=\"translateParams(file)\"\n                  *ngIf=\"file.internalStatusReasonCode\"\n                ></span>\n                <br />\n                <a\n                  (click)=\"detailsClick.emit(file)\"\n                  style=\"cursor: pointer\"\n                  *ngIf=\"\n                    file.statusReasonInformation &&\n                    file.statusReasonInformation.length\n                  \"\n                >\n                  {{ t('dragDrop.link.viewDetails') }}\n                </a>\n              </ng-template>\n\n              <!-- DONE STATE -->\n              <ng-template [ngSwitchCase]=\"'done'\">\n                <span class=\"success-text\">{{\n                  t('dragDrop.text.fileStateDone')\n                }}</span>\n              </ng-template>\n            </td>\n\n            <td class=\"gds-table__numeric-col\">\n              <a\n                class=\"remove\"\n                tabindex=\"0\"\n                (click)=\"onRemove(file.id, file.uploadState)\"\n                *ngIf=\"!disableRemove.includes(file.uploadState)\"\n              >\n                <gds-icon-cross-small *nggCoreElement></gds-icon-cross-small>\n              </a>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </form>\n\n  <nggv-dialog\n    #deleteModalRef\n    [title]=\"t('dragDrop.text.fileCancelModalTitle')\"\n    [content]=\"\n      t('dragDrop.text.fileCancelModalContent', {\n        name: markedForDeletion?.fileName,\n      })\n    \"\n    [payload]=\"markedForDeletion\"\n    [buttons]=\"{\n      negative: 'dragDrop.text.fileCancelConfirm',\n      positive: 'dragDrop.text.fileCancelDeny',\n    }\"\n    (nggvNegativeEvent)=\"onConfirmRemove($any($event))\"\n  ></nggv-dialog>\n\n  <!-- PROGRESS TEMPLATE -->\n\n  <ng-template\n    #progressTemplate\n    let-file=\"\n    file\"\n    let-text=\"text\"\n  >\n    <div class=\"progress-wrapper\">\n      <progress\n        class=\"gds-progress-bar progress\"\n        max=\"100\"\n        [value]=\"file.progress\"\n      >\n        {{\n          t('dragDrop.text.fileStateUploading', {\n            uploaded:\n              (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n            size: file.raw?.size / 1024 | number: '0.0-0',\n            progress: file.progress,\n            unit: 'kB',\n          })\n        }}\n      </progress>\n      <ng-template [ngIf]=\"stateMap.validating.length\">\n        <div\n          class=\"gds-progress-indicator indicator\"\n          *ngIf=\"uploadStateIsArray(stateMap.validating); else singleValidation\"\n        >\n          <div\n            class=\"gds-progress-indicator__step\"\n            [class.-done]=\"i <= stateMap.validating.indexOf(file.status)\"\n            *ngFor=\"let state of stateMap.validating; let i = index\"\n          ></div>\n        </div>\n      </ng-template>\n      <ng-template #singleValidation>\n        <div class=\"gds-progress-indicator indicator\">\n          <!-- eslint-disable @angular-eslint/template/eqeqeq -->\n          <div\n            class=\"gds-progress-indicator__step\"\n            [class.-done]=\"file.status == stateMap.validating\"\n          ></div>\n          <!-- eslint-enable @angular-eslint/template/eqeqeq -->\n        </div>\n      </ng-template>\n    </div>\n    <span class=\"progress-text\">\n      {{\n        text ||\n          t('dragDrop.text.fileStateUploading', {\n            uploaded:\n              (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n            size: file.raw?.size / 1024 | number: '0.0-0',\n            progress: file.progress,\n            unit: 'kB',\n          })\n      }}\n    </span>\n  </ng-template>\n</ng-container>\n", styles: [":host .gds-drag-drop{width:100%}:host .gds-drag-drop__input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}:host .gds-drag-drop__label{display:flex;justify-content:center;align-items:center;gap:.5rem;border:2px dashed #868686;font-weight:500;padding:2.25em 1.5em}:host .gds-drag-drop__input+.gds-drag-drop__label em{font-style:normal;color:#0092e1;cursor:pointer}:host .gds-drag-drop table,:host .gds-drag-drop .gds-table{margin-top:2.25em}:host .gds-table{width:100%;font-family:SEBSansSerif,Arial,sans-serif;border-spacing:0}:host .gds-table th,:host .gds-table td{text-align:left;border-bottom:1px solid #e9e9e9}:host .gds-table thead{color:#333;font-size:1em}:host .gds-table thead tr{min-height:2em}:host .gds-table thead th,:host .gds-table thead td{border-bottom:1px solid #cecece;font-weight:500}:host .gds-table tbody{font-size:1em}:host .gds-table tbody tr{height:2.5em;border-bottom:1px solid #adadad}:host .gds-table tbody tr:hover td,:host .gds-table tbody tr:hover th{background-color:#f8f8f8}:host .gds-table tfoot{font-weight:500;font-size:1em}:host .gds-table tfoot tr{height:2.5em}:host .gds-table tfoot td{border-top:1px solid #cecece;border-bottom-width:0}:host tr .gds-table__numeric-col{text-align:right}:host tr .gds-table__negative-col{color:#bb000c}:host tr .gds-table__primary-col{color:#000}:host .gds-table__sortable-col{cursor:pointer;white-space:nowrap;margin-left:.5em}:host .gds-table__sortable-col:after{content:\"\";display:inline-block;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\");background-repeat:no-repeat;margin-left:.25rem;width:.625rem;height:1rem;vertical-align:text-bottom}:host .gds-table__sortable-col:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23007ac7' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%2341b0ee' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23007ac7' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%2341b0ee' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table .gds-field-checkbox-wrap{width:2.5rem}:host .gds-table .gds-field-checkbox-wrap label{box-shadow:none!important}:host .gds-table--fixed-l-col{overflow:auto;display:block;position:relative;max-width:100%}:host .gds-table--fixed-l-col td,:host .gds-table--fixed-l-col th{width:auto!important;min-width:150px}:host .gds-table--fixed-l-col td:first-child,:host .gds-table--fixed-l-col th:first-child{position:sticky;left:0;background-color:#fff;border-right:1px solid #e9e9e9}:host .gds-table--fixed-l-col thead th{top:0;z-index:1;position:sticky;background-color:#fff}:host .gds-table--fixed-l-col thead th:first-child{z-index:2}:host .gds-progress-bar{appearance:none;height:.3125rem;width:100%;position:relative;overflow:hidden;color:#45b400;border-width:0;background-color:#e9e9e9}:host .gds-progress-bar:before{display:block;position:absolute;content:\"\";left:-200px;width:200px;height:.3125rem;background-color:#45b400;animation:gds-progressbar-loading 2s linear infinite}:host .gds-progress-bar::-webkit-progress-value{background-color:transparent}:host .gds-progress-bar::-moz-progress-bar{background-color:transparent}:host .gds-progress-bar::-ms-fill{background-color:transparent;border-width:0}:host .gds-progress-bar::-webkit-progress-bar{background-color:#e9e9e9}@keyframes gds-progressbar-loading{0%{left:-30%;width:30%}50%{width:30%}70%{width:70%}80%{left:50%}95%{left:120%}to{left:100%}}:host .gds-progress-bar[value]:before{content:none}:host .gds-progress-bar[value]::-webkit-progress-value{background-color:#45b400}:host .gds-progress-bar[value]::-moz-progress-bar{background-color:#45b400}:host .gds-progress-bar[value]::-ms-fill{background-color:#45b400}:host .gds-progress-indicator{display:flex;width:100%}:host .gds-progress-indicator__step{flex-grow:1;height:.5rem;margin-right:.125rem;background-color:#e9e9e9}:host .gds-progress-indicator__step.-done{background-color:#45b400}:host .gds-progress-indicator__step:last-child{margin-right:0}:host .file-list th:first-child,:host .file-list td:first-child{width:auto}:host .filename{display:block;margin-bottom:.5rem}:host .col-name{width:40%}:host .col-status{width:30%}:host .col-actions{width:.1%}:host .progress-wrapper{display:flex}:host .progress,:host .indicator{height:.5rem}:host .gds-progress-indicator__step{margin-right:0}:host .progress{color:#45b400}:host .progress::-webkit-progress-value{background-color:#45b400}:host .progress::-moz-progress-bar{background-color:#45b400}:host .progress::-ms-fill{background-color:#45b400}:host .progress-text{display:block;margin-top:.125rem}:host .error-text{color:#bb000c}:host .success-text{color:#308800}:host .remove{padding:0 .5rem;font-size:1.5em;color:#868686;cursor:pointer;display:grid;place-content:center}:host .remove:hover,:host .remove:focus{color:#bb000c}\n"] }]
+        }], propDecorators: { deleteModalRef: [{
+                type: ViewChild,
+                args: ['deleteModalRef']
+            }], thook: [{
+                type: HostBinding,
+                args: ['attr.data-thook']
+            }, {
+                type: Input
+            }], service: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], disableRemove: [{
+                type: Input
+            }], fileLimit: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], list: [{
+                type: Input
+            }], throttle: [{
+                type: Input
+            }], retryAttempts: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], stateMap: [{
+                type: Input
+            }], fetchStatuses: [{
+                type: Input
+            }], errorCodes: [{
+                type: Input
+            }], stateChange: [{
+                type: Output
+            }], detailsClick: [{
+                type: Output
+            }], onBeforeUnload: [{
+                type: HostListener,
+                args: ['window:beforeunload', ['$event']]
+            }] } });
+
+class NggvDragDropModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggvDragDropModule, declarations: [ValuePipe, NggvDragDropComponent], imports: [HttpClientModule,
+            TranslocoModule,
+            NggvModalModule,
+            NggCoreWrapperModule,
+            CommonModule], exports: [NggvDragDropComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDragDropModule, providers: [
+            {
+                provide: TRANSLOCO_SCOPE,
+                useValue: 'dragDrop',
+            },
+        ], imports: [HttpClientModule,
+            TranslocoModule,
+            NggvModalModule,
+            NggCoreWrapperModule,
+            CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDragDropModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        HttpClientModule,
+                        TranslocoModule,
+                        NggvModalModule,
+                        NggCoreWrapperModule,
+                        CommonModule,
+                    ],
+                    declarations: [ValuePipe, NggvDragDropComponent],
+                    providers: [
+                        {
+                            provide: TRANSLOCO_SCOPE,
+                            useValue: 'dragDrop',
+                        },
+                    ],
+                    exports: [NggvDragDropComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NggvDragDropComponent, NggvDragDropModule, ValueImpurePipe, ValuePipe };
+//# sourceMappingURL=sebgroup-green-angular-src-v-angular-drag-drop.mjs.map