xv-webcomponents 0.1.43 → 0.1.44

package/dist/collection/components/xv-file-uploader/xv-file-uploader.js

@@ -0,0 +1,448 @@
+import { h, Host, Fragment } from "@stencil/core";
+import { SIZE_VAR } from "../../types/enum";
+import { XvFileUploaderVariants } from "./_vars";
+export class XvFileUploader {
+    constructor() {
+        this.variant = XvFileUploaderVariants.BUTTON;
+        this.size = SIZE_VAR.MD;
+        this.accept = [];
+        this.maxFileSizeMB = 5;
+        this.maxFiles = 20;
+        this.multiple = true;
+        this.files = [];
+        this.loadingStates = [];
+        this.errors = [];
+        this.dragActive = false;
+        this.errorMessages = [];
+        this.onFileSelect = (event) => {
+            const input = event.target;
+            const selectedFiles = Array.from(input.files || []);
+            this.handleFiles(selectedFiles);
+        };
+        this.onDrop = (event) => {
+            var _a;
+            event.preventDefault();
+            this.dragActive = false;
+            const droppedFiles = Array.from(((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) || []);
+            this.handleFiles(droppedFiles);
+        };
+        this.handleFiles = (files) => {
+            this.files = this.validation(this.multiple ? [...this.files, ...files] : files);
+            this.filesChange.emit(this.files);
+        };
+        this.onDragOver = (event) => {
+            event.preventDefault();
+            this.dragActive = true;
+        };
+        this.onDragLeave = () => {
+            this.dragActive = false;
+        };
+    }
+    validation(files) {
+        var _a;
+        const maxSize = this.maxFileSizeMB * 1024 * 1024;
+        const seenFileNames = new Set();
+        const errorMessages = [];
+        const uniqueFiles = [];
+        for (const file of files) {
+            let error = null;
+            if (!seenFileNames.has(file.name)) {
+                seenFileNames.add(file.name);
+                uniqueFiles.push(file);
+            }
+            const extension = (_a = file.name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+            const isAccepted = this.accept.length === 0 ||
+                this.accept.some(type => {
+                    const normalized = type.toLowerCase().replace(/^\./, '');
+                    return normalized === extension;
+                });
+            if (!isAccepted) {
+                error = 'Unsupported file type.';
+            }
+            else if (file.size > maxSize) {
+                error = `File ${file.name} is too large.`;
+            }
+            errorMessages.push(error);
+        }
+        this.error = uniqueFiles.length > this.maxFiles
+            ? `Only ${this.maxFiles} file(s) allowed.`
+            : null;
+        this.errorMessages = errorMessages;
+        return uniqueFiles;
+    }
+    removeFile(index) {
+        this.files = this.validation([...this.files.slice(0, index), ...this.files.slice(index + 1)]);
+        this.filesChange.emit(this.files);
+        if (this.fileInput) {
+            this.fileInput.value = '';
+        }
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '1105dfa28937f83f3508498ecf3b00b181f3f062', class: { 'upload-wrapper': true, [`uploader-${this.size}`]: true, disabled: !!this.disabled } }, this.label && h("label", { key: 'bb7aeb7744325dc15cee88e63672ab2f1cac48fa', class: "label" }, this.label), this.description && h("p", { key: '17d6076cf70f1d69b9d760992739f5f8ae571711', class: "description" }, this.description), this.variant === 'button' ? (h("button", { disabled: this.disabled, class: "upload-btn", onClick: () => this.fileInput.click() }, this.addText || 'Dateien auswählen')) : (h("div", { class: { 'drop-zone': true, active: this.dragActive }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onClick: () => this.fileInput.click() }, this.addText || 'Dateien hierher ziehen oder darauf klicken, um eine Datei auszuwählen.', ((_a = this.accept) === null || _a === void 0 ? void 0 : _a.length) > 0 && h("span", null, " (", this.accept.join(', '), ")"))), h("input", { key: 'bc25da9c977df0452fd8946b160d7b89487a5aee', ref: el => (this.fileInput = el), type: "file", hidden: true, onChange: this.onFileSelect, multiple: this.multiple, accept: this.accept.map(type => `.${type}`).join(',') }), h("ul", { key: '3d2b5a6505a70c4a14004f0e0f3c6da7213b0007', class: "file-list" }, this.files.map((file, index) => {
+            var _a, _b;
+            return (h("li", { class: { file: true, withError: !!(((_a = this.errors) === null || _a === void 0 ? void 0 : _a[index]) || ((_b = this.errorMessages) === null || _b === void 0 ? void 0 : _b[index])) } }, h("div", { class: "file_container" }, h("span", { class: "file_container_name" }, file.name), this._renderLoaderState(index)), this._renderError(index)));
+        })), this.error && (h("div", { key: '3918fcaf5c5660eb2a5553886e191e2969d81cb4', class: "error-container" }, h("p", { key: '26fcb672d89ec14e99b83dfc78712b72d9042d72', class: "error-container_primary" }, this.error)))));
+    }
+    _renderLoaderState(index) {
+        var _a, _b, _c;
+        const state = ((_a = this.loadingStates) === null || _a === void 0 ? void 0 : _a[index]) || null;
+        const errorIcon = ((_b = this.errors) === null || _b === void 0 ? void 0 : _b[index]) || ((_c = this.errorMessages) === null || _c === void 0 ? void 0 : _c[index]) ? (h("svg", { class: "file_container_errorIcon", width: "16", height: "16", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" }))) : null;
+        switch (state) {
+            case 'loading':
+                return (h(Fragment, null, errorIcon, h("xv-loader-v2", { size: SIZE_VAR.XS })));
+            case 'success':
+                return (h(Fragment, null, errorIcon, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 18 16", fill: "none" }, h("path", { d: "M9 16C6.125 16 3.5 14.5 2.0625 12C0.625 9.53125 0.625 6.5 2.0625 4C3.5 1.53125 6.125 0 9 0C11.8438 0 14.4688 1.53125 15.9062 4C17.3438 6.5 17.3438 9.53125 15.9062 12C14.4688 14.5 11.8438 16 9 16ZM12.5312 6.53125H12.5C12.8125 6.25 12.8125 5.78125 12.5 5.46875C12.2188 5.1875 11.75 5.1875 11.4688 5.46875L8 8.96875L6.53125 7.5C6.21875 7.1875 5.75 7.1875 5.46875 7.5C5.15625 7.78125 5.15625 8.25 5.46875 8.53125L7.46875 10.5312C7.75 10.8438 8.21875 10.8438 8.53125 10.5312L12.5312 6.53125Z", fill: "#97BF0D" }))));
+            case 'uploaded':
+            default:
+                return (h(Fragment, null, errorIcon, h("xv-button-v2", { variant: "ghost", size: SIZE_VAR.XS, onClick: () => this.removeFile(index) }, h("span", { slot: "icon-left" }, "\u00D7"))));
+        }
+    }
+    _renderError(index) {
+        var _a, _b;
+        const error = ((_a = this.errors) === null || _a === void 0 ? void 0 : _a[index]) || ((_b = this.errorMessages) === null || _b === void 0 ? void 0 : _b[index]);
+        if (!error)
+            return;
+        if (typeof error === 'object') {
+            return (h("div", { class: "error-container" }, h("p", { class: "error-container_primary" }, error.primary), h("p", { class: "error-container_secondary" }, error.secondary)));
+        }
+        if (typeof error === 'string') {
+            return (h("div", { class: "error-container" }, h("p", { class: "error-container_primary" }, error)));
+        }
+        return null;
+    }
+    static get is() { return "xv-file-uploader"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-file-uploader.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-file-uploader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "attribute": "description",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "addText": {
+                "type": "string",
+                "attribute": "add-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "XvFileUploaderVariants",
+                    "resolved": "XvFileUploaderVariants.BUTTON | XvFileUploaderVariants.DRAG_DROP",
+                    "references": {
+                        "XvFileUploaderVariants": {
+                            "location": "import",
+                            "path": "./_vars",
+                            "id": "src/components/xv-file-uploader/_vars.ts::XvFileUploaderVariants"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "XvFileUploaderVariants.BUTTON"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "SIZE_VAR",
+                    "resolved": "SIZE_VAR.LG | SIZE_VAR.MD | SIZE_VAR.SM | SIZE_VAR.XL | SIZE_VAR.XS",
+                    "references": {
+                        "SIZE_VAR": {
+                            "location": "import",
+                            "path": "../../types/enum",
+                            "id": "src/types/enum.ts::SIZE_VAR"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SIZE_VAR.MD"
+            },
+            "accept": {
+                "type": "unknown",
+                "attribute": "accept",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "maxFileSizeMB": {
+                "type": "number",
+                "attribute": "max-file-size-mb",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "5"
+            },
+            "maxFiles": {
+                "type": "number",
+                "attribute": "max-files",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "20"
+            },
+            "multiple": {
+                "type": "boolean",
+                "attribute": "multiple",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "files": {
+                "type": "unknown",
+                "attribute": "files",
+                "mutable": true,
+                "complexType": {
+                    "original": "File[]",
+                    "resolved": "File[]",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "loadingStates": {
+                "type": "unknown",
+                "attribute": "loading-states",
+                "mutable": true,
+                "complexType": {
+                    "original": "('loading' | 'success' | 'uploaded')[]",
+                    "resolved": "(\"loading\" | \"success\" | \"uploaded\")[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "error": {
+                "type": "string",
+                "attribute": "error",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "errors": {
+                "type": "unknown",
+                "attribute": "errors",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[] | { primary: string; secondary: string; }[]",
+                    "resolved": "string[] | { primary: string; secondary: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dragActive": {},
+            "errorMessages": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "filesChange",
+                "name": "filesChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "File[]",
+                    "resolved": "File[]",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=xv-file-uploader.js.map

package/dist/collection/components/xv-file-uploader/xv-file-uploader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-file-uploader.js","sourceRoot":"","sources":["../../../src/components/xv-file-uploader/xv-file-uploader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Event, h, Host, Prop, State, Fragment } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\nimport { XvFileUploaderVariants } from './_vars';\n\n@Component({\n  tag: 'xv-file-uploader',\n  styleUrl: 'xv-file-uploader.scss',\n  shadow: true,\n})\nexport class XvFileUploader {\n  @Prop() label?: string;\n  @Prop() description?: string;\n  @Prop({ attribute: 'add-text' }) addText?: string;\n  @Prop() variant: XvFileUploaderVariants = XvFileUploaderVariants.BUTTON;\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n  @Prop() accept: string[] = [];\n  @Prop({ attribute: 'max-file-size-mb' }) maxFileSizeMB: number = 5;\n  @Prop({ attribute: 'max-files' }) maxFiles: number = 20;\n  @Prop() multiple: boolean = true;\n  @Prop({ reflect: true }) disabled?: boolean;\n  @Prop({ reflect: true, mutable: true }) files: File[] = [];\n  @Prop({ reflect: true, mutable: true, attribute: 'loading-states' }) loadingStates: ('loading' | 'success' | 'uploaded')[] = [];\n  @Prop({ reflect: true, mutable: true }) error?: string;\n  @Prop({ reflect: true, mutable: true }) errors: string[] | { primary: string; secondary: string; }[] = [];\n\n  @State() dragActive = false;\n  @State() errorMessages: string[] = [];\n\n  @Event() filesChange: EventEmitter<File[]>;\n\n  private fileInput: HTMLInputElement;\n\n  private onFileSelect = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    const selectedFiles = Array.from(input.files || []);\n    this.handleFiles(selectedFiles);\n  };\n\n  private onDrop = (event: DragEvent) => {\n    event.preventDefault();\n    this.dragActive = false;\n    const droppedFiles = Array.from(event.dataTransfer?.files || []);\n    this.handleFiles(droppedFiles);\n  };\n\n  private handleFiles = (files: File[]) => {\n    this.files = this.validation(this.multiple ? [...this.files, ...files] : files);\n    this.filesChange.emit(this.files);\n  };\n\n  private validation(files: File[]): File[] {\n    const maxSize = this.maxFileSizeMB * 1024 * 1024;\n    const seenFileNames = new Set<string>();\n    const errorMessages: (string | null)[] = [];\n    const uniqueFiles: File[] = [];\n\n    for (const file of files) {\n      let error: string | undefined = null;\n\n      if (!seenFileNames.has(file.name)) {\n        seenFileNames.add(file.name);\n        uniqueFiles.push(file);\n      }\n\n      const extension = file.name.split('.').pop()?.toLowerCase();\n      const isAccepted =\n        this.accept.length === 0 ||\n        this.accept.some(type => {\n          const normalized = type.toLowerCase().replace(/^\\./, '');\n          return normalized === extension;\n        });\n\n      if (!isAccepted) {\n        error = 'Unsupported file type.';\n      } else if (file.size > maxSize) {\n        error = `File ${file.name} is too large.`;\n      }\n\n      errorMessages.push(error);\n    }\n\n    this.error = uniqueFiles.length > this.maxFiles\n      ? `Only ${this.maxFiles} file(s) allowed.`\n      : null;\n\n    this.errorMessages = errorMessages;\n\n    return uniqueFiles;\n  }\n\n  private removeFile(index: number) {\n    this.files = this.validation([...this.files.slice(0, index), ...this.files.slice(index + 1)]);\n    this.filesChange.emit(this.files);\n    if (this.fileInput) {\n      this.fileInput.value = '';\n    }\n  }\n\n  private onDragOver = (event: DragEvent) => {\n    event.preventDefault();\n    this.dragActive = true;\n  };\n\n  private onDragLeave = () => {\n    this.dragActive = false;\n  };\n\n  render() {\n    return (\n      <Host class={{ 'upload-wrapper': true, [`uploader-${this.size}`]: true, disabled: !!this.disabled }}>\n        {this.label && <label class=\"label\">{this.label}</label>}\n        {this.description && <p class=\"description\">{this.description}</p>}\n        {this.variant === 'button' ? (\n          <button disabled={this.disabled} class=\"upload-btn\" onClick={() => this.fileInput.click()}>\n            {this.addText || 'Dateien auswählen'}\n          </button>\n        ) : (\n          <div\n            class={{ 'drop-zone': true, active: this.dragActive }}\n            onDrop={this.onDrop}\n            onDragOver={this.onDragOver}\n            onDragLeave={this.onDragLeave}\n            onClick={() => this.fileInput.click()}\n          >\n            {this.addText || 'Dateien hierher ziehen oder darauf klicken, um eine Datei auszuwählen.'}\n            {this.accept?.length > 0 && <span> ({this.accept.join(', ')})</span>}\n          </div>\n        )}\n\n        <input\n          ref={el => (this.fileInput = el)}\n          type=\"file\"\n          hidden\n          onChange={this.onFileSelect}\n          multiple={this.multiple}\n          accept={this.accept.map(type => `.${type}`).join(',')}\n        />\n\n        <ul class=\"file-list\">\n          {this.files.map((file, index) => (\n            <li class={{ file: true, withError: !!(this.errors?.[index] || this.errorMessages?.[index]) }}>\n              <div class=\"file_container\">\n                <span class=\"file_container_name\">{file.name}</span>\n                {this._renderLoaderState(index)}\n              </div>\n              {this._renderError(index)}\n            </li>\n          ))}\n        </ul>\n        {this.error && (\n          <div class=\"error-container\">\n            <p class=\"error-container_primary\">{this.error}</p>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private _renderLoaderState(index: number) {\n    const state = this.loadingStates?.[index] || null;\n\n    const errorIcon = this.errors?.[index] || this.errorMessages?.[index] ? (\n      <svg class=\"file_container_errorIcon\" width=\"16\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n        <path fill=\"currentColor\"\n              d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z\" />\n      </svg>\n    ) : null;\n\n    switch (state) {\n      case 'loading':\n        return (\n          <Fragment>\n            {errorIcon}\n            <xv-loader-v2 size={SIZE_VAR.XS} />\n          </Fragment>\n        );\n      case 'success':\n        return (\n          <Fragment>\n            {errorIcon}\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 18 16\" fill=\"none\">\n              <path\n                d=\"M9 16C6.125 16 3.5 14.5 2.0625 12C0.625 9.53125 0.625 6.5 2.0625 4C3.5 1.53125 6.125 0 9 0C11.8438 0 14.4688 1.53125 15.9062 4C17.3438 6.5 17.3438 9.53125 15.9062 12C14.4688 14.5 11.8438 16 9 16ZM12.5312 6.53125H12.5C12.8125 6.25 12.8125 5.78125 12.5 5.46875C12.2188 5.1875 11.75 5.1875 11.4688 5.46875L8 8.96875L6.53125 7.5C6.21875 7.1875 5.75 7.1875 5.46875 7.5C5.15625 7.78125 5.15625 8.25 5.46875 8.53125L7.46875 10.5312C7.75 10.8438 8.21875 10.8438 8.53125 10.5312L12.5312 6.53125Z\"\n                fill=\"#97BF0D\" />\n            </svg>\n          </Fragment>\n        );\n      case 'uploaded':\n      default:\n        return (\n          <Fragment>\n            {errorIcon}\n            <xv-button-v2 variant=\"ghost\" size={SIZE_VAR.XS} onClick={() => this.removeFile(index)}>\n              <span slot=\"icon-left\">×</span>\n            </xv-button-v2>\n          </Fragment>\n        );\n    }\n  }\n\n  private _renderError(index: number) {\n    const error = this.errors?.[index] || this.errorMessages?.[index];\n\n    if (!error) return;\n\n    if (typeof error === 'object') {\n      return (\n        <div class=\"error-container\">\n          <p class=\"error-container_primary\">{error.primary}</p>\n          <p class=\"error-container_secondary\">{error.secondary}</p>\n        </div>\n      );\n    }\n\n    if (typeof error === 'string') {\n      return (\n        <div class=\"error-container\">\n          <p class=\"error-container_primary\">{error}</p>\n        </div>\n      );\n    }\n\n    return null;\n  }\n}\n"]}