import * as i0 from '@angular/core';
import { inject, Renderer2, input, booleanAttribute, output, signal, Component, numberAttribute, ChangeDetectionStrategy, ElementRef, DestroyRef, Directive, TemplateRef } from '@angular/core';
import { GaugeValue, Gauge } from '@ngstarter-ui/components/gauge';
import { fromEvent } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

class UploadArea {
    _renderer = inject(Renderer2);
    accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
    allowHover = input(true, { ...(ngDevMode ? { debugName: "allowHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    fileSelected = output();
    isDropActive = signal(false, ...(ngDevMode ? [{ debugName: "isDropActive" }] : /* istanbul ignore next */ []));
    isDropInvalid = signal(false, ...(ngDevMode ? [{ debugName: "isDropInvalid" }] : /* istanbul ignore next */ []));
    get api() {
        return {
            isDropActive: this.isDropActive()
        };
    }
    handleDragOver(event) {
        event.preventDefault();
    }
    handleDragEnter(event) {
        if (event.dataTransfer) {
            const items = event.dataTransfer.items;
            let allFilesAreValid = true;
            if (this.accept()) {
                const accept = this.accept().split(',');
                if (items && items.length > 0) {
                    const draggedItems = Array.from(items);
                    allFilesAreValid = draggedItems.every((item) => item.kind === 'file' && this.isMimeTypeAllowed(item.type, accept));
                }
            }
            this.isDropActive.set(allFilesAreValid);
            this.isDropInvalid.set(!allFilesAreValid);
        }
        event.preventDefault();
        event.stopPropagation();
    }
    handleDragLeave(event) {
        const relatedTarget = event.relatedTarget;
        if (!relatedTarget.closest('.ngs-upload-area')) {
            this.isDropActive.set(false);
            this.isDropInvalid.set(false);
        }
        event.preventDefault();
    }
    handleDragEnd(event) {
        this.isDropActive.set(false);
        this.isDropInvalid.set(false);
        event.preventDefault();
    }
    handleDrop(event) {
        event.preventDefault();
        this.isDropActive.set(false);
        this.isDropInvalid.set(false);
        if (event.dataTransfer) {
            const accept = this.accept().split(',');
            const files = Array.from(event.dataTransfer?.files).filter(file => this.isMimeTypeAllowed(file.type, accept));
            if (files.length === 0) {
                return;
            }
            this.fileSelected.emit({
                multiple: this.multiple(),
                fileList: event.dataTransfer.files,
                event,
                files
            });
        }
    }
    isMimeTypeAllowed(fileMimeType, allowedMimeTypes) {
        return allowedMimeTypes.some(allowedType => {
            if (allowedType === '*/*' || allowedType === '*') {
                return true;
            }
            if (allowedType.endsWith('/*')) {
                const baseType = allowedType.slice(0, -2);
                return fileMimeType.startsWith(`${baseType}/`);
            }
            return fileMimeType === allowedType;
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: UploadArea, isStandalone: true, selector: "ngs-upload-area", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, allowHover: { classPropertyName: "allowHover", publicName: "allowHover", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected" }, host: { listeners: { "dragover": "handleDragOver($event)", "dragenter": "handleDragEnter($event)", "dragleave": "handleDragLeave($event)", "dragend": "handleDragEnd($event)", "drop": "handleDrop($event)" }, properties: { "class.is-drop-active": "isDropActive()", "class.is-drop-invalid": "isDropInvalid()", "class.is-allow-hover": "allowHover()" }, classAttribute: "ngs-upload-area" }, exportAs: ["ngsUploadArea"], ngImport: i0, template: "<div class=\"icon\">\n  <ng-content select=\"[ngsUploadAreaIcon]\"/>\n</div>\n<div class=\"content\">\n  <ng-content/>\n  <div class=\"state\" [class.is-active]=\"!isDropActive() && !isDropInvalid()\">\n    <ng-content select=\"[ngsUploadAreaMainState]\"/>\n  </div>\n  <div class=\"state\" [class.is-active]=\"isDropActive() && !isDropInvalid()\">\n    <ng-content select=\"[ngsUploadAreaDropState]\"/>\n  </div>\n  <div class=\"state\" [class.is-active]=\"isDropInvalid()\">\n    <ng-content select=\"[ngsUploadAreaInvalidState]\"/>\n  </div>\n</div>\n", styles: [":host{--ngs-upload-area-bg: transparent;--ngs-upload-area-padding: calc(var(--spacing, .25rem) * 10);--ngs-upload-area-border: 1px solid var(--ngs-color-subtle);--ngs-upload-area-border-radius: var(--ngs-radius-xl);--ngs-upload-area-font-size: var(--ngs-font-size-sm);--ngs-upload-area-color: var(--ngs-color-neutral-600);--ngs-upload-area-drop-active-border: 1px dashed var(--ngs-color-primary);--ngs-upload-area-drop-active-color: var(--ngs-color-primary);--ngs-upload-area-drop-active-bg: var(--ngs-color-surface-container);--ngs-upload-area-drop-invalid-border: 1px dashed var(--ngs-color-danger);--ngs-upload-area-drop-invalid-color: var(--ngs-color-danger);--ngs-upload-area-drop-invalid-bg: var(--ngs-color-danger-container-low);display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;color:var(--ngs-upload-area-color);border-radius:var(--ngs-upload-area-border-radius);border:var(--ngs-upload-area-border);font-size:var(--ngs-upload-area-font-size);background:var(--ngs-upload-area-bg);padding:var(--ngs-upload-area-padding)}:host.is-allow-hover:hover{cursor:pointer;border:var(--ngs-upload-area-drop-active-border);color:var(--ngs-upload-area-drop-active-color);background:var(--ngs-upload-area-drop-active-bg)}:host.is-drop-active{border:var(--ngs-upload-area-drop-active-border);color:var(--ngs-upload-area-drop-active-color);background:var(--ngs-upload-area-drop-active-bg)}:host.is-drop-invalid{border:var(--ngs-upload-area-drop-invalid-border);color:var(--ngs-upload-area-drop-invalid-color);background:var(--ngs-upload-area-drop-invalid-bg)}:host .state{display:none}:host .state.is-active{display:block}:host .icon{margin-bottom:calc(var(--spacing, .25rem) * 2)}:host .icon:empty{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadArea, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-upload-area', exportAs: 'ngsUploadArea', imports: [], host: {
                        'class': 'ngs-upload-area',
                        '[class.is-drop-active]': 'isDropActive()',
                        '[class.is-drop-invalid]': 'isDropInvalid()',
                        '[class.is-allow-hover]': 'allowHover()',
                        '(dragover)': 'handleDragOver($event)',
                        '(dragenter)': 'handleDragEnter($event)',
                        '(dragleave)': 'handleDragLeave($event)',
                        '(dragend)': 'handleDragEnd($event)',
                        '(drop)': 'handleDrop($event)',
                    }, template: "<div class=\"icon\">\n  <ng-content select=\"[ngsUploadAreaIcon]\"/>\n</div>\n<div class=\"content\">\n  <ng-content/>\n  <div class=\"state\" [class.is-active]=\"!isDropActive() && !isDropInvalid()\">\n    <ng-content select=\"[ngsUploadAreaMainState]\"/>\n  </div>\n  <div class=\"state\" [class.is-active]=\"isDropActive() && !isDropInvalid()\">\n    <ng-content select=\"[ngsUploadAreaDropState]\"/>\n  </div>\n  <div class=\"state\" [class.is-active]=\"isDropInvalid()\">\n    <ng-content select=\"[ngsUploadAreaInvalidState]\"/>\n  </div>\n</div>\n", styles: [":host{--ngs-upload-area-bg: transparent;--ngs-upload-area-padding: calc(var(--spacing, .25rem) * 10);--ngs-upload-area-border: 1px solid var(--ngs-color-subtle);--ngs-upload-area-border-radius: var(--ngs-radius-xl);--ngs-upload-area-font-size: var(--ngs-font-size-sm);--ngs-upload-area-color: var(--ngs-color-neutral-600);--ngs-upload-area-drop-active-border: 1px dashed var(--ngs-color-primary);--ngs-upload-area-drop-active-color: var(--ngs-color-primary);--ngs-upload-area-drop-active-bg: var(--ngs-color-surface-container);--ngs-upload-area-drop-invalid-border: 1px dashed var(--ngs-color-danger);--ngs-upload-area-drop-invalid-color: var(--ngs-color-danger);--ngs-upload-area-drop-invalid-bg: var(--ngs-color-danger-container-low);display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;color:var(--ngs-upload-area-color);border-radius:var(--ngs-upload-area-border-radius);border:var(--ngs-upload-area-border);font-size:var(--ngs-upload-area-font-size);background:var(--ngs-upload-area-bg);padding:var(--ngs-upload-area-padding)}:host.is-allow-hover:hover{cursor:pointer;border:var(--ngs-upload-area-drop-active-border);color:var(--ngs-upload-area-drop-active-color);background:var(--ngs-upload-area-drop-active-bg)}:host.is-drop-active{border:var(--ngs-upload-area-drop-active-border);color:var(--ngs-upload-area-drop-active-color);background:var(--ngs-upload-area-drop-active-bg)}:host.is-drop-invalid{border:var(--ngs-upload-area-drop-invalid-border);color:var(--ngs-upload-area-drop-invalid-color);background:var(--ngs-upload-area-drop-invalid-bg)}:host .state{display:none}:host .state.is-active{display:block}:host .icon{margin-bottom:calc(var(--spacing, .25rem) * 2)}:host .icon:empty{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], allowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowHover", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }] } });

class FileList {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FileList, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: FileList, isStandalone: true, selector: "ngs-file-list", host: { classAttribute: "ngs-file-list not-prose" }, exportAs: ["ngsFileList"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{--ngs-file-list-gap: calc(var(--spacing, .25rem) * 3);display:flex;flex-direction:column;gap:var(--ngs-file-list-gap)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FileList, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-file-list', exportAs: 'ngsFileList', host: {
                        'class': 'ngs-file-list not-prose'
                    }, template: "<ng-content/>\n", styles: [":host{--ngs-file-list-gap: calc(var(--spacing, .25rem) * 3);display:flex;flex-direction:column;gap:var(--ngs-file-list-gap)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class File {
    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
    progress = input(0, { ...(ngDevMode ? { debugName: "progress" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    progressingMessage = input(...(ngDevMode ? [undefined, { debugName: "progressingMessage" }] : /* istanbul ignore next */ []));
    errorMessage = input(...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : /* istanbul ignore next */ []));
    remainingTime = input(...(ngDevMode ? [undefined, { debugName: "remainingTime" }] : /* istanbul ignore next */ []));
    state = input('uploading', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: File, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: File, isStandalone: true, selector: "ngs-file", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressingMessage: { classPropertyName: "progressingMessage", publicName: "progressingMessage", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, remainingTime: { classPropertyName: "remainingTime", publicName: "remainingTime", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-error": "state() === 'error'" }, classAttribute: "ngs-file not-prose" }, exportAs: ["ngsFile"], ngImport: i0, template: "<div class=\"content\">\n  <div class=\"flex items-center min-w-0\">\n    <div class=\"overflow-hidden overflow-ellipsis whitespace-nowrap grow name\">{{ name() }}</div>\n    <div class=\"controls\">\n      <ng-content select=\"ngs-file-control,[ngs-file-control]\"/>\n    </div>\n  </div>\n  @if (size() || (state() === 'uploading' && progress())) {\n    <div class=\"info\">\n      @if (size()) {\n        <span class=\"uppercase\">{{ size() }}</span>\n      }\n      @if (size() && progress()) {\n        ,\n      }\n      @if (progress()) {\n        {{ progress() }}%\n      }\n      @if (remainingTime()) {\n        {{ remainingTime() }}\n      }\n    </div>\n  }\n  @if (progress()) {\n    <div class=\"progress\">\n      <div class=\"progress-bar\" [style.width.%]=\"progress()\"></div>\n    </div>\n  }\n  @if (state() === 'error' && errorMessage()) {\n    <div class=\"error\">\n      {{ errorMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{--ngs-file-padding: calc(var(--spacing, .25rem) * 4);--ngs-file-border-radius: var(--ngs-radius-xl);--ngs-file-bg: var(--ngs-color-surface-container);--ngs-file-error-bg: var(--ngs-color-danger-container-low);--ngs-file-controls-gap: calc(var(--spacing, .25rem) * 1.5);--ngs-file-progress-margin: calc(var(--spacing, .25rem) * 2) 0 0 0;--ngs-file-progress-bg: var(--ngs-color-surface-container-highest);--ngs-file-progress-height: calc(var(--spacing, .25rem) * 1);--ngs-file-progress-border-radius: var(--ngs-radius-lg);--ngs-file-progress-bar-bg: var(--ngs-color-primary);--ngs-file-control-color: var(--ngs-color-neutral-500);--ngs-file-control-hover-color: var(--ngs-color-primary);--ngs-file-control-font-size: var(--ngs-font-size-xl);--ngs-file-name-font-size: var(--ngs-font-size-sm);--ngs-file-info-font-size: var(--ngs-font-size-xs);--ngs-file-info-color: var(--ngs-color-neutral-600);--ngs-file-error-font-size: var(--ngs-font-size-xs);--ngs-file-error-color: var(--ngs-color-danger);display:flex;align-items:center;width:100%;overflow:hidden;text-overflow:ellipsis;padding:var(--ngs-file-padding);border-radius:var(--ngs-file-border-radius);background:var(--ngs-file-bg)}:host .name{font-size:var(--ngs-file-name-font-size)}:host .info{font-size:var(--ngs-file-info-font-size);color:var(--ngs-file-info-color)}:host .content{min-width:0;flex-grow:1}:host .controls{display:flex;align-items:center;gap:var(--ngs-file-controls-gap)}:host .progress{background:var(--ngs-file-progress-bg);height:var(--ngs-file-progress-height);flex:none;border-radius:var(--ngs-file-progress-border-radius);margin:var(--ngs-file-progress-margin)}:host .progress-bar{background:var(--ngs-file-progress-bar-bg);border-radius:var(--ngs-file-progress-border-radius);height:100%}:host .error{font-size:var(--ngs-file-error-font-size);color:var(--ngs-file-error-color)}:host.has-error{background:var(--ngs-file-error-bg)}:host-context(html.dark){--ngs-file-error-color: var(--ngs-color-danger-container-high);--ngs-file-progress-bg: var(--ngs-color-neutral-500);--ngs-file-control-hover-color: var(--ngs-color-neutral-300)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: File, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-file', exportAs: 'ngsFile', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'ngs-file not-prose',
                        '[class.has-error]': "state() === 'error'"
                    }, template: "<div class=\"content\">\n  <div class=\"flex items-center min-w-0\">\n    <div class=\"overflow-hidden overflow-ellipsis whitespace-nowrap grow name\">{{ name() }}</div>\n    <div class=\"controls\">\n      <ng-content select=\"ngs-file-control,[ngs-file-control]\"/>\n    </div>\n  </div>\n  @if (size() || (state() === 'uploading' && progress())) {\n    <div class=\"info\">\n      @if (size()) {\n        <span class=\"uppercase\">{{ size() }}</span>\n      }\n      @if (size() && progress()) {\n        ,\n      }\n      @if (progress()) {\n        {{ progress() }}%\n      }\n      @if (remainingTime()) {\n        {{ remainingTime() }}\n      }\n    </div>\n  }\n  @if (progress()) {\n    <div class=\"progress\">\n      <div class=\"progress-bar\" [style.width.%]=\"progress()\"></div>\n    </div>\n  }\n  @if (state() === 'error' && errorMessage()) {\n    <div class=\"error\">\n      {{ errorMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{--ngs-file-padding: calc(var(--spacing, .25rem) * 4);--ngs-file-border-radius: var(--ngs-radius-xl);--ngs-file-bg: var(--ngs-color-surface-container);--ngs-file-error-bg: var(--ngs-color-danger-container-low);--ngs-file-controls-gap: calc(var(--spacing, .25rem) * 1.5);--ngs-file-progress-margin: calc(var(--spacing, .25rem) * 2) 0 0 0;--ngs-file-progress-bg: var(--ngs-color-surface-container-highest);--ngs-file-progress-height: calc(var(--spacing, .25rem) * 1);--ngs-file-progress-border-radius: var(--ngs-radius-lg);--ngs-file-progress-bar-bg: var(--ngs-color-primary);--ngs-file-control-color: var(--ngs-color-neutral-500);--ngs-file-control-hover-color: var(--ngs-color-primary);--ngs-file-control-font-size: var(--ngs-font-size-xl);--ngs-file-name-font-size: var(--ngs-font-size-sm);--ngs-file-info-font-size: var(--ngs-font-size-xs);--ngs-file-info-color: var(--ngs-color-neutral-600);--ngs-file-error-font-size: var(--ngs-font-size-xs);--ngs-file-error-color: var(--ngs-color-danger);display:flex;align-items:center;width:100%;overflow:hidden;text-overflow:ellipsis;padding:var(--ngs-file-padding);border-radius:var(--ngs-file-border-radius);background:var(--ngs-file-bg)}:host .name{font-size:var(--ngs-file-name-font-size)}:host .info{font-size:var(--ngs-file-info-font-size);color:var(--ngs-file-info-color)}:host .content{min-width:0;flex-grow:1}:host .controls{display:flex;align-items:center;gap:var(--ngs-file-controls-gap)}:host .progress{background:var(--ngs-file-progress-bg);height:var(--ngs-file-progress-height);flex:none;border-radius:var(--ngs-file-progress-border-radius);margin:var(--ngs-file-progress-margin)}:host .progress-bar{background:var(--ngs-file-progress-bar-bg);border-radius:var(--ngs-file-progress-border-radius);height:100%}:host .error{font-size:var(--ngs-file-error-font-size);color:var(--ngs-file-error-color)}:host.has-error{background:var(--ngs-file-error-bg)}:host-context(html.dark){--ngs-file-error-color: var(--ngs-color-danger-container-high);--ngs-file-progress-bg: var(--ngs-color-neutral-500);--ngs-file-control-hover-color: var(--ngs-color-neutral-300)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], progressingMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressingMessage", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], remainingTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "remainingTime", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }] } });

class FileControl {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FileControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: FileControl, isStandalone: true, selector: "ngs-file-control,[ngs-file-control]", host: { classAttribute: "ngs-file-control not-prose" }, exportAs: ["ngsFileControl"], ngImport: i0, template: "<ng-content />\n", styles: [":host{flex:none;cursor:pointer;display:inline-flex;color:var(--ngs-file-control-color)}:host:hover{color:var(--ngs-file-control-hover-color)}:host ::ng-deep ngs-icon{--ngs-icon-size: calc(var(--spacing, .25rem) * 6)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FileControl, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-file-control,[ngs-file-control]', exportAs: 'ngsFileControl', host: {
                        'class': 'ngs-file-control not-prose'
                    }, template: "<ng-content />\n", styles: [":host{flex:none;cursor:pointer;display:inline-flex;color:var(--ngs-file-control-color)}:host:hover{color:var(--ngs-file-control-hover-color)}:host ::ng-deep ngs-icon{--ngs-icon-size: calc(var(--spacing, .25rem) * 6)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class FilesGrid {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FilesGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: FilesGrid, isStandalone: true, selector: "ngs-files-grid", host: { classAttribute: "ngs-files-grid not-prose" }, exportAs: ["ngsFilesGrid"], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 5)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FilesGrid, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-files-grid', exportAs: 'ngsFilesGrid', host: {
                        'class': 'ngs-files-grid not-prose'
                    }, template: "<ng-content />\n", styles: [":host{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 5)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class GridFile {
    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
    progress = input(0, { ...(ngDevMode ? { debugName: "progress" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    progressingMessage = input(...(ngDevMode ? [undefined, { debugName: "progressingMessage" }] : /* istanbul ignore next */ []));
    errorMessage = input(...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : /* istanbul ignore next */ []));
    remainingTime = input(...(ngDevMode ? [undefined, { debugName: "remainingTime" }] : /* istanbul ignore next */ []));
    state = input('uploading', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GridFile, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: GridFile, isStandalone: true, selector: "ngs-grid-file", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressingMessage: { classPropertyName: "progressingMessage", publicName: "progressingMessage", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, remainingTime: { classPropertyName: "remainingTime", publicName: "remainingTime", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-error": "state() === 'error'" }, classAttribute: "ngs-grid-file not-prose" }, exportAs: ["ngsGridFile"], ngImport: i0, template: "<div class=\"flex items-center gap-2.5\">\n  <div class=\"icon\">\n    <ng-content select=\"[ngsFileIcon]\"/>\n  </div>\n  <div>\n    <div class=\"text-sm overflow-hidden text-ellipsis whitespace-nowrap max-w-[220px]\">{{ name() }}</div>\n    @if (size()) {\n      <div class=\"text-xs text-neutral-500 overflow-hidden text-ellipsis whitespace-nowrap max-w-[220px]\">{{ size() }}</div>\n    }\n  </div>\n</div>\n<div class=\"flex items-center gap-1\">\n  @if (state() === 'uploading') {\n    <ngs-gauge class=\"size-10\" [value]=\"progress()\">\n      <ngs-gauge-value class=\"text-2xs\">{{ progress() }}%</ngs-gauge-value>\n    </ngs-gauge>\n  }\n\n  <div class=\"controls\">\n    <ng-content select=\"[ngsGridFileControl]\"/>\n  </div>\n</div>\n\n@if (state() === 'error' && errorMessage()) {\n  <div class=\"error\">\n    {{ errorMessage() }}\n  </div>\n}\n", styles: [":host{--ngs-file-padding: calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 3);--ngs-file-gap: calc(var(--spacing, .25rem) * 4);--ngs-file-border-radius: var(--ngs-radius-xl);--ngs-file-bg: var(--ngs-color-surface-container);--ngs-file-error-bg: var(--ngs-color-danger-container-low);--ngs-file-controls-gap: calc(var(--spacing, .25rem) * 1);--ngs-file-error-font-size: var(--ngs-font-size-xs);--ngs-file-error-color: var(--ngs-color-danger);display:flex;min-width:240px;align-items:center;justify-content:space-between;position:relative;padding:var(--ngs-file-padding);gap:var(--ngs-file-gap);border-radius:var(--ngs-file-border-radius);background:var(--ngs-file-bg)}:host .icon:empty{display:none}:host .icon{width:32px;max-height:40px}:host .controls{display:flex;gap:var(--ngs-file-controls-gap)}:host .controls:empty{display:none}:host .error{font-size:var(--ngs-file-error-font-size);color:var(--ngs-file-error-color);position:absolute;bottom:0;transform:translateY(100%);left:calc(var(--spacing, .25rem) * 2)}:host.has-error{background:var(--ngs-file-error-bg)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: GaugeValue, selector: "ngs-gauge-value", exportAs: ["ngsGaugeValue"] }, { kind: "component", type: Gauge, selector: "ngs-gauge", inputs: ["value", "strokeWidth", "radius"], exportAs: ["ngsGauge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GridFile, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-grid-file', exportAs: 'ngsGridFile', imports: [
                        GaugeValue,
                        Gauge
                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'ngs-grid-file not-prose',
                        '[class.has-error]': "state() === 'error'"
                    }, template: "<div class=\"flex items-center gap-2.5\">\n  <div class=\"icon\">\n    <ng-content select=\"[ngsFileIcon]\"/>\n  </div>\n  <div>\n    <div class=\"text-sm overflow-hidden text-ellipsis whitespace-nowrap max-w-[220px]\">{{ name() }}</div>\n    @if (size()) {\n      <div class=\"text-xs text-neutral-500 overflow-hidden text-ellipsis whitespace-nowrap max-w-[220px]\">{{ size() }}</div>\n    }\n  </div>\n</div>\n<div class=\"flex items-center gap-1\">\n  @if (state() === 'uploading') {\n    <ngs-gauge class=\"size-10\" [value]=\"progress()\">\n      <ngs-gauge-value class=\"text-2xs\">{{ progress() }}%</ngs-gauge-value>\n    </ngs-gauge>\n  }\n\n  <div class=\"controls\">\n    <ng-content select=\"[ngsGridFileControl]\"/>\n  </div>\n</div>\n\n@if (state() === 'error' && errorMessage()) {\n  <div class=\"error\">\n    {{ errorMessage() }}\n  </div>\n}\n", styles: [":host{--ngs-file-padding: calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 3);--ngs-file-gap: calc(var(--spacing, .25rem) * 4);--ngs-file-border-radius: var(--ngs-radius-xl);--ngs-file-bg: var(--ngs-color-surface-container);--ngs-file-error-bg: var(--ngs-color-danger-container-low);--ngs-file-controls-gap: calc(var(--spacing, .25rem) * 1);--ngs-file-error-font-size: var(--ngs-font-size-xs);--ngs-file-error-color: var(--ngs-color-danger);display:flex;min-width:240px;align-items:center;justify-content:space-between;position:relative;padding:var(--ngs-file-padding);gap:var(--ngs-file-gap);border-radius:var(--ngs-file-border-radius);background:var(--ngs-file-bg)}:host .icon:empty{display:none}:host .icon{width:32px;max-height:40px}:host .controls{display:flex;gap:var(--ngs-file-controls-gap)}:host .controls:empty{display:none}:host .error{font-size:var(--ngs-file-error-font-size);color:var(--ngs-file-error-color);position:absolute;bottom:0;transform:translateY(100%);left:calc(var(--spacing, .25rem) * 2)}:host.has-error{background:var(--ngs-file-error-bg)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], progressingMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressingMessage", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], remainingTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "remainingTime", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }] } });

class UploadContainer {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: UploadContainer, isStandalone: true, selector: "ngs-upload-container", ngImport: i0, template: "<ng-content select=\"ngs-upload-area\"/>\n<div class=\"flex items-center justify-between mt-2 hints\">\n  <ng-content select=\"ngs-upload-allowed-types\"/>\n  <ng-content select=\"ngs-upload-max-file-size\"/>\n</div>\n", styles: [":host{display:block}:host .hints:empty{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadContainer, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-upload-container', imports: [], template: "<ng-content select=\"ngs-upload-area\"/>\n<div class=\"flex items-center justify-between mt-2 hints\">\n  <ng-content select=\"ngs-upload-allowed-types\"/>\n  <ng-content select=\"ngs-upload-max-file-size\"/>\n</div>\n", styles: [":host{display:block}:host .hints:empty{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class UploadMaxFileSize {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadMaxFileSize, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: UploadMaxFileSize, isStandalone: true, selector: "ngs-upload-max-file-size", ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:block;font-size:var(--ngs-font-size-xs)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadMaxFileSize, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-upload-max-file-size', imports: [], template: "<ng-content/>\n", styles: [":host{display:block;font-size:var(--ngs-font-size-xs)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class UploadAllowedTypes {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAllowedTypes, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: UploadAllowedTypes, isStandalone: true, selector: "ngs-upload-allowed-types", ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:block;font-size:var(--ngs-font-size-xs)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAllowedTypes, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-upload-allowed-types', imports: [], template: "<ng-content/>\n", styles: [":host{display:block;font-size:var(--ngs-font-size-xs)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class UploadTriggerDirective {
    _elementRef = inject(ElementRef);
    _renderer = inject(Renderer2);
    _destroyRef = inject(DestroyRef);
    accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    fileSelected = output();
    _handleClick() {
        const element = this._renderer.createElement('input');
        this._renderer.setAttribute(element, 'type', 'file');
        let accept = this.accept();
        if (!accept) {
            accept = this._elementRef.nativeElement.getAttribute('accept') || '';
        }
        if (accept) {
            this._renderer.setAttribute(element, 'accept', accept);
        }
        if (this.multiple()) {
            this._renderer.setAttribute(element, 'multiple', '');
        }
        fromEvent(element, 'change')
            .pipe(takeUntilDestroyed(this._destroyRef))
            .subscribe(event => {
            const files = [];
            if (element.files) {
                for (let i = 0; i < element.files.length; i++) {
                    files.push(element.files[i]);
                }
            }
            this.fileSelected.emit({
                multiple: this.multiple(),
                fileList: element.files,
                event,
                files
            });
        });
        element.click();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: UploadTriggerDirective, isStandalone: true, selector: "[ngsUploadTrigger]", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected" }, host: { listeners: { "click": "_handleClick()" } }, exportAs: ["ngsUploadTrigger"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadTriggerDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsUploadTrigger]',
                    exportAs: 'ngsUploadTrigger',
                    standalone: true,
                    host: {
                        '(click)': '_handleClick()'
                    }
                }]
        }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }] } });

class UploadAreaIconDirective {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAreaIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: UploadAreaIconDirective, isStandalone: true, selector: "[ngsUploadAreaIcon]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAreaIconDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsUploadAreaIcon]'
                }]
        }] });

class UploadAreaMainStateDirective {
    templateRef = inject(TemplateRef, { optional: true });
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAreaMainStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: UploadAreaMainStateDirective, isStandalone: true, selector: "[ngsUploadAreaMainState]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAreaMainStateDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsUploadAreaMainState]'
                }]
        }] });

class UploadAreaDropStateDirective {
    templateRef = inject(TemplateRef, { optional: true });
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAreaDropStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: UploadAreaDropStateDirective, isStandalone: true, selector: "[ngsUploadAreaDropState]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAreaDropStateDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsUploadAreaDropState]'
                }]
        }] });

class UploadAreaInvalidStateDirective {
    templateRef = inject(TemplateRef, { optional: true });
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAreaInvalidStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: UploadAreaInvalidStateDirective, isStandalone: true, selector: "[ngsUploadAreaInvalidState]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UploadAreaInvalidStateDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsUploadAreaInvalidState]'
                }]
        }] });

class FileIconDirective {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FileIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: FileIconDirective, isStandalone: true, selector: "[ngsFileIcon]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FileIconDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsFileIcon]'
                }]
        }] });

class GridFileControlDirective {
    constructor() { }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GridFileControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: GridFileControlDirective, isStandalone: true, selector: "[ngsGridFileControl]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GridFileControlDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsGridFileControl]'
                }]
        }], ctorParameters: () => [] });

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

export { File, FileControl, FileIconDirective, FileList, FilesGrid, GridFile, GridFileControlDirective, UploadAllowedTypes, UploadArea, UploadAreaDropStateDirective, UploadAreaIconDirective, UploadAreaInvalidStateDirective, UploadAreaMainStateDirective, UploadContainer, UploadMaxFileSize, UploadTriggerDirective };
//# sourceMappingURL=ngstarter-ui-components-upload.mjs.map
