xv-webcomponents 1.19.2 → 1.20.1-staging.0
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.
- package/dist/cjs/{_vars-A07oKwJ_.js → _vars-DMytunQw.js} +9 -6
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{xv-accordion-v2_47.cjs.entry.js → xv-accordion-v2_48.cjs.entry.js} +448 -90
- package/dist/cjs/xv-header-next.cjs.entry.js +2 -2
- package/dist/cjs/xv-mega-menu-next.cjs.entry.js +2 -2
- package/dist/cjs/xv-webcomponents.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/xv-button/xv-button-v2.css +8 -8
- package/dist/collection/components/xv-button/xv-button.js +25 -2
- package/dist/collection/components/xv-button-group/xv-button-group.css +173 -0
- package/dist/collection/components/xv-button-group/xv-button-group.js +206 -0
- package/dist/collection/components/xv-card/xv-card.js +1 -1
- package/dist/collection/components/xv-checkbox/xv-checkbox.js +2 -2
- package/dist/collection/components/xv-content-switcher/xv-content-switcher-item/xv-content-switcher-item.js +1 -1
- package/dist/collection/components/xv-content-switcher/xv-content-switcher.js +2 -2
- package/dist/collection/components/xv-data-table/xv-data-table-cell/xv-data-table-cell.js +1 -1
- package/dist/collection/components/xv-data-table/xv-data-table-collapse/xv-data-table-collapse.js +1 -1
- package/dist/collection/components/xv-data-table/xv-data-table-row/xv-data-table-row.js +2 -2
- package/dist/collection/components/xv-data-table/xv-data-table.js +1 -1
- package/dist/collection/components/xv-datepicker/xv-datepicker.js +2 -2
- package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js +1 -1
- package/dist/collection/components/xv-dropdown/xv-dropdown.js +1 -1
- package/dist/collection/components/xv-file-uploader/xv-file-uploader.js +1 -1
- package/dist/collection/components/xv-footer/xv-footer.js +1 -1
- package/dist/collection/components/xv-header/xv-header.css +4 -71
- package/dist/collection/components/xv-header/xv-header.js +10 -4
- package/dist/collection/components/xv-header-next/xv-header-next.js +1 -1
- package/dist/collection/components/xv-image-viewer/xv-image-viewer.js +1 -1
- package/dist/collection/components/xv-link/xv-link.js +1 -1
- package/dist/collection/components/xv-mega-menu/xv-mega-menu.js +2 -2
- package/dist/collection/components/xv-mega-menu-next/xv-mega-menu-next.js +2 -2
- package/dist/collection/components/xv-modal/xv-modal.js +1 -1
- package/dist/collection/components/xv-notification/xv-notification.js +1 -1
- package/dist/collection/components/xv-number-input/xv-number-input.js +2 -2
- package/dist/collection/components/xv-overflow-menu/_vars.js +7 -6
- package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.css +48 -8
- package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js +84 -2
- package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.css +28 -2
- package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.js +373 -22
- package/dist/collection/components/xv-pagination/xv-pagination.js +1 -1
- package/dist/collection/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.js +1 -1
- package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js +1 -1
- package/dist/collection/components/xv-radio/xv-radio.js +2 -2
- package/dist/collection/components/xv-slider/xv-slider.js +1 -1
- package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.js +1 -1
- package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.js +1 -1
- package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js +1 -1
- package/dist/collection/components/xv-table/xv-table.js +1 -1
- package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js +1 -1
- package/dist/collection/components/xv-tag/xv-tag.js +1 -1
- package/dist/collection/components/xv-tag-combobox/xv-tag-combobox.css +7 -0
- package/dist/collection/components/xv-tag-combobox/xv-tag-combobox.js +37 -9
- package/dist/collection/components/xv-text-input/xv-text-input.js +2 -2
- package/dist/collection/components/xv-textarea/xv-textarea.js +2 -2
- package/dist/collection/components/xv-tile/xv-tile.js +2 -2
- package/dist/collection/components/xv-toggle/xv-toggle.js +1 -1
- package/dist/collection/components/xv-toggle-tip/xv-toggle-tip.js +1 -1
- package/dist/collection/components/xv-tooltip/xv-tooltip.js +2 -2
- package/dist/esm/{_vars-C6jsOjam.js → _vars-CDEU4jkD.js} +7 -7
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{xv-accordion-v2_47.entry.js → xv-accordion-v2_48.entry.js} +448 -91
- package/dist/esm/xv-header-next.entry.js +2 -2
- package/dist/esm/xv-mega-menu-next.entry.js +2 -2
- package/dist/esm/xv-webcomponents.js +1 -1
- package/dist/types/components/xv-button/xv-button.d.ts +2 -0
- package/dist/types/components/xv-button-group/xv-button-group.d.ts +54 -0
- package/dist/types/components/xv-overflow-menu/_vars.d.ts +14 -5
- package/dist/types/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.d.ts +10 -0
- package/dist/types/components/xv-overflow-menu/xv-overflow-menu.d.ts +43 -3
- package/dist/types/components/xv-tag-combobox/xv-tag-combobox.d.ts +1 -0
- package/dist/types/components.d.ts +177 -0
- package/dist/xv-webcomponents/{p-9284f4be.entry.js → p-0b0ce8e2.entry.js} +1 -1
- package/dist/xv-webcomponents/p-9edaba20.entry.js +8 -0
- package/dist/xv-webcomponents/p-CDEU4jkD.js +1 -0
- package/dist/xv-webcomponents/{p-3a20074c.entry.js → p-fa1779f0.entry.js} +1 -1
- package/dist/xv-webcomponents/xv-webcomponents.esm.js +1 -1
- package/package.json +1 -1
- package/dist/xv-webcomponents/p-6bb184f5.entry.js +0 -8
- package/dist/xv-webcomponents/p-C6jsOjam.js +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement, F as Fragment } from './index-Cv2gugMt.js';
|
|
2
2
|
import { u as uidGenerator, f as forEach, s as setAttr, r as resolveWhitelabel, a as api, g as getMetaNav, b as getBaseUrl, d as debounce$1 } from './index-OqHMuwQF.js';
|
|
3
|
-
import { S as SIZE_VAR, X as XV_SORT_DIR, O as OverflowMenuVariant } from './_vars-
|
|
3
|
+
import { S as SIZE_VAR, X as XV_SORT_DIR, O as OverflowMenuVariant, a as OverflowMenuItemSelector } from './_vars-CDEU4jkD.js';
|
|
4
4
|
|
|
5
5
|
const xvAccordionCss = () => `.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}`;
|
|
6
6
|
|
|
@@ -78,7 +78,97 @@ const XvBreadcrumbs = class {
|
|
|
78
78
|
};
|
|
79
79
|
XvBreadcrumbs.style = xvBreadcrumbsCss();
|
|
80
80
|
|
|
81
|
-
const
|
|
81
|
+
const xvButtonGroupCss = () => `.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:inline-flex}:host([variant=vertical]){flex-direction:column}::slotted(xv-button-v2){--xv-button-border-radius:0}::slotted(xv-button-v2:first-child){--xv-button-border-radius:3px 0 0 3px}::slotted(xv-button-v2:last-child){--xv-button-border-radius:0 3px 3px 0}:host([variant=vertical]) ::slotted(xv-button-v2:first-child){--xv-button-border-radius:3px 3px 0 0}:host([variant=vertical]) ::slotted(xv-button-v2:last-child){--xv-button-border-radius:0 0 3px 3px}::slotted(xv-button-v2:only-child){--xv-button-border-radius:3px}::slotted(xv-button-v2:not(:first-child)){margin-inline-start:-1px}:host([variant=vertical]) ::slotted(xv-button-v2:not(:first-child)){margin-block-start:-1px;margin-inline-start:0}::slotted(xv-button-v2[active]),::slotted(xv-button-v2:hover){position:relative;z-index:1}`;
|
|
82
|
+
|
|
83
|
+
const ITEM_TAG = 'xv-button-v2';
|
|
84
|
+
const XvButtonGroup = class {
|
|
85
|
+
constructor(hostRef) {
|
|
86
|
+
registerInstance(this, hostRef);
|
|
87
|
+
this.activeChange = createEvent(this, "activeChange", 1);
|
|
88
|
+
/** Layout direction of the group. */
|
|
89
|
+
this.variant = 'horizontal';
|
|
90
|
+
/** Allow several buttons to be active at the same time (independent toggles). */
|
|
91
|
+
this.multiple = false;
|
|
92
|
+
}
|
|
93
|
+
onSelectionInputChange() {
|
|
94
|
+
this.syncActive();
|
|
95
|
+
}
|
|
96
|
+
componentDidLoad() {
|
|
97
|
+
this.syncActive();
|
|
98
|
+
}
|
|
99
|
+
handleClick(event) {
|
|
100
|
+
var _a;
|
|
101
|
+
const btn = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest(ITEM_TAG);
|
|
102
|
+
if (!btn || !this.el.contains(btn) || btn.hasAttribute('disabled'))
|
|
103
|
+
return;
|
|
104
|
+
this.toggle(this.getItemKey(btn));
|
|
105
|
+
}
|
|
106
|
+
/** Live list of child buttons, in DOM order. */
|
|
107
|
+
get items() {
|
|
108
|
+
return Array.from(this.el.querySelectorAll(ITEM_TAG));
|
|
109
|
+
}
|
|
110
|
+
getItemKey(item) {
|
|
111
|
+
const value = item.getAttribute('value');
|
|
112
|
+
return value !== null && value !== '' ? value : `${this.items.indexOf(item)}`;
|
|
113
|
+
}
|
|
114
|
+
selectedKeys() {
|
|
115
|
+
const value = this.value;
|
|
116
|
+
if (value === undefined || value === null || value === '')
|
|
117
|
+
return [];
|
|
118
|
+
if (Array.isArray(value))
|
|
119
|
+
return value.map(String);
|
|
120
|
+
// A string: split on commas in multiple mode, otherwise treat as one key.
|
|
121
|
+
return this.multiple
|
|
122
|
+
? `${value}`.split(',').map((key) => key.trim()).filter(Boolean)
|
|
123
|
+
: [`${value}`];
|
|
124
|
+
}
|
|
125
|
+
toggle(key) {
|
|
126
|
+
if (this.multiple) {
|
|
127
|
+
const current = this.selectedKeys();
|
|
128
|
+
const next = current.includes(key) ? current.filter((k) => k !== key) : [...current, key];
|
|
129
|
+
this.value = next;
|
|
130
|
+
this.activeChange.emit(next);
|
|
131
|
+
}
|
|
132
|
+
else {
|
|
133
|
+
// Radio-like: clicking the already-active button does nothing.
|
|
134
|
+
if (`${this.value}` === key)
|
|
135
|
+
return;
|
|
136
|
+
this.value = key;
|
|
137
|
+
this.activeChange.emit(key);
|
|
138
|
+
}
|
|
139
|
+
this.syncActive();
|
|
140
|
+
}
|
|
141
|
+
/**
|
|
142
|
+
* Mirror the selection onto the children by flipping each button's `active`
|
|
143
|
+
* attribute. The button renders `aria-pressed` on its own inner `<button>`
|
|
144
|
+
* from that state (the host element has no role, so ARIA must live there).
|
|
145
|
+
*/
|
|
146
|
+
syncActive() {
|
|
147
|
+
const keys = this.selectedKeys();
|
|
148
|
+
this.items.forEach((item) => {
|
|
149
|
+
const isActive = keys.includes(this.getItemKey(item));
|
|
150
|
+
if (isActive)
|
|
151
|
+
item.setAttribute('active', '');
|
|
152
|
+
else
|
|
153
|
+
item.removeAttribute('active');
|
|
154
|
+
});
|
|
155
|
+
}
|
|
156
|
+
render() {
|
|
157
|
+
return (h(Host, { key: '173e1e09cd6a12d8f3058395914ddeceb8c12b2c', role: "group" }, h("slot", { key: 'ed963d11b49624d4f9e7144c6a9421449bfb27c4', onSlotchange: () => this.syncActive() })));
|
|
158
|
+
}
|
|
159
|
+
get el() { return getElement(this); }
|
|
160
|
+
static get watchers() { return {
|
|
161
|
+
"value": [{
|
|
162
|
+
"onSelectionInputChange": 0
|
|
163
|
+
}],
|
|
164
|
+
"multiple": [{
|
|
165
|
+
"onSelectionInputChange": 0
|
|
166
|
+
}]
|
|
167
|
+
}; }
|
|
168
|
+
};
|
|
169
|
+
XvButtonGroup.style = xvButtonGroupCss();
|
|
170
|
+
|
|
171
|
+
const xvButtonV2Css = () => `.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{--xv-button-font-weight:700;display:inline-block}:host([block]){display:block;width:100%}.xv-button{all:unset;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:var(--xv-button-border-radius, 3px);font-size:var(--fz-md);font-family:var(--ff-body, Tahoma), sans-serif;font-style:normal;font-weight:var(--xv-button-font-weight, 700);line-height:128.571%;letter-spacing:0.16px;cursor:pointer;position:relative;transition:background 0.2s, color 0.2s, border-color 0.2s;user-select:none;width:100%}.xv-button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.xv-button--xs{--xv-button-icon-size:16px;padding:var(--spacing-02);height:var(--xv-button-icon-size)}.xv-button--sm{--xv-button-icon-size:32px;padding:var(--spacing-03);height:var(--xv-button-icon-size)}.xv-button--md{--xv-button-icon-size:40px;padding:var(--spacing-04);height:var(--xv-button-icon-size)}.xv-button--lg{--xv-button-icon-size:48px;padding:var(--spacing-05);height:var(--xv-button-icon-size)}.xv-button--xl{--xv-button-icon-size:60px;font-size:1.1em;padding:var(--spacing-06);height:auto}.xv-button--primary{background-color:var(--button-primary);color:var(--text-on-color)}.xv-button--primary:hover{background-color:var(--button-primary-hover)}.xv-button--primary.xv-button--active,.xv-button--primary:active{background-color:var(--button-primary-active)}.xv-button--accent{background-color:var(--button-accent);color:var(--text-on-color)}.xv-button--accent:hover{background-color:var(--button-accent-hover)}.xv-button--accent.xv-button--active,.xv-button--accent:active{background-color:var(--button-accent-active)}.xv-button--secondary{background-color:var(--button-secondary);border:1px solid var(--border-subtle-01);color:var(--text-primary)}.xv-button--secondary:hover{background-color:var(--button-secondary-hover)}.xv-button--secondary.xv-button--active,.xv-button--secondary:active{background-color:var(--button-secondary-active)}.xv-button--danger{background:var(--support-error);color:white}.xv-button--danger:hover{background-color:#ba1b23}.xv-button--danger.xv-button--active,.xv-button--danger:active{background-color:#750e13}.xv-button--danger:disabled{background-color:var(--button-disabled);border-color:transparent;color:var(--text-on-color-disabled, #8B8B8B)}.xv-button--tertiary{background-color:transparent;border:1px solid var(--button-tertiary);color:var(--button-tertiary)}.xv-button--tertiary:hover{background-color:var(--button-tertiary-hover)}.xv-button--tertiary.xv-button--active,.xv-button--tertiary:active{background-color:var(--button-tertiary-active)}.xv-button--tertiary:disabled{color:var(--text-disabled);border-color:var(--button-disabled, #D1D1D1);background-color:transparent}.xv-button--ghost{background-color:transparent;color:var(--text-primary)}.xv-button--ghost:hover{background-color:var(--background-hover)}.xv-button--ghost.xv-button--active,.xv-button--ghost:active{background-color:rgba(139, 139, 139, 0.5)}.xv-button--ghost:disabled{color:var(--text-disabled);border-color:transparent;background-color:transparent}.xv-button--tertiary:disabled{color:var(--text-on-color-disabled, #8B8B8B)}.xv-button--primary:disabled,.xv-button--accent:disabled,.xv-button--secondary:disabled,.xv-button--danger:disabled{border-color:var(--border-subtle-01, #D1D1D1);background-color:var(--button-disabled, #D1D1D1);color:var(--text-on-color-disabled, #8B8B8B)}.xv-button--disabled{cursor:not-allowed}.xv-button--loading{pointer-events:none;opacity:0.8}.xv-button__label{display:inline-flex;align-items:center}.xv-button__loader{position:absolute;left:50%;transform:translateX(-50%)}.xv-button__icon{display:inline-flex;align-items:center}.xv-button--icon-left .xv-button__icon--left{margin-inline-end:var(--spacing-05)}.xv-button--icon-right .xv-button__icon--right{margin-inline-start:var(--spacing-05)}.xv-button--icon-only{padding:0;width:var(--xv-button-icon-size, 40px);height:var(--xv-button-icon-size, 40px);justify-content:center}.xv-button--icon-only .xv-button__icon{margin:0}`;
|
|
82
172
|
|
|
83
173
|
const XvButton = class {
|
|
84
174
|
constructor(hostRef) {
|
|
@@ -102,6 +192,8 @@ const XvButton = class {
|
|
|
102
192
|
this.block = false;
|
|
103
193
|
/** Button type */
|
|
104
194
|
this.type = 'button';
|
|
195
|
+
/** Set button to active styles */
|
|
196
|
+
this.active = false;
|
|
105
197
|
this.hasLeftIcon = false;
|
|
106
198
|
this.hasRightIcon = false;
|
|
107
199
|
this.hasContent = false;
|
|
@@ -130,8 +222,9 @@ const XvButton = class {
|
|
|
130
222
|
}
|
|
131
223
|
render() {
|
|
132
224
|
var _a, _b;
|
|
133
|
-
return (h(Host, { key: '
|
|
225
|
+
return (h(Host, { key: 'aca4f3e80723593be61fab9bf77b2bfae5b68e66' }, h("button", { key: '1f0b3abe1eb888aa927c7d2351f437c82d8a7dc7', class: {
|
|
134
226
|
'xv-button': true,
|
|
227
|
+
'xv-button--active': this.active,
|
|
135
228
|
[`xv-button--${this.variant}`]: !!this.variant,
|
|
136
229
|
[`xv-button--${this.size}`]: !!this.size,
|
|
137
230
|
'xv-button--disabled': this.disabled || this.loading,
|
|
@@ -140,7 +233,7 @@ const XvButton = class {
|
|
|
140
233
|
'xv-button--icon-left': this.hasLeftIcon,
|
|
141
234
|
'xv-button--icon-right': this.hasRightIcon,
|
|
142
235
|
'xv-button--icon-only': !this.hasContent,
|
|
143
|
-
}, part: "button", title: (_a = this.el) === null || _a === void 0 ? void 0 : _a.title, value: this.value, name: this.name, onClick: this.handleClick, type: this.type, disabled: this.disabled || this.loading, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": ((_b = this.el) === null || _b === void 0 ? void 0 : _b.ariaLabel) || 'XV button' }, this.loading && (h("xv-loader-v2", { key: '
|
|
236
|
+
}, part: "button", title: (_a = this.el) === null || _a === void 0 ? void 0 : _a.title, value: this.value, name: this.name, onClick: this.handleClick, type: this.type, disabled: this.disabled || this.loading, "aria-disabled": this.disabled ? 'true' : undefined, "aria-pressed": this.active ? 'true' : undefined, "aria-label": ((_b = this.el) === null || _b === void 0 ? void 0 : _b.ariaLabel) || 'XV button' }, this.loading && (h("xv-loader-v2", { key: 'ffa0a49ef478bc558dc3511ac90e883de63188d1', class: "xv-button__loader", size: this.size !== SIZE_VAR.XL ? this.size : SIZE_VAR.LG })), h("span", { key: '3b27a5e36072adf1d749fe1b75a2f2507d2783b9', class: "xv-button__icon xv-button__icon--left" }, h("slot", { key: 'a66d0e292864c45141b3e7c78a55e1f419bca02d', name: "icon-left", onSlotchange: this.handleSlotChangeLeft })), h("span", { key: 'bb2bb95b64a11e480cb2cb267d4db79506996495', class: "xv-button__label" }, h("slot", { key: 'e14a8b19bce7b449934a5a2096c8d8ce20bb73eb', onSlotchange: this.handleSlotChangeContent }, this.label)), h("span", { key: '003cca2d751e40ec47b4d01f91f4381ba75ce529', class: "xv-button__icon xv-button__icon--right" }, h("slot", { key: 'f379bdf670da3ea97b196b055a7eaef105e455c7', name: "icon-right", onSlotchange: this.handleSlotChangeRight })))));
|
|
144
237
|
}
|
|
145
238
|
static get formAssociated() { return true; }
|
|
146
239
|
get el() { return getElement(this); }
|
|
@@ -155,7 +248,7 @@ const XvCard = class {
|
|
|
155
248
|
this.variant = 'vertical';
|
|
156
249
|
}
|
|
157
250
|
render() {
|
|
158
|
-
return (h(Host, { key: '
|
|
251
|
+
return (h(Host, { key: 'debeef927ae357d90bc496b616ae851ac7d2a2bf', class: `xv-card xv-card_${this.variant}`, part: this.variant }, h("div", { key: 'e5797327edf341eabd431d5da99c29076527bb53', class: "xv-card_media" }, h("slot", { key: '74711e7ab0ee8ea2398c6db897d2e07b44a5ecbe', name: "media" }, this.media && h("img", { key: 'f8d0e9bbc2bc85e826d6ba1d15ba05dfb0df293e', class: "xv-card_media__content", src: this.media, alt: this.header }))), h("div", { key: '384f1af6ce89280bf780603434622b52bd4cfd2d', class: "xv-card_content" }, h("div", { key: '1d4d31575cd1f2bd29156b98c4fcebe8735d9b6d', class: "xv-card_header" }, h("slot", { key: 'c234c229570dbe3adea5539be538d30b76b94dc4', name: "header" }, this.header && h("p", { key: 'd1276aa41d2d7448e9dcde8353a386d41c4b896a', class: "xv-card_header__content" }, this.header))), h("div", { key: '05e03cc8ee98ced05a24af018e0e0a6e56041f58', class: "xv-card_body" }, h("slot", { key: '56fc5e21bf601688e70b25600f1beb2578396778', name: "body" }, this.body && h("p", { key: '8d4dce44c752cbd2bd91657174e5a278868113e2', class: "xv-card_body__content" }, this.header))), h("div", { key: 'd556eaa66c876154b9e918bf662492792db96a5a', class: "xv-card_footer" }, h("slot", { key: 'c101c5341266e0b24ec9e66756b0f60894c6ff12', name: "footer" }, this.footer)))));
|
|
159
252
|
}
|
|
160
253
|
};
|
|
161
254
|
XvCard.style = xvCardCss();
|
|
@@ -236,12 +329,12 @@ const XvCheckbox = class {
|
|
|
236
329
|
}
|
|
237
330
|
}
|
|
238
331
|
render() {
|
|
239
|
-
return (h(Host, { key: '
|
|
332
|
+
return (h(Host, { key: '32ba4e94a80b3f54e362c63f1578c24b9ae7d38f' }, h("label", { key: '34e5648a0c6f455a9537a940dc4fd7ad059fc0cf', class: {
|
|
240
333
|
'xv-checkbox': true,
|
|
241
334
|
disabled: this.disabled,
|
|
242
335
|
readonly: this.readonly,
|
|
243
336
|
[`xv-checkbox--align-${this.align}`]: !!this.align,
|
|
244
|
-
} }, h("input", { key: '
|
|
337
|
+
} }, h("input", { key: 'aee7409afdb28f31003be2e639812a396fa79611', ref: el => (this.inputEl = el), type: "checkbox", readonly: this.readonly, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, indeterminate: this.indeterminate, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), h("span", { key: 'd44782c42397ba989ba1b46e62ae87f2f6a8e2c6', class: `checkmark ${this.partial ? 'checkmark-partial' : ''}` }), h("div", { key: '50ccc9ca04a1020d11903d671fc11afc7e5f03f7', class: "label" }, h("slot", { key: '1beb2ec12d33aed1b6e31933cb1ec0cba215c9e8' }, this.label && h("span", { key: '524a4e284b87e576006fc771eb8eeeac43d5e842', class: "label_str" }, this.label)))), h("slot", { key: 'e94f73ced700cb22dcd6bd9d681bc38e6b30f598', name: "info" }), !!this.error && h("span", { key: '70f12567216440af10b3685cc24ff7e850f5ac4c', class: "error" }, this.error)));
|
|
245
338
|
}
|
|
246
339
|
componentDidLoad() {
|
|
247
340
|
if (this.indeterminate) {
|
|
@@ -280,7 +373,7 @@ const XvContentSwitcherItem = class {
|
|
|
280
373
|
this.disabled = false;
|
|
281
374
|
}
|
|
282
375
|
render() {
|
|
283
|
-
return (h(Host, { key: '
|
|
376
|
+
return (h(Host, { key: '3c6d341d5fbeb6f91ceb326e35a56238be9c8e01' }, h("slot", { key: '85e165a849945f8f4bede9d0cdbb7af8676f85ec' })));
|
|
284
377
|
}
|
|
285
378
|
};
|
|
286
379
|
XvContentSwitcherItem.style = xvContentSwitcherItemCss();
|
|
@@ -414,14 +507,14 @@ const XvContentSwitcher = class {
|
|
|
414
507
|
return null;
|
|
415
508
|
}
|
|
416
509
|
render() {
|
|
417
|
-
return (h(Host, { key: '
|
|
510
|
+
return (h(Host, { key: '1298193e6670d6f13e6c9026a29d34b486d78d7e' }, h("div", { key: '102fd42b1d02d166bc298bdcc78e6f9d89bb7301', class: "switcher", role: "tablist", "aria-orientation": "horizontal" }, this.items.map((item, index) => {
|
|
418
511
|
const key = this.getItemKey(item, index);
|
|
419
512
|
const selected = this.isSelected(item, index);
|
|
420
513
|
const itemDisabled = this.isItemDisabled(item);
|
|
421
514
|
const label = item.getAttribute('label') || '';
|
|
422
515
|
const icon = item.getAttribute('icon');
|
|
423
516
|
return (h("button", { type: "button", role: "tab", class: { switcher_item: true, selected }, "aria-selected": selected ? 'true' : 'false', "aria-label": this.iconOnly ? label || undefined : undefined, title: this.iconOnly ? label || undefined : undefined, disabled: itemDisabled, tabIndex: selected ? 0 : -1, onClick: () => this.select(key), onKeyDown: (event) => this.handleKeyDown(event, index) }, icon && h("i", { class: `switcher_item-icon ${icon}`, "aria-hidden": "true" }), !this.iconOnly && label && h("span", { class: "switcher_item-label" }, label)));
|
|
424
|
-
})), h("div", { key: '
|
|
517
|
+
})), h("div", { key: 'd420e3ee370e1f610b5503dc3e2b6539a5046bdf', class: "switcher_content", role: "tabpanel", tabindex: -1 }, h("slot", { key: '307a4c1892cc42a659e531303676341ef6aef50c', onSlotchange: this.collectItems }))));
|
|
425
518
|
}
|
|
426
519
|
get el() { return getElement(this); }
|
|
427
520
|
};
|
|
@@ -3186,7 +3279,7 @@ const XvDataTable = class {
|
|
|
3186
3279
|
this.initSortable();
|
|
3187
3280
|
}
|
|
3188
3281
|
render() {
|
|
3189
|
-
return (h(Host, { key: '
|
|
3282
|
+
return (h(Host, { key: '9bfdf5a7608cd53743e79f71c1d64e3bc9b494ea', class: "xv-data-table" }, h("caption", { key: 'f3e7c40d0a89ef38c142ddb914652bb4ba690351' }, h("slot", { key: '16a25ea4df7e58fb7092314a8fa99bb683093aee', name: "title" })), h("div", { key: '16c283141a44ee147e0d5d7d3ba97748bb9cd3b4', class: "bar" }, h("div", { key: '79aaa8aa765a4607ba8280870d1b2c9676949711', class: "bar_batch" }, h("slot", { key: '31a69635f2eff40282fae73e97589ce97d46c7fa', name: "batch" })), h("div", { key: 'cb4ce2e11bc511737c48165464827656d7a72589', class: "bar_toolbar" }, h("slot", { key: 'ef48a443241b8c4175a2c56b692e8aac33c4e2f6', name: "toolbar" }))), h("table", { key: '632139c3e130422d4612810afd643c2dc3aa45b0', role: "table" }, this.columnWidths.length > 0 && (h("colgroup", { key: 'd90e13684bb2cb7c017c91848105f1bf42747326' }, this.columnWidths.map((width = 'auto') => h("col", { style: { width } })))), h("thead", { key: '1b06590f01a8e54c37dd443e47fd08a89e134570' }, h("slot", { key: 'eb6e14c86b57e93b8ded7e7a0c11b591c6110df8', name: "header" })), h("tbody", { key: '6e1a268ff840ab451f40c481c5e44f8b143ce38a' }, h("slot", { key: 'ee3db294cffd71778083bbaf6cbb6963098448d4' })), h("tfoot", { key: 'b17b1cbcc2ade5f4a8ee68212ef5420bf11061bd' }, h("slot", { key: 'acbf2ff04a4ecc77104210eaa42ef80597a8ff2a', name: "footer" }))), !!this.loading && (h("div", { key: '5a4b730b4feaded1a2faeea351d9993337e144a8', class: "loading" }, h("xv-loader-v2", { key: '48b115063b7f6a1ead7461b0bc92c2dfacb38690', size: SIZE_VAR.LG })))));
|
|
3190
3283
|
}
|
|
3191
3284
|
get el() { return getElement(this); }
|
|
3192
3285
|
static get watchers() { return {
|
|
@@ -3227,7 +3320,7 @@ const XvDataTableCell = class {
|
|
|
3227
3320
|
}
|
|
3228
3321
|
;
|
|
3229
3322
|
render() {
|
|
3230
|
-
return (h(Host, { key: '
|
|
3323
|
+
return (h(Host, { key: '40236670a4c8e778ce7d3b42cbdef0e2723eed58', role: "cell", style: { width: this.width }, class: {
|
|
3231
3324
|
multiline: this.multiline !== undefined,
|
|
3232
3325
|
[`align--${this.align}`]: !!this.align
|
|
3233
3326
|
} }, !this.multiline || isNaN(this.multiline) ? this.__renderWithTooltip() : (h("div", { class: "line-clamp", style: { ['-webkit-line-clamp']: `${this.multiline}` } }, this.__renderWithTooltip()))));
|
|
@@ -3260,7 +3353,7 @@ const XvDataTableCollapse = class {
|
|
|
3260
3353
|
rows.forEach((row) => row === null || row === void 0 ? void 0 : row.setAttribute('collapsable', ''));
|
|
3261
3354
|
}
|
|
3262
3355
|
render() {
|
|
3263
|
-
return (h(Host, { key: '
|
|
3356
|
+
return (h(Host, { key: '855f6ef7ca66001aefcad04c5c4498c305b88ea8', id: this.el.id, part: "xv-collapse", class: this.el.className, collapsed: this.collapsed, expanded: !this.collapsed }, h("slot", { key: '2337058eec638c4f27f014a05e87849b12be4e99' })));
|
|
3264
3357
|
}
|
|
3265
3358
|
get el() { return getElement(this); }
|
|
3266
3359
|
};
|
|
@@ -3343,7 +3436,7 @@ const XvDataTableRow = class {
|
|
|
3343
3436
|
const isGroup = !!this.collapse || !!this.group;
|
|
3344
3437
|
const isDraggableRow = this.reorderable && !isHeader && !isFooter && !this.group;
|
|
3345
3438
|
const showHandleCell = this.reorderable && this.reorderHandleMode === 'icon';
|
|
3346
|
-
return (h(Host, { key: '
|
|
3439
|
+
return (h(Host, { key: '373373acefd9af83de30333e5b113f390e2e6217', role: "row", part: "xv-row", class: {
|
|
3347
3440
|
checked: this.checked,
|
|
3348
3441
|
hover: this.hover,
|
|
3349
3442
|
disabled: this.disabled,
|
|
@@ -3351,7 +3444,7 @@ const XvDataTableRow = class {
|
|
|
3351
3444
|
header: isHeader,
|
|
3352
3445
|
footer: isFooter,
|
|
3353
3446
|
'reorder-row': isDraggableRow && this.reorderHandleMode === 'row',
|
|
3354
|
-
} }, showHandleCell && (h("xv-data-table-cell", { key: '
|
|
3447
|
+
} }, showHandleCell && (h("xv-data-table-cell", { key: '83b525965e82466c54118754217e672e0396eda3', width: "16px", class: "cell-control cell-control--drag" }, isDraggableRow && (h("span", { key: 'cee824eaa91f021ba60ecee5fb0ff8a85d753972', class: `cell-control_drag ${XV_ROW_DRAG_HANDLE_CLASS}`, "aria-label": "Drag to reorder" }, h("svg", { key: '3fc73eec2a1034d64e0994da564958dc48f67b43', viewBox: "0 0 8 14", width: "8", height: "14", fill: "currentColor", "aria-hidden": "true" }, h("circle", { key: 'e4a9a528e494a67d50073a3df5ea84ce362b5b42', cx: "2", cy: "2", r: "1.2" }), h("circle", { key: 'a6980f7e7d7a938d211d1da27ab46f643ce78e0b', cx: "6", cy: "2", r: "1.2" }), h("circle", { key: '2382f97b904f4aa49e0b31caebdbbda50873e63d', cx: "2", cy: "7", r: "1.2" }), h("circle", { key: 'ed741113a78560e3e7b8ade59527e7d15aacba80', cx: "6", cy: "7", r: "1.2" }), h("circle", { key: '7ea397ea58e5f79c98f81c675ee18c4842aa8011', cx: "2", cy: "12", r: "1.2" }), h("circle", { key: '950d8006bac3ff32f893d0e214984ad7a8a08cbd', cx: "6", cy: "12", r: "1.2" })))))), (!!this.variant || this.collapsable) && (h("xv-data-table-cell", { key: '236f7a4f3abd0dcc1a229962e78ea2cbd2877835', width: !!this.variant ? '16px' : '0', class: "cell-control" }, !!this.collapse && (h("button", { key: '16581137aafc05d90e97c3b1ba71d1f2ff23e9d9', class: { 'cell-control_collapse': true, open: !this.collapsed }, onClick: this.collapseClick })), this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: 'd7ec1732f4c73f44385c39317a3fd0060465ad14', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, readonly: this.readonly, required: this.required, onEventChange: this.checkedChangeHandle, class: "cell-control_checkbox" })))), h("slot", { key: '6ab432afa57d1df631872c51a0ece74a62f05a8f', onSlotchange: this.setInitialState })));
|
|
3355
3448
|
}
|
|
3356
3449
|
get el() { return getElement(this); }
|
|
3357
3450
|
};
|
|
@@ -80501,12 +80594,12 @@ const XvDatepicker = class {
|
|
|
80501
80594
|
}
|
|
80502
80595
|
render() {
|
|
80503
80596
|
const [start, end] = this.value;
|
|
80504
|
-
return (h(Host, { key: '
|
|
80597
|
+
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: {
|
|
80505
80598
|
'control_field': true,
|
|
80506
80599
|
loading: this.loading,
|
|
80507
80600
|
error: !!this.error || !!this.localError,
|
|
80508
80601
|
warning: this.warning !== undefined,
|
|
80509
|
-
}, onClick: this.handleOpen, ref: (el) => (this.controlEl = el) }, h("input", { key: '
|
|
80602
|
+
}, 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: localeExports.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: {
|
|
80510
80603
|
'week_day': true,
|
|
80511
80604
|
inRange: this.variant === 'range' && dateFns.isWithinInterval(day.date, { start, end }),
|
|
80512
80605
|
isToday: day.isToday,
|
|
@@ -80816,7 +80909,7 @@ const XvDropdown = class {
|
|
|
80816
80909
|
}
|
|
80817
80910
|
/* endregion Search methods */
|
|
80818
80911
|
render() {
|
|
80819
|
-
return (h(Host, { key: '
|
|
80912
|
+
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))));
|
|
80820
80913
|
}
|
|
80821
80914
|
componentDidLoad() {
|
|
80822
80915
|
this.syncOpenState();
|
|
@@ -80919,7 +81012,7 @@ const XvDropdownItem = class {
|
|
|
80919
81012
|
});
|
|
80920
81013
|
}
|
|
80921
81014
|
render() {
|
|
80922
|
-
return (h(Host, { key: '
|
|
81015
|
+
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" })));
|
|
80923
81016
|
}
|
|
80924
81017
|
componentWillLoad() {
|
|
80925
81018
|
if (!this.value)
|
|
@@ -81023,7 +81116,7 @@ const XvFileUploader = class {
|
|
|
81023
81116
|
}
|
|
81024
81117
|
}
|
|
81025
81118
|
render() {
|
|
81026
|
-
return (h(Host, { key: '
|
|
81119
|
+
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) => {
|
|
81027
81120
|
var _a, _b;
|
|
81028
81121
|
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)));
|
|
81029
81122
|
}))));
|
|
@@ -81095,7 +81188,7 @@ const Xvfooter = class {
|
|
|
81095
81188
|
render() {
|
|
81096
81189
|
const { categories, socials, logo, legalLinks, payments, partners, advantages } = this.data || {};
|
|
81097
81190
|
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));
|
|
81098
|
-
return (h("footer", { key: '
|
|
81191
|
+
return (h("footer", { key: '3e1f93bd2d975ce559934451e530eca99e453748', class: "xv-footer" }, (advantages === null || advantages === void 0 ? void 0 : advantages.length) > 0 && (h("div", { key: '52f610bf099c0b69f83dfeb0eee564e3d95c70e4', class: "xv-footer-advantages" }, h("div", { key: '0cbf70bebcd6375602181048302ec1b80dc7af92', class: "xv-container" }, this._renderFooterList(advantages, { itemWithLabel: true })))), hasDataLength && (h("div", { key: '82b65b07d459533d66b7357fc302d165acfc8bd7', class: "xv-container" }, h("div", { key: '0a39d278e9b9016b126ac12a1798c6686becad12', class: "xv-footer__grid xv-footer-y-spacing" }, h("div", { key: 'a7cb81bdc33b283d944c41818396462d5781cb58', class: "xv-footer__col-main" }, h("ul", { key: '4375709da3a491eda99ba4f96f2a2c4492ca5aca', 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: 'e32e14f89256029552076423773bb519dc4dac38', 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: 'a387c5a322b6eab5389c0a11056929adca272881', class: "xv-footer-legal" }, h("div", { key: 'ce2ba2792824e82db293e91a88e686428b0b2f01', class: "xv-container" }, h("div", { key: '385687cf42b2f41523299acd42fabf307a9cb13e', class: "xv-footer-legal-row" }, logo && (h("a", { key: 'eb83309d41bb170ba88ad5bc9443f2add56f7325', class: "xv-footer-logo", href: logo.href, target: logo.target }, logo.label && h("span", { key: '7ab53e5ffd2381847dab8edf8609b23283324685', class: "xv-label-02" }, logo.label), h("img", { key: 'f139554e919952dcc9515ec94911bae0b0bd595a', loading: "lazy", src: logo.image, alt: logo.label }))), h("ul", { key: '1e7b003ae7683de0cb3f4d7850b57edf6ae508e6' }, legalLinks.map((item) => {
|
|
81099
81192
|
if (item.label === 'Cookie Einstellungen') {
|
|
81100
81193
|
return h("li", null, h("a", { class: "xv-helper-text-02", onClick: this.openCookieSettings }, item.label));
|
|
81101
81194
|
}
|
|
@@ -81113,7 +81206,7 @@ Xvfooter.style = xvFooterCss();
|
|
|
81113
81206
|
|
|
81114
81207
|
const userMagnifyingGlassRegularFullSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBQcm8gNy4xLjAgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UgKENvbW1lcmNpYWwgTGljZW5zZSkgQ29weXJpZ2h0IDIwMjUgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTE3Ni41IDE5MkMxNzYuNSAxNDcuOCAyMTIuMyAxMTIgMjU2LjUgMTEyQzMwMC43IDExMiAzMzYuNSAxNDcuOCAzMzYuNSAxOTJDMzM2LjUgMjM2LjIgMzAwLjcgMjcyIDI1Ni41IDI3MkMyMTIuMyAyNzIgMTc2LjUgMjM2LjIgMTc2LjUgMTkyek0zODQuNSAxOTJDMzg0LjUgMTIxLjMgMzI3LjIgNjQgMjU2LjUgNjRDMTg1LjggNjQgMTI4LjUgMTIxLjMgMTI4LjUgMTkyQzEyOC41IDI2Mi43IDE4NS44IDMyMCAyNTYuNSAzMjBDMzI3LjIgMzIwIDM4NC41IDI2Mi43IDM4NC41IDE5MnpNODAuNSA1NDRDODAuNSA0NzMuMyAxMzcuOCA0MTYgMjA4LjUgNDE2TDI4OC43IDQxNkMyODkuNSAzOTkuMiAyOTIuNyAzODMuMSAyOTguMSAzNjhMMjA4LjUgMzY4QzExMS4zIDM2OCAzMi41IDQ0Ni44IDMyLjUgNTQ0TDMyLjUgNTUyQzMyLjUgNTY1LjMgNDMuMiA1NzYgNTYuNSA1NzZDNjkuOCA1NzYgODAuNSA1NjUuMyA4MC41IDU1Mkw4MC41IDU0NHpNNDU2LjUgMzUyQzQ5Ni4zIDM1MiA1MjguNSAzODQuMiA1MjguNSA0MjRDNTI4LjUgNDYzLjggNDk2LjMgNDk2IDQ1Ni41IDQ5NkM0MTYuNyA0OTYgMzg0LjUgNDYzLjggMzg0LjUgNDI0QzM4NC41IDM4NC4yIDQxNi43IDM1MiA0NTYuNSAzNTJ6TTQ1Ni41IDU0NEM0ODAuOSA1NDQgNTAzLjYgNTM2LjcgNTIyLjYgNTI0LjJMNTgzLjUgNTg1LjFDNTkyLjkgNTk0LjUgNjA4LjEgNTk0LjUgNjE3LjQgNTg1LjFDNjI2LjcgNTc1LjcgNjI2LjggNTYwLjUgNjE3LjQgNTUxLjJMNTU2LjUgNDkwLjNDNTY5LjEgNDcxLjMgNTc2LjQgNDQ4LjUgNTc2LjQgNDI0QzU3Ni40IDM1Ny43IDUyMi43IDMwNCA0NTYuNCAzMDRDMzkwLjEgMzA0IDMzNi40IDM1Ny43IDMzNi40IDQyNEMzMzYuNCA0OTAuMyAzOTAuMSA1NDQgNDU2LjQgNTQ0eiIvPjwvc3ZnPg==';
|
|
81115
81208
|
|
|
81116
|
-
const xvHeaderCss = () => `.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}.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}header.header{position:sticky;z-index:1000;top:0}header.header .header-wrapper{width:100%;max-width:100vw;padding-top:var(--spacing-04);background-color:var(--background, #fff);box-shadow:1px 1px 0 0 rgba(39, 52, 53, 0.15), 0 3px 2px 0 rgba(39, 52, 53, 0.3)}@media (max-width: 991px){header.header .header-wrapper{padding-bottom:var(--spacing-04)}}header.header .header-wrapper--bg{background:var(--menu-background, transparent);color:var(--menu-color, var(--text-primary, #131313))}header.header .header-top{display:flex;align-items:center;gap:var(--spacing-05)}header.header .header-top--left{width:100%;max-width:350px;display:flex;align-items:center;column-gap:var(--spacing-04)}header.header .header-top--left img{width:100%;height:26px;object-fit:contain}header.header .header-top--left .menu-btn{display:none}@media (max-width: 991px){header.header .header-top--left .menu-btn{display:inline-block}}header.header .header-top--right{flex:1;display:flex;justify-content:flex-end;gap:var(--spacing-03);margin:0;padding:0;list-style:none}@media (max-width: 1199px){header.header .header-top--right{gap:var(--spacing-01)}}header.header .header-top--right .header-label{display:flex;flex-direction:column;color:var(--text-primary, #131313)}header.header .header-top--right .header-label>small{line-height:1}@media (min-width: 992px){header.header .header-top--right .header-label{margin-inline:var(--spacing-02)}}@media (max-width: 1199px){header.header .header-top--right .header-label{display:none}}header.header .header-top--right .header-icon{color:var(--icon-primary, #131313)}header.header .header-top--right .caret{display:inline-block;margin-left:5px;width:6px;height:6px;border:none;border-bottom:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);box-sizing:border-box;background:transparent;transform-origin:center;transition:0.25s ease-in-out transform}header.header .header-top--right .counter-badge--absolute{position:absolute;top:0;right:0}header.header .header-top--right .counter-badge::part(details-content){padding:1px;line-height:1;min-width:16px;height:16px;font-size:10px;text-align:center;display:inline-flex;align-items:center;justify-content:center}header.header .header-top--orgUnit{--link-visited:var(--link-primary)}header.header .header-top .fa-question-circle{color:var(--icon-primary, #131313)}header.header .header-top .search-form{flex:1;position:relative}@media (max-width: 768px){header.header .header-top .search-form{display:none}}header.header .header-top .search-form form{padding-inline:2px;flex:1;display:flex;align-items:stretch;flex-direction:row;justify-content:flex-end}header.header .header-top .search-form form input[type=search]{flex:0;text-align:right;display:inline-flex;border:none;min-width:0;transition:flex 0.3s ease-in-out, outline 0.3s ease;overflow:hidden;border-radius:3px}header.header .header-top .search-form form input[type=search]::placeholder{color:var(--text-placeholder, #ACACAC)}header.header .header-top .search-form form input[type=search]:focus{outline:2px solid var(--focus)}header.header .header-top .search-form form>[type=button]{display:inline-flex}header.header .header-top .search-form form>[type=submit]{display:none}header.header .header-top .search-form form:focus-within>[type=button],header.header .header-top .search-form form:has(input[type=search]:not(:placeholder-shown))>[type=button]{display:none}header.header .header-top .search-form form:focus-within>[type=submit],header.header .header-top .search-form form:has(input[type=search]:not(:placeholder-shown))>[type=submit]{display:inline-flex}header.header .header-top .search-form form:focus-within input[type=search],header.header .header-top .search-form form:has(input[type=search]:not(:placeholder-shown)) input[type=search]{flex:1;outline:1px solid var(--focus)}header.header .header-top .search-form form:focus-within+.search-form-suggestions,header.header .header-top .search-form form:has(input[type=search]:not(:placeholder-shown))+.search-form-suggestions{display:flex}header.header .header-top .search-form-suggestions{position:absolute;top:calc(100% + 5px);background-color:var(--background, #fff);box-shadow:0 0 10px rgba(0, 0, 0, 0.1);border-radius:3px;z-index:2;padding:var(--spacing-04);margin:0;list-style:none;display:none;flex-direction:column;row-gap:var(--spacing-02);min-width:calc(100% - 32px)}header.header .header-top .search-form-suggestions.loading:after{display:flex;align-items:center;justify-content:center;content:"";background:rgba(255, 255, 255, 0.8);position:absolute;top:0;left:0;z-index:3;width:100%;height:100%}header.header .header-top .impersonationInfo ul[slot=body]{margin:0;padding:0;list-style:none;min-width:256px}header.header .header-top .notifications-icon{font-size:14px}header.header .header-top .notifications-item{display:flex;align-items:center;column-gap:var(--spacing-04)}header.header .header-top .notifications-item-body{display:flex;flex-direction:column}header.header .header-top .myArea{position:relative}header.header .header-top .myArea-list{padding:0;margin:0;list-style:none;max-height:0;overflow-y:scroll;transition:max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);position:absolute;right:0;top:calc(100% + var(--spacing-02, 5px));min-width:100%;background-color:var(--background);z-index:999;border-radius:3px;box-shadow:0 5px 6px rgba(0, 0, 0, 0.15);display:flex;flex-direction:column;white-space:nowrap}@supports (scrollbar-width: thin){header.header .header-top .myArea-list{scrollbar-width:thin;scrollbar-color:var(--layer-01) transparent}}header.header .header-top .myArea-list::-webkit-scrollbar{width:4px;height:4px}header.header .header-top .myArea-list::-webkit-scrollbar-thumb{background:var(--layer-01, #F7F7F7);border-radius:4px}header.header .header-top .myArea-list::-webkit-scrollbar-track{background:transparent}header.header .header-top .myArea-list--divider{height:2px;min-height:2px;width:100%;background-color:var(--layer-01, #F7F7F7);padding-block:0 !important}header.header .header-top .myArea-list--category{padding:var(--spacing-03) var(--spacing-05);margin-inline:var(--spacing-02);color:var(--text-primary);font-weight:bold}header.header .header-top .myArea-list>li:first-child{margin-top:var(--spacing-02)}header.header .header-top .myArea-list>li:last-child{margin-bottom:var(--spacing-02)}header.header .header-top .myArea-list>li>*{--link-primary:var(--text-secondary, #515151);--link-visited:var(--text-secondary, #515151);display:block;cursor:pointer;padding-inline:var(--spacing-05);padding-block:var(--spacing-02);margin-inline:var(--spacing-02)}header.header .header-top .myArea-list .category-badge{margin-left:var(--spacing-02)}header.header .header-top .myArea-list .category-badge::part(details-content){line-height:1;font-size:11px;padding:var(--spacing-01) var(--spacing-02)}header.header .header-top .myArea.isOpen .caret,header.header .header-top .myArea.onHover:hover .caret{transform:rotate(-135deg)}header.header .header-top .myArea.isOpen .myArea-list,header.header .header-top .myArea.onHover:hover .myArea-list{max-height:85vh}header.header .xv-container{box-sizing:content-box;line-height:normal}`;
|
|
81209
|
+
const xvHeaderCss = () => `.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}.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}header.header{position:sticky;z-index:1000;top:0}header.header .header-wrapper{width:100%;max-width:100vw;padding-top:var(--spacing-04);background-color:var(--background, #fff);box-shadow:1px 1px 0 0 rgba(39, 52, 53, 0.15), 0 3px 2px 0 rgba(39, 52, 53, 0.3)}@media (max-width: 991px){header.header .header-wrapper{padding-bottom:var(--spacing-04)}}header.header .header-wrapper--bg{background:var(--menu-background, transparent);color:var(--menu-color, var(--text-primary, #131313))}header.header .header-top{display:flex;align-items:center;gap:var(--spacing-05)}header.header .header-top--left{width:100%;max-width:350px;display:flex;align-items:center;column-gap:var(--spacing-04)}header.header .header-top--left img{width:100%;height:26px;object-fit:contain}header.header .header-top--left .menu-btn{display:none}@media (max-width: 991px){header.header .header-top--left .menu-btn{display:inline-block}}header.header .header-top--right{flex:1;display:flex;justify-content:flex-end;gap:var(--spacing-03);margin:0;padding:0;list-style:none}@media (max-width: 1199px){header.header .header-top--right{gap:var(--spacing-01)}}header.header .header-top--right .header-label{display:flex;flex-direction:column;color:var(--text-primary, #131313)}header.header .header-top--right .header-label>small{line-height:1}@media (min-width: 992px){header.header .header-top--right .header-label{margin-inline:var(--spacing-02)}}@media (max-width: 1199px){header.header .header-top--right .header-label{display:none}}header.header .header-top--right .header-icon{color:var(--icon-primary, #131313)}header.header .header-top--right .caret{display:inline-block;margin-left:5px;width:6px;height:6px;border:none;border-bottom:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);box-sizing:border-box;background:transparent;transform-origin:center;transition:0.25s ease-in-out transform}header.header .header-top--right .counter-badge--absolute{position:absolute;top:0;right:0}header.header .header-top--right .counter-badge::part(details-content){padding:1px;line-height:1;min-width:16px;height:16px;font-size:10px;text-align:center;display:inline-flex;align-items:center;justify-content:center}header.header .header-top--orgUnit{--link-visited:var(--link-primary)}header.header .header-top .fa-question-circle{color:var(--icon-primary, #131313)}header.header .header-top .search-form{flex:1;position:relative}@media (max-width: 768px){header.header .header-top .search-form{display:none}}header.header .header-top .search-form form{padding-inline:2px;flex:1;display:flex;align-items:stretch;flex-direction:row;justify-content:flex-end}header.header .header-top .search-form form input[type=search]{flex:0;text-align:right;display:inline-flex;border:none;min-width:0;transition:flex 0.3s ease-in-out, outline 0.3s ease;overflow:hidden;border-radius:3px}header.header .header-top .search-form form input[type=search]::placeholder{color:var(--text-placeholder, #ACACAC)}header.header .header-top .search-form form input[type=search]:focus{outline:2px solid var(--focus)}header.header .header-top .search-form form>[type=button]{display:inline-flex}header.header .header-top .search-form form>[type=submit]{display:none}header.header .header-top .search-form form:focus-within>[type=button],header.header .header-top .search-form form:has(input[type=search]:not(:placeholder-shown))>[type=button]{display:none}header.header .header-top .search-form form:focus-within>[type=submit],header.header .header-top .search-form form:has(input[type=search]:not(:placeholder-shown))>[type=submit]{display:inline-flex}header.header .header-top .search-form form:focus-within input[type=search],header.header .header-top .search-form form:has(input[type=search]:not(:placeholder-shown)) input[type=search]{flex:1;outline:1px solid var(--focus)}header.header .header-top .search-form form:focus-within+.search-form-suggestions,header.header .header-top .search-form form:has(input[type=search]:not(:placeholder-shown))+.search-form-suggestions{display:flex}header.header .header-top .search-form-suggestions{position:absolute;top:calc(100% + 5px);background-color:var(--background, #fff);box-shadow:0 0 10px rgba(0, 0, 0, 0.1);border-radius:3px;z-index:2;padding:var(--spacing-04);margin:0;list-style:none;display:none;flex-direction:column;row-gap:var(--spacing-02);min-width:calc(100% - 32px)}header.header .header-top .search-form-suggestions.loading:after{display:flex;align-items:center;justify-content:center;content:"";background:rgba(255, 255, 255, 0.8);position:absolute;top:0;left:0;z-index:3;width:100%;height:100%}header.header .header-top .impersonationInfo ul[slot=body]{margin:0;padding:0;list-style:none;min-width:256px}header.header .header-top .notifications-icon{font-size:14px}header.header .header-top .notifications-item{display:flex;align-items:center;column-gap:var(--spacing-04)}header.header .header-top .notifications-item-body{display:flex;flex-direction:column}header.header .header-top .myArea{position:relative}header.header .header-top .myArea .myArea-btn[aria-expanded=true] .caret{transform:rotate(-135deg)}header.header .header-top .myArea .category-badge{margin-left:var(--spacing-02)}header.header .header-top .myArea .category-badge::part(details-content){line-height:1;font-size:11px;padding:var(--spacing-01) var(--spacing-02)}header.header .xv-container{box-sizing:content-box;line-height:normal}`;
|
|
81117
81210
|
|
|
81118
81211
|
const XvHeader = class {
|
|
81119
81212
|
constructor(hostRef) {
|
|
@@ -81265,11 +81358,17 @@ const XvHeader = class {
|
|
|
81265
81358
|
} }), h("div", { class: "notifications-item-body" }, h("span", null, "Rechnungsentwurf f\u00FCr Auftrag ", notification.orderId, " ist ausstehend"), h("xv-link-v2", { variant: notification.isRead ? 'ghost' : 'standalone', href: `/de-de/manager/ordersales/details/${notification.orderId}` }, "Auftrag anschauen")))))))));
|
|
81266
81359
|
}
|
|
81267
81360
|
_renderAccount() {
|
|
81268
|
-
var _a, _b, _c, _d, _e, _f, _g, _h
|
|
81361
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
81269
81362
|
if (!((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a.IsAuthenticated)) {
|
|
81270
81363
|
return (h("li", null, h("xv-button-v2", { variant: "ghost", size: SIZE_VAR.MD, onClick: () => this.showLoginModal = true }, h("i", { class: "header-icon far fa-user" }), h("span", { class: "header-label xv-body-02" }, "Mein Konto"))));
|
|
81271
81364
|
}
|
|
81272
|
-
|
|
81365
|
+
const menuItems = [
|
|
81366
|
+
...(((_b = this.metaNav) === null || _b === void 0 ? void 0 : _b.ManagerCockpitMenu) || []),
|
|
81367
|
+
...(((_c = this.metaNav) === null || _c === void 0 ? void 0 : _c.ManagerEntitiesMenu) || []),
|
|
81368
|
+
...(((_d = this.metaNav) === null || _d === void 0 ? void 0 : _d.ManagerMenu) || []),
|
|
81369
|
+
...(!((_e = this.metaNav) === null || _e === void 0 ? void 0 : _e.IsManager) ? (((_f = this.metaNav) === null || _f === void 0 ? void 0 : _f.UserMenu) || []) : []),
|
|
81370
|
+
];
|
|
81371
|
+
return (h("li", { class: "myArea" }, h("xv-button-v2", { id: "xv-header-myarea-trigger", class: "myArea-btn", variant: "ghost", size: SIZE_VAR.MD }, h("i", { class: "far fa-user" }), h("div", { class: "header-label xv-body-02" }, ((_g = this.metaNav) === null || _g === void 0 ? void 0 : _g.IsManager) && h("small", { class: "xv-label-01" }, "Manager"), h("span", null, ((_h = this.metaNav) === null || _h === void 0 ? void 0 : _h.UserMenuText) || 'Mein Konto')), h("i", { class: "caret" })), h("xv-overflow-menu-v2", { anchor: "#xv-header-myarea-trigger", alignment: "start" }, menuItems.map((item) => (h("xv-overflow-menu-v2-item", { value: item.Url, href: item.Url, target: item.Target }, item.Text, item.BadgeText && (h("xv-tag-v2", { class: "category-badge", color: "var(--text-inverse, #FFF)", bg: "var(--icon-interactive, #97BF0D)" }, item.BadgeText))))), h("xv-overflow-menu-v2-item", { divider: true, value: "logoff", href: `${this.baseUrl}/de-de/mycrossvertise/account/logoff?returnUrl=${window.location.hostname}` }, "Abmelden"))));
|
|
81273
81372
|
}
|
|
81274
81373
|
// endregion Account
|
|
81275
81374
|
// region ShoppingCart
|
|
@@ -81281,7 +81380,7 @@ const XvHeader = class {
|
|
|
81281
81380
|
render() {
|
|
81282
81381
|
var _a, _b, _c, _d, _e;
|
|
81283
81382
|
const isXvBrand = (((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a['WhitelabelName']) || 'Xv') === 'Xv';
|
|
81284
|
-
return (h("header", { key: '
|
|
81383
|
+
return (h("header", { key: '1e8cbed3efe14824ce65b9b79009855f45e88552', class: "header" }, h("div", { key: '871071d55e53c9b3a059be62da7f59b79af83fe9', class: "header-wrapper" }, h("div", { key: 'f005f1602fdb23d8539c7b4365195def15050f03', class: "xv-container" }, h("div", { key: 'd83e928b21387c5eb5a66cdec842a36291822dc7', class: "header-top" }, h("div", { key: '553f7db352b179760b4de59722d2ac625c7296c3', class: "header-top--left" }, h("xv-button-v2", { key: '04ebf462cbd0c2fafae3723ac58d78c7c41f37d9', class: "menu-btn", variant: "ghost", onClick: this.toggleMobMenu }, h("i", { key: '88dcb80ecd93050c90333486b36689b7a07fbc16', slot: "icon-left", class: { 'fa': true, 'fa-times': this.mobMenuOpen, 'fa-bars': !this.mobMenuOpen } })), this.metaNav && (h("a", { key: '84c84d341d22ac8014a87f83f08470eb951ecabe', href: `${window.location.origin}/` }, h("picture", { key: '120e34cb407d46a0a3824b8c32c406d0f06ce832' }, h("source", { key: '31960a37deffe4afc81f9d177d6638abd992c78a', srcSet: ((_b = this.metaNav) === null || _b === void 0 ? void 0 : _b.LogoUrl) || 'https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg', media: "(min-width: 990px)" }), h("img", { key: '75a7705d025f5022022f768e1c7dc5128b5bdf80', src: ((_c = this.metaNav) === null || _c === void 0 ? void 0 : _c.LogoSmallUrl) || 'https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg', onError: this.logoFallback, loading: "lazy", alt: "Crossvertise" })))), this.orgUnit && (h("xv-link-v2", { key: 'c8048b30b3227359fb65cfcca80e5600724f3bc2', class: "header-top--orgUnit", variant: "standalone", href: "/de-de/mycrossvertise" }, this.orgUnit))), h("ul", { key: '5de18779cc415b556513ff30a116f9001a1f56a6', class: "header-top--right" }, this._renderSearch(), this._renderImpersonationInfo(), !((_d = this.metaNav) === null || _d === void 0 ? void 0 : _d.IsManager) && isXvBrand && (h("li", { key: 'e17eadf61593034d5fab4129036e57283d0cd255' }, h("xv-link-v2", { key: 'c5df24226e52225840eaf116fe99d43eebe73a96', variant: "ghost", href: "https://www.crossvertise.com/ueber-uns/kontakt" }, h("xv-button-v2", { key: '845132fd6507e39479e12df1fe8b473cf088e70f', variant: "ghost", size: SIZE_VAR.MD }, h("i", { key: '54eb518f58300ccbf4e74f628d7b6379670f1c26', class: "header-icon far fa-envelope" }), h("span", { key: '959c6ae9267cc4a2114a9eec78e798caa50e961e', class: "header-label xv-body-02" }, "Kontakt"))))), this._renderNotifications(), this._renderAccount(), !((_e = this.metaNav) === null || _e === void 0 ? void 0 : _e.IsManager) && isXvBrand && (h("li", { key: 'c097773be84472755fda77718f38150a709b32a7' }, h("xv-link-v2", { key: 'b8ea823caecadd2e393751b5edcc69688457783e', variant: "ghost", href: "https://help.crossvertise.com" }, h("xv-button-v2", { key: '9d39739c1e35812bfac290e457676937819aaacf', variant: "ghost", size: SIZE_VAR.MD }, h("i", { key: '1c450da39d5a602e0d9bee2782480bb19be46eee', class: "header-icon far fa-question-circle" }), h("span", { key: '0c8a1a901069832219f66b58bc835c104ba71a6a', class: "header-label xv-body-02" }, "Hilfe"))))), this._renderShoppingCart()))), h("div", { key: '33c0caebc768f200874997b0732297df7fcd79a8', class: "header-wrapper--bg" }, h("div", { key: '92070c591038efc772c263b328f264bf06cf7de9', class: "xv-container" }, h("xv-mega-menu", { key: 'c06727e455019dff71ce7b68149d4e757391de00', open: this.mobMenuOpen, onOpenChange: this.closeMobMenu })))), h("xv-login-modal", { key: 'dde492343f352dadaa27e4c06c21ce85c914aae8', visible: this.showLoginModal, onClose: () => this.showLoginModal = false })));
|
|
81285
81384
|
}
|
|
81286
81385
|
get el() { return getElement(this); }
|
|
81287
81386
|
};
|
|
@@ -81332,7 +81431,7 @@ const XvImageViewer = class {
|
|
|
81332
81431
|
}
|
|
81333
81432
|
}
|
|
81334
81433
|
render() {
|
|
81335
|
-
return (h(Host, { key: '
|
|
81434
|
+
return (h(Host, { key: 'bd15b24608ded6a06e014f436b91053a1605ec6f', class: { 'image-wrapper': true, errored: this.errored } }, !this.loaded && h("xv-loader-v2", { key: 'c841135421670f016cf8366184b1a4ca30b586fb', class: "loading" }, this.placeholder), this.loaded && this.errored && h("slot", { key: '03bc57bf48199dc91231d14fc80d62c0dd8e31bd', name: "fallback" }), this.loaded && !this.errored && (h("img", { key: '79dd3b3662c2d89ff3cdbae8885cb4f86c1d6a62', src: this.src, alt: this.alt, class: "image", onClick: this.handleClick, onError: this.handleError })), this.isFullscreen && (h("div", { key: '1f5067d6f981c8853809e34f0083d65eb1719bed', class: "fullscreen-overlay", onClick: this.closeFullscreen }, !this.fullscreenLoaded && h("xv-loader-v2", { key: 'a6abc0aee2ef57f901c7bc917819509806a7a0cd', class: "loading", size: SIZE_VAR.LG }, this.placeholder), h("img", { key: '2d88fa62dc2ed889c73570ef94b973cb2ec6fde3', src: this.fullscreenSrc || this.src, alt: this.alt, class: {
|
|
81336
81435
|
'fullscreen-image': true,
|
|
81337
81436
|
loaded: this.fullscreenLoaded,
|
|
81338
81437
|
} })))));
|
|
@@ -81357,7 +81456,7 @@ const XvLink = class {
|
|
|
81357
81456
|
e.stopPropagation();
|
|
81358
81457
|
}
|
|
81359
81458
|
render() {
|
|
81360
|
-
return (h(Host, { key: '
|
|
81459
|
+
return (h(Host, { key: '121a30abee76537568ff1759fd0efd8d2cc4e047', class: { [`xv-link_${this.variant}`]: true, disabled: !!this.disabled } }, h("a", { key: '8062a5cdbc385c2f78aaa18894e4d792d43190e8', href: this.href, onClick: this.preventLinkHandler.bind(this), class: { 'xv-link': true, 'xv-link_disabled': !!this.disabled, [this.size]: !!this.size }, target: this.target }, h("slot", { key: '7de4e11afef772000204b892e9a16cf1395d07cf', name: "icon-left" }), h("slot", { key: '0df87b0502375a6d0a353651e1442f135e30a3b1' }), h("slot", { key: '6264cf3d54e1bce0a03ca210b35a4704e5ad5380', name: "icon-right" }))));
|
|
81361
81460
|
}
|
|
81362
81461
|
};
|
|
81363
81462
|
XvLink.style = xvLinkCss();
|
|
@@ -81525,7 +81624,7 @@ const XvMegaMenu = class {
|
|
|
81525
81624
|
void this.fetchMenuData();
|
|
81526
81625
|
}
|
|
81527
81626
|
render() {
|
|
81528
|
-
return (h(Host, { key: '
|
|
81627
|
+
return (h(Host, { key: '3df71e4a8eaab5418f2ac9615b4522ff20f31fc1' }, h("nav", { key: 'cbfd9eed6298da39b7d668219fd6598ca44267e0', class: { 'xv-menu': true, open: this.open } }, this.menuLoading && (h("div", { key: '1483dad2c668d32dca9068cbf71a8f40a422720d', class: { 'xv-menu-loader': true, open: this.open } }, h("xv-loader-v2", { key: '8c8d830813dfad2de945a7b86987c69286202db7' }))), h("ul", { key: '325c0c06573d9eef071049758c5206b4d56fa256', class: { menu: true, open: this.open } }, this.menuItems.map((menuItem) => {
|
|
81529
81628
|
var _a, _b;
|
|
81530
81629
|
return (h("li", { class: { 'menu-item': true, active: menuItem.id === ((_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.id) } }, menuItem.route ? (h("xv-link-v2", { variant: "ghost", href: menuItem.route.route }, h("p", { class: "menu-item-label" }, (_b = menuItem.route) === null || _b === void 0 ? void 0 : _b.label))) : (h(Fragment, null, h("p", { class: "menu-item-label", onClick: () => this.setActiveItem(menuItem) }, menuItem === null || menuItem === void 0 ? void 0 : menuItem.label), h("ul", { class: "menu-item-groups" }, menuItem.groups.map((group) => {
|
|
81531
81630
|
var _a;
|
|
@@ -81535,7 +81634,7 @@ const XvMegaMenu = class {
|
|
|
81535
81634
|
} }, h("div", { class: "group-menus" }, h("ul", { class: { 'group-menus-categories': true, inline: group.layout === 'inline' } }, group.categories.map((category) => (h("li", { class: "category" }, h("p", { class: "category-label" }, category.label), h("ul", { class: "category-routes" }, category.routes.map((route) => (h("li", { class: "route" }, h("xv-link-v2", { size: "lg", variant: "ghost", href: route.route || '#' }, route.label), route.tag && (h("xv-tag-v2", { class: "route-tag", size: "sm", color: "#161616", bg: "#E0E0E0" }, route.tag)))))))))), h("ul", { class: "group-menus-actions" }, group.actions.map((action) => (h("li", { class: "action" }, action.type === 'link' && (h("xv-link-v2", { variant: "standalone", href: action === null || action === void 0 ? void 0 : action.url }, action.label, h("span", { class: "link-chevron", slot: "icon-right" }, "\u2192"))), action.type === 'button' &&
|
|
81536
81635
|
h("xv-button-v2", { onClick: () => this.navActionClick(action), block: true, variant: "tertiary" }, action.label)))))), (group === null || group === void 0 ? void 0 : group.card) && (h("div", { class: "group-card" }, h("xv-card-v2", { media: this.applicationContext !== 'Komsa' ? group.card.image : undefined, variant: this.isMobile ? 'horizontal' : 'vertical' }, h("h5", { slot: "header", class: "group-card-title" }, group.card.title), h("p", { slot: "body", class: "group-card-desc" }, group.card.description), group.card.linkLabel && (h("xv-link-v2", { slot: "footer", variant: "standalone", href: group.card.linkUrl || '#' }, group.card.linkLabel, h("span", { class: "link-chevron", slot: "icon-right" }, "\u2192"))))))))));
|
|
81537
81636
|
}))))));
|
|
81538
|
-
}), h("li", { key: '
|
|
81637
|
+
}), h("li", { key: '8f1feb52d5dedb5ce6ea4186ac64004ed0c95bc4', class: "menu--right" }, h("slot", { key: '230779f7de9541bb841c5a8fe6dcbec206a828ec', name: "menu-right" })), this.open && (h("li", { key: '1c49d2f7f43ece4b1a8fc1a5138f7c760dd40f06', class: "menu--backdrop", onClick: () => this.handleClose() }))))));
|
|
81539
81638
|
}
|
|
81540
81639
|
get el() { return getElement(this); }
|
|
81541
81640
|
};
|
|
@@ -81603,7 +81702,7 @@ const XvModal = class {
|
|
|
81603
81702
|
}
|
|
81604
81703
|
render() {
|
|
81605
81704
|
var _a;
|
|
81606
|
-
return (h(Host, { key: '
|
|
81705
|
+
return (h(Host, { key: 'd719dda6d5a55092ca62a85ceba9c391a889897e', role: "dialog", size: this.size, id: this.el.id }, h("slot", { key: '50dfd619c707d997a3068c709180e031d8f396e3', name: "trigger", onSlotchange: this.setupTrigger }), h("div", { key: 'e3e1607c716c5bed1ec678a9d7e8cdaa9cd3081b', class: { backdrop: true }, onClick: this.onBackdropClick }, h("div", { key: 'a128cc4077cc1ab8401503cc5ab04c90d9bc1668', class: "modal" }, h("button", { key: 'da141f5bd522e820fc89b58f9ce662da37b04e38', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), h("div", { key: '224828f7f8b110dadc6ed4e3bf46a0dc5e886053', class: "modal_header" }, h("slot", { key: '8ae8146a302c27f8fbdb2832fc45ef672924b846', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && h("h5", { key: 'ef81962dc14df688ed3d46afc3255690973dbcee', class: "modal_header__title" }, this.el.title))), h("div", { key: 'ab61b6bc218b815242a4664089889735d9a08953', class: { 'modal_content': true, overflow: this.overflow } }, h("slot", { key: 'bc53b9b9a543c39e647abad09f182bab6d3aff2c' })), h("div", { key: '5dc7449ae5e5a4549d584f048199ff2353f2e7a7', class: "modal_footer" }, h("slot", { key: '5e464769fd71db35eb9463b93069eb82d3e11c6c', name: "footer" })), !!this.loading && (h("div", { key: 'fe053e84a02095732b1b3d32e021a29ac6f3f469', class: "loading" }, h("xv-loader-v2", { key: '0cafb57f80b4716b06160556b809e9359fb5f3fc', size: SIZE_VAR.LG })))))));
|
|
81607
81706
|
}
|
|
81608
81707
|
disconnectedCallback() {
|
|
81609
81708
|
this.removeTriggerListener();
|
|
@@ -81641,7 +81740,7 @@ const XvNotification = class {
|
|
|
81641
81740
|
};
|
|
81642
81741
|
}
|
|
81643
81742
|
render() {
|
|
81644
|
-
return (h(Host, { key: '
|
|
81743
|
+
return (h(Host, { key: 'fd2a890616909b0476525b8245e0141ea7aae4bc', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), h("div", { key: '61278767c2c99f564891bf0bc7217f5b64507c50', class: "content" }, h("div", { key: '5d1504f83bfa2ff8150a13428c4c7c677154993f', class: "content_wrapper" }, this.el.title && h("h5", { key: 'a4ff6ebe179e40424d8d42cc7048b4b685aed708', class: "content_title" }, this.el.title), h("slot", { key: '14002960ca2abf44b428aa98afcc7799ca653b1c' })), h("slot", { key: 'b0f83f834cb93725e6cbffe346558e9d95e6e73b', name: "footer" })), this.dismissible && h("button", { key: '973928d389586e7f914348e5706e011707716834', class: "close", onClick: this.closeHandle })));
|
|
81645
81744
|
}
|
|
81646
81745
|
static get assetsDirs() { return ["xv-notification/icons"]; }
|
|
81647
81746
|
get el() { return getElement(this); }
|
|
@@ -81691,88 +81790,320 @@ const XvNumberInput = class {
|
|
|
81691
81790
|
this.valueChange.emit(this.value);
|
|
81692
81791
|
}
|
|
81693
81792
|
render() {
|
|
81694
|
-
return (h(Host, { key: '
|
|
81793
|
+
return (h(Host, { key: '48433efcac2571e9c35132a59671f2490f353620', class: { disabled: !!this.disabled } }, h("label", { key: 'd723e4ee9ea4923a4c97bd0882b2eb545325c439', class: "control" }, this.label && h("span", { key: '53bba2ac60f9b25f1d3ba0d718071c2c08580611', class: "control_label" }, this.label), h("div", { key: '822b57366a90669a54f9e74db068ee90b54826a2', class: {
|
|
81695
81794
|
'control_input': true,
|
|
81696
81795
|
readonly: !!this.readonly,
|
|
81697
81796
|
error: !!this.error,
|
|
81698
81797
|
warning: !!this.warning
|
|
81699
|
-
} }, h("input", { key: '
|
|
81798
|
+
} }, h("input", { key: '2ac3ba2d2fe7982437c0d28c436a478f22964d6f', type: "number", placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, min: this.min, max: this.max, step: this.step, value: this.value }), h("div", { key: '0b7aa503686f72815b8d489863b7711c26cb83fc', class: "control_input__icons" }, this.loading ? (h("xv-loader-v2", { size: SIZE_VAR.XS })) : !!this.error ? (h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null, h("xv-button-v2", { key: '5276fa743cd4d7cf9cacf9305d2ea22964335e75', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.decrement, "aria-label": "Decrease" }, h("span", { key: '9385c41e5eb131833939e4878ecaf7dacd231138', slot: "icon-left", class: "status-icon" }, "\u2212")), h("hr", { key: '2c9bc7b907000edf36ac45d72bc660853a5ba959' }), h("xv-button-v2", { key: 'a871b573841a63c989c1c811c8eb3557dffc02a4', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.increment, "aria-label": "Increase" }, h("span", { key: '6da92f9046004c27b3c03607d08e6c70f6310b87', slot: "icon-left", class: "status-icon" }, "+"))))), this.helper && h("p", { key: '1b094da19ac32b498efbaa92d956b121f503fbbc', class: "message" }, this.helper), typeof this.error === 'string' ? (h("p", { class: "message error" }, this.error)) : typeof this.warning === 'string' ? (h("p", { class: "message warning" }, this.warning)) : null));
|
|
81700
81799
|
}
|
|
81701
81800
|
static get formAssociated() { return true; }
|
|
81702
81801
|
};
|
|
81703
81802
|
XvNumberInput.style = xvNumberInputCss();
|
|
81704
81803
|
|
|
81705
|
-
const xvOverflowMenuCss = () => `.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{--overflow-menu-size:40px;--overflow-menu-item-padding:11px 16px;display:inline-flex;flex-direction:column;position:relative}:host .btn{display:inline-flex;align-items:center;justify-content:center;width:var(--overflow-menu-size);height:var(--overflow-menu-size);background-color:transparent;border:1px solid transparent;transition:300ms ease-in-out color, 300ms ease-in-out background-color, 200ms ease box-shadow;font-size:calc(var(--overflow-menu-size) / 2);color:var(--icon-primary);border-radius:5%;margin:0;padding:0}:host .btn:hover{cursor:pointer;color:var(--link-primary-hover);background-color:var(--background-hover)}:host .btn:active{background-color:var(--background-active);color:var(--icon-disabled)}:host .btn:disabled{background-color:transparent;opacity:0.5;cursor:not-allowed}:host .list{z-index:99;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;background-color:var(--layer-01);position:absolute;top:100%;left:0;max-height:0;overflow:hidden;border-radius:3px;transition:200ms ease-in-out max-height, 100ms ease box-shadow;min-width:
|
|
81804
|
+
const xvOverflowMenuCss = () => `.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{--overflow-menu-size:40px;--overflow-menu-item-padding:11px 16px;display:inline-flex;flex-direction:column;position:relative}:host .btn{display:inline-flex;align-items:center;justify-content:center;width:var(--overflow-menu-size);height:var(--overflow-menu-size);background-color:transparent;border:1px solid transparent;transition:300ms ease-in-out color, 300ms ease-in-out background-color, 200ms ease box-shadow;font-size:calc(var(--overflow-menu-size) / 2);color:var(--icon-primary);border-radius:5%;margin:0;padding:0}:host .btn:hover{cursor:pointer;color:var(--link-primary-hover);background-color:var(--background-hover)}:host .btn:active{background-color:var(--background-active);color:var(--icon-disabled)}:host .btn:focus-visible{outline:2px solid var(--focus, #273435);outline-offset:-2px}:host .btn:disabled{background-color:transparent;opacity:0.5;cursor:not-allowed}:host .list{z-index:99;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;background-color:var(--layer-01);position:absolute;top:100%;left:0;max-height:0;overflow:hidden;outline:none;border-radius:3px;transition:200ms ease-in-out max-height, 100ms ease box-shadow;min-width:160px;max-width:50vw;width:max-content}:host .list.open{overflow:visible}:host .list ::slotted(xv-overflow-menu-v2-item){padding:var(--overflow-menu-item-padding)}:host .list.position-right{left:initial;right:0;border-top-right-radius:0}:host .list.position-left{border-top-left-radius:0}:host .list.position-center{transform:translateX(-50%)}:host([size=xs]){--overflow-menu-item-padding:4px 16px;--overflow-menu-size:24px}:host([size=sm]){--overflow-menu-size:32px;--overflow-menu-item-padding:7px 16px}:host([size=md]){--overflow-menu-size:40px;--overflow-menu-item-padding:11px 16px}:host([size=lg]){--overflow-menu-size:48px;--overflow-menu-item-padding:15px 16px}:host([size=xl]){--overflow-menu-size:56px;--overflow-menu-item-padding:16px}:host([open]) .btn{border-bottom-left-radius:0;border-bottom-right-radius:0;background-color:var(--layer-01);box-shadow:-2px 2px 2px 0 rgba(0, 0, 0, 0.1);z-index:1}:host([open]) .list{max-height:500px;box-shadow:-2px 2px 2px 0 rgba(0, 0, 0, 0.1)}:host(.anchored){display:contents}:host(.anchored) .list{position:fixed;top:0;left:0;max-height:none;overflow:visible}:host(.anchored) .list:not(.open){display:none}:host(.anchored) .list.open{box-shadow:0 2px 6px rgba(0, 0, 0, 0.3)}`;
|
|
81706
81805
|
|
|
81806
|
+
let overflowMenuUid = 0;
|
|
81707
81807
|
const XvOverflowMenu = class {
|
|
81708
81808
|
constructor(hostRef) {
|
|
81709
81809
|
registerInstance(this, hostRef);
|
|
81710
81810
|
this.selectItem = createEvent(this, "selectItem", 7);
|
|
81811
|
+
this.openChange = createEvent(this, "openChange", 3);
|
|
81711
81812
|
this.open = false;
|
|
81712
81813
|
this.disabled = false;
|
|
81713
81814
|
this.position = 'left';
|
|
81714
81815
|
this.size = SIZE_VAR.MD;
|
|
81715
|
-
this.
|
|
81716
|
-
|
|
81717
|
-
|
|
81718
|
-
|
|
81816
|
+
this.anchorEl = null;
|
|
81817
|
+
this.menuId = `xv-overflow-menu-${overflowMenuUid++}`;
|
|
81818
|
+
this.activeItem = null;
|
|
81819
|
+
this.optIdSeq = 0;
|
|
81820
|
+
/** Whether the current open was triggered by the keyboard — only then do we pre-highlight an item. */
|
|
81821
|
+
this.openViaKeyboard = false;
|
|
81822
|
+
this.openEdge = 'first';
|
|
81719
81823
|
this.removeListeners = () => {
|
|
81720
81824
|
this.el.removeEventListener('itemClick', this.handleSelectItem);
|
|
81721
|
-
document.
|
|
81825
|
+
document.removeEventListener('click', this.handleClickOutside, { capture: true });
|
|
81722
81826
|
};
|
|
81723
|
-
this.
|
|
81724
|
-
|
|
81827
|
+
this.handleClickOutside = (ev) => {
|
|
81828
|
+
var _a, _b, _c;
|
|
81829
|
+
if (!this.open)
|
|
81725
81830
|
return;
|
|
81726
|
-
ev.
|
|
81727
|
-
|
|
81728
|
-
|
|
81831
|
+
// A shadow-DOM click retargets ev.target to the host in the browser (covered by el.contains).
|
|
81832
|
+
// Also check the shadow trigger/list directly so it works when there is no retargeting (jsdom).
|
|
81833
|
+
const target = ev.target;
|
|
81834
|
+
if (this.el.contains(target))
|
|
81835
|
+
return;
|
|
81836
|
+
if ((_a = this.triggerButtonEl) === null || _a === void 0 ? void 0 : _a.contains(target))
|
|
81837
|
+
return;
|
|
81838
|
+
if ((_b = this.listEl) === null || _b === void 0 ? void 0 : _b.contains(target))
|
|
81839
|
+
return;
|
|
81840
|
+
// A click on the anchor is handled by its own listener (toggle) — don't treat it as "outside".
|
|
81841
|
+
if ((_c = this.anchorEl) === null || _c === void 0 ? void 0 : _c.contains(target))
|
|
81842
|
+
return;
|
|
81843
|
+
this.open = false;
|
|
81729
81844
|
};
|
|
81730
81845
|
this.onOpenToggle = () => {
|
|
81846
|
+
this.openViaKeyboard = false; // mouse open: don't pre-highlight the first item
|
|
81731
81847
|
this.open = !this.open;
|
|
81732
81848
|
};
|
|
81733
81849
|
this.handleSelectItem = ({ detail }) => {
|
|
81734
81850
|
this.selectItem.emit(detail);
|
|
81735
|
-
this.
|
|
81851
|
+
this.open = false;
|
|
81736
81852
|
};
|
|
81737
|
-
|
|
81738
|
-
|
|
81739
|
-
|
|
81740
|
-
ev.stopPropagation();
|
|
81853
|
+
this.anchorClickHandler = (ev) => {
|
|
81854
|
+
if (this.disabled)
|
|
81855
|
+
return;
|
|
81741
81856
|
ev.preventDefault();
|
|
81742
|
-
this.
|
|
81743
|
-
|
|
81857
|
+
this.openViaKeyboard = false; // mouse open: don't pre-highlight the first item
|
|
81858
|
+
this.open = !this.open;
|
|
81859
|
+
};
|
|
81860
|
+
this.getNavigableItems = () => Array.from(this.el.querySelectorAll(OverflowMenuItemSelector))
|
|
81861
|
+
.filter((el) => !el.hasAttribute('disabled') && !el.hasAttribute('hidden') && el.getAttribute('variant') !== 'ghost');
|
|
81862
|
+
this.moveActive = (delta) => {
|
|
81863
|
+
const items = this.getNavigableItems();
|
|
81864
|
+
if (!items.length)
|
|
81865
|
+
return;
|
|
81866
|
+
const current = this.activeItem ? items.indexOf(this.activeItem) : -1;
|
|
81867
|
+
let next = current + delta;
|
|
81868
|
+
if (next < 0)
|
|
81869
|
+
next = items.length - 1;
|
|
81870
|
+
else if (next >= items.length)
|
|
81871
|
+
next = 0;
|
|
81872
|
+
this.setActiveItem(items[next]);
|
|
81873
|
+
};
|
|
81874
|
+
this.setActiveByEdge = (edge) => {
|
|
81875
|
+
const items = this.getNavigableItems();
|
|
81876
|
+
if (!items.length)
|
|
81877
|
+
return;
|
|
81878
|
+
this.setActiveItem(edge === 'first' ? items[0] : items[items.length - 1]);
|
|
81879
|
+
};
|
|
81880
|
+
this.setActiveItem = (item, scroll = true) => {
|
|
81881
|
+
var _a;
|
|
81882
|
+
if (this.activeItem === item)
|
|
81883
|
+
return;
|
|
81884
|
+
(_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.removeAttribute('active');
|
|
81885
|
+
this.activeItem = item;
|
|
81886
|
+
if (!item) {
|
|
81887
|
+
this.activeId = undefined;
|
|
81888
|
+
return;
|
|
81889
|
+
}
|
|
81890
|
+
if (!item.id)
|
|
81891
|
+
item.id = `${this.menuId}-opt-${this.optIdSeq++}`;
|
|
81892
|
+
item.setAttribute('active', '');
|
|
81893
|
+
this.activeId = item.id;
|
|
81894
|
+
if (scroll)
|
|
81895
|
+
item.scrollIntoView({ block: 'nearest' });
|
|
81896
|
+
};
|
|
81897
|
+
/** Runs once per open, after the panel is in the DOM: highlight the first item and place focus. */
|
|
81898
|
+
this.initOpenState = () => {
|
|
81899
|
+
var _a;
|
|
81900
|
+
if (!this.open)
|
|
81901
|
+
return;
|
|
81902
|
+
if (this.openViaKeyboard) {
|
|
81903
|
+
const items = this.getNavigableItems();
|
|
81904
|
+
this.setActiveItem((this.openEdge === 'last' ? items[items.length - 1] : items[0]) || null, false);
|
|
81905
|
+
}
|
|
81906
|
+
else {
|
|
81907
|
+
this.setActiveItem(null);
|
|
81908
|
+
}
|
|
81909
|
+
this.openViaKeyboard = false;
|
|
81910
|
+
(_a = this.listEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
81911
|
+
};
|
|
81912
|
+
}
|
|
81913
|
+
get isAnchorMode() {
|
|
81914
|
+
return this.anchor !== undefined && this.anchor !== null && this.anchor !== '';
|
|
81915
|
+
}
|
|
81916
|
+
get effectivePosition() {
|
|
81917
|
+
if (this.alignment === 'start')
|
|
81918
|
+
return 'left';
|
|
81919
|
+
if (this.alignment === 'end')
|
|
81920
|
+
return 'right';
|
|
81921
|
+
return this.position;
|
|
81744
81922
|
}
|
|
81745
81923
|
openChangeHandle() {
|
|
81746
|
-
|
|
81924
|
+
this.syncOpenState();
|
|
81925
|
+
this.openChange.emit(!!this.open);
|
|
81926
|
+
}
|
|
81927
|
+
anchorChangeHandle() {
|
|
81928
|
+
this.teardownAnchor();
|
|
81929
|
+
this.setupAnchor();
|
|
81930
|
+
}
|
|
81931
|
+
/* region public API */
|
|
81932
|
+
async openMenu() {
|
|
81933
|
+
if (!this.disabled)
|
|
81934
|
+
this.open = true;
|
|
81935
|
+
}
|
|
81936
|
+
async closeMenu() {
|
|
81937
|
+
this.open = false;
|
|
81938
|
+
}
|
|
81939
|
+
async toggleMenu() {
|
|
81940
|
+
if (!this.disabled)
|
|
81941
|
+
this.open = !this.open;
|
|
81942
|
+
}
|
|
81943
|
+
/* endregion public API */
|
|
81944
|
+
syncOpenState() {
|
|
81945
|
+
var _a;
|
|
81946
|
+
if (this.disabled) {
|
|
81947
|
+
if (this.open)
|
|
81948
|
+
this.open = false;
|
|
81747
81949
|
return;
|
|
81950
|
+
}
|
|
81748
81951
|
if (this.open) {
|
|
81749
81952
|
this.el.addEventListener('itemClick', this.handleSelectItem);
|
|
81750
|
-
document.
|
|
81953
|
+
document.addEventListener('click', this.handleClickOutside, { capture: true });
|
|
81954
|
+
requestAnimationFrame(() => {
|
|
81955
|
+
if (this.isAnchorMode)
|
|
81956
|
+
this.createPopper();
|
|
81957
|
+
this.initOpenState();
|
|
81958
|
+
});
|
|
81751
81959
|
}
|
|
81752
81960
|
else {
|
|
81753
81961
|
this.removeListeners();
|
|
81962
|
+
this.destroyPopper();
|
|
81963
|
+
this.setActiveItem(null);
|
|
81964
|
+
}
|
|
81965
|
+
(_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', this.open ? 'true' : 'false');
|
|
81966
|
+
}
|
|
81967
|
+
/* region anchor mode */
|
|
81968
|
+
resolveAnchor() {
|
|
81969
|
+
if (!this.isAnchorMode)
|
|
81970
|
+
return null;
|
|
81971
|
+
if (typeof this.anchor === 'string')
|
|
81972
|
+
return document.querySelector(this.anchor);
|
|
81973
|
+
return this.anchor;
|
|
81974
|
+
}
|
|
81975
|
+
setupAnchor() {
|
|
81976
|
+
if (!this.isAnchorMode)
|
|
81977
|
+
return;
|
|
81978
|
+
this.anchorEl = this.resolveAnchor();
|
|
81979
|
+
if (this.anchorEl) {
|
|
81980
|
+
this.anchorEl.addEventListener('click', this.anchorClickHandler);
|
|
81981
|
+
this.anchorEl.setAttribute('aria-haspopup', 'menu');
|
|
81982
|
+
}
|
|
81983
|
+
}
|
|
81984
|
+
teardownAnchor() {
|
|
81985
|
+
if (this.anchorEl) {
|
|
81986
|
+
this.anchorEl.removeEventListener('click', this.anchorClickHandler);
|
|
81987
|
+
this.anchorEl.removeAttribute('aria-haspopup');
|
|
81988
|
+
this.anchorEl.removeAttribute('aria-expanded');
|
|
81989
|
+
this.anchorEl = null;
|
|
81990
|
+
}
|
|
81991
|
+
}
|
|
81992
|
+
popperPlacement() {
|
|
81993
|
+
switch (this.effectivePosition) {
|
|
81994
|
+
case 'right': return 'bottom-end';
|
|
81995
|
+
case 'center': return 'bottom';
|
|
81996
|
+
default: return 'bottom-start';
|
|
81997
|
+
}
|
|
81998
|
+
}
|
|
81999
|
+
createPopper() {
|
|
82000
|
+
const anchorEl = this.resolveAnchor();
|
|
82001
|
+
if (!anchorEl || !this.listEl)
|
|
82002
|
+
return;
|
|
82003
|
+
this.destroyPopper();
|
|
82004
|
+
this.popperInstance = createPopper(anchorEl, this.listEl, {
|
|
82005
|
+
strategy: 'fixed',
|
|
82006
|
+
placement: this.popperPlacement(),
|
|
82007
|
+
modifiers: [
|
|
82008
|
+
{ name: 'offset', options: { offset: [0, 4] } },
|
|
82009
|
+
{ name: 'flip', options: { fallbackPlacements: ['top-start', 'top-end', 'top'] } },
|
|
82010
|
+
{ name: 'preventOverflow', options: { boundary: 'viewport', padding: 8 } },
|
|
82011
|
+
],
|
|
82012
|
+
});
|
|
82013
|
+
}
|
|
82014
|
+
destroyPopper() {
|
|
82015
|
+
if (this.popperInstance) {
|
|
82016
|
+
this.popperInstance.destroy();
|
|
82017
|
+
this.popperInstance = undefined;
|
|
82018
|
+
}
|
|
82019
|
+
}
|
|
82020
|
+
/* endregion anchor mode */
|
|
82021
|
+
/* region keyboard navigation */
|
|
82022
|
+
handleKeyDown(ev) {
|
|
82023
|
+
var _a;
|
|
82024
|
+
if (this.disabled)
|
|
82025
|
+
return;
|
|
82026
|
+
if (!this.open) {
|
|
82027
|
+
if (['ArrowDown', 'ArrowUp', 'Enter', ' ', 'Spacebar'].includes(ev.key)) {
|
|
82028
|
+
ev.preventDefault();
|
|
82029
|
+
this.openViaKeyboard = true;
|
|
82030
|
+
this.openEdge = ev.key === 'ArrowUp' ? 'last' : 'first';
|
|
82031
|
+
this.open = true;
|
|
82032
|
+
}
|
|
82033
|
+
return;
|
|
82034
|
+
}
|
|
82035
|
+
switch (ev.key) {
|
|
82036
|
+
case 'ArrowDown':
|
|
82037
|
+
ev.preventDefault();
|
|
82038
|
+
this.moveActive(1);
|
|
82039
|
+
break;
|
|
82040
|
+
case 'ArrowUp':
|
|
82041
|
+
ev.preventDefault();
|
|
82042
|
+
this.moveActive(-1);
|
|
82043
|
+
break;
|
|
82044
|
+
case 'Home':
|
|
82045
|
+
ev.preventDefault();
|
|
82046
|
+
this.setActiveByEdge('first');
|
|
82047
|
+
break;
|
|
82048
|
+
case 'End':
|
|
82049
|
+
ev.preventDefault();
|
|
82050
|
+
this.setActiveByEdge('last');
|
|
82051
|
+
break;
|
|
82052
|
+
case 'Enter':
|
|
82053
|
+
case ' ':
|
|
82054
|
+
case 'Spacebar':
|
|
82055
|
+
ev.preventDefault();
|
|
82056
|
+
(_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.click(); // reuse the mouse-click selection path (also fires routerLink/href)
|
|
82057
|
+
break;
|
|
82058
|
+
case 'Escape':
|
|
82059
|
+
ev.preventDefault();
|
|
82060
|
+
ev.stopPropagation();
|
|
82061
|
+
this.open = false;
|
|
82062
|
+
this.restoreFocus();
|
|
82063
|
+
break;
|
|
82064
|
+
case 'Tab':
|
|
82065
|
+
this.open = false; // let focus leave naturally
|
|
82066
|
+
break;
|
|
81754
82067
|
}
|
|
81755
82068
|
}
|
|
82069
|
+
restoreFocus() {
|
|
82070
|
+
var _a, _b;
|
|
82071
|
+
if (this.isAnchorMode)
|
|
82072
|
+
(_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
82073
|
+
else
|
|
82074
|
+
(_b = this.triggerButtonEl) === null || _b === void 0 ? void 0 : _b.focus();
|
|
82075
|
+
}
|
|
82076
|
+
/* endregion keyboard navigation */
|
|
81756
82077
|
render() {
|
|
81757
|
-
const
|
|
81758
|
-
|
|
82078
|
+
const list = (h("div", { class: { list: true, open: this.open, [`position-${this.effectivePosition}`]: !this.isAnchorMode }, role: "menu", tabindex: -1, "aria-orientation": "vertical", "aria-activedescendant": this.activeId, ref: (el) => (this.listEl = el) }, h("slot", null)));
|
|
82079
|
+
if (this.isAnchorMode) {
|
|
82080
|
+
return (h(Host, { class: { 'xv-overflow-menu': true, anchored: true }, size: this.size }, list));
|
|
82081
|
+
}
|
|
82082
|
+
const button = (h("button", { class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": this.open ? 'true' : 'false', ref: (el) => (this.triggerButtonEl = el) }, h("slot", { name: "trigger" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, h("path", { d: "M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z" })))));
|
|
82083
|
+
return (h(Host, { class: "xv-overflow-menu", size: this.size }, this.tooltip ? h("xv-tooltip-v2", { message: this.tooltip }, button) : button, list));
|
|
81759
82084
|
}
|
|
81760
82085
|
componentDidLoad() {
|
|
81761
|
-
this.
|
|
82086
|
+
this.setupAnchor();
|
|
82087
|
+
this.syncOpenState();
|
|
81762
82088
|
}
|
|
81763
82089
|
disconnectedCallback() {
|
|
81764
82090
|
this.removeListeners();
|
|
82091
|
+
this.destroyPopper();
|
|
82092
|
+
this.teardownAnchor();
|
|
81765
82093
|
}
|
|
81766
82094
|
get el() { return getElement(this); }
|
|
81767
82095
|
static get watchers() { return {
|
|
81768
82096
|
"open": [{
|
|
81769
82097
|
"openChangeHandle": 0
|
|
82098
|
+
}],
|
|
82099
|
+
"anchor": [{
|
|
82100
|
+
"anchorChangeHandle": 0
|
|
81770
82101
|
}]
|
|
81771
82102
|
}; }
|
|
81772
82103
|
};
|
|
81773
82104
|
XvOverflowMenu.style = xvOverflowMenuCss();
|
|
81774
82105
|
|
|
81775
|
-
const xvOverflowMenuItemCss = () =>
|
|
82106
|
+
const xvOverflowMenuItemCss = () => `@charset "UTF-8";.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;background-color:transparent;transition:200ms ease background-color;user-select:none;text-align:left;color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:128.571%;letter-spacing:0.16px}.item_inner{display:flex;align-items:center;gap:8px;width:100%;color:inherit;font:inherit;text-decoration:none}.item_icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;line-height:0}.item_label{flex:1;min-width:0}:host(:not([disabled]):hover){cursor:pointer;background-color:var(--layer-hover-01, #E9E9E9)}:host(:not([disabled]):active){background-color:var(--layer-active-01, #D1D1D1)}:host(:not([disabled]):focus),:host(:not([disabled])[active]){outline:none;box-shadow:inset 0 0 0 2px var(--focus, #273435)}:host([variant=danger]){background-color:var(--text-error, #D62512);color:var(--text-on-color, #FFF)}:host([variant=danger]:not([disabled]):hover),:host([variant=danger]:not([disabled])[active]),:host([variant=danger]:not([disabled]):focus){background-color:var(--support-error, #F1290E)}:host([variant=danger]:not([disabled]):active){background-color:var(--text-error, #D62512)}:host([variant=ghost]),:host([variant=ghost]:hover),:host([variant=ghost]:active){cursor:default;background-color:var(--background);color:var(--text-primary)}:host([disabled]){background-color:var(--layer-01, #F7F7F7) !important;color:var(--text-disabled) !important;box-shadow:none !important;cursor:not-allowed}:host([divider]){border-top:1px solid var(--border-subtle-01, #E0E0E0)}`;
|
|
81776
82107
|
|
|
81777
82108
|
const XvOverflowMenuItem = class {
|
|
81778
82109
|
constructor(hostRef) {
|
|
@@ -81781,15 +82112,33 @@ const XvOverflowMenuItem = class {
|
|
|
81781
82112
|
this.disabled = false;
|
|
81782
82113
|
this.variant = OverflowMenuVariant.DEFAULT;
|
|
81783
82114
|
this.clickable = true;
|
|
82115
|
+
/** Draws a separator line above the item (e.g. before a "Logout" action). */
|
|
82116
|
+
this.divider = false;
|
|
82117
|
+
this.hasIcon = false;
|
|
82118
|
+
this.hasIconEnd = false;
|
|
82119
|
+
}
|
|
82120
|
+
componentWillLoad() {
|
|
82121
|
+
this.hasIcon = !!this.el.querySelector('[slot="icon-left"]');
|
|
82122
|
+
this.hasIconEnd = !!this.el.querySelector('[slot="icon-right"]');
|
|
81784
82123
|
}
|
|
81785
82124
|
handleClick(event) {
|
|
81786
82125
|
if (this.disabled || !this.clickable)
|
|
81787
82126
|
return;
|
|
82127
|
+
// Intentionally no preventDefault/stopPropagation: the native click must keep bubbling so a
|
|
82128
|
+
// consumer's routerLink / (click) / href placed directly on this element still fires.
|
|
81788
82129
|
this.itemClick.emit({ event, value: this.value });
|
|
81789
82130
|
}
|
|
81790
82131
|
render() {
|
|
81791
|
-
|
|
82132
|
+
// Ghost items carry arbitrary block content (e.g. header notification rows). Keep them as a plain
|
|
82133
|
+
// slot so that layout is untouched.
|
|
82134
|
+
if (this.variant === OverflowMenuVariant.GHOST) {
|
|
82135
|
+
return (h(Host, { class: "xv-overflow-menu-item", role: "menuitem", "aria-disabled": this.disabled ? 'true' : null }, h("slot", null)));
|
|
82136
|
+
}
|
|
82137
|
+
const useAnchor = !!this.href && !this.disabled;
|
|
82138
|
+
const InnerTag = useAnchor ? 'a' : 'div';
|
|
82139
|
+
return (h(Host, { class: "xv-overflow-menu-item", role: "menuitem", "aria-disabled": this.disabled ? 'true' : null }, h(InnerTag, { class: "item_inner", href: useAnchor ? this.href : null, target: useAnchor ? this.target : null, tabindex: -1 }, this.hasIcon && (h("span", { class: "item_icon item_icon--left" }, h("slot", { name: "icon-left" }))), h("span", { class: "item_label" }, h("slot", null)), this.hasIconEnd && (h("span", { class: "item_icon item_icon--right" }, h("slot", { name: "icon-right" }))))));
|
|
81792
82140
|
}
|
|
82141
|
+
get el() { return getElement(this); }
|
|
81793
82142
|
};
|
|
81794
82143
|
XvOverflowMenuItem.style = xvOverflowMenuItemCss();
|
|
81795
82144
|
|
|
@@ -81886,7 +82235,7 @@ const XvPagination = class {
|
|
|
81886
82235
|
this.observer.disconnect();
|
|
81887
82236
|
}
|
|
81888
82237
|
render() {
|
|
81889
|
-
return (h(Host, { key: '
|
|
82238
|
+
return (h(Host, { key: '7c5589c5954a364956c471c8b214f7e5c6e2d217', class: { block: this.block, [this.currentVariant]: true, [this.size]: !!this.size } }, this.currentVariant === 'full' && (h("div", { key: '72a9851f3c53fca042f3a5cbefc87e2a4beddd8d', class: "block" }, h("select", { key: '31c16503e23de7c5e6b03b80db3df72a7bf68edb', class: "options-select", name: "options", onChange: this.handleItemsPerPageChange }, this.itemsPerPageOptions.map((v) => h("option", { value: v }, v))))), this.currentVariant === 'full' && (h("span", { key: 'e5d45975abec39806344a36b518129d327a589d5', class: "block block_full" }, `${(this.page - 1) * this.itemsPerPage + 1} – ${Math.min(this.page * this.itemsPerPage, this.totalItems)} von ${this.totalItems} Einträgen`)), this.currentVariant === 'full' && (h("div", { key: '0a97d5ec8e6163ec5f2acd1f613469be984ad829', class: "block" }, h("select", { key: 'f9e2ee52b8243e738e899a32578412853bf0dae3', class: "options-select", name: "pages", onChange: this.handlePageSelectChange }, Array.from({ length: this.total }, (_, i) => (h("option", { selected: this.page === i + 1, value: i + 1 }, i + 1)))), h("span", { key: '95b453e07438aac43c85cf0260415c4781517c24' }, "von ", this.total, " Seiten"))), this.currentVariant === 'compact' && h("span", { key: '591dc8b9ef95f0a94604937a6c3fd23ea5624850', class: "block" }, "Seite ", this.page), h("xv-button-v2", { key: 'd06344e19ef7a0cfc1cf3136c98ed579542a86f2', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page - 1), disabled: this.page <= 1 }, h("span", { key: '1e4dbe879f5fabfcc2ca4af2859124e99491ebae', slot: "icon-left", class: "icon icon_prev" })), this.currentVariant === 'regular' && (h("ul", { key: '8deafa7283a58edc710c5298821878c7de89d5bd', class: "list" }, this.visiblePagesWithDots.map((page) => (h("li", { class: { active: this.page === page } }, page === 'dots-start' ? (h("div", { class: "list_dots" }, h("xv-button-v2", { variant: "ghost", size: this.size, tabindex: -1 }, h("span", { slot: "icon-left", class: "list_dots__icon" }, "...")), h("select", { name: "start", onChange: this.handlePageSelectChange }, Array.from({ length: this.page - 3 }, (_, i) => (h("option", { value: i + 2 }, i + 2)))))) : page === 'dots-end' ? (h("div", { class: "list_dots" }, h("xv-button-v2", { variant: "ghost", size: this.size, tabindex: -1 }, h("span", { slot: "icon-left", class: "list_dots__icon" }, "...")), h("select", { name: "end", onChange: this.handlePageSelectChange }, Array.from({ length: this.total - (this.page + 2) }, (_, i) => (h("option", { value: i + this.page + 2 }, i + this.page + 2)))))) : (h("xv-button-v2", { variant: "ghost", size: this.size, disabled: this.page === page, onClick: () => this.handlePageChange(page) }, h("span", { class: "list_page", slot: "icon-left" }, page)))))))), h("xv-button-v2", { key: '14054db39c36ea71b040fbd40d22b109e46ecb27', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page + 1), disabled: this.page >= this.total }, h("span", { key: 'a42a8b4bd9f297d99b973ea016b98250f3498130', slot: "icon-left", class: "icon icon_next" }))));
|
|
81890
82239
|
}
|
|
81891
82240
|
get el() { return getElement(this); }
|
|
81892
82241
|
};
|
|
@@ -81955,7 +82304,7 @@ const XvProgressIndicator = class {
|
|
|
81955
82304
|
this.updateChildItems();
|
|
81956
82305
|
}
|
|
81957
82306
|
render() {
|
|
81958
|
-
return (h(Host, { key: '
|
|
82307
|
+
return (h(Host, { key: '3fcba0ade362eac7bde5ed929617608425e7e386', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: '297b19bda35040fd8d51457b16cce7a09af8fb84' })));
|
|
81959
82308
|
}
|
|
81960
82309
|
get el() { return getElement(this); }
|
|
81961
82310
|
static get watchers() { return {
|
|
@@ -81974,7 +82323,7 @@ const XvProgressIndicatorItem = class {
|
|
|
81974
82323
|
this.status = PROGRESS_ITEM_STATUS.NO_STARTED;
|
|
81975
82324
|
}
|
|
81976
82325
|
render() {
|
|
81977
|
-
return (h(Host, { key: '
|
|
82326
|
+
return (h(Host, { key: '33ae32003398c17a6b31ea573f05d6cd33b164c1', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: '560ce3943bf693aa586a9e6df458910b66dad315', class: "line" }), h("span", { key: 'fab068e39c9e79c78b08fc145978d0e266c52ef0', class: "icon" }, h("svg", { key: '9c23f9e6e1b746b73771eb70bea8b2e5d02ec3d0', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: '852ef6777fb171fdde85a82fd18b2ec8bc4be96f', fill: "currentColor", d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }))), h("p", { key: 'b873572c5b27c14a182e5adad80c6d07f45d84f2', class: "label" }, h("slot", { key: '480bb80167ad0e136577083b99a411ce080aa88e' }))));
|
|
81978
82327
|
}
|
|
81979
82328
|
get el() { return getElement(this); }
|
|
81980
82329
|
};
|
|
@@ -82006,12 +82355,12 @@ const XvRadio = class {
|
|
|
82006
82355
|
}
|
|
82007
82356
|
}
|
|
82008
82357
|
render() {
|
|
82009
|
-
return (h("div", { key: '
|
|
82358
|
+
return (h("div", { key: '9847de4eae9fd57ad9292e5796232f7ec3c3e0c7', class: {
|
|
82010
82359
|
'xv-radio': true,
|
|
82011
82360
|
'xv-radio--reverse': this.reverse,
|
|
82012
82361
|
'xv-radio--block': this.block,
|
|
82013
82362
|
[`xv-radio--size-${this.size}`]: !!this.size,
|
|
82014
|
-
} }, this.label && h("p", { key: '
|
|
82363
|
+
} }, this.label && h("p", { key: '85abe464f3c4810bb2809aa256d7a8e42c074e1c', class: "xv-radio_label" }, this.label), h("label", { key: '088ab7d61d11b0ca5fc40bdc4ab7f4db07821309', class: { 'xv-radio_container': true, disabled: this.disabled } }, h("div", { key: '4eae897aaed7152d15d4f2fc5919f2c743041d85', class: { 'xv-radio_input': true, 'xv-radio_input--error': !!this.error || this.error === '' } }, h("input", { key: '9f78ff31e667f9c12b86da027db29735d09b7532', ref: el => (this.inputEl = el), type: "radio", name: this.name, value: this.value, checked: this.checked, readonly: this.readonly, disabled: this.disabled }), h("span", { key: 'dcecc4aec28c50d13ccd1c45b18b106b8f99ef93', class: "xv-radio_input__mark" })), h("span", { key: '52e51eb01131ecdecb5047f1990ed120aa3c12d7', class: "xv-radio_container__label" }, h("slot", { key: 'cb9bbb0d79f29a268828204f482a27a49d9bd798' }))), this.error && typeof this.error === 'string' && (h("span", { key: 'c085f9c2b913cb4c27c4f9fe88b8941877eb00c4', class: "xv-radio_msg xv-radio_msg--error" }, h("span", { key: '16d52c226306e20272b08a7dbdeda4ff8ebb4688', class: "xv-radio_msg__status", "aria-hidden": "true" }, "!"), this.error)), this.warning && typeof this.warning === 'string' && (h("span", { key: '7f67291cc785e20762960a1e183245927e96797c', class: "xv-radio_msg xv-radio_msg--warning" }, h("span", { key: '9546dfa2c8faf77d4ec949cba0c16a74bd5e8595', class: "xv-radio_msg__status", "aria-hidden": "true" }, "\u26A0"), this.warning)), h("slot", { key: '59a998219c4e88dfb7fce33fa19a4bced0146b8d', name: "info" })));
|
|
82015
82364
|
}
|
|
82016
82365
|
connectedCallback() {
|
|
82017
82366
|
var _a;
|
|
@@ -82095,7 +82444,7 @@ const XvSlider = class {
|
|
|
82095
82444
|
this.setValue(this.min);
|
|
82096
82445
|
}
|
|
82097
82446
|
render() {
|
|
82098
|
-
return (h(Host, { key: '
|
|
82447
|
+
return (h(Host, { key: '65f76b767cc84856069973e15e0382a960e95d86', class: { disabled: this.disabled, readonly: this.readonly } }, this.label && h("label", { key: '72090f7ebd313d9c0787bfe4c52c7f100605fea6', class: "label" }, this.label), h("div", { key: '21e5907cdf8d0fc5eb8c1a715e0c19c0f43ca03a', class: "control" }, h("span", { key: '5b2714841a384961abeeadb714f869ce975a047f', class: "control_label" }, this.min), h("input", { key: '314b30eaa27c94b85d746bdb1b08650e65189653', type: "range", disabled: this.disabled || this.readonly, readonly: this.readonly, name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, style: { backgroundSize: `${((this.value - this.min) * 100) / (this.max - this.min)}% 100%` } }), h("span", { key: '1fd6ebcf2d08c1b86dcddd0cba504c874821d122', class: "control_label" }, this.max), !this.notEditable && (h("input", { key: 'bd6d3809e9e09dddd067eedd927279700016ff49', type: "number", disabled: this.disabled, readonly: this.readonly, name: `${this.name}-number-input`, step: this.step, min: this.min, max: this.max, value: this.value, onInput: this.handleNumberInput, onBlur: this.handleNumberBlur })))));
|
|
82099
82448
|
}
|
|
82100
82449
|
static get formAssociated() { return true; }
|
|
82101
82450
|
};
|
|
@@ -82110,7 +82459,7 @@ const XvTab = class {
|
|
|
82110
82459
|
this.loading = false;
|
|
82111
82460
|
}
|
|
82112
82461
|
render() {
|
|
82113
|
-
return (h(Host, { key: '
|
|
82462
|
+
return (h(Host, { key: '7b49de1203b60a0a7b1b25552907eb8339f001ec', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
|
|
82114
82463
|
}
|
|
82115
82464
|
};
|
|
82116
82465
|
XvTab.style = xvTabCss();
|
|
@@ -82150,7 +82499,7 @@ const XvTable = class {
|
|
|
82150
82499
|
.join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
|
|
82151
82500
|
}
|
|
82152
82501
|
render() {
|
|
82153
|
-
return (h(Host, { key: '
|
|
82502
|
+
return (h(Host, { key: '3ba40f0c65621b3d748e21ef79d64f7fcaff7241', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: '157beb3344e8c5ecd87e54eaf8b08448fe6bd573', name: "title" }, !!this.el.title && h("h2", { key: '95b0ee401a1168c696da0d457d89194c886743f2', class: "xv-table-title" }, this.el.title)), h("slot", { key: '654a069ce7f51bb9d073ea503b6cf7137b80cf2b', name: "toolbar" }), h("div", { key: 'bf4fdac5b559f406d9d907252ef8acfbeb397441', class: "xv-table" }, h("div", { key: '714eca6ae436694503b6af2eb580868d3788b191', class: "batch-actions" }, h(Fragment, { key: '8ac8c13cf22de4b14507d0176cf85522abb1c8b5' }, h("div", { key: '768759186883cec8dbd6ba52dba2e49d94949936', class: "batch-actions_content" }, h("slot", { key: 'bf6b50edd02317f5cedeb06a95930ef251f5fd2c', name: "batch" })), h("p", { key: 'b71c2c31bf17acc4c9582aa23f909d9991311f00', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("div", { key: '7b53ba114ec7c9ae56c10e5f85eee416c29428ed', class: "xv-table_wrapper" }, h("slot", { key: '2e9a401645d0b0a650f7df8d276b5dc8e6b264cc' }), h("slot", { key: '2d3cd237aea826b672da473ada6e028b37f22a03', name: "footer" })), !!this.loading && (h("div", { key: '61918a11ff660deac23575a04a3bf44c253ace41', class: "xv-table_loading" }, h("xv-loader-v2", { key: 'bc3108a52d5f21ba690a25568fe6b8f2b9ea33ac', size: SIZE_VAR.LG }))))));
|
|
82154
82503
|
}
|
|
82155
82504
|
componentWillLoad() {
|
|
82156
82505
|
this.setColsSizeTemplate();
|
|
@@ -82191,7 +82540,7 @@ const XvTableCell = class {
|
|
|
82191
82540
|
}
|
|
82192
82541
|
;
|
|
82193
82542
|
render() {
|
|
82194
|
-
return (h(Host, { key: '
|
|
82543
|
+
return (h(Host, { key: '6869366153dd26000e2440df9109daa9df77e777' }, h("slot", { key: '33baf3aa330babd0e3ee07a6455d83ddf9d3638b' })));
|
|
82195
82544
|
}
|
|
82196
82545
|
get el() { return getElement(this); }
|
|
82197
82546
|
};
|
|
@@ -82212,7 +82561,7 @@ const XvTableExpand = class {
|
|
|
82212
82561
|
};
|
|
82213
82562
|
}
|
|
82214
82563
|
render() {
|
|
82215
|
-
return (h(Host, { key: '
|
|
82564
|
+
return (h(Host, { key: 'ccc90f12cd72b5be45d10764413fbf289a3f0811' }, h("button", { key: '01b2a423cfd638c2791e643ba23e7204d6537d43', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: '805d0c9f40a2649d69876f3b2d277e16a9283dc6', name: XV_EXPANDABLE_KEY }), h("div", { key: 'cb98360d80b2bef84c6c1917caca61b44f7837e8', class: { expandableContent: true, open: this.open } }, h("slot", { key: '82b80292c259a05f9c493be080c8006f154b6efb' }))));
|
|
82216
82565
|
}
|
|
82217
82566
|
componentDidLoad() {
|
|
82218
82567
|
setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
|
|
@@ -82267,7 +82616,7 @@ const XvTableRow = class {
|
|
|
82267
82616
|
}
|
|
82268
82617
|
}
|
|
82269
82618
|
render() {
|
|
82270
|
-
return (h(Host, { key: '
|
|
82619
|
+
return (h(Host, { key: '84abfd18de14b5e6988b99fad17f46dcef62900a' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: '901ec86f5753adf2f41f6fae88c816bf462ffd45', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: 'f00b54d81da7148b35b93e60711d7b3b35096af6', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (h("input", { key: '8363e1d39f4280841618c4ff50d75638af674879', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: '6a8073f779bf9644d757a620253d29167b458ffb' })));
|
|
82271
82620
|
}
|
|
82272
82621
|
componentWillLoad() {
|
|
82273
82622
|
this.setInitialAttrs();
|
|
@@ -82388,7 +82737,7 @@ const XvTabs = class {
|
|
|
82388
82737
|
};
|
|
82389
82738
|
XvTabs.style = xvTabsCss();
|
|
82390
82739
|
|
|
82391
|
-
const xvTagComboboxCss = () => `.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;font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;width:100%;box-sizing:border-box;position:relative;text-align:left}:host .label{display:block;margin-bottom:var(--spacing-03);color:var(--text-secondary, #515151);font-family:var(--ff-body), sans-serif;font-size:var(--fz-sm, 12px);font-style:normal;font-weight:400;line-height:var(--fz-md);letter-spacing:0.32px}:host .control{overflow:auto;border-radius:3px;border:1px solid var(--border-subtle-01);outline:2px solid transparent;padding-block:var(--spacing-02);padding-inline:var(--spacing-05);box-sizing:border-box;display:flex;align-items:center;min-height:40px;cursor:text}:host .control:focus-within{outline:2px solid var(--focus)}:host .control--error{outline-color:var(--support-error)}:host .control--readonly{border-radius:0;border-top-width:0;border-left-width:0;border-right-width:0;outline-color:transparent}:host .control--disabled{opacity:0.6;cursor:not-allowed}:host .control-chips{display:flex;align-items:center;flex-wrap:wrap;gap:6px;width:100%}:host .control-input{flex:1;min-width:120px;border:none;outline:none;font-size:inherit;color:inherit;background:transparent;padding:0;margin:0}:host .control-input:disabled{cursor:not-allowed}:host .control-input::placeholder{color:var(--text-placeholder)}:host .message{margin:var(--spacing-02) 0 0;color:var(--text-helper, #646464);font-size:var(--fz-sm, 12px);font-style:normal;font-weight:400;line-height:var(--fz-md, 16px);letter-spacing:0.32px}:host .message--error{color:var(--text-error)}:host .message--warning{color:var(--text-secondary, #515151)}:host .suggestions{position:absolute;top:100%;left:0;right:0;background:var(--layer-02, #fff);border-radius:3px;border:1px solid var(--border-subtle-01);box-shadow:0 6px 18px rgba(0, 0, 0, 0.06);max-height:220px;overflow:auto;z-index:50;margin:var(--spacing-01) 0 0;padding:var(--spacing-03) 0}:host .suggestions-opt{padding:8px 12px;cursor:pointer;display:flex;align-items:center}:host .suggestions-opt :hover,:host .suggestions-opt--highlight{background-color:var(--layer-hover-02, #F7F7F7)}:host .suggestions-opt-content{display:flex;align-items:center;gap:8px}:host .suggestions-opt-content--color{width:12px;height:12px;border-radius:3px;border:1px solid rgba(0, 0, 0, 0.06)}:host .suggestions-opt-content--label strong{font-weight:700}:host([size=xs]){font-size:0.8em}:host([size=xs]) .control{min-height:16px}:host([size=sm]){font-size:0.9em}:host([size=sm]) .control{min-height:32px}:host([size=lg]){font-size:1.2em}:host([size=lg]) .control{min-height:48px}:host([size=xl]){font-size:1.4em}:host([size=xl]) .control{min-height:60px}`;
|
|
82740
|
+
const xvTagComboboxCss = () => `.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;font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;width:100%;box-sizing:border-box;position:relative;text-align:left}:host .label{display:block;margin-bottom:var(--spacing-03);color:var(--text-secondary, #515151);font-family:var(--ff-body), sans-serif;font-size:var(--fz-sm, 12px);font-style:normal;font-weight:400;line-height:var(--fz-md);letter-spacing:0.32px}:host .control{overflow:auto;border-radius:3px;border:1px solid var(--border-subtle-01);outline:2px solid transparent;padding-block:var(--spacing-02);padding-inline:var(--spacing-05);box-sizing:border-box;display:flex;align-items:center;min-height:40px;cursor:text}:host .control:focus-within{outline:2px solid var(--focus)}:host .control--error{outline-color:var(--support-error)}:host .control--readonly{border-radius:0;border-top-width:0;border-left-width:0;border-right-width:0;outline-color:transparent}:host .control--disabled{opacity:0.6;cursor:not-allowed}:host .control-chips{display:flex;align-items:center;flex-wrap:wrap;gap:6px;width:100%}:host .control-loader{flex:0 0 auto;display:inline-flex;align-items:center;margin-left:var(--spacing-03);pointer-events:none}:host .control-input{flex:1;min-width:120px;border:none;outline:none;font-size:inherit;color:inherit;background:transparent;padding:0;margin:0}:host .control-input:disabled{cursor:not-allowed}:host .control-input::placeholder{color:var(--text-placeholder)}:host .message{margin:var(--spacing-02) 0 0;color:var(--text-helper, #646464);font-size:var(--fz-sm, 12px);font-style:normal;font-weight:400;line-height:var(--fz-md, 16px);letter-spacing:0.32px}:host .message--error{color:var(--text-error)}:host .message--warning{color:var(--text-secondary, #515151)}:host .suggestions{position:absolute;top:100%;left:0;right:0;background:var(--layer-02, #fff);border-radius:3px;border:1px solid var(--border-subtle-01);box-shadow:0 6px 18px rgba(0, 0, 0, 0.06);max-height:220px;overflow:auto;z-index:50;margin:var(--spacing-01) 0 0;padding:var(--spacing-03) 0}:host .suggestions-opt{padding:8px 12px;cursor:pointer;display:flex;align-items:center}:host .suggestions-opt :hover,:host .suggestions-opt--highlight{background-color:var(--layer-hover-02, #F7F7F7)}:host .suggestions-opt-content{display:flex;align-items:center;gap:8px}:host .suggestions-opt-content--color{width:12px;height:12px;border-radius:3px;border:1px solid rgba(0, 0, 0, 0.06)}:host .suggestions-opt-content--label strong{font-weight:700}:host([size=xs]){font-size:0.8em}:host([size=xs]) .control{min-height:16px}:host([size=sm]){font-size:0.9em}:host([size=sm]) .control{min-height:32px}:host([size=lg]){font-size:1.2em}:host([size=lg]) .control{min-height:48px}:host([size=xl]){font-size:1.4em}:host([size=xl]) .control{min-height:60px}`;
|
|
82392
82741
|
|
|
82393
82742
|
const XvTagCombobox = class {
|
|
82394
82743
|
constructor(hostRef) {
|
|
@@ -82403,6 +82752,9 @@ const XvTagCombobox = class {
|
|
|
82403
82752
|
this.allowCreate = true;
|
|
82404
82753
|
this.maxSuggestions = 200;
|
|
82405
82754
|
this.disabled = false;
|
|
82755
|
+
// Shows an inline spinner and blocks interaction while an external save is in flight
|
|
82756
|
+
// (e.g. assigning/unassigning tags) — without the greyed-out look of `disabled`.
|
|
82757
|
+
this.loading = false;
|
|
82406
82758
|
this.readonly = false;
|
|
82407
82759
|
this.error = false;
|
|
82408
82760
|
this.warning = false;
|
|
@@ -82424,7 +82776,7 @@ const XvTagCombobox = class {
|
|
|
82424
82776
|
[SIZE_VAR.XL]: 'lg',
|
|
82425
82777
|
};
|
|
82426
82778
|
this.onKeyDown = (ev) => {
|
|
82427
|
-
if (this.disabled || this.readonly)
|
|
82779
|
+
if (this.disabled || this.readonly || this.loading)
|
|
82428
82780
|
return;
|
|
82429
82781
|
const key = ev.key;
|
|
82430
82782
|
if (key === 'ArrowDown') {
|
|
@@ -82482,10 +82834,13 @@ const XvTagCombobox = class {
|
|
|
82482
82834
|
this.selected = this.valueToOpts(this.value);
|
|
82483
82835
|
this.recomputeFiltered();
|
|
82484
82836
|
this.onDocumentClick = this.onDocumentClick.bind(this);
|
|
82485
|
-
|
|
82837
|
+
// Capture phase: some sibling components (xv-datepicker, xv-overflow-menu, xv-link) call
|
|
82838
|
+
// stopPropagation() on click, which would prevent a bubble-phase listener from ever firing
|
|
82839
|
+
// when the user clicks outside onto them. Capture runs before any descendant can stop it.
|
|
82840
|
+
window.addEventListener('click', this.onDocumentClick, true);
|
|
82486
82841
|
}
|
|
82487
82842
|
disconnectedCallback() {
|
|
82488
|
-
window.removeEventListener('click', this.onDocumentClick);
|
|
82843
|
+
window.removeEventListener('click', this.onDocumentClick, true);
|
|
82489
82844
|
}
|
|
82490
82845
|
watchOptions() {
|
|
82491
82846
|
this.normalizedOptions = this.normalizeOptions(this.options);
|
|
@@ -82531,6 +82886,8 @@ const XvTagCombobox = class {
|
|
|
82531
82886
|
this.filtered = [...starts, ...contains].slice(0, this.maxSuggestions);
|
|
82532
82887
|
}
|
|
82533
82888
|
onInput(e) {
|
|
82889
|
+
if (this.loading)
|
|
82890
|
+
return;
|
|
82534
82891
|
const t = e.target;
|
|
82535
82892
|
this.inputValue = t.value;
|
|
82536
82893
|
this.inputChange.emit(this.inputValue);
|
|
@@ -82539,7 +82896,7 @@ const XvTagCombobox = class {
|
|
|
82539
82896
|
this.recomputeFiltered();
|
|
82540
82897
|
}
|
|
82541
82898
|
selectOption(opt) {
|
|
82542
|
-
if (this.disabled)
|
|
82899
|
+
if (this.disabled || this.loading)
|
|
82543
82900
|
return;
|
|
82544
82901
|
if (!this.selected.find(s => s.value === opt.value)) {
|
|
82545
82902
|
this.selected = [...this.selected, opt];
|
|
@@ -82563,7 +82920,7 @@ const XvTagCombobox = class {
|
|
|
82563
82920
|
removeTag(idx, e) {
|
|
82564
82921
|
var _a;
|
|
82565
82922
|
e === null || e === void 0 ? void 0 : e.preventDefault();
|
|
82566
|
-
if (this.disabled)
|
|
82923
|
+
if (this.disabled || this.loading)
|
|
82567
82924
|
return;
|
|
82568
82925
|
this.selected = this.selected.filter((_, i) => i !== idx);
|
|
82569
82926
|
this.emitChange();
|
|
@@ -82601,13 +82958,13 @@ const XvTagCombobox = class {
|
|
|
82601
82958
|
];
|
|
82602
82959
|
}
|
|
82603
82960
|
onOpen() {
|
|
82604
|
-
if (this.disabled || this.readonly)
|
|
82961
|
+
if (this.disabled || this.readonly || this.loading)
|
|
82605
82962
|
return;
|
|
82606
82963
|
this.open = true;
|
|
82607
82964
|
}
|
|
82608
82965
|
blockClick() {
|
|
82609
82966
|
var _a;
|
|
82610
|
-
if (this.disabled || this.readonly)
|
|
82967
|
+
if (this.disabled || this.readonly || this.loading)
|
|
82611
82968
|
return;
|
|
82612
82969
|
(_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
82613
82970
|
this.onOpen();
|
|
@@ -82625,12 +82982,12 @@ const XvTagCombobox = class {
|
|
|
82625
82982
|
const suggestionsVisible = this.open && this.filtered.length > 0;
|
|
82626
82983
|
const ariaOwns = suggestionsVisible ? `${this.uid}-listbox` : undefined;
|
|
82627
82984
|
const activedesc = this.highlighted >= 0 ? this.optionId(this.highlighted) : undefined;
|
|
82628
|
-
return (h(Host, { key: '
|
|
82985
|
+
return (h(Host, { key: '3a14655c87e6d715566d304395091bdcfe742652', class: "xv-combobox", part: "root", size: this.size }, this.label && h("label", { key: '1e51067d648b448ea1367afaeddf597ee23ba4a4', class: "label" }, this.label), h("div", { key: 'b17d0ec6cfef073a893f955764608cdeead8937c', class: {
|
|
82629
82986
|
'control': true,
|
|
82630
82987
|
'control--disabled': this.disabled,
|
|
82631
82988
|
'control--error': !!this.error,
|
|
82632
82989
|
'control--readonly': !!this.readonly,
|
|
82633
|
-
}, onClick: () => this.blockClick() }, h("div", { key: '
|
|
82990
|
+
}, onClick: () => this.blockClick() }, h("div", { key: 'b6707597986341dc70924ba077ed30d5529b7814', class: "control-chips", role: "list" }, this.selected.map((s, i) => (h("xv-tag-v2", { role: "listitem", part: "chip", "data-value": s.value, size: this.COMPARE_TAG_SIZE[this.size], disabled: this.disabled, bg: (s === null || s === void 0 ? void 0 : s.bg) || 'var(--layer-accent-01, #F7F7F7)', color: (s === null || s === void 0 ? void 0 : s.color) || 'var(--text-primary, #333)', closeable: !this.readonly, onCloseClick: ({ detail }) => this.removeTag(i, detail) }, s.label))), h("input", { key: '02275e2394eeb0a835ab96d7820025813ff8daf4', ref: (el) => (this.inputEl = el), class: "control-input", readonly: this.readonly, placeholder: this.selected.length ? '' : this.placeholder, value: this.inputValue, onInput: (e) => this.onInput(e), onKeyDown: (e) => this.onKeyDown(e), onFocus: () => { this.onOpen(); this.recomputeFiltered(); }, "aria-autocomplete": "list", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": ariaOwns, "aria-activedescendant": activedesc, disabled: this.disabled })), this.loading && (h("span", { key: 'e0c388e2da8530e765fb1f092af284ab38b2d7a0', class: "control-loader", part: "loader", "aria-hidden": "true" }, h("xv-loader-v2", { key: 'b3da8bf830b8c1389d4989f88d9177017e0ab603', size: "sm", variant: "horizontal" })))), this.error && typeof this.error === 'string' && (h("p", { key: '0435384109a1e0b0693b7d9e449d92897c5e02e8', class: "message message--error" }, this.error)), this.warning && typeof this.warning === 'string' && (h("p", { key: '9d03aaf496e4a2d48aa9909db9564632b99a61b7', class: "message message--warning" }, this.warning)), suggestionsVisible && (h("ul", { key: '8fb23fee1e8b47cbd089dd89a8e7fd98f4971d68', id: `${this.uid}-listbox`, class: "suggestions", role: "listbox", part: "listbox" }, this.filtered.map((opt, idx) => (h("li", { id: this.optionId(idx), class: { 'suggestions-opt': true, 'suggestions-opt--highlight': idx === this.highlighted }, role: "option", "aria-selected": idx === this.highlighted, onMouseEnter: () => this.onOptionMouseEnter(idx), onMouseDown: (ev) => ev.preventDefault(), onClick: () => this.selectOption(opt) }, h("div", { class: "suggestions-opt-content" }, opt.bg ? h("span", { class: "suggestions-opt-content--color", style: { background: opt.bg } }) : null, h("span", { class: "suggestions-opt-content--label" }, this.highlightLabel(opt.label).map((seg, i) => typeof seg === 'string' ? h("span", { key: i }, seg) : h("strong", { key: i }, seg.match)))))))))));
|
|
82634
82991
|
}
|
|
82635
82992
|
get host() { return getElement(this); }
|
|
82636
82993
|
static get watchers() { return {
|
|
@@ -82662,7 +83019,7 @@ const XvTag = class {
|
|
|
82662
83019
|
this.closeClick.emit(e);
|
|
82663
83020
|
}
|
|
82664
83021
|
render() {
|
|
82665
|
-
return (h(Host, { key: '
|
|
83022
|
+
return (h(Host, { key: '6b2f00a5acec63848ec53f4c23d5444cfd9d9c65', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '7fd4e3e61903755c50668d0c9923afc7915afb5a', class: "xv-tag_content", part: "details-content" }, h("slot", { key: '26a6b95e5c3dd33b8bcb5b81fa2399338c72fb22' })), this.closeable && (h("button", { key: 'd14081f320bd61f23c09a99bbafa1abac5f11517', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
|
|
82666
83023
|
}
|
|
82667
83024
|
};
|
|
82668
83025
|
XvTag.style = xvTagCss();
|
|
@@ -82696,13 +83053,13 @@ const XvTextInput = class {
|
|
|
82696
83053
|
};
|
|
82697
83054
|
}
|
|
82698
83055
|
render() {
|
|
82699
|
-
return (h(Host, { key: '
|
|
83056
|
+
return (h(Host, { key: '8387dcd3101789c9104a378fcca8a820122ada26', class: { disabled: !!this.disabled } }, h("label", { key: 'ad90119fef9b51d06e64b52e11c8fdde1150a461', class: "control" }, this.label && h("span", { key: '24d5aba160ccf7cd7df356a147c5f86194683bce', class: "control_label" }, this.label), h("div", { key: '65ce0ede9c3837d47c29b3f95a53993468ad6b67', class: {
|
|
82700
83057
|
'control_input': true,
|
|
82701
83058
|
readonly: !!this.readonly,
|
|
82702
83059
|
[this.size]: true,
|
|
82703
83060
|
error: !!this.error,
|
|
82704
83061
|
warning: !!this.warning,
|
|
82705
|
-
} }, h("input", { key: '
|
|
83062
|
+
} }, h("input", { key: 'b620357a84e7b5953360631fa369b8d63c2898dd', autocomplete: this.autocomplete, type: (this.type === 'password' && this.isPasswordVisible && 'text') || this.type, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, value: this.value }), h("div", { key: 'a72facc2aae1c24dda755aba84eb284b5bd76024', class: "control_input__icons" }, this.loading && h("xv-loader-v2", { key: '648fba1f66bf7a1ce7d08dd0eb921d772659b4a5', size: SIZE_VAR.XS }), !!this.error ? (h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null, this.type === 'password' && (h("button", { key: 'a5ef25d6ccecef77953943f3c22c7586f90e575b', onClick: this.togglePassword, disabled: this.disabled, class: "status-icon" }, h("svg", { key: '34cdf5a09935c2c46a94c7db1693f45d6f3f4afe', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 512", width: 16, height: 16 }, this.isPasswordVisible ? (h("path", { fill: "currentColor", d: "M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z" })) : (h("path", { fill: "currentColor", d: "M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z" })))))))), this.helper && h("p", { key: 'cb7926af03a4faa965e34f3a1edcb55145da1d7c', class: "message" }, this.helper), typeof this.error === 'string' ? (h("p", { class: "message error" }, this.error)) : typeof this.warning === 'string' ? (h("p", { class: "message warning" }, this.warning)) : null));
|
|
82706
83063
|
}
|
|
82707
83064
|
static get formAssociated() { return true; }
|
|
82708
83065
|
};
|
|
@@ -82739,12 +83096,12 @@ const XvTextarea = class {
|
|
|
82739
83096
|
this.value && this.internals.setFormValue(this.value);
|
|
82740
83097
|
}
|
|
82741
83098
|
render() {
|
|
82742
|
-
return (h(Host, { key: '
|
|
83099
|
+
return (h(Host, { key: '0d6ad5edfcf8fb6773d78a643aa704cdfecc12a0', class: { disabled: !!this.disabled } }, h("label", { key: '4d3c7642d2b5be570e40310e9468862446dc32fb', class: "control" }, (this.label || this.max) && (h("p", { key: 'ca2d4769a3fb69f1afd35e0723de1007fdd78c79', class: "control_label" }, h("span", { key: '1e6aab8fcfbb386f12da1eb6fc7a6dd526e94fdf' }, this.label, this.info && h("xv-tooltip-v2", { key: '6bc26411f61475177cf92753e0776424c7d7d634', message: this.info })), this.max !== undefined && !this.counterHide && (h("span", { key: 'f65de7346b7ca086e11acca0a4c4c7f0767b4ae8', class: "control_label__count" }, this.value.length || 0, "/", this.max)))), h("div", { key: '492ff2c4fb75057050d5a4b7db3d9ac10f282418', class: {
|
|
82743
83100
|
'control_input': true,
|
|
82744
83101
|
readonly: !!this.readonly,
|
|
82745
83102
|
error: !!this.error,
|
|
82746
83103
|
warning: this.warning !== undefined,
|
|
82747
|
-
} }, h("textarea", { key: '
|
|
83104
|
+
} }, h("textarea", { key: '731266a637bbdcae5a3da8c689c315979964cbb1', class: { 'no-resize': !!this.noResize }, name: this.name, rows: this.rows, value: this.value, maxLength: this.max, disabled: this.disabled, readOnly: this.readonly, placeholder: this.placeholder, onInput: this.onInput }), h("div", { key: 'd472bb9145c8e1ce7252a290d28bbf8369e45bdd', class: "control_input__icons" }, this._renderIcon()))), this.helper && h("p", { key: '9dcd6fb14615c2471eb3848c7fd2513874cd6035', class: "message" }, this.helper), typeof this.error === 'string' ? (h("p", { class: "message error" }, this.error)) : typeof this.warning === 'string' ? (h("p", { class: "message warning" }, this.warning)) : null));
|
|
82748
83105
|
}
|
|
82749
83106
|
_renderIcon() {
|
|
82750
83107
|
if (this.loading)
|
|
@@ -82795,7 +83152,7 @@ const XvTile = class {
|
|
|
82795
83152
|
this.checked = !this.checked;
|
|
82796
83153
|
}
|
|
82797
83154
|
render() {
|
|
82798
|
-
return (h(Host, { key: '
|
|
83155
|
+
return (h(Host, { key: 'ec3ba694a1f3eb783b60fecbcdd14287d588c4de', class: "xv-tile--host" }, h("label", { key: '65a21f79a250dd79316d064dde627f6fe5b2805b', class: {
|
|
82799
83156
|
[this.el.className]: !!this.el.className,
|
|
82800
83157
|
'xv-tile': true,
|
|
82801
83158
|
[`xv-tile--variant-${this.variant}`]: !!this.variant,
|
|
@@ -82803,7 +83160,7 @@ const XvTile = class {
|
|
|
82803
83160
|
'xv-tile--disabled': !!this.disabled,
|
|
82804
83161
|
'selected': !!this.checked,
|
|
82805
83162
|
'xv-tile--error': !!this.error,
|
|
82806
|
-
} }, h("div", { key: '
|
|
83163
|
+
} }, h("div", { key: '761e9416ca4b1754e03316de73fee32efb023152', class: "xv-tile_content" }, this.label && h("p", { key: '496e4275da6567d1264a38b69b78cf8283c640d0', class: "xv-tile_content__title" }, this.label), h("slot", { key: '567e6e6a8d0cd895ba9edc4f5b5377763ab10108' })), this.variant === 'selectable' && (h("div", { key: '2eb9b60a3eb578c88002160e9e7adcee7d209056', class: "xv-tile_control" }, this.multiple ? (h("input", { type: "checkbox", disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })) : (h("input", { type: "radio", disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })))), (this.variant === 'clickable' || this.variant === 'expandable') && (h("div", { key: 'd4c28994dde438425291164e59ec08e08e4eaaf8', class: "xv-tile_footer" }, h("button", { key: 'da3f09412c3e88322484cf51eb5a7f0878e4a1fc', class: { 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked } }))), h("div", { key: '28c41a2a9021f39672c45ecee44bc6aad691dc9d', class: { 'xv-tile_expandable': true, open: this.checked } }, h("slot", { key: 'ebd93394a333447d68881658ed80b6341205586c', name: "expandable" })))));
|
|
82807
83164
|
}
|
|
82808
83165
|
get el() { return getElement(this); }
|
|
82809
83166
|
};
|
|
@@ -82835,7 +83192,7 @@ const XvToggle = class {
|
|
|
82835
83192
|
};
|
|
82836
83193
|
}
|
|
82837
83194
|
render() {
|
|
82838
|
-
return (h(Host, { key: '
|
|
83195
|
+
return (h(Host, { key: '824523810a78d1bfd3fd5278913047d97f330c2c', class: { 'xv-toggle': true, disabled: this.disabled, readonly: !!this.readonly, block: !!this.block } }, this.label && h("span", { key: '7ba4c98ffa0443a330c7010d9e41f36ae6be558b', class: "label" }, this.label), h("label", { key: 'd581495423115bcca7b9c0517f5523dc88350b64', class: "control" }, h("slot", { key: 'f7b1184d763da297f9687ccce68dfbafbb189c08', name: "before" }), h("div", { key: '03a6f7dc0bc8020894524bd5b316e1b88201f247', class: "control_input" }, h("input", { key: 'e50cdd77b125f43ecb36365ab7347fddd0061dbf', type: "checkbox", readonly: this.readonly, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, onChange: this.onChange }), h("span", { key: '8e2af7a7f3a075982c7b7e8103d6d03946f901c4', class: "toggle" })), h("slot", { key: 'd249ca7ca0e97f12ba7921a12f5480a77bc9560f', name: "after" }))));
|
|
82839
83196
|
}
|
|
82840
83197
|
static get formAssociated() { return true; }
|
|
82841
83198
|
};
|
|
@@ -82912,7 +83269,7 @@ const XvToggleTip = class {
|
|
|
82912
83269
|
}
|
|
82913
83270
|
;
|
|
82914
83271
|
render() {
|
|
82915
|
-
return (h(Host, { key: '
|
|
83272
|
+
return (h(Host, { key: '95144bb5e1e8e7dfe22f7191d9920f902b8f0d1b', class: "xv-toggle-tip" }, h("div", { key: '7c8a669f220c3b47c9245af85aa0699e474447ed', class: { 'trigger': true, 'trigger--block': this.block }, role: "button", tabindex: "0", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "popover", onClick: () => this.setPopover(!this.open), ref: (el) => (this.triggerEl = el) }, h("slot", { key: '905567440f32e2fdeba80cede5506e2a51e9da99', name: "trigger" }, h("svg", { key: 'b3db10d581509498b3905749e1aac47c7c04c99e', class: "trigger_icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '6f1c4e71c07e51e5b41a3a3b06840cdccb4f5856', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))), h("div", { key: '3f652e88df9d5fc7f4b757b2c4e99ae095ce784e', class: { popover: true, autoSize: !!this.autoSize }, role: "tooltip", tabindex: "-1", ref: (el) => (this.popoverEl = el) }, h("div", { key: 'c0ba1c8d7e51dc0cc6e02ebf1f0c698778dbe4cd', class: "popover-tip", part: "tip", "data-popper-arrow": "" }), h("div", { key: '13a4ca0eea582bd93ca920cd3664a10fe6861921', class: "popover-content" }, h("slot", { key: '44bacb0a3f6e02a2ed2d389e76fb518a890c9e9d', name: "header" }), h("slot", { key: 'f41b3b2d09f670dfcae2b91bf6ced0ec6eb291c6', name: "body" }), h("slot", { key: '59f1312c1307273e7fcdf2438f0f67aee0741a6a', name: "footer" })))));
|
|
82916
83273
|
}
|
|
82917
83274
|
disconnectedCallback() {
|
|
82918
83275
|
this.destroyPopper();
|
|
@@ -82967,14 +83324,14 @@ const XvTooltip = class {
|
|
|
82967
83324
|
this.destroyTooltip();
|
|
82968
83325
|
}
|
|
82969
83326
|
render() {
|
|
82970
|
-
return (h(Host, { key: '
|
|
83327
|
+
return (h(Host, { key: '980414b5a2987f07d7a2b5fe6e26f3fc6e8740a4', role: "tooltip", class: {
|
|
82971
83328
|
'xv-tooltip-wrapper': true,
|
|
82972
83329
|
[`xv-tooltip-wrapper__block`]: !!this.block,
|
|
82973
83330
|
[`xv-tooltip-wrapper__dashed`]: !!this.dashed,
|
|
82974
|
-
} }, h("slot", { key: '
|
|
83331
|
+
} }, h("slot", { key: '2ec5dd1c79e1702cc33ac5ab63b38e590824ae9f' }, h("svg", { key: '801c3f35ef506e36fc002cab0cf803f29ac89964', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: 'b8b4de91aa61294482a8ba6a1c35fe182ca72b6d', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))));
|
|
82975
83332
|
}
|
|
82976
83333
|
get el() { return getElement(this); }
|
|
82977
83334
|
};
|
|
82978
83335
|
XvTooltip.style = xvTooltipCss();
|
|
82979
83336
|
|
|
82980
|
-
export { XvAccordion as xv_accordion_v2, XvAccordionItem as xv_accordion_v2_item, XvBreadcrumbs as xv_breadcrumbs_v2, XvButton as xv_button_v2, XvCard as xv_card_v2, XvCheckbox as xv_checkbox_v2, XvContentSwitcherItem as xv_content_switcher_item_v2, XvContentSwitcher as xv_content_switcher_v2, XvDataTable as xv_data_table, XvDataTableCell as xv_data_table_cell, XvDataTableCollapse as xv_data_table_collapse, XvDataTableRow as xv_data_table_row, XvDatepicker as xv_datepicker, XvDropdown as xv_dropdown_v2, XvDropdownItem as xv_dropdown_v2_item, XvFileUploader as xv_file_uploader, Xvfooter as xv_footer, XvHeader as xv_header, XvImageViewer as xv_image_viewer, XvLink as xv_link_v2, XvLoader as xv_loader_v2, XvLoginModal as xv_login_modal, XvMegaMenu as xv_mega_menu, XvModal as xv_modal_v2, XvNotification as xv_notification_v2, XvNumberInput as xv_number_input_v2, XvOverflowMenu as xv_overflow_menu_v2, XvOverflowMenuItem as xv_overflow_menu_v2_item, XvPagination as xv_pagination, XvProgressIndicator as xv_progress_indicator_v2, XvProgressIndicatorItem as xv_progress_indicator_v2_item, XvRadio as xv_radio_v2, XvSlider as xv_slider_v2, XvTab as xv_tab_v2, XvTable as xv_table_v2, XvTableCell as xv_table_v2_cell, XvTableExpand as xv_table_v2_expand, XvTableRow as xv_table_v2_row, XvTabs as xv_tabs_v2, XvTagCombobox as xv_tag_combobox, XvTag as xv_tag_v2, XvTextInput as xv_text_input_v2, XvTextarea as xv_textarea, XvTile as xv_tile, XvToggle as xv_toggle, XvToggleTip as xv_toggle_tip, XvTooltip as xv_tooltip_v2 };
|
|
83337
|
+
export { XvAccordion as xv_accordion_v2, XvAccordionItem as xv_accordion_v2_item, XvBreadcrumbs as xv_breadcrumbs_v2, XvButtonGroup as xv_button_group_v2, XvButton as xv_button_v2, XvCard as xv_card_v2, XvCheckbox as xv_checkbox_v2, XvContentSwitcherItem as xv_content_switcher_item_v2, XvContentSwitcher as xv_content_switcher_v2, XvDataTable as xv_data_table, XvDataTableCell as xv_data_table_cell, XvDataTableCollapse as xv_data_table_collapse, XvDataTableRow as xv_data_table_row, XvDatepicker as xv_datepicker, XvDropdown as xv_dropdown_v2, XvDropdownItem as xv_dropdown_v2_item, XvFileUploader as xv_file_uploader, Xvfooter as xv_footer, XvHeader as xv_header, XvImageViewer as xv_image_viewer, XvLink as xv_link_v2, XvLoader as xv_loader_v2, XvLoginModal as xv_login_modal, XvMegaMenu as xv_mega_menu, XvModal as xv_modal_v2, XvNotification as xv_notification_v2, XvNumberInput as xv_number_input_v2, XvOverflowMenu as xv_overflow_menu_v2, XvOverflowMenuItem as xv_overflow_menu_v2_item, XvPagination as xv_pagination, XvProgressIndicator as xv_progress_indicator_v2, XvProgressIndicatorItem as xv_progress_indicator_v2_item, XvRadio as xv_radio_v2, XvSlider as xv_slider_v2, XvTab as xv_tab_v2, XvTable as xv_table_v2, XvTableCell as xv_table_v2_cell, XvTableExpand as xv_table_v2_expand, XvTableRow as xv_table_v2_row, XvTabs as xv_tabs_v2, XvTagCombobox as xv_tag_combobox, XvTag as xv_tag_v2, XvTextInput as xv_text_input_v2, XvTextarea as xv_textarea, XvTile as xv_tile, XvToggle as xv_toggle, XvToggleTip as xv_toggle_tip, XvTooltip as xv_tooltip_v2 };
|