invensys-ng 21.3.10 → 21.3.12

package/fesm2022/invensys-ng.mjs

@@ -3003,6 +3003,239 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 type: Input
             }] } });
 
+class IMessage {
+    /**
+     * Severity type of the message
+     * @default 'info'
+     */
+    severity = 'info';
+    /**
+     * Size of the message
+     * @default 'medium'
+     */
+    size = 'medium';
+    /**
+     * Icon to display (Material Icons)
+     * If not provided, default icons based on severity will be used
+     */
+    icon;
+    /**
+     * Whether the message can be closed
+     * @default false
+     */
+    closable = false;
+    /**
+     * Whether the message is visible
+     * @default true
+     */
+    visible = true;
+    /**
+     * Event emitted when visible changes (for two-way binding)
+     */
+    visibleChange = new EventEmitter();
+    /**
+     * Get the default icon based on severity
+     */
+    getDefaultIcon() {
+        if (this.icon)
+            return this.icon;
+        const iconMap = {
+            success: 'pi pi-check-circle',
+            info: 'pi pi-lightbulb',
+            warning: 'pi pi-exclamation-triangle',
+            danger: 'pi pi-times-circle',
+            primary: 'pi pi-info-circle',
+            secondary: 'pi pi-info-circle',
+            tertiary: 'pi pi-info-circle',
+            contrast: 'pi pi-info-circle',
+        };
+        return iconMap[this.severity] || 'pi pi-info-circle';
+    }
+    /**
+     * Close the message
+     */
+    close() {
+        this.visible = false;
+        this.visibleChange.emit(this.visible);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IMessage, isStandalone: true, selector: "i-message", inputs: { severity: "severity", size: "size", icon: "icon", closable: "closable", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "@if (visible) {\n  <div\n    class=\"i-message i-message-{{ severity }} i-message--{{ size }}\"\n    role=\"alert\"\n  >\n    <div class=\"i-message-content\">\n      <div class=\"i-message-icon\">\n        <i [class]=\"getDefaultIcon()\"></i>\n      </div>\n      <div class=\"i-message-text\">\n        <ng-content></ng-content>\n      </div>\n      @if (closable) {\n        <button\n          class=\"i-message-close\"\n          type=\"button\"\n          (click)=\"close()\"\n          aria-label=\"Close\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      }\n    </div>\n  </div>\n}\n", styles: [".i-message{background-color:var(--surface-section);border-left:4px solid transparent}.i-message .i-message-text{color:var(--color-text-primary)}.i-message .i-message-close{color:var(--color-text-secondary)}.i-message .i-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-message.i-message-success{border-left-color:var(--color-success)}.i-message.i-message-success .i-message-icon{color:var(--color-success)}.i-message.i-message-info{border-left-color:var(--color-info)}.i-message.i-message-info .i-message-icon{color:var(--color-info)}.i-message.i-message-warning{border-left-color:var(--color-warning)}.i-message.i-message-warning .i-message-icon{color:var(--color-warning)}.i-message.i-message-danger{border-left-color:var(--color-danger)}.i-message.i-message-danger .i-message-icon{color:var(--color-danger)}.i-message.i-message-primary{border-left-color:var(--color-primary)}.i-message.i-message-primary .i-message-icon{color:var(--color-primary)}.i-message.i-message-secondary{border-left-color:var(--color-secondary)}.i-message.i-message-secondary .i-message-icon{color:var(--color-secondary)}.i-message.i-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-message.i-message-tertiary .i-message-icon{color:var(--color-text-tertiary)}.i-message.i-message-contrast{border-left-color:var(--color-contrast)}.i-message.i-message-contrast .i-message-icon{color:var(--color-contrast)}.i-message{display:flex;align-items:flex-start;border-radius:8px;margin-bottom:16px}.i-message:last-child{margin-bottom:0}.i-message--small .i-message-content{gap:8px;padding:8px 12px}.i-message--small .i-message-content .i-message-icon i{font-size:14px}.i-message--small .i-message-content .i-message-text{font-size:.95em}.i-message--small .i-message-content .i-message-close{padding:2px}.i-message--small .i-message-content .i-message-close i{font-size:10px}.i-message--medium .i-message-content{gap:12px;padding:16px}.i-message--medium .i-message-content .i-message-icon i{font-size:18px}.i-message--medium .i-message-content .i-message-text{font-size:1em}.i-message--medium .i-message-content .i-message-close i{font-size:12px}.i-message--large .i-message-content{gap:16px;padding:20px 24px}.i-message--large .i-message-content .i-message-icon i{font-size:24px}.i-message--large .i-message-content .i-message-text{font-size:1.1em}.i-message--large .i-message-content .i-message-close{padding:6px}.i-message--large .i-message-content .i-message-close i{font-size:14px}.i-message .i-message-content{display:flex;align-items:flex-start;width:100%}.i-message .i-message-content .i-message-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-message .i-message-content .i-message-text{flex:1;line-height:1.5;min-width:0;word-wrap:break-word}.i-message .i-message-content .i-message-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:background-color .2s,color .2s}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IMessage, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-message', imports: [], template: "@if (visible) {\n  <div\n    class=\"i-message i-message-{{ severity }} i-message--{{ size }}\"\n    role=\"alert\"\n  >\n    <div class=\"i-message-content\">\n      <div class=\"i-message-icon\">\n        <i [class]=\"getDefaultIcon()\"></i>\n      </div>\n      <div class=\"i-message-text\">\n        <ng-content></ng-content>\n      </div>\n      @if (closable) {\n        <button\n          class=\"i-message-close\"\n          type=\"button\"\n          (click)=\"close()\"\n          aria-label=\"Close\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      }\n    </div>\n  </div>\n}\n", styles: [".i-message{background-color:var(--surface-section);border-left:4px solid transparent}.i-message .i-message-text{color:var(--color-text-primary)}.i-message .i-message-close{color:var(--color-text-secondary)}.i-message .i-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-message.i-message-success{border-left-color:var(--color-success)}.i-message.i-message-success .i-message-icon{color:var(--color-success)}.i-message.i-message-info{border-left-color:var(--color-info)}.i-message.i-message-info .i-message-icon{color:var(--color-info)}.i-message.i-message-warning{border-left-color:var(--color-warning)}.i-message.i-message-warning .i-message-icon{color:var(--color-warning)}.i-message.i-message-danger{border-left-color:var(--color-danger)}.i-message.i-message-danger .i-message-icon{color:var(--color-danger)}.i-message.i-message-primary{border-left-color:var(--color-primary)}.i-message.i-message-primary .i-message-icon{color:var(--color-primary)}.i-message.i-message-secondary{border-left-color:var(--color-secondary)}.i-message.i-message-secondary .i-message-icon{color:var(--color-secondary)}.i-message.i-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-message.i-message-tertiary .i-message-icon{color:var(--color-text-tertiary)}.i-message.i-message-contrast{border-left-color:var(--color-contrast)}.i-message.i-message-contrast .i-message-icon{color:var(--color-contrast)}.i-message{display:flex;align-items:flex-start;border-radius:8px;margin-bottom:16px}.i-message:last-child{margin-bottom:0}.i-message--small .i-message-content{gap:8px;padding:8px 12px}.i-message--small .i-message-content .i-message-icon i{font-size:14px}.i-message--small .i-message-content .i-message-text{font-size:.95em}.i-message--small .i-message-content .i-message-close{padding:2px}.i-message--small .i-message-content .i-message-close i{font-size:10px}.i-message--medium .i-message-content{gap:12px;padding:16px}.i-message--medium .i-message-content .i-message-icon i{font-size:18px}.i-message--medium .i-message-content .i-message-text{font-size:1em}.i-message--medium .i-message-content .i-message-close i{font-size:12px}.i-message--large .i-message-content{gap:16px;padding:20px 24px}.i-message--large .i-message-content .i-message-icon i{font-size:24px}.i-message--large .i-message-content .i-message-text{font-size:1.1em}.i-message--large .i-message-content .i-message-close{padding:6px}.i-message--large .i-message-content .i-message-close i{font-size:14px}.i-message .i-message-content{display:flex;align-items:flex-start;width:100%}.i-message .i-message-content .i-message-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-message .i-message-content .i-message-text{flex:1;line-height:1.5;min-width:0;word-wrap:break-word}.i-message .i-message-content .i-message-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:background-color .2s,color .2s}\n"] }]
+        }], propDecorators: { severity: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], closable: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }], visibleChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Selects and validates local files. The consuming app owns the selection and upload transport.
+ * @example
+ * <i-file-upload [(files)]="files" [options]="uploadOptions" />
+ */
+class IFileUpload {
+    /** Controlled selection; supports [(files)]. */
+    files = [];
+    options = {};
+    disabled = false;
+    dropLabel = 'Drop your files here';
+    description = 'or choose files from your device';
+    chooseLabel = 'Choose files';
+    ariaLabel = 'Choose files';
+    uploadIcon = 'pi pi-cloud-upload';
+    fileIcon = 'pi pi-file';
+    /** Emits only when a valid selection changes. Invalid batches are rejected as a whole. */
+    filesChange = new EventEmitter();
+    validationError = new EventEmitter();
+    componentId = UniqueComponentId('i-file-upload-');
+    dragging = false;
+    error = null;
+    get limits() {
+        return {
+            fileTypes: this.options.fileTypes ?? [],
+            multiple: this.options.multiple ?? true,
+            maxFiles: this.options.maxFiles ?? 20,
+            maxFileSize: this.options.maxFileSize ?? 25 * 1024 * 1024,
+            maxTotalSize: this.options.maxTotalSize ?? 100 * 1024 * 1024,
+            allowEmptyFiles: this.options.allowEmptyFiles ?? false,
+        };
+    }
+    get accept() {
+        return this.limits.fileTypes.join(',');
+    }
+    get limitsLabel() {
+        const limits = this.limits;
+        return `Up to ${limits.multiple ? limits.maxFiles : Math.min(1, limits.maxFiles)} files · ${this.formatSize(limits.maxFileSize)} per file · ${this.formatSize(limits.maxTotalSize)} total`;
+    }
+    onSelect(event) {
+        const element = event.target;
+        this.addFiles(Array.from(element.files ?? []));
+        element.value = '';
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        if (!this.disabled)
+            this.dragging = true;
+    }
+    onDragLeave(event) {
+        const zone = event.currentTarget;
+        if (!(event.relatedTarget instanceof Node) || !zone.contains(event.relatedTarget)) {
+            this.dragging = false;
+        }
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.dragging = false;
+        this.addFiles(Array.from(event.dataTransfer?.files ?? []));
+    }
+    addFiles(incoming) {
+        if (this.disabled || incoming.length === 0)
+            return;
+        this.error = null;
+        const limits = this.limits;
+        for (const file of incoming) {
+            if (!this.accepts(file)) {
+                this.reject({ code: 'fileType', file, message: `${file.name}: supported file types are ${limits.fileTypes.join(', ')}.` });
+                return;
+            }
+            if (!limits.allowEmptyFiles && file.size === 0) {
+                this.reject({ code: 'emptyFile', file, message: `${file.name} is empty.` });
+                return;
+            }
+            if (file.size > limits.maxFileSize) {
+                this.reject({ code: 'fileSize', file, message: `${file.name} exceeds ${this.formatSize(limits.maxFileSize)} per file.` });
+                return;
+            }
+        }
+        // Single-file mode replaces the existing selection. A multi-file drop is still rejected.
+        const combined = limits.multiple ? [...this.files] : [];
+        for (const file of incoming) {
+            if (!combined.some((existing) => this.sameFile(existing, file)))
+                combined.push(file);
+        }
+        const maxFiles = limits.multiple ? limits.maxFiles : Math.min(1, limits.maxFiles);
+        if (combined.length > maxFiles) {
+            this.reject({ code: 'fileCount', message: `Select at most ${maxFiles} file${maxFiles === 1 ? '' : 's'}.` });
+            return;
+        }
+        if (combined.reduce((total, file) => total + file.size, 0) > limits.maxTotalSize) {
+            this.reject({ code: 'totalSize', message: `Selected files exceed ${this.formatSize(limits.maxTotalSize)} in total.` });
+            return;
+        }
+        if (combined.length !== this.files.length || combined.some((file, index) => !this.sameFile(file, this.files[index]))) {
+            this.filesChange.emit(combined);
+        }
+    }
+    remove(index) {
+        if (this.disabled || index < 0 || index >= this.files.length)
+            return;
+        this.error = null;
+        this.filesChange.emit(this.files.filter((_, position) => position !== index));
+    }
+    formatSize(bytes) {
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1024 * 1024)
+            return `${Number((bytes / 1024).toFixed(1))} KB`;
+        return `${Number((bytes / (1024 * 1024)).toFixed(1))} MB`;
+    }
+    accepts(file) {
+        return this.limits.fileTypes.length === 0 || this.limits.fileTypes.some((type) => {
+            const token = type.toLowerCase();
+            if (token.startsWith('.'))
+                return file.name.toLowerCase().endsWith(token);
+            if (token.endsWith('/*'))
+                return file.type.toLowerCase().startsWith(token.slice(0, -1));
+            return file.type.toLowerCase() === token;
+        });
+    }
+    sameFile(a, b) {
+        return a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
+    }
+    reject(error) {
+        this.error = error;
+        this.validationError.emit(error);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IFileUpload, isStandalone: true, selector: "i-file-upload", inputs: { files: "files", options: "options", disabled: "disabled", dropLabel: "dropLabel", description: "description", chooseLabel: "chooseLabel", ariaLabel: "ariaLabel", uploadIcon: "uploadIcon", fileIcon: "fileIcon" }, outputs: { filesChange: "filesChange", validationError: "validationError" }, ngImport: i0, template: "<div class=\"i-file-upload\" [class.i-file-upload--disabled]=\"disabled\">\n  <div class=\"i-file-upload__drop-zone\" [class.i-file-upload__drop-zone--active]=\"dragging && !disabled\"\n    (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n    <i [class]=\"uploadIcon + ' i-file-upload__icon'\" aria-hidden=\"true\"></i>\n    <strong>{{ dropLabel }}</strong>\n    <span class=\"i-file-upload__description\">{{ description }}</span>\n    <input #fileInput type=\"file\" hidden [multiple]=\"limits.multiple\" [accept]=\"accept\"\n      [disabled]=\"disabled\" (change)=\"onSelect($event)\" [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-describedby]=\"componentId + '-limits'\" />\n    <i-button icon=\"pi pi-plus\" [outlined]=\"true\" [disabled]=\"disabled\" [ariaLabel]=\"ariaLabel\"\n      (clicked)=\"fileInput.click()\">{{ chooseLabel }}</i-button>\n    <small [id]=\"componentId + '-limits'\" class=\"i-file-upload__description\">{{ limitsLabel }}</small>\n    @if (accept) {\n      <small class=\"i-file-upload__description\">Accepted types: {{ accept }}</small>\n    }\n  </div>\n  @if (error) {\n    <i-message severity=\"danger\" role=\"alert\">{{ error.message }}</i-message>\n  }\n  <div class=\"i-file-upload__list\" aria-live=\"polite\" aria-relevant=\"additions removals text\">\n    @if (files.length) {\n      <strong>{{ files.length }} file{{ files.length === 1 ? '' : 's' }} selected</strong>\n      @for (file of files; track $index) {\n        <div class=\"i-file-upload__row\">\n          <i [class]=\"fileIcon\" aria-hidden=\"true\"></i>\n          <span class=\"i-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n          <small class=\"i-file-upload__description\">{{ formatSize(file.size) }}</small>\n          <i-button icon=\"pi pi-times\" [text]=\"true\" size=\"small\" [ariaLabel]=\"'Remove ' + file.name\"\n            [disabled]=\"disabled\" (clicked)=\"remove($index)\" />\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: [".i-file-upload{color:var(--color-text-primary)}.i-file-upload__drop-zone{border-color:var(--surface-border);background:var(--color-component-background)}.i-file-upload__drop-zone--active,.i-file-upload__drop-zone:focus-within{border-color:var(--color-primary);background:var(--surface-hover)}.i-file-upload__icon,.i-file-upload__row>i{color:var(--color-primary)}.i-file-upload__description{color:var(--color-text-secondary)}.i-file-upload__row{border-color:var(--surface-border)}.i-file-upload--disabled .i-file-upload__drop-zone{background:var(--color-disabled-background);border-color:var(--color-disabled-border)}:host{display:block}.i-file-upload{display:flex;flex-direction:column;gap:1rem}.i-file-upload__drop-zone{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem 1rem;text-align:center;border:2px dashed;border-radius:8px;transition:border-color .2s,background .2s}.i-file-upload__icon{font-size:2rem}.i-file-upload--disabled .i-file-upload__drop-zone{opacity:.65}.i-file-upload__list{display:flex;flex-direction:column;gap:.5rem}.i-file-upload__row{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-bottom:1px solid}.i-file-upload__row small{white-space:nowrap}.i-file-upload__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }, { kind: "component", type: IMessage, selector: "i-message", inputs: ["severity", "size", "icon", "closable", "visible"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IFileUpload, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-file-upload', standalone: true, imports: [IButton, IMessage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"i-file-upload\" [class.i-file-upload--disabled]=\"disabled\">\n  <div class=\"i-file-upload__drop-zone\" [class.i-file-upload__drop-zone--active]=\"dragging && !disabled\"\n    (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n    <i [class]=\"uploadIcon + ' i-file-upload__icon'\" aria-hidden=\"true\"></i>\n    <strong>{{ dropLabel }}</strong>\n    <span class=\"i-file-upload__description\">{{ description }}</span>\n    <input #fileInput type=\"file\" hidden [multiple]=\"limits.multiple\" [accept]=\"accept\"\n      [disabled]=\"disabled\" (change)=\"onSelect($event)\" [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-describedby]=\"componentId + '-limits'\" />\n    <i-button icon=\"pi pi-plus\" [outlined]=\"true\" [disabled]=\"disabled\" [ariaLabel]=\"ariaLabel\"\n      (clicked)=\"fileInput.click()\">{{ chooseLabel }}</i-button>\n    <small [id]=\"componentId + '-limits'\" class=\"i-file-upload__description\">{{ limitsLabel }}</small>\n    @if (accept) {\n      <small class=\"i-file-upload__description\">Accepted types: {{ accept }}</small>\n    }\n  </div>\n  @if (error) {\n    <i-message severity=\"danger\" role=\"alert\">{{ error.message }}</i-message>\n  }\n  <div class=\"i-file-upload__list\" aria-live=\"polite\" aria-relevant=\"additions removals text\">\n    @if (files.length) {\n      <strong>{{ files.length }} file{{ files.length === 1 ? '' : 's' }} selected</strong>\n      @for (file of files; track $index) {\n        <div class=\"i-file-upload__row\">\n          <i [class]=\"fileIcon\" aria-hidden=\"true\"></i>\n          <span class=\"i-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n          <small class=\"i-file-upload__description\">{{ formatSize(file.size) }}</small>\n          <i-button icon=\"pi pi-times\" [text]=\"true\" size=\"small\" [ariaLabel]=\"'Remove ' + file.name\"\n            [disabled]=\"disabled\" (clicked)=\"remove($index)\" />\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: [".i-file-upload{color:var(--color-text-primary)}.i-file-upload__drop-zone{border-color:var(--surface-border);background:var(--color-component-background)}.i-file-upload__drop-zone--active,.i-file-upload__drop-zone:focus-within{border-color:var(--color-primary);background:var(--surface-hover)}.i-file-upload__icon,.i-file-upload__row>i{color:var(--color-primary)}.i-file-upload__description{color:var(--color-text-secondary)}.i-file-upload__row{border-color:var(--surface-border)}.i-file-upload--disabled .i-file-upload__drop-zone{background:var(--color-disabled-background);border-color:var(--color-disabled-border)}:host{display:block}.i-file-upload{display:flex;flex-direction:column;gap:1rem}.i-file-upload__drop-zone{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem 1rem;text-align:center;border:2px dashed;border-radius:8px;transition:border-color .2s,background .2s}.i-file-upload__icon{font-size:2rem}.i-file-upload--disabled .i-file-upload__drop-zone{opacity:.65}.i-file-upload__list{display:flex;flex-direction:column;gap:.5rem}.i-file-upload__row{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-bottom:1px solid}.i-file-upload__row small{white-space:nowrap}.i-file-upload__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+        }], propDecorators: { files: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], dropLabel: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], chooseLabel: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], uploadIcon: [{
+                type: Input
+            }], fileIcon: [{
+                type: Input
+            }], filesChange: [{
+                type: Output
+            }], validationError: [{
+                type: Output
+            }] } });
+
 /**
  * Textarea Component
  *
@@ -4813,81 +5046,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 type: Output
             }] } });
 
-class IMessage {
-    /**
-     * Severity type of the message
-     * @default 'info'
-     */
-    severity = 'info';
-    /**
-     * Size of the message
-     * @default 'medium'
-     */
-    size = 'medium';
-    /**
-     * Icon to display (Material Icons)
-     * If not provided, default icons based on severity will be used
-     */
-    icon;
-    /**
-     * Whether the message can be closed
-     * @default false
-     */
-    closable = false;
-    /**
-     * Whether the message is visible
-     * @default true
-     */
-    visible = true;
-    /**
-     * Event emitted when visible changes (for two-way binding)
-     */
-    visibleChange = new EventEmitter();
-    /**
-     * Get the default icon based on severity
-     */
-    getDefaultIcon() {
-        if (this.icon)
-            return this.icon;
-        const iconMap = {
-            success: 'pi pi-check-circle',
-            info: 'pi pi-lightbulb',
-            warning: 'pi pi-exclamation-triangle',
-            danger: 'pi pi-times-circle',
-            primary: 'pi pi-info-circle',
-            secondary: 'pi pi-info-circle',
-            tertiary: 'pi pi-info-circle',
-            contrast: 'pi pi-info-circle',
-        };
-        return iconMap[this.severity] || 'pi pi-info-circle';
-    }
-    /**
-     * Close the message
-     */
-    close() {
-        this.visible = false;
-        this.visibleChange.emit(this.visible);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IMessage, isStandalone: true, selector: "i-message", inputs: { severity: "severity", size: "size", icon: "icon", closable: "closable", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "@if (visible) {\n  <div\n    class=\"i-message i-message-{{ severity }} i-message--{{ size }}\"\n    role=\"alert\"\n  >\n    <div class=\"i-message-content\">\n      <div class=\"i-message-icon\">\n        <i [class]=\"getDefaultIcon()\"></i>\n      </div>\n      <div class=\"i-message-text\">\n        <ng-content></ng-content>\n      </div>\n      @if (closable) {\n        <button\n          class=\"i-message-close\"\n          type=\"button\"\n          (click)=\"close()\"\n          aria-label=\"Close\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      }\n    </div>\n  </div>\n}\n", styles: [".i-message{background-color:var(--surface-section);border-left:4px solid transparent}.i-message .i-message-text{color:var(--color-text-primary)}.i-message .i-message-close{color:var(--color-text-secondary)}.i-message .i-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-message.i-message-success{border-left-color:var(--color-success)}.i-message.i-message-success .i-message-icon{color:var(--color-success)}.i-message.i-message-info{border-left-color:var(--color-info)}.i-message.i-message-info .i-message-icon{color:var(--color-info)}.i-message.i-message-warning{border-left-color:var(--color-warning)}.i-message.i-message-warning .i-message-icon{color:var(--color-warning)}.i-message.i-message-danger{border-left-color:var(--color-danger)}.i-message.i-message-danger .i-message-icon{color:var(--color-danger)}.i-message.i-message-primary{border-left-color:var(--color-primary)}.i-message.i-message-primary .i-message-icon{color:var(--color-primary)}.i-message.i-message-secondary{border-left-color:var(--color-secondary)}.i-message.i-message-secondary .i-message-icon{color:var(--color-secondary)}.i-message.i-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-message.i-message-tertiary .i-message-icon{color:var(--color-text-tertiary)}.i-message.i-message-contrast{border-left-color:var(--color-contrast)}.i-message.i-message-contrast .i-message-icon{color:var(--color-contrast)}.i-message{display:flex;align-items:flex-start;border-radius:8px;margin-bottom:16px}.i-message:last-child{margin-bottom:0}.i-message--small .i-message-content{gap:8px;padding:8px 12px}.i-message--small .i-message-content .i-message-icon i{font-size:14px}.i-message--small .i-message-content .i-message-text{font-size:.95em}.i-message--small .i-message-content .i-message-close{padding:2px}.i-message--small .i-message-content .i-message-close i{font-size:10px}.i-message--medium .i-message-content{gap:12px;padding:16px}.i-message--medium .i-message-content .i-message-icon i{font-size:18px}.i-message--medium .i-message-content .i-message-text{font-size:1em}.i-message--medium .i-message-content .i-message-close i{font-size:12px}.i-message--large .i-message-content{gap:16px;padding:20px 24px}.i-message--large .i-message-content .i-message-icon i{font-size:24px}.i-message--large .i-message-content .i-message-text{font-size:1.1em}.i-message--large .i-message-content .i-message-close{padding:6px}.i-message--large .i-message-content .i-message-close i{font-size:14px}.i-message .i-message-content{display:flex;align-items:flex-start;width:100%}.i-message .i-message-content .i-message-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-message .i-message-content .i-message-text{flex:1;line-height:1.5;min-width:0;word-wrap:break-word}.i-message .i-message-content .i-message-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:background-color .2s,color .2s}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IMessage, decorators: [{
-            type: Component,
-            args: [{ selector: 'i-message', imports: [], template: "@if (visible) {\n  <div\n    class=\"i-message i-message-{{ severity }} i-message--{{ size }}\"\n    role=\"alert\"\n  >\n    <div class=\"i-message-content\">\n      <div class=\"i-message-icon\">\n        <i [class]=\"getDefaultIcon()\"></i>\n      </div>\n      <div class=\"i-message-text\">\n        <ng-content></ng-content>\n      </div>\n      @if (closable) {\n        <button\n          class=\"i-message-close\"\n          type=\"button\"\n          (click)=\"close()\"\n          aria-label=\"Close\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      }\n    </div>\n  </div>\n}\n", styles: [".i-message{background-color:var(--surface-section);border-left:4px solid transparent}.i-message .i-message-text{color:var(--color-text-primary)}.i-message .i-message-close{color:var(--color-text-secondary)}.i-message .i-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-message.i-message-success{border-left-color:var(--color-success)}.i-message.i-message-success .i-message-icon{color:var(--color-success)}.i-message.i-message-info{border-left-color:var(--color-info)}.i-message.i-message-info .i-message-icon{color:var(--color-info)}.i-message.i-message-warning{border-left-color:var(--color-warning)}.i-message.i-message-warning .i-message-icon{color:var(--color-warning)}.i-message.i-message-danger{border-left-color:var(--color-danger)}.i-message.i-message-danger .i-message-icon{color:var(--color-danger)}.i-message.i-message-primary{border-left-color:var(--color-primary)}.i-message.i-message-primary .i-message-icon{color:var(--color-primary)}.i-message.i-message-secondary{border-left-color:var(--color-secondary)}.i-message.i-message-secondary .i-message-icon{color:var(--color-secondary)}.i-message.i-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-message.i-message-tertiary .i-message-icon{color:var(--color-text-tertiary)}.i-message.i-message-contrast{border-left-color:var(--color-contrast)}.i-message.i-message-contrast .i-message-icon{color:var(--color-contrast)}.i-message{display:flex;align-items:flex-start;border-radius:8px;margin-bottom:16px}.i-message:last-child{margin-bottom:0}.i-message--small .i-message-content{gap:8px;padding:8px 12px}.i-message--small .i-message-content .i-message-icon i{font-size:14px}.i-message--small .i-message-content .i-message-text{font-size:.95em}.i-message--small .i-message-content .i-message-close{padding:2px}.i-message--small .i-message-content .i-message-close i{font-size:10px}.i-message--medium .i-message-content{gap:12px;padding:16px}.i-message--medium .i-message-content .i-message-icon i{font-size:18px}.i-message--medium .i-message-content .i-message-text{font-size:1em}.i-message--medium .i-message-content .i-message-close i{font-size:12px}.i-message--large .i-message-content{gap:16px;padding:20px 24px}.i-message--large .i-message-content .i-message-icon i{font-size:24px}.i-message--large .i-message-content .i-message-text{font-size:1.1em}.i-message--large .i-message-content .i-message-close{padding:6px}.i-message--large .i-message-content .i-message-close i{font-size:14px}.i-message .i-message-content{display:flex;align-items:flex-start;width:100%}.i-message .i-message-content .i-message-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-message .i-message-content .i-message-text{flex:1;line-height:1.5;min-width:0;word-wrap:break-word}.i-message .i-message-content .i-message-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:background-color .2s,color .2s}\n"] }]
-        }], propDecorators: { severity: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], closable: [{
-                type: Input
-            }], visible: [{
-                type: Input
-            }], visibleChange: [{
-                type: Output
-            }] } });
-
 /**
  * Multi-Select Component
  *
@@ -10465,5 +10623,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractDialog, CLAIMS_CHECKER, ConfirmationDialogComponent, ConfirmationDialogService, DataUpdateEventService, DialogService, EmptyStateComponent, IAccordion, IAccordionList, IButton, ICalendar, ICard, IChart, ICheckbox, IChip, IChipsComponent, IDialog, IDialogActions, IDialogBase, IDivider, IFieldPicker, IInputText, IListbox, IMessage, IMultiSelect, IOrderedList, IOverlayPanel, IPanel, IPlaceholder, IProgressSpinner, IRadioButton, IRuleEditor, ISelect, IStep, IStepper, ITabPanel, ITable, ITabs, ITag, ITextarea, IToggle, ITreeView, IWhisper, LayoutComponent, LayoutService, LocalStorageColorSchemeKey, MenuComponent, NoContentComponent, SeoService, SidebarComponent, StructuredDataService, TooltipComponent, TooltipDirective, TopbarComponent, UniqueComponentId, WhisperService, ZIndexUtils, lastId, provideMenuClaimsChecker };
+export { AbstractDialog, CLAIMS_CHECKER, ConfirmationDialogComponent, ConfirmationDialogService, DataUpdateEventService, DialogService, EmptyStateComponent, IAccordion, IAccordionList, IButton, ICalendar, ICard, IChart, ICheckbox, IChip, IChipsComponent, IDialog, IDialogActions, IDialogBase, IDivider, IFieldPicker, IFileUpload, IInputText, IListbox, IMessage, IMultiSelect, IOrderedList, IOverlayPanel, IPanel, IPlaceholder, IProgressSpinner, IRadioButton, IRuleEditor, ISelect, IStep, IStepper, ITabPanel, ITable, ITabs, ITag, ITextarea, IToggle, ITreeView, IWhisper, LayoutComponent, LayoutService, LocalStorageColorSchemeKey, MenuComponent, NoContentComponent, SeoService, SidebarComponent, StructuredDataService, TooltipComponent, TooltipDirective, TopbarComponent, UniqueComponentId, WhisperService, ZIndexUtils, lastId, provideMenuClaimsChecker };
 //# sourceMappingURL=invensys-ng.mjs.map