xv-webcomponents 0.1.44 → 0.1.46

package/dist/collection/components/xv-data-table/xv-data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"xv-data-table.js","sourceRoot":"","sources":["../../../src/components/xv-data-table/xv-data-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAO5C,MAAM,OAAO,WAAW;IALxB;QAOU,SAAI,GAAa,QAAQ,CAAC,EAAE,CAAC;QAE7B,iBAAY,GAAsB,EAAE,CAAC;QACrC,UAAK,GAAY,KAAK,CAAC;KA4BhC;IA1BC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe;YACzB;gBACE,6DAAM,IAAI,EAAC,OAAO,GAAG,CACb;YACV,4DAAK,KAAK,EAAC,KAAK;gBACd,4DAAK,KAAK,EAAC,WAAW;oBACpB,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB;gBACN,4DAAK,KAAK,EAAC,aAAa;oBACtB,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF;YACN,8DAAO,IAAI,EAAC,OAAO;gBAChB,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAC/B,mEACG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,MAAM,EAAE,EAAE,CAAC,WAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAI,CAAC,CAC5D,CACZ;gBAED,8DAAQ,CACF,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Element } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-data-table',\n  styleUrl: 'xv-data-table.scss',\n  shadow: true,\n})\nexport class XvDataTable {\n  @Element() el: HTMLElement;\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n  @Prop() block?: boolean;\n  @Prop() columnWidths: (string | null)[] = [];\n  @Prop() hover: boolean = false;\n\n  render() {\n    return (\n      <Host class=\"xv-data-table\">\n        <caption>\n          <slot name=\"title\" />\n        </caption>\n        <div class=\"bar\">\n          <div class=\"bar_batch\">\n            <slot name=\"batch\" />\n          </div>\n          <div class=\"bar_toolbar\">\n            <slot name=\"toolbar\" />\n          </div>\n        </div>\n        <table role=\"table\">\n          {this.columnWidths.length > 0 && (\n            <colgroup>\n              {this.columnWidths.map((width = 'auto') => <col style={{ width }} />)}\n            </colgroup>\n          )}\n\n          <slot />\n        </table>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"xv-data-table.js","sourceRoot":"","sources":["../../../src/components/xv-data-table/xv-data-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAO5C,MAAM,OAAO,WAAW;IALxB;QAOU,SAAI,GAAa,QAAQ,CAAC,EAAE,CAAC;QAG7B,iBAAY,GAAsB,EAAE,CAAC;QACrC,UAAK,GAAY,KAAK,CAAC;KAmChC;IAjCC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe;YACzB;gBACE,6DAAM,IAAI,EAAC,OAAO,GAAG,CACb;YACV,4DAAK,KAAK,EAAC,KAAK;gBACd,4DAAK,KAAK,EAAC,WAAW;oBACpB,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB;gBACN,4DAAK,KAAK,EAAC,aAAa;oBACtB,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF;YACN,8DAAO,IAAI,EAAC,OAAO;gBAChB,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAC/B,mEACG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,MAAM,EAAE,EAAE,CAAC,WAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAI,CAAC,CAC5D,CACZ;gBACD;oBAAO,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAAQ;gBACrC;oBAAO,8DAAQ,CAAQ;gBACvB;oBAAO,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAAQ,CAC/B;YAEP,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CACjB,4DAAK,KAAK,EAAC,SAAS;gBAClB,qEAAc,IAAI,EAAE,QAAQ,CAAC,EAAE,GAAI,CAC/B,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Element } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-data-table',\n  styleUrl: 'xv-data-table.scss',\n  shadow: true,\n})\nexport class XvDataTable {\n  @Element() el: HTMLElement;\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n  @Prop() block?: boolean;\n  @Prop() loading?: boolean;\n  @Prop() columnWidths: (string | null)[] = [];\n  @Prop() hover: boolean = false;\n\n  render() {\n    return (\n      <Host class=\"xv-data-table\">\n        <caption>\n          <slot name=\"title\" />\n        </caption>\n        <div class=\"bar\">\n          <div class=\"bar_batch\">\n            <slot name=\"batch\" />\n          </div>\n          <div class=\"bar_toolbar\">\n            <slot name=\"toolbar\" />\n          </div>\n        </div>\n        <table role=\"table\">\n          {this.columnWidths.length > 0 && (\n            <colgroup>\n              {this.columnWidths.map((width = 'auto') => <col style={{ width }} />)}\n            </colgroup>\n          )}\n          <thead><slot name=\"header\" /></thead>\n          <tbody><slot /></tbody>\n          <tfoot><slot name=\"footer\" /></tfoot>\n        </table>\n\n        {!!this.loading && (\n          <div class=\"loading\">\n            <xv-loader-v2 size={SIZE_VAR.LG} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.css

@@ -1,3 +1,98 @@
+.xv-tooltip[role=tooltip] {
+  position: absolute;
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-sm);
+  z-index: 999;
+  min-width: min(150px, 90vw);
+  max-width: min(400px, 90vw);
+}
+.xv-tooltip[role=tooltip]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
+  bottom: -5px;
+  left: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
+  bottom: -5px;
+  right: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
+  top: -5px;
+  left: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
+  top: -5px;
+  right: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
+  top: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
+  bottom: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
+  top: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
+  bottom: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+
 :host {
   display: block;
 }

package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js

@@ -21,7 +21,7 @@ export class XvDropdownItem {
         });
     }
     render() {
-        return (h(Host, { key: '85ba648d8281168521c1ed8c4b0b861fb428ce8e', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, h("slot", { key: '6c303d085e23e1ecfa433aefa22f02be1cd5711f' }), this.selected && h("span", { key: 'c555912f9727a0e42b09279b31fe3b3b740bf7eb', class: "checkmark" })));
+        return (h(Host, { key: 'a0748e38180cfbd7697e5a4b2069168f77e6917e', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, h("slot", { key: '3add18db3c3a0e3eabbc31f4e405620e4086b37a' }), this.selected && h("span", { key: '64d4731e8b3a9896ca92787421d66ac3a495c605', class: "checkmark" })));
     }
     componentWillLoad() {
         if (!this.value)

package/dist/collection/components/xv-dropdown/xv-dropdown.css

@@ -1,3 +1,98 @@
+.xv-tooltip[role=tooltip] {
+  position: absolute;
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-sm);
+  z-index: 999;
+  min-width: min(150px, 90vw);
+  max-width: min(400px, 90vw);
+}
+.xv-tooltip[role=tooltip]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
+  bottom: -5px;
+  left: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
+  bottom: -5px;
+  right: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
+  top: -5px;
+  left: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
+  top: -5px;
+  right: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
+  top: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
+  bottom: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
+  top: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
+  bottom: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+
 :host {
   --dropdown-padding-x: 16px;
   --dropdown-padding-y: 11px;

package/dist/collection/components/xv-dropdown/xv-dropdown.js

@@ -94,7 +94,7 @@ export class XvDropdown {
         this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));
     }
     render() {
-        return (h(Host, { key: '556a488d40dfcf1510f183fefbbf9d9bd1d0be80', class: "xv-dropdown", role: "combobox", size: this.size, open: this.open, error: this.error, disabled: this.disabled, tabindex: this.disabled ? -1 : false }, h("label", { key: '54550cb9b8a26cc4df4a55abc677bd3f5bb9730d', class: "label" }, h("slot", { key: '46270d1b0e6b5ee26a07aeaf318617c73e82cfdb', name: "label" }, this.label), this.info && h("xv-tooltip-v2", { key: 'f3b7c09e3346dbaeb0fd720e20e4bbcd58bde7eb', class: "label_info", message: this.info })), h("div", { key: '4b4a2794ba78378cd89b3b2ad67bc66edbf4c52f', class: "xv-dropdown-control control", onClick: this.handleOpen }, this.selected.length ? (h("p", { class: "control_value" }, this.selected.join(', '))) : (h("p", { class: "control_placeholder" }, this.placeholder || '')), this.renderIcon(), h("svg", { key: '7c79ee0d976229090c0c0a25d01d7beb9a0c3afc', class: "control_arrow", focusable: "false", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16" }, h("path", { key: 'a895b585e7750cf4a01f7bd0dff390e70f2c482c', d: "M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" }))), this.open && h("div", { key: '846792bfd1683daeb3223fb68c3559543b540787', class: "options" }, h("slot", { key: "xv-dropdown-options" })), (this.helper || this.error || this.warning) && (h("p", { key: '741d4636d86a44091e4a4b275806f745ded156f7', class: "helper" }, this.error || this.warning || this.helper))));
+        return (h(Host, { key: '2c5ea06ed7caeb3eb112f0421439d83666c71c0f', class: "xv-dropdown", role: "combobox", size: this.size, open: this.open, error: this.error, disabled: this.disabled, tabindex: this.disabled ? -1 : false }, h("label", { key: '1c57d5005bbf6e4419f5b4b55ea76a97d0bd6223', class: "label" }, h("slot", { key: '2ce3f332265b9e4dfa1b884d3bb869640d78b25f', name: "label" }, this.label), this.info && h("xv-tooltip-v2", { key: 'a46c73b62c3a2074a64ceeb0334ac0c55eef60fd', class: "label_info", message: this.info })), h("div", { key: '6711f988978aa4c1773f905c974aeadd3d23eba2', class: "xv-dropdown-control control", onClick: this.handleOpen }, this.selected.length ? (h("p", { class: "control_value" }, this.selected.join(', '))) : (h("p", { class: "control_placeholder" }, this.placeholder || '')), this.renderIcon(), h("svg", { key: 'dbd8ac8a724266322bf6a69c3b51aa0e653fce82', class: "control_arrow", focusable: "false", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16" }, h("path", { key: '9d41c7560755d88a502e3ea0024d021fcb467e6e', d: "M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" }))), this.open && h("div", { key: '2fbd336e60ad52321b571b2e369dfd0b0a14925f', class: "options" }, h("slot", { key: "xv-dropdown-options" })), (this.helper || this.error || this.warning) && (h("p", { key: '89dac505b3b1617eed4fe4ddfd2a088efb88ebbc', class: "helper" }, this.error || this.warning || this.helper))));
     }
     componentWillLoad() {
         this.setDefaultValues();

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

@@ -1,3 +1,98 @@
+.xv-tooltip[role=tooltip] {
+  position: absolute;
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-sm);
+  z-index: 999;
+  min-width: min(150px, 90vw);
+  max-width: min(400px, 90vw);
+}
+.xv-tooltip[role=tooltip]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
+  bottom: -5px;
+  left: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
+  bottom: -5px;
+  right: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
+  top: -5px;
+  left: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
+  top: -5px;
+  right: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
+  top: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
+  bottom: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
+  top: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
+  bottom: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+
 :host {
   font-family: inherit;
   display: flex;
@@ -30,6 +125,7 @@
   background-color: var(--background-inverse-hover);
 }
 :host .drop-zone {
+  min-height: 90px;
   border: 1px dashed var(--border-strong-01);
   background-color: transparent;
   padding: 1.14em;
@@ -96,8 +192,9 @@
   margin: 0;
   padding: 0;
 }
-:host .error-container__secondary {
+:host .error-container_secondary {
   color: var(--text-secondary, #515151);
+  white-space: pre-line;
 }
 
 :host(.disabled) {

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

@@ -6,6 +6,7 @@ export class XvFileUploader {
         this.variant = XvFileUploaderVariants.BUTTON;
         this.size = SIZE_VAR.MD;
         this.accept = [];
+        this.buttonVariant = 'primary';
         this.maxFileSizeMB = 5;
         this.maxFiles = 20;
         this.multiple = true;
@@ -38,8 +39,13 @@ export class XvFileUploader {
             this.dragActive = false;
         };
     }
+    async clearFiles() {
+        this.files = [];
+        if (this.fileInput) {
+            this.fileInput.value = '';
+        }
+    }
     validation(files) {
-        var _a;
         const maxSize = this.maxFileSizeMB * 1024 * 1024;
         const seenFileNames = new Set();
         const errorMessages = [];
@@ -50,12 +56,9 @@ export class XvFileUploader {
                 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;
-                });
+            const dotIndex = file.name.lastIndexOf('.');
+            const extension = file.name.substring(dotIndex).toLowerCase();
+            const isAccepted = this.accept.length === 0 || this.accept.some(type => type.toLowerCase() === extension);
             if (!isAccepted) {
                 error = 'Unsupported file type.';
             }
@@ -71,6 +74,8 @@ export class XvFileUploader {
         return uniqueFiles;
     }
     removeFile(index) {
+        if (this.files[index])
+            this.fileRemoved.emit(this.files[index]);
         this.files = this.validation([...this.files.slice(0, index), ...this.files.slice(index + 1)]);
         this.filesChange.emit(this.files);
         if (this.fileInput) {
@@ -79,10 +84,10 @@ export class XvFileUploader {
     }
     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) => {
+        return (h(Host, { key: 'cca5e29c47f1272eb20ce505f824bf0fee264d79', class: { 'upload-wrapper': true, [`uploader-${this.size}`]: true, disabled: !!this.disabled } }, this.label && h("label", { key: '83b6b040877e31d98485f8216923613dca2a8bdc', class: "label" }, this.label), this.description && h("p", { key: 'c5fee7ad8b3b000bf07436dbaa875c072e1e0169', class: "description" }, this.description), this.variant === 'button' ? (h("xv-button-v2", { variant: this.buttonVariant, disabled: this.disabled, 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: 'a3ccac67e702ea3d3e900b90fdb5fe0a2f8dd220', ref: el => (this.fileInput = el), type: "file", hidden: true, onChange: this.onFileSelect, multiple: this.multiple, accept: this.accept.join(',') }), h("ul", { key: 'c9ac4dce2a161863836af7c13c71783a9b51cdf0', 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)))));
+        })), this.error && (h("div", { key: '642650576c9019fb3e90ff2306a4ba2bc57ca6f7', class: "error-container" }, h("p", { key: '5ec4fe02693c4aa160d57721b2a44814c2081662', class: "error-container_primary" }, this.error)))));
     }
     _renderLoaderState(index) {
         var _a, _b, _c;
@@ -92,7 +97,7 @@ export class XvFileUploader {
             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" }))));
+                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" })), h("xv-button-v2", { variant: "ghost", size: SIZE_VAR.XS, onClick: () => this.removeFile(index) }, h("span", { slot: "icon-left" }, "\u00D7"))));
             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"))));
@@ -253,6 +258,26 @@ export class XvFileUploader {
                 "setter": false,
                 "defaultValue": "[]"
             },
+            "buttonVariant": {
+                "type": "string",
+                "attribute": "button-variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'ghost' | 'danger' | 'tertiary'",
+                    "resolved": "\"danger\" | \"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
             "maxFileSizeMB": {
                 "type": "number",
                 "attribute": "max-file-size-mb",
@@ -442,7 +467,48 @@ export class XvFileUploader {
                         }
                     }
                 }
+            }, {
+                "method": "fileRemoved",
+                "name": "fileRemoved",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "File",
+                    "resolved": "File",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
             }];
     }
+    static get methods() {
+        return {
+            "clearFiles": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
 }
 //# sourceMappingURL=xv-file-uploader.js.map

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

@@ -1 +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"]}
+{"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, Method } 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() buttonVariant: 'primary' | 'secondary' | 'ghost' | 'danger' | 'tertiary' = 'primary';\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  @Event() fileRemoved: EventEmitter<File>;\n\n  private fileInput: HTMLInputElement;\n\n  @Method()\n  async clearFiles() {\n    this.files = [];\n    if (this.fileInput) {\n      this.fileInput.value = '';\n    }\n  }\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 dotIndex = file.name.lastIndexOf('.');\n      const extension = file.name.substring(dotIndex).toLowerCase();\n      const isAccepted = this.accept.length === 0 || this.accept.some(type => type.toLowerCase() === extension);\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    if (this.files[index]) this.fileRemoved.emit(this.files[index]);\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          <xv-button-v2 variant={this.buttonVariant} disabled={this.disabled} onClick={() => this.fileInput.click()}>\n            {this.addText || 'Dateien auswählen'}\n          </xv-button-v2>\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.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            <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      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"]}