xv-webcomponents 1.17.1-staging.0 → 1.17.3-dev.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/loader.cjs.js +1 -1
- package/dist/cjs/{xv-accordion-v2_45.cjs.entry.js → xv-accordion-v2_47.cjs.entry.js} +402 -67
- package/dist/cjs/xv-header-next.cjs.entry.js +1 -1
- 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 +2 -0
- package/dist/collection/components/xv-content-switcher/_vars.js +14 -0
- package/dist/collection/components/xv-content-switcher/xv-content-switcher-item/xv-content-switcher-item.css +134 -0
- package/dist/collection/components/xv-content-switcher/xv-content-switcher-item/xv-content-switcher-item.js +118 -0
- package/dist/collection/components/xv-content-switcher/xv-content-switcher.css +275 -0
- package/dist/collection/components/xv-content-switcher/xv-content-switcher.js +310 -0
- 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.css +4 -4
- 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.css +23 -6
- package/dist/collection/components/xv-dropdown/xv-dropdown.js +205 -4
- 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.js +1 -1
- 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.css +6 -3
- package/dist/collection/components/xv-number-input/xv-number-input.js +2 -2
- package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js +1 -1
- package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.js +2 -2
- 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.css +2 -2
- package/dist/collection/components/xv-radio/xv-radio.js +2 -2
- package/dist/collection/components/xv-slider/xv-slider.css +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 +2 -2
- package/dist/collection/components/xv-tag-combobox/xv-tag-combobox.js +2 -2
- package/dist/collection/components/xv-text-input/xv-text-input.css +1 -1
- package/dist/collection/components/xv-text-input/xv-text-input.js +2 -2
- package/dist/collection/components/xv-textarea/xv-textarea.css +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/loader.js +1 -1
- package/dist/esm/{xv-accordion-v2_45.entry.js → xv-accordion-v2_47.entry.js} +401 -68
- package/dist/esm/xv-header-next.entry.js +1 -1
- package/dist/esm/xv-mega-menu-next.entry.js +2 -2
- package/dist/esm/xv-webcomponents.js +1 -1
- package/dist/types/components/xv-content-switcher/_vars.d.ts +13 -0
- package/dist/types/components/xv-content-switcher/xv-content-switcher-item/xv-content-switcher-item.d.ts +32 -0
- package/dist/types/components/xv-content-switcher/xv-content-switcher.d.ts +78 -0
- package/dist/types/components/xv-dropdown/xv-dropdown.d.ts +24 -1
- package/dist/types/components.d.ts +249 -0
- package/dist/xv-webcomponents/{p-1b5a4f4c.entry.js → p-1cb6cc34.entry.js} +1 -1
- package/dist/xv-webcomponents/p-422065b1.entry.js +8 -0
- package/dist/xv-webcomponents/{p-50f8cd72.entry.js → p-dc64e134.entry.js} +1 -1
- package/dist/xv-webcomponents/xv-webcomponents.esm.js +1 -1
- package/package.json +1 -1
- package/dist/xv-webcomponents/p-593183a5.entry.js +0 -8
|
@@ -271,6 +271,164 @@ const XvCheckbox = class {
|
|
|
271
271
|
};
|
|
272
272
|
XvCheckbox.style = xvCheckboxCss();
|
|
273
273
|
|
|
274
|
+
const xvContentSwitcherItemCss = () => `.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;color:var(--text-primary, #131313);font-family:var(--ff-body, Work Sans), sans-serif;font-size:var(--fz-md, 14px);line-height:20px}`;
|
|
275
|
+
|
|
276
|
+
const XvContentSwitcherItem = class {
|
|
277
|
+
constructor(hostRef) {
|
|
278
|
+
index$1.registerInstance(this, hostRef);
|
|
279
|
+
/**
|
|
280
|
+
* Disable this single item.
|
|
281
|
+
*/
|
|
282
|
+
this.disabled = false;
|
|
283
|
+
}
|
|
284
|
+
render() {
|
|
285
|
+
return (index$1.h(index$1.Host, { key: 'f5941bc31bc62601e4cb19608cabe011befbcc85' }, index$1.h("slot", { key: 'c73c71ce1faeeff03050861ada57207b4e358426' })));
|
|
286
|
+
}
|
|
287
|
+
};
|
|
288
|
+
XvContentSwitcherItem.style = xvContentSwitcherItemCss();
|
|
289
|
+
|
|
290
|
+
var CONTENT_SWITCHER_TAGS;
|
|
291
|
+
(function (CONTENT_SWITCHER_TAGS) {
|
|
292
|
+
CONTENT_SWITCHER_TAGS["SWITCHER"] = "xv-content-switcher-v2";
|
|
293
|
+
CONTENT_SWITCHER_TAGS["ITEM"] = "xv-content-switcher-item-v2";
|
|
294
|
+
})(CONTENT_SWITCHER_TAGS || (CONTENT_SWITCHER_TAGS = {}));
|
|
295
|
+
/**
|
|
296
|
+
* Keys that move the selection inside the switcher (Carbon: automatic activation).
|
|
297
|
+
*/
|
|
298
|
+
const CONTENT_SWITCHER_NAV_KEYS = {
|
|
299
|
+
NEXT: ['ArrowRight', 'ArrowDown'],
|
|
300
|
+
PREV: ['ArrowLeft', 'ArrowUp'],
|
|
301
|
+
FIRST: ['Home'],
|
|
302
|
+
LAST: ['End'],
|
|
303
|
+
};
|
|
304
|
+
|
|
305
|
+
const xvContentSwitcherCss = () => `.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-block;text-align:left;font-family:var(--ff-body, Work Sans), sans-serif}:host([block]){display:block}:host([block]) .switcher{display:grid}.switcher{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;border:1px solid var(--border-inverse, #131313);border-radius:4px;overflow:hidden}.switcher_item{all:unset;box-sizing:border-box;position:relative;min-width:0;display:inline-flex;align-items:center;justify-content:flex-start;gap:var(--spacing-03, 8px);cursor:pointer;color:var(--text-secondary, #515151);background-color:transparent;font-family:inherit;font-size:var(--fz-md, 14px);font-weight:400;line-height:18px;letter-spacing:0.16px;transition:background-color 0.2s ease, color 0.2s ease}.switcher_item+.switcher_item::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:16px;background-color:var(--border-subtle-01, #d1d1d1)}.switcher_item-icon{display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1;color:var(--icon-primary, #131313)}.switcher_item-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.switcher_item:hover:not(.selected):not(:disabled){background-color:var(--background-hover, rgba(139, 139, 139, 0.12))}.switcher_item:focus-visible{outline:2px solid var(--focus, #0f62fe);outline-offset:-2px}.switcher_item.selected{background-color:var(--background-inverse, #333333);color:var(--text-inverse, #fff)}.switcher_item.selected .switcher_item-icon{color:var(--icon-on-color, #fff)}.switcher_item.selected:hover{background-color:var(--background-inverse-hover, #515151)}.switcher_item.selected::before,.switcher_item.selected+.switcher_item::before{display:none}.switcher_item:disabled{cursor:not-allowed;color:var(--text-disabled, rgba(19, 19, 19, 0.25))}.switcher_item:disabled .switcher_item-icon{color:var(--icon-disabled, rgba(19, 19, 19, 0.25))}.switcher_item:disabled.selected{background-color:var(--button-disabled, #d1d1d1);color:var(--text-disabled, rgba(19, 19, 19, 0.25))}.switcher_item:disabled.selected .switcher_item-icon{color:var(--icon-on-color-disabled, #8b8b8b)}.switcher_content:focus{outline:none}:host([disabled]) .switcher{border-color:var(--border-disabled, #d1d1d1)}:host([disabled]) .switcher .switcher_item::before{background-color:var(--border-disabled, #d1d1d1)}::slotted(xv-content-switcher-item-v2){display:none}::slotted(xv-content-switcher-item-v2.active){display:block}:host([size=sm]) .switcher_item{padding:7px var(--spacing-05, 16px)}:host(:not([size])) .switcher_item,:host([size=md]) .switcher_item{padding:11px var(--spacing-05, 16px)}:host([size=lg]) .switcher_item{padding:15px var(--spacing-05, 16px)}:host([icon-only]) .switcher_item{justify-content:center;gap:0}:host([icon-only][size=sm]) .switcher_item{padding:8px}:host([icon-only]:not([size])) .switcher_item,:host([icon-only][size=md]) .switcher_item{padding:12px}:host([icon-only][size=lg]) .switcher_item{padding:14px}`;
|
|
306
|
+
|
|
307
|
+
const XvContentSwitcher = class {
|
|
308
|
+
constructor(hostRef) {
|
|
309
|
+
index$1.registerInstance(this, hostRef);
|
|
310
|
+
this.selectedChange = index$1.createEvent(this, "selectedChange", 7);
|
|
311
|
+
/**
|
|
312
|
+
* Control size. Only `sm`, `md` and `lg` are supported (defaults to `md`).
|
|
313
|
+
*/
|
|
314
|
+
this.size = _vars.SIZE_VAR.MD;
|
|
315
|
+
/**
|
|
316
|
+
* Render items as icon-only buttons (the item `label` is used as the accessible name).
|
|
317
|
+
*/
|
|
318
|
+
this.iconOnly = false;
|
|
319
|
+
/**
|
|
320
|
+
* Disable the whole switcher.
|
|
321
|
+
*/
|
|
322
|
+
this.disabled = false;
|
|
323
|
+
/**
|
|
324
|
+
* Stretch the switcher to the full width of its container.
|
|
325
|
+
*/
|
|
326
|
+
this.block = false;
|
|
327
|
+
/**
|
|
328
|
+
* Controlled mode. When `true`, clicking/keyboard navigation does NOT change
|
|
329
|
+
* the selection on its own — it only emits `selectedChange` with the requested
|
|
330
|
+
* value. The consumer fully owns `selected` and decides whether to commit it
|
|
331
|
+
* (e.g. after an async confirmation), so a switch can be vetoed without flicker.
|
|
332
|
+
*/
|
|
333
|
+
this.controlled = false;
|
|
334
|
+
/**
|
|
335
|
+
* Collected `xv-content-switcher-item-v2` children.
|
|
336
|
+
*/
|
|
337
|
+
this.items = [];
|
|
338
|
+
this.collectItems = () => {
|
|
339
|
+
this.items = Array.from(this.el.querySelectorAll(CONTENT_SWITCHER_TAGS.ITEM));
|
|
340
|
+
// Default to the first item when nothing valid is selected yet.
|
|
341
|
+
if (!this.isSelectionValid()) {
|
|
342
|
+
const firstEnabled = this.items.findIndex((item) => !this.isItemDisabled(item));
|
|
343
|
+
if (firstEnabled !== -1)
|
|
344
|
+
this.selected = this.getItemKey(this.items[firstEnabled], firstEnabled);
|
|
345
|
+
}
|
|
346
|
+
};
|
|
347
|
+
this.handleKeyDown = (event, index) => {
|
|
348
|
+
var _a, _b;
|
|
349
|
+
const { NEXT, PREV, FIRST, LAST } = CONTENT_SWITCHER_NAV_KEYS;
|
|
350
|
+
let nextIndex = null;
|
|
351
|
+
if (NEXT.includes(event.key))
|
|
352
|
+
nextIndex = this.findEnabled(index + 1, 1);
|
|
353
|
+
else if (PREV.includes(event.key))
|
|
354
|
+
nextIndex = this.findEnabled(index - 1, -1);
|
|
355
|
+
else if (FIRST.includes(event.key))
|
|
356
|
+
nextIndex = this.findEnabled(0, 1);
|
|
357
|
+
else if (LAST.includes(event.key))
|
|
358
|
+
nextIndex = this.findEnabled(this.items.length - 1, -1);
|
|
359
|
+
else
|
|
360
|
+
return;
|
|
361
|
+
event.preventDefault();
|
|
362
|
+
if (nextIndex === null)
|
|
363
|
+
return;
|
|
364
|
+
this.select(this.getItemKey(this.items[nextIndex], nextIndex));
|
|
365
|
+
// Move focus to the newly selected button (roving tabindex).
|
|
366
|
+
const buttons = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.switcher_item');
|
|
367
|
+
(_b = buttons === null || buttons === void 0 ? void 0 : buttons[nextIndex]) === null || _b === void 0 ? void 0 : _b.focus();
|
|
368
|
+
};
|
|
369
|
+
}
|
|
370
|
+
componentWillLoad() {
|
|
371
|
+
// `slotchange` handles dynamic updates; collect once up front for the
|
|
372
|
+
// items present at load so the first render already has its buttons.
|
|
373
|
+
this.collectItems();
|
|
374
|
+
}
|
|
375
|
+
componentDidRender() {
|
|
376
|
+
// Mirror the selected state onto the slotted items so their content panels
|
|
377
|
+
// show/hide (see `::slotted(...active)` in the stylesheet).
|
|
378
|
+
this.updateItemsState();
|
|
379
|
+
}
|
|
380
|
+
getItemKey(item, index) {
|
|
381
|
+
const value = item.getAttribute('value');
|
|
382
|
+
return value !== null && value !== '' ? value : index;
|
|
383
|
+
}
|
|
384
|
+
isItemDisabled(item) {
|
|
385
|
+
return this.disabled || item.hasAttribute('disabled');
|
|
386
|
+
}
|
|
387
|
+
isSelected(item, index) {
|
|
388
|
+
return this.selected !== undefined && `${this.getItemKey(item, index)}` === `${this.selected}`;
|
|
389
|
+
}
|
|
390
|
+
isSelectionValid() {
|
|
391
|
+
return this.items.some((item, index) => this.isSelected(item, index));
|
|
392
|
+
}
|
|
393
|
+
select(key) {
|
|
394
|
+
if (this.disabled || `${key}` === `${this.selected}`)
|
|
395
|
+
return;
|
|
396
|
+
// In controlled mode the consumer owns `selected`; only announce the intent.
|
|
397
|
+
if (!this.controlled)
|
|
398
|
+
this.selected = key;
|
|
399
|
+
this.selectedChange.emit(key);
|
|
400
|
+
}
|
|
401
|
+
/** Reflect the `active` class on items so their slotted content shows/hides. */
|
|
402
|
+
updateItemsState() {
|
|
403
|
+
this.items.forEach((item, index) => {
|
|
404
|
+
if (this.isSelected(item, index))
|
|
405
|
+
item.classList.add('active');
|
|
406
|
+
else
|
|
407
|
+
item.classList.remove('active');
|
|
408
|
+
});
|
|
409
|
+
}
|
|
410
|
+
/** Find the next non-disabled item starting at `from`, walking by `step`. */
|
|
411
|
+
findEnabled(from, step) {
|
|
412
|
+
for (let i = from; i >= 0 && i < this.items.length; i += step) {
|
|
413
|
+
if (!this.isItemDisabled(this.items[i]))
|
|
414
|
+
return i;
|
|
415
|
+
}
|
|
416
|
+
return null;
|
|
417
|
+
}
|
|
418
|
+
render() {
|
|
419
|
+
return (index$1.h(index$1.Host, { key: '2f783317e906b04632e2666b27956c3d772f2979' }, index$1.h("div", { key: '9f008bfcd3a6e8e075a14b13dbcb406d97db7fff', class: "switcher", role: "tablist", "aria-orientation": "horizontal" }, this.items.map((item, index) => {
|
|
420
|
+
const key = this.getItemKey(item, index);
|
|
421
|
+
const selected = this.isSelected(item, index);
|
|
422
|
+
const itemDisabled = this.isItemDisabled(item);
|
|
423
|
+
const label = item.getAttribute('label') || '';
|
|
424
|
+
const icon = item.getAttribute('icon');
|
|
425
|
+
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: 'ab00606b5b8d464ef1eb564030478191128319ae', class: "switcher_content", role: "tabpanel", tabindex: -1 }, index$1.h("slot", { key: '3977d4f17947f12f586fe4bbe0f1f9c81ef1ad18', onSlotchange: this.collectItems }))));
|
|
427
|
+
}
|
|
428
|
+
get el() { return index$1.getElement(this); }
|
|
429
|
+
};
|
|
430
|
+
XvContentSwitcher.style = xvContentSwitcherCss();
|
|
431
|
+
|
|
274
432
|
/**!
|
|
275
433
|
* Sortable 1.15.7
|
|
276
434
|
* @author RubaXa <trash@rubaxa.org>
|
|
@@ -3030,7 +3188,7 @@ const XvDataTable = class {
|
|
|
3030
3188
|
this.initSortable();
|
|
3031
3189
|
}
|
|
3032
3190
|
render() {
|
|
3033
|
-
return (index$1.h(index$1.Host, { key: '
|
|
3191
|
+
return (index$1.h(index$1.Host, { key: 'aef386c711cc3ae043d1228cac0b87737f9b70f1', class: "xv-data-table" }, index$1.h("caption", { key: 'a6577aba4dbbc50f6c953e25b533585b01d188ac' }, index$1.h("slot", { key: '02b1c865868d5fae89a558d35f7f7047cfd3ed3e', name: "title" })), index$1.h("div", { key: '19466d4e9e89a628d9df5ced1ac73c72d77650d2', class: "bar" }, index$1.h("div", { key: 'ec12712ac2b23d1f5ec2efe97cc5f5849e22808d', class: "bar_batch" }, index$1.h("slot", { key: '88e51529ecaffbda842b143e59caf60250ea3f66', name: "batch" })), index$1.h("div", { key: '3d7faf0d529a73e62a7e6e9ba567b9359c1ad795', class: "bar_toolbar" }, index$1.h("slot", { key: '1b4b5d8309eb02c98319be1b5b2c2fb9bf3b4b71', name: "toolbar" }))), index$1.h("table", { key: '7a3fc93e97d5e0cdc6a6a913609732e17f28aa01', role: "table" }, this.columnWidths.length > 0 && (index$1.h("colgroup", { key: '3ba295f8bfd44c1cc38c20c00131ce9ecb72e531' }, this.columnWidths.map((width = 'auto') => index$1.h("col", { style: { width } })))), index$1.h("thead", { key: 'a559bfeb5663ffcc0e4498a4efb667c85cb4b38d' }, index$1.h("slot", { key: 'aa87d90376a00bff11290ff41798162fae2a56a5', name: "header" })), index$1.h("tbody", { key: 'b8c6f100aa44110756317925b63fefbd44592e6b' }, index$1.h("slot", { key: 'e80e2461de26f46ccdef560d3bbd4357403a3a2e' })), index$1.h("tfoot", { key: '7a456ccbc039cd954417e7eb4880947e6199a8b3' }, index$1.h("slot", { key: 'ad358cf3e113802cf297bcd01d02ced5bbcd9cdf', name: "footer" }))), !!this.loading && (index$1.h("div", { key: 'f4b8dad2f9dea6da37797a41c3258c08b5d98761', class: "loading" }, index$1.h("xv-loader-v2", { key: '49d3273a7b869bb94584e3dac6f4099a404d1697', size: _vars.SIZE_VAR.LG })))));
|
|
3034
3192
|
}
|
|
3035
3193
|
get el() { return index$1.getElement(this); }
|
|
3036
3194
|
static get watchers() { return {
|
|
@@ -3071,7 +3229,7 @@ const XvDataTableCell = class {
|
|
|
3071
3229
|
}
|
|
3072
3230
|
;
|
|
3073
3231
|
render() {
|
|
3074
|
-
return (index$1.h(index$1.Host, { key: '
|
|
3232
|
+
return (index$1.h(index$1.Host, { key: '4c47f740484cd42899ed300c2300a4955767e494', role: "cell", style: { width: this.width }, class: {
|
|
3075
3233
|
multiline: this.multiline !== undefined,
|
|
3076
3234
|
[`align--${this.align}`]: !!this.align
|
|
3077
3235
|
} }, !this.multiline || isNaN(this.multiline) ? this.__renderWithTooltip() : (index$1.h("div", { class: "line-clamp", style: { ['-webkit-line-clamp']: `${this.multiline}` } }, this.__renderWithTooltip()))));
|
|
@@ -3104,7 +3262,7 @@ const XvDataTableCollapse = class {
|
|
|
3104
3262
|
rows.forEach((row) => row === null || row === void 0 ? void 0 : row.setAttribute('collapsable', ''));
|
|
3105
3263
|
}
|
|
3106
3264
|
render() {
|
|
3107
|
-
return (index$1.h(index$1.Host, { key: '
|
|
3265
|
+
return (index$1.h(index$1.Host, { key: 'b4b9610e77edd0a4eb5669784a12df6c06d57398', id: this.el.id, part: "xv-collapse", class: this.el.className, collapsed: this.collapsed, expanded: !this.collapsed }, index$1.h("slot", { key: 'b6aa331515b8bcd5884f9b72e6fd46515adadf3c' })));
|
|
3108
3266
|
}
|
|
3109
3267
|
get el() { return index$1.getElement(this); }
|
|
3110
3268
|
};
|
|
@@ -3187,7 +3345,7 @@ const XvDataTableRow = class {
|
|
|
3187
3345
|
const isGroup = !!this.collapse || !!this.group;
|
|
3188
3346
|
const isDraggableRow = this.reorderable && !isHeader && !isFooter && !this.group;
|
|
3189
3347
|
const showHandleCell = this.reorderable && this.reorderHandleMode === 'icon';
|
|
3190
|
-
return (index$1.h(index$1.Host, { key: '
|
|
3348
|
+
return (index$1.h(index$1.Host, { key: '220e41fb2db763b39ac56de16fa305226fef268b', role: "row", part: "xv-row", class: {
|
|
3191
3349
|
checked: this.checked,
|
|
3192
3350
|
hover: this.hover,
|
|
3193
3351
|
disabled: this.disabled,
|
|
@@ -3195,7 +3353,7 @@ const XvDataTableRow = class {
|
|
|
3195
3353
|
header: isHeader,
|
|
3196
3354
|
footer: isFooter,
|
|
3197
3355
|
'reorder-row': isDraggableRow && this.reorderHandleMode === 'row',
|
|
3198
|
-
} }, showHandleCell && (index$1.h("xv-data-table-cell", { key: '
|
|
3356
|
+
} }, showHandleCell && (index$1.h("xv-data-table-cell", { key: 'c9d60451fb1781b94c2df312713173953c77998c', width: "16px", class: "cell-control cell-control--drag" }, isDraggableRow && (index$1.h("span", { key: '06f681f0aa1fad4d798aa84ad7123b55f5aaa7c5', class: `cell-control_drag ${XV_ROW_DRAG_HANDLE_CLASS}`, "aria-label": "Drag to reorder" }, index$1.h("svg", { key: '5f6bd2e58cd7dca1f1843c4b8868409cb7144023', viewBox: "0 0 8 14", width: "8", height: "14", fill: "currentColor", "aria-hidden": "true" }, index$1.h("circle", { key: '87b663ee0b2ac198cb69476814a2c097d6b1d2c9', cx: "2", cy: "2", r: "1.2" }), index$1.h("circle", { key: '3917cefb67ebcd2b8c26df7b9d4a2e1ad5023bc0', cx: "6", cy: "2", r: "1.2" }), index$1.h("circle", { key: '1f1778da1585511f8d9dd0ca4bcc8558e0610574', cx: "2", cy: "7", r: "1.2" }), index$1.h("circle", { key: '3e090df05f5eef959e4237213d2df95cd2c758c6', cx: "6", cy: "7", r: "1.2" }), index$1.h("circle", { key: 'f2c3c6e39482536f968fb3dfe2da518035388189', cx: "2", cy: "12", r: "1.2" }), index$1.h("circle", { key: 'be761faf2e9741c520e89e84b3c6d5c71d44826e', cx: "6", cy: "12", r: "1.2" })))))), (!!this.variant || this.collapsable) && (index$1.h("xv-data-table-cell", { key: '8d028993f15499799658c5c3f34be69b1eee807f', width: !!this.variant ? '16px' : '0', class: "cell-control" }, !!this.collapse && (index$1.h("button", { key: '29e7e558765f1c9b034b37f2cee10784662924c4', class: { 'cell-control_collapse': true, open: !this.collapsed }, onClick: this.collapseClick })), this.variant === 'checkbox' && (index$1.h("xv-checkbox-v2", { key: '062b73dfe88f5591975a5996e5bfa5b76faec1c0', 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: 'c9011f9b8ef09affaf7c707e554fdeff6e28943e', onSlotchange: this.setInitialState })));
|
|
3199
3357
|
}
|
|
3200
3358
|
get el() { return index$1.getElement(this); }
|
|
3201
3359
|
};
|
|
@@ -78581,7 +78739,7 @@ function contains(parent, child) {
|
|
|
78581
78739
|
return false;
|
|
78582
78740
|
}
|
|
78583
78741
|
|
|
78584
|
-
function getComputedStyle(element) {
|
|
78742
|
+
function getComputedStyle$1(element) {
|
|
78585
78743
|
return getWindow(element).getComputedStyle(element);
|
|
78586
78744
|
}
|
|
78587
78745
|
|
|
@@ -78614,7 +78772,7 @@ function getParentNode(element) {
|
|
|
78614
78772
|
|
|
78615
78773
|
function getTrueOffsetParent(element) {
|
|
78616
78774
|
if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
|
|
78617
|
-
getComputedStyle(element).position === 'fixed') {
|
|
78775
|
+
getComputedStyle$1(element).position === 'fixed') {
|
|
78618
78776
|
return null;
|
|
78619
78777
|
}
|
|
78620
78778
|
|
|
@@ -78629,7 +78787,7 @@ function getContainingBlock(element) {
|
|
|
78629
78787
|
|
|
78630
78788
|
if (isIE && isHTMLElement(element)) {
|
|
78631
78789
|
// In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
|
|
78632
|
-
var elementCss = getComputedStyle(element);
|
|
78790
|
+
var elementCss = getComputedStyle$1(element);
|
|
78633
78791
|
|
|
78634
78792
|
if (elementCss.position === 'fixed') {
|
|
78635
78793
|
return null;
|
|
@@ -78643,7 +78801,7 @@ function getContainingBlock(element) {
|
|
|
78643
78801
|
}
|
|
78644
78802
|
|
|
78645
78803
|
while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
|
|
78646
|
-
var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
|
|
78804
|
+
var css = getComputedStyle$1(currentNode); // This is non-exhaustive but covers the most common CSS properties that
|
|
78647
78805
|
// create a containing block.
|
|
78648
78806
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
78649
78807
|
|
|
@@ -78663,11 +78821,11 @@ function getOffsetParent(element) {
|
|
|
78663
78821
|
var window = getWindow(element);
|
|
78664
78822
|
var offsetParent = getTrueOffsetParent(element);
|
|
78665
78823
|
|
|
78666
|
-
while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
|
|
78824
|
+
while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
|
|
78667
78825
|
offsetParent = getTrueOffsetParent(offsetParent);
|
|
78668
78826
|
}
|
|
78669
78827
|
|
|
78670
|
-
if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static')) {
|
|
78828
|
+
if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static')) {
|
|
78671
78829
|
return window;
|
|
78672
78830
|
}
|
|
78673
78831
|
|
|
@@ -78852,7 +79010,7 @@ function mapToStyles(_ref2) {
|
|
|
78852
79010
|
if (offsetParent === getWindow(popper)) {
|
|
78853
79011
|
offsetParent = getDocumentElement(popper);
|
|
78854
79012
|
|
|
78855
|
-
if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {
|
|
79013
|
+
if (getComputedStyle$1(offsetParent).position !== 'static' && position === 'absolute') {
|
|
78856
79014
|
heightProp = 'scrollHeight';
|
|
78857
79015
|
widthProp = 'scrollWidth';
|
|
78858
79016
|
}
|
|
@@ -79084,7 +79242,7 @@ function getDocumentRect(element) {
|
|
|
79084
79242
|
var x = -winScroll.scrollLeft + getWindowScrollBarX(element);
|
|
79085
79243
|
var y = -winScroll.scrollTop;
|
|
79086
79244
|
|
|
79087
|
-
if (getComputedStyle(body || html).direction === 'rtl') {
|
|
79245
|
+
if (getComputedStyle$1(body || html).direction === 'rtl') {
|
|
79088
79246
|
x += max(html.clientWidth, body ? body.clientWidth : 0) - width;
|
|
79089
79247
|
}
|
|
79090
79248
|
|
|
@@ -79098,7 +79256,7 @@ function getDocumentRect(element) {
|
|
|
79098
79256
|
|
|
79099
79257
|
function isScrollParent(element) {
|
|
79100
79258
|
// Firefox wants us to check `-x` and `-y` variations as well
|
|
79101
|
-
var _getComputedStyle = getComputedStyle(element),
|
|
79259
|
+
var _getComputedStyle = getComputedStyle$1(element),
|
|
79102
79260
|
overflow = _getComputedStyle.overflow,
|
|
79103
79261
|
overflowX = _getComputedStyle.overflowX,
|
|
79104
79262
|
overflowY = _getComputedStyle.overflowY;
|
|
@@ -79173,7 +79331,7 @@ function getClientRectFromMixedType(element, clippingParent, strategy) {
|
|
|
79173
79331
|
|
|
79174
79332
|
function getClippingParents(element) {
|
|
79175
79333
|
var clippingParents = listScrollParents(getParentNode(element));
|
|
79176
|
-
var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle(element).position) >= 0;
|
|
79334
|
+
var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle$1(element).position) >= 0;
|
|
79177
79335
|
var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
|
|
79178
79336
|
|
|
79179
79337
|
if (!isElement(clipperElement)) {
|
|
@@ -80108,7 +80266,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
|
|
|
80108
80266
|
defaultModifiers: defaultModifiers
|
|
80109
80267
|
}); // eslint-disable-next-line import/no-unused-modules
|
|
80110
80268
|
|
|
80111
|
-
const xvDatepickerCss = () => `@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{--xv-datepicker-padding:var(--spacing-04);--xv-datepicker-fields-direction:row;display:inline-block;font-size:var(--fz-md, 14px)}:host .control{display:flex;flex-direction:column;row-gap:var(--spacing-03);text-align:left;letter-spacing:0.32px}:host .control_label{color:var(--text-secondary, #515151);font-size:0.8571428571em;font-weight:700}:host .control_field{position:relative;display:flex;gap:var(--spacing-03);flex-direction:var(--xv-datepicker-fields-direction, row)}:host .control_field input[type=date]{flex:1 1 0;border-radius:3px;color:var(--text-primary, #333);font-family:var(--ff-body);font-size:1em;background-color:transparent;font-style:normal;font-weight:400;line-height:20px;letter-spacing:0.32px;padding:var(--xv-datepicker-padding) calc(var(--spacing-05) + 20px) var(--xv-datepicker-padding) var(--spacing-05);border:1px solid var(--border-subtle-01);box-shadow:none;outline:2px solid transparent;transition:0.25s ease-in-out outline-color;appearance:none}:host .control_field input[type=date]:empty{color:var(--text-helper, #646464)}:host .control_field input[type=date]:focus{outline-color:var(--focus)}:host .control_field input[type=date]::-webkit-calendar-picker-indicator{visibility:hidden;opacity:0;appearance:none;pointer-events:none;display:none}:host .control_field:before{font-size:16px;width:16px;height:16px;top:calc(var(--xv-datepicker-padding) + 4px);right:var(--spacing-04);position:absolute;content:"";box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zm0-13H5V6h14v1z'/%3E%3C/svg%3E")}@supports not selector(::-webkit-calendar-picker-indicator){:host .control_field:before{background-image:none}}:host .control_field.warning,:host .control_field.error,:host .control_field.loading{position:relative}:host .control_field.warning:before,:host .control_field.error:before,:host .control_field.loading:before{background-image:none}:host .control_field.warning:before{content:"⚠";color:var(--support-warning)}:host .control_field.error:before{font-size:12px;border-radius:50%;content:"!";color:#fff;background-color:var(--support-error)}:host .control_field.error input[type=date]{outline-color:var(--support-error);border:1px solid var(--support-error)}:host .control_field.loading{}@keyframes spin{to{transform:rotate(360deg)}}:host .control_field.loading:before{content:"";background-color:transparent;border-radius:50%;border:3px solid rgba(0, 0, 0, 0.1);border-top-color:var(--highlight-01, #CEDE94);animation:spin 0.8s linear infinite}:host .control_message{font-size:0.8571428571em;color:var(--text-primary, #333);margin:0;padding:0}:host .control_message.error{color:var(--text-error, #D62512)}:host .control_message.helper{color:var(--text-secondary, #515151)}:host .popover{opacity:1;z-index:12;position:absolute;max-width:fit-content;box-sizing:border-box;display:inline-flex;flex-direction:column;background-color:var(--layer-02, #fff);border-radius:3px;box-shadow:0 4px 8px 3px rgba(39, 52, 53, 0.15), 0 1px 3px 0 rgba(39, 52, 53, 0.3);padding:var(--spacing-02) var(--spacing-03);row-gap:var(--spacing-02, 4px)}:host .popover:not(.open){opacity:0;z-index:-1;user-select:none;pointer-events:none;top:0;left:0;transform:translateY(-9999px)}:host .popover .header{display:grid;width:100%;grid-template-columns:auto 1fr auto;column-gap:var(--spacing-03)}:host .popover .header_date{margin:0;padding:0;display:flex;align-items:center;justify-content:center;text-transform:capitalize;color:var(--text-primary, #333);text-align:center;font-family:var(--ff-body);font-size:1em;font-weight:700;letter-spacing:0.16px}:host .popover .header_date input[type=number]{display:inline-block;padding:0.25rem;border:none;margin:0 0 0 var(--spacing-02);cursor:default;font-family:inherit;font-size:inherit;font-weight:600;inline-size:3.75em;border-radius:3px}:host .popover .header_date input[type=number]:focus{outline:1px solid var(--focus)}:host .popover .header_icon{display:inline-block;position:relative;border:solid currentColor;padding:5px;border-width:0 2px 2px 0}:host .popover .header_icon.prev{transform:translate(4px) rotate(135deg)}:host .popover .header_icon.next{transform:translate(-4px) rotate(-45deg)}:host .popover .week{display:grid;width:100%;grid-template-columns:repeat(8, 1fr)}:host .popover .week_day{width:40px;line-height:40px;margin:0;padding:0;box-sizing:border-box;color:var(--text-primary, #333);font-family:var(--ff-body);font-size:1em;letter-spacing:0.16px;user-select:none}:host .popover .week_day:is(button){background-color:transparent;border:none;outline:none;transition:250ms ease-in-out background-color, 250ms ease-in-out color}:host .popover .week_day:is(button):hover:not(:disabled){cursor:pointer;background-color:var(--layer-hover-01, #E9E9E9)}:host .popover .week_day:is(button):focus:not(:disabled){cursor:pointer;outline:1px solid var(--focus, #273435);background-blend-mode:multiply}:host .popover .week_day:is(button):active:not(:disabled){background-color:rgba(139, 139, 139, 0.5)}:host .popover .week_day:is(button).inRange:not(.disabled):not(.active){background-color:var(--highlight-01, #CEDE94)}:host .popover .week_day:is(button).active{background-color:var(--button-primary, #273435);color:var(--text-on-color, #fff);z-index:1}:host .popover .week_day:is(button).active:hover{background-color:var(--button-primary-hover, #303F40)}:host .popover .week_day:is(button).active:active{background-color:var(--button-primary-active, #455D5E)}:host .popover .week_day.isToday{position:relative;font-weight:bold}:host .popover .week_day.isToday:before{content:"";position:absolute;bottom:2px;left:calc(50% - 2px);display:inline-block;width:4px;height:4px;border-radius:2px;background-color:currentColor}:host .popover .week_day.disabled{color:var(--text-placeholder, #ACACAC)}:host .popover .week_day__mobile{display:none}@media screen and (max-width: 920px){:host .popover .week_day__mobile{display:inline-block}}:host .popover .week_day__desktop{display:inline-block}@media screen and (max-width: 920px){:host .popover .week_day__desktop{display:none}}:host([block]){display:block;max-width:unset}:host(.disabled) .control_message,:host(.disabled) .control_field input[type=date],:host(.disabled) .control_label{color:var(--text-disabled, rgba(19, 19, 19, 0.25))}:host(.disabled) .control_field:before{opacity:0.4}:host([size=xs]){--xv-datepicker-padding:var(--spacing-02, 4px);font-size:var(--fz-sm)}:host([size=sm]){--xv-datepicker-padding:var(--spacing-03, 8px)}:host([size=md]){--xv-datepicker-padding:var(--spacing-04, 12px)}:host([size=lg]){--xv-datepicker-padding:var(--spacing-05, 16px)}:host([size=xl]){--xv-datepicker-padding:var(--spacing-06, 24px);font-size:var(--fz-lg)}`;
|
|
80269
|
+
const xvDatepickerCss = () => `@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{--xv-datepicker-padding:var(--spacing-04);--xv-datepicker-fields-direction:row;display:inline-block;font-size:var(--fz-md, 14px)}:host .control{display:flex;flex-direction:column;row-gap:var(--spacing-03);text-align:left;letter-spacing:0.32px}:host .control_label{color:var(--text-secondary, #515151);font-size:0.8571428571em;font-weight:400}:host .control_field{position:relative;display:flex;gap:var(--spacing-03);flex-direction:var(--xv-datepicker-fields-direction, row)}:host .control_field input[type=date]{flex:1 1 0;border-radius:3px;color:var(--text-primary, #333);font-family:var(--ff-body), sans-serif;font-size:1em;background-color:transparent;font-style:normal;font-weight:400;line-height:20px;letter-spacing:0.32px;padding:var(--xv-datepicker-padding) calc(var(--spacing-05) + 20px) var(--xv-datepicker-padding) var(--spacing-05);border:1px solid var(--border-subtle-01);box-shadow:none;outline:2px solid transparent;transition:0.25s ease-in-out outline-color;appearance:none}:host .control_field input[type=date]:empty{color:var(--text-helper, #646464)}:host .control_field input[type=date]:focus{outline-color:var(--focus)}:host .control_field input[type=date]::-webkit-calendar-picker-indicator{visibility:hidden;opacity:0;appearance:none;pointer-events:none;display:none}:host .control_field:before{font-size:16px;width:16px;height:16px;top:calc(var(--xv-datepicker-padding) + 4px);right:var(--spacing-04);position:absolute;content:"";box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zm0-13H5V6h14v1z'/%3E%3C/svg%3E")}@supports not selector(::-webkit-calendar-picker-indicator){:host .control_field:before{background-image:none}}:host .control_field.warning,:host .control_field.error,:host .control_field.loading{position:relative}:host .control_field.warning:before,:host .control_field.error:before,:host .control_field.loading:before{background-image:none}:host .control_field.warning:before{content:"⚠";color:var(--support-warning)}:host .control_field.error:before{font-size:12px;border-radius:50%;content:"!";color:#fff;background-color:var(--support-error)}:host .control_field.error input[type=date]{outline-color:var(--support-error);border:1px solid var(--support-error)}:host .control_field.loading{}@keyframes spin{to{transform:rotate(360deg)}}:host .control_field.loading:before{content:"";background-color:transparent;border-radius:50%;border:3px solid rgba(0, 0, 0, 0.1);border-top-color:var(--highlight-01, #CEDE94);animation:spin 0.8s linear infinite}:host .control_message{font-size:0.8571428571em;color:var(--text-primary, #333);margin:0;padding:0}:host .control_message.error{color:var(--text-error, #D62512)}:host .control_message.helper{color:var(--text-secondary, #515151)}:host .popover{opacity:1;z-index:12;position:absolute;max-width:fit-content;box-sizing:border-box;display:inline-flex;flex-direction:column;background-color:var(--layer-02, #fff);border-radius:3px;box-shadow:0 4px 8px 3px rgba(39, 52, 53, 0.15), 0 1px 3px 0 rgba(39, 52, 53, 0.3);padding:var(--spacing-02) var(--spacing-03);row-gap:var(--spacing-02, 4px)}:host .popover:not(.open){opacity:0;z-index:-1;user-select:none;pointer-events:none;top:0;left:0;transform:translateY(-9999px)}:host .popover .header{display:grid;width:100%;grid-template-columns:auto 1fr auto;column-gap:var(--spacing-03)}:host .popover .header_date{margin:0;padding:0;display:flex;align-items:center;justify-content:center;text-transform:capitalize;color:var(--text-primary, #333);text-align:center;font-family:var(--ff-body), sans-serif;font-size:1em;font-weight:700;letter-spacing:0.16px}:host .popover .header_date input[type=number]{display:inline-block;padding:0.25rem;border:none;margin:0 0 0 var(--spacing-02);cursor:default;font-family:inherit;font-size:inherit;font-weight:600;inline-size:3.75em;border-radius:3px}:host .popover .header_date input[type=number]:focus{outline:1px solid var(--focus)}:host .popover .header_icon{display:inline-block;position:relative;border:solid currentColor;padding:5px;border-width:0 2px 2px 0}:host .popover .header_icon.prev{transform:translate(4px) rotate(135deg)}:host .popover .header_icon.next{transform:translate(-4px) rotate(-45deg)}:host .popover .week{display:grid;width:100%;grid-template-columns:repeat(8, 1fr)}:host .popover .week_day{width:40px;line-height:40px;margin:0;padding:0;box-sizing:border-box;color:var(--text-primary, #333);font-family:var(--ff-body), sans-serif;font-size:1em;letter-spacing:0.16px;user-select:none}:host .popover .week_day:is(button){background-color:transparent;border:none;outline:none;transition:250ms ease-in-out background-color, 250ms ease-in-out color}:host .popover .week_day:is(button):hover:not(:disabled){cursor:pointer;background-color:var(--layer-hover-01, #E9E9E9)}:host .popover .week_day:is(button):focus:not(:disabled){cursor:pointer;outline:1px solid var(--focus, #273435);background-blend-mode:multiply}:host .popover .week_day:is(button):active:not(:disabled){background-color:rgba(139, 139, 139, 0.5)}:host .popover .week_day:is(button).inRange:not(.disabled):not(.active){background-color:var(--highlight-01, #CEDE94)}:host .popover .week_day:is(button).active{background-color:var(--button-primary, #273435);color:var(--text-on-color, #fff);z-index:1}:host .popover .week_day:is(button).active:hover{background-color:var(--button-primary-hover, #303F40)}:host .popover .week_day:is(button).active:active{background-color:var(--button-primary-active, #455D5E)}:host .popover .week_day.isToday{position:relative;font-weight:bold}:host .popover .week_day.isToday:before{content:"";position:absolute;bottom:2px;left:calc(50% - 2px);display:inline-block;width:4px;height:4px;border-radius:2px;background-color:currentColor}:host .popover .week_day.disabled{color:var(--text-placeholder, #ACACAC)}:host .popover .week_day__mobile{display:none}@media screen and (max-width: 920px){:host .popover .week_day__mobile{display:inline-block}}:host .popover .week_day__desktop{display:inline-block}@media screen and (max-width: 920px){:host .popover .week_day__desktop{display:none}}:host([block]){display:block;max-width:unset}:host(.disabled) .control_message,:host(.disabled) .control_field input[type=date],:host(.disabled) .control_label{color:var(--text-disabled, rgba(19, 19, 19, 0.25))}:host(.disabled) .control_field:before{opacity:0.4}:host([size=xs]){--xv-datepicker-padding:var(--spacing-02, 4px);font-size:var(--fz-sm)}:host([size=sm]){--xv-datepicker-padding:var(--spacing-03, 8px)}:host([size=md]){--xv-datepicker-padding:var(--spacing-04, 12px)}:host([size=lg]){--xv-datepicker-padding:var(--spacing-05, 16px)}:host([size=xl]){--xv-datepicker-padding:var(--spacing-06, 24px);font-size:var(--fz-lg)}`;
|
|
80112
80270
|
|
|
80113
80271
|
const WEEK = Array
|
|
80114
80272
|
.from({ length: 7 })
|
|
@@ -80345,12 +80503,12 @@ const XvDatepicker = class {
|
|
|
80345
80503
|
}
|
|
80346
80504
|
render() {
|
|
80347
80505
|
const [start, end] = this.value;
|
|
80348
|
-
return (index$1.h(index$1.Host, { key: '
|
|
80506
|
+
return (index$1.h(index$1.Host, { key: '92bfe5ead4c634c2df3b42ec41014b23a00f9101', class: { disabled: !!this.disabled }, tabindex: this.disabled ? '-1' : undefined }, index$1.h("div", { key: '557f7a3bd3d61b3a351614c2603681805f6765db', "aria-controls": "popover", class: "control" }, this.label && index$1.h("label", { key: 'e41309e48361c1a5cfabe427322f546713853937', class: "control_label" }, this.label), index$1.h("div", { key: 'ab9517371f913eed9336a98947a3dbb0f3f28a87', class: {
|
|
80349
80507
|
'control_field': true,
|
|
80350
80508
|
loading: this.loading,
|
|
80351
80509
|
error: !!this.error || !!this.localError,
|
|
80352
80510
|
warning: this.warning !== undefined,
|
|
80353
|
-
}, onClick: this.handleOpen, ref: (el) => (this.controlEl = el) }, index$1.h("input", { key: '
|
|
80511
|
+
}, onClick: this.handleOpen, ref: (el) => (this.controlEl = el) }, index$1.h("input", { key: '6d2f79d071fe020235586f849efbb48dd5cba315', 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: '97c4d03019f2e1a9c0583e1b76aa4d143f503172', 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: 'b19342150eeb4c7c356a817b268ec76e76daa94a' }, this.helper && index$1.h("p", { key: '39970bdc2765e3a63072a6d7f54c038d6cee6d11', class: "control_message helper" }, this.helper), (this.error || this.warning || this.localError) && (index$1.h("p", { key: '579ca9aa50b6b7dacb787029691baf023219a265', class: { control_message: true, error: !!this.error || !!this.localError } }, this.error || this.localError || this.warning))))), index$1.h("div", { key: 'af8eee78121448e66c9f6d3dd6d5bb7d9eab03dc', role: "dialog", class: { popover: true, open: this.open }, ref: (el) => (this.popoverEl = el) }, index$1.h("div", { key: 'd400c66831941238670ae021209ea2a40a59e88b', class: "header" }, index$1.h("xv-button-v2", { key: '2cdd95bc4114b0bd3c7ffa613c7a69d68685f0a6', tabindex: this.open ? undefined : '-1', disabled: this.isPrevDisabled, variant: "ghost", onClick: this.prevMonth }, index$1.h("span", { key: '5a5cb4965aa5b64d8a8d57d96076bcf2cc5fdb6b', slot: "icon-left", class: "header_icon prev" })), index$1.h("p", { key: 'f806d5ac078fccca5cadfb0e368cb78f478f582e', class: "header_date" }, dateFns.format(this.month, 'LLLL', { locale: localeExports.de }), index$1.h("input", { key: '134ddaa8cf64f2faf3306aac6cfbc9cf8ff2047d', tabindex: this.open ? undefined : '-1', type: "number", value: this.month.getFullYear(), onInput: this.handleYearChange, onBlur: this.handleYearBlur })), index$1.h("xv-button-v2", { key: 'f90e88c43c0365f64fd4494c75bfcc00558b5034', tabindex: this.open ? undefined : '-1', disabled: this.isNextDisabled, variant: "ghost", onClick: this.nextMonth }, index$1.h("span", { key: '0b539e43a031acc4a69f0743e4f22d244a8856c3', slot: "icon-left", class: "header_icon next" }))), index$1.h("div", { key: '8986efbeb8a2c86c01aa72afccf3b3db0cafaf7d', class: "week" }, index$1.h("p", { key: 'de290231af4fa141537c348c57fc402082b06f28', class: "week_day" }), WEEK.map((day) => index$1.h("p", { class: "week_day" }, day, "."))), index$1.h("div", { key: 'b61e68c524a8cacf4bd8f08deee3662de91ae7c0', 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: {
|
|
80354
80512
|
'week_day': true,
|
|
80355
80513
|
inRange: this.variant === 'range' && dateFns.isWithinInterval(day.date, { start, end }),
|
|
80356
80514
|
isToday: day.isToday,
|
|
@@ -80376,8 +80534,9 @@ XvDatepicker.style = xvDatepickerCss();
|
|
|
80376
80534
|
|
|
80377
80535
|
const DropdownItemSelector = '.xv-dropdown-item';
|
|
80378
80536
|
|
|
80379
|
-
const xvDropdownCss = () => `.xv-container{width:100%;max-width:1170px;margin-inline:auto}@media (min-width: 576px){.xv-container{max-width:540px}}@media (min-width: 768px){.xv-container{max-width:720px}}@media (min-width: 992px){.xv-container{max-width:960px;padding-inline:var(--bs-gutter-x, 0.75rem)}}@media (min-width: 1200px){.xv-container{max-width:1140px}}@media (min-width: 1400px){.xv-container{max-width:1320px}}.xv-tooltip[role=tooltip]{position:absolute;background-color:var(--background-inverse, #333333);color:var(--text-on-color);padding:var(--spacing-03) var(--spacing-04);border-radius:3px;font-size:var(--fz-sm);z-index:999;min-width:min(150px, 90vw);max-width:min(400px, 90vw)}.xv-tooltip[role=tooltip]::after{content:"";position:absolute;width:0;height:0;border-style:solid}.xv-tooltip[role=tooltip][data-popper-placement=top]::after{bottom:-5px;left:50%;transform:translateX(-50%);border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after{bottom:-5px;left:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after{bottom:-5px;right:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after{top:-5px;left:50%;transform:translateX(-50%);border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after{top:-5px;left:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after{top:-5px;right:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=left]::after{top:50%;right:-5px;transform:translateY(-50%);border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after{top:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after{bottom:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=right]::after{top:50%;left:-5px;transform:translateY(-50%);border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after{top:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after{bottom:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}:host{--dropdown-padding-x:16px;--dropdown-padding-y:11px;--dropdown-max-width:300px;--dropdown-visible-items:6;display:block;position:relative;text-align:left;max-width:min(var(--dropdown-max-width), 100%)}:host .label{display:block;color:var(--text-secondary, #515151);font-family:var(--ff-body, Work Sans), sans-serif;font-size:12px;font-style:normal;font-weight:
|
|
80537
|
+
const xvDropdownCss = () => `.xv-container{width:100%;max-width:1170px;margin-inline:auto}@media (min-width: 576px){.xv-container{max-width:540px}}@media (min-width: 768px){.xv-container{max-width:720px}}@media (min-width: 992px){.xv-container{max-width:960px;padding-inline:var(--bs-gutter-x, 0.75rem)}}@media (min-width: 1200px){.xv-container{max-width:1140px}}@media (min-width: 1400px){.xv-container{max-width:1320px}}.xv-tooltip[role=tooltip]{position:absolute;background-color:var(--background-inverse, #333333);color:var(--text-on-color);padding:var(--spacing-03) var(--spacing-04);border-radius:3px;font-size:var(--fz-sm);z-index:999;min-width:min(150px, 90vw);max-width:min(400px, 90vw)}.xv-tooltip[role=tooltip]::after{content:"";position:absolute;width:0;height:0;border-style:solid}.xv-tooltip[role=tooltip][data-popper-placement=top]::after{bottom:-5px;left:50%;transform:translateX(-50%);border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after{bottom:-5px;left:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after{bottom:-5px;right:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after{top:-5px;left:50%;transform:translateX(-50%);border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after{top:-5px;left:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after{top:-5px;right:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=left]::after{top:50%;right:-5px;transform:translateY(-50%);border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after{top:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after{bottom:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=right]::after{top:50%;left:-5px;transform:translateY(-50%);border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after{top:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after{bottom:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}:host{--dropdown-padding-x:16px;--dropdown-padding-y:11px;--dropdown-max-width:300px;--dropdown-visible-items:6;--dropdown-ghost-width:min-content;display:block;position:relative;text-align:left;max-width:min(var(--dropdown-max-width), 100%)}:host .label{display:block;color:var(--text-secondary, #515151);font-family:var(--ff-body, Work Sans), sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px;margin-bottom:8px}:host .label ::slotted([slot=label]){color:var(--text-secondary, #515151);font-family:var(--ff-body, Work Sans), sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px}:host .label_info{margin-left:var(--spacing-02)}:host .control{background-blend-mode:multiply;border-radius:3px;border:1px solid var(--border-subtle-01);transition:0.2s ease-in-out background-color;cursor:pointer;margin:0;box-sizing:border-box;font-family:inherit;font-size:100%;padding:0;appearance:none;background-color:var(--field-02, #FFF);text-align:start;inline-size:100%;position:relative;display:inline-flex;overflow:hidden;align-items:center;block-size:calc(100% + 1px);outline:none;padding-block:var(--dropdown-padding-y);padding-inline:var(--dropdown-padding-x);text-overflow:ellipsis;vertical-align:top;white-space:nowrap}:host .control_value,:host .control_placeholder{flex:1;margin:0;overflow:hidden;color:var(--text-primary, #333);user-select:none;text-overflow:ellipsis;white-space:nowrap;font-family:var(--ff-body, Work Sans), sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:0.16px;padding-inline:0 1rem}:host .control_count{margin-right:var(--spacing--03, 8px)}:host .control_placeholder{color:var(--text-primary, #333)}:host .control_icon{width:18px;height:18px}:host .control_icon.error{color:var(--support-error, #F1290E)}:host .control_icon.warning{color:var(--support-warning, #FF7F04)}:host .control_arrow{box-sizing:border-box;margin:0;font-size:100%;vertical-align:baseline;padding:0;border:0;appearance:none;background:none;text-align:start;display:flex;align-items:center;justify-content:center;block-size:min(16px, 1em);inline-size:min(16px, 1em);inset-inline-end:0.75rem;outline:none;transition:transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9)}:host .control:hover{background-color:var(--field-hover-02, #E9E9E9)}:host .control:active{background-color:var(--layer-selected-02, #E3E3E3)}:host .control.readonly{outline-color:transparent;background:var(--field-01, #F7F7F7);background-blend-mode:multiply;cursor:default}:host .control.readonly .control_value{color:var(--text-secondary)}:host .control.readonly .control_arrow{display:none}:host .options{inset-block-start:100%;margin-block-start:1px;display:block;line-height:18px;max-block-size:calc(1lh * var(--dropdown-visible-items) + var(--dropdown-padding-y) * 12);box-shadow:0 2px 6px rgba(0, 0, 0, 0.3);position:absolute;z-index:10;inline-size:100%;inset-inline:0;overflow-y:auto;transition:max-height 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);border-radius:3px;background-color:var(--field-02, #FFF);scrollbar-width:thin;scrollbar-color:var(--layer-accent-03) transparent}:host .options_search{position:sticky;top:0;z-index:2;background:linear-gradient(to bottom, var(--field-02, #FFF) 0%, var(--field-02, #FFF) 85%, transparent 100%);padding:var(--dropdown-padding-y) var(--dropdown-padding-x)}:host .options.right{left:unset;right:0}:host .options ::slotted(.xv-dropdown-item){display:block;max-block-size:13.75rem;inset-inline:0;box-sizing:border-box;padding:var(--dropdown-padding-y) calc(var(--dropdown-padding-x) + 16px) var(--dropdown-padding-y) var(--dropdown-padding-x);position:relative;cursor:pointer;overflow:hidden;color:var(--text-secondary, #515151);text-overflow:ellipsis;white-space:nowrap;font-family:var(--ff-body, Work Sans), sans-serif;font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:1lh;letter-spacing:0.16px;transition:0.2s ease-in-out background-color;user-select:none}:host .options ::slotted(.xv-dropdown-item):after{content:"";position:absolute;top:0;height:1px;left:10px;width:calc(100% - 20px);background-color:var(--border-subtle-01)}:host .options ::slotted(.xv-dropdown-item:not([hidden]):first-child):after{display:none}:host .options ::slotted(.xv-dropdown-item:hover),:host .options ::slotted(.xv-dropdown-item[active]){background-color:var(--layer-hover-02, #F7F7F7)}:host .options ::slotted(.xv-dropdown-item:active){background-color:var(--layer-selected-hover-02, #DADADA)}:host .options ::slotted(.xv-dropdown-item[hidden]){display:none}:host .options ::slotted(.xv-dropdown-item[selected]){background-color:var(--layer-selected-02, #E3E3E3)}:host .options ::slotted(.xv-dropdown-item[selected]:hover){background-color:var(--layer-selected-hover-02, #DADADA)}:host .options ::slotted(.xv-dropdown-item[disabled]){background-color:transparent;opacity:0.4;cursor:not-allowed}:host .helper{color:var(--text-helper, #646464);font-family:var(--ff-heading, "IBM Plex Sans"), sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px;margin:4px 0 0;padding:0}:host(.ghost) .control{background-color:transparent;box-shadow:none;border:none;padding:0}:host(.ghost) .control_value{padding-inline-end:5px}:host(.ghost) .options{width:var(--dropdown-ghost-width)}:host([open]) .control_arrow{transform:rotate(180deg)}:host([disabled]){opacity:0.4;cursor:not-allowed}:host([disabled]) .control{cursor:inherit}:host([disabled]) .control:hover,:host([disabled]) .control:active,:host([disabled]) .control:focus-within{background-color:transparent}:host(:focus){outline:none}:host(:focus-visible){outline:none}:host(:focus-visible) .control{outline:2px solid var(--focus)}:host([error]) .control{box-shadow:none;outline:2px solid var(--support-support-error, #F1290E)}:host([error]) .helper{color:var(--text-error, #D62512)}:host([size=xs]){--dropdown-padding-y:4px}:host([size=sm]){--dropdown-padding-y:7px}:host([size=md]){--dropdown-padding-y:11px}:host([size=lg]){--dropdown-padding-y:15px}:host([size=xl]){--dropdown-padding-y:16px}`;
|
|
80380
80538
|
|
|
80539
|
+
let dropdownUid = 0;
|
|
80381
80540
|
const XvDropdown = class {
|
|
80382
80541
|
constructor(hostRef) {
|
|
80383
80542
|
index$1.registerInstance(this, hostRef);
|
|
@@ -80386,9 +80545,17 @@ const XvDropdown = class {
|
|
|
80386
80545
|
this.searchPlaceholder = 'Suchen';
|
|
80387
80546
|
this.size = _vars.SIZE_VAR.MD;
|
|
80388
80547
|
this.variant = 'default';
|
|
80548
|
+
this.position = 'auto';
|
|
80389
80549
|
this.selected = [];
|
|
80390
80550
|
this.selectedMap = new Map();
|
|
80391
|
-
|
|
80551
|
+
/** Side the options panel is actually aligned to (computed when position === 'auto'). */
|
|
80552
|
+
this.resolvedPosition = 'left';
|
|
80553
|
+
this.positionMeasured = false;
|
|
80554
|
+
/* region Keyboard navigation */
|
|
80555
|
+
this.listboxId = `xv-dd-listbox-${dropdownUid++}`;
|
|
80556
|
+
this.optIdSeq = 0;
|
|
80557
|
+
this.activeItem = null;
|
|
80558
|
+
this.pendingOpenInit = false;
|
|
80392
80559
|
this.searchQuery = '';
|
|
80393
80560
|
this.dropdownItems = [];
|
|
80394
80561
|
this.setSelected = (selectedMap, optionNodes) => {
|
|
@@ -80416,6 +80583,44 @@ const XvDropdown = class {
|
|
|
80416
80583
|
this.removeListeners = () => {
|
|
80417
80584
|
document.removeEventListener('click', this.handleClickOutside, { capture: true });
|
|
80418
80585
|
};
|
|
80586
|
+
this.getNavigableItems = () => Array.from(this.el.querySelectorAll(DropdownItemSelector))
|
|
80587
|
+
.filter((el) => !el.hasAttribute('hidden') && !el.hasAttribute('disabled'));
|
|
80588
|
+
this.moveActive = (delta) => {
|
|
80589
|
+
const items = this.getNavigableItems();
|
|
80590
|
+
if (!items.length)
|
|
80591
|
+
return;
|
|
80592
|
+
const current = this.activeItem ? items.indexOf(this.activeItem) : -1;
|
|
80593
|
+
let next = current + delta;
|
|
80594
|
+
if (next < 0)
|
|
80595
|
+
next = items.length - 1;
|
|
80596
|
+
else if (next >= items.length)
|
|
80597
|
+
next = 0;
|
|
80598
|
+
this.setActiveItem(items[next]);
|
|
80599
|
+
};
|
|
80600
|
+
this.setActiveByEdge = (edge) => {
|
|
80601
|
+
const items = this.getNavigableItems();
|
|
80602
|
+
if (!items.length)
|
|
80603
|
+
return;
|
|
80604
|
+
this.setActiveItem(edge === 'first' ? items[0] : items[items.length - 1]);
|
|
80605
|
+
};
|
|
80606
|
+
this.setActiveItem = (item, scroll = true) => {
|
|
80607
|
+
var _a;
|
|
80608
|
+
if (this.activeItem === item)
|
|
80609
|
+
return;
|
|
80610
|
+
(_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.removeAttribute('active');
|
|
80611
|
+
this.activeItem = item;
|
|
80612
|
+
if (!item) {
|
|
80613
|
+
this.el.removeAttribute('aria-activedescendant');
|
|
80614
|
+
return;
|
|
80615
|
+
}
|
|
80616
|
+
if (!item.id)
|
|
80617
|
+
item.id = `${this.listboxId}-opt-${this.optIdSeq++}`;
|
|
80618
|
+
item.setAttribute('active', '');
|
|
80619
|
+
this.el.setAttribute('aria-activedescendant', item.id);
|
|
80620
|
+
if (scroll)
|
|
80621
|
+
item.scrollIntoView({ block: 'nearest' });
|
|
80622
|
+
};
|
|
80623
|
+
/* endregion Keyboard navigation */
|
|
80419
80624
|
this.clearHandle = () => {
|
|
80420
80625
|
const options = this.el.querySelectorAll(DropdownItemSelector);
|
|
80421
80626
|
index$2.forEach(options, (option) => index$2.setAttr(option, 'selected', false));
|
|
@@ -80439,11 +80644,40 @@ const XvDropdown = class {
|
|
|
80439
80644
|
this.searchQuery = ev.target.value.toLowerCase();
|
|
80440
80645
|
clearTimeout(this.searchTimeout);
|
|
80441
80646
|
this.searchTimeout = setTimeout(() => {
|
|
80442
|
-
|
|
80647
|
+
var _a;
|
|
80648
|
+
for (const { el, text } of this.dropdownItems) {
|
|
80443
80649
|
el.toggleAttribute('hidden', !text.includes(this.searchQuery));
|
|
80444
80650
|
}
|
|
80651
|
+
// keep keyboard focus on a visible option after filtering
|
|
80652
|
+
if ((_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.hasAttribute('hidden'))
|
|
80653
|
+
this.setActiveByEdge('first');
|
|
80445
80654
|
}, 200);
|
|
80446
80655
|
};
|
|
80656
|
+
this.resetSearch = () => {
|
|
80657
|
+
clearTimeout(this.searchTimeout);
|
|
80658
|
+
if (!this.search)
|
|
80659
|
+
return;
|
|
80660
|
+
this.searchQuery = '';
|
|
80661
|
+
if (this.searchInputEl)
|
|
80662
|
+
this.searchInputEl.value = '';
|
|
80663
|
+
for (const { el } of this.dropdownItems)
|
|
80664
|
+
el.removeAttribute('hidden');
|
|
80665
|
+
};
|
|
80666
|
+
/** Runs once per open, after the panel is in the DOM: highlight an option and place focus. */
|
|
80667
|
+
this.initOpenState = () => {
|
|
80668
|
+
var _a, _b, _c;
|
|
80669
|
+
this.pendingOpenInit = false;
|
|
80670
|
+
const items = this.getNavigableItems();
|
|
80671
|
+
const preselected = items.find((el) => el.hasAttribute('selected'));
|
|
80672
|
+
this.setActiveItem(preselected || items[0] || null, false);
|
|
80673
|
+
if (this.search) {
|
|
80674
|
+
// shadow root is open, so we can hand focus to the inner input for typing
|
|
80675
|
+
(_c = (_b = (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input')) === null || _c === void 0 ? void 0 : _c.focus();
|
|
80676
|
+
}
|
|
80677
|
+
else {
|
|
80678
|
+
this.el.focus();
|
|
80679
|
+
}
|
|
80680
|
+
};
|
|
80447
80681
|
}
|
|
80448
80682
|
openChangeHandle() {
|
|
80449
80683
|
this.syncOpenState();
|
|
@@ -80455,9 +80689,15 @@ const XvDropdown = class {
|
|
|
80455
80689
|
if (this.open) {
|
|
80456
80690
|
this.cacheItems(); // get items on open
|
|
80457
80691
|
this.addListeners();
|
|
80692
|
+
this.pendingOpenInit = true; // highlight + focus once the panel has rendered
|
|
80458
80693
|
}
|
|
80459
80694
|
else {
|
|
80460
80695
|
this.removeListeners();
|
|
80696
|
+
this.resolvedPosition = 'left'; // reset so next open re-measures from the default side
|
|
80697
|
+
this.positionMeasured = false;
|
|
80698
|
+
this.pendingOpenInit = false;
|
|
80699
|
+
this.setActiveItem(null);
|
|
80700
|
+
this.resetSearch();
|
|
80461
80701
|
}
|
|
80462
80702
|
}
|
|
80463
80703
|
multipleChangeHandle() {
|
|
@@ -80526,9 +80766,59 @@ const XvDropdown = class {
|
|
|
80526
80766
|
index$2.forEach(optionElements, (option) => index$2.setAttr(option, 'selected', this.selectedMap.has(option.getAttribute('value'))));
|
|
80527
80767
|
this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));
|
|
80528
80768
|
}
|
|
80769
|
+
/* region Keyboard navigation */
|
|
80770
|
+
handleKeyDown(ev) {
|
|
80771
|
+
var _a, _b;
|
|
80772
|
+
if (this.disabled || this.readonly || this.loading)
|
|
80773
|
+
return;
|
|
80774
|
+
if (!this.open) {
|
|
80775
|
+
if (['ArrowDown', 'ArrowUp', 'Enter', ' ', 'Spacebar'].includes(ev.key)) {
|
|
80776
|
+
ev.preventDefault();
|
|
80777
|
+
this.open = true;
|
|
80778
|
+
}
|
|
80779
|
+
return;
|
|
80780
|
+
}
|
|
80781
|
+
switch (ev.key) {
|
|
80782
|
+
case 'ArrowDown':
|
|
80783
|
+
ev.preventDefault();
|
|
80784
|
+
this.moveActive(1);
|
|
80785
|
+
break;
|
|
80786
|
+
case 'ArrowUp':
|
|
80787
|
+
ev.preventDefault();
|
|
80788
|
+
this.moveActive(-1);
|
|
80789
|
+
break;
|
|
80790
|
+
case 'Home':
|
|
80791
|
+
ev.preventDefault();
|
|
80792
|
+
this.setActiveByEdge('first');
|
|
80793
|
+
break;
|
|
80794
|
+
case 'End':
|
|
80795
|
+
ev.preventDefault();
|
|
80796
|
+
this.setActiveByEdge('last');
|
|
80797
|
+
break;
|
|
80798
|
+
case 'Enter':
|
|
80799
|
+
ev.preventDefault();
|
|
80800
|
+
(_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.click(); // reuse the same selection path as a mouse click
|
|
80801
|
+
break;
|
|
80802
|
+
case ' ':
|
|
80803
|
+
case 'Spacebar':
|
|
80804
|
+
if (!this.search) { // when searching, space must type into the field
|
|
80805
|
+
ev.preventDefault();
|
|
80806
|
+
(_b = this.activeItem) === null || _b === void 0 ? void 0 : _b.click();
|
|
80807
|
+
}
|
|
80808
|
+
break;
|
|
80809
|
+
case 'Escape':
|
|
80810
|
+
ev.preventDefault();
|
|
80811
|
+
this.open = false;
|
|
80812
|
+
this.el.focus();
|
|
80813
|
+
break;
|
|
80814
|
+
case 'Tab':
|
|
80815
|
+
this.open = false; // let focus leave naturally
|
|
80816
|
+
break;
|
|
80817
|
+
}
|
|
80818
|
+
}
|
|
80529
80819
|
/* endregion Search methods */
|
|
80530
80820
|
render() {
|
|
80531
|
-
return (index$1.h(index$1.Host, { key: '
|
|
80821
|
+
return (index$1.h(index$1.Host, { key: 'd829dfeed78bfa23b22b5d04658bddfcfb3f9677', 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: '3329167b435dc874a175ca4fdf863f024ca59172', class: "label" }, index$1.h("slot", { key: '9fa412345fa4e59f0e5bf075a969c97f50ffd190', name: "label" }, this.label), this.info && index$1.h("xv-tooltip-v2", { key: 'ff8a830219cd41a54f80aba9f087f8851136f094', class: "label_info", message: this.info }))), index$1.h("div", { key: '9046c4c21ed270b9e9be0a6361cb629910fcd752', 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: 'e2d4ed3d256d9f9409181dfc0d374c80b51113e2', 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: '8b00320c6078f01967f5f205700bd10747065659', 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: 'b5387f1a85b2b4efccf9e5cbc5376cf34bc660a3', 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: '7b1de2568396f650059277d06bc9b4d8bbb4d6f3', 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: '7225547fc7964b33e1afaf07dd6694932e4fedec', class: "options_search" }, index$1.h("xv-text-input-v2", { key: 'dc5ce6e2200c627e259d02622b31515be49dde0b', 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: 'a18e86e5bfeca3a94f15cb58424db798e95a799f', class: "helper" }, this.error || this.warning || this.helper))));
|
|
80532
80822
|
}
|
|
80533
80823
|
componentDidLoad() {
|
|
80534
80824
|
this.syncOpenState();
|
|
@@ -80536,8 +80826,51 @@ const XvDropdown = class {
|
|
|
80536
80826
|
if (this.defaultValue)
|
|
80537
80827
|
this.value = this.defaultValue;
|
|
80538
80828
|
}
|
|
80829
|
+
/** Side the panel is rendered on: explicit prop wins, otherwise the auto-measured side. */
|
|
80830
|
+
_appliedPosition() {
|
|
80831
|
+
return this.position === 'auto' ? this.resolvedPosition : this.position;
|
|
80832
|
+
}
|
|
80833
|
+
componentDidRender() {
|
|
80834
|
+
if (this.open && this.pendingOpenInit)
|
|
80835
|
+
this.initOpenState();
|
|
80836
|
+
// Only ghost panels can be wider than the control, so only they can overflow.
|
|
80837
|
+
// Measure once per open; skip for the default variant and for explicit positions.
|
|
80838
|
+
if (!this.open || this.position !== 'auto' || this.variant !== 'ghost' || !this.optionsEl || this.positionMeasured)
|
|
80839
|
+
return;
|
|
80840
|
+
this.positionMeasured = true;
|
|
80841
|
+
const rect = this.optionsEl.getBoundingClientRect();
|
|
80842
|
+
const bounds = this._clipBounds();
|
|
80843
|
+
// Flip in one direction only, so a panel wider than its container can't thrash between sides.
|
|
80844
|
+
let next = this.resolvedPosition;
|
|
80845
|
+
if (this.resolvedPosition === 'left' && rect.right > bounds.right)
|
|
80846
|
+
next = 'right';
|
|
80847
|
+
else if (this.resolvedPosition === 'right' && rect.left < bounds.left)
|
|
80848
|
+
next = 'left';
|
|
80849
|
+
if (next !== this.resolvedPosition)
|
|
80850
|
+
this.resolvedPosition = next;
|
|
80851
|
+
}
|
|
80852
|
+
/** Inline edges of the nearest ancestor that clips overflow; falls back to the viewport. */
|
|
80853
|
+
_clipBounds() {
|
|
80854
|
+
let node = this.el.parentNode;
|
|
80855
|
+
while (node) {
|
|
80856
|
+
if (node instanceof ShadowRoot) {
|
|
80857
|
+
node = node.host;
|
|
80858
|
+
continue;
|
|
80859
|
+
}
|
|
80860
|
+
if (node instanceof HTMLElement) {
|
|
80861
|
+
const overflowX = getComputedStyle(node).overflowX;
|
|
80862
|
+
if (overflowX === 'hidden' || overflowX === 'auto' || overflowX === 'scroll' || overflowX === 'clip') {
|
|
80863
|
+
const r = node.getBoundingClientRect();
|
|
80864
|
+
return { left: r.left, right: r.right };
|
|
80865
|
+
}
|
|
80866
|
+
}
|
|
80867
|
+
node = node.parentNode;
|
|
80868
|
+
}
|
|
80869
|
+
return { left: 0, right: document.documentElement.clientWidth };
|
|
80870
|
+
}
|
|
80539
80871
|
disconnectedCallback() {
|
|
80540
80872
|
this.removeListeners();
|
|
80873
|
+
clearTimeout(this.searchTimeout);
|
|
80541
80874
|
}
|
|
80542
80875
|
_renderIcon() {
|
|
80543
80876
|
if (this.loading) {
|
|
@@ -80588,7 +80921,7 @@ const XvDropdownItem = class {
|
|
|
80588
80921
|
});
|
|
80589
80922
|
}
|
|
80590
80923
|
render() {
|
|
80591
|
-
return (index$1.h(index$1.Host, { key: '
|
|
80924
|
+
return (index$1.h(index$1.Host, { key: '129c105a5f0c793b893e800b05ce97d8352eb06f', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, this.multiple && (index$1.h("xv-checkbox-v2", { key: '2145dd2fd6a7ac83ea7c474d2b4b17cb5b7ecc53', class: "multiple-check", size: this.size, checked: this.selected, disabled: this.disabled })), index$1.h("slot", { key: '82d7595ff99453660590241da2b6df592f497201' }), (!this.multiple && this.selected) && index$1.h("span", { key: '343f6c8f9930054e5aabb015579a5e0ee996cf6e', class: "checkmark far fa-check" })));
|
|
80592
80925
|
}
|
|
80593
80926
|
componentWillLoad() {
|
|
80594
80927
|
if (!this.value)
|
|
@@ -80692,7 +81025,7 @@ const XvFileUploader = class {
|
|
|
80692
81025
|
}
|
|
80693
81026
|
}
|
|
80694
81027
|
render() {
|
|
80695
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81028
|
+
return (index$1.h(index$1.Host, { key: '3423ccf72c581a004e5ca59d9cbf6f673f7896c1', class: { 'upload-wrapper': true, [`uploader-${this.size}`]: true, disabled: !!this.disabled, error: !!this.error } }, this.label && index$1.h("label", { key: '93b7b8edc0ac8e980910dc83d7cabf2030f97b35', class: "label" }, this.label), this.description && index$1.h("p", { key: 'c6b030335b34ee97ada3127fc8641f7b009d6c55', 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: '04a082fae037f176533bee68ea0a8b24f8f36257', 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: '6fb7b7c5517030caf1f22206a6612077b0c14e7e', class: "global-error" }, this.error), index$1.h("ul", { key: 'e3d5461797abbc1168117c6772238780a0a7e14a', class: "file-list" }, this.files.map((file, index) => {
|
|
80696
81029
|
var _a, _b;
|
|
80697
81030
|
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)));
|
|
80698
81031
|
}))));
|
|
@@ -80764,7 +81097,7 @@ const Xvfooter = class {
|
|
|
80764
81097
|
render() {
|
|
80765
81098
|
const { categories, socials, logo, legalLinks, payments, partners, advantages } = this.data || {};
|
|
80766
81099
|
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));
|
|
80767
|
-
return (index$1.h("footer", { key: '
|
|
81100
|
+
return (index$1.h("footer", { key: 'c3406d777693fe2311102e6fcb9852383fc9ac6a', class: "xv-footer" }, (advantages === null || advantages === void 0 ? void 0 : advantages.length) > 0 && (index$1.h("div", { key: 'f5636ec1f9f660f5735d27a79924bd9c40adf75f', class: "xv-footer-advantages" }, index$1.h("div", { key: '42656264cb7590f5e61ce1bbe38aa37a63f04ee9', class: "xv-container" }, this._renderFooterList(advantages, { itemWithLabel: true })))), hasDataLength && (index$1.h("div", { key: 'e142aa994a80d0fe5be4e00a8f0c4039da1791d6', class: "xv-container" }, index$1.h("div", { key: 'b7d5ab5f3613736775b3ef83cc2cc676449663ba', class: "xv-footer__grid xv-footer-y-spacing" }, index$1.h("div", { key: 'c997c4022a8d2bea3547230f5ba9ed7a37635d46', class: "xv-footer__col-main" }, index$1.h("ul", { key: 'c1be504d2ce2a411dab6f1681564524f8b2446b3', 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: 'f82ccaf18e1fe63b47f109bf20845af9ea0d4add', class: "xv-footer__col-sidebar" }, this._renderFooterList(partners, { label: 'crossvertise Partner' }), this._renderFooterList(payments, { label: 'Bequem und sicher bezahlen' }), this._renderFooterList(socials, { label: 'Folgen Sie uns', isRow: true }))))), (legalLinks === null || legalLinks === void 0 ? void 0 : legalLinks.length) > 0 && (index$1.h("div", { key: 'e1d12515175bffaa970ac5bfe41ad0cf27d5097e', class: "xv-footer-legal" }, index$1.h("div", { key: '969c103e50bdfeb52f9139c3dd53189d80d9a22d', class: "xv-container" }, index$1.h("div", { key: '5b3e4f18da410ea82fc62074f22daa8e226d6d4b', class: "xv-footer-legal-row" }, logo && (index$1.h("a", { key: '8e7bf3fd82686faa5a2e83131a542730eba7389f', class: "xv-footer-logo", href: logo.href, target: logo.target }, logo.label && index$1.h("span", { key: 'b211963ee69c7a6151cdae1a2476223f8ef73e34', class: "xv-label-02" }, logo.label), index$1.h("img", { key: '243eed6378143f9328a174f515c2c6276a90a09a', loading: "lazy", src: logo.image, alt: logo.label }))), index$1.h("ul", { key: '88538ee0047edf6df20a4e27d4d9bf348724bc56' }, legalLinks.map((item) => {
|
|
80768
81101
|
if (item.label === 'Cookie Einstellungen') {
|
|
80769
81102
|
return index$1.h("li", null, index$1.h("a", { class: "xv-helper-text-02", onClick: this.openCookieSettings }, item.label));
|
|
80770
81103
|
}
|
|
@@ -80950,7 +81283,7 @@ const XvHeader = class {
|
|
|
80950
81283
|
render() {
|
|
80951
81284
|
var _a, _b, _c, _d, _e;
|
|
80952
81285
|
const isXvBrand = (((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a['WhitelabelName']) || 'Xv') === 'Xv';
|
|
80953
|
-
return (index$1.h("header", { key: '
|
|
81286
|
+
return (index$1.h("header", { key: '413975515b82ac0c3eac96c7836d3e0567393431', class: "header" }, index$1.h("div", { key: 'fa2daa56949f45da1fe9abb9e780e5cc74317710', class: "header-wrapper" }, index$1.h("div", { key: '2e40c39258e80aaedaddbe1b3365dbe000a26bd1', class: "xv-container" }, index$1.h("div", { key: '1536e648029b21576532f08756a8f9cb0265d6c9', class: "header-top" }, index$1.h("div", { key: 'c12f0a569d5af6a0db7e4884722008b801879afc', class: "header-top--left" }, index$1.h("xv-button-v2", { key: '0cec355451c1991dc4bea7747645476403b3a0e9', class: "menu-btn", variant: "ghost", onClick: this.toggleMobMenu }, index$1.h("i", { key: '0b6cbb53fab547fc0b7ba9c381815dea29e8420a', slot: "icon-left", class: { 'fa': true, 'fa-times': this.mobMenuOpen, 'fa-bars': !this.mobMenuOpen } })), this.metaNav && (index$1.h("a", { key: '6e297e0486adb1cdb8aa3d10136127a433729741', href: `${window.location.origin}/` }, index$1.h("picture", { key: '963ba9a1a8ef6f154ee26aab34707abb97b4224f' }, index$1.h("source", { key: '7e06ea0165052dc7c09a0dc6b1d3c59b5bd329b7', 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: '81b305b418f0ebd656216fbb9432f70f7e8c6477', 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: '32177289430d1034851d99bffe332e078c7e01ad', class: "header-top--orgUnit", variant: "standalone", href: "/de-de/mycrossvertise" }, this.orgUnit))), index$1.h("ul", { key: '0ef3d85e5a38c590ec8f5a793a587b4aaf173dee', 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: 'ea34cd07f3126d6f4bfa97e84dcf7fe5b324a12c' }, index$1.h("xv-link-v2", { key: '3f3d5bc35e5961f0bec89458c534a7805dde9417', variant: "ghost", href: "https://www.crossvertise.com/ueber-uns/kontakt" }, index$1.h("xv-button-v2", { key: '7837fd8b66a7430b30122f6dfe5dee5e40183969', variant: "ghost", size: _vars.SIZE_VAR.MD }, index$1.h("i", { key: '0154c3c8c5a74df1b7f2ea55f3c3e59b5fec44be', class: "header-icon far fa-envelope" }), index$1.h("span", { key: 'bd6d80a40d20597344f86b175819ad653f789841', 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: '094df3526967377b32d3a2a4c9f941330122f570' }, index$1.h("xv-link-v2", { key: '374ca3a703428ce76f1aacc7f4033ce9f955c1a0', variant: "ghost", href: "https://help.crossvertise.com" }, index$1.h("xv-button-v2", { key: '07a2e7771bf8a350c02bede432f412bb584a3e1b', variant: "ghost", size: _vars.SIZE_VAR.MD }, index$1.h("i", { key: '48116ea733e87ae3801b6995208e4c9f993582cd', class: "header-icon far fa-question-circle" }), index$1.h("span", { key: '2b5ed5733555847f8d92f285f736206421c49b8f', class: "header-label xv-body-02" }, "Hilfe"))))), this._renderShoppingCart()))), index$1.h("div", { key: '6274a3a9b68ecf96def769de84f19de759e01c3d', class: "header-wrapper--bg" }, index$1.h("div", { key: 'c80e6030db6916b6fdfe72e5a707497e61aaf141', class: "xv-container" }, index$1.h("xv-mega-menu", { key: '5c1740f5061cbdd8404ce2690301afbf45fe226d', open: this.mobMenuOpen, onOpenChange: this.closeMobMenu })))), index$1.h("xv-login-modal", { key: 'eaa458800f87f7afd5fb8e59971bdb2f753e20d4', visible: this.showLoginModal, onClose: () => this.showLoginModal = false })));
|
|
80954
81287
|
}
|
|
80955
81288
|
get el() { return index$1.getElement(this); }
|
|
80956
81289
|
};
|
|
@@ -80995,7 +81328,7 @@ const XvImageViewer = class {
|
|
|
80995
81328
|
}
|
|
80996
81329
|
}
|
|
80997
81330
|
render() {
|
|
80998
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81331
|
+
return (index$1.h(index$1.Host, { key: '9a38430d83c931045bed1692b0c96c4682a18c1a', class: "image-wrapper" }, this.loaded ? (index$1.h("img", { src: this.src, alt: this.alt, class: "image", onClick: this.handleClick })) : index$1.h("xv-loader-v2", { class: "loading" }, this.placeholder), this.isFullscreen && (index$1.h("div", { key: '4cdae1d6b9c5140613520b37f0be4b6da842a4ce', class: "fullscreen-overlay", onClick: this.closeFullscreen }, !this.fullscreenLoaded && index$1.h("xv-loader-v2", { key: '8eb6d9f98514ae782882f8a86eab66f3804d275a', class: "loading", size: _vars.SIZE_VAR.LG }, this.placeholder), index$1.h("img", { key: '4e25b79e548aedc045a75d8d7b3ca7e56e577ebf', src: this.fullscreenSrc || this.src, alt: this.alt, class: {
|
|
80999
81332
|
'fullscreen-image': true,
|
|
81000
81333
|
loaded: this.fullscreenLoaded,
|
|
81001
81334
|
} })))));
|
|
@@ -81020,7 +81353,7 @@ const XvLink = class {
|
|
|
81020
81353
|
e.stopPropagation();
|
|
81021
81354
|
}
|
|
81022
81355
|
render() {
|
|
81023
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81356
|
+
return (index$1.h(index$1.Host, { key: '487bb531f1eade847d6ff3487830eca6ff07d9b2', class: { [`xv-link_${this.variant}`]: true, disabled: !!this.disabled } }, index$1.h("a", { key: '791b1a482545af8495b04cae22409e736fc5166b', 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: 'c2b0214254c2498093828d35c51eb691bf887120', name: "icon-left" }), index$1.h("slot", { key: '06df3a56df57a6a730e3352a52b178cd7c41dc8d' }), index$1.h("slot", { key: '7bc90e9c136e5fd72e61b20a134c3b8ddfeb00c2', name: "icon-right" }))));
|
|
81024
81357
|
}
|
|
81025
81358
|
};
|
|
81026
81359
|
XvLink.style = xvLinkCss();
|
|
@@ -81188,7 +81521,7 @@ const XvMegaMenu = class {
|
|
|
81188
81521
|
void this.fetchMenuData();
|
|
81189
81522
|
}
|
|
81190
81523
|
render() {
|
|
81191
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81524
|
+
return (index$1.h(index$1.Host, { key: '72def4630e671be424a302fb835880cddeb6b17f' }, index$1.h("nav", { key: 'e8719aa30336759ca2c43f524ccc77d24da70eae', class: { 'xv-menu': true, open: this.open } }, this.menuLoading && (index$1.h("div", { key: '06f2ff2344b4ceda1286b19d9b103c2a5b9b2996', class: { 'xv-menu-loader': true, open: this.open } }, index$1.h("xv-loader-v2", { key: '3e49ba2fcf79b84f9308212c4d9bf0a071fc97c4' }))), index$1.h("ul", { key: '428f50fbd46b764c98738ea5a4780a4601b849b3', class: { menu: true, open: this.open } }, this.menuItems.map((menuItem) => {
|
|
81192
81525
|
var _a, _b;
|
|
81193
81526
|
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) => {
|
|
81194
81527
|
var _a;
|
|
@@ -81198,7 +81531,7 @@ const XvMegaMenu = class {
|
|
|
81198
81531
|
} }, 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' &&
|
|
81199
81532
|
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"))))))))));
|
|
81200
81533
|
}))))));
|
|
81201
|
-
}), index$1.h("li", { key: '
|
|
81534
|
+
}), index$1.h("li", { key: '29923f808bf6e5ff3a446fc268c8724b82da0c1d', class: "menu--right" }, index$1.h("slot", { key: '50333ba3a99af998668236ce77fa138498ec6a03', name: "menu-right" })), this.open && (index$1.h("li", { key: '013f8adf4d4c4935252a92df628ee73d0bc68319', class: "menu--backdrop", onClick: () => this.handleClose() }))))));
|
|
81202
81535
|
}
|
|
81203
81536
|
get el() { return index$1.getElement(this); }
|
|
81204
81537
|
};
|
|
@@ -81266,7 +81599,7 @@ const XvModal = class {
|
|
|
81266
81599
|
}
|
|
81267
81600
|
render() {
|
|
81268
81601
|
var _a;
|
|
81269
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81602
|
+
return (index$1.h(index$1.Host, { key: '395a794dfbc5e54df4bf4c9ef825180dc02c76fe', role: "dialog", size: this.size, id: this.el.id }, index$1.h("slot", { key: '0d54138edf1edfe30a3a05fc9bcbe88699cc0134', name: "trigger", onSlotchange: this.setupTrigger }), index$1.h("div", { key: '12a6853ad559cec0829cd2af935de51ada0516f5', class: { backdrop: true }, onClick: this.onBackdropClick }, index$1.h("div", { key: '41704448acaab0cfd70aadfe67ac3aa3e803765e', class: "modal" }, index$1.h("button", { key: '82c3756ba70e011197015cce6fbbfccd652fce8b', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), index$1.h("div", { key: '216a696e637a83db67f17a46570238987f5762a8', class: "modal_header" }, index$1.h("slot", { key: 'e0f7a8b13d470ea6dbe922f2f535c6776397d249', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && index$1.h("h5", { key: '0fd4666c85f2a65bcae87fddda4c27b4e606244a', class: "modal_header__title" }, this.el.title))), index$1.h("div", { key: 'b05859b3b895c7c481586c063f9940f1834e17b5', class: { 'modal_content': true, overflow: this.overflow } }, index$1.h("slot", { key: '98ed63c3083036b3aa9f2888754fd4e80a0fcfdc' })), index$1.h("div", { key: 'eec90c432f5002a2022a8d153db5633f8e09ebeb', class: "modal_footer" }, index$1.h("slot", { key: 'c7f99d613b1a3ff540e49a63010b2efcd0141f6b', name: "footer" })), !!this.loading && (index$1.h("div", { key: '4396aa0a43fef8dcb2a333165a9173db6e4a55ad', class: "loading" }, index$1.h("xv-loader-v2", { key: '3ca8de976550d84bbf72111e0b177be353e82adf', size: _vars.SIZE_VAR.LG })))))));
|
|
81270
81603
|
}
|
|
81271
81604
|
disconnectedCallback() {
|
|
81272
81605
|
this.removeTriggerListener();
|
|
@@ -81304,14 +81637,14 @@ const XvNotification = class {
|
|
|
81304
81637
|
};
|
|
81305
81638
|
}
|
|
81306
81639
|
render() {
|
|
81307
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81640
|
+
return (index$1.h(index$1.Host, { key: '235e7eeac319dc62f6fdda891c89eeb7eff6436b', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), index$1.h("div", { key: 'a3a9a61c8d1d9dcacf4d62da5c68b88f27e90ac0', class: "content" }, index$1.h("div", { key: 'b6a14771fc956020fa3c98706835dbaa8007d175', class: "content_wrapper" }, this.el.title && index$1.h("h5", { key: 'c8da5f2ababfa11e208a6f547f80be6dc06f6117', class: "content_title" }, this.el.title), index$1.h("slot", { key: 'faf09191d7393005fe665adedf71d6eb4e9a697c' })), index$1.h("slot", { key: '10839bbdfe5833733f95a2b06e88c3a72a12134d', name: "footer" })), this.dismissible && index$1.h("button", { key: 'ea7e69ca969267efef32bc2726658ab1de3307db', class: "close", onClick: this.closeHandle })));
|
|
81308
81641
|
}
|
|
81309
81642
|
static get assetsDirs() { return ["xv-notification/icons"]; }
|
|
81310
81643
|
get el() { return index$1.getElement(this); }
|
|
81311
81644
|
};
|
|
81312
81645
|
XvNotification.style = xvNotificationCss();
|
|
81313
81646
|
|
|
81314
|
-
const xvNumberInputCss = () => `.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-block;text-align:left}:host .control_label{display:block;margin-bottom:var(--spacing-03);color:var(--text-secondary, #515151);font-family:var(--ff-body,
|
|
81647
|
+
const xvNumberInputCss = () => `.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-block;text-align:left}:host .control_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_input{display:flex;border:1px solid var(--border-subtle-01);outline:2px solid transparent;background-color:transparent;border-radius:3px;transition:250ms ease-in-out border-color, 250ms ease-in-out outline-color}:host .control_input:hover{border-color:var(--border-subtle-selected-01)}:host .control_input:focus-within{outline-color:var(--focus)}:host .control_input.error{outline-color:var(--support-error)}:host .control_input.readonly{border-radius:0;border-top-width:0;border-left-width:0;border-right-width:0;outline-color:transparent}:host .control_input input[type=number]{flex:1;border:none;outline:none;-moz-appearance:textfield;background-color:transparent;margin:0;padding-block:0;padding-inline:var(--spacing-05);font-family:inherit;box-sizing:border-box;color:var(--text-primary);min-width:20px;font-style:normal;font-weight:400;letter-spacing:0.16px}:host .control_input input[type=number]::-webkit-inner-spin-button,:host .control_input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host .control_input__icons{display:inline-flex;align-items:stretch;column-gap:2px}:host .control_input__icons .status-icon{display:inline-flex;align-items:center;align-self:center;font-size:1.35em;font-weight:400;color:var(--icon-primary, #131313)}:host .control_input__icons .status-icon.error{background-color:var(--support-error);color:white;width:16px;height:16px;border-radius:8px;font-size:12px;font-weight:bold;align-items:center;justify-content:center}:host .control_input__icons .status-icon.warning{color:var(--support-warning)}:host .control_input__icons hr{border:none;outline:none;width:1px;height:60%;align-self:center;background-color:var(--border-subtle-01);display:inline-flex}: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(.disabled){cursor:not-allowed}:host(.disabled) .control_label,:host(.disabled) .control_input input[type=number],:host(.disabled) .control_input input[type=number]::placeholder,:host(.disabled) .message:not(.error){color:var(--text-disabled);cursor:not-allowed}:host(.disabled) .control_input__icons,:host(.disabled) .message.error{opacity:0.5;cursor:not-allowed}:host([block]){display:block}`;
|
|
81315
81648
|
|
|
81316
81649
|
const XvNumberInput = class {
|
|
81317
81650
|
constructor(hostRef) {
|
|
@@ -81354,12 +81687,12 @@ const XvNumberInput = class {
|
|
|
81354
81687
|
this.valueChange.emit(this.value);
|
|
81355
81688
|
}
|
|
81356
81689
|
render() {
|
|
81357
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81690
|
+
return (index$1.h(index$1.Host, { key: '4c2205967e9fa39e5b666a8887bb4d8b71c46108', class: { disabled: !!this.disabled } }, index$1.h("label", { key: '8dca0dde06e78d972ab03eed43e1d9de119b9aa3', class: "control" }, this.label && index$1.h("span", { key: '8f8c87e0acbe83723122d7b54620aa4356215cf4', class: "control_label" }, this.label), index$1.h("div", { key: '9b416f35eb4bf00ca31b77db749605dce47a10cb', class: {
|
|
81358
81691
|
'control_input': true,
|
|
81359
81692
|
readonly: !!this.readonly,
|
|
81360
81693
|
error: !!this.error,
|
|
81361
81694
|
warning: !!this.warning
|
|
81362
|
-
} }, index$1.h("input", { key: '
|
|
81695
|
+
} }, index$1.h("input", { key: '5c8ae79945236934e457de24525d09b3ae0e6042', 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: '2f9f8d47a4544ca7cc033ee8ef7cd91e9064025f', 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: '7097cadf8d099044c102287f9f421a0775524172', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.decrement, "aria-label": "Decrease" }, index$1.h("span", { key: '99dc4fbc627b26d761da0408b3168fa588e62c73', slot: "icon-left", class: "status-icon" }, "\u2212")), index$1.h("hr", { key: '5426ac1ecaba3e8764c0f29a2fbe4562181eee82' }), index$1.h("xv-button-v2", { key: 'aa3b6032cb85512977d90ff61d9f098c704844de', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.increment, "aria-label": "Increase" }, index$1.h("span", { key: '676cc79dfe281c5eaf1c8c388373c9693a04ca03', slot: "icon-left", class: "status-icon" }, "+"))))), this.helper && index$1.h("p", { key: '1708cd3888daf09b1ab77780d6657f412a037f33', 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));
|
|
81363
81696
|
}
|
|
81364
81697
|
static get formAssociated() { return true; }
|
|
81365
81698
|
};
|
|
@@ -81417,8 +81750,8 @@ const XvOverflowMenu = class {
|
|
|
81417
81750
|
}
|
|
81418
81751
|
}
|
|
81419
81752
|
render() {
|
|
81420
|
-
const button = (index$1.h("button", { key: '
|
|
81421
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81753
|
+
const button = (index$1.h("button", { key: '73720460fc78213115a31c0181c4c7f1385560e4', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, index$1.h("slot", { key: '166ef848a483e25b30680eac57d0b722dc52af02', name: "trigger" }, index$1.h("svg", { key: '2577f8a2282cf39f3e6895e771b38a252a73d95f', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, index$1.h("path", { key: '9205ac66ede166449766a20a71741ccac988424f', 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" })))));
|
|
81754
|
+
return (index$1.h(index$1.Host, { key: '17e345c7cb7cc90ed3faf618923545091e205a21', class: "xv-overflow-menu", size: this.size, role: "menu", tabindex: -1 }, this.tooltip ? index$1.h("xv-tooltip-v2", { message: this.tooltip }, button) : button, index$1.h("div", { key: 'f9bfd6ff02216be53e2318534f385d33d3476be6', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, index$1.h("slot", { key: 'ce9f3b5465c5fba9d3e2eccdddc061e891883596' }))));
|
|
81422
81755
|
}
|
|
81423
81756
|
componentDidLoad() {
|
|
81424
81757
|
this.openChangeHandle();
|
|
@@ -81451,7 +81784,7 @@ const XvOverflowMenuItem = class {
|
|
|
81451
81784
|
this.itemClick.emit({ event, value: this.value });
|
|
81452
81785
|
}
|
|
81453
81786
|
render() {
|
|
81454
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81787
|
+
return (index$1.h(index$1.Host, { key: 'dcb24e934cb3cfb138f543c08a3019616c45f06d', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, index$1.h("slot", { key: 'e7bc0635305bcc2c5076ab69d900e03563caae3f' })));
|
|
81455
81788
|
}
|
|
81456
81789
|
};
|
|
81457
81790
|
XvOverflowMenuItem.style = xvOverflowMenuItemCss();
|
|
@@ -81549,7 +81882,7 @@ const XvPagination = class {
|
|
|
81549
81882
|
this.observer.disconnect();
|
|
81550
81883
|
}
|
|
81551
81884
|
render() {
|
|
81552
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81885
|
+
return (index$1.h(index$1.Host, { key: '1a7aab4fae3cc3a92ce20ed15839636d753bd3e6', class: { block: this.block, [this.currentVariant]: true, [this.size]: !!this.size } }, this.currentVariant === 'full' && (index$1.h("div", { key: 'a6dd623522eb06beccdce1f90c5ad3ca63fa3039', class: "block" }, index$1.h("select", { key: '800115649fcf5d758f00765b7b8a231f716b8660', 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: '8a7cfffb7a1731d5ff9c29c63f51ecf656512cd2', 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: '5838adec4f878b2d424d7c43f2bcd333c38fc75d', class: "block" }, index$1.h("select", { key: 'c931eea3b5abb75b27d16fc094ab62db6d03c94a', 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: '12f06632f7aba021d629c212fd04d251c9714510' }, "von ", this.total, " Seiten"))), this.currentVariant === 'compact' && index$1.h("span", { key: 'ce90ddcc1e33a7433b9634478e3e91282cbc3768', class: "block" }, "Seite ", this.page), index$1.h("xv-button-v2", { key: '9d400ce87b4828192e0d5453ca2838eebe696f6d', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page - 1), disabled: this.page <= 1 }, index$1.h("span", { key: 'cab1af288635b420d2ce24848afacdf059b91f24', slot: "icon-left", class: "icon icon_prev" })), this.currentVariant === 'regular' && (index$1.h("ul", { key: '8aab2c1ad4749eaa5372b1790e1f9dcae9210f41', 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: 'f2aa2d873b60a5f38355bc9d78bd4a2820c0bfa6', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page + 1), disabled: this.page >= this.total }, index$1.h("span", { key: '39ebbf125c026ceed8e70057a7aa03ef6eea8b90', slot: "icon-left", class: "icon icon_next" }))));
|
|
81553
81886
|
}
|
|
81554
81887
|
get el() { return index$1.getElement(this); }
|
|
81555
81888
|
};
|
|
@@ -81618,7 +81951,7 @@ const XvProgressIndicator = class {
|
|
|
81618
81951
|
this.updateChildItems();
|
|
81619
81952
|
}
|
|
81620
81953
|
render() {
|
|
81621
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81954
|
+
return (index$1.h(index$1.Host, { key: '45e33259c01f9dfb90532dbbf1cb3b7a1f5084fc', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, index$1.h("slot", { key: '29fac0a6e79851f1d392aa9407bdf3002c553fd6' })));
|
|
81622
81955
|
}
|
|
81623
81956
|
get el() { return index$1.getElement(this); }
|
|
81624
81957
|
static get watchers() { return {
|
|
@@ -81637,13 +81970,13 @@ const XvProgressIndicatorItem = class {
|
|
|
81637
81970
|
this.status = PROGRESS_ITEM_STATUS.NO_STARTED;
|
|
81638
81971
|
}
|
|
81639
81972
|
render() {
|
|
81640
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81973
|
+
return (index$1.h(index$1.Host, { key: 'cfcb35613b67d35b40b0c1ece5715c4e0bb8f372', status: this.status, class: { 'xv-progress-indicator-item': true } }, index$1.h("span", { key: '9c8d521503fb4a26e479257fecd720b78a2f2c34', class: "line" }), index$1.h("span", { key: 'c98ed72b0a3bfe908bf9ca671676552bee7ea0ef', class: "icon" }, index$1.h("svg", { key: '62fc0b686ca5704d23a2938e902497f717a2cdd8', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, index$1.h("path", { key: '2e7b4c3a6f348e54a770e606995904fec3e4f63c', 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: 'c88fb4bf6b60702e68dee7179656838b4997c2b8', class: "label" }, index$1.h("slot", { key: '7e065b6163bcc6ece9e3bf5119c42027df5dae09' }))));
|
|
81641
81974
|
}
|
|
81642
81975
|
get el() { return index$1.getElement(this); }
|
|
81643
81976
|
};
|
|
81644
81977
|
XvProgressIndicatorItem.style = xvProgressIndicatorItemCss();
|
|
81645
81978
|
|
|
81646
|
-
const xvRadioCss = () => `.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-radio{--xv-radio-size:16px;display:inline-flex;flex-direction:column;row-gap:var(--spacing-03);font-family:var(--ff-body,
|
|
81979
|
+
const xvRadioCss = () => `.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-radio{--xv-radio-size:16px;display:inline-flex;flex-direction:column;row-gap:var(--spacing-03);font-family:var(--ff-body), sans-serif;font-size:var(--fz-sm, 12px);font-style:normal;font-weight:400;letter-spacing:0.16px;line-height:128.571%;text-align:left}.xv-radio--block{display:flex}.xv-radio--reverse{justify-content:flex-end;text-align:right}.xv-radio--reverse .xv-radio_container,.xv-radio--reverse .xv-radio_msg{flex-direction:row-reverse}.xv-radio--size-xs{--xv-radio-size:9px;font-size:var(--fz-xs)}.xv-radio--size-sm{--xv-radio-size:12px}.xv-radio--size-md{--xv-radio-size:16px}.xv-radio--size-lg{--xv-radio-size:20px}.xv-radio--size-xl{--xv-radio-size:24px;font-size:var(--fz-lg)}.xv-radio_label{user-select:none;color:var(--text-secondary, #515151);font-weight:400;padding:0;margin:0}.xv-radio_container{display:inline-flex;align-items:center;cursor:pointer;column-gap:var(--spacing-03);margin:0}.xv-radio_container.disabled{cursor:not-allowed;opacity:0.6}.xv-radio_container__label{user-select:none;color:var(--text-primary, #333);font-size:1.2em}.xv-radio_input{position:relative;color:var(--interactive-01, #273435)}.xv-radio_input input[type=radio]{position:absolute;opacity:0;top:0;left:0;right:0;bottom:0}.xv-radio_input input[type=radio]:checked+.xv-radio_input__mark:after{content:"";position:absolute;width:calc(var(--xv-radio-size) / 2);height:calc(var(--xv-radio-size) / 2);border-radius:50%;background-color:currentColor;top:calc(50% - var(--xv-radio-size) / 4);left:calc(50% - var(--xv-radio-size) / 4)}.xv-radio_input input[type=radio]:focus+.xv-radio_input__mark{outline:1px solid currentColor}.xv-radio_input__mark{position:relative;display:inline-flex;width:var(--xv-radio-size);height:var(--xv-radio-size);border-radius:50%;border:1px solid currentColor}.xv-radio_input--error{color:var(--text-error)}.xv-radio_msg{display:flex;align-items:center;flex-direction:row;column-gap:var(--spacing-03)}.xv-radio_msg--error{color:var(--text-error)}.xv-radio_msg--error .xv-radio_msg__status{background-color:var(--support-error);color:white;border-radius:var(--xv-radio-size);font-size:calc(var(--xv-radio-size) / 1.3);font-weight:bold;align-items:center;justify-content:center}.xv-radio_msg--warning{color:var(--text-secondary, #515151)}.xv-radio_msg--warning .xv-radio_msg__status{font-size:var(--xv-radio-size);color:var(--support-warning)}.xv-radio_msg__status{display:inline-flex;align-items:center;align-self:center;font-size:1.35em;width:var(--xv-radio-size);height:var(--xv-radio-size)}.xv-radio [slot=info]{display:inline-block;color:var(--text-secondary, #515151);margin:0;padding:0}`;
|
|
81647
81980
|
|
|
81648
81981
|
const XvRadio = class {
|
|
81649
81982
|
constructor(hostRef) {
|
|
@@ -81669,12 +82002,12 @@ const XvRadio = class {
|
|
|
81669
82002
|
}
|
|
81670
82003
|
}
|
|
81671
82004
|
render() {
|
|
81672
|
-
return (index$1.h("div", { key: '
|
|
82005
|
+
return (index$1.h("div", { key: '8f40f0a639e61e91f1c59e5c11c4acbcdd982f49', class: {
|
|
81673
82006
|
'xv-radio': true,
|
|
81674
82007
|
'xv-radio--reverse': this.reverse,
|
|
81675
82008
|
'xv-radio--block': this.block,
|
|
81676
82009
|
[`xv-radio--size-${this.size}`]: !!this.size,
|
|
81677
|
-
} }, this.label && index$1.h("p", { key: '
|
|
82010
|
+
} }, this.label && index$1.h("p", { key: 'f277cccd732c2bbe7b8539ff91330d070539f738', class: "xv-radio_label" }, this.label), index$1.h("label", { key: '98a6b0281a0c01d4a9ae5399d50e375bd737575d', class: { 'xv-radio_container': true, disabled: this.disabled } }, index$1.h("div", { key: '7bbf06b3f63f074597f174feaadd1eca83b5ccdf', class: { 'xv-radio_input': true, 'xv-radio_input--error': !!this.error || this.error === '' } }, index$1.h("input", { key: '431866b919a68b2d78dc2f0c61b9407290d8ca5a', 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: '92ffae36802ea09bfeb5f6bd11cf200824821dad', class: "xv-radio_input__mark" })), index$1.h("span", { key: 'b13471b0a20c2aeef4a5395aece483edbcbaaaab', class: "xv-radio_container__label" }, index$1.h("slot", { key: '1ab86f9ef84bb60c47396228333a9031f34be03d' }))), this.error && typeof this.error === 'string' && (index$1.h("span", { key: 'dc647adaffebc46e783b906eab32611fbfc59f2b', class: "xv-radio_msg xv-radio_msg--error" }, index$1.h("span", { key: 'cc9257571ac674a36bb18eecd6225fc4e7d5cdfd', class: "xv-radio_msg__status", "aria-hidden": "true" }, "!"), this.error)), this.warning && typeof this.warning === 'string' && (index$1.h("span", { key: '9533a6c9e04f662e08527096c38fd745b6eedcf8', class: "xv-radio_msg xv-radio_msg--warning" }, index$1.h("span", { key: 'c904e88f9bf6c11f0f79fb15c5dc6be861b1ec60', class: "xv-radio_msg__status", "aria-hidden": "true" }, "\u26A0"), this.warning)), index$1.h("slot", { key: 'b648ea9fb57255ef87678fce182730960bb96a10', name: "info" })));
|
|
81678
82011
|
}
|
|
81679
82012
|
connectedCallback() {
|
|
81680
82013
|
var _a;
|
|
@@ -81708,7 +82041,7 @@ const XvRadio = class {
|
|
|
81708
82041
|
};
|
|
81709
82042
|
XvRadio.style = xvRadioCss();
|
|
81710
82043
|
|
|
81711
|
-
const xvSliderCss = () => `.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:flex;flex-direction:column;gap:var(--spacing-03, 8px);text-align:left;font-family:var(--ff-body)}:host .label{color:var(--text-secondary, #515151);font-size:var(--fz-sm);font-weight:
|
|
82044
|
+
const xvSliderCss = () => `.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:flex;flex-direction:column;gap:var(--spacing-03, 8px);text-align:left;font-family:var(--ff-body), sans-serif}:host .label{color:var(--text-secondary, #515151);font-size:var(--fz-sm);font-weight:400;line-height:var(--fz-md);letter-spacing:0.32px}:host .control{display:flex;align-items:center;gap:var(--spacing-04, 12px)}:host .control_label{text-align:center;color:var(--text-primary, #333);font-size:var(--fz-md);font-weight:400;line-height:var(--fz-lg);letter-spacing:0.32px}:host .control input[type=range]{flex:1;appearance:none;height:4px;border-radius:2px;outline:none;background-color:var(--border-subtle-01, #D1D1D1);background-image:linear-gradient(var(--interactive-02), var(--interactive-02));background-repeat:no-repeat}:host .control input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background-color:var(--interactive-02, #96bf00);cursor:pointer;border:2px solid transparent;outline:2px solid transparent;transition:200ms ease-in-out border-color, 200ms ease-in-out outline-color}:host .control input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background-color:var(--interactive-02, #96bf00);border:2px solid transparent;outline:2px solid transparent;cursor:pointer;transition:200ms ease-in-out border-color, 200ms ease-in-out outline-color}:host .control input[type=range]:focus::-webkit-slider-thumb{border-color:white;outline-color:var(--focus)}:host .control input[type=range]:focus::-moz-range-thumb{border-color:white;outline-color:var(--focus)}:host .control input[type=number]{inline-size:3.7em;padding:var(--spacing-04) var(--spacing-02) var(--spacing-04) var(--spacing-04);text-align:center;border-radius:3px;background:var(--field-02, #FFF);box-shadow:0 0 0 1px #8B8B8B inset;border:none}:host(.disabled) .label,:host(.disabled) .control_label,:host(.disabled) input[type=number]{color:var(--text-disabled, rgba(19, 19, 19, 0.25))}:host(.disabled) .control input[type=range]{background-image:none;background-color:var(--border-subtle-01, #D1D1D1)}:host(.disabled) .control input[type=range]::-webkit-slider-thumb{background-color:var(--border-subtle-01, #D1D1D1)}:host(.disabled) .control input[type=range]::-moz-range-thumb{background-color:var(--border-subtle-01, #D1D1D1)}:host(.disabled) .control input[type=number]{background-color:var(--field-01, #F7F7F7);box-shadow:none}:host(.readonly) input[type=number]{box-shadow:none;outline:none;background-color:var(--field-01, #F7F7F7)}`;
|
|
81712
82045
|
|
|
81713
82046
|
const XvSlider = class {
|
|
81714
82047
|
constructor(hostRef) {
|
|
@@ -81758,7 +82091,7 @@ const XvSlider = class {
|
|
|
81758
82091
|
this.setValue(this.min);
|
|
81759
82092
|
}
|
|
81760
82093
|
render() {
|
|
81761
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82094
|
+
return (index$1.h(index$1.Host, { key: 'c142eca9d5cbadff35ae17d08660aa4f1b035209', class: { disabled: this.disabled, readonly: this.readonly } }, this.label && index$1.h("label", { key: '1f143f27dfdb97e89f22878ce078e95e0c62dcb9', class: "label" }, this.label), index$1.h("div", { key: '519812acc6e027e02e513d60c15bfa0e580b2baa', class: "control" }, index$1.h("span", { key: '77d924c0384c02ed708f7ca004269a728dfd34f9', class: "control_label" }, this.min), index$1.h("input", { key: '8786885b500f564d1f172e954bd71f7c7f74ceed', 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: '06dc306d120db3aa865ebe9e332eaa8e08e96e84', class: "control_label" }, this.max), !this.notEditable && (index$1.h("input", { key: '75914e5010ebe2771a707629024c623f3703b377', 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 })))));
|
|
81762
82095
|
}
|
|
81763
82096
|
static get formAssociated() { return true; }
|
|
81764
82097
|
};
|
|
@@ -81773,7 +82106,7 @@ const XvTab = class {
|
|
|
81773
82106
|
this.loading = false;
|
|
81774
82107
|
}
|
|
81775
82108
|
render() {
|
|
81776
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82109
|
+
return (index$1.h(index$1.Host, { key: '21f71a5d1a5dec85149615069b8d1bb1904da3db', disabled: this.disabled, name: this.name }, this.loading ? index$1.h("xv-loader-v2", { size: _vars.SIZE_VAR.LG }) : index$1.h("slot", null)));
|
|
81777
82110
|
}
|
|
81778
82111
|
};
|
|
81779
82112
|
XvTab.style = xvTabCss();
|
|
@@ -81813,7 +82146,7 @@ const XvTable = class {
|
|
|
81813
82146
|
.join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
|
|
81814
82147
|
}
|
|
81815
82148
|
render() {
|
|
81816
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82149
|
+
return (index$1.h(index$1.Host, { key: '09bf013de8bd7c6fc948cb00347ebac3d09c8852', class: { batchVisible: !!this.selectedCount } }, index$1.h("slot", { key: '69d6b93a823d43a79caba584f32e65aab7251e43', name: "title" }, !!this.el.title && index$1.h("h2", { key: '6bc91577912a4653983c6a39494196bb4db09473', class: "xv-table-title" }, this.el.title)), index$1.h("slot", { key: '55cef1ba4d2c67b8f288d4b578961d50df1f8480', name: "toolbar" }), index$1.h("div", { key: '6e226e6bed369bf2565f0feec0273b371158eb7c', class: "xv-table" }, index$1.h("div", { key: '4164dd3b54a71355190383fcb8d7c48a04657c43', class: "batch-actions" }, index$1.h(index$1.Fragment, { key: '33e22ccdcbc6ef94bf960ec10d4ed3362df608f6' }, index$1.h("div", { key: '3e22bb85ad78afa3b026c4e30b33a03a240c3762', class: "batch-actions_content" }, index$1.h("slot", { key: 'c3f8246007a325026b6a4d761a505de06fe30762', name: "batch" })), index$1.h("p", { key: 'ecfb7e5d27ea779cb0294028fad812b2a3645327', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), index$1.h("div", { key: '64579ed1062c6001f5ff7a92ee3914fe6d02f0e6', class: "xv-table_wrapper" }, index$1.h("slot", { key: 'e9fc226e5f4da71bbc24635ed28b3e5583e31386' }), index$1.h("slot", { key: 'aa787b29455594cbdcbfc1b1332c5080147c6429', name: "footer" })), !!this.loading && (index$1.h("div", { key: '3463995af96e5894d77f4f6e996d7a62e960f815', class: "xv-table_loading" }, index$1.h("xv-loader-v2", { key: 'dcd88d13a9036bcca5bdc17e532d38ada18fec98', size: _vars.SIZE_VAR.LG }))))));
|
|
81817
82150
|
}
|
|
81818
82151
|
componentWillLoad() {
|
|
81819
82152
|
this.setColsSizeTemplate();
|
|
@@ -81854,7 +82187,7 @@ const XvTableCell = class {
|
|
|
81854
82187
|
}
|
|
81855
82188
|
;
|
|
81856
82189
|
render() {
|
|
81857
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82190
|
+
return (index$1.h(index$1.Host, { key: '5aaf16353f90d653196ac50a51f83e3b3a93d3c4' }, index$1.h("slot", { key: 'b9d5003075bb5d204d0489ff82a0c7982ca6840c' })));
|
|
81858
82191
|
}
|
|
81859
82192
|
get el() { return index$1.getElement(this); }
|
|
81860
82193
|
};
|
|
@@ -81875,7 +82208,7 @@ const XvTableExpand = class {
|
|
|
81875
82208
|
};
|
|
81876
82209
|
}
|
|
81877
82210
|
render() {
|
|
81878
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82211
|
+
return (index$1.h(index$1.Host, { key: '3886cb72495a7e6c97330e76b0cd882b4fd8b287' }, index$1.h("button", { key: '943b84f05767b86e9f53d6b395542cda235cfcc1', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), index$1.h("slot", { key: '3cc39988d4691155b5719f3ee8f0fa33255a1fd4', name: XV_EXPANDABLE_KEY }), index$1.h("div", { key: 'b6cfe72340454dd7e18fd9baa22f12305c3bfef2', class: { expandableContent: true, open: this.open } }, index$1.h("slot", { key: '5b61c681533023603bb0c6d2f877f122b9bf6dd4' }))));
|
|
81879
82212
|
}
|
|
81880
82213
|
componentDidLoad() {
|
|
81881
82214
|
index$2.setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
|
|
@@ -81930,7 +82263,7 @@ const XvTableRow = class {
|
|
|
81930
82263
|
}
|
|
81931
82264
|
}
|
|
81932
82265
|
render() {
|
|
81933
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82266
|
+
return (index$1.h(index$1.Host, { key: '27a864a3a27877c89f674b72ad405f7376e1bdc0' }, this.variant !== undefined && (index$1.h("xv-table-v2-cell", { key: '70904c820a234f20f4076c9f39b4793b42348536', class: "cell-control" }, this.variant === 'checkbox' && (index$1.h("xv-checkbox-v2", { key: 'a2897549f2b2cf2d97ac6f130aee539d3c064822', 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: 'd048ee4e9b0162c36222c0153944c0b4ee6b1ebe', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), index$1.h("slot", { key: '2c92a52ed6d00ebfedd539b7322e8c40393f6282' })));
|
|
81934
82267
|
}
|
|
81935
82268
|
componentWillLoad() {
|
|
81936
82269
|
this.setInitialAttrs();
|
|
@@ -82051,7 +82384,7 @@ const XvTabs = class {
|
|
|
82051
82384
|
};
|
|
82052
82385
|
XvTabs.style = xvTabsCss();
|
|
82053
82386
|
|
|
82054
|
-
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,
|
|
82387
|
+
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}`;
|
|
82055
82388
|
|
|
82056
82389
|
const XvTagCombobox = class {
|
|
82057
82390
|
constructor(hostRef) {
|
|
@@ -82288,12 +82621,12 @@ const XvTagCombobox = class {
|
|
|
82288
82621
|
const suggestionsVisible = this.open && this.filtered.length > 0;
|
|
82289
82622
|
const ariaOwns = suggestionsVisible ? `${this.uid}-listbox` : undefined;
|
|
82290
82623
|
const activedesc = this.highlighted >= 0 ? this.optionId(this.highlighted) : undefined;
|
|
82291
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82624
|
+
return (index$1.h(index$1.Host, { key: '91dae1582cb4246be4893facdf13777fe993c19c', class: "xv-combobox", part: "root", size: this.size }, this.label && index$1.h("label", { key: '409bd22d48bee345018003500e4790e13858fad2', class: "label" }, this.label), index$1.h("div", { key: '10e50e6b56954cbca5e04c8ec61c68ab666b450f', class: {
|
|
82292
82625
|
'control': true,
|
|
82293
82626
|
'control--disabled': this.disabled,
|
|
82294
82627
|
'control--error': !!this.error,
|
|
82295
82628
|
'control--readonly': !!this.readonly,
|
|
82296
|
-
}, onClick: () => this.blockClick() }, index$1.h("div", { key: '
|
|
82629
|
+
}, onClick: () => this.blockClick() }, index$1.h("div", { key: '89da5d24f1c9a78120851cf10ea22df2bce3bfe9', 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: '633c1f8e9d2bd90e44c3be09dc594e8101afc5a1', 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.error && typeof this.error === 'string' && (index$1.h("p", { key: 'f9bd812962df75191af5c515103cb927cac49452', class: "message message--error" }, this.error)), this.warning && typeof this.warning === 'string' && (index$1.h("p", { key: '203509e3ab990bbc2e3aecb3935fda61188056eb', class: "message message--warning" }, this.warning)), suggestionsVisible && (index$1.h("ul", { key: '35de0b5c6bc376d5b3388308e4f0f1e7235358e5', 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)))))))))));
|
|
82297
82630
|
}
|
|
82298
82631
|
get host() { return index$1.getElement(this); }
|
|
82299
82632
|
static get watchers() { return {
|
|
@@ -82325,12 +82658,12 @@ const XvTag = class {
|
|
|
82325
82658
|
this.closeClick.emit(e);
|
|
82326
82659
|
}
|
|
82327
82660
|
render() {
|
|
82328
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82661
|
+
return (index$1.h(index$1.Host, { key: '4d462b6ff04dbb9db9675b0c99e8da16d4536f9b', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, index$1.h("div", { key: '76379a9ee13b77649aa67a61cd8ccd150e1b5aba', class: "xv-tag_content", part: "details-content" }, index$1.h("slot", { key: 'a53a8802f5978856351ace83b1a87a119a352b90' })), this.closeable && (index$1.h("button", { key: '5b9a53d9c20e5bd4e5ecc47e91aeb2c8dd5f4f44', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
|
|
82329
82662
|
}
|
|
82330
82663
|
};
|
|
82331
82664
|
XvTag.style = xvTagCss();
|
|
82332
82665
|
|
|
82333
|
-
const xvTextInputCss = () => `.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-block;text-align:left}:host .control_label{display:block;margin-bottom:var(--spacing-03);color:var(--text-secondary, #515151);font-family:var(--ff-body, Work Sans), sans-serif;font-size:var(--fz-sm, 12px);font-style:normal;font-weight:
|
|
82666
|
+
const xvTextInputCss = () => `.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-block;text-align:left}:host .control_label{display:block;margin-bottom:var(--spacing-03);color:var(--text-secondary, #515151);font-family:var(--ff-body, Work Sans), 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_input{display:flex;border:1px solid var(--border-subtle-01);outline:2px solid transparent;background-color:transparent;border-radius:3px;transition:250ms ease-in-out border-color, 250ms ease-in-out outline-color}:host .control_input:hover{border-color:var(--border-subtle-selected-01)}:host .control_input:focus-within{outline-color:var(--focus)}:host .control_input.error{outline-color:var(--support-error)}:host .control_input.readonly{outline-color:transparent;background:var(--field-01, #F7F7F7);background-blend-mode:multiply}:host .control_input.readonly input{color:var(--text-secondary)}:host .control_input input{flex:1;border:none;outline:none;-moz-appearance:textfield;background-color:transparent;margin:0;padding-block:0;padding-inline:var(--spacing-05);box-sizing:border-box;color:var(--text-primary);min-width:20px;font-style:normal;font-weight:400;letter-spacing:0.16px}:host .control_input input::-webkit-inner-spin-button,:host .control_input input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host .control_input input[type=search]::-webkit-search-cancel-button,:host .control_input input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}:host .control_input input[type=search]::-ms-clear,:host .control_input input[type=search]::-ms-reveal{display:none;width:0;height:0}:host .control_input__icons{display:inline-flex;align-items:stretch;column-gap:2px;padding-right:var(--spacing-05)}:host .control_input__icons:empty{padding-right:0}:host .control_input__icons .status-icon{display:inline-flex;align-items:center;align-self:center;font-size:1.35em}:host .control_input__icons .status-icon:is(button){background-color:transparent;box-shadow:none;border:none;cursor:pointer}:host .control_input__icons .status-icon.error{background-color:var(--support-error);color:white;width:16px;height:16px;border-radius:8px;font-size:12px;font-weight:bold;align-items:center;justify-content:center}:host .control_input__icons .status-icon.warning{color:var(--support-warning)}:host .control_input__icons hr{border:none;outline:none;width:2px;height:60%;align-self:center;background-color:var(--border-subtle-01);display:inline-flex}:host .control_input.xs{height:16px}:host .control_input.sm{height:32px}:host .control_input.md{height:40px}:host .control_input.lg{height:48px}:host .control_input.xl{height:60px}: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(.disabled){cursor:not-allowed}:host(.disabled) .control_label,:host(.disabled) .control_input input,:host(.disabled) .control_input input::placeholder,:host(.disabled) .message:not(.error){color:var(--text-disabled);cursor:not-allowed}:host(.disabled) .control_input__icons,:host(.disabled) .message.error{opacity:0.5;cursor:not-allowed}:host([block]){display:block}:host([block]) .control_input input{width:100%}`;
|
|
82334
82667
|
|
|
82335
82668
|
const XvTextInput = class {
|
|
82336
82669
|
constructor(hostRef) {
|
|
@@ -82359,19 +82692,19 @@ const XvTextInput = class {
|
|
|
82359
82692
|
};
|
|
82360
82693
|
}
|
|
82361
82694
|
render() {
|
|
82362
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82695
|
+
return (index$1.h(index$1.Host, { key: '420f4a0d02558a7171550c34669f5644496103cf', class: { disabled: !!this.disabled } }, index$1.h("label", { key: '782e7a0f80116150e7fe9cb2412127b1e3e1587c', class: "control" }, this.label && index$1.h("span", { key: '77d2e12b964be91c371c9724c1687931f2878353', class: "control_label" }, this.label), index$1.h("div", { key: '45a936403569b342d9b28a9cb7dce084b171a490', class: {
|
|
82363
82696
|
'control_input': true,
|
|
82364
82697
|
readonly: !!this.readonly,
|
|
82365
82698
|
[this.size]: true,
|
|
82366
82699
|
error: !!this.error,
|
|
82367
82700
|
warning: !!this.warning,
|
|
82368
|
-
} }, index$1.h("input", { key: '
|
|
82701
|
+
} }, index$1.h("input", { key: '9e24b77c8752590ca921767651525d4d653c06e5', 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: 'd72b4669c8eb2f92268dff31f39f1c2babc633ed', class: "control_input__icons" }, this.loading && index$1.h("xv-loader-v2", { key: '0fc051cdf9a905f29bb06cc20bee19ba73fec490', 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: '1ea8abe015adb0e58a836a811fe881712d297332', onClick: this.togglePassword, disabled: this.disabled, class: "status-icon" }, index$1.h("svg", { key: '964a623003f5b3dfd52f8a5748e917260d047a63', 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: '2879f0a0baea4adf950ece4c9dbb9bfb30a474af', 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));
|
|
82369
82702
|
}
|
|
82370
82703
|
static get formAssociated() { return true; }
|
|
82371
82704
|
};
|
|
82372
82705
|
XvTextInput.style = xvTextInputCss();
|
|
82373
82706
|
|
|
82374
|
-
const xvTextareaCss = () => `.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-block;text-align:left}:host .control_label{display:flex;justify-content:space-between;column-gap:var(--spacing-03);margin:0 0 var(--spacing-03);color:var(--text-secondary, #515151);font-family:var(--ff-body,
|
|
82707
|
+
const xvTextareaCss = () => `.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-block;text-align:left}:host .control_label{display:flex;justify-content:space-between;column-gap:var(--spacing-03);margin:0 0 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_label__count{font-weight:400}:host .control_label [role=tooltip]{margin-left:var(--spacing-03)}:host .control_input{display:flex;position:relative;border:1px solid var(--border-subtle-01);font-size:var(--fz-md, 14px);outline:2px solid transparent;background-color:transparent;border-radius:3px;transition:250ms ease-in-out border-color, 250ms ease-in-out outline-color}:host .control_input:hover{border-color:var(--border-subtle-selected-01)}:host .control_input:focus-within{outline-color:var(--focus)}:host .control_input.error{outline-color:var(--support-error)}:host .control_input.readonly{outline-color:transparent;background:var(--field-01, #F7F7F7);background-blend-mode:multiply}:host .control_input.readonly textarea{color:var(--text-secondary)}:host .control_input.error textarea,:host .control_input.warning textarea{padding-inline-end:calc(var(--spacing-05, 16px) + 16px)}:host .control_input textarea{flex:1;border:none;outline:none;margin:0;font-family:inherit;background-color:transparent;padding-block:var(--spacing-05);padding-inline:var(--spacing-05);box-sizing:border-box;color:var(--text-primary);min-width:20px;font-size:inherit;font-style:normal;font-weight:400;letter-spacing:0.16px}:host .control_input textarea.no-resize{resize:none}:host .control_input__icons{position:absolute;right:var(--spacing-05);top:var(--spacing-05);display:inline-flex;align-items:stretch;column-gap:2px}:host .control_input__icons .status-icon{display:inline-flex;align-items:center;align-self:center;font-size:16px;line-height:1}:host .control_input__icons .status-icon.error{background-color:var(--support-error);color:white;width:16px;height:16px;border-radius:8px;font-size:12px;font-weight:bold;align-items:center;justify-content:center}:host .control_input__icons .status-icon.warning{color:var(--support-warning)}: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(.disabled){cursor:not-allowed}:host(.disabled) .control_label,:host(.disabled) .control_input textarea,:host(.disabled) .control_input textarea::placeholder,:host(.disabled) .message:not(.error){color:var(--text-disabled);cursor:not-allowed}:host(.disabled) .control_input__icons,:host(.disabled) .message.error{opacity:0.5;cursor:not-allowed}:host([block]){display:block}:host([block]) .control_input textarea{width:100%}:host([size=xs]) .control_input textarea{padding-block:var(--spacing-03);font-size:0.8em}:host([size=sm]) .control_input textarea{padding-block:var(--spacing-04);font-size:0.9em}:host([size=lg]) .control_input textarea{padding-block:var(--spacing-06);font-size:1.1em}:host([size=xl]) .control_input textarea{padding-block:var(--spacing-07);font-size:1.2em}`;
|
|
82375
82708
|
|
|
82376
82709
|
const XvTextarea = class {
|
|
82377
82710
|
constructor(hostRef) {
|
|
@@ -82402,12 +82735,12 @@ const XvTextarea = class {
|
|
|
82402
82735
|
this.value && this.internals.setFormValue(this.value);
|
|
82403
82736
|
}
|
|
82404
82737
|
render() {
|
|
82405
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82738
|
+
return (index$1.h(index$1.Host, { key: '34e946e9178df48959fc501b2608dbb06f9c1ce6', class: { disabled: !!this.disabled } }, index$1.h("label", { key: '7d78cf03eb9a09c6c6dda1f8241b846fa6d6ed1b', class: "control" }, (this.label || this.max) && (index$1.h("p", { key: 'c62efd11a2133fddb9bbebd715ef36ee8c462684', class: "control_label" }, index$1.h("span", { key: '1599ae0b7d495d43a277628b13f973744b05dd49' }, this.label, this.info && index$1.h("xv-tooltip-v2", { key: 'cb152cbc452ce846562ffea62f95699fc7eedbe3', message: this.info })), this.max !== undefined && !this.counterHide && (index$1.h("span", { key: '89b29468e7fb4866889829f21814aeee3eece0a2', class: "control_label__count" }, this.value.length || 0, "/", this.max)))), index$1.h("div", { key: '47a5317512454488fa7e3627463ff12b6cc809d9', class: {
|
|
82406
82739
|
'control_input': true,
|
|
82407
82740
|
readonly: !!this.readonly,
|
|
82408
82741
|
error: !!this.error,
|
|
82409
82742
|
warning: this.warning !== undefined,
|
|
82410
|
-
} }, index$1.h("textarea", { key: '
|
|
82743
|
+
} }, index$1.h("textarea", { key: 'd88ec74fc0a798e8a32f5019c8146d97b40ce13a', 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: 'c5895fab0e7850bca64121c86b1fa5b8d64e8d7e', class: "control_input__icons" }, this._renderIcon()))), this.helper && index$1.h("p", { key: 'c795a389d5031142c378390713142da5b95f42d8', 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));
|
|
82411
82744
|
}
|
|
82412
82745
|
_renderIcon() {
|
|
82413
82746
|
if (this.loading)
|
|
@@ -82458,7 +82791,7 @@ const XvTile = class {
|
|
|
82458
82791
|
this.checked = !this.checked;
|
|
82459
82792
|
}
|
|
82460
82793
|
render() {
|
|
82461
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82794
|
+
return (index$1.h(index$1.Host, { key: '9a3af7defbb0ac4c83b727cf72cd114208d90b1d', class: "xv-tile--host" }, index$1.h("label", { key: '81d7b28f4038483639a03b4e3d158d2e5c40a9e7', class: {
|
|
82462
82795
|
[this.el.className]: !!this.el.className,
|
|
82463
82796
|
'xv-tile': true,
|
|
82464
82797
|
[`xv-tile--variant-${this.variant}`]: !!this.variant,
|
|
@@ -82466,7 +82799,7 @@ const XvTile = class {
|
|
|
82466
82799
|
'xv-tile--disabled': !!this.disabled,
|
|
82467
82800
|
'selected': !!this.checked,
|
|
82468
82801
|
'xv-tile--error': !!this.error,
|
|
82469
|
-
} }, index$1.h("div", { key: '
|
|
82802
|
+
} }, index$1.h("div", { key: '7a155efc48c548c0d3f0055148f345b903a4703d', class: "xv-tile_content" }, this.label && index$1.h("p", { key: '2901366896f4cf5806425a2240e1dd7f461fb380', class: "xv-tile_content__title" }, this.label), index$1.h("slot", { key: '5279a18e3e8ecb3e30f581c51e953ffa0d1b40a6' })), this.variant === 'selectable' && (index$1.h("div", { key: '66cc022bad5fe1f435152bc22e2dc7062ed3bd83', 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: 'e6ce703a037fcb0a073a0e9c982dc84394c90744', class: "xv-tile_footer" }, index$1.h("button", { key: '6780db8c79ff091adf8c8be3b9a664b22a7f533f', class: { 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked } }))), index$1.h("div", { key: 'e4c171531e526478ba4075f9b304fa69c095e79d', class: { 'xv-tile_expandable': true, open: this.checked } }, index$1.h("slot", { key: 'aee614238518c73a00deb5b48cc64b86362cc4fa', name: "expandable" })))));
|
|
82470
82803
|
}
|
|
82471
82804
|
get el() { return index$1.getElement(this); }
|
|
82472
82805
|
};
|
|
@@ -82498,7 +82831,7 @@ const XvToggle = class {
|
|
|
82498
82831
|
};
|
|
82499
82832
|
}
|
|
82500
82833
|
render() {
|
|
82501
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82834
|
+
return (index$1.h(index$1.Host, { key: '2247390de134eeb3ca9e75d8838f2f89ab453eda', class: { 'xv-toggle': true, disabled: this.disabled, readonly: !!this.readonly, block: !!this.block } }, this.label && index$1.h("span", { key: 'a23b0a053442c73c1b753d33bd6793bf501655c0', class: "label" }, this.label), index$1.h("label", { key: '14088188c883890aafffb18ce1c3eb6da92c6732', class: "control" }, index$1.h("slot", { key: '723c3915395699a8b7343a298c2eac5ecfebd27c', name: "before" }), index$1.h("div", { key: 'b3252d819d64a511b2c3c3323fc3946631e3aadc', class: "control_input" }, index$1.h("input", { key: '5c5a209ee7d4d09a09b7e370b885ab7965b50fe0', 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: '407db6561c45d1dd9649f94533f7ecdf893c6a28', class: "toggle" })), index$1.h("slot", { key: '9d75faa2183417eb8c8537d680666529e8260180', name: "after" }))));
|
|
82502
82835
|
}
|
|
82503
82836
|
static get formAssociated() { return true; }
|
|
82504
82837
|
};
|
|
@@ -82575,7 +82908,7 @@ const XvToggleTip = class {
|
|
|
82575
82908
|
}
|
|
82576
82909
|
;
|
|
82577
82910
|
render() {
|
|
82578
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82911
|
+
return (index$1.h(index$1.Host, { key: '92fc5a31de3637018876b5530c36f153ddc4123b', class: "xv-toggle-tip" }, index$1.h("div", { key: '675966f43c5c21cbd8a64e5945df8a357bdf0703', 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: '94215d0cf8a60848b92cbe7dd9309cb39264cbfa', name: "trigger" }, index$1.h("svg", { key: 'b316b67ef454f87795c4e576e64d570d6bc7dd82', class: "trigger_icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, index$1.h("path", { key: '64c233df6d036f41960c40c1b6a8b098bdf0ccca', 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: 'b027cb97e4a3fb6d96d70e97d3c19c098d2971df', class: { popover: true, autoSize: !!this.autoSize }, role: "tooltip", tabindex: "-1", ref: (el) => (this.popoverEl = el) }, index$1.h("div", { key: 'e930a39f9a1a8d6ed531375da1706b7caab6a078', class: "popover-tip", part: "tip", "data-popper-arrow": "" }), index$1.h("div", { key: '3dc3a8e73a8f3ffef127c004ac65ae820a974b55', class: "popover-content" }, index$1.h("slot", { key: 'd7a6502e1be0fe9ec4d24e0cd473d3537b0aaa53', name: "header" }), index$1.h("slot", { key: '6c9cbece231e22ede5b7e4ac8e9570d916fbbb3a', name: "body" }), index$1.h("slot", { key: 'f25f29402bf908afac30237733e682d621780e8a', name: "footer" })))));
|
|
82579
82912
|
}
|
|
82580
82913
|
disconnectedCallback() {
|
|
82581
82914
|
this.destroyPopper();
|
|
@@ -82630,11 +82963,11 @@ const XvTooltip = class {
|
|
|
82630
82963
|
this.destroyTooltip();
|
|
82631
82964
|
}
|
|
82632
82965
|
render() {
|
|
82633
|
-
return (index$1.h(index$1.Host, { key: '
|
|
82966
|
+
return (index$1.h(index$1.Host, { key: '3c25e03b919fe975522757407c114a2a7fa01758', role: "tooltip", class: {
|
|
82634
82967
|
'xv-tooltip-wrapper': true,
|
|
82635
82968
|
[`xv-tooltip-wrapper__block`]: !!this.block,
|
|
82636
82969
|
[`xv-tooltip-wrapper__dashed`]: !!this.dashed,
|
|
82637
|
-
} }, index$1.h("slot", { key: '
|
|
82970
|
+
} }, index$1.h("slot", { key: '3aa9b34adda1865b53e3905326699a556be3af2a' }, index$1.h("svg", { key: '31a94a5001d746180ac050203e997cfcb0e6e57b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, index$1.h("path", { key: 'f56da185cd078fdcb58546f692530fffcd752880', 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" })))));
|
|
82638
82971
|
}
|
|
82639
82972
|
get el() { return index$1.getElement(this); }
|
|
82640
82973
|
};
|
|
@@ -82646,6 +82979,8 @@ exports.xv_breadcrumbs_v2 = XvBreadcrumbs;
|
|
|
82646
82979
|
exports.xv_button_v2 = XvButton;
|
|
82647
82980
|
exports.xv_card_v2 = XvCard;
|
|
82648
82981
|
exports.xv_checkbox_v2 = XvCheckbox;
|
|
82982
|
+
exports.xv_content_switcher_item_v2 = XvContentSwitcherItem;
|
|
82983
|
+
exports.xv_content_switcher_v2 = XvContentSwitcher;
|
|
82649
82984
|
exports.xv_data_table = XvDataTable;
|
|
82650
82985
|
exports.xv_data_table_cell = XvDataTableCell;
|
|
82651
82986
|
exports.xv_data_table_collapse = XvDataTableCollapse;
|