xv-webcomponents 1.25.1 → 1.25.2
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/{index-DpLAFt0R.js → index-CsKqwBc1.js} +644 -7
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/xv-accordion-v2_50.cjs.entry.js +59 -41
- package/dist/cjs/xv-footer-next.cjs.entry.js +122 -0
- package/dist/cjs/xv-header-next.cjs.entry.js +2 -2
- package/dist/cjs/xv-mega-menu-next.cjs.entry.js +7 -7
- package/dist/cjs/xv-webcomponents.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/xv-data-table/xv-data-table-cell/xv-data-table-cell.css +2 -1
- package/dist/collection/components/xv-footer-next/xv-footer-next.css +486 -0
- package/dist/collection/components/xv-footer-next/xv-footer-next.js +167 -0
- package/dist/collection/components/xv-footer-next/xv-footer-next.model.js +17 -0
- package/dist/collection/components/xv-geo-map/xv-geo-map.js +41 -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.css +46 -2
- package/dist/collection/components/xv-mega-menu/xv-mega-menu.js +6 -7
- package/dist/collection/components/xv-mega-menu-next/xv-mega-menu-next.css +42 -2
- package/dist/collection/components/xv-mega-menu-next/xv-mega-menu-next.js +20 -6
- package/dist/collection/components/xv-modal/xv-modal.js +1 -1
- package/dist/collection/components/xv-notification/xv-notification.js +1 -1
- package/dist/collection/components/xv-number-input/xv-number-input.js +2 -2
- package/dist/collection/components/xv-pagination/xv-pagination.js +1 -1
- package/dist/collection/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.js +1 -1
- package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js +1 -1
- package/dist/collection/components/xv-radio/xv-radio.js +2 -2
- package/dist/collection/components/xv-slider/xv-slider.js +1 -1
- package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.js +1 -1
- package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.js +1 -1
- package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js +1 -1
- package/dist/collection/components/xv-table/xv-table.js +1 -1
- package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js +1 -1
- package/dist/collection/components/xv-tag/xv-tag.js +1 -1
- package/dist/collection/components/xv-tag-combobox/xv-tag-combobox.js +2 -2
- package/dist/collection/components/xv-text-input/xv-text-input.js +2 -2
- package/dist/collection/components/xv-textarea/xv-textarea.js +2 -2
- package/dist/collection/components/xv-tile/xv-tile.js +2 -2
- package/dist/collection/components/xv-toggle/xv-toggle.js +1 -1
- package/dist/collection/components/xv-toggle-tip/xv-toggle-tip.js +1 -1
- package/dist/collection/components/xv-tooltip/xv-tooltip.js +2 -2
- package/dist/esm/{index-CQm2sRKT.js → index-D0yFoU2h.js} +1 -1
- package/dist/esm/{index-DmxA2ysB.js → index-Owr_mJOX.js} +644 -7
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/xv-accordion-v2_50.entry.js +60 -42
- package/dist/esm/xv-footer-next.entry.js +120 -0
- package/dist/esm/xv-header-next.entry.js +3 -3
- package/dist/esm/xv-mega-menu-next.entry.js +8 -8
- package/dist/esm/xv-webcomponents.js +3 -3
- package/dist/types/components/xv-footer-next/xv-footer-next.d.ts +42 -0
- package/dist/types/components/xv-footer-next/xv-footer-next.model.d.ts +43 -0
- package/dist/types/components/xv-geo-map/xv-geo-map.d.ts +7 -0
- package/dist/types/components/xv-mega-menu-next/xv-mega-menu-next.d.ts +14 -0
- package/dist/types/components.d.ts +131 -0
- package/dist/xv-webcomponents/index.esm.js +1 -1
- package/dist/xv-webcomponents/p-3dd10203.entry.js +1 -0
- package/dist/xv-webcomponents/{p-CQm2sRKT.js → p-D0yFoU2h.js} +1 -1
- package/dist/xv-webcomponents/p-Owr_mJOX.js +2 -0
- package/dist/xv-webcomponents/p-b0fbf402.entry.js +8 -0
- package/dist/xv-webcomponents/p-ec19bcc7.entry.js +1 -0
- package/dist/xv-webcomponents/{p-f46bb687.entry.js → p-fbd8ca68.entry.js} +1 -1
- package/dist/xv-webcomponents/xv-webcomponents.esm.js +1 -1
- package/hydrate/index.d.ts +287 -0
- package/hydrate/index.js +113808 -0
- package/hydrate/index.mjs +113798 -0
- package/hydrate/package.json +12 -0
- package/package.json +8 -2
- package/dist/xv-webcomponents/p-7832549c.entry.js +0 -8
- package/dist/xv-webcomponents/p-DmxA2ysB.js +0 -2
- package/dist/xv-webcomponents/p-fe9b38f8.entry.js +0 -1
|
@@ -475,6 +475,25 @@ export class XvGeoMap {
|
|
|
475
475
|
this.fitTo([...this.selected.values(), ...this.preview.values()]);
|
|
476
476
|
return this.preview.size;
|
|
477
477
|
}
|
|
478
|
+
/**
|
|
479
|
+
* Highlight already-loaded units by code in the preview color — the ATV optimizer's
|
|
480
|
+
* region-reduction proposal marks the units it would DROP from the selection (MAR-15968).
|
|
481
|
+
* Visual only, like previewByRadius: the selection and its events stay untouched.
|
|
482
|
+
* Unknown codes are skipped (they cannot be painted without geometry). Returns the count shown.
|
|
483
|
+
*/
|
|
484
|
+
async previewPostalCodes(codes) {
|
|
485
|
+
await this.ensureReady();
|
|
486
|
+
this.preview.clear();
|
|
487
|
+
codes.forEach(code => {
|
|
488
|
+
const unit = this.units.get(code);
|
|
489
|
+
if (unit)
|
|
490
|
+
this.preview.set(code, unit);
|
|
491
|
+
});
|
|
492
|
+
this.renderUnits();
|
|
493
|
+
this.updatePreviewFilter();
|
|
494
|
+
this.fitTo([...this.selected.values(), ...this.preview.values()]);
|
|
495
|
+
return this.preview.size;
|
|
496
|
+
}
|
|
478
497
|
/** Remove the optimizer proposal highlight. */
|
|
479
498
|
async clearPreview() {
|
|
480
499
|
await this.ensureReady();
|
|
@@ -568,7 +587,7 @@ export class XvGeoMap {
|
|
|
568
587
|
this.map.fitBounds([[minX, minY], [maxX, maxY]], { padding: 48, maxZoom: 12, duration: 800 });
|
|
569
588
|
}
|
|
570
589
|
render() {
|
|
571
|
-
return (h(Host, { key: '
|
|
590
|
+
return (h(Host, { key: 'aa8a62537eefb4c8b0573d52a245fddee58784e9' }, h("div", { key: 'd3272c744cfad85c612266bea1770814cf894008', class: "container" }, h("div", { key: '8c81a14c3e18ddd009534fa9990a1fa16e1d9230', class: "map", ref: el => (this.mapContainer = el) }), this.ready && this.showSearch && (h("div", { key: 'fb0895d39cf80ac86cce680b53b28fa96482e278', class: "search" }, h("input", { key: '183868a736825e213c89a3a692e91bcf6c3d1184', type: "search", placeholder: "Ort oder PLZ suchen", value: this.searchQuery, onInput: e => this.onSearchInput(e.target.value) }), this.searchResults.length > 0 && (h("ul", { key: '9c4853667eb7cdec8a0250cb92708a0f25002ba7', class: "search-results" }, this.searchResults.map(r => (h("li", { key: r.code, onClick: () => this.pickSearchResult(r) }, this.level === 'plz5' ? (h("span", null, h("strong", null, r.code), " ", r.name)) : (h("span", null, r.name))))))))), this.ready && this.zoomGated && (h("div", { key: 'bb82b0a5403c108e3ac2afc9b08f3716dac842ca', class: "hint" }, "Reinzoomen, um PLZ-Gebiete zu laden")), !this.ready && !this.loadError && (h("div", { key: 'f15a084e4ef12d7c70b59aa3605e0c7f9f7b775f', class: "skeleton", "aria-busy": "true" }, h("xv-loader-v2", { key: 'ec09c3c91355e7b6af8d7d4447e3f009ac525a83', variant: "vertical" }, "Karte wird geladen \u2026"))), this.loadError && h("div", { key: '165dba4e3bef05e469a02549814a776026ec6692', class: "skeleton error" }, "Karte konnte nicht geladen werden."))));
|
|
572
591
|
}
|
|
573
592
|
static get is() { return "xv-geo-map-v2"; }
|
|
574
593
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1065,6 +1084,27 @@ export class XvGeoMap {
|
|
|
1065
1084
|
"tags": []
|
|
1066
1085
|
}
|
|
1067
1086
|
},
|
|
1087
|
+
"previewPostalCodes": {
|
|
1088
|
+
"complexType": {
|
|
1089
|
+
"signature": "(codes: string[]) => Promise<number>",
|
|
1090
|
+
"parameters": [{
|
|
1091
|
+
"name": "codes",
|
|
1092
|
+
"type": "string[]",
|
|
1093
|
+
"docs": ""
|
|
1094
|
+
}],
|
|
1095
|
+
"references": {
|
|
1096
|
+
"Promise": {
|
|
1097
|
+
"location": "global",
|
|
1098
|
+
"id": "global::Promise"
|
|
1099
|
+
}
|
|
1100
|
+
},
|
|
1101
|
+
"return": "Promise<number>"
|
|
1102
|
+
},
|
|
1103
|
+
"docs": {
|
|
1104
|
+
"text": "Highlight already-loaded units by code in the preview color \u2014 the ATV optimizer's\nregion-reduction proposal marks the units it would DROP from the selection (MAR-15968).\nVisual only, like previewByRadius: the selection and its events stay untouched.\nUnknown codes are skipped (they cannot be painted without geometry). Returns the count shown.",
|
|
1105
|
+
"tags": []
|
|
1106
|
+
}
|
|
1107
|
+
},
|
|
1068
1108
|
"clearPreview": {
|
|
1069
1109
|
"complexType": {
|
|
1070
1110
|
"signature": "() => Promise<void>",
|
|
@@ -254,7 +254,7 @@ export class XvHeader {
|
|
|
254
254
|
render() {
|
|
255
255
|
var _a, _b, _c, _d, _e;
|
|
256
256
|
const isXvBrand = (((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a['WhitelabelName']) || 'Xv') === 'Xv';
|
|
257
|
-
return (h("header", { key: '
|
|
257
|
+
return (h("header", { key: 'af76cc152a61bcdd725ba0a0d5c48046bb111f46', class: "header" }, h("div", { key: '91c1725f926deaeba6506d25bf8ed88d43032e12', class: "header-wrapper" }, h("div", { key: '7c6afc22c00d3e42df091fc965d448b16063b3fe', class: "xv-container" }, h("div", { key: '7b7366c9e099194726e76395344c3218d39c170b', class: "header-top" }, h("div", { key: 'd95a4ebbd1f64a329753a70b41e7b1ae7e5b8048', class: "header-top--left" }, h("xv-button-v2", { key: '90a8afed61b6aba93470742ba90e1d3644149c01', class: "menu-btn", variant: "ghost", onClick: this.toggleMobMenu }, h("i", { key: '5c3de90341ce5de24aa826f2743c90a2b0caaa57', slot: "icon-left", class: { 'fa': true, 'fa-times': this.mobMenuOpen, 'fa-bars': !this.mobMenuOpen } })), this.metaNav && (h("a", { key: 'c2c70834af7af1c61899c9b42248f5a9c2ba0847', href: `${window.location.origin}/` }, h("picture", { key: 'ad3d59ec5f1ccd35c8298ac10c6d833331bc3ebc' }, h("source", { key: '88c08972c01e3009ef7fc3fbc027b91a09eca1b2', srcSet: ((_b = this.metaNav) === null || _b === void 0 ? void 0 : _b.LogoUrl) || 'https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg', media: "(min-width: 990px)" }), h("img", { key: '63e63e7f7139a9dcfcd59bc6dea4904712c3b934', src: ((_c = this.metaNav) === null || _c === void 0 ? void 0 : _c.LogoSmallUrl) || 'https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg', onError: this.logoFallback, loading: "lazy", alt: "Crossvertise" })))), this.orgUnit && (h("xv-link-v2", { key: '04ff42e03785cc899aeeef33e24a695a0756f7ca', class: "header-top--orgUnit", variant: "standalone", href: "/de-de/mycrossvertise" }, this.orgUnit))), h("ul", { key: 'e3afec2cb65aba7d5c3ec617a6fd9c67a06cda40', class: "header-top--right" }, this._renderSearch(), this._renderImpersonationInfo(), !((_d = this.metaNav) === null || _d === void 0 ? void 0 : _d.IsManager) && isXvBrand && (h("li", { key: '24ef7a40a1d8831a79fed88546d901b51b0aecaa' }, h("xv-link-v2", { key: '64983c24b0520da29c9d62d3db26be5f4d161c7d', variant: "ghost", href: "https://www.crossvertise.com/ueber-uns/kontakt" }, h("xv-button-v2", { key: '92a37e3a1ed35dfe5337873ee06209259937710e', variant: "ghost", size: SIZE_VAR.MD }, h("i", { key: '61d8fd3a6978ef0d90ee21e41bd3c9e0ce67d307', class: "header-icon far fa-envelope" }), h("span", { key: 'fe9fd5e6d6f78e861edd80f9f451c1950223ef77', class: "header-label xv-body-02" }, "Kontakt"))))), this._renderNotifications(), this._renderAccount(), !((_e = this.metaNav) === null || _e === void 0 ? void 0 : _e.IsManager) && isXvBrand && (h("li", { key: '2f406dc181e2e1f55d7cbf1812fc2049e0a1212d' }, h("xv-link-v2", { key: '6c761c5240738696651da0e7ef1304cfd9e90400', variant: "ghost", href: "https://help.crossvertise.com" }, h("xv-button-v2", { key: '7a3a12f34e45d1c6c6aad807ab28ba16bbd4d73b', variant: "ghost", size: SIZE_VAR.MD }, h("i", { key: 'd86a1bfff3cc411bff216152692d454b190e3ae7', class: "header-icon far fa-question-circle" }), h("span", { key: '3484c06f9051c6c7f777e86dc66f91b0baabc916', class: "header-label xv-body-02" }, "Hilfe"))))), this._renderShoppingCart()))), h("div", { key: 'c0e74d590f08d367fe08a98d80b050be37eb2a2e', class: "header-wrapper--bg" }, h("div", { key: '1d1c01db316866bf140d84f9a34dcde26003cf64', class: "xv-container" }, h("xv-mega-menu", { key: '565010cecbcc286a6d9bf8a4e7093b372cec6405', open: this.mobMenuOpen, onOpenChange: this.closeMobMenu })))), h("xv-login-modal", { key: '008a6f4f498d44bbcabaae47533e20d5a2783e15', visible: this.showLoginModal, onClose: () => this.showLoginModal = false })));
|
|
258
258
|
}
|
|
259
259
|
static get is() { return "xv-header"; }
|
|
260
260
|
static get originalStyleUrls() {
|
|
@@ -286,7 +286,7 @@ export class XvHeaderNext {
|
|
|
286
286
|
render() {
|
|
287
287
|
var _a, _b, _c, _d, _e;
|
|
288
288
|
const isXvBrand = (((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a['WhitelabelName']) || 'Xv') === 'Xv';
|
|
289
|
-
return (h("header", { key: '
|
|
289
|
+
return (h("header", { key: '13d7fbc791bf106fca9e8d0d643f85fe4b26d7ac', class: "header" }, h("div", { key: 'e76238af3ddee6774a343078b5eab8c0a0ddcde2', class: "header-wrapper" }, h("div", { key: '7ff35cfe21304425f452aa43f8c260b7e79dfc60', class: "xv-container" }, h("div", { key: '892194c85c214ffd3dcdaaf056b579ec958936bb', class: "header-top" }, h("div", { key: 'b27cc8229663d54af4b51a3d9765a66f1b514a40', class: "header-top--left" }, h("xv-button-v2", { key: 'b0ee35bc693cede15c79addb20ccd92a94c3c12c', class: "menu-btn", variant: "ghost", onClick: this.toggleMobMenu }, h("i", { key: 'd329862c59068cd047f0316f043c425c7f85a5f3', slot: "icon-left", class: { 'fa': true, 'fa-times': this.mobMenuOpen, 'fa-bars': !this.mobMenuOpen } })), this.metaNav && (h("a", { key: 'f72e3e73790f3398ad38c5d65b76f325b5d1d926', href: `${window.location.origin}/` }, h("picture", { key: 'f8571b4003da1388d01fa58bc938d9f86f412bb3' }, h("source", { key: '1cbe0a12af818d50f9da3b08ae4b47d406395273', srcSet: ((_b = this.metaNav) === null || _b === void 0 ? void 0 : _b.LogoUrl) || 'https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg', media: "(min-width: 990px)" }), h("img", { key: 'c5a26040bd7cd78649b40be427a6deeaf624b0ed', src: ((_c = this.metaNav) === null || _c === void 0 ? void 0 : _c.LogoSmallUrl) || 'https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg', onError: this.logoFallback, loading: "lazy", alt: "Crossvertise" })))), this.orgUnit && (h("xv-link-v2", { key: 'a14ab7c17ec9a3f4fbe8732374f376a62614f47b', class: "header-top--orgUnit", variant: "standalone", href: "/de-de/mycrossvertise" }, this.orgUnit))), h("ul", { key: 'eb44f0b25df5ea47b7d79ea68f07da630dfb23d9', class: "header-top--right" }, this._renderLocaleSwitcher(), this._renderSearch(), this._renderImpersonationInfo(), !((_d = this.metaNav) === null || _d === void 0 ? void 0 : _d.IsManager) && isXvBrand && (h("li", { key: '7bd22a2f234b53952a078e36aede6e19699d3873' }, h("xv-link-v2", { key: '3091655d737ab578250a324cd7e5a0d9e84d5656', variant: "ghost", href: "https://www.crossvertise.com/ueber-uns/kontakt" }, h("xv-button-v2", { key: '5644e7f350987527a536aa9e8c6867dca72fdb79', variant: "ghost", size: SIZE_VAR.MD }, h("i", { key: '18fefacd05272975ce019408acfaca4ecdf0501f', class: "header-icon far fa-envelope" }), h("span", { key: 'a887336de6e7445dda46d48ff2cb84f452ada512', class: "header-label xv-body-02" }, "Kontakt"))))), this._renderNotifications(), this._renderAccount(), !((_e = this.metaNav) === null || _e === void 0 ? void 0 : _e.IsManager) && isXvBrand && (h("li", { key: '3693bd474c58015528779799a182bede85b16bf3' }, h("xv-link-v2", { key: 'a31878f3b5a6562fe38bd919b1552a86be7e709a', variant: "ghost", href: "https://help.crossvertise.com" }, h("xv-button-v2", { key: 'd3a0fb1b8a21abfaf3a15a5aac3c1bd37d2e1484', variant: "ghost", size: SIZE_VAR.MD }, h("i", { key: '64b6055f1d6e21520bbb1e91e206ce42878d0710', class: "header-icon far fa-question-circle" }), h("span", { key: '1dc21ab66517122f8058a6a8f70d0f4e03fb8308', class: "header-label xv-body-02" }, "Hilfe"))))), this._renderShoppingCart()))), h("div", { key: '9c90c4062c9991bc74ead1273f55053c9853f0d9', class: "header-wrapper--bg" }, h("div", { key: 'dc3ac18bae6910ff92053538e0a0a78552a5b967', class: "xv-container" }, h("xv-mega-menu-next", { key: '212201d8520d0e89cae9a260cfb29c983cbd17a8', open: this.mobMenuOpen, onOpenChange: this.closeMobMenu, menuData: this.menuData })))), h("xv-login-modal", { key: '764fd4fac90c31092db8b8a2a6900a2f6e9cac03', visible: this.showLoginModal, onClose: () => this.showLoginModal = false })));
|
|
290
290
|
}
|
|
291
291
|
static get is() { return "xv-header-next"; }
|
|
292
292
|
static get originalStyleUrls() {
|
|
@@ -58,7 +58,7 @@ export class XvImageViewer {
|
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
render() {
|
|
61
|
-
return (h(Host, { key: '
|
|
61
|
+
return (h(Host, { key: '0ed113c4d6ce7a2222aa652e2ea99abec44be7a1', class: { 'image-wrapper': true, errored: this.errored } }, !this.loaded && h("xv-loader-v2", { key: 'b91d58e4eb0e93b186a17699bbcef8a1d27352a0', class: "loading" }, this.placeholder), this.loaded && this.errored && h("slot", { key: '5145a36dab2a5eaa92b3b7553a24612d8805c6d8', name: "fallback" }), this.loaded && !this.errored && (h("img", { key: 'd1845bc7d95670edb707c5429b0bab8cd4ea5989', src: this.src, alt: this.alt, class: "image", onClick: this.handleClick, onError: this.handleError })), this.isFullscreen && (h("dialog", { key: '08e2bcafc2683d5adbec3210d0f593cbd48fe560', class: "fullscreen-dialog", ref: el => (this.dialogEl = el), onClick: this.handleDialogClick, onClose: this.closeFullscreen }, !this.fullscreenLoaded && h("xv-loader-v2", { key: '54d603bb7403f92df9442fa2d56db0e9318c8ee4', class: "loading", size: SIZE_VAR.LG }, this.placeholder), h("img", { key: '4da2a309f7be022c868569512b489d3a6319908a', src: this.fullscreenSrc || this.src, alt: this.alt, class: {
|
|
62
62
|
'fullscreen-image': true,
|
|
63
63
|
loaded: this.fullscreenLoaded,
|
|
64
64
|
} })))));
|
|
@@ -12,7 +12,7 @@ export class XvLink {
|
|
|
12
12
|
e.stopPropagation();
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (h(Host, { key: '
|
|
15
|
+
return (h(Host, { key: 'a9fd4136c50ddba4c59f934503da66f725bc06cd', class: { [`xv-link_${this.variant}`]: true, disabled: !!this.disabled } }, h("a", { key: '9da08d8185f246a141b744661f863893efbae6b2', href: this.href, onClick: this.preventLinkHandler.bind(this), class: { 'xv-link': true, 'xv-link_disabled': !!this.disabled, [this.size]: !!this.size }, target: this.target }, h("slot", { key: '0ec8db6b346add89e185072bd0d1487a4437102e', name: "icon-left" }), h("slot", { key: '1e1b71d809911969bdf1e08368c671a3439f6087' }), h("slot", { key: '3eb15640ade7a7c88665360bfe3ab94b8a69e089', name: "icon-right" }))));
|
|
16
16
|
}
|
|
17
17
|
static get is() { return "xv-link-v2"; }
|
|
18
18
|
static get encapsulation() { return "shadow"; }
|
|
@@ -14,6 +14,10 @@
|
|
|
14
14
|
min-height: 55px;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
+
.xv-menu,
|
|
18
|
+
.xv-menu * {
|
|
19
|
+
box-sizing: content-box;
|
|
20
|
+
}
|
|
17
21
|
.xv-menu-loader {
|
|
18
22
|
position: absolute;
|
|
19
23
|
top: 0;
|
|
@@ -57,6 +61,32 @@
|
|
|
57
61
|
display: inline-block;
|
|
58
62
|
margin-inline-start: var(--spacing-01);
|
|
59
63
|
}
|
|
64
|
+
.xv-menu .action-link {
|
|
65
|
+
display: block;
|
|
66
|
+
color: var(--link-primary);
|
|
67
|
+
text-decoration: none;
|
|
68
|
+
transition: color 200ms ease-in-out;
|
|
69
|
+
}
|
|
70
|
+
.xv-menu .action-link:visited {
|
|
71
|
+
color: var(--link-primary);
|
|
72
|
+
}
|
|
73
|
+
.xv-menu .action-link:hover, .xv-menu .action-link:focus, .xv-menu .action-link:active {
|
|
74
|
+
text-decoration-line: underline;
|
|
75
|
+
text-decoration-style: solid;
|
|
76
|
+
text-decoration-skip-ink: none;
|
|
77
|
+
text-decoration-thickness: auto;
|
|
78
|
+
text-underline-offset: auto;
|
|
79
|
+
text-underline-position: from-font;
|
|
80
|
+
text-decoration-color: var(--link-primary);
|
|
81
|
+
}
|
|
82
|
+
.xv-menu .action-link:hover {
|
|
83
|
+
color: var(--link-primary-hover);
|
|
84
|
+
cursor: pointer;
|
|
85
|
+
}
|
|
86
|
+
.xv-menu .action-link:focus {
|
|
87
|
+
outline: 1px solid var(--focus);
|
|
88
|
+
outline-offset: 1px;
|
|
89
|
+
}
|
|
60
90
|
.xv-menu .menu {
|
|
61
91
|
overflow-x: auto;
|
|
62
92
|
display: flex;
|
|
@@ -111,9 +141,11 @@
|
|
|
111
141
|
}
|
|
112
142
|
}
|
|
113
143
|
.xv-menu .menu-item-label {
|
|
144
|
+
display: block;
|
|
114
145
|
margin: 0;
|
|
115
146
|
padding-block: var(--spacing-05, 16px);
|
|
116
147
|
color: inherit;
|
|
148
|
+
text-decoration: none;
|
|
117
149
|
font-size: 16px;
|
|
118
150
|
line-height: 24px;
|
|
119
151
|
font-family: var(--ff-body), sans-serif;
|
|
@@ -371,11 +403,23 @@
|
|
|
371
403
|
position: relative;
|
|
372
404
|
font-size: var(--fz-lg, 16px);
|
|
373
405
|
}
|
|
374
|
-
.xv-menu .menu .route .
|
|
406
|
+
.xv-menu .menu .route .route-link {
|
|
407
|
+
color: inherit;
|
|
408
|
+
text-decoration: none;
|
|
375
409
|
font-family: var(--ff-work-sans), sans-serif;
|
|
410
|
+
line-height: 133.333%;
|
|
411
|
+
transition: color 200ms ease-in-out;
|
|
376
412
|
}
|
|
377
|
-
.xv-menu .menu .route .
|
|
413
|
+
.xv-menu .menu .route .route-link:visited {
|
|
414
|
+
color: inherit;
|
|
415
|
+
}
|
|
416
|
+
.xv-menu .menu .route .route-link:hover {
|
|
378
417
|
color: var(--link-primary);
|
|
418
|
+
cursor: pointer;
|
|
419
|
+
}
|
|
420
|
+
.xv-menu .menu .route .route-link:focus {
|
|
421
|
+
outline: 1px solid var(--focus);
|
|
422
|
+
outline-offset: 1px;
|
|
379
423
|
}
|
|
380
424
|
@media (max-width: 991px) {
|
|
381
425
|
.xv-menu .menu .route {
|
|
@@ -43,7 +43,6 @@ export class XvMegaMenu {
|
|
|
43
43
|
async fetchMenuData() {
|
|
44
44
|
try {
|
|
45
45
|
this.menuItems = await api.get('/api-fd/v1/home/menu', {
|
|
46
|
-
awaitWl: true,
|
|
47
46
|
credentials: 'include'
|
|
48
47
|
}).then(({ data, meta }) => {
|
|
49
48
|
this.applicationContext = meta.applicationContext;
|
|
@@ -59,20 +58,20 @@ export class XvMegaMenu {
|
|
|
59
58
|
void this.fetchMenuData();
|
|
60
59
|
}
|
|
61
60
|
render() {
|
|
62
|
-
return (h(Host, { key: '
|
|
61
|
+
return (h(Host, { key: '5f2979691c296f255a4af567b13877b58042ebb1' }, h("nav", { key: '5488cc3b13d3384e349034a7faa519636b450690', class: { 'xv-menu': true, open: this.open } }, this.menuLoading && (h("div", { key: '225a780b15d381eb3dcd01a929165b8d6a3d34c2', class: { 'xv-menu-loader': true, open: this.open } }, h("xv-loader-v2", { key: 'b66f449bf7154ce77515df080872a75d661d96f1' }))), h("ul", { key: 'c7e7b2e44ca6966a0ff5aa4fed408064660eff38', class: { menu: true, open: this.open } }, this.menuItems.map((menuItem) => {
|
|
63
62
|
var _a, _b;
|
|
64
|
-
return (h("li", { class: { 'menu-item': true, active: menuItem.id === ((_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.id) } }, menuItem.route ? (h("
|
|
63
|
+
return (h("li", { class: { 'menu-item': true, active: menuItem.id === ((_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.id) } }, menuItem.route ? (h("a", { class: "menu-item-label", href: menuItem.route.route }, (_b = menuItem.route) === null || _b === void 0 ? void 0 : _b.label)) : (h(Fragment, null, h("p", { class: "menu-item-label", onClick: () => this.setActiveItem(menuItem) }, menuItem === null || menuItem === void 0 ? void 0 : menuItem.label), h("ul", { class: "menu-item-groups" }, menuItem.groups.map((group) => {
|
|
65
64
|
var _a;
|
|
66
65
|
return (h("li", { class: { group: true, active: ((_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id) === group.id } }, (group.label && menuItem.groups.length > 1) && (h("div", { class: "group-label", onClick: () => this.setActiveGroup(group) }, h("span", { class: "group-label-text" }, group.label), h("span", { class: "group-label-icon" }))), h("div", { class: "group-container" }, h("div", { class: {
|
|
67
66
|
'group-container-absolute': true,
|
|
68
67
|
noLabel: !(group.label && menuItem.groups.length > 1),
|
|
69
|
-
} }, h("div", { class: "group-menus" }, h("ul", { class: { 'group-menus-categories': true, inline: group.layout === 'inline' } }, group.categories.map((category) => (h("li", { class: "category" }, h("p", { class: "category-label" }, category.label), h("ul", { class: "category-routes" }, category.routes.map((route) => (h("li", { class: "route" }, h("
|
|
70
|
-
h("xv-button-v2", { onClick: () => this.navActionClick(action), block: true, variant: "tertiary" }, action.label)))))), (group === null || group === void 0 ? void 0 : group.card) && (h("div", { class: "group-card" }, h("xv-card-v2", { media: this.applicationContext !== 'Komsa' ? group.card.image : undefined, variant: this.isMobile ? 'horizontal' : 'vertical' }, h("h5", { slot: "header", class: "group-card-title" }, group.card.title), h("p", { slot: "body", class: "group-card-desc" }, group.card.description), group.card.linkLabel && (h("
|
|
68
|
+
} }, h("div", { class: "group-menus" }, h("ul", { class: { 'group-menus-categories': true, inline: group.layout === 'inline' } }, group.categories.map((category) => (h("li", { class: "category" }, h("p", { class: "category-label" }, category.label), h("ul", { class: "category-routes" }, category.routes.map((route) => (h("li", { class: "route" }, h("a", { class: "route-link", href: route.route || '#' }, route.label), route.tag && (h("xv-tag-v2", { class: "route-tag", size: "sm", color: "#161616", bg: "#E0E0E0" }, route.tag)))))))))), h("ul", { class: "group-menus-actions" }, group.actions.map((action) => (h("li", { class: "action" }, action.type === 'link' && (h("a", { class: "action-link", href: action === null || action === void 0 ? void 0 : action.url }, action.label, h("span", { class: "link-chevron" }, "\u2192"))), action.type === 'button' &&
|
|
69
|
+
h("xv-button-v2", { onClick: () => this.navActionClick(action), block: true, variant: "tertiary" }, action.label)))))), (group === null || group === void 0 ? void 0 : group.card) && (h("div", { class: "group-card" }, h("xv-card-v2", { media: this.applicationContext !== 'Komsa' ? group.card.image : undefined, variant: this.isMobile ? 'horizontal' : 'vertical' }, h("h5", { slot: "header", class: "group-card-title" }, group.card.title), h("p", { slot: "body", class: "group-card-desc" }, group.card.description), group.card.linkLabel && (h("a", { slot: "footer", class: "action-link", href: group.card.linkUrl || '#' }, group.card.linkLabel, h("span", { class: "link-chevron" }, "\u2192"))))))))));
|
|
71
70
|
}))))));
|
|
72
|
-
}), h("li", { key: '
|
|
71
|
+
}), h("li", { key: '2ef9d0ceb2ce7f8cbe3d1cd0b067817eb38971a0', class: "menu--right" }, h("slot", { key: 'cacfd1179deefcec4b8483f2da4e74d07fa9955e', name: "menu-right" })), this.open && (h("li", { key: 'dcdd0f0cb42e8b283c799af00856843e64bfb1b4', class: "menu--backdrop", onClick: () => this.handleClose() }))))));
|
|
73
72
|
}
|
|
74
73
|
static get is() { return "xv-mega-menu"; }
|
|
75
|
-
static get encapsulation() { return "
|
|
74
|
+
static get encapsulation() { return "scoped"; }
|
|
76
75
|
static get originalStyleUrls() {
|
|
77
76
|
return {
|
|
78
77
|
"$": ["xv-mega-menu.scss"]
|
|
@@ -57,6 +57,32 @@
|
|
|
57
57
|
display: inline-block;
|
|
58
58
|
margin-inline-start: var(--spacing-01);
|
|
59
59
|
}
|
|
60
|
+
.xv-menu .action-link {
|
|
61
|
+
display: block;
|
|
62
|
+
color: var(--link-primary);
|
|
63
|
+
text-decoration: none;
|
|
64
|
+
transition: color 200ms ease-in-out;
|
|
65
|
+
}
|
|
66
|
+
.xv-menu .action-link:visited {
|
|
67
|
+
color: var(--link-primary);
|
|
68
|
+
}
|
|
69
|
+
.xv-menu .action-link:hover, .xv-menu .action-link:focus, .xv-menu .action-link:active {
|
|
70
|
+
text-decoration-line: underline;
|
|
71
|
+
text-decoration-style: solid;
|
|
72
|
+
text-decoration-skip-ink: none;
|
|
73
|
+
text-decoration-thickness: auto;
|
|
74
|
+
text-underline-offset: auto;
|
|
75
|
+
text-underline-position: from-font;
|
|
76
|
+
text-decoration-color: var(--link-primary);
|
|
77
|
+
}
|
|
78
|
+
.xv-menu .action-link:hover {
|
|
79
|
+
color: var(--link-primary-hover);
|
|
80
|
+
cursor: pointer;
|
|
81
|
+
}
|
|
82
|
+
.xv-menu .action-link:focus {
|
|
83
|
+
outline: 1px solid var(--focus);
|
|
84
|
+
outline-offset: 1px;
|
|
85
|
+
}
|
|
60
86
|
.xv-menu .menu {
|
|
61
87
|
overflow-x: auto;
|
|
62
88
|
display: flex;
|
|
@@ -111,9 +137,11 @@
|
|
|
111
137
|
}
|
|
112
138
|
}
|
|
113
139
|
.xv-menu .menu-item-label {
|
|
140
|
+
display: block;
|
|
114
141
|
margin: 0;
|
|
115
142
|
padding-block: var(--spacing-05, 16px);
|
|
116
143
|
color: inherit;
|
|
144
|
+
text-decoration: none;
|
|
117
145
|
font-size: 16px;
|
|
118
146
|
line-height: 24px;
|
|
119
147
|
font-family: var(--ff-body), sans-serif;
|
|
@@ -371,11 +399,23 @@
|
|
|
371
399
|
position: relative;
|
|
372
400
|
font-size: var(--fz-lg, 16px);
|
|
373
401
|
}
|
|
374
|
-
.xv-menu .menu .route .
|
|
402
|
+
.xv-menu .menu .route .route-link {
|
|
403
|
+
color: inherit;
|
|
404
|
+
text-decoration: none;
|
|
375
405
|
font-family: var(--ff-work-sans), sans-serif;
|
|
406
|
+
line-height: 133.333%;
|
|
407
|
+
transition: color 200ms ease-in-out;
|
|
408
|
+
}
|
|
409
|
+
.xv-menu .menu .route .route-link:visited {
|
|
410
|
+
color: inherit;
|
|
376
411
|
}
|
|
377
|
-
.xv-menu .menu .route .
|
|
412
|
+
.xv-menu .menu .route .route-link:hover {
|
|
378
413
|
color: var(--link-primary);
|
|
414
|
+
cursor: pointer;
|
|
415
|
+
}
|
|
416
|
+
.xv-menu .menu .route .route-link:focus {
|
|
417
|
+
outline: 1px solid var(--focus);
|
|
418
|
+
outline-offset: 1px;
|
|
379
419
|
}
|
|
380
420
|
@media (max-width: 991px) {
|
|
381
421
|
.xv-menu .menu .route {
|
|
@@ -10,6 +10,20 @@ import { api } from "../../utils/utils";
|
|
|
10
10
|
*
|
|
11
11
|
* If `menu-data` is not provided, it falls back to the original
|
|
12
12
|
* `/api-fd/v1/home/menu` fetch so it remains a drop-in replacement.
|
|
13
|
+
*
|
|
14
|
+
* **Crawlability** — same treatment `xv-mega-menu` received in MAR-15972,
|
|
15
|
+
* ported here because the `-next` variant had been left behind:
|
|
16
|
+
* - `scoped` instead of `shadow`, so the nav lives in the light DOM;
|
|
17
|
+
* - plain `<a>` instead of `xv-link-v2` inside the menu, because that
|
|
18
|
+
* component puts the anchor in its own shadow root while the label stays
|
|
19
|
+
* slotted one boundary up — every `<a>` ended up with empty textContent.
|
|
20
|
+
* The shared component is untouched; its other usages are unaffected.
|
|
21
|
+
* - the ghost/standalone styles live in this stylesheet as `.route-link`
|
|
22
|
+
* and `.action-link`.
|
|
23
|
+
*
|
|
24
|
+
* Note this makes the menu readable to crawlers that execute JavaScript. It
|
|
25
|
+
* does not put anything in the server-rendered HTML — the consumer has to
|
|
26
|
+
* emit a light-DOM fallback for that (xv-content-next does).
|
|
13
27
|
*/
|
|
14
28
|
export class XvMegaMenuNext {
|
|
15
29
|
constructor() {
|
|
@@ -94,20 +108,20 @@ export class XvMegaMenuNext {
|
|
|
94
108
|
void this.fetchMenuData();
|
|
95
109
|
}
|
|
96
110
|
render() {
|
|
97
|
-
return (h(Host, { key: '
|
|
111
|
+
return (h(Host, { key: '2aedf5fcd9dfb34d64b7febf92585088548a68e9' }, h("nav", { key: 'e3e0a1e52a24094470100f1da66a03f02a8b46b7', class: { 'xv-menu': true, open: this.open } }, this.menuLoading && (h("div", { key: '5ae91639ffd7d2ec8f1ec88ac5730b40dca0fcb0', class: { 'xv-menu-loader': true, open: this.open } }, h("xv-loader-v2", { key: 'dc99655021a279ea4fdc09f0989e61404e3c7af3' }))), h("ul", { key: 'c246f2b56c05e4115a3b0d5865468d883823c27a', class: { menu: true, open: this.open } }, this.menuItems.map((menuItem) => {
|
|
98
112
|
var _a, _b;
|
|
99
|
-
return (h("li", { class: { 'menu-item': true, active: menuItem.id === ((_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.id) } }, menuItem.route ? (h("
|
|
113
|
+
return (h("li", { class: { 'menu-item': true, active: menuItem.id === ((_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.id) } }, menuItem.route ? (h("a", { class: "menu-item-label", href: menuItem.route.route }, (_b = menuItem.route) === null || _b === void 0 ? void 0 : _b.label)) : (h(Fragment, null, h("p", { class: "menu-item-label", onClick: () => this.setActiveItem(menuItem) }, menuItem === null || menuItem === void 0 ? void 0 : menuItem.label), h("ul", { class: "menu-item-groups" }, menuItem.groups.map((group) => {
|
|
100
114
|
var _a;
|
|
101
115
|
return (h("li", { class: { group: true, active: ((_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id) === group.id } }, (group.label && menuItem.groups.length > 1) && (h("div", { class: "group-label", onClick: () => this.setActiveGroup(group) }, h("span", { class: "group-label-text" }, group.label), h("span", { class: "group-label-icon" }))), h("div", { class: "group-container" }, h("div", { class: {
|
|
102
116
|
'group-container-absolute': true,
|
|
103
117
|
noLabel: !(group.label && menuItem.groups.length > 1),
|
|
104
|
-
} }, h("div", { class: "group-menus" }, h("ul", { class: { 'group-menus-categories': true, inline: group.layout === 'inline' } }, group.categories.map((category) => (h("li", { class: "category" }, h("p", { class: "category-label" }, category.label), h("ul", { class: "category-routes" }, category.routes.map((route) => (h("li", { class: "route" }, h("
|
|
105
|
-
h("xv-button-v2", { onClick: () => this.navActionClick(action), block: true, variant: "tertiary" }, action.label)))))), (group === null || group === void 0 ? void 0 : group.card) && (h("div", { class: "group-card" }, h("xv-card-v2", { media: this.applicationContext !== 'Komsa' ? group.card.image : undefined, variant: this.isMobile ? 'horizontal' : 'vertical' }, h("h5", { slot: "header", class: "group-card-title" }, group.card.title), h("p", { slot: "body", class: "group-card-desc" }, group.card.description), group.card.linkLabel && (h("
|
|
118
|
+
} }, h("div", { class: "group-menus" }, h("ul", { class: { 'group-menus-categories': true, inline: group.layout === 'inline' } }, group.categories.map((category) => (h("li", { class: "category" }, h("p", { class: "category-label" }, category.label), h("ul", { class: "category-routes" }, category.routes.map((route) => (h("li", { class: "route" }, h("a", { class: "route-link", href: route.route || '#' }, route.label), route.tag && (h("xv-tag-v2", { class: "route-tag", size: "sm", color: "#161616", bg: "#E0E0E0" }, route.tag)))))))))), h("ul", { class: "group-menus-actions" }, group.actions.map((action) => (h("li", { class: "action" }, action.type === 'link' && (h("a", { class: "action-link", href: action === null || action === void 0 ? void 0 : action.url }, action.label, h("span", { class: "link-chevron" }, "\u2192"))), action.type === 'button' &&
|
|
119
|
+
h("xv-button-v2", { onClick: () => this.navActionClick(action), block: true, variant: "tertiary" }, action.label)))))), (group === null || group === void 0 ? void 0 : group.card) && (h("div", { class: "group-card" }, h("xv-card-v2", { media: this.applicationContext !== 'Komsa' ? group.card.image : undefined, variant: this.isMobile ? 'horizontal' : 'vertical' }, h("h5", { slot: "header", class: "group-card-title" }, group.card.title), h("p", { slot: "body", class: "group-card-desc" }, group.card.description), group.card.linkLabel && (h("a", { slot: "footer", class: "action-link", href: group.card.linkUrl || '#' }, group.card.linkLabel, h("span", { class: "link-chevron" }, "\u2192"))))))))));
|
|
106
120
|
}))))));
|
|
107
|
-
}), h("li", { key: '
|
|
121
|
+
}), h("li", { key: 'fc1f177ba14892c4568d445344f69297975e6fa4', class: "menu--right" }, h("slot", { key: '7873fc7f12c0837c3a78a46b6fd63f7123ef2775', name: "menu-right" })), this.open && (h("li", { key: 'dc8ebef4ebd45ca734e5377904846e5cdbd1975f', class: "menu--backdrop", onClick: () => this.handleClose() }))))));
|
|
108
122
|
}
|
|
109
123
|
static get is() { return "xv-mega-menu-next"; }
|
|
110
|
-
static get encapsulation() { return "
|
|
124
|
+
static get encapsulation() { return "scoped"; }
|
|
111
125
|
static get originalStyleUrls() {
|
|
112
126
|
return {
|
|
113
127
|
"$": ["xv-mega-menu-next.scss"]
|
|
@@ -58,7 +58,7 @@ export class XvModal {
|
|
|
58
58
|
}
|
|
59
59
|
render() {
|
|
60
60
|
var _a;
|
|
61
|
-
return (h(Host, { key: '
|
|
61
|
+
return (h(Host, { key: 'c2345852e80d3e007c5d08387da748fa8aa5bb27', role: "dialog", size: this.size, id: this.el.id }, h("slot", { key: 'ed73d734554d5264839de0efbdaadc5eaba4a61d', name: "trigger", onSlotchange: this.setupTrigger }), h("div", { key: '9daa3155bb7c386a3914d07530dc2c0c5a0125a1', class: { backdrop: true }, onClick: this.onBackdropClick }, h("div", { key: '03c95cc4b18e7c935b2139936d434909e542d9f3', class: "modal" }, h("button", { key: '5ec7629072adfcd3a3b78bb783b4dbc5b3466d43', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), h("div", { key: '418f7ced52960a2f1075ed53b93458f7ac2f1740', class: "modal_header" }, h("slot", { key: '85558e2696a4cca779cff13e83d5f87b9d04b125', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && h("h5", { key: '604d8f32a2e5bc6e8aad0489c59ee7c82cda0e46', class: "modal_header__title" }, this.el.title))), h("div", { key: '7fde461b4ca0232c2254eda1f0f2550d18c9427d', class: { 'modal_content': true, overflow: this.overflow } }, h("slot", { key: '7a2d54e2d29a7b902e8f22a9cf492fb2058fc6bc' })), h("div", { key: '6f659c4d9bf5bdf80deaacd36af411df157695be', class: "modal_footer" }, h("slot", { key: '8db1f6b6d86ebcb4c948a4223eaa01f84a0322ae', name: "footer" })), !!this.loading && (h("div", { key: '04c3419d37f1bbe6aa5a962314915963fbda24cb', class: "loading" }, h("xv-loader-v2", { key: '98587d240f0f607ab510ff4463a37456d25772f6', size: SIZE_VAR.LG })))))));
|
|
62
62
|
}
|
|
63
63
|
disconnectedCallback() {
|
|
64
64
|
this.removeTriggerListener();
|
|
@@ -25,7 +25,7 @@ export class XvNotification {
|
|
|
25
25
|
};
|
|
26
26
|
}
|
|
27
27
|
render() {
|
|
28
|
-
return (h(Host, { key: '
|
|
28
|
+
return (h(Host, { key: 'a136db8b13a4cb61eb34f018c372bf59223b0692', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), h("div", { key: '554396e525dd08a7c18dd11e39039a64fe546ea1', class: "content" }, h("div", { key: '3adedb9ef85125786abdace0d2f75f8581131dcf', class: "content_wrapper" }, this.el.title && h("h5", { key: 'c56aaa863501b563ba34886c9bd08070a7f26ad4', class: "content_title" }, this.el.title), h("slot", { key: 'b4aa2f4387db6cf9a01d2a208924de791c7164b4' })), h("slot", { key: '742e43bd5a62937ce3278f7cf75a3e50c27071ba', name: "footer" })), this.dismissible && h("button", { key: '0aa0638484c0748ededebaa2ce5dd572c49bdd3f', class: "close", onClick: this.closeHandle })));
|
|
29
29
|
}
|
|
30
30
|
static get is() { return "xv-notification-v2"; }
|
|
31
31
|
static get encapsulation() { return "shadow"; }
|
|
@@ -34,12 +34,12 @@ export class XvNumberInput {
|
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
36
|
const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
|
|
37
|
-
return (h(Host, { key: '
|
|
37
|
+
return (h(Host, { key: '4158036ad4d09156993f81a014f7a106b96d5b3d', class: { disabled: !!this.disabled } }, h("label", { key: 'c43f9296dbe2ce2fd294e381aad8c2752b624ded', class: "control" }, this.label && h("span", { key: 'c823d944b256ebb6fe146daf9ba16c8e09f37adb', class: "control_label" }, this.label), h("div", { key: 'f152140a2ef785b1ad2007e538dfeb0c2797b694', class: {
|
|
38
38
|
'control_input': true,
|
|
39
39
|
readonly: !!this.readonly,
|
|
40
40
|
error: !!this.error,
|
|
41
41
|
warning: !!this.warning
|
|
42
|
-
} }, h("input", { key: '
|
|
42
|
+
} }, h("input", { key: '488b8e30d249716a4915a2f6bf948dd99370c329', type: "number", placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, min: this.min, max: this.max, step: this.step, value: this.value }), h("div", { key: '8946e76a1caf59961f9a599cd394a4a2c07183aa', class: "control_input__icons" }, this.loading ? (h("xv-loader-v2", { size: SIZE_VAR.XS })) : !!this.error ? (h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null, h("xv-button-v2", { key: 'b8c224f611eb125db8c2e46c57c7f426681819af', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.decrement, "aria-label": "Decrease" }, h("span", { key: '2bf05e5441044d3b893a156082d91136918f6aac', slot: "icon-left", class: "status-icon" }, "\u2212")), h("hr", { key: '38dd267ef455e79759dd57d928ded23ab0f19a39' }), h("xv-button-v2", { key: '5c4ca8cbf2c665614cdb5c3e65f081305ce5eb52', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.increment, "aria-label": "Increase" }, h("span", { key: 'e009c33be7ce48fc99e8f24a20088029ea057f60', slot: "icon-left", class: "status-icon" }, "+"))))), message && (h("p", { key: 'c9b8fc75261e59c649d0c6eef702e98c17e5f772', class: { message: true, [message.level]: true } }, message.text))));
|
|
43
43
|
}
|
|
44
44
|
static get is() { return "xv-number-input-v2"; }
|
|
45
45
|
static get encapsulation() { return "shadow"; }
|
|
@@ -106,7 +106,7 @@ export class XvPagination {
|
|
|
106
106
|
this.observer.disconnect();
|
|
107
107
|
}
|
|
108
108
|
render() {
|
|
109
|
-
return (h(Host, { key: '
|
|
109
|
+
return (h(Host, { key: '62f48874a343c0d2e54a98f065d790bd0befa5fc', class: { block: this.block, [this.currentVariant]: true, [this.size]: !!this.size } }, this.currentVariant === 'full' && (h("div", { key: '50a169a0d6e3197f8a354aa48444a76e992559ae', class: "block" }, h("select", { key: 'fb45e9ab6c97324923c532c77e475a6e963a4301', class: "options-select", name: "options", onChange: this.handleItemsPerPageChange }, this.pageSizeOptions.map((v) => h("option", { selected: v === this.itemsPerPage, value: v }, v))))), this.currentVariant === 'full' && (h("span", { key: '79de705d539c1715827d2be6b07f3edbc92762c1', class: "block block_full" }, `${(this.page - 1) * this.itemsPerPage + 1} – ${Math.min(this.page * this.itemsPerPage, this.totalItems)} von ${this.totalItems} Einträgen`)), this.currentVariant === 'full' && (h("div", { key: '5142ba68f6ef99587fb74963ca3451fedb1464a7', class: "block" }, h("select", { key: '4f30fc7dc6a951d184c502c1a5b3c4629a879fe5', class: "options-select", name: "pages", onChange: this.handlePageSelectChange }, Array.from({ length: this.total }, (_, i) => (h("option", { selected: this.page === i + 1, value: i + 1 }, i + 1)))), h("span", { key: '1e7328f4c974a2a6559a06db4e9ee62120ed1f5c' }, "von ", this.total, " Seiten"))), this.currentVariant === 'compact' && h("span", { key: '39055a38b6b8a289bb841ba8a7a65aa1b7f596c1', class: "block" }, "Seite ", this.page), h("xv-button-v2", { key: '047b3dfb9a90f5bcd797a81fcae28c4e898363b8', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page - 1), disabled: this.page <= 1 }, h("span", { key: '1eb837092946fcf23a3360d1f939218022a5aca7', slot: "icon-left", class: "icon icon_prev" })), this.currentVariant === 'regular' && (h("ul", { key: 'cdac9b7430d7f970a81cfee82b04684dabbfe66e', class: "list" }, this.visiblePagesWithDots.map((page) => (h("li", { class: { active: this.page === page } }, page === 'dots-start' ? (h("div", { class: "list_dots" }, h("xv-button-v2", { variant: "ghost", size: this.size, tabindex: -1 }, h("span", { slot: "icon-left", class: "list_dots__icon" }, "...")), h("select", { name: "start", onChange: this.handlePageSelectChange }, Array.from({ length: this.page - 3 }, (_, i) => (h("option", { value: i + 2 }, i + 2)))))) : page === 'dots-end' ? (h("div", { class: "list_dots" }, h("xv-button-v2", { variant: "ghost", size: this.size, tabindex: -1 }, h("span", { slot: "icon-left", class: "list_dots__icon" }, "...")), h("select", { name: "end", onChange: this.handlePageSelectChange }, Array.from({ length: this.total - (this.page + 2) }, (_, i) => (h("option", { value: i + this.page + 2 }, i + this.page + 2)))))) : (h("xv-button-v2", { variant: "ghost", size: this.size, disabled: this.page === page, onClick: () => this.handlePageChange(page) }, h("span", { class: "list_page", slot: "icon-left" }, page)))))))), h("xv-button-v2", { key: '7d14046abd3d7130503fe7c540547e04cc84a321', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page + 1), disabled: this.page >= this.total }, h("span", { key: '7e3c7aa9f558a3a65cb406e728c870a3828a314b', slot: "icon-left", class: "icon icon_next" }))));
|
|
110
110
|
}
|
|
111
111
|
static get is() { return "xv-pagination"; }
|
|
112
112
|
static get encapsulation() { return "shadow"; }
|
|
@@ -5,7 +5,7 @@ export class XvProgressIndicatorItem {
|
|
|
5
5
|
this.status = PROGRESS_ITEM_STATUS.NO_STARTED;
|
|
6
6
|
}
|
|
7
7
|
render() {
|
|
8
|
-
return (h(Host, { key: '
|
|
8
|
+
return (h(Host, { key: '09c49f4d6d94d8415c700314e730a3b843f4ece6', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: 'f8ddef218d18184e696a283430213dcb826e9075', class: "line" }), h("span", { key: '1bc33bb41d665b844d49ea4b14e869339aa4b2f8', class: "icon" }, h("svg", { key: '537972c72d05d0fd471f50053f0dedbfed3ccca5', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: 'ca3f068e0b0ec9cd7419c6635714d19003296b83', fill: "currentColor", d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }))), h("p", { key: '90bee95bb8fd7052fc76082dc4f0c0cd6cc92fa6', class: "label" }, h("slot", { key: '4bca5f1c8b5f1805ab97bf4746627feb1342ea84' }))));
|
|
9
9
|
}
|
|
10
10
|
static get is() { return "xv-progress-indicator-v2-item"; }
|
|
11
11
|
static get encapsulation() { return "shadow"; }
|
|
@@ -55,7 +55,7 @@ export class XvProgressIndicator {
|
|
|
55
55
|
this.updateChildItems();
|
|
56
56
|
}
|
|
57
57
|
render() {
|
|
58
|
-
return (h(Host, { key: '
|
|
58
|
+
return (h(Host, { key: 'f3898c3326bcc8dfba042f0ba4251394cb59c8cb', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: 'e4c5aa4ff362504bc14e12510a1628df5605bc86' })));
|
|
59
59
|
}
|
|
60
60
|
static get is() { return "xv-progress-indicator-v2"; }
|
|
61
61
|
static get encapsulation() { return "shadow"; }
|
|
@@ -25,12 +25,12 @@ export class XvRadio {
|
|
|
25
25
|
}
|
|
26
26
|
render() {
|
|
27
27
|
const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
|
|
28
|
-
return (h("div", { key: '
|
|
28
|
+
return (h("div", { key: 'a5bd54d7cec7cb40be24919c3b41c5ed92a99cf2', class: {
|
|
29
29
|
'xv-radio': true,
|
|
30
30
|
'xv-radio--reverse': this.reverse,
|
|
31
31
|
'xv-radio--block': this.block,
|
|
32
32
|
[`xv-radio--size-${this.size}`]: !!this.size,
|
|
33
|
-
} }, this.label && h("p", { key: '
|
|
33
|
+
} }, this.label && h("p", { key: '5590c84e6d3ec6df39ef4050fc703b0c4afc2468', class: "xv-radio_label" }, this.label), h("label", { key: '91a3663372287976c6e30ab8f8ee71d7bd094560', class: { 'xv-radio_container': true, disabled: this.disabled } }, h("div", { key: 'a4b1696f69cb477fde3377b67302002c6a88c7a2', class: { 'xv-radio_input': true, 'xv-radio_input--error': !!this.error || this.error === '' } }, h("input", { key: 'da12f38002c730353f84957a37f077051b4b5280', ref: el => (this.inputEl = el), type: "radio", name: this.name, value: this.value, checked: this.checked, readonly: this.readonly, disabled: this.disabled }), h("span", { key: 'de61b86f9b8eee2f9e7b6974578c90a7a26bf494', class: "xv-radio_input__mark" })), h("span", { key: '5b94a373356bcadec10fbf8a5c6da6a84bbb9a2b', class: "xv-radio_container__label" }, h("slot", { key: '86fdf6d2b379e8b3c4ea289de62397b09076dfbb' }))), message && (h("span", { key: '1fb0b5218e5e26dc4c27a31563f52e8c99d775b1', class: `xv-radio_msg xv-radio_msg--${message.level}` }, message.level !== 'helper' && (h("span", { key: '10b552df31bf71845b4d1e4d6eee3b2f62e39326', class: "xv-radio_msg__status", "aria-hidden": "true" }, message.level === 'error' ? '!' : '⚠')), message.text)), h("slot", { key: '61ce97bc85b2729fdd1518d3986067d2a237a87d', name: "info" })));
|
|
34
34
|
}
|
|
35
35
|
connectedCallback() {
|
|
36
36
|
var _a;
|
|
@@ -38,7 +38,7 @@ export class XvSlider {
|
|
|
38
38
|
this.setValue(this.min);
|
|
39
39
|
}
|
|
40
40
|
render() {
|
|
41
|
-
return (h(Host, { key: '
|
|
41
|
+
return (h(Host, { key: '11c40a6165eccfcf4a3295f00be682b3d33bf905', class: { disabled: this.disabled, readonly: this.readonly } }, this.label && h("label", { key: 'a6f77efc3bfc9374ba1404148bde3aab4e3cfdd2', class: "label" }, this.label), h("div", { key: '797c04cc1621f50df5020a8638abc204e9596bce', class: "control" }, h("span", { key: 'd12ce0d36697ec78d6566361e574d8a3614b5c3b', class: "control_label" }, this.min), h("input", { key: '7f4538a9197e59000577ecb55c2d1f1e4a9f414c', type: "range", disabled: this.disabled || this.readonly, readonly: this.readonly, name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, style: { backgroundSize: `${((this.value - this.min) * 100) / (this.max - this.min)}% 100%` } }), h("span", { key: '34ef16e2ba029e39670a75b35031e85ef4cc4354', class: "control_label" }, this.max), !this.notEditable && (h("input", { key: '05a71cc922583e905525b26b16273ad622992dd5', 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 })))));
|
|
42
42
|
}
|
|
43
43
|
static get is() { return "xv-slider-v2"; }
|
|
44
44
|
static get encapsulation() { return "shadow"; }
|
|
@@ -22,7 +22,7 @@ export class XvTableCell {
|
|
|
22
22
|
}
|
|
23
23
|
;
|
|
24
24
|
render() {
|
|
25
|
-
return (h(Host, { key: '
|
|
25
|
+
return (h(Host, { key: 'b7f43a556871a2dfaa2f5dec382236127933e856' }, h("slot", { key: '54815afbe48e46cf7b1d15857bf4865c88f80551' })));
|
|
26
26
|
}
|
|
27
27
|
static get is() { return "xv-table-v2-cell"; }
|
|
28
28
|
static get encapsulation() { return "shadow"; }
|
|
@@ -10,7 +10,7 @@ export class XvTableExpand {
|
|
|
10
10
|
};
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: 'fdf6ddc9bf569737845c6f00ebcb8500c13d5272' }, h("button", { key: '588198eb49ea8a35ac10f49077ae489a08aa512e', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: 'fdf3b5510076b7ca6372d04aaa02e8191b5c873f', name: XV_EXPANDABLE_KEY }), h("div", { key: 'f2ca9eb9e1aa52d3293b3e3997d74e96cd2dc635', class: { expandableContent: true, open: this.open } }, h("slot", { key: 'dce32e0de0c521c4e3f41fdac530758af7fd59c9' }))));
|
|
14
14
|
}
|
|
15
15
|
componentDidLoad() {
|
|
16
16
|
setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
|
|
@@ -42,7 +42,7 @@ export class XvTableRow {
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
render() {
|
|
45
|
-
return (h(Host, { key: '
|
|
45
|
+
return (h(Host, { key: 'abe9f4fbf5e7e04f40288d3ddabe8840387251ec' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: '32ce50adaf418a9d1624cac7a3768e9e79b0d7cd', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: '46c6bbd9e143caa518e7db5e85c5a5c1a40e3eba', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (h("input", { key: '1dba951c50149fda86f551a8d8670110bb3c4dbb', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: '8e1078ed147ecd3f4de46d2ffae6dd95a8d91e61' })));
|
|
46
46
|
}
|
|
47
47
|
componentWillLoad() {
|
|
48
48
|
this.setInitialAttrs();
|