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
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index$1 = require('./index-C4fJ70r4.js');
|
|
4
4
|
var index$2 = require('./index-DwneAp1a.js');
|
|
5
|
-
var _vars = require('./_vars-
|
|
5
|
+
var _vars = require('./_vars-DMytunQw.js');
|
|
6
6
|
|
|
7
7
|
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}`;
|
|
8
8
|
|
|
@@ -80,7 +80,97 @@ const XvBreadcrumbs = class {
|
|
|
80
80
|
};
|
|
81
81
|
XvBreadcrumbs.style = xvBreadcrumbsCss();
|
|
82
82
|
|
|
83
|
-
const
|
|
83
|
+
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}`;
|
|
84
|
+
|
|
85
|
+
const ITEM_TAG = 'xv-button-v2';
|
|
86
|
+
const XvButtonGroup = class {
|
|
87
|
+
constructor(hostRef) {
|
|
88
|
+
index$1.registerInstance(this, hostRef);
|
|
89
|
+
this.activeChange = index$1.createEvent(this, "activeChange", 1);
|
|
90
|
+
/** Layout direction of the group. */
|
|
91
|
+
this.variant = 'horizontal';
|
|
92
|
+
/** Allow several buttons to be active at the same time (independent toggles). */
|
|
93
|
+
this.multiple = false;
|
|
94
|
+
}
|
|
95
|
+
onSelectionInputChange() {
|
|
96
|
+
this.syncActive();
|
|
97
|
+
}
|
|
98
|
+
componentDidLoad() {
|
|
99
|
+
this.syncActive();
|
|
100
|
+
}
|
|
101
|
+
handleClick(event) {
|
|
102
|
+
var _a;
|
|
103
|
+
const btn = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest(ITEM_TAG);
|
|
104
|
+
if (!btn || !this.el.contains(btn) || btn.hasAttribute('disabled'))
|
|
105
|
+
return;
|
|
106
|
+
this.toggle(this.getItemKey(btn));
|
|
107
|
+
}
|
|
108
|
+
/** Live list of child buttons, in DOM order. */
|
|
109
|
+
get items() {
|
|
110
|
+
return Array.from(this.el.querySelectorAll(ITEM_TAG));
|
|
111
|
+
}
|
|
112
|
+
getItemKey(item) {
|
|
113
|
+
const value = item.getAttribute('value');
|
|
114
|
+
return value !== null && value !== '' ? value : `${this.items.indexOf(item)}`;
|
|
115
|
+
}
|
|
116
|
+
selectedKeys() {
|
|
117
|
+
const value = this.value;
|
|
118
|
+
if (value === undefined || value === null || value === '')
|
|
119
|
+
return [];
|
|
120
|
+
if (Array.isArray(value))
|
|
121
|
+
return value.map(String);
|
|
122
|
+
// A string: split on commas in multiple mode, otherwise treat as one key.
|
|
123
|
+
return this.multiple
|
|
124
|
+
? `${value}`.split(',').map((key) => key.trim()).filter(Boolean)
|
|
125
|
+
: [`${value}`];
|
|
126
|
+
}
|
|
127
|
+
toggle(key) {
|
|
128
|
+
if (this.multiple) {
|
|
129
|
+
const current = this.selectedKeys();
|
|
130
|
+
const next = current.includes(key) ? current.filter((k) => k !== key) : [...current, key];
|
|
131
|
+
this.value = next;
|
|
132
|
+
this.activeChange.emit(next);
|
|
133
|
+
}
|
|
134
|
+
else {
|
|
135
|
+
// Radio-like: clicking the already-active button does nothing.
|
|
136
|
+
if (`${this.value}` === key)
|
|
137
|
+
return;
|
|
138
|
+
this.value = key;
|
|
139
|
+
this.activeChange.emit(key);
|
|
140
|
+
}
|
|
141
|
+
this.syncActive();
|
|
142
|
+
}
|
|
143
|
+
/**
|
|
144
|
+
* Mirror the selection onto the children by flipping each button's `active`
|
|
145
|
+
* attribute. The button renders `aria-pressed` on its own inner `<button>`
|
|
146
|
+
* from that state (the host element has no role, so ARIA must live there).
|
|
147
|
+
*/
|
|
148
|
+
syncActive() {
|
|
149
|
+
const keys = this.selectedKeys();
|
|
150
|
+
this.items.forEach((item) => {
|
|
151
|
+
const isActive = keys.includes(this.getItemKey(item));
|
|
152
|
+
if (isActive)
|
|
153
|
+
item.setAttribute('active', '');
|
|
154
|
+
else
|
|
155
|
+
item.removeAttribute('active');
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
render() {
|
|
159
|
+
return (index$1.h(index$1.Host, { key: '173e1e09cd6a12d8f3058395914ddeceb8c12b2c', role: "group" }, index$1.h("slot", { key: 'ed963d11b49624d4f9e7144c6a9421449bfb27c4', onSlotchange: () => this.syncActive() })));
|
|
160
|
+
}
|
|
161
|
+
get el() { return index$1.getElement(this); }
|
|
162
|
+
static get watchers() { return {
|
|
163
|
+
"value": [{
|
|
164
|
+
"onSelectionInputChange": 0
|
|
165
|
+
}],
|
|
166
|
+
"multiple": [{
|
|
167
|
+
"onSelectionInputChange": 0
|
|
168
|
+
}]
|
|
169
|
+
}; }
|
|
170
|
+
};
|
|
171
|
+
XvButtonGroup.style = xvButtonGroupCss();
|
|
172
|
+
|
|
173
|
+
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}`;
|
|
84
174
|
|
|
85
175
|
const XvButton = class {
|
|
86
176
|
constructor(hostRef) {
|
|
@@ -104,6 +194,8 @@ const XvButton = class {
|
|
|
104
194
|
this.block = false;
|
|
105
195
|
/** Button type */
|
|
106
196
|
this.type = 'button';
|
|
197
|
+
/** Set button to active styles */
|
|
198
|
+
this.active = false;
|
|
107
199
|
this.hasLeftIcon = false;
|
|
108
200
|
this.hasRightIcon = false;
|
|
109
201
|
this.hasContent = false;
|
|
@@ -132,8 +224,9 @@ const XvButton = class {
|
|
|
132
224
|
}
|
|
133
225
|
render() {
|
|
134
226
|
var _a, _b;
|
|
135
|
-
return (index$1.h(index$1.Host, { key: '
|
|
227
|
+
return (index$1.h(index$1.Host, { key: 'aca4f3e80723593be61fab9bf77b2bfae5b68e66' }, index$1.h("button", { key: '1f0b3abe1eb888aa927c7d2351f437c82d8a7dc7', class: {
|
|
136
228
|
'xv-button': true,
|
|
229
|
+
'xv-button--active': this.active,
|
|
137
230
|
[`xv-button--${this.variant}`]: !!this.variant,
|
|
138
231
|
[`xv-button--${this.size}`]: !!this.size,
|
|
139
232
|
'xv-button--disabled': this.disabled || this.loading,
|
|
@@ -142,7 +235,7 @@ const XvButton = class {
|
|
|
142
235
|
'xv-button--icon-left': this.hasLeftIcon,
|
|
143
236
|
'xv-button--icon-right': this.hasRightIcon,
|
|
144
237
|
'xv-button--icon-only': !this.hasContent,
|
|
145
|
-
}, 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 && (index$1.h("xv-loader-v2", { key: '
|
|
238
|
+
}, 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 && (index$1.h("xv-loader-v2", { key: 'ffa0a49ef478bc558dc3511ac90e883de63188d1', class: "xv-button__loader", size: this.size !== _vars.SIZE_VAR.XL ? this.size : _vars.SIZE_VAR.LG })), index$1.h("span", { key: '3b27a5e36072adf1d749fe1b75a2f2507d2783b9', class: "xv-button__icon xv-button__icon--left" }, index$1.h("slot", { key: 'a66d0e292864c45141b3e7c78a55e1f419bca02d', name: "icon-left", onSlotchange: this.handleSlotChangeLeft })), index$1.h("span", { key: 'bb2bb95b64a11e480cb2cb267d4db79506996495', class: "xv-button__label" }, index$1.h("slot", { key: 'e14a8b19bce7b449934a5a2096c8d8ce20bb73eb', onSlotchange: this.handleSlotChangeContent }, this.label)), index$1.h("span", { key: '003cca2d751e40ec47b4d01f91f4381ba75ce529', class: "xv-button__icon xv-button__icon--right" }, index$1.h("slot", { key: 'f379bdf670da3ea97b196b055a7eaef105e455c7', name: "icon-right", onSlotchange: this.handleSlotChangeRight })))));
|
|
146
239
|
}
|
|
147
240
|
static get formAssociated() { return true; }
|
|
148
241
|
get el() { return index$1.getElement(this); }
|
|
@@ -157,7 +250,7 @@ const XvCard = class {
|
|
|
157
250
|
this.variant = 'vertical';
|
|
158
251
|
}
|
|
159
252
|
render() {
|
|
160
|
-
return (index$1.h(index$1.Host, { key: '
|
|
253
|
+
return (index$1.h(index$1.Host, { key: 'debeef927ae357d90bc496b616ae851ac7d2a2bf', class: `xv-card xv-card_${this.variant}`, part: this.variant }, index$1.h("div", { key: 'e5797327edf341eabd431d5da99c29076527bb53', class: "xv-card_media" }, index$1.h("slot", { key: '74711e7ab0ee8ea2398c6db897d2e07b44a5ecbe', name: "media" }, this.media && index$1.h("img", { key: 'f8d0e9bbc2bc85e826d6ba1d15ba05dfb0df293e', class: "xv-card_media__content", src: this.media, alt: this.header }))), index$1.h("div", { key: '384f1af6ce89280bf780603434622b52bd4cfd2d', class: "xv-card_content" }, index$1.h("div", { key: '1d4d31575cd1f2bd29156b98c4fcebe8735d9b6d', class: "xv-card_header" }, index$1.h("slot", { key: 'c234c229570dbe3adea5539be538d30b76b94dc4', name: "header" }, this.header && index$1.h("p", { key: 'd1276aa41d2d7448e9dcde8353a386d41c4b896a', class: "xv-card_header__content" }, this.header))), index$1.h("div", { key: '05e03cc8ee98ced05a24af018e0e0a6e56041f58', class: "xv-card_body" }, index$1.h("slot", { key: '56fc5e21bf601688e70b25600f1beb2578396778', name: "body" }, this.body && index$1.h("p", { key: '8d4dce44c752cbd2bd91657174e5a278868113e2', class: "xv-card_body__content" }, this.header))), index$1.h("div", { key: 'd556eaa66c876154b9e918bf662492792db96a5a', class: "xv-card_footer" }, index$1.h("slot", { key: 'c101c5341266e0b24ec9e66756b0f60894c6ff12', name: "footer" }, this.footer)))));
|
|
161
254
|
}
|
|
162
255
|
};
|
|
163
256
|
XvCard.style = xvCardCss();
|
|
@@ -238,12 +331,12 @@ const XvCheckbox = class {
|
|
|
238
331
|
}
|
|
239
332
|
}
|
|
240
333
|
render() {
|
|
241
|
-
return (index$1.h(index$1.Host, { key: '
|
|
334
|
+
return (index$1.h(index$1.Host, { key: '32ba4e94a80b3f54e362c63f1578c24b9ae7d38f' }, index$1.h("label", { key: '34e5648a0c6f455a9537a940dc4fd7ad059fc0cf', class: {
|
|
242
335
|
'xv-checkbox': true,
|
|
243
336
|
disabled: this.disabled,
|
|
244
337
|
readonly: this.readonly,
|
|
245
338
|
[`xv-checkbox--align-${this.align}`]: !!this.align,
|
|
246
|
-
} }, index$1.h("input", { key: '
|
|
339
|
+
} }, index$1.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 }), index$1.h("span", { key: 'd44782c42397ba989ba1b46e62ae87f2f6a8e2c6', class: `checkmark ${this.partial ? 'checkmark-partial' : ''}` }), index$1.h("div", { key: '50ccc9ca04a1020d11903d671fc11afc7e5f03f7', class: "label" }, index$1.h("slot", { key: '1beb2ec12d33aed1b6e31933cb1ec0cba215c9e8' }, this.label && index$1.h("span", { key: '524a4e284b87e576006fc771eb8eeeac43d5e842', class: "label_str" }, this.label)))), index$1.h("slot", { key: 'e94f73ced700cb22dcd6bd9d681bc38e6b30f598', name: "info" }), !!this.error && index$1.h("span", { key: '70f12567216440af10b3685cc24ff7e850f5ac4c', class: "error" }, this.error)));
|
|
247
340
|
}
|
|
248
341
|
componentDidLoad() {
|
|
249
342
|
if (this.indeterminate) {
|
|
@@ -282,7 +375,7 @@ const XvContentSwitcherItem = class {
|
|
|
282
375
|
this.disabled = false;
|
|
283
376
|
}
|
|
284
377
|
render() {
|
|
285
|
-
return (index$1.h(index$1.Host, { key: '
|
|
378
|
+
return (index$1.h(index$1.Host, { key: '3c6d341d5fbeb6f91ceb326e35a56238be9c8e01' }, index$1.h("slot", { key: '85e165a849945f8f4bede9d0cdbb7af8676f85ec' })));
|
|
286
379
|
}
|
|
287
380
|
};
|
|
288
381
|
XvContentSwitcherItem.style = xvContentSwitcherItemCss();
|
|
@@ -416,14 +509,14 @@ const XvContentSwitcher = class {
|
|
|
416
509
|
return null;
|
|
417
510
|
}
|
|
418
511
|
render() {
|
|
419
|
-
return (index$1.h(index$1.Host, { key: '
|
|
512
|
+
return (index$1.h(index$1.Host, { key: '1298193e6670d6f13e6c9026a29d34b486d78d7e' }, index$1.h("div", { key: '102fd42b1d02d166bc298bdcc78e6f9d89bb7301', class: "switcher", role: "tablist", "aria-orientation": "horizontal" }, this.items.map((item, index) => {
|
|
420
513
|
const key = this.getItemKey(item, index);
|
|
421
514
|
const selected = this.isSelected(item, index);
|
|
422
515
|
const itemDisabled = this.isItemDisabled(item);
|
|
423
516
|
const label = item.getAttribute('label') || '';
|
|
424
517
|
const icon = item.getAttribute('icon');
|
|
425
518
|
return (index$1.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 && index$1.h("i", { class: `switcher_item-icon ${icon}`, "aria-hidden": "true" }), !this.iconOnly && label && index$1.h("span", { class: "switcher_item-label" }, label)));
|
|
426
|
-
})), index$1.h("div", { key: '
|
|
519
|
+
})), index$1.h("div", { key: 'd420e3ee370e1f610b5503dc3e2b6539a5046bdf', class: "switcher_content", role: "tabpanel", tabindex: -1 }, index$1.h("slot", { key: '307a4c1892cc42a659e531303676341ef6aef50c', onSlotchange: this.collectItems }))));
|
|
427
520
|
}
|
|
428
521
|
get el() { return index$1.getElement(this); }
|
|
429
522
|
};
|
|
@@ -3188,7 +3281,7 @@ const XvDataTable = class {
|
|
|
3188
3281
|
this.initSortable();
|
|
3189
3282
|
}
|
|
3190
3283
|
render() {
|
|
3191
|
-
return (index$1.h(index$1.Host, { key: '
|
|
3284
|
+
return (index$1.h(index$1.Host, { key: '9bfdf5a7608cd53743e79f71c1d64e3bc9b494ea', class: "xv-data-table" }, index$1.h("caption", { key: 'f3e7c40d0a89ef38c142ddb914652bb4ba690351' }, index$1.h("slot", { key: '16a25ea4df7e58fb7092314a8fa99bb683093aee', name: "title" })), index$1.h("div", { key: '16c283141a44ee147e0d5d7d3ba97748bb9cd3b4', class: "bar" }, index$1.h("div", { key: '79aaa8aa765a4607ba8280870d1b2c9676949711', class: "bar_batch" }, index$1.h("slot", { key: '31a69635f2eff40282fae73e97589ce97d46c7fa', name: "batch" })), index$1.h("div", { key: 'cb4ce2e11bc511737c48165464827656d7a72589', class: "bar_toolbar" }, index$1.h("slot", { key: 'ef48a443241b8c4175a2c56b692e8aac33c4e2f6', name: "toolbar" }))), index$1.h("table", { key: '632139c3e130422d4612810afd643c2dc3aa45b0', role: "table" }, this.columnWidths.length > 0 && (index$1.h("colgroup", { key: 'd90e13684bb2cb7c017c91848105f1bf42747326' }, this.columnWidths.map((width = 'auto') => index$1.h("col", { style: { width } })))), index$1.h("thead", { key: '1b06590f01a8e54c37dd443e47fd08a89e134570' }, index$1.h("slot", { key: 'eb6e14c86b57e93b8ded7e7a0c11b591c6110df8', name: "header" })), index$1.h("tbody", { key: '6e1a268ff840ab451f40c481c5e44f8b143ce38a' }, index$1.h("slot", { key: 'ee3db294cffd71778083bbaf6cbb6963098448d4' })), index$1.h("tfoot", { key: 'b17b1cbcc2ade5f4a8ee68212ef5420bf11061bd' }, index$1.h("slot", { key: 'acbf2ff04a4ecc77104210eaa42ef80597a8ff2a', name: "footer" }))), !!this.loading && (index$1.h("div", { key: '5a4b730b4feaded1a2faeea351d9993337e144a8', class: "loading" }, index$1.h("xv-loader-v2", { key: '48b115063b7f6a1ead7461b0bc92c2dfacb38690', size: _vars.SIZE_VAR.LG })))));
|
|
3192
3285
|
}
|
|
3193
3286
|
get el() { return index$1.getElement(this); }
|
|
3194
3287
|
static get watchers() { return {
|
|
@@ -3229,7 +3322,7 @@ const XvDataTableCell = class {
|
|
|
3229
3322
|
}
|
|
3230
3323
|
;
|
|
3231
3324
|
render() {
|
|
3232
|
-
return (index$1.h(index$1.Host, { key: '
|
|
3325
|
+
return (index$1.h(index$1.Host, { key: '40236670a4c8e778ce7d3b42cbdef0e2723eed58', role: "cell", style: { width: this.width }, class: {
|
|
3233
3326
|
multiline: this.multiline !== undefined,
|
|
3234
3327
|
[`align--${this.align}`]: !!this.align
|
|
3235
3328
|
} }, !this.multiline || isNaN(this.multiline) ? this.__renderWithTooltip() : (index$1.h("div", { class: "line-clamp", style: { ['-webkit-line-clamp']: `${this.multiline}` } }, this.__renderWithTooltip()))));
|
|
@@ -3262,7 +3355,7 @@ const XvDataTableCollapse = class {
|
|
|
3262
3355
|
rows.forEach((row) => row === null || row === void 0 ? void 0 : row.setAttribute('collapsable', ''));
|
|
3263
3356
|
}
|
|
3264
3357
|
render() {
|
|
3265
|
-
return (index$1.h(index$1.Host, { key: '
|
|
3358
|
+
return (index$1.h(index$1.Host, { key: '855f6ef7ca66001aefcad04c5c4498c305b88ea8', id: this.el.id, part: "xv-collapse", class: this.el.className, collapsed: this.collapsed, expanded: !this.collapsed }, index$1.h("slot", { key: '2337058eec638c4f27f014a05e87849b12be4e99' })));
|
|
3266
3359
|
}
|
|
3267
3360
|
get el() { return index$1.getElement(this); }
|
|
3268
3361
|
};
|
|
@@ -3345,7 +3438,7 @@ const XvDataTableRow = class {
|
|
|
3345
3438
|
const isGroup = !!this.collapse || !!this.group;
|
|
3346
3439
|
const isDraggableRow = this.reorderable && !isHeader && !isFooter && !this.group;
|
|
3347
3440
|
const showHandleCell = this.reorderable && this.reorderHandleMode === 'icon';
|
|
3348
|
-
return (index$1.h(index$1.Host, { key: '
|
|
3441
|
+
return (index$1.h(index$1.Host, { key: '373373acefd9af83de30333e5b113f390e2e6217', role: "row", part: "xv-row", class: {
|
|
3349
3442
|
checked: this.checked,
|
|
3350
3443
|
hover: this.hover,
|
|
3351
3444
|
disabled: this.disabled,
|
|
@@ -3353,7 +3446,7 @@ const XvDataTableRow = class {
|
|
|
3353
3446
|
header: isHeader,
|
|
3354
3447
|
footer: isFooter,
|
|
3355
3448
|
'reorder-row': isDraggableRow && this.reorderHandleMode === 'row',
|
|
3356
|
-
} }, showHandleCell && (index$1.h("xv-data-table-cell", { key: '
|
|
3449
|
+
} }, showHandleCell && (index$1.h("xv-data-table-cell", { key: '83b525965e82466c54118754217e672e0396eda3', width: "16px", class: "cell-control cell-control--drag" }, isDraggableRow && (index$1.h("span", { key: 'cee824eaa91f021ba60ecee5fb0ff8a85d753972', class: `cell-control_drag ${XV_ROW_DRAG_HANDLE_CLASS}`, "aria-label": "Drag to reorder" }, index$1.h("svg", { key: '3fc73eec2a1034d64e0994da564958dc48f67b43', viewBox: "0 0 8 14", width: "8", height: "14", fill: "currentColor", "aria-hidden": "true" }, index$1.h("circle", { key: 'e4a9a528e494a67d50073a3df5ea84ce362b5b42', cx: "2", cy: "2", r: "1.2" }), index$1.h("circle", { key: 'a6980f7e7d7a938d211d1da27ab46f643ce78e0b', cx: "6", cy: "2", r: "1.2" }), index$1.h("circle", { key: '2382f97b904f4aa49e0b31caebdbbda50873e63d', cx: "2", cy: "7", r: "1.2" }), index$1.h("circle", { key: 'ed741113a78560e3e7b8ade59527e7d15aacba80', cx: "6", cy: "7", r: "1.2" }), index$1.h("circle", { key: '7ea397ea58e5f79c98f81c675ee18c4842aa8011', cx: "2", cy: "12", r: "1.2" }), index$1.h("circle", { key: '950d8006bac3ff32f893d0e214984ad7a8a08cbd', cx: "6", cy: "12", r: "1.2" })))))), (!!this.variant || this.collapsable) && (index$1.h("xv-data-table-cell", { key: '236f7a4f3abd0dcc1a229962e78ea2cbd2877835', width: !!this.variant ? '16px' : '0', class: "cell-control" }, !!this.collapse && (index$1.h("button", { key: '16581137aafc05d90e97c3b1ba71d1f2ff23e9d9', class: { 'cell-control_collapse': true, open: !this.collapsed }, onClick: this.collapseClick })), this.variant === 'checkbox' && (index$1.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" })))), index$1.h("slot", { key: '6ab432afa57d1df631872c51a0ece74a62f05a8f', onSlotchange: this.setInitialState })));
|
|
3357
3450
|
}
|
|
3358
3451
|
get el() { return index$1.getElement(this); }
|
|
3359
3452
|
};
|
|
@@ -80503,12 +80596,12 @@ const XvDatepicker = class {
|
|
|
80503
80596
|
}
|
|
80504
80597
|
render() {
|
|
80505
80598
|
const [start, end] = this.value;
|
|
80506
|
-
return (index$1.h(index$1.Host, { key: '
|
|
80599
|
+
return (index$1.h(index$1.Host, { key: '0aafb4638713263a78600eae3f9765384116536b', class: { disabled: !!this.disabled }, tabindex: this.disabled ? '-1' : undefined }, index$1.h("div", { key: '648d2c679e70a7a89ba9970c307d8242d58766c9', "aria-controls": "popover", class: "control" }, this.label && index$1.h("label", { key: 'ce60e99ae454e29d70daa95b2b02cc448b5e560e', class: "control_label" }, this.label), index$1.h("div", { key: '5ce3af8b823cba5e29c0c87a285da1349a69bc9c', class: {
|
|
80507
80600
|
'control_field': true,
|
|
80508
80601
|
loading: this.loading,
|
|
80509
80602
|
error: !!this.error || !!this.localError,
|
|
80510
80603
|
warning: this.warning !== undefined,
|
|
80511
|
-
}, onClick: this.handleOpen, ref: (el) => (this.controlEl = el) }, index$1.h("input", { key: '
|
|
80604
|
+
}, onClick: this.handleOpen, ref: (el) => (this.controlEl = el) }, index$1.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' && (index$1.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) && (index$1.h("div", { key: '95f2973e5fdcb8720b274cddae28b64cc099da39' }, this.helper && index$1.h("p", { key: '9fbc0d4de5f35932b414bbc3a2b0ef23d5183652', class: "control_message helper" }, this.helper), (this.error || this.warning || this.localError) && (index$1.h("p", { key: 'e8abe7fd7c5772d10d012ced52f457aa7db168ce', class: { control_message: true, error: !!this.error || !!this.localError } }, this.error || this.localError || this.warning))))), index$1.h("div", { key: 'd4396486599a6ed66dd63eb3d9f46dc8430a6749', role: "dialog", class: { popover: true, open: this.open }, ref: (el) => (this.popoverEl = el) }, index$1.h("div", { key: 'aa227b586801a453468ea52d099eb8b269b1ab64', class: "header" }, index$1.h("xv-button-v2", { key: '1c440d5cf1924575b93bc859e9710892c8f3b3ca', tabindex: this.open ? undefined : '-1', disabled: this.isPrevDisabled, variant: "ghost", onClick: this.prevMonth }, index$1.h("span", { key: '1bfd67bbd807287fb5d84ee66e70fe449a4a3e5f', slot: "icon-left", class: "header_icon prev" })), index$1.h("p", { key: '615c56c593d8129bb8bec31cbe4d247311178cee', class: "header_date" }, dateFns.format(this.month, 'LLLL', { locale: localeExports.de }), index$1.h("input", { key: '3821fb5922add935193bcb2dd78182935489f820', tabindex: this.open ? undefined : '-1', type: "number", value: this.month.getFullYear(), onInput: this.handleYearChange, onBlur: this.handleYearBlur })), index$1.h("xv-button-v2", { key: '7fda8d66daf94a359ac93bfde25e950160e99369', tabindex: this.open ? undefined : '-1', disabled: this.isNextDisabled, variant: "ghost", onClick: this.nextMonth }, index$1.h("span", { key: '89caa272c23b28a20df17c57561393447460e937', slot: "icon-left", class: "header_icon next" }))), index$1.h("div", { key: '4b1ed14eadc14cd9dd08527beba67506449cc3bd', class: "week" }, index$1.h("p", { key: 'd9d8d23fb60f508bf281a8d6582bfffa0b0be404', class: "week_day" }), WEEK.map((day) => index$1.h("p", { class: "week_day" }, day, "."))), index$1.h("div", { key: '0a09c7958ee87729cb0b46618c4691ebfa31ad04', class: "week" }, this.days.map((day, idx) => (index$1.h(index$1.Fragment, null, idx % 7 === 0 && (index$1.h("button", { tabindex: this.open ? undefined : '-1', disabled: true, class: "week_day disabled" }, day.week)), index$1.h("button", { tabindex: this.open ? undefined : '-1', onClick: () => this.handleSetDate(day), disabled: day.disabled, class: {
|
|
80512
80605
|
'week_day': true,
|
|
80513
80606
|
inRange: this.variant === 'range' && dateFns.isWithinInterval(day.date, { start, end }),
|
|
80514
80607
|
isToday: day.isToday,
|
|
@@ -80818,7 +80911,7 @@ const XvDropdown = class {
|
|
|
80818
80911
|
}
|
|
80819
80912
|
/* endregion Search methods */
|
|
80820
80913
|
render() {
|
|
80821
|
-
return (index$1.h(index$1.Host, { key: '
|
|
80914
|
+
return (index$1.h(index$1.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) && (index$1.h("label", { key: '92280cbde45dc37612083ccd7b57cf411f6cfa59', class: "label" }, index$1.h("slot", { key: '980a33a7b46542a7861ef936c316f599f4e4706b', name: "label" }, this.label), this.info && index$1.h("xv-tooltip-v2", { key: 'fe62f15b930d246597ede27da290476c6fd88769', class: "label_info", message: this.info }))), index$1.h("div", { key: 'd680025a2f348d541fcb5851f4373e4ba531123d', class: { "xv-dropdown-control control": true, readonly: !!this.readonly }, onClick: this.handleOpen }, (this.multiple && this.selectedMap.size > 0) && (index$1.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 ? (index$1.h("p", { class: "control_value" }, this.selected.join(', '))) : (index$1.h("p", { class: "control_placeholder" }, this.placeholder || '')), this._renderIcon(), index$1.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" }, index$1.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 && index$1.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 && (index$1.h("div", { key: 'd5674d487690460b290ae7bb9fab76674486cea9', class: "options_search" }, index$1.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 }))), index$1.h("slot", { key: "xv-dropdown-options" })), (this.helper || typeof this.error === 'string' || this.warning) && (index$1.h("p", { key: '583e977ce735986f372e5316247d0cb7cd46064d', class: "helper" }, this.error || this.warning || this.helper))));
|
|
80822
80915
|
}
|
|
80823
80916
|
componentDidLoad() {
|
|
80824
80917
|
this.syncOpenState();
|
|
@@ -80921,7 +81014,7 @@ const XvDropdownItem = class {
|
|
|
80921
81014
|
});
|
|
80922
81015
|
}
|
|
80923
81016
|
render() {
|
|
80924
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81017
|
+
return (index$1.h(index$1.Host, { key: 'ebd69bf9875a413d092065c6c3a0f2ffe2de7da4', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, this.multiple && (index$1.h("xv-checkbox-v2", { key: 'fe72e087d4bc21ac9979ca9c5e69df61bd84e8fe', class: "multiple-check", size: this.size, checked: this.selected, disabled: this.disabled })), index$1.h("slot", { key: 'aa88674788627153e8044a0d38270b6dc1d4c011' }), (!this.multiple && this.selected) && index$1.h("span", { key: 'e8f64a88b588c3b16a449acf67dbcaea9ec5b0d0', class: "checkmark far fa-check" })));
|
|
80925
81018
|
}
|
|
80926
81019
|
componentWillLoad() {
|
|
80927
81020
|
if (!this.value)
|
|
@@ -81025,7 +81118,7 @@ const XvFileUploader = class {
|
|
|
81025
81118
|
}
|
|
81026
81119
|
}
|
|
81027
81120
|
render() {
|
|
81028
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81121
|
+
return (index$1.h(index$1.Host, { key: '6292271bd4914ff55c44d08738f27b9b0b7d600d', class: { 'upload-wrapper': true, [`uploader-${this.size}`]: true, disabled: !!this.disabled, error: !!this.error } }, this.label && index$1.h("label", { key: '2b0009b61d76a027b462a0d7dd1ce9a205f16cdb', class: "label" }, this.label), this.description && index$1.h("p", { key: '8bc79a289823a8baf4dfaa427a30ddcfcfe096e6', class: "description" }, this.description), this.variant === 'button' ? (index$1.h("xv-button-v2", { class: "uploadBtn", variant: this.buttonVariant, disabled: this.disabled, onClick: () => this.fileInput.click() }, this.addText || 'Dateien auswählen')) : (index$1.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.')), index$1.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 && index$1.h("p", { key: '125cf535821332a446a244643a9d62002ddc45f0', class: "global-error" }, this.error), index$1.h("ul", { key: 'f05b167c928d00863a4bc1e29686bd243254723e', class: "file-list" }, this.files.map((file, index) => {
|
|
81029
81122
|
var _a, _b;
|
|
81030
81123
|
return (index$1.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])) } }, index$1.h("div", { class: "file_container" }, index$1.h("span", { class: "file_container_name" }, file.name), this._renderLoaderState(index)), this._renderError(index)));
|
|
81031
81124
|
}))));
|
|
@@ -81097,7 +81190,7 @@ const Xvfooter = class {
|
|
|
81097
81190
|
render() {
|
|
81098
81191
|
const { categories, socials, logo, legalLinks, payments, partners, advantages } = this.data || {};
|
|
81099
81192
|
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));
|
|
81100
|
-
return (index$1.h("footer", { key: '
|
|
81193
|
+
return (index$1.h("footer", { key: '3e1f93bd2d975ce559934451e530eca99e453748', class: "xv-footer" }, (advantages === null || advantages === void 0 ? void 0 : advantages.length) > 0 && (index$1.h("div", { key: '52f610bf099c0b69f83dfeb0eee564e3d95c70e4', class: "xv-footer-advantages" }, index$1.h("div", { key: '0cbf70bebcd6375602181048302ec1b80dc7af92', class: "xv-container" }, this._renderFooterList(advantages, { itemWithLabel: true })))), hasDataLength && (index$1.h("div", { key: '82b65b07d459533d66b7357fc302d165acfc8bd7', class: "xv-container" }, index$1.h("div", { key: '0a39d278e9b9016b126ac12a1798c6686becad12', class: "xv-footer__grid xv-footer-y-spacing" }, index$1.h("div", { key: 'a7cb81bdc33b283d944c41818396462d5781cb58', class: "xv-footer__col-main" }, index$1.h("ul", { key: '4375709da3a491eda99ba4f96f2a2c4492ca5aca', class: "xv-footer-categories" }, categories === null || categories === void 0 ? void 0 : categories.map((category) => (index$1.h("li", null, index$1.h("p", { class: "xv-label-02" }, category.label), index$1.h("ul", { class: "xv-footer-routes" }, category.routes.map((item) => (index$1.h("li", null, index$1.h("a", { class: "xv-body-compact-02", href: item.href, target: item.target }, item.label)))))))))), index$1.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 && (index$1.h("div", { key: 'a387c5a322b6eab5389c0a11056929adca272881', class: "xv-footer-legal" }, index$1.h("div", { key: 'ce2ba2792824e82db293e91a88e686428b0b2f01', class: "xv-container" }, index$1.h("div", { key: '385687cf42b2f41523299acd42fabf307a9cb13e', class: "xv-footer-legal-row" }, logo && (index$1.h("a", { key: 'eb83309d41bb170ba88ad5bc9443f2add56f7325', class: "xv-footer-logo", href: logo.href, target: logo.target }, logo.label && index$1.h("span", { key: '7ab53e5ffd2381847dab8edf8609b23283324685', class: "xv-label-02" }, logo.label), index$1.h("img", { key: 'f139554e919952dcc9515ec94911bae0b0bd595a', loading: "lazy", src: logo.image, alt: logo.label }))), index$1.h("ul", { key: '1e7b003ae7683de0cb3f4d7850b57edf6ae508e6' }, legalLinks.map((item) => {
|
|
81101
81194
|
if (item.label === 'Cookie Einstellungen') {
|
|
81102
81195
|
return index$1.h("li", null, index$1.h("a", { class: "xv-helper-text-02", onClick: this.openCookieSettings }, item.label));
|
|
81103
81196
|
}
|
|
@@ -81115,7 +81208,7 @@ Xvfooter.style = xvFooterCss();
|
|
|
81115
81208
|
|
|
81116
81209
|
const userMagnifyingGlassRegularFullSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBQcm8gNy4xLjAgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UgKENvbW1lcmNpYWwgTGljZW5zZSkgQ29weXJpZ2h0IDIwMjUgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTE3Ni41IDE5MkMxNzYuNSAxNDcuOCAyMTIuMyAxMTIgMjU2LjUgMTEyQzMwMC43IDExMiAzMzYuNSAxNDcuOCAzMzYuNSAxOTJDMzM2LjUgMjM2LjIgMzAwLjcgMjcyIDI1Ni41IDI3MkMyMTIuMyAyNzIgMTc2LjUgMjM2LjIgMTc2LjUgMTkyek0zODQuNSAxOTJDMzg0LjUgMTIxLjMgMzI3LjIgNjQgMjU2LjUgNjRDMTg1LjggNjQgMTI4LjUgMTIxLjMgMTI4LjUgMTkyQzEyOC41IDI2Mi43IDE4NS44IDMyMCAyNTYuNSAzMjBDMzI3LjIgMzIwIDM4NC41IDI2Mi43IDM4NC41IDE5MnpNODAuNSA1NDRDODAuNSA0NzMuMyAxMzcuOCA0MTYgMjA4LjUgNDE2TDI4OC43IDQxNkMyODkuNSAzOTkuMiAyOTIuNyAzODMuMSAyOTguMSAzNjhMMjA4LjUgMzY4QzExMS4zIDM2OCAzMi41IDQ0Ni44IDMyLjUgNTQ0TDMyLjUgNTUyQzMyLjUgNTY1LjMgNDMuMiA1NzYgNTYuNSA1NzZDNjkuOCA1NzYgODAuNSA1NjUuMyA4MC41IDU1Mkw4MC41IDU0NHpNNDU2LjUgMzUyQzQ5Ni4zIDM1MiA1MjguNSAzODQuMiA1MjguNSA0MjRDNTI4LjUgNDYzLjggNDk2LjMgNDk2IDQ1Ni41IDQ5NkM0MTYuNyA0OTYgMzg0LjUgNDYzLjggMzg0LjUgNDI0QzM4NC41IDM4NC4yIDQxNi43IDM1MiA0NTYuNSAzNTJ6TTQ1Ni41IDU0NEM0ODAuOSA1NDQgNTAzLjYgNTM2LjcgNTIyLjYgNTI0LjJMNTgzLjUgNTg1LjFDNTkyLjkgNTk0LjUgNjA4LjEgNTk0LjUgNjE3LjQgNTg1LjFDNjI2LjcgNTc1LjcgNjI2LjggNTYwLjUgNjE3LjQgNTUxLjJMNTU2LjUgNDkwLjNDNTY5LjEgNDcxLjMgNTc2LjQgNDQ4LjUgNTc2LjQgNDI0QzU3Ni40IDM1Ny43IDUyMi43IDMwNCA0NTYuNCAzMDRDMzkwLjEgMzA0IDMzNi40IDM1Ny43IDMzNi40IDQyNEMzMzYuNCA0OTAuMyAzOTAuMSA1NDQgNDU2LjQgNTQ0eiIvPjwvc3ZnPg==';
|
|
81117
81210
|
|
|
81118
|
-
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}`;
|
|
81211
|
+
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}`;
|
|
81119
81212
|
|
|
81120
81213
|
const XvHeader = class {
|
|
81121
81214
|
constructor(hostRef) {
|
|
@@ -81267,11 +81360,17 @@ const XvHeader = class {
|
|
|
81267
81360
|
} }), index$1.h("div", { class: "notifications-item-body" }, index$1.h("span", null, "Rechnungsentwurf f\u00FCr Auftrag ", notification.orderId, " ist ausstehend"), index$1.h("xv-link-v2", { variant: notification.isRead ? 'ghost' : 'standalone', href: `/de-de/manager/ordersales/details/${notification.orderId}` }, "Auftrag anschauen")))))))));
|
|
81268
81361
|
}
|
|
81269
81362
|
_renderAccount() {
|
|
81270
|
-
var _a, _b, _c, _d, _e, _f, _g, _h
|
|
81363
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
81271
81364
|
if (!((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a.IsAuthenticated)) {
|
|
81272
81365
|
return (index$1.h("li", null, index$1.h("xv-button-v2", { variant: "ghost", size: _vars.SIZE_VAR.MD, onClick: () => this.showLoginModal = true }, index$1.h("i", { class: "header-icon far fa-user" }), index$1.h("span", { class: "header-label xv-body-02" }, "Mein Konto"))));
|
|
81273
81366
|
}
|
|
81274
|
-
|
|
81367
|
+
const menuItems = [
|
|
81368
|
+
...(((_b = this.metaNav) === null || _b === void 0 ? void 0 : _b.ManagerCockpitMenu) || []),
|
|
81369
|
+
...(((_c = this.metaNav) === null || _c === void 0 ? void 0 : _c.ManagerEntitiesMenu) || []),
|
|
81370
|
+
...(((_d = this.metaNav) === null || _d === void 0 ? void 0 : _d.ManagerMenu) || []),
|
|
81371
|
+
...(!((_e = this.metaNav) === null || _e === void 0 ? void 0 : _e.IsManager) ? (((_f = this.metaNav) === null || _f === void 0 ? void 0 : _f.UserMenu) || []) : []),
|
|
81372
|
+
];
|
|
81373
|
+
return (index$1.h("li", { class: "myArea" }, index$1.h("xv-button-v2", { id: "xv-header-myarea-trigger", class: "myArea-btn", variant: "ghost", size: _vars.SIZE_VAR.MD }, index$1.h("i", { class: "far fa-user" }), index$1.h("div", { class: "header-label xv-body-02" }, ((_g = this.metaNav) === null || _g === void 0 ? void 0 : _g.IsManager) && index$1.h("small", { class: "xv-label-01" }, "Manager"), index$1.h("span", null, ((_h = this.metaNav) === null || _h === void 0 ? void 0 : _h.UserMenuText) || 'Mein Konto')), index$1.h("i", { class: "caret" })), index$1.h("xv-overflow-menu-v2", { anchor: "#xv-header-myarea-trigger", alignment: "start" }, menuItems.map((item) => (index$1.h("xv-overflow-menu-v2-item", { value: item.Url, href: item.Url, target: item.Target }, item.Text, item.BadgeText && (index$1.h("xv-tag-v2", { class: "category-badge", color: "var(--text-inverse, #FFF)", bg: "var(--icon-interactive, #97BF0D)" }, item.BadgeText))))), index$1.h("xv-overflow-menu-v2-item", { divider: true, value: "logoff", href: `${this.baseUrl}/de-de/mycrossvertise/account/logoff?returnUrl=${window.location.hostname}` }, "Abmelden"))));
|
|
81275
81374
|
}
|
|
81276
81375
|
// endregion Account
|
|
81277
81376
|
// region ShoppingCart
|
|
@@ -81283,7 +81382,7 @@ const XvHeader = class {
|
|
|
81283
81382
|
render() {
|
|
81284
81383
|
var _a, _b, _c, _d, _e;
|
|
81285
81384
|
const isXvBrand = (((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a['WhitelabelName']) || 'Xv') === 'Xv';
|
|
81286
|
-
return (index$1.h("header", { key: '
|
|
81385
|
+
return (index$1.h("header", { key: '1e8cbed3efe14824ce65b9b79009855f45e88552', class: "header" }, index$1.h("div", { key: '871071d55e53c9b3a059be62da7f59b79af83fe9', class: "header-wrapper" }, index$1.h("div", { key: 'f005f1602fdb23d8539c7b4365195def15050f03', class: "xv-container" }, index$1.h("div", { key: 'd83e928b21387c5eb5a66cdec842a36291822dc7', class: "header-top" }, index$1.h("div", { key: '553f7db352b179760b4de59722d2ac625c7296c3', class: "header-top--left" }, index$1.h("xv-button-v2", { key: '04ebf462cbd0c2fafae3723ac58d78c7c41f37d9', class: "menu-btn", variant: "ghost", onClick: this.toggleMobMenu }, index$1.h("i", { key: '88dcb80ecd93050c90333486b36689b7a07fbc16', slot: "icon-left", class: { 'fa': true, 'fa-times': this.mobMenuOpen, 'fa-bars': !this.mobMenuOpen } })), this.metaNav && (index$1.h("a", { key: '84c84d341d22ac8014a87f83f08470eb951ecabe', href: `${window.location.origin}/` }, index$1.h("picture", { key: '120e34cb407d46a0a3824b8c32c406d0f06ce832' }, index$1.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)" }), index$1.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 && (index$1.h("xv-link-v2", { key: 'c8048b30b3227359fb65cfcca80e5600724f3bc2', class: "header-top--orgUnit", variant: "standalone", href: "/de-de/mycrossvertise" }, this.orgUnit))), index$1.h("ul", { key: '5de18779cc415b556513ff30a116f9001a1f56a6', class: "header-top--right" }, this._renderSearch(), this._renderImpersonationInfo(), !((_d = this.metaNav) === null || _d === void 0 ? void 0 : _d.IsManager) && isXvBrand && (index$1.h("li", { key: 'e17eadf61593034d5fab4129036e57283d0cd255' }, index$1.h("xv-link-v2", { key: 'c5df24226e52225840eaf116fe99d43eebe73a96', variant: "ghost", href: "https://www.crossvertise.com/ueber-uns/kontakt" }, index$1.h("xv-button-v2", { key: '845132fd6507e39479e12df1fe8b473cf088e70f', variant: "ghost", size: _vars.SIZE_VAR.MD }, index$1.h("i", { key: '54eb518f58300ccbf4e74f628d7b6379670f1c26', class: "header-icon far fa-envelope" }), index$1.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 && (index$1.h("li", { key: 'c097773be84472755fda77718f38150a709b32a7' }, index$1.h("xv-link-v2", { key: 'b8ea823caecadd2e393751b5edcc69688457783e', variant: "ghost", href: "https://help.crossvertise.com" }, index$1.h("xv-button-v2", { key: '9d39739c1e35812bfac290e457676937819aaacf', variant: "ghost", size: _vars.SIZE_VAR.MD }, index$1.h("i", { key: '1c450da39d5a602e0d9bee2782480bb19be46eee', class: "header-icon far fa-question-circle" }), index$1.h("span", { key: '0c8a1a901069832219f66b58bc835c104ba71a6a', class: "header-label xv-body-02" }, "Hilfe"))))), this._renderShoppingCart()))), index$1.h("div", { key: '33c0caebc768f200874997b0732297df7fcd79a8', class: "header-wrapper--bg" }, index$1.h("div", { key: '92070c591038efc772c263b328f264bf06cf7de9', class: "xv-container" }, index$1.h("xv-mega-menu", { key: 'c06727e455019dff71ce7b68149d4e757391de00', open: this.mobMenuOpen, onOpenChange: this.closeMobMenu })))), index$1.h("xv-login-modal", { key: 'dde492343f352dadaa27e4c06c21ce85c914aae8', visible: this.showLoginModal, onClose: () => this.showLoginModal = false })));
|
|
81287
81386
|
}
|
|
81288
81387
|
get el() { return index$1.getElement(this); }
|
|
81289
81388
|
};
|
|
@@ -81334,7 +81433,7 @@ const XvImageViewer = class {
|
|
|
81334
81433
|
}
|
|
81335
81434
|
}
|
|
81336
81435
|
render() {
|
|
81337
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81436
|
+
return (index$1.h(index$1.Host, { key: 'bd15b24608ded6a06e014f436b91053a1605ec6f', class: { 'image-wrapper': true, errored: this.errored } }, !this.loaded && index$1.h("xv-loader-v2", { key: 'c841135421670f016cf8366184b1a4ca30b586fb', class: "loading" }, this.placeholder), this.loaded && this.errored && index$1.h("slot", { key: '03bc57bf48199dc91231d14fc80d62c0dd8e31bd', name: "fallback" }), this.loaded && !this.errored && (index$1.h("img", { key: '79dd3b3662c2d89ff3cdbae8885cb4f86c1d6a62', src: this.src, alt: this.alt, class: "image", onClick: this.handleClick, onError: this.handleError })), this.isFullscreen && (index$1.h("div", { key: '1f5067d6f981c8853809e34f0083d65eb1719bed', class: "fullscreen-overlay", onClick: this.closeFullscreen }, !this.fullscreenLoaded && index$1.h("xv-loader-v2", { key: 'a6abc0aee2ef57f901c7bc917819509806a7a0cd', class: "loading", size: _vars.SIZE_VAR.LG }, this.placeholder), index$1.h("img", { key: '2d88fa62dc2ed889c73570ef94b973cb2ec6fde3', src: this.fullscreenSrc || this.src, alt: this.alt, class: {
|
|
81338
81437
|
'fullscreen-image': true,
|
|
81339
81438
|
loaded: this.fullscreenLoaded,
|
|
81340
81439
|
} })))));
|
|
@@ -81359,7 +81458,7 @@ const XvLink = class {
|
|
|
81359
81458
|
e.stopPropagation();
|
|
81360
81459
|
}
|
|
81361
81460
|
render() {
|
|
81362
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81461
|
+
return (index$1.h(index$1.Host, { key: '121a30abee76537568ff1759fd0efd8d2cc4e047', class: { [`xv-link_${this.variant}`]: true, disabled: !!this.disabled } }, index$1.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 }, index$1.h("slot", { key: '7de4e11afef772000204b892e9a16cf1395d07cf', name: "icon-left" }), index$1.h("slot", { key: '0df87b0502375a6d0a353651e1442f135e30a3b1' }), index$1.h("slot", { key: '6264cf3d54e1bce0a03ca210b35a4704e5ad5380', name: "icon-right" }))));
|
|
81363
81462
|
}
|
|
81364
81463
|
};
|
|
81365
81464
|
XvLink.style = xvLinkCss();
|
|
@@ -81527,7 +81626,7 @@ const XvMegaMenu = class {
|
|
|
81527
81626
|
void this.fetchMenuData();
|
|
81528
81627
|
}
|
|
81529
81628
|
render() {
|
|
81530
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81629
|
+
return (index$1.h(index$1.Host, { key: '3df71e4a8eaab5418f2ac9615b4522ff20f31fc1' }, index$1.h("nav", { key: 'cbfd9eed6298da39b7d668219fd6598ca44267e0', class: { 'xv-menu': true, open: this.open } }, this.menuLoading && (index$1.h("div", { key: '1483dad2c668d32dca9068cbf71a8f40a422720d', class: { 'xv-menu-loader': true, open: this.open } }, index$1.h("xv-loader-v2", { key: '8c8d830813dfad2de945a7b86987c69286202db7' }))), index$1.h("ul", { key: '325c0c06573d9eef071049758c5206b4d56fa256', class: { menu: true, open: this.open } }, this.menuItems.map((menuItem) => {
|
|
81531
81630
|
var _a, _b;
|
|
81532
81631
|
return (index$1.h("li", { class: { 'menu-item': true, active: menuItem.id === ((_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.id) } }, menuItem.route ? (index$1.h("xv-link-v2", { variant: "ghost", href: menuItem.route.route }, index$1.h("p", { class: "menu-item-label" }, (_b = menuItem.route) === null || _b === void 0 ? void 0 : _b.label))) : (index$1.h(index$1.Fragment, null, index$1.h("p", { class: "menu-item-label", onClick: () => this.setActiveItem(menuItem) }, menuItem === null || menuItem === void 0 ? void 0 : menuItem.label), index$1.h("ul", { class: "menu-item-groups" }, menuItem.groups.map((group) => {
|
|
81533
81632
|
var _a;
|
|
@@ -81537,7 +81636,7 @@ const XvMegaMenu = class {
|
|
|
81537
81636
|
} }, index$1.h("div", { class: "group-menus" }, index$1.h("ul", { class: { 'group-menus-categories': true, inline: group.layout === 'inline' } }, group.categories.map((category) => (index$1.h("li", { class: "category" }, index$1.h("p", { class: "category-label" }, category.label), index$1.h("ul", { class: "category-routes" }, category.routes.map((route) => (index$1.h("li", { class: "route" }, index$1.h("xv-link-v2", { size: "lg", variant: "ghost", href: route.route || '#' }, route.label), route.tag && (index$1.h("xv-tag-v2", { class: "route-tag", size: "sm", color: "#161616", bg: "#E0E0E0" }, route.tag)))))))))), index$1.h("ul", { class: "group-menus-actions" }, group.actions.map((action) => (index$1.h("li", { class: "action" }, action.type === 'link' && (index$1.h("xv-link-v2", { variant: "standalone", href: action === null || action === void 0 ? void 0 : action.url }, action.label, index$1.h("span", { class: "link-chevron", slot: "icon-right" }, "\u2192"))), action.type === 'button' &&
|
|
81538
81637
|
index$1.h("xv-button-v2", { onClick: () => this.navActionClick(action), block: true, variant: "tertiary" }, action.label)))))), (group === null || group === void 0 ? void 0 : group.card) && (index$1.h("div", { class: "group-card" }, index$1.h("xv-card-v2", { media: this.applicationContext !== 'Komsa' ? group.card.image : undefined, variant: this.isMobile ? 'horizontal' : 'vertical' }, index$1.h("h5", { slot: "header", class: "group-card-title" }, group.card.title), index$1.h("p", { slot: "body", class: "group-card-desc" }, group.card.description), group.card.linkLabel && (index$1.h("xv-link-v2", { slot: "footer", variant: "standalone", href: group.card.linkUrl || '#' }, group.card.linkLabel, index$1.h("span", { class: "link-chevron", slot: "icon-right" }, "\u2192"))))))))));
|
|
81539
81638
|
}))))));
|
|
81540
|
-
}), index$1.h("li", { key: '
|
|
81639
|
+
}), index$1.h("li", { key: '8f1feb52d5dedb5ce6ea4186ac64004ed0c95bc4', class: "menu--right" }, index$1.h("slot", { key: '230779f7de9541bb841c5a8fe6dcbec206a828ec', name: "menu-right" })), this.open && (index$1.h("li", { key: '1c49d2f7f43ece4b1a8fc1a5138f7c760dd40f06', class: "menu--backdrop", onClick: () => this.handleClose() }))))));
|
|
81541
81640
|
}
|
|
81542
81641
|
get el() { return index$1.getElement(this); }
|
|
81543
81642
|
};
|
|
@@ -81605,7 +81704,7 @@ const XvModal = class {
|
|
|
81605
81704
|
}
|
|
81606
81705
|
render() {
|
|
81607
81706
|
var _a;
|
|
81608
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81707
|
+
return (index$1.h(index$1.Host, { key: 'd719dda6d5a55092ca62a85ceba9c391a889897e', role: "dialog", size: this.size, id: this.el.id }, index$1.h("slot", { key: '50dfd619c707d997a3068c709180e031d8f396e3', name: "trigger", onSlotchange: this.setupTrigger }), index$1.h("div", { key: 'e3e1607c716c5bed1ec678a9d7e8cdaa9cd3081b', class: { backdrop: true }, onClick: this.onBackdropClick }, index$1.h("div", { key: 'a128cc4077cc1ab8401503cc5ab04c90d9bc1668', class: "modal" }, index$1.h("button", { key: 'da141f5bd522e820fc89b58f9ce662da37b04e38', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), index$1.h("div", { key: '224828f7f8b110dadc6ed4e3bf46a0dc5e886053', class: "modal_header" }, index$1.h("slot", { key: '8ae8146a302c27f8fbdb2832fc45ef672924b846', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && index$1.h("h5", { key: 'ef81962dc14df688ed3d46afc3255690973dbcee', class: "modal_header__title" }, this.el.title))), index$1.h("div", { key: 'ab61b6bc218b815242a4664089889735d9a08953', class: { 'modal_content': true, overflow: this.overflow } }, index$1.h("slot", { key: 'bc53b9b9a543c39e647abad09f182bab6d3aff2c' })), index$1.h("div", { key: '5dc7449ae5e5a4549d584f048199ff2353f2e7a7', class: "modal_footer" }, index$1.h("slot", { key: '5e464769fd71db35eb9463b93069eb82d3e11c6c', name: "footer" })), !!this.loading && (index$1.h("div", { key: 'fe053e84a02095732b1b3d32e021a29ac6f3f469', class: "loading" }, index$1.h("xv-loader-v2", { key: '0cafb57f80b4716b06160556b809e9359fb5f3fc', size: _vars.SIZE_VAR.LG })))))));
|
|
81609
81708
|
}
|
|
81610
81709
|
disconnectedCallback() {
|
|
81611
81710
|
this.removeTriggerListener();
|
|
@@ -81643,7 +81742,7 @@ const XvNotification = class {
|
|
|
81643
81742
|
};
|
|
81644
81743
|
}
|
|
81645
81744
|
render() {
|
|
81646
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81745
|
+
return (index$1.h(index$1.Host, { key: 'fd2a890616909b0476525b8245e0141ea7aae4bc', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), index$1.h("div", { key: '61278767c2c99f564891bf0bc7217f5b64507c50', class: "content" }, index$1.h("div", { key: '5d1504f83bfa2ff8150a13428c4c7c677154993f', class: "content_wrapper" }, this.el.title && index$1.h("h5", { key: 'a4ff6ebe179e40424d8d42cc7048b4b685aed708', class: "content_title" }, this.el.title), index$1.h("slot", { key: '14002960ca2abf44b428aa98afcc7799ca653b1c' })), index$1.h("slot", { key: 'b0f83f834cb93725e6cbffe346558e9d95e6e73b', name: "footer" })), this.dismissible && index$1.h("button", { key: '973928d389586e7f914348e5706e011707716834', class: "close", onClick: this.closeHandle })));
|
|
81647
81746
|
}
|
|
81648
81747
|
static get assetsDirs() { return ["xv-notification/icons"]; }
|
|
81649
81748
|
get el() { return index$1.getElement(this); }
|
|
@@ -81693,88 +81792,320 @@ const XvNumberInput = class {
|
|
|
81693
81792
|
this.valueChange.emit(this.value);
|
|
81694
81793
|
}
|
|
81695
81794
|
render() {
|
|
81696
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81795
|
+
return (index$1.h(index$1.Host, { key: '48433efcac2571e9c35132a59671f2490f353620', class: { disabled: !!this.disabled } }, index$1.h("label", { key: 'd723e4ee9ea4923a4c97bd0882b2eb545325c439', class: "control" }, this.label && index$1.h("span", { key: '53bba2ac60f9b25f1d3ba0d718071c2c08580611', class: "control_label" }, this.label), index$1.h("div", { key: '822b57366a90669a54f9e74db068ee90b54826a2', class: {
|
|
81697
81796
|
'control_input': true,
|
|
81698
81797
|
readonly: !!this.readonly,
|
|
81699
81798
|
error: !!this.error,
|
|
81700
81799
|
warning: !!this.warning
|
|
81701
|
-
} }, index$1.h("input", { key: '
|
|
81800
|
+
} }, index$1.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 }), index$1.h("div", { key: '0b7aa503686f72815b8d489863b7711c26cb83fc', class: "control_input__icons" }, this.loading ? (index$1.h("xv-loader-v2", { size: _vars.SIZE_VAR.XS })) : !!this.error ? (index$1.h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (index$1.h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null, index$1.h("xv-button-v2", { key: '5276fa743cd4d7cf9cacf9305d2ea22964335e75', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.decrement, "aria-label": "Decrease" }, index$1.h("span", { key: '9385c41e5eb131833939e4878ecaf7dacd231138', slot: "icon-left", class: "status-icon" }, "\u2212")), index$1.h("hr", { key: '2c9bc7b907000edf36ac45d72bc660853a5ba959' }), index$1.h("xv-button-v2", { key: 'a871b573841a63c989c1c811c8eb3557dffc02a4', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.increment, "aria-label": "Increase" }, index$1.h("span", { key: '6da92f9046004c27b3c03607d08e6c70f6310b87', slot: "icon-left", class: "status-icon" }, "+"))))), this.helper && index$1.h("p", { key: '1b094da19ac32b498efbaa92d956b121f503fbbc', class: "message" }, this.helper), typeof this.error === 'string' ? (index$1.h("p", { class: "message error" }, this.error)) : typeof this.warning === 'string' ? (index$1.h("p", { class: "message warning" }, this.warning)) : null));
|
|
81702
81801
|
}
|
|
81703
81802
|
static get formAssociated() { return true; }
|
|
81704
81803
|
};
|
|
81705
81804
|
XvNumberInput.style = xvNumberInputCss();
|
|
81706
81805
|
|
|
81707
|
-
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:
|
|
81806
|
+
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)}`;
|
|
81708
81807
|
|
|
81808
|
+
let overflowMenuUid = 0;
|
|
81709
81809
|
const XvOverflowMenu = class {
|
|
81710
81810
|
constructor(hostRef) {
|
|
81711
81811
|
index$1.registerInstance(this, hostRef);
|
|
81712
81812
|
this.selectItem = index$1.createEvent(this, "selectItem", 7);
|
|
81813
|
+
this.openChange = index$1.createEvent(this, "openChange", 3);
|
|
81713
81814
|
this.open = false;
|
|
81714
81815
|
this.disabled = false;
|
|
81715
81816
|
this.position = 'left';
|
|
81716
81817
|
this.size = _vars.SIZE_VAR.MD;
|
|
81717
|
-
this.
|
|
81718
|
-
|
|
81719
|
-
|
|
81720
|
-
|
|
81818
|
+
this.anchorEl = null;
|
|
81819
|
+
this.menuId = `xv-overflow-menu-${overflowMenuUid++}`;
|
|
81820
|
+
this.activeItem = null;
|
|
81821
|
+
this.optIdSeq = 0;
|
|
81822
|
+
/** Whether the current open was triggered by the keyboard — only then do we pre-highlight an item. */
|
|
81823
|
+
this.openViaKeyboard = false;
|
|
81824
|
+
this.openEdge = 'first';
|
|
81721
81825
|
this.removeListeners = () => {
|
|
81722
81826
|
this.el.removeEventListener('itemClick', this.handleSelectItem);
|
|
81723
|
-
document.
|
|
81827
|
+
document.removeEventListener('click', this.handleClickOutside, { capture: true });
|
|
81724
81828
|
};
|
|
81725
|
-
this.
|
|
81726
|
-
|
|
81829
|
+
this.handleClickOutside = (ev) => {
|
|
81830
|
+
var _a, _b, _c;
|
|
81831
|
+
if (!this.open)
|
|
81727
81832
|
return;
|
|
81728
|
-
ev.
|
|
81729
|
-
|
|
81730
|
-
|
|
81833
|
+
// A shadow-DOM click retargets ev.target to the host in the browser (covered by el.contains).
|
|
81834
|
+
// Also check the shadow trigger/list directly so it works when there is no retargeting (jsdom).
|
|
81835
|
+
const target = ev.target;
|
|
81836
|
+
if (this.el.contains(target))
|
|
81837
|
+
return;
|
|
81838
|
+
if ((_a = this.triggerButtonEl) === null || _a === void 0 ? void 0 : _a.contains(target))
|
|
81839
|
+
return;
|
|
81840
|
+
if ((_b = this.listEl) === null || _b === void 0 ? void 0 : _b.contains(target))
|
|
81841
|
+
return;
|
|
81842
|
+
// A click on the anchor is handled by its own listener (toggle) — don't treat it as "outside".
|
|
81843
|
+
if ((_c = this.anchorEl) === null || _c === void 0 ? void 0 : _c.contains(target))
|
|
81844
|
+
return;
|
|
81845
|
+
this.open = false;
|
|
81731
81846
|
};
|
|
81732
81847
|
this.onOpenToggle = () => {
|
|
81848
|
+
this.openViaKeyboard = false; // mouse open: don't pre-highlight the first item
|
|
81733
81849
|
this.open = !this.open;
|
|
81734
81850
|
};
|
|
81735
81851
|
this.handleSelectItem = ({ detail }) => {
|
|
81736
81852
|
this.selectItem.emit(detail);
|
|
81737
|
-
this.
|
|
81853
|
+
this.open = false;
|
|
81738
81854
|
};
|
|
81739
|
-
|
|
81740
|
-
|
|
81741
|
-
|
|
81742
|
-
ev.stopPropagation();
|
|
81855
|
+
this.anchorClickHandler = (ev) => {
|
|
81856
|
+
if (this.disabled)
|
|
81857
|
+
return;
|
|
81743
81858
|
ev.preventDefault();
|
|
81744
|
-
this.
|
|
81745
|
-
|
|
81859
|
+
this.openViaKeyboard = false; // mouse open: don't pre-highlight the first item
|
|
81860
|
+
this.open = !this.open;
|
|
81861
|
+
};
|
|
81862
|
+
this.getNavigableItems = () => Array.from(this.el.querySelectorAll(_vars.OverflowMenuItemSelector))
|
|
81863
|
+
.filter((el) => !el.hasAttribute('disabled') && !el.hasAttribute('hidden') && el.getAttribute('variant') !== 'ghost');
|
|
81864
|
+
this.moveActive = (delta) => {
|
|
81865
|
+
const items = this.getNavigableItems();
|
|
81866
|
+
if (!items.length)
|
|
81867
|
+
return;
|
|
81868
|
+
const current = this.activeItem ? items.indexOf(this.activeItem) : -1;
|
|
81869
|
+
let next = current + delta;
|
|
81870
|
+
if (next < 0)
|
|
81871
|
+
next = items.length - 1;
|
|
81872
|
+
else if (next >= items.length)
|
|
81873
|
+
next = 0;
|
|
81874
|
+
this.setActiveItem(items[next]);
|
|
81875
|
+
};
|
|
81876
|
+
this.setActiveByEdge = (edge) => {
|
|
81877
|
+
const items = this.getNavigableItems();
|
|
81878
|
+
if (!items.length)
|
|
81879
|
+
return;
|
|
81880
|
+
this.setActiveItem(edge === 'first' ? items[0] : items[items.length - 1]);
|
|
81881
|
+
};
|
|
81882
|
+
this.setActiveItem = (item, scroll = true) => {
|
|
81883
|
+
var _a;
|
|
81884
|
+
if (this.activeItem === item)
|
|
81885
|
+
return;
|
|
81886
|
+
(_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.removeAttribute('active');
|
|
81887
|
+
this.activeItem = item;
|
|
81888
|
+
if (!item) {
|
|
81889
|
+
this.activeId = undefined;
|
|
81890
|
+
return;
|
|
81891
|
+
}
|
|
81892
|
+
if (!item.id)
|
|
81893
|
+
item.id = `${this.menuId}-opt-${this.optIdSeq++}`;
|
|
81894
|
+
item.setAttribute('active', '');
|
|
81895
|
+
this.activeId = item.id;
|
|
81896
|
+
if (scroll)
|
|
81897
|
+
item.scrollIntoView({ block: 'nearest' });
|
|
81898
|
+
};
|
|
81899
|
+
/** Runs once per open, after the panel is in the DOM: highlight the first item and place focus. */
|
|
81900
|
+
this.initOpenState = () => {
|
|
81901
|
+
var _a;
|
|
81902
|
+
if (!this.open)
|
|
81903
|
+
return;
|
|
81904
|
+
if (this.openViaKeyboard) {
|
|
81905
|
+
const items = this.getNavigableItems();
|
|
81906
|
+
this.setActiveItem((this.openEdge === 'last' ? items[items.length - 1] : items[0]) || null, false);
|
|
81907
|
+
}
|
|
81908
|
+
else {
|
|
81909
|
+
this.setActiveItem(null);
|
|
81910
|
+
}
|
|
81911
|
+
this.openViaKeyboard = false;
|
|
81912
|
+
(_a = this.listEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
81913
|
+
};
|
|
81914
|
+
}
|
|
81915
|
+
get isAnchorMode() {
|
|
81916
|
+
return this.anchor !== undefined && this.anchor !== null && this.anchor !== '';
|
|
81917
|
+
}
|
|
81918
|
+
get effectivePosition() {
|
|
81919
|
+
if (this.alignment === 'start')
|
|
81920
|
+
return 'left';
|
|
81921
|
+
if (this.alignment === 'end')
|
|
81922
|
+
return 'right';
|
|
81923
|
+
return this.position;
|
|
81746
81924
|
}
|
|
81747
81925
|
openChangeHandle() {
|
|
81748
|
-
|
|
81926
|
+
this.syncOpenState();
|
|
81927
|
+
this.openChange.emit(!!this.open);
|
|
81928
|
+
}
|
|
81929
|
+
anchorChangeHandle() {
|
|
81930
|
+
this.teardownAnchor();
|
|
81931
|
+
this.setupAnchor();
|
|
81932
|
+
}
|
|
81933
|
+
/* region public API */
|
|
81934
|
+
async openMenu() {
|
|
81935
|
+
if (!this.disabled)
|
|
81936
|
+
this.open = true;
|
|
81937
|
+
}
|
|
81938
|
+
async closeMenu() {
|
|
81939
|
+
this.open = false;
|
|
81940
|
+
}
|
|
81941
|
+
async toggleMenu() {
|
|
81942
|
+
if (!this.disabled)
|
|
81943
|
+
this.open = !this.open;
|
|
81944
|
+
}
|
|
81945
|
+
/* endregion public API */
|
|
81946
|
+
syncOpenState() {
|
|
81947
|
+
var _a;
|
|
81948
|
+
if (this.disabled) {
|
|
81949
|
+
if (this.open)
|
|
81950
|
+
this.open = false;
|
|
81749
81951
|
return;
|
|
81952
|
+
}
|
|
81750
81953
|
if (this.open) {
|
|
81751
81954
|
this.el.addEventListener('itemClick', this.handleSelectItem);
|
|
81752
|
-
document.
|
|
81955
|
+
document.addEventListener('click', this.handleClickOutside, { capture: true });
|
|
81956
|
+
requestAnimationFrame(() => {
|
|
81957
|
+
if (this.isAnchorMode)
|
|
81958
|
+
this.createPopper();
|
|
81959
|
+
this.initOpenState();
|
|
81960
|
+
});
|
|
81753
81961
|
}
|
|
81754
81962
|
else {
|
|
81755
81963
|
this.removeListeners();
|
|
81964
|
+
this.destroyPopper();
|
|
81965
|
+
this.setActiveItem(null);
|
|
81966
|
+
}
|
|
81967
|
+
(_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', this.open ? 'true' : 'false');
|
|
81968
|
+
}
|
|
81969
|
+
/* region anchor mode */
|
|
81970
|
+
resolveAnchor() {
|
|
81971
|
+
if (!this.isAnchorMode)
|
|
81972
|
+
return null;
|
|
81973
|
+
if (typeof this.anchor === 'string')
|
|
81974
|
+
return document.querySelector(this.anchor);
|
|
81975
|
+
return this.anchor;
|
|
81976
|
+
}
|
|
81977
|
+
setupAnchor() {
|
|
81978
|
+
if (!this.isAnchorMode)
|
|
81979
|
+
return;
|
|
81980
|
+
this.anchorEl = this.resolveAnchor();
|
|
81981
|
+
if (this.anchorEl) {
|
|
81982
|
+
this.anchorEl.addEventListener('click', this.anchorClickHandler);
|
|
81983
|
+
this.anchorEl.setAttribute('aria-haspopup', 'menu');
|
|
81984
|
+
}
|
|
81985
|
+
}
|
|
81986
|
+
teardownAnchor() {
|
|
81987
|
+
if (this.anchorEl) {
|
|
81988
|
+
this.anchorEl.removeEventListener('click', this.anchorClickHandler);
|
|
81989
|
+
this.anchorEl.removeAttribute('aria-haspopup');
|
|
81990
|
+
this.anchorEl.removeAttribute('aria-expanded');
|
|
81991
|
+
this.anchorEl = null;
|
|
81992
|
+
}
|
|
81993
|
+
}
|
|
81994
|
+
popperPlacement() {
|
|
81995
|
+
switch (this.effectivePosition) {
|
|
81996
|
+
case 'right': return 'bottom-end';
|
|
81997
|
+
case 'center': return 'bottom';
|
|
81998
|
+
default: return 'bottom-start';
|
|
81999
|
+
}
|
|
82000
|
+
}
|
|
82001
|
+
createPopper() {
|
|
82002
|
+
const anchorEl = this.resolveAnchor();
|
|
82003
|
+
if (!anchorEl || !this.listEl)
|
|
82004
|
+
return;
|
|
82005
|
+
this.destroyPopper();
|
|
82006
|
+
this.popperInstance = createPopper(anchorEl, this.listEl, {
|
|
82007
|
+
strategy: 'fixed',
|
|
82008
|
+
placement: this.popperPlacement(),
|
|
82009
|
+
modifiers: [
|
|
82010
|
+
{ name: 'offset', options: { offset: [0, 4] } },
|
|
82011
|
+
{ name: 'flip', options: { fallbackPlacements: ['top-start', 'top-end', 'top'] } },
|
|
82012
|
+
{ name: 'preventOverflow', options: { boundary: 'viewport', padding: 8 } },
|
|
82013
|
+
],
|
|
82014
|
+
});
|
|
82015
|
+
}
|
|
82016
|
+
destroyPopper() {
|
|
82017
|
+
if (this.popperInstance) {
|
|
82018
|
+
this.popperInstance.destroy();
|
|
82019
|
+
this.popperInstance = undefined;
|
|
82020
|
+
}
|
|
82021
|
+
}
|
|
82022
|
+
/* endregion anchor mode */
|
|
82023
|
+
/* region keyboard navigation */
|
|
82024
|
+
handleKeyDown(ev) {
|
|
82025
|
+
var _a;
|
|
82026
|
+
if (this.disabled)
|
|
82027
|
+
return;
|
|
82028
|
+
if (!this.open) {
|
|
82029
|
+
if (['ArrowDown', 'ArrowUp', 'Enter', ' ', 'Spacebar'].includes(ev.key)) {
|
|
82030
|
+
ev.preventDefault();
|
|
82031
|
+
this.openViaKeyboard = true;
|
|
82032
|
+
this.openEdge = ev.key === 'ArrowUp' ? 'last' : 'first';
|
|
82033
|
+
this.open = true;
|
|
82034
|
+
}
|
|
82035
|
+
return;
|
|
82036
|
+
}
|
|
82037
|
+
switch (ev.key) {
|
|
82038
|
+
case 'ArrowDown':
|
|
82039
|
+
ev.preventDefault();
|
|
82040
|
+
this.moveActive(1);
|
|
82041
|
+
break;
|
|
82042
|
+
case 'ArrowUp':
|
|
82043
|
+
ev.preventDefault();
|
|
82044
|
+
this.moveActive(-1);
|
|
82045
|
+
break;
|
|
82046
|
+
case 'Home':
|
|
82047
|
+
ev.preventDefault();
|
|
82048
|
+
this.setActiveByEdge('first');
|
|
82049
|
+
break;
|
|
82050
|
+
case 'End':
|
|
82051
|
+
ev.preventDefault();
|
|
82052
|
+
this.setActiveByEdge('last');
|
|
82053
|
+
break;
|
|
82054
|
+
case 'Enter':
|
|
82055
|
+
case ' ':
|
|
82056
|
+
case 'Spacebar':
|
|
82057
|
+
ev.preventDefault();
|
|
82058
|
+
(_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.click(); // reuse the mouse-click selection path (also fires routerLink/href)
|
|
82059
|
+
break;
|
|
82060
|
+
case 'Escape':
|
|
82061
|
+
ev.preventDefault();
|
|
82062
|
+
ev.stopPropagation();
|
|
82063
|
+
this.open = false;
|
|
82064
|
+
this.restoreFocus();
|
|
82065
|
+
break;
|
|
82066
|
+
case 'Tab':
|
|
82067
|
+
this.open = false; // let focus leave naturally
|
|
82068
|
+
break;
|
|
81756
82069
|
}
|
|
81757
82070
|
}
|
|
82071
|
+
restoreFocus() {
|
|
82072
|
+
var _a, _b;
|
|
82073
|
+
if (this.isAnchorMode)
|
|
82074
|
+
(_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
82075
|
+
else
|
|
82076
|
+
(_b = this.triggerButtonEl) === null || _b === void 0 ? void 0 : _b.focus();
|
|
82077
|
+
}
|
|
82078
|
+
/* endregion keyboard navigation */
|
|
81758
82079
|
render() {
|
|
81759
|
-
const
|
|
81760
|
-
|
|
82080
|
+
const list = (index$1.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) }, index$1.h("slot", null)));
|
|
82081
|
+
if (this.isAnchorMode) {
|
|
82082
|
+
return (index$1.h(index$1.Host, { class: { 'xv-overflow-menu': true, anchored: true }, size: this.size }, list));
|
|
82083
|
+
}
|
|
82084
|
+
const button = (index$1.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) }, index$1.h("slot", { name: "trigger" }, index$1.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, index$1.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" })))));
|
|
82085
|
+
return (index$1.h(index$1.Host, { class: "xv-overflow-menu", size: this.size }, this.tooltip ? index$1.h("xv-tooltip-v2", { message: this.tooltip }, button) : button, list));
|
|
81761
82086
|
}
|
|
81762
82087
|
componentDidLoad() {
|
|
81763
|
-
this.
|
|
82088
|
+
this.setupAnchor();
|
|
82089
|
+
this.syncOpenState();
|
|
81764
82090
|
}
|
|
81765
82091
|
disconnectedCallback() {
|
|
81766
82092
|
this.removeListeners();
|
|
82093
|
+
this.destroyPopper();
|
|
82094
|
+
this.teardownAnchor();
|
|
81767
82095
|
}
|
|
81768
82096
|
get el() { return index$1.getElement(this); }
|
|
81769
82097
|
static get watchers() { return {
|
|
81770
82098
|
"open": [{
|
|
81771
82099
|
"openChangeHandle": 0
|
|
82100
|
+
}],
|
|
82101
|
+
"anchor": [{
|
|
82102
|
+
"anchorChangeHandle": 0
|
|
81772
82103
|
}]
|
|
81773
82104
|
}; }
|
|
81774
82105
|
};
|
|
81775
82106
|
XvOverflowMenu.style = xvOverflowMenuCss();
|
|
81776
82107
|
|
|
81777
|
-
const xvOverflowMenuItemCss = () =>
|
|
82108
|
+
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)}`;
|
|
81778
82109
|
|
|
81779
82110
|
const XvOverflowMenuItem = class {
|
|
81780
82111
|
constructor(hostRef) {
|
|
@@ -81783,15 +82114,33 @@ const XvOverflowMenuItem = class {
|
|
|
81783
82114
|
this.disabled = false;
|
|
81784
82115
|
this.variant = _vars.OverflowMenuVariant.DEFAULT;
|
|
81785
82116
|
this.clickable = true;
|
|
82117
|
+
/** Draws a separator line above the item (e.g. before a "Logout" action). */
|
|
82118
|
+
this.divider = false;
|
|
82119
|
+
this.hasIcon = false;
|
|
82120
|
+
this.hasIconEnd = false;
|
|
82121
|
+
}
|
|
82122
|
+
componentWillLoad() {
|
|
82123
|
+
this.hasIcon = !!this.el.querySelector('[slot="icon-left"]');
|
|
82124
|
+
this.hasIconEnd = !!this.el.querySelector('[slot="icon-right"]');
|
|
81786
82125
|
}
|
|
81787
82126
|
handleClick(event) {
|
|
81788
82127
|
if (this.disabled || !this.clickable)
|
|
81789
82128
|
return;
|
|
82129
|
+
// Intentionally no preventDefault/stopPropagation: the native click must keep bubbling so a
|
|
82130
|
+
// consumer's routerLink / (click) / href placed directly on this element still fires.
|
|
81790
82131
|
this.itemClick.emit({ event, value: this.value });
|
|
81791
82132
|
}
|
|
81792
82133
|
render() {
|
|
81793
|
-
|
|
82134
|
+
// Ghost items carry arbitrary block content (e.g. header notification rows). Keep them as a plain
|
|
82135
|
+
// slot so that layout is untouched.
|
|
82136
|
+
if (this.variant === _vars.OverflowMenuVariant.GHOST) {
|
|
82137
|
+
return (index$1.h(index$1.Host, { class: "xv-overflow-menu-item", role: "menuitem", "aria-disabled": this.disabled ? 'true' : null }, index$1.h("slot", null)));
|
|
82138
|
+
}
|
|
82139
|
+
const useAnchor = !!this.href && !this.disabled;
|
|
82140
|
+
const InnerTag = useAnchor ? 'a' : 'div';
|
|
82141
|
+
return (index$1.h(index$1.Host, { class: "xv-overflow-menu-item", role: "menuitem", "aria-disabled": this.disabled ? 'true' : null }, index$1.h(InnerTag, { class: "item_inner", href: useAnchor ? this.href : null, target: useAnchor ? this.target : null, tabindex: -1 }, this.hasIcon && (index$1.h("span", { class: "item_icon item_icon--left" }, index$1.h("slot", { name: "icon-left" }))), index$1.h("span", { class: "item_label" }, index$1.h("slot", null)), this.hasIconEnd && (index$1.h("span", { class: "item_icon item_icon--right" }, index$1.h("slot", { name: "icon-right" }))))));
|
|
81794
82142
|
}
|
|
82143
|
+
get el() { return index$1.getElement(this); }
|
|
81795
82144
|
};
|
|
81796
82145
|
XvOverflowMenuItem.style = xvOverflowMenuItemCss();
|
|
81797
82146
|
|
|
@@ -81888,7 +82237,7 @@ const XvPagination = class {
|
|
|
81888
82237
|
this.observer.disconnect();
|
|
81889
82238
|
}
|
|
81890
82239
|
render() {
|
|
81891
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82240
|
+
return (index$1.h(index$1.Host, { key: '7c5589c5954a364956c471c8b214f7e5c6e2d217', class: { block: this.block, [this.currentVariant]: true, [this.size]: !!this.size } }, this.currentVariant === 'full' && (index$1.h("div", { key: '72a9851f3c53fca042f3a5cbefc87e2a4beddd8d', class: "block" }, index$1.h("select", { key: '31c16503e23de7c5e6b03b80db3df72a7bf68edb', class: "options-select", name: "options", onChange: this.handleItemsPerPageChange }, this.itemsPerPageOptions.map((v) => index$1.h("option", { value: v }, v))))), this.currentVariant === 'full' && (index$1.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' && (index$1.h("div", { key: '0a97d5ec8e6163ec5f2acd1f613469be984ad829', class: "block" }, index$1.h("select", { key: 'f9e2ee52b8243e738e899a32578412853bf0dae3', class: "options-select", name: "pages", onChange: this.handlePageSelectChange }, Array.from({ length: this.total }, (_, i) => (index$1.h("option", { selected: this.page === i + 1, value: i + 1 }, i + 1)))), index$1.h("span", { key: '95b453e07438aac43c85cf0260415c4781517c24' }, "von ", this.total, " Seiten"))), this.currentVariant === 'compact' && index$1.h("span", { key: '591dc8b9ef95f0a94604937a6c3fd23ea5624850', class: "block" }, "Seite ", this.page), index$1.h("xv-button-v2", { key: 'd06344e19ef7a0cfc1cf3136c98ed579542a86f2', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page - 1), disabled: this.page <= 1 }, index$1.h("span", { key: '1e4dbe879f5fabfcc2ca4af2859124e99491ebae', slot: "icon-left", class: "icon icon_prev" })), this.currentVariant === 'regular' && (index$1.h("ul", { key: '8deafa7283a58edc710c5298821878c7de89d5bd', class: "list" }, this.visiblePagesWithDots.map((page) => (index$1.h("li", { class: { active: this.page === page } }, page === 'dots-start' ? (index$1.h("div", { class: "list_dots" }, index$1.h("xv-button-v2", { variant: "ghost", size: this.size, tabindex: -1 }, index$1.h("span", { slot: "icon-left", class: "list_dots__icon" }, "...")), index$1.h("select", { name: "start", onChange: this.handlePageSelectChange }, Array.from({ length: this.page - 3 }, (_, i) => (index$1.h("option", { value: i + 2 }, i + 2)))))) : page === 'dots-end' ? (index$1.h("div", { class: "list_dots" }, index$1.h("xv-button-v2", { variant: "ghost", size: this.size, tabindex: -1 }, index$1.h("span", { slot: "icon-left", class: "list_dots__icon" }, "...")), index$1.h("select", { name: "end", onChange: this.handlePageSelectChange }, Array.from({ length: this.total - (this.page + 2) }, (_, i) => (index$1.h("option", { value: i + this.page + 2 }, i + this.page + 2)))))) : (index$1.h("xv-button-v2", { variant: "ghost", size: this.size, disabled: this.page === page, onClick: () => this.handlePageChange(page) }, index$1.h("span", { class: "list_page", slot: "icon-left" }, page)))))))), index$1.h("xv-button-v2", { key: '14054db39c36ea71b040fbd40d22b109e46ecb27', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page + 1), disabled: this.page >= this.total }, index$1.h("span", { key: 'a42a8b4bd9f297d99b973ea016b98250f3498130', slot: "icon-left", class: "icon icon_next" }))));
|
|
81892
82241
|
}
|
|
81893
82242
|
get el() { return index$1.getElement(this); }
|
|
81894
82243
|
};
|
|
@@ -81957,7 +82306,7 @@ const XvProgressIndicator = class {
|
|
|
81957
82306
|
this.updateChildItems();
|
|
81958
82307
|
}
|
|
81959
82308
|
render() {
|
|
81960
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82309
|
+
return (index$1.h(index$1.Host, { key: '3fcba0ade362eac7bde5ed929617608425e7e386', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, index$1.h("slot", { key: '297b19bda35040fd8d51457b16cce7a09af8fb84' })));
|
|
81961
82310
|
}
|
|
81962
82311
|
get el() { return index$1.getElement(this); }
|
|
81963
82312
|
static get watchers() { return {
|
|
@@ -81976,7 +82325,7 @@ const XvProgressIndicatorItem = class {
|
|
|
81976
82325
|
this.status = PROGRESS_ITEM_STATUS.NO_STARTED;
|
|
81977
82326
|
}
|
|
81978
82327
|
render() {
|
|
81979
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82328
|
+
return (index$1.h(index$1.Host, { key: '33ae32003398c17a6b31ea573f05d6cd33b164c1', status: this.status, class: { 'xv-progress-indicator-item': true } }, index$1.h("span", { key: '560ce3943bf693aa586a9e6df458910b66dad315', class: "line" }), index$1.h("span", { key: 'fab068e39c9e79c78b08fc145978d0e266c52ef0', class: "icon" }, index$1.h("svg", { key: '9c23f9e6e1b746b73771eb70bea8b2e5d02ec3d0', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, index$1.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" }))), index$1.h("p", { key: 'b873572c5b27c14a182e5adad80c6d07f45d84f2', class: "label" }, index$1.h("slot", { key: '480bb80167ad0e136577083b99a411ce080aa88e' }))));
|
|
81980
82329
|
}
|
|
81981
82330
|
get el() { return index$1.getElement(this); }
|
|
81982
82331
|
};
|
|
@@ -82008,12 +82357,12 @@ const XvRadio = class {
|
|
|
82008
82357
|
}
|
|
82009
82358
|
}
|
|
82010
82359
|
render() {
|
|
82011
|
-
return (index$1.h("div", { key: '
|
|
82360
|
+
return (index$1.h("div", { key: '9847de4eae9fd57ad9292e5796232f7ec3c3e0c7', class: {
|
|
82012
82361
|
'xv-radio': true,
|
|
82013
82362
|
'xv-radio--reverse': this.reverse,
|
|
82014
82363
|
'xv-radio--block': this.block,
|
|
82015
82364
|
[`xv-radio--size-${this.size}`]: !!this.size,
|
|
82016
|
-
} }, this.label && index$1.h("p", { key: '
|
|
82365
|
+
} }, this.label && index$1.h("p", { key: '85abe464f3c4810bb2809aa256d7a8e42c074e1c', class: "xv-radio_label" }, this.label), index$1.h("label", { key: '088ab7d61d11b0ca5fc40bdc4ab7f4db07821309', class: { 'xv-radio_container': true, disabled: this.disabled } }, index$1.h("div", { key: '4eae897aaed7152d15d4f2fc5919f2c743041d85', class: { 'xv-radio_input': true, 'xv-radio_input--error': !!this.error || this.error === '' } }, index$1.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 }), index$1.h("span", { key: 'dcecc4aec28c50d13ccd1c45b18b106b8f99ef93', class: "xv-radio_input__mark" })), index$1.h("span", { key: '52e51eb01131ecdecb5047f1990ed120aa3c12d7', class: "xv-radio_container__label" }, index$1.h("slot", { key: 'cb9bbb0d79f29a268828204f482a27a49d9bd798' }))), this.error && typeof this.error === 'string' && (index$1.h("span", { key: 'c085f9c2b913cb4c27c4f9fe88b8941877eb00c4', class: "xv-radio_msg xv-radio_msg--error" }, index$1.h("span", { key: '16d52c226306e20272b08a7dbdeda4ff8ebb4688', class: "xv-radio_msg__status", "aria-hidden": "true" }, "!"), this.error)), this.warning && typeof this.warning === 'string' && (index$1.h("span", { key: '7f67291cc785e20762960a1e183245927e96797c', class: "xv-radio_msg xv-radio_msg--warning" }, index$1.h("span", { key: '9546dfa2c8faf77d4ec949cba0c16a74bd5e8595', class: "xv-radio_msg__status", "aria-hidden": "true" }, "\u26A0"), this.warning)), index$1.h("slot", { key: '59a998219c4e88dfb7fce33fa19a4bced0146b8d', name: "info" })));
|
|
82017
82366
|
}
|
|
82018
82367
|
connectedCallback() {
|
|
82019
82368
|
var _a;
|
|
@@ -82097,7 +82446,7 @@ const XvSlider = class {
|
|
|
82097
82446
|
this.setValue(this.min);
|
|
82098
82447
|
}
|
|
82099
82448
|
render() {
|
|
82100
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82449
|
+
return (index$1.h(index$1.Host, { key: '65f76b767cc84856069973e15e0382a960e95d86', class: { disabled: this.disabled, readonly: this.readonly } }, this.label && index$1.h("label", { key: '72090f7ebd313d9c0787bfe4c52c7f100605fea6', class: "label" }, this.label), index$1.h("div", { key: '21e5907cdf8d0fc5eb8c1a715e0c19c0f43ca03a', class: "control" }, index$1.h("span", { key: '5b2714841a384961abeeadb714f869ce975a047f', class: "control_label" }, this.min), index$1.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%` } }), index$1.h("span", { key: '1fd6ebcf2d08c1b86dcddd0cba504c874821d122', class: "control_label" }, this.max), !this.notEditable && (index$1.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 })))));
|
|
82101
82450
|
}
|
|
82102
82451
|
static get formAssociated() { return true; }
|
|
82103
82452
|
};
|
|
@@ -82112,7 +82461,7 @@ const XvTab = class {
|
|
|
82112
82461
|
this.loading = false;
|
|
82113
82462
|
}
|
|
82114
82463
|
render() {
|
|
82115
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82464
|
+
return (index$1.h(index$1.Host, { key: '7b49de1203b60a0a7b1b25552907eb8339f001ec', disabled: this.disabled, name: this.name }, this.loading ? index$1.h("xv-loader-v2", { size: _vars.SIZE_VAR.LG }) : index$1.h("slot", null)));
|
|
82116
82465
|
}
|
|
82117
82466
|
};
|
|
82118
82467
|
XvTab.style = xvTabCss();
|
|
@@ -82152,7 +82501,7 @@ const XvTable = class {
|
|
|
82152
82501
|
.join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
|
|
82153
82502
|
}
|
|
82154
82503
|
render() {
|
|
82155
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82504
|
+
return (index$1.h(index$1.Host, { key: '3ba40f0c65621b3d748e21ef79d64f7fcaff7241', class: { batchVisible: !!this.selectedCount } }, index$1.h("slot", { key: '157beb3344e8c5ecd87e54eaf8b08448fe6bd573', name: "title" }, !!this.el.title && index$1.h("h2", { key: '95b0ee401a1168c696da0d457d89194c886743f2', class: "xv-table-title" }, this.el.title)), index$1.h("slot", { key: '654a069ce7f51bb9d073ea503b6cf7137b80cf2b', name: "toolbar" }), index$1.h("div", { key: 'bf4fdac5b559f406d9d907252ef8acfbeb397441', class: "xv-table" }, index$1.h("div", { key: '714eca6ae436694503b6af2eb580868d3788b191', class: "batch-actions" }, index$1.h(index$1.Fragment, { key: '8ac8c13cf22de4b14507d0176cf85522abb1c8b5' }, index$1.h("div", { key: '768759186883cec8dbd6ba52dba2e49d94949936', class: "batch-actions_content" }, index$1.h("slot", { key: 'bf6b50edd02317f5cedeb06a95930ef251f5fd2c', name: "batch" })), index$1.h("p", { key: 'b71c2c31bf17acc4c9582aa23f909d9991311f00', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), index$1.h("div", { key: '7b53ba114ec7c9ae56c10e5f85eee416c29428ed', class: "xv-table_wrapper" }, index$1.h("slot", { key: '2e9a401645d0b0a650f7df8d276b5dc8e6b264cc' }), index$1.h("slot", { key: '2d3cd237aea826b672da473ada6e028b37f22a03', name: "footer" })), !!this.loading && (index$1.h("div", { key: '61918a11ff660deac23575a04a3bf44c253ace41', class: "xv-table_loading" }, index$1.h("xv-loader-v2", { key: 'bc3108a52d5f21ba690a25568fe6b8f2b9ea33ac', size: _vars.SIZE_VAR.LG }))))));
|
|
82156
82505
|
}
|
|
82157
82506
|
componentWillLoad() {
|
|
82158
82507
|
this.setColsSizeTemplate();
|
|
@@ -82193,7 +82542,7 @@ const XvTableCell = class {
|
|
|
82193
82542
|
}
|
|
82194
82543
|
;
|
|
82195
82544
|
render() {
|
|
82196
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82545
|
+
return (index$1.h(index$1.Host, { key: '6869366153dd26000e2440df9109daa9df77e777' }, index$1.h("slot", { key: '33baf3aa330babd0e3ee07a6455d83ddf9d3638b' })));
|
|
82197
82546
|
}
|
|
82198
82547
|
get el() { return index$1.getElement(this); }
|
|
82199
82548
|
};
|
|
@@ -82214,7 +82563,7 @@ const XvTableExpand = class {
|
|
|
82214
82563
|
};
|
|
82215
82564
|
}
|
|
82216
82565
|
render() {
|
|
82217
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82566
|
+
return (index$1.h(index$1.Host, { key: 'ccc90f12cd72b5be45d10764413fbf289a3f0811' }, index$1.h("button", { key: '01b2a423cfd638c2791e643ba23e7204d6537d43', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), index$1.h("slot", { key: '805d0c9f40a2649d69876f3b2d277e16a9283dc6', name: XV_EXPANDABLE_KEY }), index$1.h("div", { key: 'cb98360d80b2bef84c6c1917caca61b44f7837e8', class: { expandableContent: true, open: this.open } }, index$1.h("slot", { key: '82b80292c259a05f9c493be080c8006f154b6efb' }))));
|
|
82218
82567
|
}
|
|
82219
82568
|
componentDidLoad() {
|
|
82220
82569
|
index$2.setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
|
|
@@ -82269,7 +82618,7 @@ const XvTableRow = class {
|
|
|
82269
82618
|
}
|
|
82270
82619
|
}
|
|
82271
82620
|
render() {
|
|
82272
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82621
|
+
return (index$1.h(index$1.Host, { key: '84abfd18de14b5e6988b99fad17f46dcef62900a' }, this.variant !== undefined && (index$1.h("xv-table-v2-cell", { key: '901ec86f5753adf2f41f6fae88c816bf462ffd45', class: "cell-control" }, this.variant === 'checkbox' && (index$1.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' && (index$1.h("input", { key: '8363e1d39f4280841618c4ff50d75638af674879', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), index$1.h("slot", { key: '6a8073f779bf9644d757a620253d29167b458ffb' })));
|
|
82273
82622
|
}
|
|
82274
82623
|
componentWillLoad() {
|
|
82275
82624
|
this.setInitialAttrs();
|
|
@@ -82390,7 +82739,7 @@ const XvTabs = class {
|
|
|
82390
82739
|
};
|
|
82391
82740
|
XvTabs.style = xvTabsCss();
|
|
82392
82741
|
|
|
82393
|
-
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}`;
|
|
82742
|
+
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}`;
|
|
82394
82743
|
|
|
82395
82744
|
const XvTagCombobox = class {
|
|
82396
82745
|
constructor(hostRef) {
|
|
@@ -82405,6 +82754,9 @@ const XvTagCombobox = class {
|
|
|
82405
82754
|
this.allowCreate = true;
|
|
82406
82755
|
this.maxSuggestions = 200;
|
|
82407
82756
|
this.disabled = false;
|
|
82757
|
+
// Shows an inline spinner and blocks interaction while an external save is in flight
|
|
82758
|
+
// (e.g. assigning/unassigning tags) — without the greyed-out look of `disabled`.
|
|
82759
|
+
this.loading = false;
|
|
82408
82760
|
this.readonly = false;
|
|
82409
82761
|
this.error = false;
|
|
82410
82762
|
this.warning = false;
|
|
@@ -82426,7 +82778,7 @@ const XvTagCombobox = class {
|
|
|
82426
82778
|
[_vars.SIZE_VAR.XL]: 'lg',
|
|
82427
82779
|
};
|
|
82428
82780
|
this.onKeyDown = (ev) => {
|
|
82429
|
-
if (this.disabled || this.readonly)
|
|
82781
|
+
if (this.disabled || this.readonly || this.loading)
|
|
82430
82782
|
return;
|
|
82431
82783
|
const key = ev.key;
|
|
82432
82784
|
if (key === 'ArrowDown') {
|
|
@@ -82484,10 +82836,13 @@ const XvTagCombobox = class {
|
|
|
82484
82836
|
this.selected = this.valueToOpts(this.value);
|
|
82485
82837
|
this.recomputeFiltered();
|
|
82486
82838
|
this.onDocumentClick = this.onDocumentClick.bind(this);
|
|
82487
|
-
|
|
82839
|
+
// Capture phase: some sibling components (xv-datepicker, xv-overflow-menu, xv-link) call
|
|
82840
|
+
// stopPropagation() on click, which would prevent a bubble-phase listener from ever firing
|
|
82841
|
+
// when the user clicks outside onto them. Capture runs before any descendant can stop it.
|
|
82842
|
+
window.addEventListener('click', this.onDocumentClick, true);
|
|
82488
82843
|
}
|
|
82489
82844
|
disconnectedCallback() {
|
|
82490
|
-
window.removeEventListener('click', this.onDocumentClick);
|
|
82845
|
+
window.removeEventListener('click', this.onDocumentClick, true);
|
|
82491
82846
|
}
|
|
82492
82847
|
watchOptions() {
|
|
82493
82848
|
this.normalizedOptions = this.normalizeOptions(this.options);
|
|
@@ -82533,6 +82888,8 @@ const XvTagCombobox = class {
|
|
|
82533
82888
|
this.filtered = [...starts, ...contains].slice(0, this.maxSuggestions);
|
|
82534
82889
|
}
|
|
82535
82890
|
onInput(e) {
|
|
82891
|
+
if (this.loading)
|
|
82892
|
+
return;
|
|
82536
82893
|
const t = e.target;
|
|
82537
82894
|
this.inputValue = t.value;
|
|
82538
82895
|
this.inputChange.emit(this.inputValue);
|
|
@@ -82541,7 +82898,7 @@ const XvTagCombobox = class {
|
|
|
82541
82898
|
this.recomputeFiltered();
|
|
82542
82899
|
}
|
|
82543
82900
|
selectOption(opt) {
|
|
82544
|
-
if (this.disabled)
|
|
82901
|
+
if (this.disabled || this.loading)
|
|
82545
82902
|
return;
|
|
82546
82903
|
if (!this.selected.find(s => s.value === opt.value)) {
|
|
82547
82904
|
this.selected = [...this.selected, opt];
|
|
@@ -82565,7 +82922,7 @@ const XvTagCombobox = class {
|
|
|
82565
82922
|
removeTag(idx, e) {
|
|
82566
82923
|
var _a;
|
|
82567
82924
|
e === null || e === void 0 ? void 0 : e.preventDefault();
|
|
82568
|
-
if (this.disabled)
|
|
82925
|
+
if (this.disabled || this.loading)
|
|
82569
82926
|
return;
|
|
82570
82927
|
this.selected = this.selected.filter((_, i) => i !== idx);
|
|
82571
82928
|
this.emitChange();
|
|
@@ -82603,13 +82960,13 @@ const XvTagCombobox = class {
|
|
|
82603
82960
|
];
|
|
82604
82961
|
}
|
|
82605
82962
|
onOpen() {
|
|
82606
|
-
if (this.disabled || this.readonly)
|
|
82963
|
+
if (this.disabled || this.readonly || this.loading)
|
|
82607
82964
|
return;
|
|
82608
82965
|
this.open = true;
|
|
82609
82966
|
}
|
|
82610
82967
|
blockClick() {
|
|
82611
82968
|
var _a;
|
|
82612
|
-
if (this.disabled || this.readonly)
|
|
82969
|
+
if (this.disabled || this.readonly || this.loading)
|
|
82613
82970
|
return;
|
|
82614
82971
|
(_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
82615
82972
|
this.onOpen();
|
|
@@ -82627,12 +82984,12 @@ const XvTagCombobox = class {
|
|
|
82627
82984
|
const suggestionsVisible = this.open && this.filtered.length > 0;
|
|
82628
82985
|
const ariaOwns = suggestionsVisible ? `${this.uid}-listbox` : undefined;
|
|
82629
82986
|
const activedesc = this.highlighted >= 0 ? this.optionId(this.highlighted) : undefined;
|
|
82630
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82987
|
+
return (index$1.h(index$1.Host, { key: '3a14655c87e6d715566d304395091bdcfe742652', class: "xv-combobox", part: "root", size: this.size }, this.label && index$1.h("label", { key: '1e51067d648b448ea1367afaeddf597ee23ba4a4', class: "label" }, this.label), index$1.h("div", { key: 'b17d0ec6cfef073a893f955764608cdeead8937c', class: {
|
|
82631
82988
|
'control': true,
|
|
82632
82989
|
'control--disabled': this.disabled,
|
|
82633
82990
|
'control--error': !!this.error,
|
|
82634
82991
|
'control--readonly': !!this.readonly,
|
|
82635
|
-
}, onClick: () => this.blockClick() }, index$1.h("div", { key: '
|
|
82992
|
+
}, onClick: () => this.blockClick() }, index$1.h("div", { key: 'b6707597986341dc70924ba077ed30d5529b7814', class: "control-chips", role: "list" }, this.selected.map((s, i) => (index$1.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))), index$1.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 && (index$1.h("span", { key: 'e0c388e2da8530e765fb1f092af284ab38b2d7a0', class: "control-loader", part: "loader", "aria-hidden": "true" }, index$1.h("xv-loader-v2", { key: 'b3da8bf830b8c1389d4989f88d9177017e0ab603', size: "sm", variant: "horizontal" })))), this.error && typeof this.error === 'string' && (index$1.h("p", { key: '0435384109a1e0b0693b7d9e449d92897c5e02e8', class: "message message--error" }, this.error)), this.warning && typeof this.warning === 'string' && (index$1.h("p", { key: '9d03aaf496e4a2d48aa9909db9564632b99a61b7', class: "message message--warning" }, this.warning)), suggestionsVisible && (index$1.h("ul", { key: '8fb23fee1e8b47cbd089dd89a8e7fd98f4971d68', id: `${this.uid}-listbox`, class: "suggestions", role: "listbox", part: "listbox" }, this.filtered.map((opt, idx) => (index$1.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) }, index$1.h("div", { class: "suggestions-opt-content" }, opt.bg ? index$1.h("span", { class: "suggestions-opt-content--color", style: { background: opt.bg } }) : null, index$1.h("span", { class: "suggestions-opt-content--label" }, this.highlightLabel(opt.label).map((seg, i) => typeof seg === 'string' ? index$1.h("span", { key: i }, seg) : index$1.h("strong", { key: i }, seg.match)))))))))));
|
|
82636
82993
|
}
|
|
82637
82994
|
get host() { return index$1.getElement(this); }
|
|
82638
82995
|
static get watchers() { return {
|
|
@@ -82664,7 +83021,7 @@ const XvTag = class {
|
|
|
82664
83021
|
this.closeClick.emit(e);
|
|
82665
83022
|
}
|
|
82666
83023
|
render() {
|
|
82667
|
-
return (index$1.h(index$1.Host, { key: '
|
|
83024
|
+
return (index$1.h(index$1.Host, { key: '6b2f00a5acec63848ec53f4c23d5444cfd9d9c65', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, index$1.h("div", { key: '7fd4e3e61903755c50668d0c9923afc7915afb5a', class: "xv-tag_content", part: "details-content" }, index$1.h("slot", { key: '26a6b95e5c3dd33b8bcb5b81fa2399338c72fb22' })), this.closeable && (index$1.h("button", { key: 'd14081f320bd61f23c09a99bbafa1abac5f11517', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
|
|
82668
83025
|
}
|
|
82669
83026
|
};
|
|
82670
83027
|
XvTag.style = xvTagCss();
|
|
@@ -82698,13 +83055,13 @@ const XvTextInput = class {
|
|
|
82698
83055
|
};
|
|
82699
83056
|
}
|
|
82700
83057
|
render() {
|
|
82701
|
-
return (index$1.h(index$1.Host, { key: '
|
|
83058
|
+
return (index$1.h(index$1.Host, { key: '8387dcd3101789c9104a378fcca8a820122ada26', class: { disabled: !!this.disabled } }, index$1.h("label", { key: 'ad90119fef9b51d06e64b52e11c8fdde1150a461', class: "control" }, this.label && index$1.h("span", { key: '24d5aba160ccf7cd7df356a147c5f86194683bce', class: "control_label" }, this.label), index$1.h("div", { key: '65ce0ede9c3837d47c29b3f95a53993468ad6b67', class: {
|
|
82702
83059
|
'control_input': true,
|
|
82703
83060
|
readonly: !!this.readonly,
|
|
82704
83061
|
[this.size]: true,
|
|
82705
83062
|
error: !!this.error,
|
|
82706
83063
|
warning: !!this.warning,
|
|
82707
|
-
} }, index$1.h("input", { key: '
|
|
83064
|
+
} }, index$1.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 }), index$1.h("div", { key: 'a72facc2aae1c24dda755aba84eb284b5bd76024', class: "control_input__icons" }, this.loading && index$1.h("xv-loader-v2", { key: '648fba1f66bf7a1ce7d08dd0eb921d772659b4a5', size: _vars.SIZE_VAR.XS }), !!this.error ? (index$1.h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (index$1.h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null, this.type === 'password' && (index$1.h("button", { key: 'a5ef25d6ccecef77953943f3c22c7586f90e575b', onClick: this.togglePassword, disabled: this.disabled, class: "status-icon" }, index$1.h("svg", { key: '34cdf5a09935c2c46a94c7db1693f45d6f3f4afe', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 512", width: 16, height: 16 }, this.isPasswordVisible ? (index$1.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" })) : (index$1.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 && index$1.h("p", { key: 'cb7926af03a4faa965e34f3a1edcb55145da1d7c', class: "message" }, this.helper), typeof this.error === 'string' ? (index$1.h("p", { class: "message error" }, this.error)) : typeof this.warning === 'string' ? (index$1.h("p", { class: "message warning" }, this.warning)) : null));
|
|
82708
83065
|
}
|
|
82709
83066
|
static get formAssociated() { return true; }
|
|
82710
83067
|
};
|
|
@@ -82741,12 +83098,12 @@ const XvTextarea = class {
|
|
|
82741
83098
|
this.value && this.internals.setFormValue(this.value);
|
|
82742
83099
|
}
|
|
82743
83100
|
render() {
|
|
82744
|
-
return (index$1.h(index$1.Host, { key: '
|
|
83101
|
+
return (index$1.h(index$1.Host, { key: '0d6ad5edfcf8fb6773d78a643aa704cdfecc12a0', class: { disabled: !!this.disabled } }, index$1.h("label", { key: '4d3c7642d2b5be570e40310e9468862446dc32fb', class: "control" }, (this.label || this.max) && (index$1.h("p", { key: 'ca2d4769a3fb69f1afd35e0723de1007fdd78c79', class: "control_label" }, index$1.h("span", { key: '1e6aab8fcfbb386f12da1eb6fc7a6dd526e94fdf' }, this.label, this.info && index$1.h("xv-tooltip-v2", { key: '6bc26411f61475177cf92753e0776424c7d7d634', message: this.info })), this.max !== undefined && !this.counterHide && (index$1.h("span", { key: 'f65de7346b7ca086e11acca0a4c4c7f0767b4ae8', class: "control_label__count" }, this.value.length || 0, "/", this.max)))), index$1.h("div", { key: '492ff2c4fb75057050d5a4b7db3d9ac10f282418', class: {
|
|
82745
83102
|
'control_input': true,
|
|
82746
83103
|
readonly: !!this.readonly,
|
|
82747
83104
|
error: !!this.error,
|
|
82748
83105
|
warning: this.warning !== undefined,
|
|
82749
|
-
} }, index$1.h("textarea", { key: '
|
|
83106
|
+
} }, index$1.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 }), index$1.h("div", { key: 'd472bb9145c8e1ce7252a290d28bbf8369e45bdd', class: "control_input__icons" }, this._renderIcon()))), this.helper && index$1.h("p", { key: '9dcd6fb14615c2471eb3848c7fd2513874cd6035', class: "message" }, this.helper), typeof this.error === 'string' ? (index$1.h("p", { class: "message error" }, this.error)) : typeof this.warning === 'string' ? (index$1.h("p", { class: "message warning" }, this.warning)) : null));
|
|
82750
83107
|
}
|
|
82751
83108
|
_renderIcon() {
|
|
82752
83109
|
if (this.loading)
|
|
@@ -82797,7 +83154,7 @@ const XvTile = class {
|
|
|
82797
83154
|
this.checked = !this.checked;
|
|
82798
83155
|
}
|
|
82799
83156
|
render() {
|
|
82800
|
-
return (index$1.h(index$1.Host, { key: '
|
|
83157
|
+
return (index$1.h(index$1.Host, { key: 'ec3ba694a1f3eb783b60fecbcdd14287d588c4de', class: "xv-tile--host" }, index$1.h("label", { key: '65a21f79a250dd79316d064dde627f6fe5b2805b', class: {
|
|
82801
83158
|
[this.el.className]: !!this.el.className,
|
|
82802
83159
|
'xv-tile': true,
|
|
82803
83160
|
[`xv-tile--variant-${this.variant}`]: !!this.variant,
|
|
@@ -82805,7 +83162,7 @@ const XvTile = class {
|
|
|
82805
83162
|
'xv-tile--disabled': !!this.disabled,
|
|
82806
83163
|
'selected': !!this.checked,
|
|
82807
83164
|
'xv-tile--error': !!this.error,
|
|
82808
|
-
} }, index$1.h("div", { key: '
|
|
83165
|
+
} }, index$1.h("div", { key: '761e9416ca4b1754e03316de73fee32efb023152', class: "xv-tile_content" }, this.label && index$1.h("p", { key: '496e4275da6567d1264a38b69b78cf8283c640d0', class: "xv-tile_content__title" }, this.label), index$1.h("slot", { key: '567e6e6a8d0cd895ba9edc4f5b5377763ab10108' })), this.variant === 'selectable' && (index$1.h("div", { key: '2eb9b60a3eb578c88002160e9e7adcee7d209056', class: "xv-tile_control" }, this.multiple ? (index$1.h("input", { type: "checkbox", disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })) : (index$1.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') && (index$1.h("div", { key: 'd4c28994dde438425291164e59ec08e08e4eaaf8', class: "xv-tile_footer" }, index$1.h("button", { key: 'da3f09412c3e88322484cf51eb5a7f0878e4a1fc', class: { 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked } }))), index$1.h("div", { key: '28c41a2a9021f39672c45ecee44bc6aad691dc9d', class: { 'xv-tile_expandable': true, open: this.checked } }, index$1.h("slot", { key: 'ebd93394a333447d68881658ed80b6341205586c', name: "expandable" })))));
|
|
82809
83166
|
}
|
|
82810
83167
|
get el() { return index$1.getElement(this); }
|
|
82811
83168
|
};
|
|
@@ -82837,7 +83194,7 @@ const XvToggle = class {
|
|
|
82837
83194
|
};
|
|
82838
83195
|
}
|
|
82839
83196
|
render() {
|
|
82840
|
-
return (index$1.h(index$1.Host, { key: '
|
|
83197
|
+
return (index$1.h(index$1.Host, { key: '824523810a78d1bfd3fd5278913047d97f330c2c', class: { 'xv-toggle': true, disabled: this.disabled, readonly: !!this.readonly, block: !!this.block } }, this.label && index$1.h("span", { key: '7ba4c98ffa0443a330c7010d9e41f36ae6be558b', class: "label" }, this.label), index$1.h("label", { key: 'd581495423115bcca7b9c0517f5523dc88350b64', class: "control" }, index$1.h("slot", { key: 'f7b1184d763da297f9687ccce68dfbafbb189c08', name: "before" }), index$1.h("div", { key: '03a6f7dc0bc8020894524bd5b316e1b88201f247', class: "control_input" }, index$1.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 }), index$1.h("span", { key: '8e2af7a7f3a075982c7b7e8103d6d03946f901c4', class: "toggle" })), index$1.h("slot", { key: 'd249ca7ca0e97f12ba7921a12f5480a77bc9560f', name: "after" }))));
|
|
82841
83198
|
}
|
|
82842
83199
|
static get formAssociated() { return true; }
|
|
82843
83200
|
};
|
|
@@ -82914,7 +83271,7 @@ const XvToggleTip = class {
|
|
|
82914
83271
|
}
|
|
82915
83272
|
;
|
|
82916
83273
|
render() {
|
|
82917
|
-
return (index$1.h(index$1.Host, { key: '
|
|
83274
|
+
return (index$1.h(index$1.Host, { key: '95144bb5e1e8e7dfe22f7191d9920f902b8f0d1b', class: "xv-toggle-tip" }, index$1.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) }, index$1.h("slot", { key: '905567440f32e2fdeba80cede5506e2a51e9da99', name: "trigger" }, index$1.h("svg", { key: 'b3db10d581509498b3905749e1aac47c7c04c99e', class: "trigger_icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, index$1.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" })))), index$1.h("div", { key: '3f652e88df9d5fc7f4b757b2c4e99ae095ce784e', class: { popover: true, autoSize: !!this.autoSize }, role: "tooltip", tabindex: "-1", ref: (el) => (this.popoverEl = el) }, index$1.h("div", { key: 'c0ba1c8d7e51dc0cc6e02ebf1f0c698778dbe4cd', class: "popover-tip", part: "tip", "data-popper-arrow": "" }), index$1.h("div", { key: '13a4ca0eea582bd93ca920cd3664a10fe6861921', class: "popover-content" }, index$1.h("slot", { key: '44bacb0a3f6e02a2ed2d389e76fb518a890c9e9d', name: "header" }), index$1.h("slot", { key: 'f41b3b2d09f670dfcae2b91bf6ced0ec6eb291c6', name: "body" }), index$1.h("slot", { key: '59f1312c1307273e7fcdf2438f0f67aee0741a6a', name: "footer" })))));
|
|
82918
83275
|
}
|
|
82919
83276
|
disconnectedCallback() {
|
|
82920
83277
|
this.destroyPopper();
|
|
@@ -82969,11 +83326,11 @@ const XvTooltip = class {
|
|
|
82969
83326
|
this.destroyTooltip();
|
|
82970
83327
|
}
|
|
82971
83328
|
render() {
|
|
82972
|
-
return (index$1.h(index$1.Host, { key: '
|
|
83329
|
+
return (index$1.h(index$1.Host, { key: '980414b5a2987f07d7a2b5fe6e26f3fc6e8740a4', role: "tooltip", class: {
|
|
82973
83330
|
'xv-tooltip-wrapper': true,
|
|
82974
83331
|
[`xv-tooltip-wrapper__block`]: !!this.block,
|
|
82975
83332
|
[`xv-tooltip-wrapper__dashed`]: !!this.dashed,
|
|
82976
|
-
} }, index$1.h("slot", { key: '
|
|
83333
|
+
} }, index$1.h("slot", { key: '2ec5dd1c79e1702cc33ac5ab63b38e590824ae9f' }, index$1.h("svg", { key: '801c3f35ef506e36fc002cab0cf803f29ac89964', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, index$1.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" })))));
|
|
82977
83334
|
}
|
|
82978
83335
|
get el() { return index$1.getElement(this); }
|
|
82979
83336
|
};
|
|
@@ -82982,6 +83339,7 @@ XvTooltip.style = xvTooltipCss();
|
|
|
82982
83339
|
exports.xv_accordion_v2 = XvAccordion;
|
|
82983
83340
|
exports.xv_accordion_v2_item = XvAccordionItem;
|
|
82984
83341
|
exports.xv_breadcrumbs_v2 = XvBreadcrumbs;
|
|
83342
|
+
exports.xv_button_group_v2 = XvButtonGroup;
|
|
82985
83343
|
exports.xv_button_v2 = XvButton;
|
|
82986
83344
|
exports.xv_card_v2 = XvCard;
|
|
82987
83345
|
exports.xv_checkbox_v2 = XvCheckbox;
|