npm - xv-webcomponents - Versions diffs - 0.1.44 → 0.1.48 - Mend

xv-webcomponents 0.1.44 → 0.1.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (143) hide show

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

@@ -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 CHANGED Viewed

@@ -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: '8e7a822ee3c4eb8fd402d580cebcfba898223d27', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, h("slot", { key: 'ba93c8487f3390044e841db6d5e6f1df1f7bb5c9' }), this.selected && h("span", { key: '4596986268b2974d85970f0422987fb6906040fa', class: "checkmark" })));
     }
     componentWillLoad() {
         if (!this.value)

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

@@ -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 CHANGED Viewed

@@ -10,7 +10,7 @@ export class XvDropdown {
         this.setSelected = (selectedMap, optionNodes) => {
             const values = Array.from(selectedMap.values());
             const options = optionNodes || this.el.querySelectorAll(DropdownItemSelector);
-            this.selected = values.length === options.length ?
+            this.selected = this.multiple && values.length === options.length ?
                 ['Alle ausgewählt'] : values.length > 2 ?
                 [`${values.length} ausgewählt`] : values.map((v) => v.text);
             return values;
@@ -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: '22a368d8ed8366bc14b76571d1d230b09a8796b0', 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: '758412d82f433d5675f0f69048a76c67d7fea92c', class: "label" }, h("slot", { key: '7ea798f0ddca889db33845470d45aeeaaddce4a8', name: "label" }, this.label), this.info && h("xv-tooltip-v2", { key: '72bdd6aabf193f323cbc5ca715314568dc3aa8c8', class: "label_info", message: this.info })), h("div", { key: '91fc2cae2fe12eb171c017fcbf2e9b5a204bc955', 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: 'ab6e2eea7aa7563f9bdfa82bd980ba62bc29037a', 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: '71fc59d404e95dc3de990403370bc5abf206812b', d: "M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" }))), this.open && h("div", { key: '52f8a04ccb8364b6e9a0b1d3ad50cbff3ebf96af', class: "options" }, h("slot", { key: "xv-dropdown-options" })), (this.helper || this.error || this.warning) && (h("p", { key: 'a83ed0ce93a8886dbdff9e0d271c8d4229ffadc0', class: "helper" }, this.error || this.warning || this.helper))));
     }
     componentWillLoad() {
         this.setDefaultValues();

package/dist/collection/components/xv-dropdown/xv-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"xv-dropdown.js","sourceRoot":"","sources":["../../../src/components/xv-dropdown/xv-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, Watch, Listen, Event, EventEmitter } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\nimport { DropdownItemData, DropdownItemSelector } from './_vars';\nimport { forEach, setAttr } from '../../utils/utils';\n\n@Component({\n tag: 'xv-dropdown-v2',\n styleUrl: 'xv-dropdown.scss',\n shadow: true,\n})\nexport class XvDropdown {\n @Element() el: HTMLElement;\n @Prop({ reflect: true }) disabled?: boolean;\n @Prop({ reflect: true }) multiple?: boolean;\n @Prop({ reflect: true }) required?: boolean;\n @Prop({ reflect: true }) loading?: boolean;\n @Prop({ reflect: true, mutable: true }) open?: boolean;\n @Prop({ reflect: true }) error?: string;\n @Prop({ reflect: true }) label?: string;\n @Prop({ reflect: true }) helper?: string;\n @Prop({ reflect: true }) warning?: string;\n @Prop({ reflect: true }) placeholder?: string;\n @Prop({ reflect: false }) info?: string;\n @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n @Prop({ attribute: 'default-value'}) defaultValue?: DropdownItemData['value'];\n\n @State() selected: DropdownItemData['text'][] = [];\n @State() selectedMap: Map<DropdownItemData['value'], DropdownItemData> = new Map();\n\n @Event() changeSelection: EventEmitter<DropdownItemData[]>;\n\n @Watch('open')\n openChangeHandle() {\n if (this.disabled) return;\n\n if (this.open) {\n this.addListeners();\n } else {\n this.removeListeners();\n }\n }\n\n @Listen('itemSelected')\n handleItemSelected({ detail }: CustomEvent<DropdownItemData>) {\n const hasItem = this.selectedMap.has(detail.value);\n\n if (this.multiple) {\n if (detail.selected) {\n if (!hasItem) this.selectedMap.set(detail.value, detail);\n } else {\n if (hasItem) {\n if (this.required && this.selectedMap.size === 1) return;\n this.selectedMap.delete(detail.value);\n }\n }\n } else {\n if (detail.selected) {\n this.selectedMap.clear();\n this.selectedMap.set(detail.value, detail);\n } else {\n if (!this.required) this.selectedMap.clear();\n }\n this.open = false;\n }\n\n const optionElements = this.el.querySelectorAll(DropdownItemSelector);\n\n forEach(\n optionElements,\n (option) => setAttr(option, 'selected', this.selectedMap.has(option.getAttribute('value')))\n );\n\n this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));\n }\n\n private setSelected = (selectedMap: typeof this.selectedMap, optionNodes?: NodeListOf<Element>): DropdownItemData[] => {\n const values = Array.from(selectedMap.values());\n const options = optionNodes \|\| this.el.querySelectorAll(DropdownItemSelector);\n\n this.selected = values.length === options.length ?\n ['Alle ausgewählt'] : values.length > 2 ?\n [`${values.length} ausgewählt`] : values.map((v) => v.text);\n\n return values;\n };\n\n private handleOpen = () => {\n if (this.disabled \|\| this.open \|\| this.loading) return;\n this.open = true;\n };\n\n private handleClickOutside = (ev: MouseEvent) => {\n if (!this.open \|\| this.el.contains(ev.target as Node)) return;\n\n if (this.open) this.open = false;\n }\n\n private addListeners = () => {\n document.body.addEventListener('click', this.handleClickOutside);\n }\n\n private removeListeners = () => {\n document.body.removeEventListener('click', this.handleClickOutside);\n }\n\n private setDefaultValues = () => {\n if (!this.defaultValue) return;\n\n // Needs to wait next Javascript tik\n setTimeout(() => {\n const options = this.el.querySelectorAll(DropdownItemSelector);\n\n forEach(\n options,\n (option) => {\n const dropdownItemData: DropdownItemData = {\n value: option.getAttribute('value'),\n text: (option as any).innerText,\n selected: `${this.defaultValue}` === option.getAttribute('value'),\n };\n\n if (dropdownItemData.selected) {\n setAttr(option, 'selected', dropdownItemData.selected);\n this.selectedMap.set(dropdownItemData.value, dropdownItemData);\n }\n }\n );\n\n this.setSelected(this.selectedMap, options);\n });\n };\n\n render() {\n return (\n <Host\n class=\"xv-dropdown\"\n role=\"combobox\"\n size={this.size}\n open={this.open}\n error={this.error}\n disabled={this.disabled}\n tabindex={this.disabled ? -1 : false}>\n <label class=\"label\">\n <slot name=\"label\">{this.label}</slot>\n {this.info && <xv-tooltip-v2 class=\"label_info\" message={this.info}></xv-tooltip-v2>}\n </label>\n\n <div class=\"xv-dropdown-control control\" onClick={this.handleOpen}>\n {this.selected.length ? (\n <p class=\"control_value\">{this.selected.join(', ')}</p>\n ) : (\n <p class=\"control_placeholder\">{this.placeholder \|\| ''}</p>\n )}\n\n {this.renderIcon()}\n\n <svg class=\"control_arrow\" focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\" aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n </svg>\n </div>\n\n {this.open && <div class=\"options\">\n <slot key=\"xv-dropdown-options\" />\n </div>}\n\n {(this.helper \|\| this.error \|\| this.warning) && (\n <p class=\"helper\">{this.error \|\| this.warning \|\| this.helper}</p>\n )}\n </Host>\n );\n }\n\n componentWillLoad() {\n this.setDefaultValues();\n }\n\n componentDidLoad() {\n this.openChangeHandle();\n }\n\n disconnectedCallback() {\n this.removeListeners();\n }\n\n private renderIcon(): undefined \| HTMLElement {\n if (this.loading) {\n return <xv-loader-v2 class=\"control_icon error\" size={SIZE_VAR.XS} />\n }\n\n if (this.error) {\n return (\n <svg class=\"control_icon error\" 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 )\n }\n\n if (!this.error && !!this.warning) {\n return (\n <svg class=\"control_icon warning\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <path fill=\"currentColor\" d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\" />\n </svg>\n );\n }\n\n return undefined;\n }\n}\n"]}
1	+ {"version":3,"file":"xv-dropdown.js","sourceRoot":"","sources":["../../../src/components/xv-dropdown/xv-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, Watch, Listen, Event, EventEmitter } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\nimport { DropdownItemData, DropdownItemSelector } from './_vars';\nimport { forEach, setAttr } from '../../utils/utils';\n\n@Component({\n tag: 'xv-dropdown-v2',\n styleUrl: 'xv-dropdown.scss',\n shadow: true,\n})\nexport class XvDropdown {\n @Element() el: HTMLElement;\n @Prop({ reflect: true }) disabled?: boolean;\n @Prop({ reflect: true }) multiple?: boolean;\n @Prop({ reflect: true }) required?: boolean;\n @Prop({ reflect: true }) loading?: boolean;\n @Prop({ reflect: true, mutable: true }) open?: boolean;\n @Prop({ reflect: true }) error?: string;\n @Prop({ reflect: true }) label?: string;\n @Prop({ reflect: true }) helper?: string;\n @Prop({ reflect: true }) warning?: string;\n @Prop({ reflect: true }) placeholder?: string;\n @Prop({ reflect: false }) info?: string;\n @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n @Prop({ attribute: 'default-value'}) defaultValue?: DropdownItemData['value'];\n\n @State() selected: DropdownItemData['text'][] = [];\n @State() selectedMap: Map<DropdownItemData['value'], DropdownItemData> = new Map();\n\n @Event() changeSelection: EventEmitter<DropdownItemData[]>;\n\n @Watch('open')\n openChangeHandle() {\n if (this.disabled) return;\n\n if (this.open) {\n this.addListeners();\n } else {\n this.removeListeners();\n }\n }\n\n @Listen('itemSelected')\n handleItemSelected({ detail }: CustomEvent<DropdownItemData>) {\n const hasItem = this.selectedMap.has(detail.value);\n\n if (this.multiple) {\n if (detail.selected) {\n if (!hasItem) this.selectedMap.set(detail.value, detail);\n } else {\n if (hasItem) {\n if (this.required && this.selectedMap.size === 1) return;\n this.selectedMap.delete(detail.value);\n }\n }\n } else {\n if (detail.selected) {\n this.selectedMap.clear();\n this.selectedMap.set(detail.value, detail);\n } else {\n if (!this.required) this.selectedMap.clear();\n }\n this.open = false;\n }\n\n const optionElements = this.el.querySelectorAll(DropdownItemSelector);\n\n forEach(\n optionElements,\n (option) => setAttr(option, 'selected', this.selectedMap.has(option.getAttribute('value')))\n );\n\n this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));\n }\n\n private setSelected = (selectedMap: typeof this.selectedMap, optionNodes?: NodeListOf<Element>): DropdownItemData[] => {\n const values = Array.from(selectedMap.values());\n const options = optionNodes \|\| this.el.querySelectorAll(DropdownItemSelector);\n\n this.selected = this.multiple && values.length === options.length ?\n ['Alle ausgewählt'] : values.length > 2 ?\n [`${values.length} ausgewählt`] : values.map((v) => v.text);\n\n return values;\n };\n\n private handleOpen = () => {\n if (this.disabled \|\| this.open \|\| this.loading) return;\n this.open = true;\n };\n\n private handleClickOutside = (ev: MouseEvent) => {\n if (!this.open \|\| this.el.contains(ev.target as Node)) return;\n\n if (this.open) this.open = false;\n }\n\n private addListeners = () => {\n document.body.addEventListener('click', this.handleClickOutside);\n }\n\n private removeListeners = () => {\n document.body.removeEventListener('click', this.handleClickOutside);\n }\n\n private setDefaultValues = () => {\n if (!this.defaultValue) return;\n\n // Needs to wait next Javascript tik\n setTimeout(() => {\n const options = this.el.querySelectorAll(DropdownItemSelector);\n\n forEach(\n options,\n (option) => {\n const dropdownItemData: DropdownItemData = {\n value: option.getAttribute('value'),\n text: (option as any).innerText,\n selected: `${this.defaultValue}` === option.getAttribute('value'),\n };\n\n if (dropdownItemData.selected) {\n setAttr(option, 'selected', dropdownItemData.selected);\n this.selectedMap.set(dropdownItemData.value, dropdownItemData);\n }\n }\n );\n\n this.setSelected(this.selectedMap, options);\n });\n };\n\n render() {\n return (\n <Host\n class=\"xv-dropdown\"\n role=\"combobox\"\n size={this.size}\n open={this.open}\n error={this.error}\n disabled={this.disabled}\n tabindex={this.disabled ? -1 : false}>\n <label class=\"label\">\n <slot name=\"label\">{this.label}</slot>\n {this.info && <xv-tooltip-v2 class=\"label_info\" message={this.info}></xv-tooltip-v2>}\n </label>\n\n <div class=\"xv-dropdown-control control\" onClick={this.handleOpen}>\n {this.selected.length ? (\n <p class=\"control_value\">{this.selected.join(', ')}</p>\n ) : (\n <p class=\"control_placeholder\">{this.placeholder \|\| ''}</p>\n )}\n\n {this.renderIcon()}\n\n <svg class=\"control_arrow\" focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\" aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n </svg>\n </div>\n\n {this.open && <div class=\"options\">\n <slot key=\"xv-dropdown-options\" />\n </div>}\n\n {(this.helper \|\| this.error \|\| this.warning) && (\n <p class=\"helper\">{this.error \|\| this.warning \|\| this.helper}</p>\n )}\n </Host>\n );\n }\n\n componentWillLoad() {\n this.setDefaultValues();\n }\n\n componentDidLoad() {\n this.openChangeHandle();\n }\n\n disconnectedCallback() {\n this.removeListeners();\n }\n\n private renderIcon(): undefined \| HTMLElement {\n if (this.loading) {\n return <xv-loader-v2 class=\"control_icon error\" size={SIZE_VAR.XS} />\n }\n\n if (this.error) {\n return (\n <svg class=\"control_icon error\" 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 )\n }\n\n if (!this.error && !!this.warning) {\n return (\n <svg class=\"control_icon warning\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <path fill=\"currentColor\" d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\" />\n </svg>\n );\n }\n\n return undefined;\n }\n}\n"]}

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

@@ -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 CHANGED Viewed

@@ -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: '4a33985fd3a6b9213d592ebec1b5b8abbf1d27df', class: { 'upload-wrapper': true, [`uploader-${this.size}`]: true, disabled: !!this.disabled } }, this.label && h("label", { key: '127894a635ce497df0a3a4732f5fc5a28f4d635b', class: "label" }, this.label), this.description && h("p", { key: 'dc34a999207c109b45f6e793552ff93b144fde85', 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: 'f7d47bff9993ab16abb38d70a065c6778f141359', ref: el => (this.fileInput = el), type: "file", hidden: true, onChange: this.onFileSelect, multiple: this.multiple, accept: this.accept.join(',') }), h("ul", { key: '04f33d47b7f3389b29b880261eb7d032ffea37e4', 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: '21aae629c18e97fc42f478e78ed4b771975389ab', class: "error-container" }, h("p", { key: '2fefb6eae6b6a8d838f6aca2ff05c5981f1491a2', 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 CHANGED Viewed

	@@ -1 +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"]}
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, 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"]}