@updevs/components 1.0.0-alpha.3 → 1.0.0-alpha.30

package/fesm2022/updevs-components-form-controls-file-upload.mjs

@@ -0,0 +1,264 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, input, signal, computed, inject, Component, HostBinding, Output, NgModule } from '@angular/core';
+import { ColumnSizeHelper } from '@updevs/components';
+import { PlatformService, Tools } from '@updevs/sdk/core';
+import { BaseControl } from '@updevs/components/form-controls/abstractions';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@jsverse/transloco';
+import { TranslocoModule } from '@jsverse/transloco';
+import * as i3 from '@updevs/components/button';
+import { UpdButtonModule } from '@updevs/components/button';
+import * as i4 from '@updevs/icons';
+import { UpdIconsModule } from '@updevs/icons';
+import * as i5 from '@updevs/components/popover';
+import { UpdPopoverModule } from '@updevs/components/popover';
+
+class FileUploadComponent extends BaseControl {
+    constructor() {
+        super(...arguments);
+        this.hostWrapperClasses = '';
+        this.fileChanged = new EventEmitter();
+        this.fileName = input();
+        this.title = input();
+        this.allowFilesDrop = input(false);
+        this.isMultiple = input(false); // TODO: implement
+        this.allowedExtensions = input('*');
+        this.minFileSize = input();
+        this.maxFileSize = input();
+        this.layout = input('vertical');
+        this.isOver = signal(false);
+        this.showValidationStatus = computed(() => !!this.validationStatus() && (this.validationStatus() === 'invalid' || this.showValidStatus()));
+        this.validationStatusClass = computed(() => {
+            if (this.showValidationStatus()) {
+                return `is-${this.validationStatus()}`;
+            }
+            return '';
+        });
+        this.validationStatusBorderClass = computed(() => {
+            if (this.showValidationStatus()) {
+                return this.validationStatus() === 'invalid' ? 'border-danger' : 'border-success';
+            }
+            return '';
+        });
+        this.errorsList = computed(() => [...this.validationStatusTexts.concat(this.fileUploadErrors())]);
+        this.currentFiles = signal(undefined);
+        this.labelSizeClasses = computed(() => {
+            if (this.layout() !== 'horizontal') {
+                return 'form-label';
+            }
+            return ColumnSizeHelper.getClasses('col-form-label', ColumnSizeHelper.getSizeClasses(this.labelColSize(), 3));
+        });
+        this.firstFileName = computed(() => (this.currentFiles()?.length || 0) > 0 ? this.currentFiles()[0].name : this.fileName());
+        this.defaultMobileDesc = {
+            text: 'UpDevs.FormControls.FileUpload.DropzoneMobileDescription',
+            isTranslated: false
+        };
+        this.defaultDesktopDesc = {
+            text: 'UpDevs.FormControls.FileUpload.DropzoneDesktopDescription',
+            isTranslated: false
+        };
+        this.fileUploadErrors = signal([]);
+        this.platformService = inject(PlatformService);
+    }
+    get titleText() {
+        return this._textService.getText(this.title(), { isMultiple: this.isMultiple() });
+    }
+    get dropDescriptionText() {
+        return !!this.descriptionText
+            ? this.descriptionText
+            : this._textService.getText(this.platformService.isMobile ? this.defaultMobileDesc : this.defaultDesktopDesc, { isMultiple: this.isMultiple() });
+    }
+    get supportsAdvancedUpload() {
+        const div = document.createElement('div');
+        return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window;
+    }
+    onFileChange(event) {
+        event.stopPropagation();
+        const files = Array.from(event.target.files);
+        if (!!files) {
+            this.currentFiles.set([...files]);
+            const errors = files.map(f => this.getFileErrors(f)).reduce((acc, e) => acc.concat(e), []);
+            if (errors.length > 0) {
+                this.fileUploadErrors.set([...errors]);
+                return;
+            }
+            if (this.isMultiple()) {
+                // TODO: implement
+            }
+            else {
+                const file = files[0];
+                const reader = new FileReader();
+                reader.onload = (fileReader) => this.fileChanged.emit({ file: file, dataUrl: fileReader.target.result });
+                reader.readAsDataURL(file);
+            }
+        }
+    }
+    removeFile() {
+        this.currentFiles.set([]);
+        this.fileChanged.emit(undefined);
+    }
+    onDrag(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    onDragStart(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    onDragEnd(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isOver.set(false);
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isOver.set(true);
+    }
+    onDragEnter(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isOver.set(true);
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isOver.set(false);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isOver.set(false);
+        const droppedFiles = event.dataTransfer.files;
+    }
+    getFileErrors(file) {
+        const extension = `.${file.name.split('.').pop() || ''}`;
+        const fileSizeInKB = Math.round(file.size / 1024);
+        const errors = [];
+        if (this.allowedExtensions() !== '*' && !this.allowedExtensions().includes(extension)) {
+            errors.push(this._textService.getText({ text: 'UpDevs.FormControls.FileUpload.ExtensionNotAllowed', isTranslated: false }, {
+                fileName: file.name,
+                extension,
+                hasMultipleExt: this.allowedExtensions().includes(','),
+                allowedExtensions: this.allowedExtensions()
+            }));
+        }
+        if (!!this.minFileSize() && fileSizeInKB < this.minFileSize()) {
+            errors.push(this._textService.getText({ text: 'UpDevs.FormControls.FileUpload.MinSizeNotMet', isTranslated: false }, {
+                fileName: file.name,
+                fileSize: Tools.Text.formatKilobytes(fileSizeInKB),
+                minAllowedSize: Tools.Text.formatKilobytes(this.minFileSize())
+            }));
+        }
+        if (!!this.maxFileSize() && fileSizeInKB > this.maxFileSize()) {
+            errors.push(this._textService.getText({ text: 'UpDevs.FormControls.FileUpload.MaxSizeExceeded', isTranslated: false }, {
+                fileName: file.name,
+                fileSize: Tools.Text.formatKilobytes(fileSizeInKB),
+                maxAllowedSize: Tools.Text.formatKilobytes(this.maxFileSize())
+            }));
+        }
+        return errors;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FileUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: FileUploadComponent, selector: "upd-file-upload", inputs: { fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, allowFilesDrop: { classPropertyName: "allowFilesDrop", publicName: "allowFilesDrop", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, allowedExtensions: { classPropertyName: "allowedExtensions", publicName: "allowedExtensions", isSignal: true, isRequired: false, transformFunction: null }, minFileSize: { classPropertyName: "minFileSize", publicName: "minFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChanged: "fileChanged" }, host: { properties: { "class": "this.hostWrapperClasses" } }, usesInheritance: true, ngImport: i0, template: "<input class=\"d-none\" [attr.id]=\"name()\" [attr.name]=\"name()\" type=\"file\" [attr.multiple]=\"isMultiple() ? true : undefined\"\n    [accept]=\"allowedExtensions()\" (change)=\"onFileChange($event)\" />\n\n<div class=\"row\">\n    <ng-container *transloco=\"let t; prefix: 'UpDevs.FormControls.FileUpload'\">\n        @if (!!labelText) {\n            <div [ngClass]=\"labelSizeClasses()\">\n                <label [class.required]=\"isRequired()\">{{ labelText }}</label>\n\n                @if (!!hintText || !!this.hintTemplate()) {\n                    <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n                }\n            </div>\n        }\n\n        @if (supportsAdvancedUpload && allowFilesDrop()) {\n            <div class=\"d-flex flex-column border rounded-2 p-2 w-100 h-100\" [ngClass]=\"validationStatusBorderClass()\"\n                [class.bg-muted-lt]=\"!isOver()\" [class.bg-primary-lt]=\"isOver()\" (drag)=\"onDrag($event)\" (dragstart)=\"onDragStart($event)\"\n                (dragend)=\"onDragEnd($event)\" (dragover)=\"onDragOver($event)\" (dragenter)=\"onDragEnter($event)\"\n                (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n                @if (!!titleText) {\n                    <span class=\"fw-bold align-self-center cursor-pointer\" [innerHTML]=\"titleText\"></span>\n                }\n\n                <label [for]=\"name()\" class=\"text-secondary align-self-center cursor-pointer\" [innerHTML]=\"dropDescriptionText\"></label>\n\n                @if (!labelText && (!!hintText || !!this.hintTemplate())) {\n                    <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n                }\n            </div>\n        } @else {\n            @if (!labelText && (!!hintText || !!this.hintTemplate())) {\n                <div class=\"row g-2\">\n                    <div class=\"col\">\n                        <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n                    </div>\n                    <div class=\"col-auto align-self-center\">\n                        <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n                    </div>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n            }\n        }\n        @if (validationStatus() === 'invalid' && errorsList().length > 0) {\n            @for (desc of errorsList(); track desc) {\n                <div class=\"invalid-feedback\">{{ desc }}</div>\n            }\n        }\n\n        <ng-template #inputTpl>\n            <div class=\"input-group col\">\n                <label class=\"input-group-text cursor-pointer\" [ngClass]=\"validationStatusBorderClass()\" [for]=\"name()\">\n                    {{ t('SelectFile', { isMultiple: isMultiple() }) }}\n                </label>\n                <input type=\"text\" class=\"form-control text-truncate\" [class.border-end-0]=\"!!firstFileName()\"\n                    [value]=\"firstFileName() || ''\"\n                    [ngClass]=\"validationStatusClass()\" placeholder=\"{{ t('NoFileSelected', { isMultiple: isMultiple() }) }}\"\n                    [attr.disabled]=\"isDisabled() || undefined\" readonly>\n\n                @if (!!firstFileName()) {\n                    <div class=\"input-group-text bg-transparent\" [ngClass]=\"validationStatusBorderClass()\">\n                        <upd-button [shouldIgnoreBtnClass]=\"true\" (clicked)=\"removeFile()\" customClasses=\"link-secondary cursor-pointer\">\n                            <upd-icon tablerIcon=\"trash\" [tablerIconSize]=\"18\"></upd-icon>\n                        </upd-button>\n                    </div>\n                }\n            </div>\n        </ng-template>\n    </ng-container>\n</div>\n\n<ng-template #hintTpl>\n    <span class=\"form-help ms-2\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\" [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n        ?\n    </span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i3.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "component", type: i4.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "directive", type: i5.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-file-upload', template: "<input class=\"d-none\" [attr.id]=\"name()\" [attr.name]=\"name()\" type=\"file\" [attr.multiple]=\"isMultiple() ? true : undefined\"\n    [accept]=\"allowedExtensions()\" (change)=\"onFileChange($event)\" />\n\n<div class=\"row\">\n    <ng-container *transloco=\"let t; prefix: 'UpDevs.FormControls.FileUpload'\">\n        @if (!!labelText) {\n            <div [ngClass]=\"labelSizeClasses()\">\n                <label [class.required]=\"isRequired()\">{{ labelText }}</label>\n\n                @if (!!hintText || !!this.hintTemplate()) {\n                    <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n                }\n            </div>\n        }\n\n        @if (supportsAdvancedUpload && allowFilesDrop()) {\n            <div class=\"d-flex flex-column border rounded-2 p-2 w-100 h-100\" [ngClass]=\"validationStatusBorderClass()\"\n                [class.bg-muted-lt]=\"!isOver()\" [class.bg-primary-lt]=\"isOver()\" (drag)=\"onDrag($event)\" (dragstart)=\"onDragStart($event)\"\n                (dragend)=\"onDragEnd($event)\" (dragover)=\"onDragOver($event)\" (dragenter)=\"onDragEnter($event)\"\n                (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n                @if (!!titleText) {\n                    <span class=\"fw-bold align-self-center cursor-pointer\" [innerHTML]=\"titleText\"></span>\n                }\n\n                <label [for]=\"name()\" class=\"text-secondary align-self-center cursor-pointer\" [innerHTML]=\"dropDescriptionText\"></label>\n\n                @if (!labelText && (!!hintText || !!this.hintTemplate())) {\n                    <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n                }\n            </div>\n        } @else {\n            @if (!labelText && (!!hintText || !!this.hintTemplate())) {\n                <div class=\"row g-2\">\n                    <div class=\"col\">\n                        <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n                    </div>\n                    <div class=\"col-auto align-self-center\">\n                        <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n                    </div>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n            }\n        }\n        @if (validationStatus() === 'invalid' && errorsList().length > 0) {\n            @for (desc of errorsList(); track desc) {\n                <div class=\"invalid-feedback\">{{ desc }}</div>\n            }\n        }\n\n        <ng-template #inputTpl>\n            <div class=\"input-group col\">\n                <label class=\"input-group-text cursor-pointer\" [ngClass]=\"validationStatusBorderClass()\" [for]=\"name()\">\n                    {{ t('SelectFile', { isMultiple: isMultiple() }) }}\n                </label>\n                <input type=\"text\" class=\"form-control text-truncate\" [class.border-end-0]=\"!!firstFileName()\"\n                    [value]=\"firstFileName() || ''\"\n                    [ngClass]=\"validationStatusClass()\" placeholder=\"{{ t('NoFileSelected', { isMultiple: isMultiple() }) }}\"\n                    [attr.disabled]=\"isDisabled() || undefined\" readonly>\n\n                @if (!!firstFileName()) {\n                    <div class=\"input-group-text bg-transparent\" [ngClass]=\"validationStatusBorderClass()\">\n                        <upd-button [shouldIgnoreBtnClass]=\"true\" (clicked)=\"removeFile()\" customClasses=\"link-secondary cursor-pointer\">\n                            <upd-icon tablerIcon=\"trash\" [tablerIconSize]=\"18\"></upd-icon>\n                        </upd-button>\n                    </div>\n                }\n            </div>\n        </ng-template>\n    </ng-container>\n</div>\n\n<ng-template #hintTpl>\n    <span class=\"form-help ms-2\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\" [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n        ?\n    </span>\n</ng-template>\n" }]
+        }], propDecorators: { hostWrapperClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], fileChanged: [{
+                type: Output
+            }] } });
+
+var UpDevs$1 = {
+	FormControls: {
+		FileUpload: {
+			DropzoneDesktopDescription: "Drop {isMultiple, select, true {files} other {a file}} here or <u>click</u> to select {isMultiple, select, true {them} other {it}}",
+			DropzoneMobileDescription: "Touch to select {isMultiple, select, true {files} other {a file}} to upload",
+			SelectFile: "Select {isMultiple, select, true {files} other {a file}}",
+			NoFileSelected: "No {isMultiple, select, true {files} other {file}} selected",
+			ExtensionNotAllowed: "The file ({{fileName}}) with the extension '{{extension}}' is not allowed. Allowed {hasMultipleExt, select, true {extensions are} other {extension is}}: {{allowedExtensions}}.",
+			MinSizeNotMet: "The file ({{fileName}}) of size {{fileSize}} is smaller than the allowed of {{minAllowedSize}}.",
+			MaxSizeExceeded: "The file ({{fileName}}) of size {{fileSize}} is bigger than the allowed of {{maxAllowedSize}}."
+		}
+	}
+};
+var en = {
+	UpDevs: UpDevs$1
+};
+
+var en$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    UpDevs: UpDevs$1,
+    default: en
+});
+
+var UpDevs = {
+	FormControls: {
+		FileUpload: {
+			DropzoneDesktopDescription: "Arraste {isMultiple, select, true {arquivos} other {um arquivo}} para cá ou <u>clique</u> para selecioná-lo{isMultiple, select, true {s} other {}}",
+			DropzoneMobileDescription: "Toque para selecionar {isMultiple, select, true {arquivos} other {um arquivo}} to upload",
+			SelectFile: "Selecione {isMultiple, select, true {arquivos} other {um arquivo}}",
+			NoFileSelected: "Nenhum arquivo selecionado",
+			ExtensionNotAllowed: "O arquivo ({{fileName}}) tem a extensão '{{extension}}' que não é permitida. {hasMultipleExt, select, true {As extensões de arquivo permitidas são} other {A extensão de arquivo permitida é}}: {{allowedExtensions}}.",
+			MinSizeNotMet: "O arquivo ({{fileName}}) de tamanho {{fileSize}} é menor do que o permitido de {{minAllowedSize}}.",
+			MaxSizeExceeded: "O arquivo ({{fileName}}) de tamanho {{fileSize}} é maior do que o permitido de {{maxAllowedSize}}."
+		}
+	}
+};
+var pt = {
+	UpDevs: UpDevs
+};
+
+var pt$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    UpDevs: UpDevs,
+    default: pt
+});
+
+class UpdFileUploadModule {
+    constructor(translocoService) {
+        translocoService.setFallbackLangForMissingTranslation({ fallbackLang: 'en' });
+        translocoService.setTranslation(en$1, 'en');
+        translocoService.setTranslation(pt$1, 'pt');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdFileUploadModule, deps: [{ token: i1$1.TranslocoService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: UpdFileUploadModule, declarations: [FileUploadComponent], imports: [CommonModule,
+            TranslocoModule,
+            UpdButtonModule,
+            UpdIconsModule,
+            UpdPopoverModule], exports: [FileUploadComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdFileUploadModule, imports: [CommonModule,
+            TranslocoModule,
+            UpdButtonModule,
+            UpdIconsModule,
+            UpdPopoverModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdFileUploadModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        TranslocoModule,
+                        UpdButtonModule,
+                        UpdIconsModule,
+                        UpdPopoverModule
+                    ],
+                    declarations: [
+                        FileUploadComponent
+                    ],
+                    exports: [
+                        FileUploadComponent
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: i1$1.TranslocoService }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FileUploadComponent, UpdFileUploadModule };
+//# sourceMappingURL=updevs-components-form-controls-file-upload.mjs.map

package/fesm2022/updevs-components-form-controls-file-upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"updevs-components-form-controls-file-upload.mjs","sources":["../../../../libs/components/form-controls/file-upload/src/file-upload.component.ts","../../../../libs/components/form-controls/file-upload/src/file-upload.component.html","../../../../libs/components/form-controls/file-upload/src/upd-file-upload.module.ts","../../../../libs/components/form-controls/file-upload/src/updevs-components-form-controls-file-upload.ts"],"sourcesContent":["import { Component, computed, EventEmitter, HostBinding, inject, input, Output, signal } from '@angular/core';\nimport { ColumnSizeHelper, HorizontalVerticalType } from '@updevs/components';\nimport { TextModel } from '@updevs/sdk';\nimport { PlatformService, Tools } from '@updevs/sdk/core';\nimport { BaseControl } from '@updevs/components/form-controls/abstractions';\nimport { OptionalType } from '@updevs/sdk/types';\n\nimport { FileUploadChangedEvent } from './file-upload-changed.event';\n\n@Component({\n    selector: 'upd-file-upload',\n    templateUrl: './file-upload.component.html',\n    styleUrl: './file-upload.component.scss'\n})\nexport class FileUploadComponent extends BaseControl {\n    @HostBinding('class') hostWrapperClasses = '';\n\n    @Output() readonly fileChanged = new EventEmitter<OptionalType<FileUploadChangedEvent>>();\n\n    readonly fileName = input<string>();\n    readonly title = input<TextModel>();\n    readonly allowFilesDrop = input(false);\n    readonly isMultiple = input(false); // TODO: implement\n    readonly allowedExtensions = input('*');\n    readonly minFileSize = input<number>();\n    readonly maxFileSize = input<number>();\n    readonly layout = input<HorizontalVerticalType>('vertical');\n    readonly isOver = signal(false);\n    readonly showValidationStatus = computed(() =>\n        !!this.validationStatus() && (this.validationStatus() === 'invalid' || this.showValidStatus())\n    );\n    readonly validationStatusClass = computed(() => {\n        if (this.showValidationStatus()) {\n            return `is-${this.validationStatus()}`;\n        }\n\n        return '';\n    });\n    readonly validationStatusBorderClass = computed(() => {\n        if (this.showValidationStatus()) {\n            return this.validationStatus() === 'invalid' ? 'border-danger' : 'border-success';\n        }\n\n        return '';\n    });\n    readonly errorsList = computed(() => [...this.validationStatusTexts.concat(this.fileUploadErrors())]);\n    readonly currentFiles = signal<OptionalType<File[]>>(undefined);\n    readonly labelSizeClasses = computed(() => {\n        if (this.layout() !== 'horizontal') {\n            return 'form-label';\n        }\n\n        return ColumnSizeHelper.getClasses(\n            'col-form-label',\n            ColumnSizeHelper.getSizeClasses(this.labelColSize(), 3)\n        );\n    });\n    readonly firstFileName = computed(() => (this.currentFiles()?.length || 0) > 0 ? this.currentFiles()![0].name : this.fileName());\n\n    get titleText(): string {\n        return this._textService.getText(this.title(), { isMultiple: this.isMultiple() });\n    }\n    get dropDescriptionText(): string {\n        return !!this.descriptionText\n            ? this.descriptionText\n            : this._textService.getText(\n                this.platformService.isMobile ? this.defaultMobileDesc : this.defaultDesktopDesc, { isMultiple: this.isMultiple() }\n            );\n    }\n    get supportsAdvancedUpload(): boolean {\n        const div = document.createElement('div');\n        return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window;\n    }\n\n    private readonly defaultMobileDesc: TextModel = {\n        text: 'UpDevs.FormControls.FileUpload.DropzoneMobileDescription',\n        isTranslated: false\n    };\n    private readonly defaultDesktopDesc: TextModel = {\n        text: 'UpDevs.FormControls.FileUpload.DropzoneDesktopDescription',\n        isTranslated: false\n    };\n    private readonly fileUploadErrors = signal<string[]>([]);\n    private readonly platformService = inject(PlatformService);\n\n    onFileChange(event: Event): void {\n        event.stopPropagation();\n\n        const files = Array.from((event.target as any).files as FileList);\n\n        if (!!files) {\n            this.currentFiles.set([...files]);\n            const errors = files.map(f => this.getFileErrors(f)).reduce((acc, e) => acc.concat(e), []);\n\n            if (errors.length > 0) {\n                this.fileUploadErrors.set([...errors]);\n                return;\n            }\n\n            if (this.isMultiple()) {\n                // TODO: implement\n            } else {\n                const file = files[0];\n                const reader = new FileReader();\n                reader.onload = (fileReader: any) => this.fileChanged.emit({ file: file, dataUrl: fileReader.target.result });\n\n                reader.readAsDataURL(file);\n            }\n        }\n    }\n\n    removeFile(): void {\n        this.currentFiles.set([]);\n        this.fileChanged.emit(undefined);\n    }\n\n    onDrag(event: DragEvent): void {\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    onDragStart(event: DragEvent): void {\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    onDragEnd(event: DragEvent): void {\n        event.preventDefault();\n        event.stopPropagation();\n        this.isOver.set(false);\n    }\n\n    onDragOver(event: DragEvent): void {\n        event.preventDefault();\n        event.stopPropagation();\n        this.isOver.set(true);\n    }\n\n    onDragEnter(event: DragEvent): void {\n        event.preventDefault();\n        event.stopPropagation();\n        this.isOver.set(true);\n    }\n\n    onDragLeave(event: DragEvent): void {\n        event.preventDefault();\n        event.stopPropagation();\n        this.isOver.set(false);\n    }\n\n    onDrop(event: DragEvent): void {\n        event.preventDefault();\n        event.stopPropagation();\n        this.isOver.set(false);\n\n        const droppedFiles = event.dataTransfer!.files;\n    }\n\n    private getFileErrors(file: File): string[] {\n        const extension = `.${file.name.split('.').pop() || ''}`;\n        const fileSizeInKB = Math.round(file.size / 1024);\n        const errors: string[] = [];\n\n        if (this.allowedExtensions() !== '*' && !this.allowedExtensions().includes(extension)) {\n            errors.push(\n                this._textService.getText(\n                    { text: 'UpDevs.FormControls.FileUpload.ExtensionNotAllowed', isTranslated: false },\n                    {\n                        fileName: file.name,\n                        extension,\n                        hasMultipleExt: this.allowedExtensions().includes(','),\n                        allowedExtensions: this.allowedExtensions()\n                    }\n                )\n            );\n        }\n\n        if (!!this.minFileSize() && fileSizeInKB < this.minFileSize()!) {\n            errors.push(\n                this._textService.getText(\n                    { text: 'UpDevs.FormControls.FileUpload.MinSizeNotMet', isTranslated: false },\n                    {\n                        fileName: file.name,\n                        fileSize: Tools.Text.formatKilobytes(fileSizeInKB),\n                        minAllowedSize: Tools.Text.formatKilobytes(this.minFileSize()!)\n                    }\n                )\n            );\n        }\n\n        if (!!this.maxFileSize() && fileSizeInKB > this.maxFileSize()!) {\n            errors.push(\n                this._textService.getText(\n                    { text: 'UpDevs.FormControls.FileUpload.MaxSizeExceeded', isTranslated: false },\n                    {\n                        fileName: file.name,\n                        fileSize: Tools.Text.formatKilobytes(fileSizeInKB),\n                        maxAllowedSize: Tools.Text.formatKilobytes(this.maxFileSize()!)\n                    }\n                )\n            );\n        }\n\n        return errors;\n    }\n}\n","<input class=\"d-none\" [attr.id]=\"name()\" [attr.name]=\"name()\" type=\"file\" [attr.multiple]=\"isMultiple() ? true : undefined\"\n    [accept]=\"allowedExtensions()\" (change)=\"onFileChange($event)\" />\n\n<div class=\"row\">\n    <ng-container *transloco=\"let t; prefix: 'UpDevs.FormControls.FileUpload'\">\n        @if (!!labelText) {\n            <div [ngClass]=\"labelSizeClasses()\">\n                <label [class.required]=\"isRequired()\">{{ labelText }}</label>\n\n                @if (!!hintText || !!this.hintTemplate()) {\n                    <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n                }\n            </div>\n        }\n\n        @if (supportsAdvancedUpload && allowFilesDrop()) {\n            <div class=\"d-flex flex-column border rounded-2 p-2 w-100 h-100\" [ngClass]=\"validationStatusBorderClass()\"\n                [class.bg-muted-lt]=\"!isOver()\" [class.bg-primary-lt]=\"isOver()\" (drag)=\"onDrag($event)\" (dragstart)=\"onDragStart($event)\"\n                (dragend)=\"onDragEnd($event)\" (dragover)=\"onDragOver($event)\" (dragenter)=\"onDragEnter($event)\"\n                (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n                @if (!!titleText) {\n                    <span class=\"fw-bold align-self-center cursor-pointer\" [innerHTML]=\"titleText\"></span>\n                }\n\n                <label [for]=\"name()\" class=\"text-secondary align-self-center cursor-pointer\" [innerHTML]=\"dropDescriptionText\"></label>\n\n                @if (!labelText && (!!hintText || !!this.hintTemplate())) {\n                    <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n                }\n            </div>\n        } @else {\n            @if (!labelText && (!!hintText || !!this.hintTemplate())) {\n                <div class=\"row g-2\">\n                    <div class=\"col\">\n                        <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n                    </div>\n                    <div class=\"col-auto align-self-center\">\n                        <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n                    </div>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n            }\n        }\n        @if (validationStatus() === 'invalid' && errorsList().length > 0) {\n            @for (desc of errorsList(); track desc) {\n                <div class=\"invalid-feedback\">{{ desc }}</div>\n            }\n        }\n\n        <ng-template #inputTpl>\n            <div class=\"input-group col\">\n                <label class=\"input-group-text cursor-pointer\" [ngClass]=\"validationStatusBorderClass()\" [for]=\"name()\">\n                    {{ t('SelectFile', { isMultiple: isMultiple() }) }}\n                </label>\n                <input type=\"text\" class=\"form-control text-truncate\" [class.border-end-0]=\"!!firstFileName()\"\n                    [value]=\"firstFileName() || ''\"\n                    [ngClass]=\"validationStatusClass()\" placeholder=\"{{ t('NoFileSelected', { isMultiple: isMultiple() }) }}\"\n                    [attr.disabled]=\"isDisabled() || undefined\" readonly>\n\n                @if (!!firstFileName()) {\n                    <div class=\"input-group-text bg-transparent\" [ngClass]=\"validationStatusBorderClass()\">\n                        <upd-button [shouldIgnoreBtnClass]=\"true\" (clicked)=\"removeFile()\" customClasses=\"link-secondary cursor-pointer\">\n                            <upd-icon tablerIcon=\"trash\" [tablerIconSize]=\"18\"></upd-icon>\n                        </upd-button>\n                    </div>\n                }\n            </div>\n        </ng-template>\n    </ng-container>\n</div>\n\n<ng-template #hintTpl>\n    <span class=\"form-help ms-2\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\" [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n        ?\n    </span>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TranslocoModule, TranslocoService } from '@jsverse/transloco';\nimport { UpdIconsModule } from '@updevs/icons';\nimport { UpdButtonModule } from '@updevs/components/button';\nimport { UpdPopoverModule } from '@updevs/components/popover';\n\nimport * as en from './assets/i18n/en.json';\nimport * as pt from './assets/i18n/pt.json';\nimport { FileUploadComponent } from './file-upload.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        TranslocoModule,\n        UpdButtonModule,\n        UpdIconsModule,\n        UpdPopoverModule\n    ],\n    declarations: [\n        FileUploadComponent\n    ],\n    exports: [\n        FileUploadComponent\n    ]\n})\nexport class UpdFileUploadModule {\n    constructor(translocoService: TranslocoService) {\n        translocoService.setFallbackLangForMissingTranslation({ fallbackLang: 'en' });\n        translocoService.setTranslation(en, 'en');\n        translocoService.setTranslation(pt, 'pt');\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2","en","pt","i1"],"mappings":"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"}

package/fesm2022/updevs-components-form-controls-input.mjs

@@ -0,0 +1,259 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, EventEmitter, Component, ViewEncapsulation, HostBinding, ContentChild, Input, Output, NgModule } from '@angular/core';
+import { ColumnSizeHelper } from '@updevs/components';
+import { BaseControl } from '@updevs/components/form-controls/abstractions';
+import { Subject } from 'rxjs';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@updevs/icons';
+import { UpdIconsModule } from '@updevs/icons';
+import * as i3 from '@updevs/sdk/mask';
+import { UpdMaskModule } from '@updevs/sdk/mask';
+import * as i4 from '@updevs/components/popover';
+import { UpdPopoverModule } from '@updevs/components/popover';
+
+class InputAppendDirective {
+    constructor() {
+        this.templateRef = inject((TemplateRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: InputAppendDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: InputAppendDirective, selector: "ng-template[updInputAppend]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: InputAppendDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[updInputAppend]'
+                }]
+        }] });
+
+class InputPrependDirective {
+    constructor() {
+        this.templateRef = inject((TemplateRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: InputPrependDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: InputPrependDirective, selector: "ng-template[updInputPrepend]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: InputPrependDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[updInputPrepend]'
+                }]
+        }] });
+
+class InputComponent extends BaseControl {
+    constructor() {
+        super(...arguments);
+        this.hostWrapperClasses = '';
+        this.type = 'text';
+        this.size = 'default';
+        this.isPlainText = false;
+        this.isReadOnly = false;
+        this.isLoading = false;
+        this.isRound = false;
+        this.isFlush = false;
+        this.isInputGroupFlat = false;
+        this.isPrependButton = false;
+        this.isAppendButton = false;
+        this.isFloating = false;
+        this.loaderPosition = 'append';
+        this.isValidationStatusLight = false;
+        this.layout = 'vertical';
+        this.valueChange = new EventEmitter();
+        this.blurred = new EventEmitter();
+        /**
+         * Emitted when any key is pressed.
+         */
+        this.keyDown = new EventEmitter();
+        /**
+         * Emitted when the ESC key is pressed.
+         */
+        this.keyDownEsc = new EventEmitter();
+        /**
+         * Emitted when the ENTER key is released.
+         */
+        this.keyUpEnter = new EventEmitter();
+        this.classes = [];
+        this.valueChangedSub = new Subject();
+    }
+    get shouldDisplayInnerLabel() {
+        return !!this.label()
+            && !this.prependIconModel
+            && !this.appendIconModel
+            && !this.isLoading
+            && !this.appendTemplate
+            && !this.prependTemplate;
+    }
+    get labelSizeClasses() {
+        if (this.layout !== 'horizontal') {
+            return 'form-label';
+        }
+        return ColumnSizeHelper.getClasses('col-form-label', ColumnSizeHelper.getSizeClasses(this.labelColSize(), 3));
+    }
+    get validationClass() {
+        return !!this.validationStatus() ? `is-${this.validationStatus()}` : '';
+    }
+    get validationBorderClass() {
+        return !!this.validationStatus() ? `border-${this.validationStatus() === 'invalid' ? 'danger' : 'success'}` : '';
+    }
+    ngOnInit() {
+        this.updateClasses();
+    }
+    ngOnChanges(changes) {
+        this.updateClasses();
+        if (changes['value'] && !!this.mask) {
+            this.valueChangedSub.next(changes['value'].currentValue);
+        }
+    }
+    onInputChange(evt) {
+        if (!evt.target) {
+            return;
+        }
+        this.valueChange.emit(evt.target.value);
+    }
+    updateClasses() {
+        const lClasses = !this.isPlainText ? ['form-control'] : ['form-control-plaintext'];
+        if (this.isRound) {
+            lClasses.push('form-control-rounded');
+        }
+        if (this.isFlush) {
+            lClasses.push('form-control-flush');
+        }
+        if (this.size !== 'default') {
+            lClasses.push(`form-control-${this.size === 'large' ? 'lg' : 'sm'}`);
+        }
+        if (!!this.validationStatus()) {
+            const statusCls = `is-${this.validationStatus()}`;
+            lClasses.push(statusCls);
+            if (this.isValidationStatusLight) {
+                lClasses.push(`${statusCls}-lite`);
+            }
+        }
+        if (this.layout === 'horizontal') {
+            this.hostWrapperClasses = 'row';
+        }
+        if (!!this.wrapperClasses) {
+            this.hostWrapperClasses += ` ${this.wrapperClasses}`;
+        }
+        if (this.isFloating) {
+            this.hostWrapperClasses += ' form-floating';
+        }
+        this.classes = [
+            ...lClasses,
+            ...(this.customClasses || '').split(' '),
+            this.layout === 'horizontal' ? 'col' : ''
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: InputComponent, selector: "upd-input", inputs: { type: "type", mask: "mask", maskConfig: "maskConfig", value: "value", size: "size", customClasses: "customClasses", wrapperClasses: "wrapperClasses", maxLength: "maxLength", isPlainText: "isPlainText", isReadOnly: "isReadOnly", isLoading: "isLoading", isRound: "isRound", isFlush: "isFlush", isInputGroupFlat: "isInputGroupFlat", isPrependButton: "isPrependButton", isAppendButton: "isAppendButton", isFloating: "isFloating", loaderPosition: "loaderPosition", prependIconModel: "prependIconModel", appendIconModel: "appendIconModel", isValidationStatusLight: "isValidationStatusLight", layout: "layout" }, outputs: { valueChange: "valueChange", blurred: "blurred", keyDown: "keyDown", keyDownEsc: "keyDownEsc", keyUpEnter: "keyUpEnter" }, host: { properties: { "class": "this.hostWrapperClasses" } }, queries: [{ propertyName: "appendTemplate", first: true, predicate: InputAppendDirective, descendants: true }, { propertyName: "prependTemplate", first: true, predicate: InputPrependDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!!appendTemplate || !!prependTemplate) {\n    <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    <div class=\"input-group\" [class.input-group-flat]=\"isInputGroupFlat\" [ngClass]=\"validationClass\">\n        @if (!!prependTemplate) {\n            @if (!isPrependButton) {\n                <div class=\"input-group-text\" [ngClass]=\"validationBorderClass\">\n                    <ng-template [ngTemplateOutlet]=\"prependTemplate.templateRef\"></ng-template>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"prependTemplate.templateRef\"></ng-template>\n            }\n        }\n\n        <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n\n        @if (!!appendTemplate) {\n            @if (!isAppendButton) {\n                <div class=\"input-group-text\" [ngClass]=\"validationBorderClass\">\n                    <ng-template [ngTemplateOutlet]=\"appendTemplate.templateRef\"></ng-template>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"appendTemplate.templateRef\"></ng-template>\n            }\n        }\n    </div>\n\n    <ng-template [ngTemplateOutlet]=\"feedbackTpl\"></ng-template>\n} @else if (!!prependIconModel || !!appendIconModel || isLoading) {\n    <ng-template [ngTemplateOutlet]=\"inputIconTpl\"></ng-template>\n} @else {\n    <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n    <ng-template [ngTemplateOutlet]=\"feedbackTpl\"></ng-template>\n}\n\n<ng-template #inputTpl>\n    @if (shouldDisplayInnerLabel && !isFloating) {\n        <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"basicInputTpl\"></ng-template>\n\n    @if (shouldDisplayInnerLabel && isFloating) {\n        <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    }\n</ng-template>\n\n<ng-template #inputIconTpl>\n    <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    <div [class.col]=\"layout === 'horizontal'\" [class.input-icon]=\"layout === 'vertical'\">\n        @if (layout === 'horizontal') {\n            <div class=\"input-icon\">\n                <ng-template [ngTemplateOutlet]=\"inputIconBaseTpl\"></ng-template>\n            </div>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"inputIconBaseTpl\"></ng-template>\n        }\n    </div>\n</ng-template>\n\n<ng-template #inputIconBaseTpl>\n    @if (!!prependIconModel || (isLoading && loaderPosition === 'prepend')) {\n        <span class=\"input-icon-addon\">\n            @if (!!prependIconModel) {\n                <upd-icon [model]=\"prependIconModel\"></upd-icon>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"loaderTpl\"></ng-template>\n            }\n        </span>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n    <ng-template [ngTemplateOutlet]=\"feedbackTpl\"></ng-template>\n\n    @if (!!appendIconModel || (isLoading && loaderPosition === 'append')) {\n        <span class=\"input-icon-addon\">\n            @if (!!appendIconModel) {\n                <upd-icon [model]=\"appendIconModel\"></upd-icon>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"loaderTpl\"></ng-template>\n            }\n        </span>\n    }\n</ng-template>\n\n<ng-template #loaderTpl>\n    <div class=\"spinner-border spinner-border-sm text-muted\" role=\"status\"></div>\n</ng-template>\n\n<ng-template #basicInputTpl>\n    @if (!!mask) {\n        <input [updMask]=\"mask\" [updMaskConfig]=\"maskConfig\" [updateMaskValueSubject]=\"valueChangedSub\" [attr.type]=\"type\"\n            [attr.maxlength]=\"maxLength\" [disabled]=\"isDisabled()\" [ngClass]=\"classes\" [placeholder]=\"placeholderText\" [value]=\"value || ''\"\n            [attr.name]=\"name()\" [attr.readonly]=\"isReadOnly ? '' : undefined\" (input)=\"onInputChange($event)\" (blur)=\"blurred.emit()\"\n            (keydown)=\"keyDown.emit($event)\" (keydown.escape)=\"keyDownEsc.emit()\" (keyup.enter)=\"keyUpEnter.emit()\" />\n    } @else {\n        <input [attr.type]=\"type\" [attr.maxlength]=\"maxLength\" [disabled]=\"isDisabled()\" [ngClass]=\"classes\" [placeholder]=\"placeholderText\"\n            [value]=\"value || ''\" [attr.name]=\"name()\" [attr.readonly]=\"isReadOnly ? '' : undefined\" (input)=\"onInputChange($event)\"\n            (blur)=\"blurred.emit()\" (keydown)=\"keyDown.emit($event)\" (keydown.escape)=\"keyDownEsc.emit()\"\n            (keyup.enter)=\"keyUpEnter.emit()\" />\n    }\n</ng-template>\n\n<ng-template #feedbackTpl>\n    @if (validationStatus() === 'invalid' && validationStatusTexts.length > 0) {\n        @for (desc of validationStatusTexts; track desc) {\n            <div class=\"invalid-feedback\">{{ desc }}</div>\n        }\n    }\n</ng-template>\n\n<ng-template #hintTpl>\n    <span class=\"form-help ms-2\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\" [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n        ?\n    </span>\n</ng-template>\n\n<ng-template #labelTpl>\n    @if (!!labelText) {\n        <div [ngClass]=\"labelSizeClasses\">\n            <label [class.required]=\"isRequired()\">{{ labelText }}</label>\n\n            @if (!!hintText || !!this.hintTemplate()) {\n                <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [".input-group-text .form-check>.form-check-input{margin:0!important}.input-group-text>upd-checkbox{height:16px!important}.input-group-text .form-check{margin:0!important;padding-left:0!important;min-height:16px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "directive", type: i3.MaskDirective, selector: "[updMask]", inputs: ["updMask", "updMaskConfig", "specialCharacters", "patterns", "prefix", "thousandSeparator", "decimalMarker", "suffix", "shownMaskExpression", "removeSpecialCharacters", "placeholderCharacter", "isHiddenInput", "showMaskTyped", "showTemplate", "clearIfNoMatch", "shouldValidate", "shouldTriggerOnMaskChange", "allowNegativeNumbers", "leadZeroDateTime", "separatorLimit", "updateMaskValueSubject"], outputs: ["maskFilled"] }, { kind: "directive", type: i4.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-input', encapsulation: ViewEncapsulation.None, template: "@if (!!appendTemplate || !!prependTemplate) {\n    <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    <div class=\"input-group\" [class.input-group-flat]=\"isInputGroupFlat\" [ngClass]=\"validationClass\">\n        @if (!!prependTemplate) {\n            @if (!isPrependButton) {\n                <div class=\"input-group-text\" [ngClass]=\"validationBorderClass\">\n                    <ng-template [ngTemplateOutlet]=\"prependTemplate.templateRef\"></ng-template>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"prependTemplate.templateRef\"></ng-template>\n            }\n        }\n\n        <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n\n        @if (!!appendTemplate) {\n            @if (!isAppendButton) {\n                <div class=\"input-group-text\" [ngClass]=\"validationBorderClass\">\n                    <ng-template [ngTemplateOutlet]=\"appendTemplate.templateRef\"></ng-template>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"appendTemplate.templateRef\"></ng-template>\n            }\n        }\n    </div>\n\n    <ng-template [ngTemplateOutlet]=\"feedbackTpl\"></ng-template>\n} @else if (!!prependIconModel || !!appendIconModel || isLoading) {\n    <ng-template [ngTemplateOutlet]=\"inputIconTpl\"></ng-template>\n} @else {\n    <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n    <ng-template [ngTemplateOutlet]=\"feedbackTpl\"></ng-template>\n}\n\n<ng-template #inputTpl>\n    @if (shouldDisplayInnerLabel && !isFloating) {\n        <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"basicInputTpl\"></ng-template>\n\n    @if (shouldDisplayInnerLabel && isFloating) {\n        <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    }\n</ng-template>\n\n<ng-template #inputIconTpl>\n    <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    <div [class.col]=\"layout === 'horizontal'\" [class.input-icon]=\"layout === 'vertical'\">\n        @if (layout === 'horizontal') {\n            <div class=\"input-icon\">\n                <ng-template [ngTemplateOutlet]=\"inputIconBaseTpl\"></ng-template>\n            </div>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"inputIconBaseTpl\"></ng-template>\n        }\n    </div>\n</ng-template>\n\n<ng-template #inputIconBaseTpl>\n    @if (!!prependIconModel || (isLoading && loaderPosition === 'prepend')) {\n        <span class=\"input-icon-addon\">\n            @if (!!prependIconModel) {\n                <upd-icon [model]=\"prependIconModel\"></upd-icon>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"loaderTpl\"></ng-template>\n            }\n        </span>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n    <ng-template [ngTemplateOutlet]=\"feedbackTpl\"></ng-template>\n\n    @if (!!appendIconModel || (isLoading && loaderPosition === 'append')) {\n        <span class=\"input-icon-addon\">\n            @if (!!appendIconModel) {\n                <upd-icon [model]=\"appendIconModel\"></upd-icon>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"loaderTpl\"></ng-template>\n            }\n        </span>\n    }\n</ng-template>\n\n<ng-template #loaderTpl>\n    <div class=\"spinner-border spinner-border-sm text-muted\" role=\"status\"></div>\n</ng-template>\n\n<ng-template #basicInputTpl>\n    @if (!!mask) {\n        <input [updMask]=\"mask\" [updMaskConfig]=\"maskConfig\" [updateMaskValueSubject]=\"valueChangedSub\" [attr.type]=\"type\"\n            [attr.maxlength]=\"maxLength\" [disabled]=\"isDisabled()\" [ngClass]=\"classes\" [placeholder]=\"placeholderText\" [value]=\"value || ''\"\n            [attr.name]=\"name()\" [attr.readonly]=\"isReadOnly ? '' : undefined\" (input)=\"onInputChange($event)\" (blur)=\"blurred.emit()\"\n            (keydown)=\"keyDown.emit($event)\" (keydown.escape)=\"keyDownEsc.emit()\" (keyup.enter)=\"keyUpEnter.emit()\" />\n    } @else {\n        <input [attr.type]=\"type\" [attr.maxlength]=\"maxLength\" [disabled]=\"isDisabled()\" [ngClass]=\"classes\" [placeholder]=\"placeholderText\"\n            [value]=\"value || ''\" [attr.name]=\"name()\" [attr.readonly]=\"isReadOnly ? '' : undefined\" (input)=\"onInputChange($event)\"\n            (blur)=\"blurred.emit()\" (keydown)=\"keyDown.emit($event)\" (keydown.escape)=\"keyDownEsc.emit()\"\n            (keyup.enter)=\"keyUpEnter.emit()\" />\n    }\n</ng-template>\n\n<ng-template #feedbackTpl>\n    @if (validationStatus() === 'invalid' && validationStatusTexts.length > 0) {\n        @for (desc of validationStatusTexts; track desc) {\n            <div class=\"invalid-feedback\">{{ desc }}</div>\n        }\n    }\n</ng-template>\n\n<ng-template #hintTpl>\n    <span class=\"form-help ms-2\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\" [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n        ?\n    </span>\n</ng-template>\n\n<ng-template #labelTpl>\n    @if (!!labelText) {\n        <div [ngClass]=\"labelSizeClasses\">\n            <label [class.required]=\"isRequired()\">{{ labelText }}</label>\n\n            @if (!!hintText || !!this.hintTemplate()) {\n                <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [".input-group-text .form-check>.form-check-input{margin:0!important}.input-group-text>upd-checkbox{height:16px!important}.input-group-text .form-check{margin:0!important;padding-left:0!important;min-height:16px!important}\n"] }]
+        }], propDecorators: { hostWrapperClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], appendTemplate: [{
+                type: ContentChild,
+                args: [InputAppendDirective]
+            }], prependTemplate: [{
+                type: ContentChild,
+                args: [InputPrependDirective]
+            }], type: [{
+                type: Input
+            }], mask: [{
+                type: Input
+            }], maskConfig: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], customClasses: [{
+                type: Input
+            }], wrapperClasses: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], isPlainText: [{
+                type: Input
+            }], isReadOnly: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], isRound: [{
+                type: Input
+            }], isFlush: [{
+                type: Input
+            }], isInputGroupFlat: [{
+                type: Input
+            }], isPrependButton: [{
+                type: Input
+            }], isAppendButton: [{
+                type: Input
+            }], isFloating: [{
+                type: Input
+            }], loaderPosition: [{
+                type: Input
+            }], prependIconModel: [{
+                type: Input
+            }], appendIconModel: [{
+                type: Input
+            }], isValidationStatusLight: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], blurred: [{
+                type: Output
+            }], keyDown: [{
+                type: Output
+            }], keyDownEsc: [{
+                type: Output
+            }], keyUpEnter: [{
+                type: Output
+            }] } });
+
+class UpdInputModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: UpdInputModule, declarations: [InputComponent,
+            InputAppendDirective,
+            InputPrependDirective], imports: [CommonModule,
+            UpdIconsModule,
+            UpdMaskModule,
+            UpdPopoverModule], exports: [InputComponent,
+            InputAppendDirective,
+            InputPrependDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdInputModule, imports: [CommonModule,
+            UpdIconsModule,
+            UpdMaskModule,
+            UpdPopoverModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        UpdIconsModule,
+                        UpdMaskModule,
+                        UpdPopoverModule
+                    ],
+                    declarations: [
+                        InputComponent,
+                        InputAppendDirective,
+                        InputPrependDirective
+                    ],
+                    exports: [
+                        InputComponent,
+                        InputAppendDirective,
+                        InputPrependDirective
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InputAppendDirective, InputComponent, InputPrependDirective, UpdInputModule };
+//# sourceMappingURL=updevs-components-form-controls-input.mjs.map