xv-webcomponents 1.20.2 → 1.22.1-qa.0

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

@@ -2,6 +2,7 @@ import { Host, h, Fragment, } from "@stencil/core";
 import dateFns from "date-fns";
 import { de } from "date-fns/locale";
 import { SIZE_VAR } from "../../types/enum";
+import { resolveFieldMessage } from "../../utils/utils";
 import { createPopper } from "@popperjs/core";
 const WEEK = Array
     .from({ length: 7 })
@@ -30,7 +31,8 @@ export class XvDatepicker {
                 return;
             }
             if ((this.minDate && dateFns.isBefore(newDate, this.minDate)) ||
-                (this.maxDate && dateFns.isAfter(newDate, this.maxDate))) {
+                (this.maxDate && dateFns.isAfter(newDate, this.maxDate)) ||
+                this.disabledSet.has(val)) {
                 return;
             }
             if (this.variant === 'single') {
@@ -55,7 +57,8 @@ export class XvDatepicker {
             const val = new Date(input.value);
             if (!dateFns.isValid(val) ||
                 (this.minDate && dateFns.isBefore(val, this.minDate)) ||
-                (this.maxDate && dateFns.isAfter(val, this.maxDate))) {
+                (this.maxDate && dateFns.isAfter(val, this.maxDate)) ||
+                this.disabledSet.has(input.value)) {
                 this.value[range === 'start' ? 0 : 1] = undefined;
                 input.value = '';
                 this.localError = 'Das angegebene Datum ist nicht verfügbar.';
@@ -130,6 +133,30 @@ export class XvDatepicker {
             return iso;
         return dateFns.parse(this.max, 'yyyy-MM-dd', new Date());
     }
+    get disabledSet() {
+        var _a;
+        const keys = ((_a = this.disabledDates) !== null && _a !== void 0 ? _a : []).map(d => this.toDayKey(d)).filter(Boolean);
+        return new Set(keys);
+    }
+    /** Normalise a disabled-date entry to a local 'yyyy-MM-dd' key. */
+    toDayKey(value) {
+        if (value instanceof Date) {
+            return dateFns.isValid(value) ? dateFns.format(value, DEF_FORMAT) : '';
+        }
+        // Bare 'yyyy-MM-dd' is already a key — use verbatim to avoid a TZ shift
+        // from re-parsing it into a Date.
+        if (/^\d{4}-\d{2}-\d{2}$/.test(value))
+            return value;
+        const parsed = dateFns.parseISO(value);
+        return dateFns.isValid(parsed) ? dateFns.format(parsed, DEF_FORMAT) : '';
+    }
+    isDayDisabled(date, disabled = this.disabledSet) {
+        if (this.minDate && dateFns.isBefore(date, this.minDate))
+            return true;
+        if (this.maxDate && dateFns.isAfter(date, this.maxDate))
+            return true;
+        return disabled.has(dateFns.format(date, DEF_FORMAT));
+    }
     get isPrevDisabled() {
         if (!this.minDate)
             return false;
@@ -163,13 +190,14 @@ export class XvDatepicker {
     getCalendarGrid() {
         const start = dateFns.startOfWeek(dateFns.startOfMonth(this.month), { weekStartsOn: 1 });
         const end = dateFns.endOfWeek(dateFns.endOfMonth(this.month), { weekStartsOn: 1 });
+        const disabled = this.disabledSet;
         this.days = dateFns.eachDayOfInterval({ start, end }).map(date => ({
             date,
             week: dateFns.getWeek(date, { weekStartsOn: 1 }),
             day: date.getDate(),
             isCurrentMonth: dateFns.isSameMonth(date, this.month),
             isToday: dateFns.isToday(date),
-            disabled: (this.minDate && dateFns.isBefore(date, this.minDate)) || (this.maxDate && dateFns.isAfter(date, this.maxDate))
+            disabled: this.isDayDisabled(date, disabled)
         }));
         return this.days;
     }
@@ -228,12 +256,17 @@ export class XvDatepicker {
     }
     render() {
         const [start, end] = this.value;
-        return (h(Host, { key: '0aafb4638713263a78600eae3f9765384116536b', class: { disabled: !!this.disabled }, tabindex: this.disabled ? '-1' : undefined }, h("div", { key: '648d2c679e70a7a89ba9970c307d8242d58766c9', "aria-controls": "popover", class: "control" }, this.label && h("label", { key: 'ce60e99ae454e29d70daa95b2b02cc448b5e560e', class: "control_label" }, this.label), h("div", { key: '5ce3af8b823cba5e29c0c87a285da1349a69bc9c', class: {
+        const message = resolveFieldMessage({
+            error: (typeof this.error === 'string' && this.error) || this.localError,
+            warning: this.warning,
+            helper: this.helper,
+        });
+        return (h(Host, { key: 'd3824a5d7c420cf3956bac19dce90ad6a2bf7fa2', class: { disabled: !!this.disabled }, tabindex: this.disabled ? '-1' : undefined }, h("div", { key: 'd93850164d288cb74c8120596196088e44c33a23', "aria-controls": "popover", class: "control" }, this.label && h("label", { key: 'e136f0ef2de64fa2e95b77caeb3675cee7626575', class: "control_label" }, this.label), h("div", { key: '102e8ce2e9dc0d9e74ba9a771b513977acbeb0ba', class: {
                 'control_field': true,
                 loading: this.loading,
                 error: !!this.error || !!this.localError,
                 warning: this.warning !== undefined,
-            }, onClick: this.handleOpen, ref: (el) => (this.controlEl = el) }, h("input", { key: '5d3cd24b98479a230f8add829b61c52a4a9a1f5d', lang: "de", type: "date", name: "start", disabled: this.loading || this.disabled, readonly: this.readonly || this.variant === 'range', min: this.min, max: this.max, value: start ? dateFns.format(start, DEF_FORMAT) : '', onChange: (e) => this.handleChange(e, 'start'), onBlur: (e) => this.handleBlur(e, 'start'), onKeyDown: (e) => this.handleKeydown(e, 'start') }), this.variant === 'range' && (h("input", { key: '308729dc895e0be29b86e89193a6ddb414c0ec4d', lang: "de", type: "date", name: "end", disabled: this.loading || this.disabled, readonly: this.readonly || this.variant === 'range', min: this.min, max: this.max, value: end ? dateFns.format(end, DEF_FORMAT) : '', onChange: (e) => this.handleChange(e, 'end'), onBlur: (e) => this.handleBlur(e, 'end'), onKeyDown: (e) => this.handleKeydown(e, 'end') }))), (this.helper || this.error || this.warning || this.localError) && (h("div", { key: '95f2973e5fdcb8720b274cddae28b64cc099da39' }, this.helper && h("p", { key: '9fbc0d4de5f35932b414bbc3a2b0ef23d5183652', class: "control_message helper" }, this.helper), (this.error || this.warning || this.localError) && (h("p", { key: 'e8abe7fd7c5772d10d012ced52f457aa7db168ce', class: { control_message: true, error: !!this.error || !!this.localError } }, this.error || this.localError || this.warning))))), h("div", { key: 'd4396486599a6ed66dd63eb3d9f46dc8430a6749', role: "dialog", class: { popover: true, open: this.open }, ref: (el) => (this.popoverEl = el) }, h("div", { key: 'aa227b586801a453468ea52d099eb8b269b1ab64', class: "header" }, h("xv-button-v2", { key: '1c440d5cf1924575b93bc859e9710892c8f3b3ca', tabindex: this.open ? undefined : '-1', disabled: this.isPrevDisabled, variant: "ghost", onClick: this.prevMonth }, h("span", { key: '1bfd67bbd807287fb5d84ee66e70fe449a4a3e5f', slot: "icon-left", class: "header_icon prev" })), h("p", { key: '615c56c593d8129bb8bec31cbe4d247311178cee', class: "header_date" }, dateFns.format(this.month, 'LLLL', { locale: de }), h("input", { key: '3821fb5922add935193bcb2dd78182935489f820', tabindex: this.open ? undefined : '-1', type: "number", value: this.month.getFullYear(), onInput: this.handleYearChange, onBlur: this.handleYearBlur })), h("xv-button-v2", { key: '7fda8d66daf94a359ac93bfde25e950160e99369', tabindex: this.open ? undefined : '-1', disabled: this.isNextDisabled, variant: "ghost", onClick: this.nextMonth }, h("span", { key: '89caa272c23b28a20df17c57561393447460e937', slot: "icon-left", class: "header_icon next" }))), h("div", { key: '4b1ed14eadc14cd9dd08527beba67506449cc3bd', class: "week" }, h("p", { key: 'd9d8d23fb60f508bf281a8d6582bfffa0b0be404', class: "week_day" }), WEEK.map((day) => h("p", { class: "week_day" }, day, "."))), h("div", { key: '0a09c7958ee87729cb0b46618c4691ebfa31ad04', class: "week" }, this.days.map((day, idx) => (h(Fragment, null, idx % 7 === 0 && (h("button", { tabindex: this.open ? undefined : '-1', disabled: true, class: "week_day disabled" }, day.week)), h("button", { tabindex: this.open ? undefined : '-1', onClick: () => this.handleSetDate(day), disabled: day.disabled, class: {
+            }, onClick: this.handleOpen, ref: (el) => (this.controlEl = el) }, h("input", { key: '815eb8a1b9aef9a4ffae56ce120175e4e727e2c0', lang: "de", type: "date", name: "start", disabled: this.loading || this.disabled, readonly: this.readonly || this.variant === 'range', min: this.min, max: this.max, value: start ? dateFns.format(start, DEF_FORMAT) : '', onChange: (e) => this.handleChange(e, 'start'), onBlur: (e) => this.handleBlur(e, 'start'), onKeyDown: (e) => this.handleKeydown(e, 'start') }), this.variant === 'range' && (h("input", { key: '4ae5693501d921d8431da8d261de777f159eb778', lang: "de", type: "date", name: "end", disabled: this.loading || this.disabled, readonly: this.readonly || this.variant === 'range', min: this.min, max: this.max, value: end ? dateFns.format(end, DEF_FORMAT) : '', onChange: (e) => this.handleChange(e, 'end'), onBlur: (e) => this.handleBlur(e, 'end'), onKeyDown: (e) => this.handleKeydown(e, 'end') }))), message && (h("p", { key: 'a3facc864173f9a8d74ef8542fff82ea935f5593', class: { control_message: true, [message.level]: true } }, message.text))), h("div", { key: '649f74e157bcd2e834d03c7a2d52968fbe3087c1', role: "dialog", class: { popover: true, open: this.open }, ref: (el) => (this.popoverEl = el) }, h("div", { key: '2cfbafcfaa23d86e610d488315ac6b1aa34dbf54', class: "header" }, h("xv-button-v2", { key: '3694744a0a8790fc80f65ae2a3a33d7f5a0a4d15', tabindex: this.open ? undefined : '-1', disabled: this.isPrevDisabled, variant: "ghost", onClick: this.prevMonth }, h("span", { key: '96aec7fad4fafc6ed43bea53b5000a1100815bf7', slot: "icon-left", class: "header_icon prev" })), h("p", { key: 'a52cafec3ee1d519d3acd39b65c59209b05a17f3', class: "header_date" }, dateFns.format(this.month, 'LLLL', { locale: de }), h("input", { key: 'f523d1ab179245a725a5bfe2ec97f3bce50533de', tabindex: this.open ? undefined : '-1', type: "number", value: this.month.getFullYear(), onInput: this.handleYearChange, onBlur: this.handleYearBlur })), h("xv-button-v2", { key: '16a1f92a5a461a4c812225a586ea705e858aeac7', tabindex: this.open ? undefined : '-1', disabled: this.isNextDisabled, variant: "ghost", onClick: this.nextMonth }, h("span", { key: '5b38b9fef3ab9914f879f8525dcd5b46f46058b4', slot: "icon-left", class: "header_icon next" }))), h("div", { key: '223691312e59a749bd1f8a982b7270fb529b6b32', class: "week" }, h("p", { key: '898552659a61a0cf789541cf694f7589eacdf457', class: "week_day" }), WEEK.map((day) => h("p", { class: "week_day" }, day, "."))), h("div", { key: '7c91b9a24f7d37f64f159f290a43cbfff4c9be1a', class: "week" }, this.days.map((day, idx) => (h(Fragment, null, idx % 7 === 0 && (h("button", { tabindex: this.open ? undefined : '-1', disabled: true, class: "week_day disabled" }, day.week)), h("button", { tabindex: this.open ? undefined : '-1', onClick: () => this.handleSetDate(day), disabled: day.disabled, class: {
                 'week_day': true,
                 inRange: this.variant === 'range' && dateFns.isWithinInterval(day.date, { start, end }),
                 isToday: day.isToday,
@@ -515,6 +548,28 @@ export class XvDatepicker {
                 "setter": false,
                 "reflect": false,
                 "attribute": "max"
+            },
+            "disabledDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(Date | string)[]",
+                    "resolved": "(string | Date)[]",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Individual dates to disable within the min/max range. Each entry may be a\n`Date`, a bare 'yyyy-MM-dd' string, or a full ISO string \u2014 all normalised\nto a local 'yyyy-MM-dd' key that matches the calendar grid.\nComposes with min/max: a day is selectable only when it is inside the range\nAND not listed here (e.g. to allow only certain weekdays / block holidays)."
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }
@@ -577,6 +632,15 @@ export class XvDatepicker {
             }, {
                 "propName": "month",
                 "methodName": "getCalendarGrid"
+            }, {
+                "propName": "min",
+                "methodName": "getCalendarGrid"
+            }, {
+                "propName": "max",
+                "methodName": "getCalendarGrid"
+            }, {
+                "propName": "disabledDates",
+                "methodName": "getCalendarGrid"
             }, {
                 "propName": "value",
                 "methodName": "handleValueChange"

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

@@ -1,130 +1,3 @@
-.xv-container {
-  width: 100%;
-  max-width: 1170px;
-  margin-inline: auto;
-}
-@media (min-width: 576px) {
-  .xv-container {
-    max-width: 540px;
-  }
-}
-@media (min-width: 768px) {
-  .xv-container {
-    max-width: 720px;
-  }
-}
-@media (min-width: 992px) {
-  .xv-container {
-    max-width: 960px;
-    padding-inline: var(--bs-gutter-x, 0.75rem);
-  }
-}
-@media (min-width: 1200px) {
-  .xv-container {
-    max-width: 1140px;
-  }
-}
-@media (min-width: 1400px) {
-  .xv-container {
-    max-width: 1320px;
-  }
-}
-
-.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

@@ -24,7 +24,7 @@ export class XvDropdownItem {
         });
     }
     render() {
-        return (h(Host, { key: 'ebd69bf9875a413d092065c6c3a0f2ffe2de7da4', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, this.multiple && (h("xv-checkbox-v2", { key: 'fe72e087d4bc21ac9979ca9c5e69df61bd84e8fe', class: "multiple-check", size: this.size, checked: this.selected, disabled: this.disabled })), h("slot", { key: 'aa88674788627153e8044a0d38270b6dc1d4c011' }), (!this.multiple && this.selected) && h("span", { key: 'e8f64a88b588c3b16a449acf67dbcaea9ec5b0d0', class: "checkmark far fa-check" })));
+        return (h(Host, { key: 'f099e23dd392e97ec646b24d88758ba47568fe15', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, this.multiple && (h("xv-checkbox-v2", { key: '27641c4a60485d70a61b72c8dad725c2c7f9390f', class: "multiple-check", size: this.size, checked: this.selected, disabled: this.disabled })), h("slot", { key: 'eefbe58b06a4c2995e2561e78436f724fee77021' }), (!this.multiple && this.selected) && h("span", { key: '57b640d72e80899786d9d14659cc79a003907ba5', class: "checkmark far fa-check" })));
     }
     componentWillLoad() {
         if (!this.value)

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

@@ -1,130 +1,3 @@
-.xv-container {
-  width: 100%;
-  max-width: 1170px;
-  margin-inline: auto;
-}
-@media (min-width: 576px) {
-  .xv-container {
-    max-width: 540px;
-  }
-}
-@media (min-width: 768px) {
-  .xv-container {
-    max-width: 720px;
-  }
-}
-@media (min-width: 992px) {
-  .xv-container {
-    max-width: 960px;
-    padding-inline: var(--bs-gutter-x, 0.75rem);
-  }
-}
-@media (min-width: 1200px) {
-  .xv-container {
-    max-width: 1140px;
-  }
-}
-@media (min-width: 1400px) {
-  .xv-container {
-    max-width: 1320px;
-  }
-}
-
-.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-height: 40px;
   --dropdown-padding-x: 16px;
@@ -211,8 +84,9 @@
   color: var(--text-primary, #333);
 }
 :host .control_icon {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
 }
 :host .control_icon.error {
   color: var(--support-error, #F1290E);

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { SIZE_VAR } from "../../types/enum";
 import { DropdownItemSelector } from "./_vars";
-import { forEach, setAttr } from "../../utils/utils";
+import { forEach, setAttr, resolveFieldMessage } from "../../utils/utils";
 let dropdownUid = 0;
 export class XvDropdown {
     constructor() {
@@ -30,9 +30,9 @@ export class XvDropdown {
             return values;
         };
         this.handleOpen = () => {
-            if (this.disabled || this.open || this.loading || this.readonly)
+            if (this.disabled || this.loading || this.readonly)
                 return;
-            this.open = true;
+            this.open = !this.open;
         };
         this.handleClickOutside = (ev) => {
             if (!this.open || this.el.contains(ev.target))
@@ -281,7 +281,8 @@ export class XvDropdown {
     }
     /*  endregion Search methods */
     render() {
-        return (h(Host, { key: 'f3db547d2489dc0df41c384ff6c5f6920dba77b8', class: { 'xv-dropdown': true, [this.variant]: !!this.variant }, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": this.open ? this.listboxId : null, size: this.size, open: this.open, error: !!this.error, disabled: this.disabled, tabindex: (this.disabled || this.readonly) ? -1 : 0 }, (this.label || this.info) && (h("label", { key: '92280cbde45dc37612083ccd7b57cf411f6cfa59', class: "label" }, h("slot", { key: '980a33a7b46542a7861ef936c316f599f4e4706b', name: "label" }, this.label), this.info && h("xv-tooltip-v2", { key: 'fe62f15b930d246597ede27da290476c6fd88769', class: "label_info", message: this.info }))), h("div", { key: 'd680025a2f348d541fcb5851f4373e4ba531123d', class: { "xv-dropdown-control control": true, readonly: !!this.readonly }, onClick: this.handleOpen }, (this.multiple && this.selectedMap.size > 0) && (h("xv-tag-v2", { key: '1b194b8b7797e36edb433ffc1caac4ca74883491', class: "control_count", onCloseClick: this.clearHandle, closeable: !this.required, bg: "var(--background-inverse)", color: "var(--icon-inverse)" }, this.selectedMap.size)), this.selected.length ? (h("p", { class: "control_value" }, this.selected.join(', '))) : (h("p", { class: "control_placeholder" }, this.placeholder || '')), this._renderIcon(), h("svg", { key: 'b8cca74c658cafd416fb034bc7e7d905ab18bb11', 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 448 512" }, h("path", { key: '6f7b9ecd9c5c30ea089a00ced738a2eacab84fd2', d: "M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z" }))), this.open && h("div", { key: '9388b1b76b8c94f063bec3db8e59426830b1d9e8', ref: (el) => (this.optionsEl = el), id: this.listboxId, role: "listbox", "aria-multiselectable": this.multiple ? 'true' : null, class: { options: true, right: this._appliedPosition() === 'right', search: !!this.search } }, this.search && (h("div", { key: 'd5674d487690460b290ae7bb9fab76674486cea9', class: "options_search" }, h("xv-text-input-v2", { key: 'd55502d54267d46904e84b4e2f2835c5cfded135', type: "search", ref: (el) => (this.searchInputEl = el), block: true, autocomplete: "off", size: this.size, value: this.searchQuery, placeholder: this.searchPlaceholder, onValueChange: this.handleSearchInput }))), h("slot", { key: "xv-dropdown-options" })), (this.helper || typeof this.error === 'string' || this.warning) && (h("p", { key: '583e977ce735986f372e5316247d0cb7cd46064d', class: "helper" }, this.error || this.warning || this.helper))));
+        const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
+        return (h(Host, { key: '01b71caf620b27aa3cf098ab9449196c1b7b56ea', class: { 'xv-dropdown': true, [this.variant]: !!this.variant }, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": this.open ? this.listboxId : null, size: this.size, open: this.open, error: !!this.error, disabled: this.disabled, tabindex: (this.disabled || this.readonly) ? -1 : 0 }, (this.label || this.info) && (h("label", { key: 'd99f47f2abbbe370efde3a702b5d1c61b11aa4ca', class: "label" }, h("slot", { key: '2ca43ab5d65eb331d6ffd2ca10c251bcd6f6c3d0', name: "label" }, this.label), this.info && h("xv-tooltip-v2", { key: '7d55fa244097898202318adc3b03b898cb4b3f11', class: "label_info", message: this.info }))), h("div", { key: 'c854210410d358b440559702c4efab8b9ac894b8', class: { "xv-dropdown-control control": true, readonly: !!this.readonly }, onClick: this.handleOpen }, (this.multiple && this.selectedMap.size > 0) && (h("xv-tag-v2", { key: '4d46c14e2aab62651692a98b6c3d321d7073849c', class: "control_count", onClick: (e) => e.stopPropagation(), onCloseClick: this.clearHandle, closeable: !this.required, bg: "var(--background-inverse)", color: "var(--icon-inverse)" }, this.selectedMap.size)), this.selected.length ? (h("p", { class: "control_value" }, this.selected.join(', '))) : (h("p", { class: "control_placeholder" }, this.placeholder || '')), this._renderIcon(), h("svg", { key: 'e3bf3f8eb0b3e71038423e8eb2e14d78dc4ca33a', 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 448 512" }, h("path", { key: '48f1408c0ebaa4c3b0c947dd4d9fdb2ab21a11c9', d: "M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z" }))), this.open && h("div", { key: '8915c7c514f6847a0d479c3ad1d39e00dbef46c2', ref: (el) => (this.optionsEl = el), id: this.listboxId, role: "listbox", "aria-multiselectable": this.multiple ? 'true' : null, class: { options: true, right: this._appliedPosition() === 'right', search: !!this.search } }, this.search && (h("div", { key: '2f59d1e41e8cf05038174123bad5b55038be5d75', class: "options_search" }, h("xv-text-input-v2", { key: '8670ba300bb2410d9ba708f4d07ba8f8def0c6c9', type: "search", ref: (el) => (this.searchInputEl = el), block: true, autocomplete: "off", size: this.size, value: this.searchQuery, placeholder: this.searchPlaceholder, onValueChange: this.handleSearchInput }))), h("slot", { key: "xv-dropdown-options" })), message && h("p", { key: 'cade20ffd199293bcdb1ee7fa5c6d20e7294929e', class: "helper" }, message.text)));
     }
     componentDidLoad() {
         this.syncOpenState();

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

@@ -1,130 +1,3 @@
-.xv-container {
-  width: 100%;
-  max-width: 1170px;
-  margin-inline: auto;
-}
-@media (min-width: 576px) {
-  .xv-container {
-    max-width: 540px;
-  }
-}
-@media (min-width: 768px) {
-  .xv-container {
-    max-width: 720px;
-  }
-}
-@media (min-width: 992px) {
-  .xv-container {
-    max-width: 960px;
-    padding-inline: var(--bs-gutter-x, 0.75rem);
-  }
-}
-@media (min-width: 1200px) {
-  .xv-container {
-    max-width: 1140px;
-  }
-}
-@media (min-width: 1400px) {
-  .xv-container {
-    max-width: 1320px;
-  }
-}
-
-.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;

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

@@ -84,7 +84,7 @@ export class XvFileUploader {
         }
     }
     render() {
-        return (h(Host, { key: '6292271bd4914ff55c44d08738f27b9b0b7d600d', class: { 'upload-wrapper': true, [`uploader-${this.size}`]: true, disabled: !!this.disabled, error: !!this.error } }, this.label && h("label", { key: '2b0009b61d76a027b462a0d7dd1ce9a205f16cdb', class: "label" }, this.label), this.description && h("p", { key: '8bc79a289823a8baf4dfaa427a30ddcfcfe096e6', class: "description" }, this.description), this.variant === 'button' ? (h("xv-button-v2", { class: "uploadBtn", 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.')), h("input", { key: '88384c7673c185b0e2ece0a6c3680868ca43535f', ref: el => (this.fileInput = el), type: "file", hidden: true, onChange: this.onFileSelect, multiple: this.multiple, accept: this.accept.join(',') }), this.error && h("p", { key: '125cf535821332a446a244643a9d62002ddc45f0', class: "global-error" }, this.error), h("ul", { key: 'f05b167c928d00863a4bc1e29686bd243254723e', class: "file-list" }, this.files.map((file, index) => {
+        return (h(Host, { key: 'b18153e870fd78c9ee386af30a4b0163e9345408', class: { 'upload-wrapper': true, [`uploader-${this.size}`]: true, disabled: !!this.disabled, error: !!this.error } }, this.label && h("label", { key: 'baaaee91572847ae722b2c6d2e28fccf72571a3a', class: "label" }, this.label), this.description && h("p", { key: '4ac3753917d2d174988a2cf75d9c5f456d4079cd', class: "description" }, this.description), this.variant === 'button' ? (h("xv-button-v2", { class: "uploadBtn", 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.')), h("input", { key: '6cecaf189c5ab89323302a8a47375645617af1d7', ref: el => (this.fileInput = el), type: "file", hidden: true, onChange: this.onFileSelect, multiple: this.multiple, accept: this.accept.join(',') }), this.error && h("p", { key: '6fb87dc13c0f659c6d52e93cdaaaea1737f8fcc6', class: "global-error" }, this.error), h("ul", { key: '1dc56f103b4ab0dc016b46ab499e895e62ada3ed', 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)));
         }))));