ngx-dropzone-next/fesm2022/ngx-dropzone-next.mjs

A highly configurable dropzone component for Angular.

import * as i0 from '@angular/core';
import { Directive, ChangeDetectionStrategy, Component, inject, input, booleanAttribute, output, HostBinding, HostListener, Injector, contentChildren, computed, viewChild, numberAttribute, signal, afterNextRender, DestroyRef, untracked } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

class NgxDropzoneLabelDirective {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgxDropzoneLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: NgxDropzoneLabelDirective, isStandalone: true, selector: "ngx-dropzone-label", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgxDropzoneLabelDirective, decorators: [{
            type: Directive,
            args: [{ selector: 'ngx-dropzone-label' }]
        }] });

function preventDefault(event) {
    event.preventDefault();
    event.stopPropagation();
}

class NgxDropzoneRemoveBadgeComponent {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgxDropzoneRemoveBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: NgxDropzoneRemoveBadgeComponent, isStandalone: true, selector: "ngx-dropzone-remove-badge", ngImport: i0, template: `
    <svg>
      <line x1="0" y1="0" x2="10" y2="10" />
      <line x1="0" y1="10" x2="10" y2="0" />
    </svg>
  `, isInline: true, styles: [":host{display:flex;justify-content:center;align-items:center;height:22px;width:22px;position:absolute;top:5px;right:5px;border-radius:50%;background:#bbb;color:#333;cursor:pointer}:host:hover{background:#aeaeae}:host>svg{height:10px;width:10px}:host>svg>line{stroke-width:2px;stroke:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgxDropzoneRemoveBadgeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-dropzone-remove-badge', template: `
    <svg>
      <line x1="0" y1="0" x2="10" y2="10" />
      <line x1="0" y1="10" x2="10" y2="0" />
    </svg>
  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;justify-content:center;align-items:center;height:22px;width:22px;position:absolute;top:5px;right:5px;border-radius:50%;background:#bbb;color:#333;cursor:pointer}:host:hover{background:#aeaeae}:host>svg{height:10px;width:10px}:host>svg>line{stroke-width:2px;stroke:#fff}\n"] }]
        }] });

class NgxDropzonePreviewComponent {
    constructor() {
        this.hostStyles = inject(DomSanitizer).bypassSecurityTrustStyle(`
    display: flex;
    height: 140px;
    min-height: 140px;
    min-width: 180px;
    max-width: 180px;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    margin: 10px;
    border-radius: 5px;
    position: relative;
  `);
        /** The file to preview. */
        this.file = input();
        /** Allow the user to remove files. */
        this.removable = input(false, { transform: booleanAttribute });
        /** Emitted when the element should be removed. */
        this.removed = output();
        /** Make the preview item focusable using the tab key. */
        this.tabIndex = 0;
    }
    keyEvent(event) {
        if (
        // Backspace
        event.keyCode === 8 ||
            // Delete
            event.keyCode === 46) {
            this.remove();
        }
    }
    /** Remove method to be used from the template. */
    _remove(event) {
        event.stopPropagation();
        this.remove();
    }
    /** Remove the preview item (use from component code). */
    remove() {
        if (this.removable()) {
            this.removed.emit(this.file());
        }
    }
    async readFile() {
        return new Promise((resolve, reject) => {
            const file = this.file();
            const reader = new FileReader();
            const cleanup = () => {
                reader.removeEventListener('load', onLoad);
                reader.removeEventListener('error', onError);
            };
            const onLoad = () => {
                cleanup();
                resolve(reader.result);
            };
            const onError = (error) => {
                cleanup();
                reject(error);
            };
            reader.addEventListener('load', onLoad);
            reader.addEventListener('error', onError);
            if (!file) {
                return reject('No file to read. Please provide a file using the [file] Input property.');
            }
            reader.readAsDataURL(file);
        });
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgxDropzonePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: NgxDropzonePreviewComponent, isStandalone: true, selector: "ngx-dropzone-preview", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { listeners: { "keyup": "keyEvent($event)" }, properties: { "style": "hostStyles", "tabindex": "this.tabIndex" } }, ngImport: i0, template: "<ng-content select=\"ngx-dropzone-label\"></ng-content>\n@if (removable()) {\n  <ngx-dropzone-remove-badge (click)=\"_remove($event)\" />\n}\n", styles: [":host{background-image:linear-gradient(to top,#ededed,#efefef,#f1f1f1,#f4f4f4,#f6f6f6)}:host:hover,:host:focus{background-image:linear-gradient(to top,#e3e3e3,#ebeaea,#e8e7e7,#ebeaea,#f4f4f4);outline:0}:host:hover ngx-dropzone-remove-badge,:host:focus ngx-dropzone-remove-badge{opacity:1}:host ngx-dropzone-remove-badge{opacity:0}:host ::ng-deep ngx-dropzone-label{overflow-wrap:break-word}\n"], dependencies: [{ kind: "component", type: NgxDropzoneRemoveBadgeComponent, selector: "ngx-dropzone-remove-badge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgxDropzonePreviewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-dropzone-preview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxDropzoneRemoveBadgeComponent], host: {
                        /** We use the HostBinding to pass these common styles to child components. */
                        '[style]': 'hostStyles',
                    }, template: "<ng-content select=\"ngx-dropzone-label\"></ng-content>\n@if (removable()) {\n  <ngx-dropzone-remove-badge (click)=\"_remove($event)\" />\n}\n", styles: [":host{background-image:linear-gradient(to top,#ededed,#efefef,#f1f1f1,#f4f4f4,#f6f6f6)}:host:hover,:host:focus{background-image:linear-gradient(to top,#e3e3e3,#ebeaea,#e8e7e7,#ebeaea,#f4f4f4);outline:0}:host:hover ngx-dropzone-remove-badge,:host:focus ngx-dropzone-remove-badge{opacity:1}:host ngx-dropzone-remove-badge{opacity:0}:host ::ng-deep ngx-dropzone-label{overflow-wrap:break-word}\n"] }]
        }], propDecorators: { keyEvent: [{
                type: HostListener,
                args: ['keyup', ['$event']]
            }], tabIndex: [{
                type: HostBinding,
                args: ['tabindex']
            }] } });

class NgxDropzoneComponent {
    constructor() {
        this.injector = inject(Injector);
        /** A list of the content-projected preview children. */
        this.previewChildren = contentChildren(NgxDropzonePreviewComponent, {
            descendants: true,
        });
        this.hasPreviews = computed(() => !!this.previewChildren().length);
        /** A template reference to the native file input element. */
        this.fileInput = viewChild.required('fileInput');
        /** Emitted when any files were added or rejected. */
        this.change = output();
        /** Set the accepted file types. Defaults to '*'. */
        this.accept = input('*');
        /** Disable any user interaction with the component. */
        this.disabled = input(false, { transform: booleanAttribute });
        /** Allow the selection of multiple files. */
        this.multiple = input(true, { transform: booleanAttribute });
        /** Set the maximum size a single file may have. */
        this.maxFileSize = input(undefined, { transform: numberAttribute });
        /** Allow the dropzone container to expand vertically. */
        this.expandable = input(false, { transform: booleanAttribute });
        /** Open the file selector on click. */
        this.disableClick = input(false, { transform: booleanAttribute });
        /** Allow dropping directories. */
        this.processDirectoryDrop = input(false, { transform: booleanAttribute });
        /** Expose the id, aria-label, aria-labelledby and aria-describedby of the native file input for proper accessibility. */
        this.id = input('');
        this.ariaLabel = input('', { alias: 'aria-label' });
        this.ariaLabelledby = input('', { alias: 'aria-labelledby' });
        this.ariaDescribedBy = input('', { alias: 'aria-describedby' });
        this.isHovered = signal(false);
    }
    ngOnChanges(changes) {
        if (changes['disabled'] && this.isHovered()) {
            this.isHovered.set(false);
        }
    }
    /** Show the native OS file explorer to select files. */
    _onClick() {
        if (!this.disableClick()) {
            this.showFileSelector();
        }
    }
    _onDragOver(event) {
        if (this.disabled()) {
            return;
        }
        preventDefault(event);
        this.isHovered.set(true);
    }
    _onDragLeave() {
        this.isHovered.set(false);
    }
    _onDrop(event) {
        if (this.disabled()) {
            return;
        }
        preventDefault(event);
        this.isHovered.set(false);
        import('./ngx-dropzone-next-on-drop-DVJ8FboQ.mjs').then((m) => m.onDrop(this, event));
    }
    showFileSelector() {
        if (!this.disabled()) {
            this.fileInput().nativeElement.click();
        }
    }
    async _onFilesSelected(event) {
        const files = event.target.files;
        // We must `await` before setting `value` to an empty string,
        // because it's going to prune the `files` on the input element.
        await import('./ngx-dropzone-next-on-drop-DVJ8FboQ.mjs').then((m) => m.handleFileDrop(this, files));
        // Reset the native file input element to allow selecting the same file again
        this.fileInput().nativeElement.value = '';
        // fix(#32): Prevent the default event behaviour which caused the change event to emit twice.
        preventDefault(event);
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgxDropzoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: NgxDropzoneComponent, isStandalone: true, selector: "ngx-dropzone, [ngx-dropzone]", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, disableClick: { classPropertyName: "disableClick", publicName: "disableClick", isSignal: true, isRequired: false, transformFunction: null }, processDirectoryDrop: { classPropertyName: "processDirectoryDrop", publicName: "processDirectoryDrop", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "click": "_onClick()", "dragover": "_onDragOver($event)", "dragleave": "_onDragLeave()", "drop": "_onDrop($event)" }, properties: { "class.ngx-dz-hovered": "isHovered()", "class.unclickable": "disableClick()", "class.expandable": "expandable()", "class.ngx-dz-disabled": "disabled()" } }, queries: [{ propertyName: "previewChildren", predicate: NgxDropzonePreviewComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<input\n  #fileInput\n  type=\"file\"\n  [id]=\"id()\"\n  [multiple]=\"multiple()\"\n  [accept]=\"accept()\"\n  [disabled]=\"disabled()\"\n  (change)=\"_onFilesSelected($event)\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedBy()\"\n/>\n\n@if (!hasPreviews()) {\n  <ng-content select=\"ngx-dropzone-label\" />\n}\n\n<ng-content select=\"ngx-dropzone-preview\" />\n<ng-content />\n", styles: [":host{display:flex;align-items:center;height:180px;background:#fff;cursor:pointer;color:#717386;border:2px dashed #717386;border-radius:5px;font-size:16px;overflow-x:auto}:host.ngx-dz-hovered{border-style:solid}:host.ngx-dz-disabled{opacity:.5;cursor:no-drop;pointer-events:none}:host.expandable{overflow:hidden;height:unset;min-height:180px;flex-wrap:wrap}:host.unclickable{cursor:default}:host ::ng-deep ngx-dropzone-label{text-align:center;z-index:10;margin:10px auto}:host input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}:host input:focus+::ng-deep ngx-dropzone-label{outline:1px dotted #000;outline:-webkit-focus-ring-color auto 5px}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgxDropzoneComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-dropzone, [ngx-dropzone]', host: {
                        '[class.ngx-dz-hovered]': 'isHovered()',
                        '[class.unclickable]': 'disableClick()',
                        '[class.expandable]': 'expandable()',
                        '[class.ngx-dz-disabled]': 'disabled()',
                    }, template: "<input\n  #fileInput\n  type=\"file\"\n  [id]=\"id()\"\n  [multiple]=\"multiple()\"\n  [accept]=\"accept()\"\n  [disabled]=\"disabled()\"\n  (change)=\"_onFilesSelected($event)\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedBy()\"\n/>\n\n@if (!hasPreviews()) {\n  <ng-content select=\"ngx-dropzone-label\" />\n}\n\n<ng-content select=\"ngx-dropzone-preview\" />\n<ng-content />\n", styles: [":host{display:flex;align-items:center;height:180px;background:#fff;cursor:pointer;color:#717386;border:2px dashed #717386;border-radius:5px;font-size:16px;overflow-x:auto}:host.ngx-dz-hovered{border-style:solid}:host.ngx-dz-disabled{opacity:.5;cursor:no-drop;pointer-events:none}:host.expandable{overflow:hidden;height:unset;min-height:180px;flex-wrap:wrap}:host.unclickable{cursor:default}:host ::ng-deep ngx-dropzone-label{text-align:center;z-index:10;margin:10px auto}:host input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}:host input:focus+::ng-deep ngx-dropzone-label{outline:1px dotted #000;outline:-webkit-focus-ring-color auto 5px}\n"] }]
        }], propDecorators: { _onClick: [{
                type: HostListener,
                args: ['click']
            }], _onDragOver: [{
                type: HostListener,
                args: ['dragover', ['$event']]
            }], _onDragLeave: [{
                type: HostListener,
                args: ['dragleave']
            }], _onDrop: [{
                type: HostListener,
                args: ['drop', ['$event']]
            }] } });

class NgxDropzoneImagePreviewComponent extends NgxDropzonePreviewComponent {
    constructor() {
        super();
        /** The image data source. */
        this.defaultImgLoading = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiByZ2IoMjQxLCAyNDIsIDI0Mykgbm9uZSByZXBlYXQgc2Nyb2xsIDAlIDAlOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjIyNHB4IiBoZWlnaHQ9IjIyNHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIxNCIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2U9IiM4NWEyYjYiIHN0cm9rZS1kYXNoYXJyYXk9IjIxLjk5MTE0ODU3NTEyODU1MiAyMS45OTExNDg1NzUxMjg1NTIiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CiAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGR1cj0iMS4xNjI3OTA2OTc2NzQ0MTg0cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGtleVRpbWVzPSIwOzEiIHZhbHVlcz0iMCA1MCA1MDszNjAgNTAgNTAiPjwvYW5pbWF0ZVRyYW5zZm9ybT4KPC9jaXJjbGU+CjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjEwIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZT0iI2JiY2VkZCIgc3Ryb2tlLWRhc2hhcnJheT0iMTUuNzA3OTYzMjY3OTQ4OTY2IDE1LjcwNzk2MzI2Nzk0ODk2NiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjE1LjcwNzk2MzI2Nzk0ODk2NiIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgZHVyPSIxLjE2Mjc5MDY5NzY3NDQxODRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIga2V5VGltZXM9IjA7MSIgdmFsdWVzPSIwIDUwIDUwOy0zNjAgNTAgNTAiPjwvYW5pbWF0ZVRyYW5zZm9ybT4KPC9jaXJjbGU+CjwhLS0gW2xkaW9dIGdlbmVyYXRlZCBieSBodHRwczovL2xvYWRpbmcuaW8vIC0tPjwvc3ZnPg==';
        this.imageSrc = signal(inject(DomSanitizer).bypassSecurityTrustUrl(this.defaultImgLoading));
        /** The file to preview. */
        this.file = input();
        afterNextRender(() => {
            this.renderImage();
        });
    }
    ngOnChanges(changes) {
        if (changes['file']) {
            this.renderImage();
        }
    }
    renderImage() {
        this.readFile()
            .then((img) => setTimeout(() => this.imageSrc.set(img)))
            .catch((err) => console.error(err));
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgxDropzoneImagePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: NgxDropzoneImagePreviewComponent, isStandalone: true, selector: "ngx-dropzone-image-preview", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
            {
                provide: NgxDropzonePreviewComponent,
                useExisting: NgxDropzoneImagePreviewComponent,
            },
        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<img [src]=\"imageSrc()\" />\n<ng-content select=\"ngx-dropzone-label\"></ng-content>\n@if (removable()) {\n  <ngx-dropzone-remove-badge (click)=\"_remove($event)\" />\n}\n", styles: [":host{min-width:unset!important;max-width:unset!important;padding:0!important}:host:hover img,:host:focus img{opacity:.7}:host:hover ngx-dropzone-remove-badge,:host:focus ngx-dropzone-remove-badge{opacity:1}:host ngx-dropzone-remove-badge{opacity:0}:host img{max-height:100%;border-radius:5px;opacity:.8}:host ::ng-deep ngx-dropzone-label{position:absolute;overflow-wrap:break-word}\n"], dependencies: [{ kind: "component", type: NgxDropzoneRemoveBadgeComponent, selector: "ngx-dropzone-remove-badge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgxDropzoneImagePreviewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-dropzone-image-preview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxDropzoneRemoveBadgeComponent], providers: [
                        {
                            provide: NgxDropzonePreviewComponent,
                            useExisting: NgxDropzoneImagePreviewComponent,
                        },
                    ], template: "<img [src]=\"imageSrc()\" />\n<ng-content select=\"ngx-dropzone-label\"></ng-content>\n@if (removable()) {\n  <ngx-dropzone-remove-badge (click)=\"_remove($event)\" />\n}\n", styles: [":host{min-width:unset!important;max-width:unset!important;padding:0!important}:host:hover img,:host:focus img{opacity:.7}:host:hover ngx-dropzone-remove-badge,:host:focus ngx-dropzone-remove-badge{opacity:1}:host ngx-dropzone-remove-badge{opacity:0}:host img{max-height:100%;border-radius:5px;opacity:.8}:host ::ng-deep ngx-dropzone-label{position:absolute;overflow-wrap:break-word}\n"] }]
        }], ctorParameters: () => [] });

class NgxDropzoneVideoPreviewComponent extends NgxDropzonePreviewComponent {
    constructor() {
        super();
        /** The video data source. */
        this._sanitizedVideoSrc = signal(null);
        const destroyRef = inject(DestroyRef);
        const sanitizer = inject(DomSanitizer);
        afterNextRender(() => {
            const file = untracked(this.file);
            if (!file)
                return;
            /**
             * We sanitize the URL here to enable the preview.
             * Please note that this could cause security issues!
             **/
            const videoObjectUrl = URL.createObjectURL(file);
            this._sanitizedVideoSrc.set(sanitizer.bypassSecurityTrustUrl(videoObjectUrl));
            destroyRef.onDestroy(() => URL.revokeObjectURL(videoObjectUrl));
        });
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgxDropzoneVideoPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: NgxDropzoneVideoPreviewComponent, isStandalone: true, selector: "ngx-dropzone-video-preview", providers: [
            {
                provide: NgxDropzonePreviewComponent,
                useExisting: NgxDropzoneVideoPreviewComponent,
            },
        ], usesInheritance: true, ngImport: i0, template: "@if (_sanitizedVideoSrc(); as sanitizedVideoSrc) {\n  <video controls (click)=\"$event.stopPropagation()\">\n    <source [src]=\"sanitizedVideoSrc\" />\n  </video>\n}\n\n<ng-content select=\"ngx-dropzone-label\"></ng-content>\n\n@if (removable()) {\n  <ngx-dropzone-remove-badge (click)=\"_remove($event)\" />\n}\n", styles: [":host{min-width:unset!important;max-width:unset!important;padding:0!important}:host:hover video,:host:focus video{opacity:.7}:host:hover ngx-dropzone-remove-badge,:host:focus ngx-dropzone-remove-badge{opacity:1}:host ngx-dropzone-remove-badge{opacity:0}:host video{max-height:100%;border-radius:5px}:host ::ng-deep ngx-dropzone-label{position:absolute;overflow-wrap:break-word}\n"], dependencies: [{ kind: "component", type: NgxDropzoneRemoveBadgeComponent, selector: "ngx-dropzone-remove-badge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgxDropzoneVideoPreviewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-dropzone-video-preview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxDropzoneRemoveBadgeComponent], providers: [
                        {
                            provide: NgxDropzonePreviewComponent,
                            useExisting: NgxDropzoneVideoPreviewComponent,
                        },
                    ], template: "@if (_sanitizedVideoSrc(); as sanitizedVideoSrc) {\n  <video controls (click)=\"$event.stopPropagation()\">\n    <source [src]=\"sanitizedVideoSrc\" />\n  </video>\n}\n\n<ng-content select=\"ngx-dropzone-label\"></ng-content>\n\n@if (removable()) {\n  <ngx-dropzone-remove-badge (click)=\"_remove($event)\" />\n}\n", styles: [":host{min-width:unset!important;max-width:unset!important;padding:0!important}:host:hover video,:host:focus video{opacity:.7}:host:hover ngx-dropzone-remove-badge,:host:focus ngx-dropzone-remove-badge{opacity:1}:host ngx-dropzone-remove-badge{opacity:0}:host video{max-height:100%;border-radius:5px}:host ::ng-deep ngx-dropzone-label{position:absolute;overflow-wrap:break-word}\n"] }]
        }], ctorParameters: () => [] });

/*
 * Public API Surface of ngx-dropzone-next
 */

/**
 * Generated bundle index. Do not edit.
 */

export { NgxDropzoneComponent, NgxDropzoneImagePreviewComponent, NgxDropzoneLabelDirective, NgxDropzonePreviewComponent, NgxDropzoneRemoveBadgeComponent, NgxDropzoneVideoPreviewComponent };
//# sourceMappingURL=ngx-dropzone-next.mjs.map