xv-webcomponents 1.22.2 → 1.22.4-qa.0

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

@@ -282,7 +282,7 @@ export class XvDropdown {
     /*  endregion Search methods */
     render() {
         const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
-        return (h(Host, { key: '2e0a4b087e8b1a66bf4bf3ddac2fb342fb988f1e', 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: '9317e138effdd7ec69133304fe50d11c406b8faf', class: "label" }, h("slot", { key: '896604f1fef1f4531793a865c2083eaa5b744aa0', name: "label" }, this.label), this.info && h("xv-tooltip-v2", { key: 'd862a834642e1c115a063601926711339c53168b', class: "label_info", message: this.info }))), h("div", { key: '2cf34c1d32737ac0b664757b1a53bea34a507c72', class: { "xv-dropdown-control control": true, readonly: !!this.readonly }, onClick: this.handleOpen }, (this.multiple && this.selectedMap.size > 0) && (h("xv-tag-v2", { key: '9dd7be50d9ce42e037822502720a949ac071d8e0', 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: '023c89db58f385e8a00cab6dce050048b2765b82', 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: '5994fb2f805d0f1c904558f0ded054cd30c14210', 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: 'a2872c7cb6fbeb25583d4ed809b79b11aa533c4e', 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: '8908992fae99c07e3e9d2e06b705c55a4d73fb0a', class: "options_search" }, h("xv-text-input-v2", { key: '21fb4c673a3e46c024379ec7252026c0cf199ff4', 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: '104c79569b898fd9f0a9826654de18d16bc68a16', class: "helper" }, message.text)));
+        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

@@ -14,6 +14,7 @@
   font-size: 1em;
   margin: 0;
   color: var(--text-secondary);
+  white-space: pre-line;
 }
 :host .upload-btn {
   padding: 0 1.14em;
@@ -33,6 +34,7 @@
   min-height: 90px;
   border: 1px dashed var(--border-strong-01);
   background-color: transparent;
+  color: var(--link-primary, #346800);
   padding: 1.14em;
   border-radius: 0.285em;
   transition: border-color 0.2s ease, background-color 0.2s ease;
@@ -100,15 +102,43 @@
   color: var(--text-secondary, #515151);
   white-space: pre-line;
 }
-:host .global-error {
+:host .message {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-03);
   text-align: left;
   margin: 0;
   padding: 0 var(--spacing-05);
   font-size: 0.858em;
   font-style: normal;
   font-weight: 400;
+  color: var(--text-helper, #646464);
+}
+:host .message.error {
   color: var(--text-error);
 }
+:host .message.warning {
+  color: var(--text-secondary, #515151);
+}
+:host .message .status-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+}
+:host .message .status-icon.error {
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  background-color: var(--support-error);
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+}
+:host .message .status-icon.warning {
+  color: var(--support-warning, #FF7F04);
+  font-size: 1.15em;
+}
 
 :host(.disabled) {
   pointer-events: none;
@@ -133,6 +163,14 @@
   border-color: var(--support-error);
 }
 
+:host(.warning) .uploadBtn {
+  outline: 1px solid var(--support-warning, #FF7F04);
+  border-radius: 0.285em;
+}
+:host(.warning) .drop-zone {
+  border-color: var(--support-warning, #FF7F04);
+}
+
 :host([size=xs]) {
   font-size: 10px;
 }

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

@@ -1,6 +1,7 @@
 import { h, Host, Fragment } from "@stencil/core";
 import { SIZE_VAR } from "../../types/enum";
 import { XvFileUploaderVariants } from "./_vars";
+import { resolveFieldMessage } from "../../utils/utils";
 export class XvFileUploader {
     constructor() {
         this.variant = XvFileUploaderVariants.BUTTON;
@@ -15,6 +16,8 @@ export class XvFileUploader {
         this.errors = [];
         this.dragActive = false;
         this.errorMessages = [];
+        // Kept apart from `error` so a consumer-supplied message survives the next pick.
+        this.internalError = null;
         this.onFileSelect = (event) => {
             const input = event.target;
             const selectedFiles = Array.from(input.files || []);
@@ -53,10 +56,10 @@ export class XvFileUploader {
         const uniqueFiles = [];
         for (const file of files) {
             let error = null;
-            if (!seenFileNames.has(file.name)) {
-                seenFileNames.add(file.name);
-                uniqueFiles.push(file);
-            }
+            if (seenFileNames.has(file.name))
+                continue;
+            seenFileNames.add(file.name);
+            uniqueFiles.push(file);
             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);
@@ -68,7 +71,7 @@ export class XvFileUploader {
             }
             errorMessages.push(error);
         }
-        this.error = uniqueFiles.length > this.maxFiles
+        this.internalError = uniqueFiles.length > this.maxFiles
             ? `Only ${this.maxFiles} file(s) allowed.`
             : null;
         this.errorMessages = errorMessages;
@@ -84,7 +87,15 @@ export class XvFileUploader {
         }
     }
     render() {
-        return (h(Host, { key: '3423ccf72c581a004e5ca59d9cbf6f673f7896c1', class: { 'upload-wrapper': true, [`uploader-${this.size}`]: true, disabled: !!this.disabled, error: !!this.error } }, this.label && h("label", { key: '93b7b8edc0ac8e980910dc83d7cabf2030f97b35', class: "label" }, this.label), this.description && h("p", { key: 'c6b030335b34ee97ada3127fc8641f7b009d6c55', 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: '04a082fae037f176533bee68ea0a8b24f8f36257', ref: el => (this.fileInput = el), type: "file", hidden: true, onChange: this.onFileSelect, multiple: this.multiple, accept: this.accept.join(',') }), this.error && h("p", { key: '6fb7b7c5517030caf1f22206a6612077b0c14e7e', class: "global-error" }, this.error), h("ul", { key: 'e3d5461797abbc1168117c6772238780a0a7e14a', class: "file-list" }, this.files.map((file, index) => {
+        const error = this.error || this.internalError;
+        const message = resolveFieldMessage({ error, warning: this.warning, helper: this.helper });
+        return (h(Host, { key: '04568eba6facb5a18a4b4bc9ae6de9ce0f3e3db7', class: {
+                'upload-wrapper': true,
+                [`uploader-${this.size}`]: true,
+                disabled: !!this.disabled,
+                error: !!error,
+                warning: !!this.warning && !error,
+            } }, this.label && h("label", { key: '5c5861bee814ecacdd43fd92dcb47240869f895b', class: "label" }, this.label), this.description && h("p", { key: 'd4a5de6bb093e02010ba98031dd5eda4c748ec9f', 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: '08df6268214165b3b40ae177de230eae800d1a23', ref: el => (this.fileInput = el), type: "file", hidden: true, onChange: this.onFileSelect, multiple: this.multiple, accept: this.accept.join(',') }), message && (h("p", { key: '8f777fdc47a98f8ff9be67fafb8b1da79eabad09', class: { message: true, [message.level]: true } }, message.level === 'error' && h("span", { key: '4c550a739de39651a8326569546162b08555ef63', class: "status-icon error", "aria-hidden": "true" }, "!"), message.level === 'warning' && h("span", { key: 'b8a8229a57c053f94b691d86404313677b1f26ca', class: "status-icon warning", "aria-hidden": "true" }, "\u26A0"), message.text)), h("ul", { key: '6d82ac56ab535618bc958068c06ff987bdab1022', 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)));
         }))));
@@ -416,6 +427,44 @@ export class XvFileUploader {
                 "reflect": true,
                 "attribute": "error"
             },
+            "warning": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "warning"
+            },
+            "helper": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper"
+            },
             "errors": {
                 "type": "unknown",
                 "mutable": true,
@@ -439,7 +488,8 @@ export class XvFileUploader {
     static get states() {
         return {
             "dragActive": {},
-            "errorMessages": {}
+            "errorMessages": {},
+            "internalError": {}
         };
     }
     static get events() {

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

@@ -34,7 +34,7 @@ export class Xvfooter {
     render() {
         const { categories, socials, logo, legalLinks, payments, partners, advantages } = this.data || {};
         const hasDataLength = ((categories === null || categories === void 0 ? void 0 : categories.length) || (partners === null || partners === void 0 ? void 0 : partners.length) || (payments === null || payments === void 0 ? void 0 : payments.length) || (socials === null || socials === void 0 ? void 0 : socials.length));
-        return (h("footer", { key: 'c3406d777693fe2311102e6fcb9852383fc9ac6a', class: "xv-footer" }, (advantages === null || advantages === void 0 ? void 0 : advantages.length) > 0 && (h("div", { key: 'f5636ec1f9f660f5735d27a79924bd9c40adf75f', class: "xv-footer-advantages" }, h("div", { key: '42656264cb7590f5e61ce1bbe38aa37a63f04ee9', class: "xv-container" }, this._renderFooterList(advantages, { itemWithLabel: true })))), hasDataLength && (h("div", { key: 'e142aa994a80d0fe5be4e00a8f0c4039da1791d6', class: "xv-container" }, h("div", { key: 'b7d5ab5f3613736775b3ef83cc2cc676449663ba', class: "xv-footer__grid xv-footer-y-spacing" }, h("div", { key: 'c997c4022a8d2bea3547230f5ba9ed7a37635d46', class: "xv-footer__col-main" }, h("ul", { key: 'c1be504d2ce2a411dab6f1681564524f8b2446b3', class: "xv-footer-categories" }, categories === null || categories === void 0 ? void 0 : categories.map((category) => (h("li", null, h("p", { class: "xv-label-02" }, category.label), h("ul", { class: "xv-footer-routes" }, category.routes.map((item) => (h("li", null, h("a", { class: "xv-body-compact-02", href: item.href, target: item.target }, item.label)))))))))), h("div", { key: 'f82ccaf18e1fe63b47f109bf20845af9ea0d4add', class: "xv-footer__col-sidebar" }, this._renderFooterList(partners, { label: 'crossvertise Partner' }), this._renderFooterList(payments, { label: 'Bequem und sicher bezahlen' }), this._renderFooterList(socials, { label: 'Folgen Sie uns', isRow: true }))))), (legalLinks === null || legalLinks === void 0 ? void 0 : legalLinks.length) > 0 && (h("div", { key: 'e1d12515175bffaa970ac5bfe41ad0cf27d5097e', class: "xv-footer-legal" }, h("div", { key: '969c103e50bdfeb52f9139c3dd53189d80d9a22d', class: "xv-container" }, h("div", { key: '5b3e4f18da410ea82fc62074f22daa8e226d6d4b', class: "xv-footer-legal-row" }, logo && (h("a", { key: '8e7bf3fd82686faa5a2e83131a542730eba7389f', class: "xv-footer-logo", href: logo.href, target: logo.target }, logo.label && h("span", { key: 'b211963ee69c7a6151cdae1a2476223f8ef73e34', class: "xv-label-02" }, logo.label), h("img", { key: '243eed6378143f9328a174f515c2c6276a90a09a', loading: "lazy", src: logo.image, alt: logo.label }))), h("ul", { key: '88538ee0047edf6df20a4e27d4d9bf348724bc56' }, legalLinks.map((item) => {
+        return (h("footer", { key: '726a05b831d337bdef052ca16b478a85ef5dfd9b', class: "xv-footer" }, (advantages === null || advantages === void 0 ? void 0 : advantages.length) > 0 && (h("div", { key: '22a41f8bd514f4b61bc62df31ddcabc5de7b7bc6', class: "xv-footer-advantages" }, h("div", { key: '5e4035e086ad3bd7987ff802736096c4364f8530', class: "xv-container" }, this._renderFooterList(advantages, { itemWithLabel: true })))), hasDataLength && (h("div", { key: '003822874e51506b991f76e92c4f5d8c96073f99', class: "xv-container" }, h("div", { key: '4e09e7f929eff1a781d6d64120915ca4d30f5d86', class: "xv-footer__grid xv-footer-y-spacing" }, h("div", { key: 'ebd4fd1e5e72fd08f9c49c10bf0e760fb644864f', class: "xv-footer__col-main" }, h("ul", { key: 'bdfa7fc3986ea83b3b3514ae61e0c463f1070f3c', class: "xv-footer-categories" }, categories === null || categories === void 0 ? void 0 : categories.map((category) => (h("li", null, h("p", { class: "xv-label-02" }, category.label), h("ul", { class: "xv-footer-routes" }, category.routes.map((item) => (h("li", null, h("a", { class: "xv-body-compact-02", href: item.href, target: item.target }, item.label)))))))))), h("div", { key: 'f912a89f9b8132ae932a12ab3ff844e4781ecd48', class: "xv-footer__col-sidebar" }, this._renderFooterList(partners, { label: 'crossvertise Partner' }), this._renderFooterList(payments, { label: 'Bequem und sicher bezahlen' }), this._renderFooterList(socials, { label: 'Folgen Sie uns', isRow: true }))))), (legalLinks === null || legalLinks === void 0 ? void 0 : legalLinks.length) > 0 && (h("div", { key: '0ab1803fd376c5f10be8b0e664d81dd8158577de', class: "xv-footer-legal" }, h("div", { key: 'b755d56da4c5ce178a1b3b0e1883e3444144b54b', class: "xv-container" }, h("div", { key: '356cc0b19cccf1e69b5531ff580a6c63274c0783', class: "xv-footer-legal-row" }, logo && (h("a", { key: '325a93b944d086c42565bdf6b973301f25fbd778', class: "xv-footer-logo", href: logo.href, target: logo.target }, logo.label && h("span", { key: '6292ac8dc8630818902d96da3b275e1e3f763281', class: "xv-label-02" }, logo.label), h("img", { key: '847e90de5ebb14fdf255c7c37ad1f90c99424f02', loading: "lazy", src: logo.image, alt: logo.label }))), h("ul", { key: 'd692fb126d2e382fe142fd3b033f794fc38f66fd' }, legalLinks.map((item) => {
             if (item.label === 'Cookie Einstellungen') {
                 return h("li", null, h("a", { class: "xv-helper-text-02", onClick: this.openCookieSettings }, item.label));
             }