xv-webcomponents 1.16.4 → 1.16.6-qa.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 +3021 -255
- 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/components/xv-data-table/_vars.js +1 -0
- package/dist/collection/components/xv-data-table/xv-data-table-row/xv-data-table-row.css +42 -0
- package/dist/collection/components/xv-data-table/xv-data-table-row/xv-data-table-row.js +23 -10
- package/dist/collection/components/xv-data-table/xv-data-table.js +170 -1
- package/dist/collection/components/xv-datepicker/xv-datepicker.js +6 -4
- package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js +1 -1
- package/dist/collection/components/xv-dropdown/xv-dropdown.js +1 -1
- package/dist/collection/components/xv-file-uploader/xv-file-uploader.js +1 -1
- package/dist/collection/components/xv-footer/xv-footer.js +1 -1
- package/dist/collection/components/xv-header/xv-header.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.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.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/loader.js +1 -1
- package/dist/esm/xv-accordion-v2_45.entry.js +2823 -57
- 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-data-table/_vars.d.ts +5 -0
- package/dist/types/components/xv-data-table/xv-data-table-row/xv-data-table-row.d.ts +2 -0
- package/dist/types/components/xv-data-table/xv-data-table.d.ts +17 -0
- package/dist/types/components.d.ts +34 -2
- package/dist/xv-webcomponents/{p-c87b62cb.entry.js → p-1b5a4f4c.entry.js} +1 -1
- package/dist/xv-webcomponents/{p-877bab0c.entry.js → p-50f8cd72.entry.js} +1 -1
- package/dist/xv-webcomponents/p-c43cd74e.entry.js +8 -0
- package/dist/xv-webcomponents/xv-webcomponents.esm.js +1 -1
- package/package.json +4 -2
- package/dist/xv-webcomponents/p-d8f4b7d3.entry.js +0 -1
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-C4fJ70r4.js');
|
|
4
|
-
var index$
|
|
3
|
+
var index$1 = require('./index-C4fJ70r4.js');
|
|
4
|
+
var index$2 = require('./index-DwneAp1a.js');
|
|
5
5
|
var _vars = require('./_vars-A07oKwJ_.js');
|
|
6
6
|
|
|
7
7
|
const xvAccordionCss = () => `.xv-container{width:100%;max-width:1170px;margin-inline:auto}@media (min-width: 576px){.xv-container{max-width:540px}}@media (min-width: 768px){.xv-container{max-width:720px}}@media (min-width: 992px){.xv-container{max-width:960px;padding-inline:var(--bs-gutter-x, 0.75rem)}}@media (min-width: 1200px){.xv-container{max-width:1140px}}@media (min-width: 1400px){.xv-container{max-width:1320px}}.xv-tooltip[role=tooltip]{position:absolute;background-color:var(--background-inverse, #333333);color:var(--text-on-color);padding:var(--spacing-03) var(--spacing-04);border-radius:3px;font-size:var(--fz-sm);z-index:999;min-width:min(150px, 90vw);max-width:min(400px, 90vw)}.xv-tooltip[role=tooltip]::after{content:"";position:absolute;width:0;height:0;border-style:solid}.xv-tooltip[role=tooltip][data-popper-placement=top]::after{bottom:-5px;left:50%;transform:translateX(-50%);border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after{bottom:-5px;left:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after{bottom:-5px;right:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after{top:-5px;left:50%;transform:translateX(-50%);border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after{top:-5px;left:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after{top:-5px;right:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=left]::after{top:50%;right:-5px;transform:translateY(-50%);border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after{top:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after{bottom:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=right]::after{top:50%;left:-5px;transform:translateY(-50%);border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after{top:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after{bottom:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}:host{display:block}`;
|
|
8
8
|
|
|
9
9
|
const XvAccordion = class {
|
|
10
10
|
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.accordionChange = index.createEvent(this, "accordionChange", 7);
|
|
11
|
+
index$1.registerInstance(this, hostRef);
|
|
12
|
+
this.accordionChange = index$1.createEvent(this, "accordionChange", 7);
|
|
13
13
|
this.multiple = false;
|
|
14
|
-
this.xvId = index$
|
|
14
|
+
this.xvId = index$2.uidGenerator();
|
|
15
15
|
this.opened = new Set();
|
|
16
16
|
}
|
|
17
17
|
async toggleItem(value) {
|
|
@@ -33,7 +33,7 @@ const XvAccordion = class {
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
|
-
return (index.h(index.Host, { key: '66ebac5125b765878f7e21225f60f254bde5e07f', class: "xv-accordion", "data-id": this.xvId }, index.h("slot", { key: 'b5081e54395f14436a7f066fee6e75a48c9b797f' })));
|
|
36
|
+
return (index$1.h(index$1.Host, { key: '66ebac5125b765878f7e21225f60f254bde5e07f', class: "xv-accordion", "data-id": this.xvId }, index$1.h("slot", { key: 'b5081e54395f14436a7f066fee6e75a48c9b797f' })));
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
39
|
XvAccordion.style = xvAccordionCss();
|
|
@@ -42,8 +42,8 @@ const xvAccordionItemCss = () => `.xv-container{width:100%;max-width:1170px;marg
|
|
|
42
42
|
|
|
43
43
|
const XvAccordionItem = class {
|
|
44
44
|
constructor(hostRef) {
|
|
45
|
-
index.registerInstance(this, hostRef);
|
|
46
|
-
this.itemToggle = index.createEvent(this, "itemToggle", 7);
|
|
45
|
+
index$1.registerInstance(this, hostRef);
|
|
46
|
+
this.itemToggle = index$1.createEvent(this, "itemToggle", 7);
|
|
47
47
|
this.disabled = false;
|
|
48
48
|
this.isOpen = false;
|
|
49
49
|
this.toggle = () => {
|
|
@@ -62,9 +62,9 @@ const XvAccordionItem = class {
|
|
|
62
62
|
this.isOpen = event.detail.opened.has(this.value);
|
|
63
63
|
}
|
|
64
64
|
render() {
|
|
65
|
-
return (index.h(index.Host, { key: '5fe033e9c84847bd4267f02842840436593bb858', class: `${this.disabled ? 'disabled' : ''}` }, index.h("label", { key: 'c15ccbfa2cc9633dc891487db671697ecd7a1bbf', class: `label ${this.isOpen ? 'opened' : 'closed'}`, onClick: this.toggle }, index.h("span", { key: 'e5d5f4306863162fa04eb447320288e0477940b8' }, this.label)), index.h("div", { key: '5f9e1856586d82077cad8316a8efd31f3e7ac2e1', class: `content ${this.isOpen ? 'opened' : 'closed'}` }, index.h("slot", { key: 'dcf66848d24dd32d2e879fd0dea43fb102133277' }))));
|
|
65
|
+
return (index$1.h(index$1.Host, { key: '5fe033e9c84847bd4267f02842840436593bb858', class: `${this.disabled ? 'disabled' : ''}` }, index$1.h("label", { key: 'c15ccbfa2cc9633dc891487db671697ecd7a1bbf', class: `label ${this.isOpen ? 'opened' : 'closed'}`, onClick: this.toggle }, index$1.h("span", { key: 'e5d5f4306863162fa04eb447320288e0477940b8' }, this.label)), index$1.h("div", { key: '5f9e1856586d82077cad8316a8efd31f3e7ac2e1', class: `content ${this.isOpen ? 'opened' : 'closed'}` }, index$1.h("slot", { key: 'dcf66848d24dd32d2e879fd0dea43fb102133277' }))));
|
|
66
66
|
}
|
|
67
|
-
get el() { return index.getElement(this); }
|
|
67
|
+
get el() { return index$1.getElement(this); }
|
|
68
68
|
};
|
|
69
69
|
XvAccordionItem.style = xvAccordionItemCss();
|
|
70
70
|
|
|
@@ -72,10 +72,10 @@ const xvBreadcrumbsCss = () => `.xv-container{width:100%;max-width:1170px;margin
|
|
|
72
72
|
|
|
73
73
|
const XvBreadcrumbs = class {
|
|
74
74
|
constructor(hostRef) {
|
|
75
|
-
index.registerInstance(this, hostRef);
|
|
75
|
+
index$1.registerInstance(this, hostRef);
|
|
76
76
|
}
|
|
77
77
|
render() {
|
|
78
|
-
return (index.h("div", { key: 'acc7010fa89c56d0b614227aac9e233d1b114439', class: "xv-breadcrumbs" }, index.h("div", { key: 'e0b80660e0a22f8ce0005de787fcefa1e98df60b', class: "xv-breadcrumbs__container" }, index.h("slot", { key: 'e2a6d981bc4e72bd967491f1e49773c2cf5123c4' }))));
|
|
78
|
+
return (index$1.h("div", { key: 'acc7010fa89c56d0b614227aac9e233d1b114439', class: "xv-breadcrumbs" }, index$1.h("div", { key: 'e0b80660e0a22f8ce0005de787fcefa1e98df60b', class: "xv-breadcrumbs__container" }, index$1.h("slot", { key: 'e2a6d981bc4e72bd967491f1e49773c2cf5123c4' }))));
|
|
79
79
|
}
|
|
80
80
|
};
|
|
81
81
|
XvBreadcrumbs.style = xvBreadcrumbsCss();
|
|
@@ -84,7 +84,7 @@ const xvButtonV2Css = () => `.xv-container{width:100%;max-width:1170px;margin-in
|
|
|
84
84
|
|
|
85
85
|
const XvButton = class {
|
|
86
86
|
constructor(hostRef) {
|
|
87
|
-
index.registerInstance(this, hostRef);
|
|
87
|
+
index$1.registerInstance(this, hostRef);
|
|
88
88
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
89
89
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
90
90
|
}
|
|
@@ -132,7 +132,7 @@ const XvButton = class {
|
|
|
132
132
|
}
|
|
133
133
|
render() {
|
|
134
134
|
var _a, _b;
|
|
135
|
-
return (index.h(index.Host, { key: 'ca4d2a911587ac7e4621f320166a683cf198d0f0' }, index.h("button", { key: '946469fc5e2c5f4e57c576929313afd07279328b', class: {
|
|
135
|
+
return (index$1.h(index$1.Host, { key: 'ca4d2a911587ac7e4621f320166a683cf198d0f0' }, index$1.h("button", { key: '946469fc5e2c5f4e57c576929313afd07279328b', class: {
|
|
136
136
|
'xv-button': true,
|
|
137
137
|
[`xv-button--${this.variant}`]: !!this.variant,
|
|
138
138
|
[`xv-button--${this.size}`]: !!this.size,
|
|
@@ -142,10 +142,10 @@ const XvButton = class {
|
|
|
142
142
|
'xv-button--icon-left': this.hasLeftIcon,
|
|
143
143
|
'xv-button--icon-right': this.hasRightIcon,
|
|
144
144
|
'xv-button--icon-only': !this.hasContent,
|
|
145
|
-
}, part: "button", title: (_a = this.el) === null || _a === void 0 ? void 0 : _a.title, value: this.value, name: this.name, onClick: this.handleClick, type: this.type, disabled: this.disabled || this.loading, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": ((_b = this.el) === null || _b === void 0 ? void 0 : _b.ariaLabel) || 'XV button' }, this.loading && (index.h("xv-loader-v2", { key: 'ec4203d7ae6516d9e7af2a614bd80aec2f3955b8', class: "xv-button__loader", size: this.size !== _vars.SIZE_VAR.XL ? this.size : _vars.SIZE_VAR.LG })), index.h("span", { key: '0c1946bc8e8c6dd997a32743e99da5aace7a3572', class: "xv-button__icon xv-button__icon--left" }, index.h("slot", { key: '7d24426efbeca547b132eddd3fc9c33bb7df54d1', name: "icon-left", onSlotchange: this.handleSlotChangeLeft })), index.h("span", { key: '23703a344cb6389bf6d4254a8f21f7f48f451233', class: "xv-button__label" }, index.h("slot", { key: 'a66aa8f71aae84809297ed5e95197d1ec8ac14d5', onSlotchange: this.handleSlotChangeContent }, this.label)), index.h("span", { key: '0ec4ab0519b7c0b20d8b5445f14cb0a312dbd79e', class: "xv-button__icon xv-button__icon--right" }, index.h("slot", { key: '42b90f9820fbbdaa36e19ffea8296debf810f62e', name: "icon-right", onSlotchange: this.handleSlotChangeRight })))));
|
|
145
|
+
}, part: "button", title: (_a = this.el) === null || _a === void 0 ? void 0 : _a.title, value: this.value, name: this.name, onClick: this.handleClick, type: this.type, disabled: this.disabled || this.loading, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": ((_b = this.el) === null || _b === void 0 ? void 0 : _b.ariaLabel) || 'XV button' }, this.loading && (index$1.h("xv-loader-v2", { key: 'ec4203d7ae6516d9e7af2a614bd80aec2f3955b8', class: "xv-button__loader", size: this.size !== _vars.SIZE_VAR.XL ? this.size : _vars.SIZE_VAR.LG })), index$1.h("span", { key: '0c1946bc8e8c6dd997a32743e99da5aace7a3572', class: "xv-button__icon xv-button__icon--left" }, index$1.h("slot", { key: '7d24426efbeca547b132eddd3fc9c33bb7df54d1', name: "icon-left", onSlotchange: this.handleSlotChangeLeft })), index$1.h("span", { key: '23703a344cb6389bf6d4254a8f21f7f48f451233', class: "xv-button__label" }, index$1.h("slot", { key: 'a66aa8f71aae84809297ed5e95197d1ec8ac14d5', onSlotchange: this.handleSlotChangeContent }, this.label)), index$1.h("span", { key: '0ec4ab0519b7c0b20d8b5445f14cb0a312dbd79e', class: "xv-button__icon xv-button__icon--right" }, index$1.h("slot", { key: '42b90f9820fbbdaa36e19ffea8296debf810f62e', name: "icon-right", onSlotchange: this.handleSlotChangeRight })))));
|
|
146
146
|
}
|
|
147
147
|
static get formAssociated() { return true; }
|
|
148
|
-
get el() { return index.getElement(this); }
|
|
148
|
+
get el() { return index$1.getElement(this); }
|
|
149
149
|
};
|
|
150
150
|
XvButton.style = xvButtonV2Css();
|
|
151
151
|
|
|
@@ -153,11 +153,11 @@ const xvCardCss = () => `.xv-container{width:100%;max-width:1170px;margin-inline
|
|
|
153
153
|
|
|
154
154
|
const XvCard = class {
|
|
155
155
|
constructor(hostRef) {
|
|
156
|
-
index.registerInstance(this, hostRef);
|
|
156
|
+
index$1.registerInstance(this, hostRef);
|
|
157
157
|
this.variant = 'vertical';
|
|
158
158
|
}
|
|
159
159
|
render() {
|
|
160
|
-
return (index.h(index.Host, { key: '2a2f625eced9b286ff283fcb494650c08e43b27b', class: `xv-card xv-card_${this.variant}`, part: this.variant }, index.h("div", { key: '0d61ce93f442f374715522632f5b12625a167e74', class: "xv-card_media" }, index.h("slot", { key: 'e7abb198b3546db515003182ca5d55a89c5e9eb3', name: "media" }, this.media && index.h("img", { key: '66dc9d961ad27221aa6efcc01161837c2a51213c', class: "xv-card_media__content", src: this.media, alt: this.header }))), index.h("div", { key: 'd0a40f2ce6d4dca4a1ffa7a2bf42dd782c24d57a', class: "xv-card_content" }, index.h("div", { key: 'edbb0c8b7864369a73c3ed67768427b960c2f6c6', class: "xv-card_header" }, index.h("slot", { key: '7a861b1bc9a9b9e06734845793e58e422b233abc', name: "header" }, this.header && index.h("p", { key: '41835bb042785bcf034da45521b83588be384a4e', class: "xv-card_header__content" }, this.header))), index.h("div", { key: '8594dc3eea41e92835f130688e1b329ce8c77aa8', class: "xv-card_body" }, index.h("slot", { key: '4f8ecc6d2a6a9c6ba7be3da5e850b3e9387ec6e6', name: "body" }, this.body && index.h("p", { key: '739ab750cc9573a20e157d469401054417654aa4', class: "xv-card_body__content" }, this.header))), index.h("div", { key: '5c850897ff22693d39924a910639e59422474c0e', class: "xv-card_footer" }, index.h("slot", { key: 'febbfcd3c5f11e19b3ec7f4d6199dd9f29eeb954', name: "footer" }, this.footer)))));
|
|
160
|
+
return (index$1.h(index$1.Host, { key: '2a2f625eced9b286ff283fcb494650c08e43b27b', class: `xv-card xv-card_${this.variant}`, part: this.variant }, index$1.h("div", { key: '0d61ce93f442f374715522632f5b12625a167e74', class: "xv-card_media" }, index$1.h("slot", { key: 'e7abb198b3546db515003182ca5d55a89c5e9eb3', name: "media" }, this.media && index$1.h("img", { key: '66dc9d961ad27221aa6efcc01161837c2a51213c', class: "xv-card_media__content", src: this.media, alt: this.header }))), index$1.h("div", { key: 'd0a40f2ce6d4dca4a1ffa7a2bf42dd782c24d57a', class: "xv-card_content" }, index$1.h("div", { key: 'edbb0c8b7864369a73c3ed67768427b960c2f6c6', class: "xv-card_header" }, index$1.h("slot", { key: '7a861b1bc9a9b9e06734845793e58e422b233abc', name: "header" }, this.header && index$1.h("p", { key: '41835bb042785bcf034da45521b83588be384a4e', class: "xv-card_header__content" }, this.header))), index$1.h("div", { key: '8594dc3eea41e92835f130688e1b329ce8c77aa8', class: "xv-card_body" }, index$1.h("slot", { key: '4f8ecc6d2a6a9c6ba7be3da5e850b3e9387ec6e6', name: "body" }, this.body && index$1.h("p", { key: '739ab750cc9573a20e157d469401054417654aa4', class: "xv-card_body__content" }, this.header))), index$1.h("div", { key: '5c850897ff22693d39924a910639e59422474c0e', class: "xv-card_footer" }, index$1.h("slot", { key: 'febbfcd3c5f11e19b3ec7f4d6199dd9f29eeb954', name: "footer" }, this.footer)))));
|
|
161
161
|
}
|
|
162
162
|
};
|
|
163
163
|
XvCard.style = xvCardCss();
|
|
@@ -166,11 +166,11 @@ const xvCheckboxCss = () => `.xv-container{width:100%;max-width:1170px;margin-in
|
|
|
166
166
|
|
|
167
167
|
const XvCheckbox = class {
|
|
168
168
|
constructor(hostRef) {
|
|
169
|
-
index.registerInstance(this, hostRef);
|
|
170
|
-
this.changeEvent = index.createEvent(this, "eventChange", 7);
|
|
171
|
-
this.inputEvent = index.createEvent(this, "eventInput", 7);
|
|
172
|
-
this.focusEvent = index.createEvent(this, "eventFocus", 7);
|
|
173
|
-
this.blurEvent = index.createEvent(this, "eventBlur", 7);
|
|
169
|
+
index$1.registerInstance(this, hostRef);
|
|
170
|
+
this.changeEvent = index$1.createEvent(this, "eventChange", 7);
|
|
171
|
+
this.inputEvent = index$1.createEvent(this, "eventInput", 7);
|
|
172
|
+
this.focusEvent = index$1.createEvent(this, "eventFocus", 7);
|
|
173
|
+
this.blurEvent = index$1.createEvent(this, "eventBlur", 7);
|
|
174
174
|
var _a, _b;
|
|
175
175
|
/**
|
|
176
176
|
* Default checked status
|
|
@@ -238,12 +238,12 @@ const XvCheckbox = class {
|
|
|
238
238
|
}
|
|
239
239
|
}
|
|
240
240
|
render() {
|
|
241
|
-
return (index.h(index.Host, { key: 'f250b1ca431ed1c664b9e623175717a21f896920' }, index.h("label", { key: 'f25ca1600972f2d060d587779bdcff5f674d62d3', class: {
|
|
241
|
+
return (index$1.h(index$1.Host, { key: 'f250b1ca431ed1c664b9e623175717a21f896920' }, index$1.h("label", { key: 'f25ca1600972f2d060d587779bdcff5f674d62d3', class: {
|
|
242
242
|
'xv-checkbox': true,
|
|
243
243
|
disabled: this.disabled,
|
|
244
244
|
readonly: this.readonly,
|
|
245
245
|
[`xv-checkbox--align-${this.align}`]: !!this.align,
|
|
246
|
-
} }, index.h("input", { key: 'a98f25fa13e784524f55ef099913a6dd96fd2208', ref: el => (this.inputEl = el), type: "checkbox", readonly: this.readonly, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, indeterminate: this.indeterminate, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("span", { key: 'efd4ac73ab5c780be5387fdce8f55a5492a23a1b', class: `checkmark ${this.partial ? 'checkmark-partial' : ''}` }), index.h("div", { key: '3383ddbae059b58962fc2f41263f717377cebea4', class: "label" }, index.h("slot", { key: '94d514a8da5e20e64e991f26a38d39c78cbcb522' }, this.label && index.h("span", { key: 'da3c51e6be8ee6fc156a2cef9a7615e7da76eb3a', class: "label_str" }, this.label)))), index.h("slot", { key: 'd8dad6b0e5d1755b64b7b81fe8974f04a0f25bca', name: "info" }), !!this.error && index.h("span", { key: 'cafce8d35d8dc2abdf28326481dad5eeb0a740d0', class: "error" }, this.error)));
|
|
246
|
+
} }, index$1.h("input", { key: 'a98f25fa13e784524f55ef099913a6dd96fd2208', ref: el => (this.inputEl = el), type: "checkbox", readonly: this.readonly, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, indeterminate: this.indeterminate, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), index$1.h("span", { key: 'efd4ac73ab5c780be5387fdce8f55a5492a23a1b', class: `checkmark ${this.partial ? 'checkmark-partial' : ''}` }), index$1.h("div", { key: '3383ddbae059b58962fc2f41263f717377cebea4', class: "label" }, index$1.h("slot", { key: '94d514a8da5e20e64e991f26a38d39c78cbcb522' }, this.label && index$1.h("span", { key: 'da3c51e6be8ee6fc156a2cef9a7615e7da76eb3a', class: "label_str" }, this.label)))), index$1.h("slot", { key: 'd8dad6b0e5d1755b64b7b81fe8974f04a0f25bca', name: "info" }), !!this.error && index$1.h("span", { key: 'cafce8d35d8dc2abdf28326481dad5eeb0a740d0', class: "error" }, this.error)));
|
|
247
247
|
}
|
|
248
248
|
componentDidLoad() {
|
|
249
249
|
if (this.indeterminate) {
|
|
@@ -262,7 +262,7 @@ const XvCheckbox = class {
|
|
|
262
262
|
this.checked = state === this.value;
|
|
263
263
|
}
|
|
264
264
|
static get formAssociated() { return true; }
|
|
265
|
-
get el() { return index.getElement(this); }
|
|
265
|
+
get el() { return index$1.getElement(this); }
|
|
266
266
|
static get watchers() { return {
|
|
267
267
|
"checked": [{
|
|
268
268
|
"onCheckedChange": 0
|
|
@@ -271,20 +271,2776 @@ const XvCheckbox = class {
|
|
|
271
271
|
};
|
|
272
272
|
XvCheckbox.style = xvCheckboxCss();
|
|
273
273
|
|
|
274
|
+
/**!
|
|
275
|
+
* Sortable 1.15.7
|
|
276
|
+
* @author RubaXa <trash@rubaxa.org>
|
|
277
|
+
* @author owenm <owen23355@gmail.com>
|
|
278
|
+
* @license MIT
|
|
279
|
+
*/
|
|
280
|
+
function _defineProperty(e, r, t) {
|
|
281
|
+
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
282
|
+
value: t,
|
|
283
|
+
enumerable: true,
|
|
284
|
+
configurable: true,
|
|
285
|
+
writable: true
|
|
286
|
+
}) : e[r] = t, e;
|
|
287
|
+
}
|
|
288
|
+
function _extends() {
|
|
289
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
290
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
291
|
+
var t = arguments[e];
|
|
292
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
293
|
+
}
|
|
294
|
+
return n;
|
|
295
|
+
}, _extends.apply(null, arguments);
|
|
296
|
+
}
|
|
297
|
+
function ownKeys(e, r) {
|
|
298
|
+
var t = Object.keys(e);
|
|
299
|
+
if (Object.getOwnPropertySymbols) {
|
|
300
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
301
|
+
r && (o = o.filter(function (r) {
|
|
302
|
+
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
|
303
|
+
})), t.push.apply(t, o);
|
|
304
|
+
}
|
|
305
|
+
return t;
|
|
306
|
+
}
|
|
307
|
+
function _objectSpread2(e) {
|
|
308
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
309
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
310
|
+
r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
|
|
311
|
+
_defineProperty(e, r, t[r]);
|
|
312
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
|
313
|
+
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
314
|
+
});
|
|
315
|
+
}
|
|
316
|
+
return e;
|
|
317
|
+
}
|
|
318
|
+
function _objectWithoutProperties(e, t) {
|
|
319
|
+
if (null == e) return {};
|
|
320
|
+
var o,
|
|
321
|
+
r,
|
|
322
|
+
i = _objectWithoutPropertiesLoose(e, t);
|
|
323
|
+
if (Object.getOwnPropertySymbols) {
|
|
324
|
+
var n = Object.getOwnPropertySymbols(e);
|
|
325
|
+
for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
|
|
326
|
+
}
|
|
327
|
+
return i;
|
|
328
|
+
}
|
|
329
|
+
function _objectWithoutPropertiesLoose(r, e) {
|
|
330
|
+
if (null == r) return {};
|
|
331
|
+
var t = {};
|
|
332
|
+
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
333
|
+
if (-1 !== e.indexOf(n)) continue;
|
|
334
|
+
t[n] = r[n];
|
|
335
|
+
}
|
|
336
|
+
return t;
|
|
337
|
+
}
|
|
338
|
+
function _toPrimitive(t, r) {
|
|
339
|
+
if ("object" != typeof t || !t) return t;
|
|
340
|
+
var e = t[Symbol.toPrimitive];
|
|
341
|
+
if (void 0 !== e) {
|
|
342
|
+
var i = e.call(t, r);
|
|
343
|
+
if ("object" != typeof i) return i;
|
|
344
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
345
|
+
}
|
|
346
|
+
return ("string" === r ? String : Number)(t);
|
|
347
|
+
}
|
|
348
|
+
function _toPropertyKey(t) {
|
|
349
|
+
var i = _toPrimitive(t, "string");
|
|
350
|
+
return "symbol" == typeof i ? i : i + "";
|
|
351
|
+
}
|
|
352
|
+
function _typeof(o) {
|
|
353
|
+
"@babel/helpers - typeof";
|
|
354
|
+
|
|
355
|
+
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
|
|
356
|
+
return typeof o;
|
|
357
|
+
} : function (o) {
|
|
358
|
+
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
|
|
359
|
+
}, _typeof(o);
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
var version = "1.15.7";
|
|
363
|
+
|
|
364
|
+
function userAgent(pattern) {
|
|
365
|
+
if (typeof window !== 'undefined' && window.navigator) {
|
|
366
|
+
return !! /*@__PURE__*/navigator.userAgent.match(pattern);
|
|
367
|
+
}
|
|
368
|
+
}
|
|
369
|
+
var IE11OrLess = userAgent(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i);
|
|
370
|
+
var Edge = userAgent(/Edge/i);
|
|
371
|
+
var FireFox = userAgent(/firefox/i);
|
|
372
|
+
var Safari = userAgent(/safari/i) && !userAgent(/chrome/i) && !userAgent(/android/i);
|
|
373
|
+
var IOS = userAgent(/iP(ad|od|hone)/i);
|
|
374
|
+
var ChromeForAndroid = userAgent(/chrome/i) && userAgent(/android/i);
|
|
375
|
+
|
|
376
|
+
var captureMode = {
|
|
377
|
+
capture: false,
|
|
378
|
+
passive: false
|
|
379
|
+
};
|
|
380
|
+
function on(el, event, fn) {
|
|
381
|
+
el.addEventListener(event, fn, !IE11OrLess && captureMode);
|
|
382
|
+
}
|
|
383
|
+
function off(el, event, fn) {
|
|
384
|
+
el.removeEventListener(event, fn, !IE11OrLess && captureMode);
|
|
385
|
+
}
|
|
386
|
+
function matches( /**HTMLElement*/el, /**String*/selector) {
|
|
387
|
+
if (!selector) return;
|
|
388
|
+
selector[0] === '>' && (selector = selector.substring(1));
|
|
389
|
+
if (el) {
|
|
390
|
+
try {
|
|
391
|
+
if (el.matches) {
|
|
392
|
+
return el.matches(selector);
|
|
393
|
+
} else if (el.msMatchesSelector) {
|
|
394
|
+
return el.msMatchesSelector(selector);
|
|
395
|
+
} else if (el.webkitMatchesSelector) {
|
|
396
|
+
return el.webkitMatchesSelector(selector);
|
|
397
|
+
}
|
|
398
|
+
} catch (_) {
|
|
399
|
+
return false;
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
return false;
|
|
403
|
+
}
|
|
404
|
+
function getParentOrHost(el) {
|
|
405
|
+
return el.host && el !== document && el.host.nodeType && el.host !== el ? el.host : el.parentNode;
|
|
406
|
+
}
|
|
407
|
+
function closest( /**HTMLElement*/el, /**String*/selector, /**HTMLElement*/ctx, includeCTX) {
|
|
408
|
+
if (el) {
|
|
409
|
+
ctx = ctx || document;
|
|
410
|
+
do {
|
|
411
|
+
if (selector != null && (selector[0] === '>' ? el.parentNode === ctx && matches(el, selector) : matches(el, selector)) || includeCTX && el === ctx) {
|
|
412
|
+
return el;
|
|
413
|
+
}
|
|
414
|
+
if (el === ctx) break;
|
|
415
|
+
/* jshint boss:true */
|
|
416
|
+
} while (el = getParentOrHost(el));
|
|
417
|
+
}
|
|
418
|
+
return null;
|
|
419
|
+
}
|
|
420
|
+
var R_SPACE = /\s+/g;
|
|
421
|
+
function toggleClass(el, name, state) {
|
|
422
|
+
if (el && name) {
|
|
423
|
+
if (el.classList) {
|
|
424
|
+
el.classList[state ? 'add' : 'remove'](name);
|
|
425
|
+
} else {
|
|
426
|
+
var className = (' ' + el.className + ' ').replace(R_SPACE, ' ').replace(' ' + name + ' ', ' ');
|
|
427
|
+
el.className = (className + (state ? ' ' + name : '')).replace(R_SPACE, ' ');
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
}
|
|
431
|
+
function css(el, prop, val) {
|
|
432
|
+
var style = el && el.style;
|
|
433
|
+
if (style) {
|
|
434
|
+
if (val === void 0) {
|
|
435
|
+
if (document.defaultView && document.defaultView.getComputedStyle) {
|
|
436
|
+
val = document.defaultView.getComputedStyle(el, '');
|
|
437
|
+
} else if (el.currentStyle) {
|
|
438
|
+
val = el.currentStyle;
|
|
439
|
+
}
|
|
440
|
+
return prop === void 0 ? val : val[prop];
|
|
441
|
+
} else {
|
|
442
|
+
if (!(prop in style) && prop.indexOf('webkit') === -1) {
|
|
443
|
+
prop = '-webkit-' + prop;
|
|
444
|
+
}
|
|
445
|
+
style[prop] = val + (typeof val === 'string' ? '' : 'px');
|
|
446
|
+
}
|
|
447
|
+
}
|
|
448
|
+
}
|
|
449
|
+
function matrix(el, selfOnly) {
|
|
450
|
+
var appliedTransforms = '';
|
|
451
|
+
if (typeof el === 'string') {
|
|
452
|
+
appliedTransforms = el;
|
|
453
|
+
} else {
|
|
454
|
+
do {
|
|
455
|
+
var transform = css(el, 'transform');
|
|
456
|
+
if (transform && transform !== 'none') {
|
|
457
|
+
appliedTransforms = transform + ' ' + appliedTransforms;
|
|
458
|
+
}
|
|
459
|
+
/* jshint boss:true */
|
|
460
|
+
} while (!selfOnly && (el = el.parentNode));
|
|
461
|
+
}
|
|
462
|
+
var matrixFn = window.DOMMatrix || window.WebKitCSSMatrix || window.CSSMatrix || window.MSCSSMatrix;
|
|
463
|
+
/*jshint -W056 */
|
|
464
|
+
return matrixFn && new matrixFn(appliedTransforms);
|
|
465
|
+
}
|
|
466
|
+
function find(ctx, tagName, iterator) {
|
|
467
|
+
if (ctx) {
|
|
468
|
+
var list = ctx.getElementsByTagName(tagName),
|
|
469
|
+
i = 0,
|
|
470
|
+
n = list.length;
|
|
471
|
+
if (iterator) {
|
|
472
|
+
for (; i < n; i++) {
|
|
473
|
+
iterator(list[i], i);
|
|
474
|
+
}
|
|
475
|
+
}
|
|
476
|
+
return list;
|
|
477
|
+
}
|
|
478
|
+
return [];
|
|
479
|
+
}
|
|
480
|
+
function getWindowScrollingElement() {
|
|
481
|
+
var scrollingElement = document.scrollingElement;
|
|
482
|
+
if (scrollingElement) {
|
|
483
|
+
return scrollingElement;
|
|
484
|
+
} else {
|
|
485
|
+
return document.documentElement;
|
|
486
|
+
}
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
/**
|
|
490
|
+
* Returns the "bounding client rect" of given element
|
|
491
|
+
* @param {HTMLElement} el The element whose boundingClientRect is wanted
|
|
492
|
+
* @param {[Boolean]} relativeToContainingBlock Whether the rect should be relative to the containing block of (including) the container
|
|
493
|
+
* @param {[Boolean]} relativeToNonStaticParent Whether the rect should be relative to the relative parent of (including) the contaienr
|
|
494
|
+
* @param {[Boolean]} undoScale Whether the container's scale() should be undone
|
|
495
|
+
* @param {[HTMLElement]} container The parent the element will be placed in
|
|
496
|
+
* @return {Object} The boundingClientRect of el, with specified adjustments
|
|
497
|
+
*/
|
|
498
|
+
function getRect(el, relativeToContainingBlock, relativeToNonStaticParent, undoScale, container) {
|
|
499
|
+
if (!el.getBoundingClientRect && el !== window) return;
|
|
500
|
+
var elRect, top, left, bottom, right, height, width;
|
|
501
|
+
if (el !== window && el.parentNode && el !== getWindowScrollingElement()) {
|
|
502
|
+
elRect = el.getBoundingClientRect();
|
|
503
|
+
top = elRect.top;
|
|
504
|
+
left = elRect.left;
|
|
505
|
+
bottom = elRect.bottom;
|
|
506
|
+
right = elRect.right;
|
|
507
|
+
height = elRect.height;
|
|
508
|
+
width = elRect.width;
|
|
509
|
+
} else {
|
|
510
|
+
top = 0;
|
|
511
|
+
left = 0;
|
|
512
|
+
bottom = window.innerHeight;
|
|
513
|
+
right = window.innerWidth;
|
|
514
|
+
height = window.innerHeight;
|
|
515
|
+
width = window.innerWidth;
|
|
516
|
+
}
|
|
517
|
+
if ((relativeToContainingBlock || relativeToNonStaticParent) && el !== window) {
|
|
518
|
+
// Adjust for translate()
|
|
519
|
+
container = container || el.parentNode;
|
|
520
|
+
|
|
521
|
+
// solves #1123 (see: https://stackoverflow.com/a/37953806/6088312)
|
|
522
|
+
// Not needed on <= IE11
|
|
523
|
+
if (!IE11OrLess) {
|
|
524
|
+
do {
|
|
525
|
+
if (container && container.getBoundingClientRect && (css(container, 'transform') !== 'none' || relativeToNonStaticParent && css(container, 'position') !== 'static')) {
|
|
526
|
+
var containerRect = container.getBoundingClientRect();
|
|
527
|
+
|
|
528
|
+
// Set relative to edges of padding box of container
|
|
529
|
+
top -= containerRect.top + parseInt(css(container, 'border-top-width'));
|
|
530
|
+
left -= containerRect.left + parseInt(css(container, 'border-left-width'));
|
|
531
|
+
bottom = top + elRect.height;
|
|
532
|
+
right = left + elRect.width;
|
|
533
|
+
break;
|
|
534
|
+
}
|
|
535
|
+
/* jshint boss:true */
|
|
536
|
+
} while (container = container.parentNode);
|
|
537
|
+
}
|
|
538
|
+
}
|
|
539
|
+
if (undoScale && el !== window) {
|
|
540
|
+
// Adjust for scale()
|
|
541
|
+
var elMatrix = matrix(container || el),
|
|
542
|
+
scaleX = elMatrix && elMatrix.a,
|
|
543
|
+
scaleY = elMatrix && elMatrix.d;
|
|
544
|
+
if (elMatrix) {
|
|
545
|
+
top /= scaleY;
|
|
546
|
+
left /= scaleX;
|
|
547
|
+
width /= scaleX;
|
|
548
|
+
height /= scaleY;
|
|
549
|
+
bottom = top + height;
|
|
550
|
+
right = left + width;
|
|
551
|
+
}
|
|
552
|
+
}
|
|
553
|
+
return {
|
|
554
|
+
top: top,
|
|
555
|
+
left: left,
|
|
556
|
+
bottom: bottom,
|
|
557
|
+
right: right,
|
|
558
|
+
width: width,
|
|
559
|
+
height: height
|
|
560
|
+
};
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
/**
|
|
564
|
+
* Checks if a side of an element is scrolled past a side of its parents
|
|
565
|
+
* @param {HTMLElement} el The element who's side being scrolled out of view is in question
|
|
566
|
+
* @param {String} elSide Side of the element in question ('top', 'left', 'right', 'bottom')
|
|
567
|
+
* @param {String} parentSide Side of the parent in question ('top', 'left', 'right', 'bottom')
|
|
568
|
+
* @return {HTMLElement} The parent scroll element that the el's side is scrolled past, or null if there is no such element
|
|
569
|
+
*/
|
|
570
|
+
function isScrolledPast(el, elSide, parentSide) {
|
|
571
|
+
var parent = getParentAutoScrollElement(el, true),
|
|
572
|
+
elSideVal = getRect(el)[elSide];
|
|
573
|
+
|
|
574
|
+
/* jshint boss:true */
|
|
575
|
+
while (parent) {
|
|
576
|
+
var parentSideVal = getRect(parent)[parentSide],
|
|
577
|
+
visible = void 0;
|
|
578
|
+
{
|
|
579
|
+
visible = elSideVal >= parentSideVal;
|
|
580
|
+
}
|
|
581
|
+
if (!visible) return parent;
|
|
582
|
+
if (parent === getWindowScrollingElement()) break;
|
|
583
|
+
parent = getParentAutoScrollElement(parent, false);
|
|
584
|
+
}
|
|
585
|
+
return false;
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
/**
|
|
589
|
+
* Gets nth child of el, ignoring hidden children, sortable's elements (does not ignore clone if it's visible)
|
|
590
|
+
* and non-draggable elements
|
|
591
|
+
* @param {HTMLElement} el The parent element
|
|
592
|
+
* @param {Number} childNum The index of the child
|
|
593
|
+
* @param {Object} options Parent Sortable's options
|
|
594
|
+
* @return {HTMLElement} The child at index childNum, or null if not found
|
|
595
|
+
*/
|
|
596
|
+
function getChild(el, childNum, options, includeDragEl) {
|
|
597
|
+
var currentChild = 0,
|
|
598
|
+
i = 0,
|
|
599
|
+
children = el.children;
|
|
600
|
+
while (i < children.length) {
|
|
601
|
+
if (children[i].style.display !== 'none' && children[i] !== Sortable.ghost && (includeDragEl || children[i] !== Sortable.dragged) && closest(children[i], options.draggable, el, false)) {
|
|
602
|
+
if (currentChild === childNum) {
|
|
603
|
+
return children[i];
|
|
604
|
+
}
|
|
605
|
+
currentChild++;
|
|
606
|
+
}
|
|
607
|
+
i++;
|
|
608
|
+
}
|
|
609
|
+
return null;
|
|
610
|
+
}
|
|
611
|
+
|
|
612
|
+
/**
|
|
613
|
+
* Gets the last child in the el, ignoring ghostEl or invisible elements (clones)
|
|
614
|
+
* @param {HTMLElement} el Parent element
|
|
615
|
+
* @param {selector} selector Any other elements that should be ignored
|
|
616
|
+
* @return {HTMLElement} The last child, ignoring ghostEl
|
|
617
|
+
*/
|
|
618
|
+
function lastChild(el, selector) {
|
|
619
|
+
var last = el.lastElementChild;
|
|
620
|
+
while (last && (last === Sortable.ghost || css(last, 'display') === 'none' || selector && !matches(last, selector))) {
|
|
621
|
+
last = last.previousElementSibling;
|
|
622
|
+
}
|
|
623
|
+
return last || null;
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
/**
|
|
627
|
+
* Returns the index of an element within its parent for a selected set of
|
|
628
|
+
* elements
|
|
629
|
+
* @param {HTMLElement} el
|
|
630
|
+
* @param {selector} selector
|
|
631
|
+
* @return {number}
|
|
632
|
+
*/
|
|
633
|
+
function index(el, selector) {
|
|
634
|
+
var index = 0;
|
|
635
|
+
if (!el || !el.parentNode) {
|
|
636
|
+
return -1;
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
/* jshint boss:true */
|
|
640
|
+
while (el = el.previousElementSibling) {
|
|
641
|
+
if (el.nodeName.toUpperCase() !== 'TEMPLATE' && el !== Sortable.clone && (!selector || matches(el, selector))) {
|
|
642
|
+
index++;
|
|
643
|
+
}
|
|
644
|
+
}
|
|
645
|
+
return index;
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
/**
|
|
649
|
+
* Returns the scroll offset of the given element, added with all the scroll offsets of parent elements.
|
|
650
|
+
* The value is returned in real pixels.
|
|
651
|
+
* @param {HTMLElement} el
|
|
652
|
+
* @return {Array} Offsets in the format of [left, top]
|
|
653
|
+
*/
|
|
654
|
+
function getRelativeScrollOffset(el) {
|
|
655
|
+
var offsetLeft = 0,
|
|
656
|
+
offsetTop = 0,
|
|
657
|
+
winScroller = getWindowScrollingElement();
|
|
658
|
+
if (el) {
|
|
659
|
+
do {
|
|
660
|
+
var elMatrix = matrix(el),
|
|
661
|
+
scaleX = elMatrix.a,
|
|
662
|
+
scaleY = elMatrix.d;
|
|
663
|
+
offsetLeft += el.scrollLeft * scaleX;
|
|
664
|
+
offsetTop += el.scrollTop * scaleY;
|
|
665
|
+
} while (el !== winScroller && (el = el.parentNode));
|
|
666
|
+
}
|
|
667
|
+
return [offsetLeft, offsetTop];
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
/**
|
|
671
|
+
* Returns the index of the object within the given array
|
|
672
|
+
* @param {Array} arr Array that may or may not hold the object
|
|
673
|
+
* @param {Object} obj An object that has a key-value pair unique to and identical to a key-value pair in the object you want to find
|
|
674
|
+
* @return {Number} The index of the object in the array, or -1
|
|
675
|
+
*/
|
|
676
|
+
function indexOfObject(arr, obj) {
|
|
677
|
+
for (var i in arr) {
|
|
678
|
+
if (!arr.hasOwnProperty(i)) continue;
|
|
679
|
+
for (var key in obj) {
|
|
680
|
+
if (obj.hasOwnProperty(key) && obj[key] === arr[i][key]) return Number(i);
|
|
681
|
+
}
|
|
682
|
+
}
|
|
683
|
+
return -1;
|
|
684
|
+
}
|
|
685
|
+
function getParentAutoScrollElement(el, includeSelf) {
|
|
686
|
+
// skip to window
|
|
687
|
+
if (!el || !el.getBoundingClientRect) return getWindowScrollingElement();
|
|
688
|
+
var elem = el;
|
|
689
|
+
var gotSelf = false;
|
|
690
|
+
do {
|
|
691
|
+
// we don't need to get elem css if it isn't even overflowing in the first place (performance)
|
|
692
|
+
if (elem.clientWidth < elem.scrollWidth || elem.clientHeight < elem.scrollHeight) {
|
|
693
|
+
var elemCSS = css(elem);
|
|
694
|
+
if (elem.clientWidth < elem.scrollWidth && (elemCSS.overflowX == 'auto' || elemCSS.overflowX == 'scroll') || elem.clientHeight < elem.scrollHeight && (elemCSS.overflowY == 'auto' || elemCSS.overflowY == 'scroll')) {
|
|
695
|
+
if (!elem.getBoundingClientRect || elem === document.body) return getWindowScrollingElement();
|
|
696
|
+
if (gotSelf || includeSelf) return elem;
|
|
697
|
+
gotSelf = true;
|
|
698
|
+
}
|
|
699
|
+
}
|
|
700
|
+
/* jshint boss:true */
|
|
701
|
+
} while (elem = elem.parentNode);
|
|
702
|
+
return getWindowScrollingElement();
|
|
703
|
+
}
|
|
704
|
+
function extend(dst, src) {
|
|
705
|
+
if (dst && src) {
|
|
706
|
+
for (var key in src) {
|
|
707
|
+
if (src.hasOwnProperty(key)) {
|
|
708
|
+
dst[key] = src[key];
|
|
709
|
+
}
|
|
710
|
+
}
|
|
711
|
+
}
|
|
712
|
+
return dst;
|
|
713
|
+
}
|
|
714
|
+
function isRectEqual(rect1, rect2) {
|
|
715
|
+
return Math.round(rect1.top) === Math.round(rect2.top) && Math.round(rect1.left) === Math.round(rect2.left) && Math.round(rect1.height) === Math.round(rect2.height) && Math.round(rect1.width) === Math.round(rect2.width);
|
|
716
|
+
}
|
|
717
|
+
var _throttleTimeout;
|
|
718
|
+
function throttle(callback, ms) {
|
|
719
|
+
return function () {
|
|
720
|
+
if (!_throttleTimeout) {
|
|
721
|
+
var args = arguments,
|
|
722
|
+
_this = this;
|
|
723
|
+
if (args.length === 1) {
|
|
724
|
+
callback.call(_this, args[0]);
|
|
725
|
+
} else {
|
|
726
|
+
callback.apply(_this, args);
|
|
727
|
+
}
|
|
728
|
+
_throttleTimeout = setTimeout(function () {
|
|
729
|
+
_throttleTimeout = void 0;
|
|
730
|
+
}, ms);
|
|
731
|
+
}
|
|
732
|
+
};
|
|
733
|
+
}
|
|
734
|
+
function cancelThrottle() {
|
|
735
|
+
clearTimeout(_throttleTimeout);
|
|
736
|
+
_throttleTimeout = void 0;
|
|
737
|
+
}
|
|
738
|
+
function scrollBy(el, x, y) {
|
|
739
|
+
el.scrollLeft += x;
|
|
740
|
+
el.scrollTop += y;
|
|
741
|
+
}
|
|
742
|
+
function clone(el) {
|
|
743
|
+
var Polymer = window.Polymer;
|
|
744
|
+
var $ = window.jQuery || window.Zepto;
|
|
745
|
+
if (Polymer && Polymer.dom) {
|
|
746
|
+
return Polymer.dom(el).cloneNode(true);
|
|
747
|
+
} else if ($) {
|
|
748
|
+
return $(el).clone(true)[0];
|
|
749
|
+
} else {
|
|
750
|
+
return el.cloneNode(true);
|
|
751
|
+
}
|
|
752
|
+
}
|
|
753
|
+
function getChildContainingRectFromElement(container, options, ghostEl) {
|
|
754
|
+
var rect = {};
|
|
755
|
+
Array.from(container.children).forEach(function (child) {
|
|
756
|
+
var _rect$left, _rect$top, _rect$right, _rect$bottom;
|
|
757
|
+
if (!closest(child, options.draggable, container, false) || child.animated || child === ghostEl) return;
|
|
758
|
+
var childRect = getRect(child);
|
|
759
|
+
rect.left = Math.min((_rect$left = rect.left) !== null && _rect$left !== void 0 ? _rect$left : Infinity, childRect.left);
|
|
760
|
+
rect.top = Math.min((_rect$top = rect.top) !== null && _rect$top !== void 0 ? _rect$top : Infinity, childRect.top);
|
|
761
|
+
rect.right = Math.max((_rect$right = rect.right) !== null && _rect$right !== void 0 ? _rect$right : -Infinity, childRect.right);
|
|
762
|
+
rect.bottom = Math.max((_rect$bottom = rect.bottom) !== null && _rect$bottom !== void 0 ? _rect$bottom : -Infinity, childRect.bottom);
|
|
763
|
+
});
|
|
764
|
+
rect.width = rect.right - rect.left;
|
|
765
|
+
rect.height = rect.bottom - rect.top;
|
|
766
|
+
rect.x = rect.left;
|
|
767
|
+
rect.y = rect.top;
|
|
768
|
+
return rect;
|
|
769
|
+
}
|
|
770
|
+
var expando = 'Sortable' + new Date().getTime();
|
|
771
|
+
|
|
772
|
+
function AnimationStateManager() {
|
|
773
|
+
var animationStates = [],
|
|
774
|
+
animationCallbackId;
|
|
775
|
+
return {
|
|
776
|
+
captureAnimationState: function captureAnimationState() {
|
|
777
|
+
animationStates = [];
|
|
778
|
+
if (!this.options.animation) return;
|
|
779
|
+
var children = [].slice.call(this.el.children);
|
|
780
|
+
children.forEach(function (child) {
|
|
781
|
+
if (css(child, 'display') === 'none' || child === Sortable.ghost) return;
|
|
782
|
+
animationStates.push({
|
|
783
|
+
target: child,
|
|
784
|
+
rect: getRect(child)
|
|
785
|
+
});
|
|
786
|
+
var fromRect = _objectSpread2({}, animationStates[animationStates.length - 1].rect);
|
|
787
|
+
|
|
788
|
+
// If animating: compensate for current animation
|
|
789
|
+
if (child.thisAnimationDuration) {
|
|
790
|
+
var childMatrix = matrix(child, true);
|
|
791
|
+
if (childMatrix) {
|
|
792
|
+
fromRect.top -= childMatrix.f;
|
|
793
|
+
fromRect.left -= childMatrix.e;
|
|
794
|
+
}
|
|
795
|
+
}
|
|
796
|
+
child.fromRect = fromRect;
|
|
797
|
+
});
|
|
798
|
+
},
|
|
799
|
+
addAnimationState: function addAnimationState(state) {
|
|
800
|
+
animationStates.push(state);
|
|
801
|
+
},
|
|
802
|
+
removeAnimationState: function removeAnimationState(target) {
|
|
803
|
+
animationStates.splice(indexOfObject(animationStates, {
|
|
804
|
+
target: target
|
|
805
|
+
}), 1);
|
|
806
|
+
},
|
|
807
|
+
animateAll: function animateAll(callback) {
|
|
808
|
+
var _this = this;
|
|
809
|
+
if (!this.options.animation) {
|
|
810
|
+
clearTimeout(animationCallbackId);
|
|
811
|
+
if (typeof callback === 'function') callback();
|
|
812
|
+
return;
|
|
813
|
+
}
|
|
814
|
+
var animating = false,
|
|
815
|
+
animationTime = 0;
|
|
816
|
+
animationStates.forEach(function (state) {
|
|
817
|
+
var time = 0,
|
|
818
|
+
target = state.target,
|
|
819
|
+
fromRect = target.fromRect,
|
|
820
|
+
toRect = getRect(target),
|
|
821
|
+
prevFromRect = target.prevFromRect,
|
|
822
|
+
prevToRect = target.prevToRect,
|
|
823
|
+
animatingRect = state.rect,
|
|
824
|
+
targetMatrix = matrix(target, true);
|
|
825
|
+
if (targetMatrix) {
|
|
826
|
+
// Compensate for current animation
|
|
827
|
+
toRect.top -= targetMatrix.f;
|
|
828
|
+
toRect.left -= targetMatrix.e;
|
|
829
|
+
}
|
|
830
|
+
target.toRect = toRect;
|
|
831
|
+
if (target.thisAnimationDuration) {
|
|
832
|
+
// Could also check if animatingRect is between fromRect and toRect
|
|
833
|
+
if (isRectEqual(prevFromRect, toRect) && !isRectEqual(fromRect, toRect) &&
|
|
834
|
+
// Make sure animatingRect is on line between toRect & fromRect
|
|
835
|
+
(animatingRect.top - toRect.top) / (animatingRect.left - toRect.left) === (fromRect.top - toRect.top) / (fromRect.left - toRect.left)) {
|
|
836
|
+
// If returning to same place as started from animation and on same axis
|
|
837
|
+
time = calculateRealTime(animatingRect, prevFromRect, prevToRect, _this.options);
|
|
838
|
+
}
|
|
839
|
+
}
|
|
840
|
+
|
|
841
|
+
// if fromRect != toRect: animate
|
|
842
|
+
if (!isRectEqual(toRect, fromRect)) {
|
|
843
|
+
target.prevFromRect = fromRect;
|
|
844
|
+
target.prevToRect = toRect;
|
|
845
|
+
if (!time) {
|
|
846
|
+
time = _this.options.animation;
|
|
847
|
+
}
|
|
848
|
+
_this.animate(target, animatingRect, toRect, time);
|
|
849
|
+
}
|
|
850
|
+
if (time) {
|
|
851
|
+
animating = true;
|
|
852
|
+
animationTime = Math.max(animationTime, time);
|
|
853
|
+
clearTimeout(target.animationResetTimer);
|
|
854
|
+
target.animationResetTimer = setTimeout(function () {
|
|
855
|
+
target.animationTime = 0;
|
|
856
|
+
target.prevFromRect = null;
|
|
857
|
+
target.fromRect = null;
|
|
858
|
+
target.prevToRect = null;
|
|
859
|
+
target.thisAnimationDuration = null;
|
|
860
|
+
}, time);
|
|
861
|
+
target.thisAnimationDuration = time;
|
|
862
|
+
}
|
|
863
|
+
});
|
|
864
|
+
clearTimeout(animationCallbackId);
|
|
865
|
+
if (!animating) {
|
|
866
|
+
if (typeof callback === 'function') callback();
|
|
867
|
+
} else {
|
|
868
|
+
animationCallbackId = setTimeout(function () {
|
|
869
|
+
if (typeof callback === 'function') callback();
|
|
870
|
+
}, animationTime);
|
|
871
|
+
}
|
|
872
|
+
animationStates = [];
|
|
873
|
+
},
|
|
874
|
+
animate: function animate(target, currentRect, toRect, duration) {
|
|
875
|
+
if (duration) {
|
|
876
|
+
css(target, 'transition', '');
|
|
877
|
+
css(target, 'transform', '');
|
|
878
|
+
var elMatrix = matrix(this.el),
|
|
879
|
+
scaleX = elMatrix && elMatrix.a,
|
|
880
|
+
scaleY = elMatrix && elMatrix.d,
|
|
881
|
+
translateX = (currentRect.left - toRect.left) / (scaleX || 1),
|
|
882
|
+
translateY = (currentRect.top - toRect.top) / (scaleY || 1);
|
|
883
|
+
target.animatingX = !!translateX;
|
|
884
|
+
target.animatingY = !!translateY;
|
|
885
|
+
css(target, 'transform', 'translate3d(' + translateX + 'px,' + translateY + 'px,0)');
|
|
886
|
+
this.forRepaintDummy = repaint(target); // repaint
|
|
887
|
+
|
|
888
|
+
css(target, 'transition', 'transform ' + duration + 'ms' + (this.options.easing ? ' ' + this.options.easing : ''));
|
|
889
|
+
css(target, 'transform', 'translate3d(0,0,0)');
|
|
890
|
+
typeof target.animated === 'number' && clearTimeout(target.animated);
|
|
891
|
+
target.animated = setTimeout(function () {
|
|
892
|
+
css(target, 'transition', '');
|
|
893
|
+
css(target, 'transform', '');
|
|
894
|
+
target.animated = false;
|
|
895
|
+
target.animatingX = false;
|
|
896
|
+
target.animatingY = false;
|
|
897
|
+
}, duration);
|
|
898
|
+
}
|
|
899
|
+
}
|
|
900
|
+
};
|
|
901
|
+
}
|
|
902
|
+
function repaint(target) {
|
|
903
|
+
return target.offsetWidth;
|
|
904
|
+
}
|
|
905
|
+
function calculateRealTime(animatingRect, fromRect, toRect, options) {
|
|
906
|
+
return Math.sqrt(Math.pow(fromRect.top - animatingRect.top, 2) + Math.pow(fromRect.left - animatingRect.left, 2)) / Math.sqrt(Math.pow(fromRect.top - toRect.top, 2) + Math.pow(fromRect.left - toRect.left, 2)) * options.animation;
|
|
907
|
+
}
|
|
908
|
+
|
|
909
|
+
var plugins = [];
|
|
910
|
+
var defaults = {
|
|
911
|
+
initializeByDefault: true
|
|
912
|
+
};
|
|
913
|
+
var PluginManager = {
|
|
914
|
+
mount: function mount(plugin) {
|
|
915
|
+
// Set default static properties
|
|
916
|
+
for (var option in defaults) {
|
|
917
|
+
if (defaults.hasOwnProperty(option) && !(option in plugin)) {
|
|
918
|
+
plugin[option] = defaults[option];
|
|
919
|
+
}
|
|
920
|
+
}
|
|
921
|
+
plugins.forEach(function (p) {
|
|
922
|
+
if (p.pluginName === plugin.pluginName) {
|
|
923
|
+
throw "Sortable: Cannot mount plugin ".concat(plugin.pluginName, " more than once");
|
|
924
|
+
}
|
|
925
|
+
});
|
|
926
|
+
plugins.push(plugin);
|
|
927
|
+
},
|
|
928
|
+
pluginEvent: function pluginEvent(eventName, sortable, evt) {
|
|
929
|
+
var _this = this;
|
|
930
|
+
this.eventCanceled = false;
|
|
931
|
+
evt.cancel = function () {
|
|
932
|
+
_this.eventCanceled = true;
|
|
933
|
+
};
|
|
934
|
+
var eventNameGlobal = eventName + 'Global';
|
|
935
|
+
plugins.forEach(function (plugin) {
|
|
936
|
+
if (!sortable[plugin.pluginName]) return;
|
|
937
|
+
// Fire global events if it exists in this sortable
|
|
938
|
+
if (sortable[plugin.pluginName][eventNameGlobal]) {
|
|
939
|
+
sortable[plugin.pluginName][eventNameGlobal](_objectSpread2({
|
|
940
|
+
sortable: sortable
|
|
941
|
+
}, evt));
|
|
942
|
+
}
|
|
943
|
+
|
|
944
|
+
// Only fire plugin event if plugin is enabled in this sortable,
|
|
945
|
+
// and plugin has event defined
|
|
946
|
+
if (sortable.options[plugin.pluginName] && sortable[plugin.pluginName][eventName]) {
|
|
947
|
+
sortable[plugin.pluginName][eventName](_objectSpread2({
|
|
948
|
+
sortable: sortable
|
|
949
|
+
}, evt));
|
|
950
|
+
}
|
|
951
|
+
});
|
|
952
|
+
},
|
|
953
|
+
initializePlugins: function initializePlugins(sortable, el, defaults, options) {
|
|
954
|
+
plugins.forEach(function (plugin) {
|
|
955
|
+
var pluginName = plugin.pluginName;
|
|
956
|
+
if (!sortable.options[pluginName] && !plugin.initializeByDefault) return;
|
|
957
|
+
var initialized = new plugin(sortable, el, sortable.options);
|
|
958
|
+
initialized.sortable = sortable;
|
|
959
|
+
initialized.options = sortable.options;
|
|
960
|
+
sortable[pluginName] = initialized;
|
|
961
|
+
|
|
962
|
+
// Add default options from plugin
|
|
963
|
+
_extends(defaults, initialized.defaults);
|
|
964
|
+
});
|
|
965
|
+
for (var option in sortable.options) {
|
|
966
|
+
if (!sortable.options.hasOwnProperty(option)) continue;
|
|
967
|
+
var modified = this.modifyOption(sortable, option, sortable.options[option]);
|
|
968
|
+
if (typeof modified !== 'undefined') {
|
|
969
|
+
sortable.options[option] = modified;
|
|
970
|
+
}
|
|
971
|
+
}
|
|
972
|
+
},
|
|
973
|
+
getEventProperties: function getEventProperties(name, sortable) {
|
|
974
|
+
var eventProperties = {};
|
|
975
|
+
plugins.forEach(function (plugin) {
|
|
976
|
+
if (typeof plugin.eventProperties !== 'function') return;
|
|
977
|
+
_extends(eventProperties, plugin.eventProperties.call(sortable[plugin.pluginName], name));
|
|
978
|
+
});
|
|
979
|
+
return eventProperties;
|
|
980
|
+
},
|
|
981
|
+
modifyOption: function modifyOption(sortable, name, value) {
|
|
982
|
+
var modifiedValue;
|
|
983
|
+
plugins.forEach(function (plugin) {
|
|
984
|
+
// Plugin must exist on the Sortable
|
|
985
|
+
if (!sortable[plugin.pluginName]) return;
|
|
986
|
+
|
|
987
|
+
// If static option listener exists for this option, call in the context of the Sortable's instance of this plugin
|
|
988
|
+
if (plugin.optionListeners && typeof plugin.optionListeners[name] === 'function') {
|
|
989
|
+
modifiedValue = plugin.optionListeners[name].call(sortable[plugin.pluginName], value);
|
|
990
|
+
}
|
|
991
|
+
});
|
|
992
|
+
return modifiedValue;
|
|
993
|
+
}
|
|
994
|
+
};
|
|
995
|
+
|
|
996
|
+
function dispatchEvent(_ref) {
|
|
997
|
+
var sortable = _ref.sortable,
|
|
998
|
+
rootEl = _ref.rootEl,
|
|
999
|
+
name = _ref.name,
|
|
1000
|
+
targetEl = _ref.targetEl,
|
|
1001
|
+
cloneEl = _ref.cloneEl,
|
|
1002
|
+
toEl = _ref.toEl,
|
|
1003
|
+
fromEl = _ref.fromEl,
|
|
1004
|
+
oldIndex = _ref.oldIndex,
|
|
1005
|
+
newIndex = _ref.newIndex,
|
|
1006
|
+
oldDraggableIndex = _ref.oldDraggableIndex,
|
|
1007
|
+
newDraggableIndex = _ref.newDraggableIndex,
|
|
1008
|
+
originalEvent = _ref.originalEvent,
|
|
1009
|
+
putSortable = _ref.putSortable,
|
|
1010
|
+
extraEventProperties = _ref.extraEventProperties;
|
|
1011
|
+
sortable = sortable || rootEl && rootEl[expando];
|
|
1012
|
+
if (!sortable) return;
|
|
1013
|
+
var evt,
|
|
1014
|
+
options = sortable.options,
|
|
1015
|
+
onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1);
|
|
1016
|
+
// Support for new CustomEvent feature
|
|
1017
|
+
if (window.CustomEvent && !IE11OrLess && !Edge) {
|
|
1018
|
+
evt = new CustomEvent(name, {
|
|
1019
|
+
bubbles: true,
|
|
1020
|
+
cancelable: true
|
|
1021
|
+
});
|
|
1022
|
+
} else {
|
|
1023
|
+
evt = document.createEvent('Event');
|
|
1024
|
+
evt.initEvent(name, true, true);
|
|
1025
|
+
}
|
|
1026
|
+
evt.to = toEl || rootEl;
|
|
1027
|
+
evt.from = fromEl || rootEl;
|
|
1028
|
+
evt.item = targetEl || rootEl;
|
|
1029
|
+
evt.clone = cloneEl;
|
|
1030
|
+
evt.oldIndex = oldIndex;
|
|
1031
|
+
evt.newIndex = newIndex;
|
|
1032
|
+
evt.oldDraggableIndex = oldDraggableIndex;
|
|
1033
|
+
evt.newDraggableIndex = newDraggableIndex;
|
|
1034
|
+
evt.originalEvent = originalEvent;
|
|
1035
|
+
evt.pullMode = putSortable ? putSortable.lastPutMode : undefined;
|
|
1036
|
+
var allEventProperties = _objectSpread2(_objectSpread2({}, extraEventProperties), PluginManager.getEventProperties(name, sortable));
|
|
1037
|
+
for (var option in allEventProperties) {
|
|
1038
|
+
evt[option] = allEventProperties[option];
|
|
1039
|
+
}
|
|
1040
|
+
if (rootEl) {
|
|
1041
|
+
rootEl.dispatchEvent(evt);
|
|
1042
|
+
}
|
|
1043
|
+
if (options[onName]) {
|
|
1044
|
+
options[onName].call(sortable, evt);
|
|
1045
|
+
}
|
|
1046
|
+
}
|
|
1047
|
+
|
|
1048
|
+
var _excluded = ["evt"];
|
|
1049
|
+
var pluginEvent = function pluginEvent(eventName, sortable) {
|
|
1050
|
+
var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
|
|
1051
|
+
originalEvent = _ref.evt,
|
|
1052
|
+
data = _objectWithoutProperties(_ref, _excluded);
|
|
1053
|
+
PluginManager.pluginEvent.bind(Sortable)(eventName, sortable, _objectSpread2({
|
|
1054
|
+
dragEl: dragEl,
|
|
1055
|
+
parentEl: parentEl,
|
|
1056
|
+
ghostEl: ghostEl,
|
|
1057
|
+
rootEl: rootEl,
|
|
1058
|
+
nextEl: nextEl,
|
|
1059
|
+
lastDownEl: lastDownEl,
|
|
1060
|
+
cloneEl: cloneEl,
|
|
1061
|
+
cloneHidden: cloneHidden,
|
|
1062
|
+
dragStarted: moved,
|
|
1063
|
+
putSortable: putSortable,
|
|
1064
|
+
activeSortable: Sortable.active,
|
|
1065
|
+
originalEvent: originalEvent,
|
|
1066
|
+
oldIndex: oldIndex,
|
|
1067
|
+
oldDraggableIndex: oldDraggableIndex,
|
|
1068
|
+
newIndex: newIndex,
|
|
1069
|
+
newDraggableIndex: newDraggableIndex,
|
|
1070
|
+
hideGhostForTarget: _hideGhostForTarget,
|
|
1071
|
+
unhideGhostForTarget: _unhideGhostForTarget,
|
|
1072
|
+
cloneNowHidden: function cloneNowHidden() {
|
|
1073
|
+
cloneHidden = true;
|
|
1074
|
+
},
|
|
1075
|
+
cloneNowShown: function cloneNowShown() {
|
|
1076
|
+
cloneHidden = false;
|
|
1077
|
+
},
|
|
1078
|
+
dispatchSortableEvent: function dispatchSortableEvent(name) {
|
|
1079
|
+
_dispatchEvent({
|
|
1080
|
+
sortable: sortable,
|
|
1081
|
+
name: name,
|
|
1082
|
+
originalEvent: originalEvent
|
|
1083
|
+
});
|
|
1084
|
+
}
|
|
1085
|
+
}, data));
|
|
1086
|
+
};
|
|
1087
|
+
function _dispatchEvent(info) {
|
|
1088
|
+
dispatchEvent(_objectSpread2({
|
|
1089
|
+
putSortable: putSortable,
|
|
1090
|
+
cloneEl: cloneEl,
|
|
1091
|
+
targetEl: dragEl,
|
|
1092
|
+
rootEl: rootEl,
|
|
1093
|
+
oldIndex: oldIndex,
|
|
1094
|
+
oldDraggableIndex: oldDraggableIndex,
|
|
1095
|
+
newIndex: newIndex,
|
|
1096
|
+
newDraggableIndex: newDraggableIndex
|
|
1097
|
+
}, info));
|
|
1098
|
+
}
|
|
1099
|
+
var dragEl,
|
|
1100
|
+
parentEl,
|
|
1101
|
+
ghostEl,
|
|
1102
|
+
rootEl,
|
|
1103
|
+
nextEl,
|
|
1104
|
+
lastDownEl,
|
|
1105
|
+
cloneEl,
|
|
1106
|
+
cloneHidden,
|
|
1107
|
+
oldIndex,
|
|
1108
|
+
newIndex,
|
|
1109
|
+
oldDraggableIndex,
|
|
1110
|
+
newDraggableIndex,
|
|
1111
|
+
activeGroup,
|
|
1112
|
+
putSortable,
|
|
1113
|
+
awaitingDragStarted = false,
|
|
1114
|
+
ignoreNextClick = false,
|
|
1115
|
+
sortables = [],
|
|
1116
|
+
tapEvt,
|
|
1117
|
+
touchEvt,
|
|
1118
|
+
lastDx,
|
|
1119
|
+
lastDy,
|
|
1120
|
+
tapDistanceLeft,
|
|
1121
|
+
tapDistanceTop,
|
|
1122
|
+
moved,
|
|
1123
|
+
lastTarget,
|
|
1124
|
+
lastDirection,
|
|
1125
|
+
pastFirstInvertThresh = false,
|
|
1126
|
+
isCircumstantialInvert = false,
|
|
1127
|
+
targetMoveDistance,
|
|
1128
|
+
// For positioning ghost absolutely
|
|
1129
|
+
ghostRelativeParent,
|
|
1130
|
+
ghostRelativeParentInitialScroll = [],
|
|
1131
|
+
// (left, top)
|
|
1132
|
+
|
|
1133
|
+
_silent = false,
|
|
1134
|
+
savedInputChecked = [];
|
|
1135
|
+
|
|
1136
|
+
/** @const */
|
|
1137
|
+
var documentExists = typeof document !== 'undefined',
|
|
1138
|
+
PositionGhostAbsolutely = IOS,
|
|
1139
|
+
CSSFloatProperty = Edge || IE11OrLess ? 'cssFloat' : 'float',
|
|
1140
|
+
// This will not pass for IE9, because IE9 DnD only works on anchors
|
|
1141
|
+
supportDraggable = documentExists && !ChromeForAndroid && !IOS && 'draggable' in document.createElement('div'),
|
|
1142
|
+
supportCssPointerEvents = function () {
|
|
1143
|
+
if (!documentExists) return;
|
|
1144
|
+
// false when <= IE11
|
|
1145
|
+
if (IE11OrLess) {
|
|
1146
|
+
return false;
|
|
1147
|
+
}
|
|
1148
|
+
var el = document.createElement('x');
|
|
1149
|
+
el.style.cssText = 'pointer-events:auto';
|
|
1150
|
+
return el.style.pointerEvents === 'auto';
|
|
1151
|
+
}(),
|
|
1152
|
+
_detectDirection = function _detectDirection(el, options) {
|
|
1153
|
+
var elCSS = css(el),
|
|
1154
|
+
elWidth = parseInt(elCSS.width) - parseInt(elCSS.paddingLeft) - parseInt(elCSS.paddingRight) - parseInt(elCSS.borderLeftWidth) - parseInt(elCSS.borderRightWidth),
|
|
1155
|
+
child1 = getChild(el, 0, options),
|
|
1156
|
+
child2 = getChild(el, 1, options),
|
|
1157
|
+
firstChildCSS = child1 && css(child1),
|
|
1158
|
+
secondChildCSS = child2 && css(child2),
|
|
1159
|
+
firstChildWidth = firstChildCSS && parseInt(firstChildCSS.marginLeft) + parseInt(firstChildCSS.marginRight) + getRect(child1).width,
|
|
1160
|
+
secondChildWidth = secondChildCSS && parseInt(secondChildCSS.marginLeft) + parseInt(secondChildCSS.marginRight) + getRect(child2).width;
|
|
1161
|
+
if (elCSS.display === 'flex') {
|
|
1162
|
+
return elCSS.flexDirection === 'column' || elCSS.flexDirection === 'column-reverse' ? 'vertical' : 'horizontal';
|
|
1163
|
+
}
|
|
1164
|
+
if (elCSS.display === 'grid') {
|
|
1165
|
+
return elCSS.gridTemplateColumns.split(' ').length <= 1 ? 'vertical' : 'horizontal';
|
|
1166
|
+
}
|
|
1167
|
+
if (child1 && firstChildCSS["float"] && firstChildCSS["float"] !== 'none') {
|
|
1168
|
+
var touchingSideChild2 = firstChildCSS["float"] === 'left' ? 'left' : 'right';
|
|
1169
|
+
return child2 && (secondChildCSS.clear === 'both' || secondChildCSS.clear === touchingSideChild2) ? 'vertical' : 'horizontal';
|
|
1170
|
+
}
|
|
1171
|
+
return child1 && (firstChildCSS.display === 'block' || firstChildCSS.display === 'flex' || firstChildCSS.display === 'table' || firstChildCSS.display === 'grid' || firstChildWidth >= elWidth && elCSS[CSSFloatProperty] === 'none' || child2 && elCSS[CSSFloatProperty] === 'none' && firstChildWidth + secondChildWidth > elWidth) ? 'vertical' : 'horizontal';
|
|
1172
|
+
},
|
|
1173
|
+
_dragElInRowColumn = function _dragElInRowColumn(dragRect, targetRect, vertical) {
|
|
1174
|
+
var dragElS1Opp = vertical ? dragRect.left : dragRect.top,
|
|
1175
|
+
dragElS2Opp = vertical ? dragRect.right : dragRect.bottom,
|
|
1176
|
+
dragElOppLength = vertical ? dragRect.width : dragRect.height,
|
|
1177
|
+
targetS1Opp = vertical ? targetRect.left : targetRect.top,
|
|
1178
|
+
targetS2Opp = vertical ? targetRect.right : targetRect.bottom,
|
|
1179
|
+
targetOppLength = vertical ? targetRect.width : targetRect.height;
|
|
1180
|
+
return dragElS1Opp === targetS1Opp || dragElS2Opp === targetS2Opp || dragElS1Opp + dragElOppLength / 2 === targetS1Opp + targetOppLength / 2;
|
|
1181
|
+
},
|
|
1182
|
+
/**
|
|
1183
|
+
* Detects first nearest empty sortable to X and Y position using emptyInsertThreshold.
|
|
1184
|
+
* @param {Number} x X position
|
|
1185
|
+
* @param {Number} y Y position
|
|
1186
|
+
* @return {HTMLElement} Element of the first found nearest Sortable
|
|
1187
|
+
*/
|
|
1188
|
+
_detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) {
|
|
1189
|
+
var ret;
|
|
1190
|
+
sortables.some(function (sortable) {
|
|
1191
|
+
var threshold = sortable[expando].options.emptyInsertThreshold;
|
|
1192
|
+
if (!threshold || lastChild(sortable)) return;
|
|
1193
|
+
var rect = getRect(sortable),
|
|
1194
|
+
insideHorizontally = x >= rect.left - threshold && x <= rect.right + threshold,
|
|
1195
|
+
insideVertically = y >= rect.top - threshold && y <= rect.bottom + threshold;
|
|
1196
|
+
if (insideHorizontally && insideVertically) {
|
|
1197
|
+
return ret = sortable;
|
|
1198
|
+
}
|
|
1199
|
+
});
|
|
1200
|
+
return ret;
|
|
1201
|
+
},
|
|
1202
|
+
_prepareGroup = function _prepareGroup(options) {
|
|
1203
|
+
function toFn(value, pull) {
|
|
1204
|
+
return function (to, from, dragEl, evt) {
|
|
1205
|
+
var sameGroup = to.options.group.name && from.options.group.name && to.options.group.name === from.options.group.name;
|
|
1206
|
+
if (value == null && (pull || sameGroup)) {
|
|
1207
|
+
// Default pull value
|
|
1208
|
+
// Default pull and put value if same group
|
|
1209
|
+
return true;
|
|
1210
|
+
} else if (value == null || value === false) {
|
|
1211
|
+
return false;
|
|
1212
|
+
} else if (pull && value === 'clone') {
|
|
1213
|
+
return value;
|
|
1214
|
+
} else if (typeof value === 'function') {
|
|
1215
|
+
return toFn(value(to, from, dragEl, evt), pull)(to, from, dragEl, evt);
|
|
1216
|
+
} else {
|
|
1217
|
+
var otherGroup = (pull ? to : from).options.group.name;
|
|
1218
|
+
return value === true || typeof value === 'string' && value === otherGroup || value.join && value.indexOf(otherGroup) > -1;
|
|
1219
|
+
}
|
|
1220
|
+
};
|
|
1221
|
+
}
|
|
1222
|
+
var group = {};
|
|
1223
|
+
var originalGroup = options.group;
|
|
1224
|
+
if (!originalGroup || _typeof(originalGroup) != 'object') {
|
|
1225
|
+
originalGroup = {
|
|
1226
|
+
name: originalGroup
|
|
1227
|
+
};
|
|
1228
|
+
}
|
|
1229
|
+
group.name = originalGroup.name;
|
|
1230
|
+
group.checkPull = toFn(originalGroup.pull, true);
|
|
1231
|
+
group.checkPut = toFn(originalGroup.put);
|
|
1232
|
+
group.revertClone = originalGroup.revertClone;
|
|
1233
|
+
options.group = group;
|
|
1234
|
+
},
|
|
1235
|
+
_hideGhostForTarget = function _hideGhostForTarget() {
|
|
1236
|
+
if (!supportCssPointerEvents && ghostEl) {
|
|
1237
|
+
css(ghostEl, 'display', 'none');
|
|
1238
|
+
}
|
|
1239
|
+
},
|
|
1240
|
+
_unhideGhostForTarget = function _unhideGhostForTarget() {
|
|
1241
|
+
if (!supportCssPointerEvents && ghostEl) {
|
|
1242
|
+
css(ghostEl, 'display', '');
|
|
1243
|
+
}
|
|
1244
|
+
};
|
|
1245
|
+
|
|
1246
|
+
// #1184 fix - Prevent click event on fallback if dragged but item not changed position
|
|
1247
|
+
if (documentExists && !ChromeForAndroid) {
|
|
1248
|
+
document.addEventListener('click', function (evt) {
|
|
1249
|
+
if (ignoreNextClick) {
|
|
1250
|
+
evt.preventDefault();
|
|
1251
|
+
evt.stopPropagation && evt.stopPropagation();
|
|
1252
|
+
evt.stopImmediatePropagation && evt.stopImmediatePropagation();
|
|
1253
|
+
ignoreNextClick = false;
|
|
1254
|
+
return false;
|
|
1255
|
+
}
|
|
1256
|
+
}, true);
|
|
1257
|
+
}
|
|
1258
|
+
var nearestEmptyInsertDetectEvent = function nearestEmptyInsertDetectEvent(evt) {
|
|
1259
|
+
if (dragEl) {
|
|
1260
|
+
evt = evt.touches ? evt.touches[0] : evt;
|
|
1261
|
+
var nearest = _detectNearestEmptySortable(evt.clientX, evt.clientY);
|
|
1262
|
+
if (nearest) {
|
|
1263
|
+
// Create imitation event
|
|
1264
|
+
var event = {};
|
|
1265
|
+
for (var i in evt) {
|
|
1266
|
+
if (evt.hasOwnProperty(i)) {
|
|
1267
|
+
event[i] = evt[i];
|
|
1268
|
+
}
|
|
1269
|
+
}
|
|
1270
|
+
event.target = event.rootEl = nearest;
|
|
1271
|
+
event.preventDefault = void 0;
|
|
1272
|
+
event.stopPropagation = void 0;
|
|
1273
|
+
nearest[expando]._onDragOver(event);
|
|
1274
|
+
}
|
|
1275
|
+
}
|
|
1276
|
+
};
|
|
1277
|
+
var _checkOutsideTargetEl = function _checkOutsideTargetEl(evt) {
|
|
1278
|
+
if (dragEl) {
|
|
1279
|
+
dragEl.parentNode[expando]._isOutsideThisEl(evt.target);
|
|
1280
|
+
}
|
|
1281
|
+
};
|
|
1282
|
+
|
|
1283
|
+
/**
|
|
1284
|
+
* @class Sortable
|
|
1285
|
+
* @param {HTMLElement} el
|
|
1286
|
+
* @param {Object} [options]
|
|
1287
|
+
*/
|
|
1288
|
+
function Sortable(el, options) {
|
|
1289
|
+
if (!(el && el.nodeType && el.nodeType === 1)) {
|
|
1290
|
+
throw "Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(el));
|
|
1291
|
+
}
|
|
1292
|
+
this.el = el; // root element
|
|
1293
|
+
this.options = options = _extends({}, options);
|
|
1294
|
+
|
|
1295
|
+
// Export instance
|
|
1296
|
+
el[expando] = this;
|
|
1297
|
+
var defaults = {
|
|
1298
|
+
group: null,
|
|
1299
|
+
sort: true,
|
|
1300
|
+
disabled: false,
|
|
1301
|
+
store: null,
|
|
1302
|
+
handle: null,
|
|
1303
|
+
draggable: /^[uo]l$/i.test(el.nodeName) ? '>li' : '>*',
|
|
1304
|
+
swapThreshold: 1,
|
|
1305
|
+
// percentage; 0 <= x <= 1
|
|
1306
|
+
invertSwap: false,
|
|
1307
|
+
// invert always
|
|
1308
|
+
invertedSwapThreshold: null,
|
|
1309
|
+
// will be set to same as swapThreshold if default
|
|
1310
|
+
removeCloneOnHide: true,
|
|
1311
|
+
direction: function direction() {
|
|
1312
|
+
return _detectDirection(el, this.options);
|
|
1313
|
+
},
|
|
1314
|
+
ghostClass: 'sortable-ghost',
|
|
1315
|
+
chosenClass: 'sortable-chosen',
|
|
1316
|
+
dragClass: 'sortable-drag',
|
|
1317
|
+
ignore: 'a, img',
|
|
1318
|
+
filter: null,
|
|
1319
|
+
preventOnFilter: true,
|
|
1320
|
+
animation: 0,
|
|
1321
|
+
easing: null,
|
|
1322
|
+
setData: function setData(dataTransfer, dragEl) {
|
|
1323
|
+
dataTransfer.setData('Text', dragEl.textContent);
|
|
1324
|
+
},
|
|
1325
|
+
dropBubble: false,
|
|
1326
|
+
dragoverBubble: false,
|
|
1327
|
+
dataIdAttr: 'data-id',
|
|
1328
|
+
delay: 0,
|
|
1329
|
+
delayOnTouchOnly: false,
|
|
1330
|
+
touchStartThreshold: (Number.parseInt ? Number : window).parseInt(window.devicePixelRatio, 10) || 1,
|
|
1331
|
+
forceFallback: false,
|
|
1332
|
+
fallbackClass: 'sortable-fallback',
|
|
1333
|
+
fallbackOnBody: false,
|
|
1334
|
+
fallbackTolerance: 0,
|
|
1335
|
+
fallbackOffset: {
|
|
1336
|
+
x: 0,
|
|
1337
|
+
y: 0
|
|
1338
|
+
},
|
|
1339
|
+
// Disabled on Safari: #1571; Enabled on Safari IOS: #2244
|
|
1340
|
+
supportPointer: Sortable.supportPointer !== false && 'PointerEvent' in window && (!Safari || IOS),
|
|
1341
|
+
emptyInsertThreshold: 5
|
|
1342
|
+
};
|
|
1343
|
+
PluginManager.initializePlugins(this, el, defaults);
|
|
1344
|
+
|
|
1345
|
+
// Set default options
|
|
1346
|
+
for (var name in defaults) {
|
|
1347
|
+
!(name in options) && (options[name] = defaults[name]);
|
|
1348
|
+
}
|
|
1349
|
+
_prepareGroup(options);
|
|
1350
|
+
|
|
1351
|
+
// Bind all private methods
|
|
1352
|
+
for (var fn in this) {
|
|
1353
|
+
if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {
|
|
1354
|
+
this[fn] = this[fn].bind(this);
|
|
1355
|
+
}
|
|
1356
|
+
}
|
|
1357
|
+
|
|
1358
|
+
// Setup drag mode
|
|
1359
|
+
this.nativeDraggable = options.forceFallback ? false : supportDraggable;
|
|
1360
|
+
if (this.nativeDraggable) {
|
|
1361
|
+
// Touch start threshold cannot be greater than the native dragstart threshold
|
|
1362
|
+
this.options.touchStartThreshold = 1;
|
|
1363
|
+
}
|
|
1364
|
+
|
|
1365
|
+
// Bind events
|
|
1366
|
+
if (options.supportPointer) {
|
|
1367
|
+
on(el, 'pointerdown', this._onTapStart);
|
|
1368
|
+
} else {
|
|
1369
|
+
on(el, 'mousedown', this._onTapStart);
|
|
1370
|
+
on(el, 'touchstart', this._onTapStart);
|
|
1371
|
+
}
|
|
1372
|
+
if (this.nativeDraggable) {
|
|
1373
|
+
on(el, 'dragover', this);
|
|
1374
|
+
on(el, 'dragenter', this);
|
|
1375
|
+
}
|
|
1376
|
+
sortables.push(this.el);
|
|
1377
|
+
|
|
1378
|
+
// Restore sorting
|
|
1379
|
+
options.store && options.store.get && this.sort(options.store.get(this) || []);
|
|
1380
|
+
|
|
1381
|
+
// Add animation state manager
|
|
1382
|
+
_extends(this, AnimationStateManager());
|
|
1383
|
+
}
|
|
1384
|
+
Sortable.prototype = /** @lends Sortable.prototype */{
|
|
1385
|
+
constructor: Sortable,
|
|
1386
|
+
_isOutsideThisEl: function _isOutsideThisEl(target) {
|
|
1387
|
+
if (!this.el.contains(target) && target !== this.el) {
|
|
1388
|
+
lastTarget = null;
|
|
1389
|
+
}
|
|
1390
|
+
},
|
|
1391
|
+
_getDirection: function _getDirection(evt, target) {
|
|
1392
|
+
return typeof this.options.direction === 'function' ? this.options.direction.call(this, evt, target, dragEl) : this.options.direction;
|
|
1393
|
+
},
|
|
1394
|
+
_onTapStart: function _onTapStart( /** Event|TouchEvent */evt) {
|
|
1395
|
+
if (!evt.cancelable) return;
|
|
1396
|
+
var _this = this,
|
|
1397
|
+
el = this.el,
|
|
1398
|
+
options = this.options,
|
|
1399
|
+
preventOnFilter = options.preventOnFilter,
|
|
1400
|
+
type = evt.type,
|
|
1401
|
+
touch = evt.touches && evt.touches[0] || evt.pointerType && evt.pointerType === 'touch' && evt,
|
|
1402
|
+
target = (touch || evt).target,
|
|
1403
|
+
originalTarget = evt.target.shadowRoot && (evt.path && evt.path[0] || evt.composedPath && evt.composedPath()[0]) || target,
|
|
1404
|
+
filter = options.filter;
|
|
1405
|
+
_saveInputCheckedState(el);
|
|
1406
|
+
|
|
1407
|
+
// Don't trigger start event when an element is been dragged, otherwise the evt.oldindex always wrong when set option.group.
|
|
1408
|
+
if (dragEl) {
|
|
1409
|
+
return;
|
|
1410
|
+
}
|
|
1411
|
+
if (/mousedown|pointerdown/.test(type) && evt.button !== 0 || options.disabled) {
|
|
1412
|
+
return; // only left button and enabled
|
|
1413
|
+
}
|
|
1414
|
+
|
|
1415
|
+
// cancel dnd if original target is content editable
|
|
1416
|
+
if (originalTarget.isContentEditable) {
|
|
1417
|
+
return;
|
|
1418
|
+
}
|
|
1419
|
+
|
|
1420
|
+
// Safari ignores further event handling after mousedown
|
|
1421
|
+
if (!this.nativeDraggable && Safari && target && target.tagName.toUpperCase() === 'SELECT') {
|
|
1422
|
+
return;
|
|
1423
|
+
}
|
|
1424
|
+
target = closest(target, options.draggable, el, false);
|
|
1425
|
+
if (target && target.animated) {
|
|
1426
|
+
return;
|
|
1427
|
+
}
|
|
1428
|
+
if (lastDownEl === target) {
|
|
1429
|
+
// Ignoring duplicate `down`
|
|
1430
|
+
return;
|
|
1431
|
+
}
|
|
1432
|
+
|
|
1433
|
+
// Get the index of the dragged element within its parent
|
|
1434
|
+
oldIndex = index(target);
|
|
1435
|
+
oldDraggableIndex = index(target, options.draggable);
|
|
1436
|
+
|
|
1437
|
+
// Check filter
|
|
1438
|
+
if (typeof filter === 'function') {
|
|
1439
|
+
if (filter.call(this, evt, target, this)) {
|
|
1440
|
+
_dispatchEvent({
|
|
1441
|
+
sortable: _this,
|
|
1442
|
+
rootEl: originalTarget,
|
|
1443
|
+
name: 'filter',
|
|
1444
|
+
targetEl: target,
|
|
1445
|
+
toEl: el,
|
|
1446
|
+
fromEl: el
|
|
1447
|
+
});
|
|
1448
|
+
pluginEvent('filter', _this, {
|
|
1449
|
+
evt: evt
|
|
1450
|
+
});
|
|
1451
|
+
preventOnFilter && evt.preventDefault();
|
|
1452
|
+
return; // cancel dnd
|
|
1453
|
+
}
|
|
1454
|
+
} else if (filter) {
|
|
1455
|
+
filter = filter.split(',').some(function (criteria) {
|
|
1456
|
+
criteria = closest(originalTarget, criteria.trim(), el, false);
|
|
1457
|
+
if (criteria) {
|
|
1458
|
+
_dispatchEvent({
|
|
1459
|
+
sortable: _this,
|
|
1460
|
+
rootEl: criteria,
|
|
1461
|
+
name: 'filter',
|
|
1462
|
+
targetEl: target,
|
|
1463
|
+
fromEl: el,
|
|
1464
|
+
toEl: el
|
|
1465
|
+
});
|
|
1466
|
+
pluginEvent('filter', _this, {
|
|
1467
|
+
evt: evt
|
|
1468
|
+
});
|
|
1469
|
+
return true;
|
|
1470
|
+
}
|
|
1471
|
+
});
|
|
1472
|
+
if (filter) {
|
|
1473
|
+
preventOnFilter && evt.preventDefault();
|
|
1474
|
+
return; // cancel dnd
|
|
1475
|
+
}
|
|
1476
|
+
}
|
|
1477
|
+
if (options.handle && !closest(originalTarget, options.handle, el, false)) {
|
|
1478
|
+
return;
|
|
1479
|
+
}
|
|
1480
|
+
|
|
1481
|
+
// Prepare `dragstart`
|
|
1482
|
+
this._prepareDragStart(evt, touch, target);
|
|
1483
|
+
},
|
|
1484
|
+
_prepareDragStart: function _prepareDragStart( /** Event */evt, /** Touch */touch, /** HTMLElement */target) {
|
|
1485
|
+
var _this = this,
|
|
1486
|
+
el = _this.el,
|
|
1487
|
+
options = _this.options,
|
|
1488
|
+
ownerDocument = el.ownerDocument,
|
|
1489
|
+
dragStartFn;
|
|
1490
|
+
if (target && !dragEl && target.parentNode === el) {
|
|
1491
|
+
var dragRect = getRect(target);
|
|
1492
|
+
rootEl = el;
|
|
1493
|
+
dragEl = target;
|
|
1494
|
+
parentEl = dragEl.parentNode;
|
|
1495
|
+
nextEl = dragEl.nextSibling;
|
|
1496
|
+
lastDownEl = target;
|
|
1497
|
+
activeGroup = options.group;
|
|
1498
|
+
Sortable.dragged = dragEl;
|
|
1499
|
+
tapEvt = {
|
|
1500
|
+
target: dragEl,
|
|
1501
|
+
clientX: (touch || evt).clientX,
|
|
1502
|
+
clientY: (touch || evt).clientY
|
|
1503
|
+
};
|
|
1504
|
+
tapDistanceLeft = tapEvt.clientX - dragRect.left;
|
|
1505
|
+
tapDistanceTop = tapEvt.clientY - dragRect.top;
|
|
1506
|
+
this._lastX = (touch || evt).clientX;
|
|
1507
|
+
this._lastY = (touch || evt).clientY;
|
|
1508
|
+
dragEl.style['will-change'] = 'all';
|
|
1509
|
+
dragStartFn = function dragStartFn() {
|
|
1510
|
+
pluginEvent('delayEnded', _this, {
|
|
1511
|
+
evt: evt
|
|
1512
|
+
});
|
|
1513
|
+
if (Sortable.eventCanceled) {
|
|
1514
|
+
_this._onDrop();
|
|
1515
|
+
return;
|
|
1516
|
+
}
|
|
1517
|
+
// Delayed drag has been triggered
|
|
1518
|
+
// we can re-enable the events: touchmove/mousemove
|
|
1519
|
+
_this._disableDelayedDragEvents();
|
|
1520
|
+
if (!FireFox && _this.nativeDraggable) {
|
|
1521
|
+
dragEl.draggable = true;
|
|
1522
|
+
}
|
|
1523
|
+
|
|
1524
|
+
// Bind the events: dragstart/dragend
|
|
1525
|
+
_this._triggerDragStart(evt, touch);
|
|
1526
|
+
|
|
1527
|
+
// Drag start event
|
|
1528
|
+
_dispatchEvent({
|
|
1529
|
+
sortable: _this,
|
|
1530
|
+
name: 'choose',
|
|
1531
|
+
originalEvent: evt
|
|
1532
|
+
});
|
|
1533
|
+
|
|
1534
|
+
// Chosen item
|
|
1535
|
+
toggleClass(dragEl, options.chosenClass, true);
|
|
1536
|
+
};
|
|
1537
|
+
|
|
1538
|
+
// Disable "draggable"
|
|
1539
|
+
options.ignore.split(',').forEach(function (criteria) {
|
|
1540
|
+
find(dragEl, criteria.trim(), _disableDraggable);
|
|
1541
|
+
});
|
|
1542
|
+
on(ownerDocument, 'dragover', nearestEmptyInsertDetectEvent);
|
|
1543
|
+
on(ownerDocument, 'mousemove', nearestEmptyInsertDetectEvent);
|
|
1544
|
+
on(ownerDocument, 'touchmove', nearestEmptyInsertDetectEvent);
|
|
1545
|
+
if (options.supportPointer) {
|
|
1546
|
+
on(ownerDocument, 'pointerup', _this._onDrop);
|
|
1547
|
+
// Native D&D triggers pointercancel
|
|
1548
|
+
!this.nativeDraggable && on(ownerDocument, 'pointercancel', _this._onDrop);
|
|
1549
|
+
} else {
|
|
1550
|
+
on(ownerDocument, 'mouseup', _this._onDrop);
|
|
1551
|
+
on(ownerDocument, 'touchend', _this._onDrop);
|
|
1552
|
+
on(ownerDocument, 'touchcancel', _this._onDrop);
|
|
1553
|
+
}
|
|
1554
|
+
|
|
1555
|
+
// Make dragEl draggable (must be before delay for FireFox)
|
|
1556
|
+
if (FireFox && this.nativeDraggable) {
|
|
1557
|
+
this.options.touchStartThreshold = 4;
|
|
1558
|
+
dragEl.draggable = true;
|
|
1559
|
+
}
|
|
1560
|
+
pluginEvent('delayStart', this, {
|
|
1561
|
+
evt: evt
|
|
1562
|
+
});
|
|
1563
|
+
|
|
1564
|
+
// Delay is impossible for native DnD in Edge or IE
|
|
1565
|
+
if (options.delay && (!options.delayOnTouchOnly || touch) && (!this.nativeDraggable || !(Edge || IE11OrLess))) {
|
|
1566
|
+
if (Sortable.eventCanceled) {
|
|
1567
|
+
this._onDrop();
|
|
1568
|
+
return;
|
|
1569
|
+
}
|
|
1570
|
+
// If the user moves the pointer or let go the click or touch
|
|
1571
|
+
// before the delay has been reached:
|
|
1572
|
+
// disable the delayed drag
|
|
1573
|
+
if (options.supportPointer) {
|
|
1574
|
+
on(ownerDocument, 'pointerup', _this._disableDelayedDrag);
|
|
1575
|
+
on(ownerDocument, 'pointercancel', _this._disableDelayedDrag);
|
|
1576
|
+
} else {
|
|
1577
|
+
on(ownerDocument, 'mouseup', _this._disableDelayedDrag);
|
|
1578
|
+
on(ownerDocument, 'touchend', _this._disableDelayedDrag);
|
|
1579
|
+
on(ownerDocument, 'touchcancel', _this._disableDelayedDrag);
|
|
1580
|
+
}
|
|
1581
|
+
on(ownerDocument, 'mousemove', _this._delayedDragTouchMoveHandler);
|
|
1582
|
+
on(ownerDocument, 'touchmove', _this._delayedDragTouchMoveHandler);
|
|
1583
|
+
options.supportPointer && on(ownerDocument, 'pointermove', _this._delayedDragTouchMoveHandler);
|
|
1584
|
+
_this._dragStartTimer = setTimeout(dragStartFn, options.delay);
|
|
1585
|
+
} else {
|
|
1586
|
+
dragStartFn();
|
|
1587
|
+
}
|
|
1588
|
+
}
|
|
1589
|
+
},
|
|
1590
|
+
_delayedDragTouchMoveHandler: function _delayedDragTouchMoveHandler( /** TouchEvent|PointerEvent **/e) {
|
|
1591
|
+
var touch = e.touches ? e.touches[0] : e;
|
|
1592
|
+
if (Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) >= Math.floor(this.options.touchStartThreshold / (this.nativeDraggable && window.devicePixelRatio || 1))) {
|
|
1593
|
+
this._disableDelayedDrag();
|
|
1594
|
+
}
|
|
1595
|
+
},
|
|
1596
|
+
_disableDelayedDrag: function _disableDelayedDrag() {
|
|
1597
|
+
dragEl && _disableDraggable(dragEl);
|
|
1598
|
+
clearTimeout(this._dragStartTimer);
|
|
1599
|
+
this._disableDelayedDragEvents();
|
|
1600
|
+
},
|
|
1601
|
+
_disableDelayedDragEvents: function _disableDelayedDragEvents() {
|
|
1602
|
+
var ownerDocument = this.el.ownerDocument;
|
|
1603
|
+
off(ownerDocument, 'mouseup', this._disableDelayedDrag);
|
|
1604
|
+
off(ownerDocument, 'touchend', this._disableDelayedDrag);
|
|
1605
|
+
off(ownerDocument, 'touchcancel', this._disableDelayedDrag);
|
|
1606
|
+
off(ownerDocument, 'pointerup', this._disableDelayedDrag);
|
|
1607
|
+
off(ownerDocument, 'pointercancel', this._disableDelayedDrag);
|
|
1608
|
+
off(ownerDocument, 'mousemove', this._delayedDragTouchMoveHandler);
|
|
1609
|
+
off(ownerDocument, 'touchmove', this._delayedDragTouchMoveHandler);
|
|
1610
|
+
off(ownerDocument, 'pointermove', this._delayedDragTouchMoveHandler);
|
|
1611
|
+
},
|
|
1612
|
+
_triggerDragStart: function _triggerDragStart( /** Event */evt, /** Touch */touch) {
|
|
1613
|
+
touch = touch || evt.pointerType == 'touch' && evt;
|
|
1614
|
+
if (!this.nativeDraggable || touch) {
|
|
1615
|
+
if (this.options.supportPointer) {
|
|
1616
|
+
on(document, 'pointermove', this._onTouchMove);
|
|
1617
|
+
} else if (touch) {
|
|
1618
|
+
on(document, 'touchmove', this._onTouchMove);
|
|
1619
|
+
} else {
|
|
1620
|
+
on(document, 'mousemove', this._onTouchMove);
|
|
1621
|
+
}
|
|
1622
|
+
} else {
|
|
1623
|
+
on(dragEl, 'dragend', this);
|
|
1624
|
+
on(rootEl, 'dragstart', this._onDragStart);
|
|
1625
|
+
}
|
|
1626
|
+
try {
|
|
1627
|
+
if (document.selection) {
|
|
1628
|
+
_nextTick(function () {
|
|
1629
|
+
document.selection.empty();
|
|
1630
|
+
});
|
|
1631
|
+
} else {
|
|
1632
|
+
window.getSelection().removeAllRanges();
|
|
1633
|
+
}
|
|
1634
|
+
} catch (err) {}
|
|
1635
|
+
},
|
|
1636
|
+
_dragStarted: function _dragStarted(fallback, evt) {
|
|
1637
|
+
awaitingDragStarted = false;
|
|
1638
|
+
if (rootEl && dragEl) {
|
|
1639
|
+
pluginEvent('dragStarted', this, {
|
|
1640
|
+
evt: evt
|
|
1641
|
+
});
|
|
1642
|
+
if (this.nativeDraggable) {
|
|
1643
|
+
on(document, 'dragover', _checkOutsideTargetEl);
|
|
1644
|
+
}
|
|
1645
|
+
var options = this.options;
|
|
1646
|
+
|
|
1647
|
+
// Apply effect
|
|
1648
|
+
!fallback && toggleClass(dragEl, options.dragClass, false);
|
|
1649
|
+
toggleClass(dragEl, options.ghostClass, true);
|
|
1650
|
+
Sortable.active = this;
|
|
1651
|
+
fallback && this._appendGhost();
|
|
1652
|
+
|
|
1653
|
+
// Drag start event
|
|
1654
|
+
_dispatchEvent({
|
|
1655
|
+
sortable: this,
|
|
1656
|
+
name: 'start',
|
|
1657
|
+
originalEvent: evt
|
|
1658
|
+
});
|
|
1659
|
+
} else {
|
|
1660
|
+
this._nulling();
|
|
1661
|
+
}
|
|
1662
|
+
},
|
|
1663
|
+
_emulateDragOver: function _emulateDragOver() {
|
|
1664
|
+
if (touchEvt) {
|
|
1665
|
+
this._lastX = touchEvt.clientX;
|
|
1666
|
+
this._lastY = touchEvt.clientY;
|
|
1667
|
+
_hideGhostForTarget();
|
|
1668
|
+
var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY);
|
|
1669
|
+
var parent = target;
|
|
1670
|
+
while (target && target.shadowRoot) {
|
|
1671
|
+
target = target.shadowRoot.elementFromPoint(touchEvt.clientX, touchEvt.clientY);
|
|
1672
|
+
if (target === parent) break;
|
|
1673
|
+
parent = target;
|
|
1674
|
+
}
|
|
1675
|
+
dragEl.parentNode[expando]._isOutsideThisEl(target);
|
|
1676
|
+
if (parent) {
|
|
1677
|
+
do {
|
|
1678
|
+
if (parent[expando]) {
|
|
1679
|
+
var inserted = void 0;
|
|
1680
|
+
inserted = parent[expando]._onDragOver({
|
|
1681
|
+
clientX: touchEvt.clientX,
|
|
1682
|
+
clientY: touchEvt.clientY,
|
|
1683
|
+
target: target,
|
|
1684
|
+
rootEl: parent
|
|
1685
|
+
});
|
|
1686
|
+
if (inserted && !this.options.dragoverBubble) {
|
|
1687
|
+
break;
|
|
1688
|
+
}
|
|
1689
|
+
}
|
|
1690
|
+
target = parent; // store last element
|
|
1691
|
+
}
|
|
1692
|
+
/* jshint boss:true */ while (parent = getParentOrHost(parent));
|
|
1693
|
+
}
|
|
1694
|
+
_unhideGhostForTarget();
|
|
1695
|
+
}
|
|
1696
|
+
},
|
|
1697
|
+
_onTouchMove: function _onTouchMove( /**TouchEvent*/evt) {
|
|
1698
|
+
if (tapEvt) {
|
|
1699
|
+
var options = this.options,
|
|
1700
|
+
fallbackTolerance = options.fallbackTolerance,
|
|
1701
|
+
fallbackOffset = options.fallbackOffset,
|
|
1702
|
+
touch = evt.touches ? evt.touches[0] : evt,
|
|
1703
|
+
ghostMatrix = ghostEl && matrix(ghostEl, true),
|
|
1704
|
+
scaleX = ghostEl && ghostMatrix && ghostMatrix.a,
|
|
1705
|
+
scaleY = ghostEl && ghostMatrix && ghostMatrix.d,
|
|
1706
|
+
relativeScrollOffset = PositionGhostAbsolutely && ghostRelativeParent && getRelativeScrollOffset(ghostRelativeParent),
|
|
1707
|
+
dx = (touch.clientX - tapEvt.clientX + fallbackOffset.x) / (scaleX || 1) + (relativeScrollOffset ? relativeScrollOffset[0] - ghostRelativeParentInitialScroll[0] : 0) / (scaleX || 1),
|
|
1708
|
+
dy = (touch.clientY - tapEvt.clientY + fallbackOffset.y) / (scaleY || 1) + (relativeScrollOffset ? relativeScrollOffset[1] - ghostRelativeParentInitialScroll[1] : 0) / (scaleY || 1);
|
|
1709
|
+
|
|
1710
|
+
// only set the status to dragging, when we are actually dragging
|
|
1711
|
+
if (!Sortable.active && !awaitingDragStarted) {
|
|
1712
|
+
if (fallbackTolerance && Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) < fallbackTolerance) {
|
|
1713
|
+
return;
|
|
1714
|
+
}
|
|
1715
|
+
this._onDragStart(evt, true);
|
|
1716
|
+
}
|
|
1717
|
+
if (ghostEl) {
|
|
1718
|
+
if (ghostMatrix) {
|
|
1719
|
+
ghostMatrix.e += dx - (lastDx || 0);
|
|
1720
|
+
ghostMatrix.f += dy - (lastDy || 0);
|
|
1721
|
+
} else {
|
|
1722
|
+
ghostMatrix = {
|
|
1723
|
+
a: 1,
|
|
1724
|
+
b: 0,
|
|
1725
|
+
c: 0,
|
|
1726
|
+
d: 1,
|
|
1727
|
+
e: dx,
|
|
1728
|
+
f: dy
|
|
1729
|
+
};
|
|
1730
|
+
}
|
|
1731
|
+
var cssMatrix = "matrix(".concat(ghostMatrix.a, ",").concat(ghostMatrix.b, ",").concat(ghostMatrix.c, ",").concat(ghostMatrix.d, ",").concat(ghostMatrix.e, ",").concat(ghostMatrix.f, ")");
|
|
1732
|
+
css(ghostEl, 'webkitTransform', cssMatrix);
|
|
1733
|
+
css(ghostEl, 'mozTransform', cssMatrix);
|
|
1734
|
+
css(ghostEl, 'msTransform', cssMatrix);
|
|
1735
|
+
css(ghostEl, 'transform', cssMatrix);
|
|
1736
|
+
lastDx = dx;
|
|
1737
|
+
lastDy = dy;
|
|
1738
|
+
touchEvt = touch;
|
|
1739
|
+
}
|
|
1740
|
+
evt.cancelable && evt.preventDefault();
|
|
1741
|
+
}
|
|
1742
|
+
},
|
|
1743
|
+
_appendGhost: function _appendGhost() {
|
|
1744
|
+
// Bug if using scale(): https://stackoverflow.com/questions/2637058
|
|
1745
|
+
// Not being adjusted for
|
|
1746
|
+
if (!ghostEl) {
|
|
1747
|
+
var container = this.options.fallbackOnBody ? document.body : rootEl,
|
|
1748
|
+
rect = getRect(dragEl, true, PositionGhostAbsolutely, true, container),
|
|
1749
|
+
options = this.options;
|
|
1750
|
+
|
|
1751
|
+
// Position absolutely
|
|
1752
|
+
if (PositionGhostAbsolutely) {
|
|
1753
|
+
// Get relatively positioned parent
|
|
1754
|
+
ghostRelativeParent = container;
|
|
1755
|
+
while (css(ghostRelativeParent, 'position') === 'static' && css(ghostRelativeParent, 'transform') === 'none' && ghostRelativeParent !== document) {
|
|
1756
|
+
ghostRelativeParent = ghostRelativeParent.parentNode;
|
|
1757
|
+
}
|
|
1758
|
+
if (ghostRelativeParent !== document.body && ghostRelativeParent !== document.documentElement) {
|
|
1759
|
+
if (ghostRelativeParent === document) ghostRelativeParent = getWindowScrollingElement();
|
|
1760
|
+
rect.top += ghostRelativeParent.scrollTop;
|
|
1761
|
+
rect.left += ghostRelativeParent.scrollLeft;
|
|
1762
|
+
} else {
|
|
1763
|
+
ghostRelativeParent = getWindowScrollingElement();
|
|
1764
|
+
}
|
|
1765
|
+
ghostRelativeParentInitialScroll = getRelativeScrollOffset(ghostRelativeParent);
|
|
1766
|
+
}
|
|
1767
|
+
ghostEl = dragEl.cloneNode(true);
|
|
1768
|
+
toggleClass(ghostEl, options.ghostClass, false);
|
|
1769
|
+
toggleClass(ghostEl, options.fallbackClass, true);
|
|
1770
|
+
toggleClass(ghostEl, options.dragClass, true);
|
|
1771
|
+
css(ghostEl, 'transition', '');
|
|
1772
|
+
css(ghostEl, 'transform', '');
|
|
1773
|
+
css(ghostEl, 'box-sizing', 'border-box');
|
|
1774
|
+
css(ghostEl, 'margin', 0);
|
|
1775
|
+
css(ghostEl, 'top', rect.top);
|
|
1776
|
+
css(ghostEl, 'left', rect.left);
|
|
1777
|
+
css(ghostEl, 'width', rect.width);
|
|
1778
|
+
css(ghostEl, 'height', rect.height);
|
|
1779
|
+
css(ghostEl, 'opacity', '0.8');
|
|
1780
|
+
css(ghostEl, 'position', PositionGhostAbsolutely ? 'absolute' : 'fixed');
|
|
1781
|
+
css(ghostEl, 'zIndex', '100000');
|
|
1782
|
+
css(ghostEl, 'pointerEvents', 'none');
|
|
1783
|
+
Sortable.ghost = ghostEl;
|
|
1784
|
+
container.appendChild(ghostEl);
|
|
1785
|
+
|
|
1786
|
+
// Set transform-origin
|
|
1787
|
+
css(ghostEl, 'transform-origin', tapDistanceLeft / parseInt(ghostEl.style.width) * 100 + '% ' + tapDistanceTop / parseInt(ghostEl.style.height) * 100 + '%');
|
|
1788
|
+
}
|
|
1789
|
+
},
|
|
1790
|
+
_onDragStart: function _onDragStart( /**Event*/evt, /**boolean*/fallback) {
|
|
1791
|
+
var _this = this;
|
|
1792
|
+
var dataTransfer = evt.dataTransfer;
|
|
1793
|
+
var options = _this.options;
|
|
1794
|
+
pluginEvent('dragStart', this, {
|
|
1795
|
+
evt: evt
|
|
1796
|
+
});
|
|
1797
|
+
if (Sortable.eventCanceled) {
|
|
1798
|
+
this._onDrop();
|
|
1799
|
+
return;
|
|
1800
|
+
}
|
|
1801
|
+
pluginEvent('setupClone', this);
|
|
1802
|
+
if (!Sortable.eventCanceled) {
|
|
1803
|
+
cloneEl = clone(dragEl);
|
|
1804
|
+
cloneEl.removeAttribute("id");
|
|
1805
|
+
cloneEl.draggable = false;
|
|
1806
|
+
cloneEl.style['will-change'] = '';
|
|
1807
|
+
this._hideClone();
|
|
1808
|
+
toggleClass(cloneEl, this.options.chosenClass, false);
|
|
1809
|
+
Sortable.clone = cloneEl;
|
|
1810
|
+
}
|
|
1811
|
+
|
|
1812
|
+
// #1143: IFrame support workaround
|
|
1813
|
+
_this.cloneId = _nextTick(function () {
|
|
1814
|
+
pluginEvent('clone', _this);
|
|
1815
|
+
if (Sortable.eventCanceled) return;
|
|
1816
|
+
if (!_this.options.removeCloneOnHide) {
|
|
1817
|
+
rootEl.insertBefore(cloneEl, dragEl);
|
|
1818
|
+
}
|
|
1819
|
+
_this._hideClone();
|
|
1820
|
+
_dispatchEvent({
|
|
1821
|
+
sortable: _this,
|
|
1822
|
+
name: 'clone'
|
|
1823
|
+
});
|
|
1824
|
+
});
|
|
1825
|
+
!fallback && toggleClass(dragEl, options.dragClass, true);
|
|
1826
|
+
|
|
1827
|
+
// Set proper drop events
|
|
1828
|
+
if (fallback) {
|
|
1829
|
+
ignoreNextClick = true;
|
|
1830
|
+
_this._loopId = setInterval(_this._emulateDragOver, 50);
|
|
1831
|
+
} else {
|
|
1832
|
+
// Undo what was set in _prepareDragStart before drag started
|
|
1833
|
+
off(document, 'mouseup', _this._onDrop);
|
|
1834
|
+
off(document, 'touchend', _this._onDrop);
|
|
1835
|
+
off(document, 'touchcancel', _this._onDrop);
|
|
1836
|
+
if (dataTransfer) {
|
|
1837
|
+
dataTransfer.effectAllowed = 'move';
|
|
1838
|
+
options.setData && options.setData.call(_this, dataTransfer, dragEl);
|
|
1839
|
+
}
|
|
1840
|
+
on(document, 'drop', _this);
|
|
1841
|
+
|
|
1842
|
+
// #1276 fix:
|
|
1843
|
+
css(dragEl, 'transform', 'translateZ(0)');
|
|
1844
|
+
}
|
|
1845
|
+
awaitingDragStarted = true;
|
|
1846
|
+
_this._dragStartId = _nextTick(_this._dragStarted.bind(_this, fallback, evt));
|
|
1847
|
+
on(document, 'selectstart', _this);
|
|
1848
|
+
moved = true;
|
|
1849
|
+
window.getSelection().removeAllRanges();
|
|
1850
|
+
if (Safari) {
|
|
1851
|
+
css(document.body, 'user-select', 'none');
|
|
1852
|
+
}
|
|
1853
|
+
},
|
|
1854
|
+
// Returns true - if no further action is needed (either inserted or another condition)
|
|
1855
|
+
_onDragOver: function _onDragOver( /**Event*/evt) {
|
|
1856
|
+
var el = this.el,
|
|
1857
|
+
target = evt.target,
|
|
1858
|
+
dragRect,
|
|
1859
|
+
targetRect,
|
|
1860
|
+
revert,
|
|
1861
|
+
options = this.options,
|
|
1862
|
+
group = options.group,
|
|
1863
|
+
activeSortable = Sortable.active,
|
|
1864
|
+
isOwner = activeGroup === group,
|
|
1865
|
+
canSort = options.sort,
|
|
1866
|
+
fromSortable = putSortable || activeSortable,
|
|
1867
|
+
vertical,
|
|
1868
|
+
_this = this,
|
|
1869
|
+
completedFired = false;
|
|
1870
|
+
if (_silent) return;
|
|
1871
|
+
function dragOverEvent(name, extra) {
|
|
1872
|
+
pluginEvent(name, _this, _objectSpread2({
|
|
1873
|
+
evt: evt,
|
|
1874
|
+
isOwner: isOwner,
|
|
1875
|
+
axis: vertical ? 'vertical' : 'horizontal',
|
|
1876
|
+
revert: revert,
|
|
1877
|
+
dragRect: dragRect,
|
|
1878
|
+
targetRect: targetRect,
|
|
1879
|
+
canSort: canSort,
|
|
1880
|
+
fromSortable: fromSortable,
|
|
1881
|
+
target: target,
|
|
1882
|
+
completed: completed,
|
|
1883
|
+
onMove: function onMove(target, after) {
|
|
1884
|
+
return _onMove(rootEl, el, dragEl, dragRect, target, getRect(target), evt, after);
|
|
1885
|
+
},
|
|
1886
|
+
changed: changed
|
|
1887
|
+
}, extra));
|
|
1888
|
+
}
|
|
1889
|
+
|
|
1890
|
+
// Capture animation state
|
|
1891
|
+
function capture() {
|
|
1892
|
+
dragOverEvent('dragOverAnimationCapture');
|
|
1893
|
+
_this.captureAnimationState();
|
|
1894
|
+
if (_this !== fromSortable) {
|
|
1895
|
+
fromSortable.captureAnimationState();
|
|
1896
|
+
}
|
|
1897
|
+
}
|
|
1898
|
+
|
|
1899
|
+
// Return invocation when dragEl is inserted (or completed)
|
|
1900
|
+
function completed(insertion) {
|
|
1901
|
+
dragOverEvent('dragOverCompleted', {
|
|
1902
|
+
insertion: insertion
|
|
1903
|
+
});
|
|
1904
|
+
if (insertion) {
|
|
1905
|
+
// Clones must be hidden before folding animation to capture dragRectAbsolute properly
|
|
1906
|
+
if (isOwner) {
|
|
1907
|
+
activeSortable._hideClone();
|
|
1908
|
+
} else {
|
|
1909
|
+
activeSortable._showClone(_this);
|
|
1910
|
+
}
|
|
1911
|
+
if (_this !== fromSortable) {
|
|
1912
|
+
// Set ghost class to new sortable's ghost class
|
|
1913
|
+
toggleClass(dragEl, putSortable ? putSortable.options.ghostClass : activeSortable.options.ghostClass, false);
|
|
1914
|
+
toggleClass(dragEl, options.ghostClass, true);
|
|
1915
|
+
}
|
|
1916
|
+
if (putSortable !== _this && _this !== Sortable.active) {
|
|
1917
|
+
putSortable = _this;
|
|
1918
|
+
} else if (_this === Sortable.active && putSortable) {
|
|
1919
|
+
putSortable = null;
|
|
1920
|
+
}
|
|
1921
|
+
|
|
1922
|
+
// Animation
|
|
1923
|
+
if (fromSortable === _this) {
|
|
1924
|
+
_this._ignoreWhileAnimating = target;
|
|
1925
|
+
}
|
|
1926
|
+
_this.animateAll(function () {
|
|
1927
|
+
dragOverEvent('dragOverAnimationComplete');
|
|
1928
|
+
_this._ignoreWhileAnimating = null;
|
|
1929
|
+
});
|
|
1930
|
+
if (_this !== fromSortable) {
|
|
1931
|
+
fromSortable.animateAll();
|
|
1932
|
+
fromSortable._ignoreWhileAnimating = null;
|
|
1933
|
+
}
|
|
1934
|
+
}
|
|
1935
|
+
|
|
1936
|
+
// Null lastTarget if it is not inside a previously swapped element
|
|
1937
|
+
if (target === dragEl && !dragEl.animated || target === el && !target.animated) {
|
|
1938
|
+
lastTarget = null;
|
|
1939
|
+
}
|
|
1940
|
+
|
|
1941
|
+
// no bubbling and not fallback
|
|
1942
|
+
if (!options.dragoverBubble && !evt.rootEl && target !== document) {
|
|
1943
|
+
dragEl.parentNode[expando]._isOutsideThisEl(evt.target);
|
|
1944
|
+
|
|
1945
|
+
// Do not detect for empty insert if already inserted
|
|
1946
|
+
!insertion && nearestEmptyInsertDetectEvent(evt);
|
|
1947
|
+
}
|
|
1948
|
+
!options.dragoverBubble && evt.stopPropagation && evt.stopPropagation();
|
|
1949
|
+
return completedFired = true;
|
|
1950
|
+
}
|
|
1951
|
+
|
|
1952
|
+
// Call when dragEl has been inserted
|
|
1953
|
+
function changed() {
|
|
1954
|
+
newIndex = index(dragEl);
|
|
1955
|
+
newDraggableIndex = index(dragEl, options.draggable);
|
|
1956
|
+
_dispatchEvent({
|
|
1957
|
+
sortable: _this,
|
|
1958
|
+
name: 'change',
|
|
1959
|
+
toEl: el,
|
|
1960
|
+
newIndex: newIndex,
|
|
1961
|
+
newDraggableIndex: newDraggableIndex,
|
|
1962
|
+
originalEvent: evt
|
|
1963
|
+
});
|
|
1964
|
+
}
|
|
1965
|
+
if (evt.preventDefault !== void 0) {
|
|
1966
|
+
evt.cancelable && evt.preventDefault();
|
|
1967
|
+
}
|
|
1968
|
+
target = closest(target, options.draggable, el, true);
|
|
1969
|
+
dragOverEvent('dragOver');
|
|
1970
|
+
if (Sortable.eventCanceled) return completedFired;
|
|
1971
|
+
if (dragEl.contains(evt.target) || target.animated && target.animatingX && target.animatingY || _this._ignoreWhileAnimating === target) {
|
|
1972
|
+
return completed(false);
|
|
1973
|
+
}
|
|
1974
|
+
ignoreNextClick = false;
|
|
1975
|
+
if (activeSortable && !options.disabled && (isOwner ? canSort || (revert = parentEl !== rootEl) // Reverting item into the original list
|
|
1976
|
+
: putSortable === this || (this.lastPutMode = activeGroup.checkPull(this, activeSortable, dragEl, evt)) && group.checkPut(this, activeSortable, dragEl, evt))) {
|
|
1977
|
+
vertical = this._getDirection(evt, target) === 'vertical';
|
|
1978
|
+
dragRect = getRect(dragEl);
|
|
1979
|
+
dragOverEvent('dragOverValid');
|
|
1980
|
+
if (Sortable.eventCanceled) return completedFired;
|
|
1981
|
+
if (revert) {
|
|
1982
|
+
parentEl = rootEl; // actualization
|
|
1983
|
+
capture();
|
|
1984
|
+
this._hideClone();
|
|
1985
|
+
dragOverEvent('revert');
|
|
1986
|
+
if (!Sortable.eventCanceled) {
|
|
1987
|
+
if (nextEl) {
|
|
1988
|
+
rootEl.insertBefore(dragEl, nextEl);
|
|
1989
|
+
} else {
|
|
1990
|
+
rootEl.appendChild(dragEl);
|
|
1991
|
+
}
|
|
1992
|
+
}
|
|
1993
|
+
return completed(true);
|
|
1994
|
+
}
|
|
1995
|
+
var elLastChild = lastChild(el, options.draggable);
|
|
1996
|
+
if (!elLastChild || _ghostIsLast(evt, vertical, this) && !elLastChild.animated) {
|
|
1997
|
+
// Insert to end of list
|
|
1998
|
+
|
|
1999
|
+
// If already at end of list: Do not insert
|
|
2000
|
+
if (elLastChild === dragEl) {
|
|
2001
|
+
return completed(false);
|
|
2002
|
+
}
|
|
2003
|
+
|
|
2004
|
+
// if there is a last element, it is the target
|
|
2005
|
+
if (elLastChild && el === evt.target) {
|
|
2006
|
+
target = elLastChild;
|
|
2007
|
+
}
|
|
2008
|
+
if (target) {
|
|
2009
|
+
targetRect = getRect(target);
|
|
2010
|
+
}
|
|
2011
|
+
if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, !!target) !== false) {
|
|
2012
|
+
capture();
|
|
2013
|
+
if (elLastChild && elLastChild.nextSibling) {
|
|
2014
|
+
// the last draggable element is not the last node
|
|
2015
|
+
el.insertBefore(dragEl, elLastChild.nextSibling);
|
|
2016
|
+
} else {
|
|
2017
|
+
el.appendChild(dragEl);
|
|
2018
|
+
}
|
|
2019
|
+
parentEl = el; // actualization
|
|
2020
|
+
|
|
2021
|
+
changed();
|
|
2022
|
+
return completed(true);
|
|
2023
|
+
}
|
|
2024
|
+
} else if (elLastChild && _ghostIsFirst(evt, vertical, this)) {
|
|
2025
|
+
// Insert to start of list
|
|
2026
|
+
var firstChild = getChild(el, 0, options, true);
|
|
2027
|
+
if (firstChild === dragEl) {
|
|
2028
|
+
return completed(false);
|
|
2029
|
+
}
|
|
2030
|
+
target = firstChild;
|
|
2031
|
+
targetRect = getRect(target);
|
|
2032
|
+
if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, false) !== false) {
|
|
2033
|
+
capture();
|
|
2034
|
+
el.insertBefore(dragEl, firstChild);
|
|
2035
|
+
parentEl = el; // actualization
|
|
2036
|
+
|
|
2037
|
+
changed();
|
|
2038
|
+
return completed(true);
|
|
2039
|
+
}
|
|
2040
|
+
} else if (target.parentNode === el) {
|
|
2041
|
+
targetRect = getRect(target);
|
|
2042
|
+
var direction = 0,
|
|
2043
|
+
targetBeforeFirstSwap,
|
|
2044
|
+
differentLevel = dragEl.parentNode !== el,
|
|
2045
|
+
differentRowCol = !_dragElInRowColumn(dragEl.animated && dragEl.toRect || dragRect, target.animated && target.toRect || targetRect, vertical),
|
|
2046
|
+
side1 = vertical ? 'top' : 'left',
|
|
2047
|
+
scrolledPastTop = isScrolledPast(target, 'top', 'top') || isScrolledPast(dragEl, 'top', 'top'),
|
|
2048
|
+
scrollBefore = scrolledPastTop ? scrolledPastTop.scrollTop : void 0;
|
|
2049
|
+
if (lastTarget !== target) {
|
|
2050
|
+
targetBeforeFirstSwap = targetRect[side1];
|
|
2051
|
+
pastFirstInvertThresh = false;
|
|
2052
|
+
isCircumstantialInvert = !differentRowCol && options.invertSwap || differentLevel;
|
|
2053
|
+
}
|
|
2054
|
+
direction = _getSwapDirection(evt, target, targetRect, vertical, differentRowCol ? 1 : options.swapThreshold, options.invertedSwapThreshold == null ? options.swapThreshold : options.invertedSwapThreshold, isCircumstantialInvert, lastTarget === target);
|
|
2055
|
+
var sibling;
|
|
2056
|
+
if (direction !== 0) {
|
|
2057
|
+
// Check if target is beside dragEl in respective direction (ignoring hidden elements)
|
|
2058
|
+
var dragIndex = index(dragEl);
|
|
2059
|
+
do {
|
|
2060
|
+
dragIndex -= direction;
|
|
2061
|
+
sibling = parentEl.children[dragIndex];
|
|
2062
|
+
} while (sibling && (css(sibling, 'display') === 'none' || sibling === ghostEl));
|
|
2063
|
+
}
|
|
2064
|
+
// If dragEl is already beside target: Do not insert
|
|
2065
|
+
if (direction === 0 || sibling === target) {
|
|
2066
|
+
return completed(false);
|
|
2067
|
+
}
|
|
2068
|
+
lastTarget = target;
|
|
2069
|
+
lastDirection = direction;
|
|
2070
|
+
var nextSibling = target.nextElementSibling,
|
|
2071
|
+
after = false;
|
|
2072
|
+
after = direction === 1;
|
|
2073
|
+
var moveVector = _onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, after);
|
|
2074
|
+
if (moveVector !== false) {
|
|
2075
|
+
if (moveVector === 1 || moveVector === -1) {
|
|
2076
|
+
after = moveVector === 1;
|
|
2077
|
+
}
|
|
2078
|
+
_silent = true;
|
|
2079
|
+
setTimeout(_unsilent, 30);
|
|
2080
|
+
capture();
|
|
2081
|
+
if (after && !nextSibling) {
|
|
2082
|
+
el.appendChild(dragEl);
|
|
2083
|
+
} else {
|
|
2084
|
+
target.parentNode.insertBefore(dragEl, after ? nextSibling : target);
|
|
2085
|
+
}
|
|
2086
|
+
|
|
2087
|
+
// Undo chrome's scroll adjustment (has no effect on other browsers)
|
|
2088
|
+
if (scrolledPastTop) {
|
|
2089
|
+
scrollBy(scrolledPastTop, 0, scrollBefore - scrolledPastTop.scrollTop);
|
|
2090
|
+
}
|
|
2091
|
+
parentEl = dragEl.parentNode; // actualization
|
|
2092
|
+
|
|
2093
|
+
// must be done before animation
|
|
2094
|
+
if (targetBeforeFirstSwap !== undefined && !isCircumstantialInvert) {
|
|
2095
|
+
targetMoveDistance = Math.abs(targetBeforeFirstSwap - getRect(target)[side1]);
|
|
2096
|
+
}
|
|
2097
|
+
changed();
|
|
2098
|
+
return completed(true);
|
|
2099
|
+
}
|
|
2100
|
+
}
|
|
2101
|
+
if (el.contains(dragEl)) {
|
|
2102
|
+
return completed(false);
|
|
2103
|
+
}
|
|
2104
|
+
}
|
|
2105
|
+
return false;
|
|
2106
|
+
},
|
|
2107
|
+
_ignoreWhileAnimating: null,
|
|
2108
|
+
_offMoveEvents: function _offMoveEvents() {
|
|
2109
|
+
off(document, 'mousemove', this._onTouchMove);
|
|
2110
|
+
off(document, 'touchmove', this._onTouchMove);
|
|
2111
|
+
off(document, 'pointermove', this._onTouchMove);
|
|
2112
|
+
off(document, 'dragover', nearestEmptyInsertDetectEvent);
|
|
2113
|
+
off(document, 'mousemove', nearestEmptyInsertDetectEvent);
|
|
2114
|
+
off(document, 'touchmove', nearestEmptyInsertDetectEvent);
|
|
2115
|
+
},
|
|
2116
|
+
_offUpEvents: function _offUpEvents() {
|
|
2117
|
+
var ownerDocument = this.el.ownerDocument;
|
|
2118
|
+
off(ownerDocument, 'mouseup', this._onDrop);
|
|
2119
|
+
off(ownerDocument, 'touchend', this._onDrop);
|
|
2120
|
+
off(ownerDocument, 'pointerup', this._onDrop);
|
|
2121
|
+
off(ownerDocument, 'pointercancel', this._onDrop);
|
|
2122
|
+
off(ownerDocument, 'touchcancel', this._onDrop);
|
|
2123
|
+
off(document, 'selectstart', this);
|
|
2124
|
+
},
|
|
2125
|
+
_onDrop: function _onDrop( /**Event*/evt) {
|
|
2126
|
+
var el = this.el,
|
|
2127
|
+
options = this.options;
|
|
2128
|
+
|
|
2129
|
+
// Get the index of the dragged element within its parent
|
|
2130
|
+
newIndex = index(dragEl);
|
|
2131
|
+
newDraggableIndex = index(dragEl, options.draggable);
|
|
2132
|
+
pluginEvent('drop', this, {
|
|
2133
|
+
evt: evt
|
|
2134
|
+
});
|
|
2135
|
+
parentEl = dragEl && dragEl.parentNode;
|
|
2136
|
+
|
|
2137
|
+
// Get again after plugin event
|
|
2138
|
+
newIndex = index(dragEl);
|
|
2139
|
+
newDraggableIndex = index(dragEl, options.draggable);
|
|
2140
|
+
if (Sortable.eventCanceled) {
|
|
2141
|
+
this._nulling();
|
|
2142
|
+
return;
|
|
2143
|
+
}
|
|
2144
|
+
awaitingDragStarted = false;
|
|
2145
|
+
isCircumstantialInvert = false;
|
|
2146
|
+
pastFirstInvertThresh = false;
|
|
2147
|
+
clearInterval(this._loopId);
|
|
2148
|
+
clearTimeout(this._dragStartTimer);
|
|
2149
|
+
_cancelNextTick(this.cloneId);
|
|
2150
|
+
_cancelNextTick(this._dragStartId);
|
|
2151
|
+
|
|
2152
|
+
// Unbind events
|
|
2153
|
+
if (this.nativeDraggable) {
|
|
2154
|
+
off(document, 'drop', this);
|
|
2155
|
+
off(el, 'dragstart', this._onDragStart);
|
|
2156
|
+
}
|
|
2157
|
+
this._offMoveEvents();
|
|
2158
|
+
this._offUpEvents();
|
|
2159
|
+
if (Safari) {
|
|
2160
|
+
css(document.body, 'user-select', '');
|
|
2161
|
+
}
|
|
2162
|
+
css(dragEl, 'transform', '');
|
|
2163
|
+
if (evt) {
|
|
2164
|
+
if (moved) {
|
|
2165
|
+
evt.cancelable && evt.preventDefault();
|
|
2166
|
+
!options.dropBubble && evt.stopPropagation();
|
|
2167
|
+
}
|
|
2168
|
+
ghostEl && ghostEl.parentNode && ghostEl.parentNode.removeChild(ghostEl);
|
|
2169
|
+
if (rootEl === parentEl || putSortable && putSortable.lastPutMode !== 'clone') {
|
|
2170
|
+
// Remove clone(s)
|
|
2171
|
+
cloneEl && cloneEl.parentNode && cloneEl.parentNode.removeChild(cloneEl);
|
|
2172
|
+
}
|
|
2173
|
+
if (dragEl) {
|
|
2174
|
+
if (this.nativeDraggable) {
|
|
2175
|
+
off(dragEl, 'dragend', this);
|
|
2176
|
+
}
|
|
2177
|
+
_disableDraggable(dragEl);
|
|
2178
|
+
dragEl.style['will-change'] = '';
|
|
2179
|
+
|
|
2180
|
+
// Remove classes
|
|
2181
|
+
// ghostClass is added in dragStarted
|
|
2182
|
+
if (moved && !awaitingDragStarted) {
|
|
2183
|
+
toggleClass(dragEl, putSortable ? putSortable.options.ghostClass : this.options.ghostClass, false);
|
|
2184
|
+
}
|
|
2185
|
+
toggleClass(dragEl, this.options.chosenClass, false);
|
|
2186
|
+
|
|
2187
|
+
// Drag stop event
|
|
2188
|
+
_dispatchEvent({
|
|
2189
|
+
sortable: this,
|
|
2190
|
+
name: 'unchoose',
|
|
2191
|
+
toEl: parentEl,
|
|
2192
|
+
newIndex: null,
|
|
2193
|
+
newDraggableIndex: null,
|
|
2194
|
+
originalEvent: evt
|
|
2195
|
+
});
|
|
2196
|
+
if (rootEl !== parentEl) {
|
|
2197
|
+
if (newIndex >= 0) {
|
|
2198
|
+
// Add event
|
|
2199
|
+
_dispatchEvent({
|
|
2200
|
+
rootEl: parentEl,
|
|
2201
|
+
name: 'add',
|
|
2202
|
+
toEl: parentEl,
|
|
2203
|
+
fromEl: rootEl,
|
|
2204
|
+
originalEvent: evt
|
|
2205
|
+
});
|
|
2206
|
+
|
|
2207
|
+
// Remove event
|
|
2208
|
+
_dispatchEvent({
|
|
2209
|
+
sortable: this,
|
|
2210
|
+
name: 'remove',
|
|
2211
|
+
toEl: parentEl,
|
|
2212
|
+
originalEvent: evt
|
|
2213
|
+
});
|
|
2214
|
+
|
|
2215
|
+
// drag from one list and drop into another
|
|
2216
|
+
_dispatchEvent({
|
|
2217
|
+
rootEl: parentEl,
|
|
2218
|
+
name: 'sort',
|
|
2219
|
+
toEl: parentEl,
|
|
2220
|
+
fromEl: rootEl,
|
|
2221
|
+
originalEvent: evt
|
|
2222
|
+
});
|
|
2223
|
+
_dispatchEvent({
|
|
2224
|
+
sortable: this,
|
|
2225
|
+
name: 'sort',
|
|
2226
|
+
toEl: parentEl,
|
|
2227
|
+
originalEvent: evt
|
|
2228
|
+
});
|
|
2229
|
+
}
|
|
2230
|
+
putSortable && putSortable.save();
|
|
2231
|
+
} else {
|
|
2232
|
+
if (newIndex !== oldIndex) {
|
|
2233
|
+
if (newIndex >= 0) {
|
|
2234
|
+
// drag & drop within the same list
|
|
2235
|
+
_dispatchEvent({
|
|
2236
|
+
sortable: this,
|
|
2237
|
+
name: 'update',
|
|
2238
|
+
toEl: parentEl,
|
|
2239
|
+
originalEvent: evt
|
|
2240
|
+
});
|
|
2241
|
+
_dispatchEvent({
|
|
2242
|
+
sortable: this,
|
|
2243
|
+
name: 'sort',
|
|
2244
|
+
toEl: parentEl,
|
|
2245
|
+
originalEvent: evt
|
|
2246
|
+
});
|
|
2247
|
+
}
|
|
2248
|
+
}
|
|
2249
|
+
}
|
|
2250
|
+
if (Sortable.active) {
|
|
2251
|
+
/* jshint eqnull:true */
|
|
2252
|
+
if (newIndex == null || newIndex === -1) {
|
|
2253
|
+
newIndex = oldIndex;
|
|
2254
|
+
newDraggableIndex = oldDraggableIndex;
|
|
2255
|
+
}
|
|
2256
|
+
_dispatchEvent({
|
|
2257
|
+
sortable: this,
|
|
2258
|
+
name: 'end',
|
|
2259
|
+
toEl: parentEl,
|
|
2260
|
+
originalEvent: evt
|
|
2261
|
+
});
|
|
2262
|
+
|
|
2263
|
+
// Save sorting
|
|
2264
|
+
this.save();
|
|
2265
|
+
}
|
|
2266
|
+
}
|
|
2267
|
+
}
|
|
2268
|
+
this._nulling();
|
|
2269
|
+
},
|
|
2270
|
+
_nulling: function _nulling() {
|
|
2271
|
+
pluginEvent('nulling', this);
|
|
2272
|
+
rootEl = dragEl = parentEl = ghostEl = nextEl = cloneEl = lastDownEl = cloneHidden = tapEvt = touchEvt = moved = newIndex = newDraggableIndex = oldIndex = oldDraggableIndex = lastTarget = lastDirection = putSortable = activeGroup = Sortable.dragged = Sortable.ghost = Sortable.clone = Sortable.active = null;
|
|
2273
|
+
var el = this.el;
|
|
2274
|
+
savedInputChecked.forEach(function (checkEl) {
|
|
2275
|
+
if (el.contains(checkEl)) {
|
|
2276
|
+
checkEl.checked = true;
|
|
2277
|
+
}
|
|
2278
|
+
});
|
|
2279
|
+
savedInputChecked.length = lastDx = lastDy = 0;
|
|
2280
|
+
},
|
|
2281
|
+
handleEvent: function handleEvent( /**Event*/evt) {
|
|
2282
|
+
switch (evt.type) {
|
|
2283
|
+
case 'drop':
|
|
2284
|
+
case 'dragend':
|
|
2285
|
+
this._onDrop(evt);
|
|
2286
|
+
break;
|
|
2287
|
+
case 'dragenter':
|
|
2288
|
+
case 'dragover':
|
|
2289
|
+
if (dragEl) {
|
|
2290
|
+
this._onDragOver(evt);
|
|
2291
|
+
_globalDragOver(evt);
|
|
2292
|
+
}
|
|
2293
|
+
break;
|
|
2294
|
+
case 'selectstart':
|
|
2295
|
+
evt.preventDefault();
|
|
2296
|
+
break;
|
|
2297
|
+
}
|
|
2298
|
+
},
|
|
2299
|
+
/**
|
|
2300
|
+
* Serializes the item into an array of string.
|
|
2301
|
+
* @returns {String[]}
|
|
2302
|
+
*/
|
|
2303
|
+
toArray: function toArray() {
|
|
2304
|
+
var order = [],
|
|
2305
|
+
el,
|
|
2306
|
+
children = this.el.children,
|
|
2307
|
+
i = 0,
|
|
2308
|
+
n = children.length,
|
|
2309
|
+
options = this.options;
|
|
2310
|
+
for (; i < n; i++) {
|
|
2311
|
+
el = children[i];
|
|
2312
|
+
if (closest(el, options.draggable, this.el, false)) {
|
|
2313
|
+
order.push(el.getAttribute(options.dataIdAttr) || _generateId(el));
|
|
2314
|
+
}
|
|
2315
|
+
}
|
|
2316
|
+
return order;
|
|
2317
|
+
},
|
|
2318
|
+
/**
|
|
2319
|
+
* Sorts the elements according to the array.
|
|
2320
|
+
* @param {String[]} order order of the items
|
|
2321
|
+
*/
|
|
2322
|
+
sort: function sort(order, useAnimation) {
|
|
2323
|
+
var items = {},
|
|
2324
|
+
rootEl = this.el;
|
|
2325
|
+
this.toArray().forEach(function (id, i) {
|
|
2326
|
+
var el = rootEl.children[i];
|
|
2327
|
+
if (closest(el, this.options.draggable, rootEl, false)) {
|
|
2328
|
+
items[id] = el;
|
|
2329
|
+
}
|
|
2330
|
+
}, this);
|
|
2331
|
+
useAnimation && this.captureAnimationState();
|
|
2332
|
+
order.forEach(function (id) {
|
|
2333
|
+
if (items[id]) {
|
|
2334
|
+
rootEl.removeChild(items[id]);
|
|
2335
|
+
rootEl.appendChild(items[id]);
|
|
2336
|
+
}
|
|
2337
|
+
});
|
|
2338
|
+
useAnimation && this.animateAll();
|
|
2339
|
+
},
|
|
2340
|
+
/**
|
|
2341
|
+
* Save the current sorting
|
|
2342
|
+
*/
|
|
2343
|
+
save: function save() {
|
|
2344
|
+
var store = this.options.store;
|
|
2345
|
+
store && store.set && store.set(this);
|
|
2346
|
+
},
|
|
2347
|
+
/**
|
|
2348
|
+
* For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
|
|
2349
|
+
* @param {HTMLElement} el
|
|
2350
|
+
* @param {String} [selector] default: `options.draggable`
|
|
2351
|
+
* @returns {HTMLElement|null}
|
|
2352
|
+
*/
|
|
2353
|
+
closest: function closest$1(el, selector) {
|
|
2354
|
+
return closest(el, selector || this.options.draggable, this.el, false);
|
|
2355
|
+
},
|
|
2356
|
+
/**
|
|
2357
|
+
* Set/get option
|
|
2358
|
+
* @param {string} name
|
|
2359
|
+
* @param {*} [value]
|
|
2360
|
+
* @returns {*}
|
|
2361
|
+
*/
|
|
2362
|
+
option: function option(name, value) {
|
|
2363
|
+
var options = this.options;
|
|
2364
|
+
if (value === void 0) {
|
|
2365
|
+
return options[name];
|
|
2366
|
+
} else {
|
|
2367
|
+
var modifiedValue = PluginManager.modifyOption(this, name, value);
|
|
2368
|
+
if (typeof modifiedValue !== 'undefined') {
|
|
2369
|
+
options[name] = modifiedValue;
|
|
2370
|
+
} else {
|
|
2371
|
+
options[name] = value;
|
|
2372
|
+
}
|
|
2373
|
+
if (name === 'group') {
|
|
2374
|
+
_prepareGroup(options);
|
|
2375
|
+
}
|
|
2376
|
+
}
|
|
2377
|
+
},
|
|
2378
|
+
/**
|
|
2379
|
+
* Destroy
|
|
2380
|
+
*/
|
|
2381
|
+
destroy: function destroy() {
|
|
2382
|
+
pluginEvent('destroy', this);
|
|
2383
|
+
var el = this.el;
|
|
2384
|
+
el[expando] = null;
|
|
2385
|
+
off(el, 'mousedown', this._onTapStart);
|
|
2386
|
+
off(el, 'touchstart', this._onTapStart);
|
|
2387
|
+
off(el, 'pointerdown', this._onTapStart);
|
|
2388
|
+
if (this.nativeDraggable) {
|
|
2389
|
+
off(el, 'dragover', this);
|
|
2390
|
+
off(el, 'dragenter', this);
|
|
2391
|
+
}
|
|
2392
|
+
// Remove draggable attributes
|
|
2393
|
+
Array.prototype.forEach.call(el.querySelectorAll('[draggable]'), function (el) {
|
|
2394
|
+
el.removeAttribute('draggable');
|
|
2395
|
+
});
|
|
2396
|
+
this._onDrop();
|
|
2397
|
+
this._disableDelayedDragEvents();
|
|
2398
|
+
sortables.splice(sortables.indexOf(this.el), 1);
|
|
2399
|
+
this.el = el = null;
|
|
2400
|
+
},
|
|
2401
|
+
_hideClone: function _hideClone() {
|
|
2402
|
+
if (!cloneHidden) {
|
|
2403
|
+
pluginEvent('hideClone', this);
|
|
2404
|
+
if (Sortable.eventCanceled) return;
|
|
2405
|
+
css(cloneEl, 'display', 'none');
|
|
2406
|
+
if (this.options.removeCloneOnHide && cloneEl.parentNode) {
|
|
2407
|
+
cloneEl.parentNode.removeChild(cloneEl);
|
|
2408
|
+
}
|
|
2409
|
+
cloneHidden = true;
|
|
2410
|
+
}
|
|
2411
|
+
},
|
|
2412
|
+
_showClone: function _showClone(putSortable) {
|
|
2413
|
+
if (putSortable.lastPutMode !== 'clone') {
|
|
2414
|
+
this._hideClone();
|
|
2415
|
+
return;
|
|
2416
|
+
}
|
|
2417
|
+
if (cloneHidden) {
|
|
2418
|
+
pluginEvent('showClone', this);
|
|
2419
|
+
if (Sortable.eventCanceled) return;
|
|
2420
|
+
|
|
2421
|
+
// show clone at dragEl or original position
|
|
2422
|
+
if (dragEl.parentNode == rootEl && !this.options.group.revertClone) {
|
|
2423
|
+
rootEl.insertBefore(cloneEl, dragEl);
|
|
2424
|
+
} else if (nextEl) {
|
|
2425
|
+
rootEl.insertBefore(cloneEl, nextEl);
|
|
2426
|
+
} else {
|
|
2427
|
+
rootEl.appendChild(cloneEl);
|
|
2428
|
+
}
|
|
2429
|
+
if (this.options.group.revertClone) {
|
|
2430
|
+
this.animate(dragEl, cloneEl);
|
|
2431
|
+
}
|
|
2432
|
+
css(cloneEl, 'display', '');
|
|
2433
|
+
cloneHidden = false;
|
|
2434
|
+
}
|
|
2435
|
+
}
|
|
2436
|
+
};
|
|
2437
|
+
function _globalDragOver( /**Event*/evt) {
|
|
2438
|
+
if (evt.dataTransfer) {
|
|
2439
|
+
evt.dataTransfer.dropEffect = 'move';
|
|
2440
|
+
}
|
|
2441
|
+
evt.cancelable && evt.preventDefault();
|
|
2442
|
+
}
|
|
2443
|
+
function _onMove(fromEl, toEl, dragEl, dragRect, targetEl, targetRect, originalEvent, willInsertAfter) {
|
|
2444
|
+
var evt,
|
|
2445
|
+
sortable = fromEl[expando],
|
|
2446
|
+
onMoveFn = sortable.options.onMove,
|
|
2447
|
+
retVal;
|
|
2448
|
+
// Support for new CustomEvent feature
|
|
2449
|
+
if (window.CustomEvent && !IE11OrLess && !Edge) {
|
|
2450
|
+
evt = new CustomEvent('move', {
|
|
2451
|
+
bubbles: true,
|
|
2452
|
+
cancelable: true
|
|
2453
|
+
});
|
|
2454
|
+
} else {
|
|
2455
|
+
evt = document.createEvent('Event');
|
|
2456
|
+
evt.initEvent('move', true, true);
|
|
2457
|
+
}
|
|
2458
|
+
evt.to = toEl;
|
|
2459
|
+
evt.from = fromEl;
|
|
2460
|
+
evt.dragged = dragEl;
|
|
2461
|
+
evt.draggedRect = dragRect;
|
|
2462
|
+
evt.related = targetEl || toEl;
|
|
2463
|
+
evt.relatedRect = targetRect || getRect(toEl);
|
|
2464
|
+
evt.willInsertAfter = willInsertAfter;
|
|
2465
|
+
evt.originalEvent = originalEvent;
|
|
2466
|
+
fromEl.dispatchEvent(evt);
|
|
2467
|
+
if (onMoveFn) {
|
|
2468
|
+
retVal = onMoveFn.call(sortable, evt, originalEvent);
|
|
2469
|
+
}
|
|
2470
|
+
return retVal;
|
|
2471
|
+
}
|
|
2472
|
+
function _disableDraggable(el) {
|
|
2473
|
+
el.draggable = false;
|
|
2474
|
+
}
|
|
2475
|
+
function _unsilent() {
|
|
2476
|
+
_silent = false;
|
|
2477
|
+
}
|
|
2478
|
+
function _ghostIsFirst(evt, vertical, sortable) {
|
|
2479
|
+
var firstElRect = getRect(getChild(sortable.el, 0, sortable.options, true));
|
|
2480
|
+
var childContainingRect = getChildContainingRectFromElement(sortable.el, sortable.options, ghostEl);
|
|
2481
|
+
var spacer = 10;
|
|
2482
|
+
return vertical ? evt.clientX < childContainingRect.left - spacer || evt.clientY < firstElRect.top && evt.clientX < firstElRect.right : evt.clientY < childContainingRect.top - spacer || evt.clientY < firstElRect.bottom && evt.clientX < firstElRect.left;
|
|
2483
|
+
}
|
|
2484
|
+
function _ghostIsLast(evt, vertical, sortable) {
|
|
2485
|
+
var lastElRect = getRect(lastChild(sortable.el, sortable.options.draggable));
|
|
2486
|
+
var childContainingRect = getChildContainingRectFromElement(sortable.el, sortable.options, ghostEl);
|
|
2487
|
+
var spacer = 10;
|
|
2488
|
+
return vertical ? evt.clientX > childContainingRect.right + spacer || evt.clientY > lastElRect.bottom && evt.clientX > lastElRect.left : evt.clientY > childContainingRect.bottom + spacer || evt.clientX > lastElRect.right && evt.clientY > lastElRect.top;
|
|
2489
|
+
}
|
|
2490
|
+
function _getSwapDirection(evt, target, targetRect, vertical, swapThreshold, invertedSwapThreshold, invertSwap, isLastTarget) {
|
|
2491
|
+
var mouseOnAxis = vertical ? evt.clientY : evt.clientX,
|
|
2492
|
+
targetLength = vertical ? targetRect.height : targetRect.width,
|
|
2493
|
+
targetS1 = vertical ? targetRect.top : targetRect.left,
|
|
2494
|
+
targetS2 = vertical ? targetRect.bottom : targetRect.right,
|
|
2495
|
+
invert = false;
|
|
2496
|
+
if (!invertSwap) {
|
|
2497
|
+
// Never invert or create dragEl shadow when target movemenet causes mouse to move past the end of regular swapThreshold
|
|
2498
|
+
if (isLastTarget && targetMoveDistance < targetLength * swapThreshold) {
|
|
2499
|
+
// multiplied only by swapThreshold because mouse will already be inside target by (1 - threshold) * targetLength / 2
|
|
2500
|
+
// check if past first invert threshold on side opposite of lastDirection
|
|
2501
|
+
if (!pastFirstInvertThresh && (lastDirection === 1 ? mouseOnAxis > targetS1 + targetLength * invertedSwapThreshold / 2 : mouseOnAxis < targetS2 - targetLength * invertedSwapThreshold / 2)) {
|
|
2502
|
+
// past first invert threshold, do not restrict inverted threshold to dragEl shadow
|
|
2503
|
+
pastFirstInvertThresh = true;
|
|
2504
|
+
}
|
|
2505
|
+
if (!pastFirstInvertThresh) {
|
|
2506
|
+
// dragEl shadow (target move distance shadow)
|
|
2507
|
+
if (lastDirection === 1 ? mouseOnAxis < targetS1 + targetMoveDistance // over dragEl shadow
|
|
2508
|
+
: mouseOnAxis > targetS2 - targetMoveDistance) {
|
|
2509
|
+
return -lastDirection;
|
|
2510
|
+
}
|
|
2511
|
+
} else {
|
|
2512
|
+
invert = true;
|
|
2513
|
+
}
|
|
2514
|
+
} else {
|
|
2515
|
+
// Regular
|
|
2516
|
+
if (mouseOnAxis > targetS1 + targetLength * (1 - swapThreshold) / 2 && mouseOnAxis < targetS2 - targetLength * (1 - swapThreshold) / 2) {
|
|
2517
|
+
return _getInsertDirection(target);
|
|
2518
|
+
}
|
|
2519
|
+
}
|
|
2520
|
+
}
|
|
2521
|
+
invert = invert || invertSwap;
|
|
2522
|
+
if (invert) {
|
|
2523
|
+
// Invert of regular
|
|
2524
|
+
if (mouseOnAxis < targetS1 + targetLength * invertedSwapThreshold / 2 || mouseOnAxis > targetS2 - targetLength * invertedSwapThreshold / 2) {
|
|
2525
|
+
return mouseOnAxis > targetS1 + targetLength / 2 ? 1 : -1;
|
|
2526
|
+
}
|
|
2527
|
+
}
|
|
2528
|
+
return 0;
|
|
2529
|
+
}
|
|
2530
|
+
|
|
2531
|
+
/**
|
|
2532
|
+
* Gets the direction dragEl must be swapped relative to target in order to make it
|
|
2533
|
+
* seem that dragEl has been "inserted" into that element's position
|
|
2534
|
+
* @param {HTMLElement} target The target whose position dragEl is being inserted at
|
|
2535
|
+
* @return {Number} Direction dragEl must be swapped
|
|
2536
|
+
*/
|
|
2537
|
+
function _getInsertDirection(target) {
|
|
2538
|
+
if (index(dragEl) < index(target)) {
|
|
2539
|
+
return 1;
|
|
2540
|
+
} else {
|
|
2541
|
+
return -1;
|
|
2542
|
+
}
|
|
2543
|
+
}
|
|
2544
|
+
|
|
2545
|
+
/**
|
|
2546
|
+
* Generate id
|
|
2547
|
+
* @param {HTMLElement} el
|
|
2548
|
+
* @returns {String}
|
|
2549
|
+
* @private
|
|
2550
|
+
*/
|
|
2551
|
+
function _generateId(el) {
|
|
2552
|
+
var str = el.tagName + el.className + el.src + el.href + el.textContent,
|
|
2553
|
+
i = str.length,
|
|
2554
|
+
sum = 0;
|
|
2555
|
+
while (i--) {
|
|
2556
|
+
sum += str.charCodeAt(i);
|
|
2557
|
+
}
|
|
2558
|
+
return sum.toString(36);
|
|
2559
|
+
}
|
|
2560
|
+
function _saveInputCheckedState(root) {
|
|
2561
|
+
savedInputChecked.length = 0;
|
|
2562
|
+
var inputs = root.getElementsByTagName('input');
|
|
2563
|
+
var idx = inputs.length;
|
|
2564
|
+
while (idx--) {
|
|
2565
|
+
var el = inputs[idx];
|
|
2566
|
+
el.checked && savedInputChecked.push(el);
|
|
2567
|
+
}
|
|
2568
|
+
}
|
|
2569
|
+
function _nextTick(fn) {
|
|
2570
|
+
return setTimeout(fn, 0);
|
|
2571
|
+
}
|
|
2572
|
+
function _cancelNextTick(id) {
|
|
2573
|
+
return clearTimeout(id);
|
|
2574
|
+
}
|
|
2575
|
+
|
|
2576
|
+
// Fixed #973:
|
|
2577
|
+
if (documentExists) {
|
|
2578
|
+
on(document, 'touchmove', function (evt) {
|
|
2579
|
+
if ((Sortable.active || awaitingDragStarted) && evt.cancelable) {
|
|
2580
|
+
evt.preventDefault();
|
|
2581
|
+
}
|
|
2582
|
+
});
|
|
2583
|
+
}
|
|
2584
|
+
|
|
2585
|
+
// Export utils
|
|
2586
|
+
Sortable.utils = {
|
|
2587
|
+
on: on,
|
|
2588
|
+
off: off,
|
|
2589
|
+
css: css,
|
|
2590
|
+
find: find,
|
|
2591
|
+
is: function is(el, selector) {
|
|
2592
|
+
return !!closest(el, selector, el, false);
|
|
2593
|
+
},
|
|
2594
|
+
extend: extend,
|
|
2595
|
+
throttle: throttle,
|
|
2596
|
+
closest: closest,
|
|
2597
|
+
toggleClass: toggleClass,
|
|
2598
|
+
clone: clone,
|
|
2599
|
+
index: index,
|
|
2600
|
+
nextTick: _nextTick,
|
|
2601
|
+
cancelNextTick: _cancelNextTick,
|
|
2602
|
+
detectDirection: _detectDirection,
|
|
2603
|
+
getChild: getChild,
|
|
2604
|
+
expando: expando
|
|
2605
|
+
};
|
|
2606
|
+
|
|
2607
|
+
/**
|
|
2608
|
+
* Get the Sortable instance of an element
|
|
2609
|
+
* @param {HTMLElement} element The element
|
|
2610
|
+
* @return {Sortable|undefined} The instance of Sortable
|
|
2611
|
+
*/
|
|
2612
|
+
Sortable.get = function (element) {
|
|
2613
|
+
return element[expando];
|
|
2614
|
+
};
|
|
2615
|
+
|
|
2616
|
+
/**
|
|
2617
|
+
* Mount a plugin to Sortable
|
|
2618
|
+
* @param {...SortablePlugin|SortablePlugin[]} plugins Plugins being mounted
|
|
2619
|
+
*/
|
|
2620
|
+
Sortable.mount = function () {
|
|
2621
|
+
for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
2622
|
+
plugins[_key] = arguments[_key];
|
|
2623
|
+
}
|
|
2624
|
+
if (plugins[0].constructor === Array) plugins = plugins[0];
|
|
2625
|
+
plugins.forEach(function (plugin) {
|
|
2626
|
+
if (!plugin.prototype || !plugin.prototype.constructor) {
|
|
2627
|
+
throw "Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(plugin));
|
|
2628
|
+
}
|
|
2629
|
+
if (plugin.utils) Sortable.utils = _objectSpread2(_objectSpread2({}, Sortable.utils), plugin.utils);
|
|
2630
|
+
PluginManager.mount(plugin);
|
|
2631
|
+
});
|
|
2632
|
+
};
|
|
2633
|
+
|
|
2634
|
+
/**
|
|
2635
|
+
* Create sortable instance
|
|
2636
|
+
* @param {HTMLElement} el
|
|
2637
|
+
* @param {Object} [options]
|
|
2638
|
+
*/
|
|
2639
|
+
Sortable.create = function (el, options) {
|
|
2640
|
+
return new Sortable(el, options);
|
|
2641
|
+
};
|
|
2642
|
+
|
|
2643
|
+
// Export
|
|
2644
|
+
Sortable.version = version;
|
|
2645
|
+
|
|
2646
|
+
var autoScrolls = [],
|
|
2647
|
+
scrollEl,
|
|
2648
|
+
scrollRootEl,
|
|
2649
|
+
scrolling = false,
|
|
2650
|
+
lastAutoScrollX,
|
|
2651
|
+
lastAutoScrollY,
|
|
2652
|
+
touchEvt$1,
|
|
2653
|
+
pointerElemChangedInterval;
|
|
2654
|
+
function AutoScrollPlugin() {
|
|
2655
|
+
function AutoScroll() {
|
|
2656
|
+
this.defaults = {
|
|
2657
|
+
scroll: true,
|
|
2658
|
+
forceAutoScrollFallback: false,
|
|
2659
|
+
scrollSensitivity: 30,
|
|
2660
|
+
scrollSpeed: 10,
|
|
2661
|
+
bubbleScroll: true
|
|
2662
|
+
};
|
|
2663
|
+
|
|
2664
|
+
// Bind all private methods
|
|
2665
|
+
for (var fn in this) {
|
|
2666
|
+
if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {
|
|
2667
|
+
this[fn] = this[fn].bind(this);
|
|
2668
|
+
}
|
|
2669
|
+
}
|
|
2670
|
+
}
|
|
2671
|
+
AutoScroll.prototype = {
|
|
2672
|
+
dragStarted: function dragStarted(_ref) {
|
|
2673
|
+
var originalEvent = _ref.originalEvent;
|
|
2674
|
+
if (this.sortable.nativeDraggable) {
|
|
2675
|
+
on(document, 'dragover', this._handleAutoScroll);
|
|
2676
|
+
} else {
|
|
2677
|
+
if (this.options.supportPointer) {
|
|
2678
|
+
on(document, 'pointermove', this._handleFallbackAutoScroll);
|
|
2679
|
+
} else if (originalEvent.touches) {
|
|
2680
|
+
on(document, 'touchmove', this._handleFallbackAutoScroll);
|
|
2681
|
+
} else {
|
|
2682
|
+
on(document, 'mousemove', this._handleFallbackAutoScroll);
|
|
2683
|
+
}
|
|
2684
|
+
}
|
|
2685
|
+
},
|
|
2686
|
+
dragOverCompleted: function dragOverCompleted(_ref2) {
|
|
2687
|
+
var originalEvent = _ref2.originalEvent;
|
|
2688
|
+
// For when bubbling is canceled and using fallback (fallback 'touchmove' always reached)
|
|
2689
|
+
if (!this.options.dragOverBubble && !originalEvent.rootEl) {
|
|
2690
|
+
this._handleAutoScroll(originalEvent);
|
|
2691
|
+
}
|
|
2692
|
+
},
|
|
2693
|
+
drop: function drop() {
|
|
2694
|
+
if (this.sortable.nativeDraggable) {
|
|
2695
|
+
off(document, 'dragover', this._handleAutoScroll);
|
|
2696
|
+
} else {
|
|
2697
|
+
off(document, 'pointermove', this._handleFallbackAutoScroll);
|
|
2698
|
+
off(document, 'touchmove', this._handleFallbackAutoScroll);
|
|
2699
|
+
off(document, 'mousemove', this._handleFallbackAutoScroll);
|
|
2700
|
+
}
|
|
2701
|
+
clearPointerElemChangedInterval();
|
|
2702
|
+
clearAutoScrolls();
|
|
2703
|
+
cancelThrottle();
|
|
2704
|
+
},
|
|
2705
|
+
nulling: function nulling() {
|
|
2706
|
+
touchEvt$1 = scrollRootEl = scrollEl = scrolling = pointerElemChangedInterval = lastAutoScrollX = lastAutoScrollY = null;
|
|
2707
|
+
autoScrolls.length = 0;
|
|
2708
|
+
},
|
|
2709
|
+
_handleFallbackAutoScroll: function _handleFallbackAutoScroll(evt) {
|
|
2710
|
+
this._handleAutoScroll(evt, true);
|
|
2711
|
+
},
|
|
2712
|
+
_handleAutoScroll: function _handleAutoScroll(evt, fallback) {
|
|
2713
|
+
var _this = this;
|
|
2714
|
+
var x = (evt.touches ? evt.touches[0] : evt).clientX,
|
|
2715
|
+
y = (evt.touches ? evt.touches[0] : evt).clientY,
|
|
2716
|
+
elem = document.elementFromPoint(x, y);
|
|
2717
|
+
touchEvt$1 = evt;
|
|
2718
|
+
|
|
2719
|
+
// IE does not seem to have native autoscroll,
|
|
2720
|
+
// Edge's autoscroll seems too conditional,
|
|
2721
|
+
// MACOS Safari does not have autoscroll,
|
|
2722
|
+
// Firefox and Chrome are good
|
|
2723
|
+
if (fallback || this.options.forceAutoScrollFallback || Edge || IE11OrLess || Safari) {
|
|
2724
|
+
autoScroll(evt, this.options, elem, fallback);
|
|
2725
|
+
|
|
2726
|
+
// Listener for pointer element change
|
|
2727
|
+
var ogElemScroller = getParentAutoScrollElement(elem, true);
|
|
2728
|
+
if (scrolling && (!pointerElemChangedInterval || x !== lastAutoScrollX || y !== lastAutoScrollY)) {
|
|
2729
|
+
pointerElemChangedInterval && clearPointerElemChangedInterval();
|
|
2730
|
+
// Detect for pointer elem change, emulating native DnD behaviour
|
|
2731
|
+
pointerElemChangedInterval = setInterval(function () {
|
|
2732
|
+
var newElem = getParentAutoScrollElement(document.elementFromPoint(x, y), true);
|
|
2733
|
+
if (newElem !== ogElemScroller) {
|
|
2734
|
+
ogElemScroller = newElem;
|
|
2735
|
+
clearAutoScrolls();
|
|
2736
|
+
}
|
|
2737
|
+
autoScroll(evt, _this.options, newElem, fallback);
|
|
2738
|
+
}, 10);
|
|
2739
|
+
lastAutoScrollX = x;
|
|
2740
|
+
lastAutoScrollY = y;
|
|
2741
|
+
}
|
|
2742
|
+
} else {
|
|
2743
|
+
// if DnD is enabled (and browser has good autoscrolling), first autoscroll will already scroll, so get parent autoscroll of first autoscroll
|
|
2744
|
+
if (!this.options.bubbleScroll || getParentAutoScrollElement(elem, true) === getWindowScrollingElement()) {
|
|
2745
|
+
clearAutoScrolls();
|
|
2746
|
+
return;
|
|
2747
|
+
}
|
|
2748
|
+
autoScroll(evt, this.options, getParentAutoScrollElement(elem, false), false);
|
|
2749
|
+
}
|
|
2750
|
+
}
|
|
2751
|
+
};
|
|
2752
|
+
return _extends(AutoScroll, {
|
|
2753
|
+
pluginName: 'scroll',
|
|
2754
|
+
initializeByDefault: true
|
|
2755
|
+
});
|
|
2756
|
+
}
|
|
2757
|
+
function clearAutoScrolls() {
|
|
2758
|
+
autoScrolls.forEach(function (autoScroll) {
|
|
2759
|
+
clearInterval(autoScroll.pid);
|
|
2760
|
+
});
|
|
2761
|
+
autoScrolls = [];
|
|
2762
|
+
}
|
|
2763
|
+
function clearPointerElemChangedInterval() {
|
|
2764
|
+
clearInterval(pointerElemChangedInterval);
|
|
2765
|
+
}
|
|
2766
|
+
var autoScroll = throttle(function (evt, options, rootEl, isFallback) {
|
|
2767
|
+
// Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521
|
|
2768
|
+
if (!options.scroll) return;
|
|
2769
|
+
var x = (evt.touches ? evt.touches[0] : evt).clientX,
|
|
2770
|
+
y = (evt.touches ? evt.touches[0] : evt).clientY,
|
|
2771
|
+
sens = options.scrollSensitivity,
|
|
2772
|
+
speed = options.scrollSpeed,
|
|
2773
|
+
winScroller = getWindowScrollingElement();
|
|
2774
|
+
var scrollThisInstance = false,
|
|
2775
|
+
scrollCustomFn;
|
|
2776
|
+
|
|
2777
|
+
// New scroll root, set scrollEl
|
|
2778
|
+
if (scrollRootEl !== rootEl) {
|
|
2779
|
+
scrollRootEl = rootEl;
|
|
2780
|
+
clearAutoScrolls();
|
|
2781
|
+
scrollEl = options.scroll;
|
|
2782
|
+
scrollCustomFn = options.scrollFn;
|
|
2783
|
+
if (scrollEl === true) {
|
|
2784
|
+
scrollEl = getParentAutoScrollElement(rootEl, true);
|
|
2785
|
+
}
|
|
2786
|
+
}
|
|
2787
|
+
var layersOut = 0;
|
|
2788
|
+
var currentParent = scrollEl;
|
|
2789
|
+
do {
|
|
2790
|
+
var el = currentParent,
|
|
2791
|
+
rect = getRect(el),
|
|
2792
|
+
top = rect.top,
|
|
2793
|
+
bottom = rect.bottom,
|
|
2794
|
+
left = rect.left,
|
|
2795
|
+
right = rect.right,
|
|
2796
|
+
width = rect.width,
|
|
2797
|
+
height = rect.height,
|
|
2798
|
+
canScrollX = void 0,
|
|
2799
|
+
canScrollY = void 0,
|
|
2800
|
+
scrollWidth = el.scrollWidth,
|
|
2801
|
+
scrollHeight = el.scrollHeight,
|
|
2802
|
+
elCSS = css(el),
|
|
2803
|
+
scrollPosX = el.scrollLeft,
|
|
2804
|
+
scrollPosY = el.scrollTop;
|
|
2805
|
+
if (el === winScroller) {
|
|
2806
|
+
canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll' || elCSS.overflowX === 'visible');
|
|
2807
|
+
canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll' || elCSS.overflowY === 'visible');
|
|
2808
|
+
} else {
|
|
2809
|
+
canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll');
|
|
2810
|
+
canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll');
|
|
2811
|
+
}
|
|
2812
|
+
var vx = canScrollX && (Math.abs(right - x) <= sens && scrollPosX + width < scrollWidth) - (Math.abs(left - x) <= sens && !!scrollPosX);
|
|
2813
|
+
var vy = canScrollY && (Math.abs(bottom - y) <= sens && scrollPosY + height < scrollHeight) - (Math.abs(top - y) <= sens && !!scrollPosY);
|
|
2814
|
+
if (!autoScrolls[layersOut]) {
|
|
2815
|
+
for (var i = 0; i <= layersOut; i++) {
|
|
2816
|
+
if (!autoScrolls[i]) {
|
|
2817
|
+
autoScrolls[i] = {};
|
|
2818
|
+
}
|
|
2819
|
+
}
|
|
2820
|
+
}
|
|
2821
|
+
if (autoScrolls[layersOut].vx != vx || autoScrolls[layersOut].vy != vy || autoScrolls[layersOut].el !== el) {
|
|
2822
|
+
autoScrolls[layersOut].el = el;
|
|
2823
|
+
autoScrolls[layersOut].vx = vx;
|
|
2824
|
+
autoScrolls[layersOut].vy = vy;
|
|
2825
|
+
clearInterval(autoScrolls[layersOut].pid);
|
|
2826
|
+
if (vx != 0 || vy != 0) {
|
|
2827
|
+
scrollThisInstance = true;
|
|
2828
|
+
/* jshint loopfunc:true */
|
|
2829
|
+
autoScrolls[layersOut].pid = setInterval(function () {
|
|
2830
|
+
// emulate drag over during autoscroll (fallback), emulating native DnD behaviour
|
|
2831
|
+
if (isFallback && this.layer === 0) {
|
|
2832
|
+
Sortable.active._onTouchMove(touchEvt$1); // To move ghost if it is positioned absolutely
|
|
2833
|
+
}
|
|
2834
|
+
var scrollOffsetY = autoScrolls[this.layer].vy ? autoScrolls[this.layer].vy * speed : 0;
|
|
2835
|
+
var scrollOffsetX = autoScrolls[this.layer].vx ? autoScrolls[this.layer].vx * speed : 0;
|
|
2836
|
+
if (typeof scrollCustomFn === 'function') {
|
|
2837
|
+
if (scrollCustomFn.call(Sortable.dragged.parentNode[expando], scrollOffsetX, scrollOffsetY, evt, touchEvt$1, autoScrolls[this.layer].el) !== 'continue') {
|
|
2838
|
+
return;
|
|
2839
|
+
}
|
|
2840
|
+
}
|
|
2841
|
+
scrollBy(autoScrolls[this.layer].el, scrollOffsetX, scrollOffsetY);
|
|
2842
|
+
}.bind({
|
|
2843
|
+
layer: layersOut
|
|
2844
|
+
}), 24);
|
|
2845
|
+
}
|
|
2846
|
+
}
|
|
2847
|
+
layersOut++;
|
|
2848
|
+
} while (options.bubbleScroll && currentParent !== winScroller && (currentParent = getParentAutoScrollElement(currentParent, false)));
|
|
2849
|
+
scrolling = scrollThisInstance; // in case another function catches scrolling as false in between when it is not
|
|
2850
|
+
}, 30);
|
|
2851
|
+
|
|
2852
|
+
var drop = function drop(_ref) {
|
|
2853
|
+
var originalEvent = _ref.originalEvent,
|
|
2854
|
+
putSortable = _ref.putSortable,
|
|
2855
|
+
dragEl = _ref.dragEl,
|
|
2856
|
+
activeSortable = _ref.activeSortable,
|
|
2857
|
+
dispatchSortableEvent = _ref.dispatchSortableEvent,
|
|
2858
|
+
hideGhostForTarget = _ref.hideGhostForTarget,
|
|
2859
|
+
unhideGhostForTarget = _ref.unhideGhostForTarget;
|
|
2860
|
+
if (!originalEvent) return;
|
|
2861
|
+
var toSortable = putSortable || activeSortable;
|
|
2862
|
+
hideGhostForTarget();
|
|
2863
|
+
var touch = originalEvent.changedTouches && originalEvent.changedTouches.length ? originalEvent.changedTouches[0] : originalEvent;
|
|
2864
|
+
var target = document.elementFromPoint(touch.clientX, touch.clientY);
|
|
2865
|
+
unhideGhostForTarget();
|
|
2866
|
+
if (toSortable && !toSortable.el.contains(target)) {
|
|
2867
|
+
dispatchSortableEvent('spill');
|
|
2868
|
+
this.onSpill({
|
|
2869
|
+
dragEl: dragEl,
|
|
2870
|
+
putSortable: putSortable
|
|
2871
|
+
});
|
|
2872
|
+
}
|
|
2873
|
+
};
|
|
2874
|
+
function Revert() {}
|
|
2875
|
+
Revert.prototype = {
|
|
2876
|
+
startIndex: null,
|
|
2877
|
+
dragStart: function dragStart(_ref2) {
|
|
2878
|
+
var oldDraggableIndex = _ref2.oldDraggableIndex;
|
|
2879
|
+
this.startIndex = oldDraggableIndex;
|
|
2880
|
+
},
|
|
2881
|
+
onSpill: function onSpill(_ref3) {
|
|
2882
|
+
var dragEl = _ref3.dragEl,
|
|
2883
|
+
putSortable = _ref3.putSortable;
|
|
2884
|
+
this.sortable.captureAnimationState();
|
|
2885
|
+
if (putSortable) {
|
|
2886
|
+
putSortable.captureAnimationState();
|
|
2887
|
+
}
|
|
2888
|
+
var nextSibling = getChild(this.sortable.el, this.startIndex, this.options);
|
|
2889
|
+
if (nextSibling) {
|
|
2890
|
+
this.sortable.el.insertBefore(dragEl, nextSibling);
|
|
2891
|
+
} else {
|
|
2892
|
+
this.sortable.el.appendChild(dragEl);
|
|
2893
|
+
}
|
|
2894
|
+
this.sortable.animateAll();
|
|
2895
|
+
if (putSortable) {
|
|
2896
|
+
putSortable.animateAll();
|
|
2897
|
+
}
|
|
2898
|
+
},
|
|
2899
|
+
drop: drop
|
|
2900
|
+
};
|
|
2901
|
+
_extends(Revert, {
|
|
2902
|
+
pluginName: 'revertOnSpill'
|
|
2903
|
+
});
|
|
2904
|
+
function Remove() {}
|
|
2905
|
+
Remove.prototype = {
|
|
2906
|
+
onSpill: function onSpill(_ref4) {
|
|
2907
|
+
var dragEl = _ref4.dragEl,
|
|
2908
|
+
putSortable = _ref4.putSortable;
|
|
2909
|
+
var parentSortable = putSortable || this.sortable;
|
|
2910
|
+
parentSortable.captureAnimationState();
|
|
2911
|
+
dragEl.parentNode && dragEl.parentNode.removeChild(dragEl);
|
|
2912
|
+
parentSortable.animateAll();
|
|
2913
|
+
},
|
|
2914
|
+
drop: drop
|
|
2915
|
+
};
|
|
2916
|
+
_extends(Remove, {
|
|
2917
|
+
pluginName: 'removeOnSpill'
|
|
2918
|
+
});
|
|
2919
|
+
|
|
2920
|
+
Sortable.mount(new AutoScrollPlugin());
|
|
2921
|
+
Sortable.mount(Remove, Revert);
|
|
2922
|
+
|
|
2923
|
+
const XV_DATA_TABLE_TAG = 'xv-data-table';
|
|
2924
|
+
const XV_DATA_TABLE_ROW_TAG = 'xv-data-table-row';
|
|
2925
|
+
const XV_ROW_DRAG_HANDLE_CLASS = 'xv-row-drag-handle';
|
|
2926
|
+
|
|
274
2927
|
const xvDataTableCss = () => `.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-data-table-min-height:51.11px;--xv-data-table-border-width:1px;--xv-data-table-border-color:var(--border-subtle-01, #D1D1D1);--xv-data-table-padding-x:var(--spacing-05, 16px);--xv-data-table-padding-y:var(--spacing-05, 16px);--xv-data-table-row-bg:transparent;width:inherit;text-align:left;color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:18px;letter-spacing:0.16px}@media screen and (max-width: 1180px){:host{display:block;position:relative;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--layer-accent-03) transparent}:host ::slotted([slot=title]),:host>table{min-width:1180px}}:host .bar{position:sticky;left:0;z-index:10}:host .bar_batch{position:absolute;bottom:0;left:0;right:0;pointer-events:unset;user-select:unset;z-index:2;background-color:var(--interactive-01, #273435);color:var(--text-on-color, #fff);border-radius:3px 3px 0 0;display:flex;align-items:center}:host .bar_toolbar{z-index:1;border-radius:3px 3px 0 0}:host ::slotted([slot=title]){margin:0 !important;color:var(--text-primary, #333) !important;font-family:var(--ff-heading, "Gill Sans") !important;font-size:var(--fz-xl, 21px) !important;text-align:left;font-style:normal !important;font-weight:400 !important;line-height:normal !important;padding:var(--spacing-05) var(--spacing-05) var(--spacing-06) !important}:host ::slotted([slot=toolbar]){margin-bottom:var(--spacing-03)}:host>table{width:inherit;border-collapse:collapse;table-layout:fixed;border-left:1px solid var(--xv-data-table-border-color);border-right:1px solid var(--xv-data-table-border-color)}:host>caption{display:contents}:host .loading{z-index:10;display:flex;align-items:center;justify-content:center;min-height:var(--xv-data-table-min-height, 51.11px);position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8)}:host([block]){width:100%}:host([block])>table{table-layout:fixed}:host([size=xs]){--xv-data-table-padding-x:var(--spacing-02, 4px);--xv-data-table-padding-y:var(--spacing-02, 4px)}:host([size=sm]){--xv-data-table-padding-x:var(--spacing-04, 12px);--xv-data-table-padding-y:var(--spacing-03, 8px)}:host([size=md]){--xv-data-table-padding-x:var(--spacing-05, 16px);--xv-data-table-padding-y:var(--spacing-05, 16px)}:host([size=lg]){--xv-data-table-padding-x:var(--spacing-05, 16px);--xv-data-table-padding-y:var(--spacing-06, 24px)}:host([size=xl]){--xv-data-table-padding-x:var(--spacing-06, 24px);--xv-data-table-padding-y:var(--spacing-07, 32px)}`;
|
|
275
2928
|
|
|
276
2929
|
const XvDataTable = class {
|
|
277
2930
|
constructor(hostRef) {
|
|
278
|
-
index.registerInstance(this, hostRef);
|
|
2931
|
+
index$1.registerInstance(this, hostRef);
|
|
2932
|
+
this.reorderChange = index$1.createEvent(this, "reorderChange", 7);
|
|
279
2933
|
this.size = _vars.SIZE_VAR.MD;
|
|
280
2934
|
this.columnWidths = [];
|
|
281
2935
|
this.multiple = true;
|
|
282
2936
|
this.hover = false;
|
|
2937
|
+
this.reorderable = false;
|
|
2938
|
+
this.reorderHandle = 'icon';
|
|
2939
|
+
this.dragPrevSibling = null;
|
|
2940
|
+
this.dragStartBodyIndex = -1;
|
|
2941
|
+
this.initSortable = () => {
|
|
2942
|
+
if (this.sortable)
|
|
2943
|
+
return;
|
|
2944
|
+
const options = {
|
|
2945
|
+
animation: 150,
|
|
2946
|
+
easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
2947
|
+
draggable: XV_DATA_TABLE_ROW_TAG,
|
|
2948
|
+
filter: this.sortableFilter,
|
|
2949
|
+
preventOnFilter: false,
|
|
2950
|
+
ghostClass: 'xv-row-ghost',
|
|
2951
|
+
chosenClass: 'xv-row-chosen',
|
|
2952
|
+
dragClass: 'xv-row-drag',
|
|
2953
|
+
fallbackOnBody: true,
|
|
2954
|
+
onStart: (evt) => {
|
|
2955
|
+
var _a;
|
|
2956
|
+
const item = evt.item;
|
|
2957
|
+
(_a = item.close) === null || _a === void 0 ? void 0 : _a.call(item);
|
|
2958
|
+
this.dragPrevSibling = item.previousElementSibling;
|
|
2959
|
+
this.dragStartBodyIndex = this.getBodyRowIndex(item);
|
|
2960
|
+
},
|
|
2961
|
+
onEnd: (evt) => {
|
|
2962
|
+
const item = evt.item;
|
|
2963
|
+
const to = this.getBodyRowIndex(item);
|
|
2964
|
+
const from = this.dragStartBodyIndex;
|
|
2965
|
+
this.revertDom(item);
|
|
2966
|
+
this.dragPrevSibling = null;
|
|
2967
|
+
this.dragStartBodyIndex = -1;
|
|
2968
|
+
if (from < 0 || to < 0 || from === to)
|
|
2969
|
+
return;
|
|
2970
|
+
this.reorderChange.emit({ from, to });
|
|
2971
|
+
},
|
|
2972
|
+
};
|
|
2973
|
+
this.sortable = new Sortable(this.el, options);
|
|
2974
|
+
};
|
|
2975
|
+
this.sortableFilter = (evt, target) => {
|
|
2976
|
+
var _a, _b, _c, _d;
|
|
2977
|
+
const slot = (_a = target === null || target === void 0 ? void 0 : target.getAttribute) === null || _a === void 0 ? void 0 : _a.call(target, 'slot');
|
|
2978
|
+
if (slot === 'header' || slot === 'footer')
|
|
2979
|
+
return true;
|
|
2980
|
+
const row = target;
|
|
2981
|
+
if ((row === null || row === void 0 ? void 0 : row.header) || (row === null || row === void 0 ? void 0 : row.footer) || (row === null || row === void 0 ? void 0 : row.group))
|
|
2982
|
+
return true;
|
|
2983
|
+
if (this.reorderHandle === 'icon') {
|
|
2984
|
+
const path = (_d = (_c = (_b = evt).composedPath) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : [];
|
|
2985
|
+
const onHandle = path.some((n) => {
|
|
2986
|
+
var _a, _b;
|
|
2987
|
+
const el = n;
|
|
2988
|
+
return (_b = (_a = el === null || el === void 0 ? void 0 : el.classList) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, XV_ROW_DRAG_HANDLE_CLASS);
|
|
2989
|
+
});
|
|
2990
|
+
if (!onHandle)
|
|
2991
|
+
return true;
|
|
2992
|
+
}
|
|
2993
|
+
return false;
|
|
2994
|
+
};
|
|
2995
|
+
this.destroySortable = () => {
|
|
2996
|
+
var _a;
|
|
2997
|
+
(_a = this.sortable) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
2998
|
+
this.sortable = undefined;
|
|
2999
|
+
};
|
|
3000
|
+
this.revertDom = (item) => {
|
|
3001
|
+
if (this.dragPrevSibling && this.dragPrevSibling.parentNode === this.el) {
|
|
3002
|
+
this.dragPrevSibling.after(item);
|
|
3003
|
+
}
|
|
3004
|
+
else {
|
|
3005
|
+
this.el.insertBefore(item, this.el.firstChild);
|
|
3006
|
+
}
|
|
3007
|
+
};
|
|
3008
|
+
this.getBodyRowIndex = (item) => {
|
|
3009
|
+
const bodyRows = Array.from(this.el.children).filter((c) => c.tagName.toLowerCase() === XV_DATA_TABLE_ROW_TAG && !c.hasAttribute('slot'));
|
|
3010
|
+
return bodyRows.indexOf(item);
|
|
3011
|
+
};
|
|
3012
|
+
}
|
|
3013
|
+
componentDidLoad() {
|
|
3014
|
+
if (this.reorderable)
|
|
3015
|
+
this.initSortable();
|
|
3016
|
+
}
|
|
3017
|
+
disconnectedCallback() {
|
|
3018
|
+
this.destroySortable();
|
|
3019
|
+
}
|
|
3020
|
+
reorderableChanged(newVal) {
|
|
3021
|
+
if (newVal)
|
|
3022
|
+
this.initSortable();
|
|
3023
|
+
else
|
|
3024
|
+
this.destroySortable();
|
|
3025
|
+
}
|
|
3026
|
+
reorderHandleChanged() {
|
|
3027
|
+
if (!this.reorderable)
|
|
3028
|
+
return;
|
|
3029
|
+
this.destroySortable();
|
|
3030
|
+
this.initSortable();
|
|
283
3031
|
}
|
|
284
3032
|
render() {
|
|
285
|
-
return (index.h(index.Host, { key: '
|
|
3033
|
+
return (index$1.h(index$1.Host, { key: '46b0c11ca4a13dbded5d7b5e3e44650f370a8711', class: "xv-data-table" }, index$1.h("caption", { key: 'aebf6cae0ea46563440ba971624635fa8cbadb72' }, index$1.h("slot", { key: 'af920f9c9705d1811c3980201c5bc4f9bb0bc84c', name: "title" })), index$1.h("div", { key: '89c886de25873e4d514e77572be7ca6de329f096', class: "bar" }, index$1.h("div", { key: '688b92cfc93878847e6925e3120ef3f59696cafd', class: "bar_batch" }, index$1.h("slot", { key: '8909114bda82194459f0338a23db76b527a1fe5a', name: "batch" })), index$1.h("div", { key: '555c3b65badfd9645767e89714a9d2c97dc9f7c1', class: "bar_toolbar" }, index$1.h("slot", { key: '9946f62bd101f59e3622321dfe86efaff2c0574b', name: "toolbar" }))), index$1.h("table", { key: 'a998f83af603ceef8b26667b117eeee99627ed54', role: "table" }, this.columnWidths.length > 0 && (index$1.h("colgroup", { key: '3e46d94f2ed815a4980928f65fefe724d39cd23c' }, this.columnWidths.map((width = 'auto') => index$1.h("col", { style: { width } })))), index$1.h("thead", { key: 'cb1a3b8db2ef9acbf1258e927612f092b8cf9a74' }, index$1.h("slot", { key: '9f18a1f0c2e08be4e6234f6b92184673afb6deb9', name: "header" })), index$1.h("tbody", { key: 'deb98974530349fb5d07edbc64e5d41de7a1ff64' }, index$1.h("slot", { key: 'a9c85de5cdcd0aee2685003775797ef70f0a08f9' })), index$1.h("tfoot", { key: '0e94add0841b8dfe2c47fc50c6ac0e517a8e55af' }, index$1.h("slot", { key: 'd7c33b811006d6b8bac137bded4a9c44a7ea0dc0', name: "footer" }))), !!this.loading && (index$1.h("div", { key: 'a699818d55901f79fabefbd33f5c97f9058fb348', class: "loading" }, index$1.h("xv-loader-v2", { key: 'e8a137029a7f418fe82a21aff761d9c737d05310', size: _vars.SIZE_VAR.LG })))));
|
|
286
3034
|
}
|
|
287
|
-
get el() { return index.getElement(this); }
|
|
3035
|
+
get el() { return index$1.getElement(this); }
|
|
3036
|
+
static get watchers() { return {
|
|
3037
|
+
"reorderable": [{
|
|
3038
|
+
"reorderableChanged": 0
|
|
3039
|
+
}],
|
|
3040
|
+
"reorderHandle": [{
|
|
3041
|
+
"reorderHandleChanged": 0
|
|
3042
|
+
}]
|
|
3043
|
+
}; }
|
|
288
3044
|
};
|
|
289
3045
|
XvDataTable.style = xvDataTableCss();
|
|
290
3046
|
|
|
@@ -292,8 +3048,8 @@ const xvDataTableCellCss = () => `@charset "UTF-8";.xv-container{width:100%;max-
|
|
|
292
3048
|
|
|
293
3049
|
const XvDataTableCell = class {
|
|
294
3050
|
constructor(hostRef) {
|
|
295
|
-
index.registerInstance(this, hostRef);
|
|
296
|
-
this.sortChange = index.createEvent(this, "sortChange", 7);
|
|
3051
|
+
index$1.registerInstance(this, hostRef);
|
|
3052
|
+
this.sortChange = index$1.createEvent(this, "sortChange", 7);
|
|
297
3053
|
}
|
|
298
3054
|
handleSort() {
|
|
299
3055
|
if (this.sort === undefined)
|
|
@@ -304,40 +3060,37 @@ const XvDataTableCell = class {
|
|
|
304
3060
|
this.sort = sort === _vars.XV_SORT_DIR.NONE || sort === _vars.XV_SORT_DIR.DESC
|
|
305
3061
|
? _vars.XV_SORT_DIR.ASC
|
|
306
3062
|
: _vars.XV_SORT_DIR.DESC;
|
|
307
|
-
index$
|
|
3063
|
+
index$2.forEach(this.el.parentElement.children, (cell) => {
|
|
308
3064
|
if (cell !== this.el && cell.hasAttribute('sort')) {
|
|
309
3065
|
cell.setAttribute('sort', 'none');
|
|
310
3066
|
}
|
|
311
3067
|
});
|
|
312
3068
|
if (!this.name)
|
|
313
|
-
this.name = index$
|
|
3069
|
+
this.name = index$2.uidGenerator();
|
|
314
3070
|
this.sortChange.emit(this.sort);
|
|
315
3071
|
}
|
|
316
3072
|
;
|
|
317
3073
|
render() {
|
|
318
|
-
return (index.h(index.Host, { key: 'aad24baff63999cfcabbb17b8d323821847a8dca', role: "cell", style: { width: this.width }, class: {
|
|
3074
|
+
return (index$1.h(index$1.Host, { key: 'aad24baff63999cfcabbb17b8d323821847a8dca', role: "cell", style: { width: this.width }, class: {
|
|
319
3075
|
multiline: this.multiline !== undefined,
|
|
320
3076
|
[`align--${this.align}`]: !!this.align
|
|
321
|
-
} }, !this.multiline || isNaN(this.multiline) ? this.__renderWithTooltip() : (index.h("div", { class: "line-clamp", style: { ['-webkit-line-clamp']: `${this.multiline}` } }, this.__renderWithTooltip()))));
|
|
3077
|
+
} }, !this.multiline || isNaN(this.multiline) ? this.__renderWithTooltip() : (index$1.h("div", { class: "line-clamp", style: { ['-webkit-line-clamp']: `${this.multiline}` } }, this.__renderWithTooltip()))));
|
|
322
3078
|
}
|
|
323
3079
|
__renderWithTooltip() {
|
|
324
3080
|
if (!this.tooltip)
|
|
325
|
-
return index.h("slot", null);
|
|
326
|
-
return (index.h("xv-tooltip-v2", { dashed: true, position: "top-start", message: this.tooltip }, index.h("slot", null)));
|
|
3081
|
+
return index$1.h("slot", null);
|
|
3082
|
+
return (index$1.h("xv-tooltip-v2", { dashed: true, position: "top-start", message: this.tooltip }, index$1.h("slot", null)));
|
|
327
3083
|
}
|
|
328
|
-
get el() { return index.getElement(this); }
|
|
3084
|
+
get el() { return index$1.getElement(this); }
|
|
329
3085
|
};
|
|
330
3086
|
XvDataTableCell.style = xvDataTableCellCss();
|
|
331
3087
|
|
|
332
|
-
const XV_DATA_TABLE_TAG = 'xv-data-table';
|
|
333
|
-
const XV_DATA_TABLE_ROW_TAG = 'xv-data-table-row';
|
|
334
|
-
|
|
335
3088
|
const xvDataTableCollapseCss = () => `.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([collapsed]){display:none}:host([expanded]){display:contents}`;
|
|
336
3089
|
|
|
337
3090
|
const XvDataTableCollapse = class {
|
|
338
3091
|
constructor(hostRef) {
|
|
339
|
-
index.registerInstance(this, hostRef);
|
|
340
|
-
this.collapsedChange = index.createEvent(this, "collapsedChange", 7);
|
|
3092
|
+
index$1.registerInstance(this, hostRef);
|
|
3093
|
+
this.collapsedChange = index$1.createEvent(this, "collapsedChange", 7);
|
|
341
3094
|
this.collapsed = false;
|
|
342
3095
|
}
|
|
343
3096
|
async setCollapsed(collapsed) {
|
|
@@ -351,18 +3104,18 @@ const XvDataTableCollapse = class {
|
|
|
351
3104
|
rows.forEach((row) => row === null || row === void 0 ? void 0 : row.setAttribute('collapsable', ''));
|
|
352
3105
|
}
|
|
353
3106
|
render() {
|
|
354
|
-
return (index.h(index.Host, { key: '17a7f3df09a12f38b7b634a09ac136107b2c8c63', id: this.el.id, part: "xv-collapse", class: this.el.className, collapsed: this.collapsed, expanded: !this.collapsed }, index.h("slot", { key: '5e70be82424d129f3757977c9a7c13d9d71f1b98' })));
|
|
3107
|
+
return (index$1.h(index$1.Host, { key: '17a7f3df09a12f38b7b634a09ac136107b2c8c63', id: this.el.id, part: "xv-collapse", class: this.el.className, collapsed: this.collapsed, expanded: !this.collapsed }, index$1.h("slot", { key: '5e70be82424d129f3757977c9a7c13d9d71f1b98' })));
|
|
355
3108
|
}
|
|
356
|
-
get el() { return index.getElement(this); }
|
|
3109
|
+
get el() { return index$1.getElement(this); }
|
|
357
3110
|
};
|
|
358
3111
|
XvDataTableCollapse.style = xvDataTableCollapseCss();
|
|
359
3112
|
|
|
360
|
-
const xvDataTableRowCss = () => `.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:table-row;background-color:var(--xv-data-table-row-bg, transparent);transition:0.2s ease-in-out background-color}:host .cell-control{font-size:8px;max-width:16px;position:relative;padding-left:calc(var(--xv-data-table-padding-x) + var(--xv-data-table-padding-x) + 10px + 1em);overflow:visible}:host .cell-control_collapse{font-size:inherit;width:1em;height:1em;margin:0;padding:0;position:absolute;overflow:visible;background-color:transparent;outline:none;top:calc(50% - 0.7em);left:var(--xv-data-table-padding-x);display:inline-flex;border-top:none;border-left:none;border-right:2px solid var(--icon-primary, #333);border-bottom:2px solid var(--icon-primary, #333);transform:rotate(45deg);transform-origin:center center;transition:0.2s ease-in-out transform, 0.2s ease-in-out opacity;cursor:pointer;box-sizing:content-box}:host .cell-control_collapse:active{opacity:0.4}:host .cell-control_collapse.open{transform:rotate(-135deg)}:host .cell-control_checkbox{display:flex}:host(.hover:not(.header):hover){background-color:var(--layer-hover-01, #E9E9E9)}:host(.checked){background-color:var(--layer-selected-02, #E3E3E3)}:host(.hover.checked:hover){background-color:var(--layer-selected-hover-02, #DADADA)}:host(.group:not(.checked)){background-color:var(--layer-accent-01, #F7F7F7)}:host(.hover.group:not(.checked):hover){background-color:var(--layer-accent-hover-01, #E3E3E3)}:host(.header),:host(.footer),:host(.footer:hover),:host(.footer.hover),:host(.footer.hover:hover){background-color:var(--layer-accent-02, #E3E3E3)}:host(.disabled:not(.header):not(.footer)){opacity:0.5;cursor:not-allowed;user-select:none}`;
|
|
3113
|
+
const xvDataTableRowCss = () => `.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:table-row;background-color:var(--xv-data-table-row-bg, transparent);transition:0.2s ease-in-out background-color}:host .cell-control{font-size:8px;max-width:16px;position:relative;padding-left:calc(var(--xv-data-table-padding-x) + var(--xv-data-table-padding-x) + 10px + 1em);overflow:visible}:host .cell-control_collapse{font-size:inherit;width:1em;height:1em;margin:0;padding:0;position:absolute;overflow:visible;background-color:transparent;outline:none;top:calc(50% - 0.7em);left:var(--xv-data-table-padding-x);display:inline-flex;border-top:none;border-left:none;border-right:2px solid var(--icon-primary, #333);border-bottom:2px solid var(--icon-primary, #333);transform:rotate(45deg);transform-origin:center center;transition:0.2s ease-in-out transform, 0.2s ease-in-out opacity;cursor:pointer;box-sizing:content-box}:host .cell-control_collapse:active{opacity:0.4}:host .cell-control_collapse.open{transform:rotate(-135deg)}:host .cell-control_checkbox{display:flex}:host .cell-control_drag{position:absolute;top:50%;left:var(--xv-data-table-padding-x);transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;padding:4px;line-height:0;color:var(--icon-secondary, #6f6f6f);cursor:grab;touch-action:none;transition:0.15s ease-in-out color}:host .cell-control_drag:hover{color:var(--icon-primary, #333)}:host .cell-control_drag:active{cursor:grabbing}:host(.reorder-row){cursor:grab}:host(.reorder-row):active{cursor:grabbing}:host(.xv-row-ghost){opacity:0.4;background-color:var(--layer-accent-01, #F7F7F7)}:host(.xv-row-chosen){background-color:var(--layer-hover-01, #E9E9E9)}:host(.xv-row-drag){box-shadow:0 4px 12px rgba(0, 0, 0, 0.12);cursor:grabbing}:host(.hover:not(.header):hover){background-color:var(--layer-hover-01, #E9E9E9)}:host(.checked){background-color:var(--layer-selected-02, #E3E3E3)}:host(.hover.checked:hover){background-color:var(--layer-selected-hover-02, #DADADA)}:host(.group:not(.checked)){background-color:var(--layer-accent-01, #F7F7F7)}:host(.hover.group:not(.checked):hover){background-color:var(--layer-accent-hover-01, #E3E3E3)}:host(.header),:host(.footer),:host(.footer:hover),:host(.footer.hover),:host(.footer.hover:hover){background-color:var(--layer-accent-02, #E3E3E3)}:host(.disabled:not(.header):not(.footer)){opacity:0.5;cursor:not-allowed;user-select:none}`;
|
|
361
3114
|
|
|
362
3115
|
const XvDataTableRow = class {
|
|
363
3116
|
constructor(hostRef) {
|
|
364
|
-
index.registerInstance(this, hostRef);
|
|
365
|
-
this.check = index.createEvent(this, "check", 7);
|
|
3117
|
+
index$1.registerInstance(this, hostRef);
|
|
3118
|
+
this.check = index$1.createEvent(this, "check", 7);
|
|
366
3119
|
this.checked = false;
|
|
367
3120
|
this.partial = false;
|
|
368
3121
|
this.hover = false;
|
|
@@ -373,6 +3126,8 @@ const XvDataTableRow = class {
|
|
|
373
3126
|
this.readonly = false;
|
|
374
3127
|
this.required = false;
|
|
375
3128
|
this.collapsed = false;
|
|
3129
|
+
this.reorderable = false;
|
|
3130
|
+
this.reorderHandleMode = 'icon';
|
|
376
3131
|
this.collapseClick = async () => {
|
|
377
3132
|
var _a;
|
|
378
3133
|
if (!this.collapse || !this.collapseEl)
|
|
@@ -391,21 +3146,24 @@ const XvDataTableRow = class {
|
|
|
391
3146
|
await ((_a = this.collapseEl) === null || _a === void 0 ? void 0 : _a.setCollapsed(this.collapsed));
|
|
392
3147
|
};
|
|
393
3148
|
this.setInitialState = () => {
|
|
394
|
-
var _a;
|
|
3149
|
+
var _a, _b, _c;
|
|
395
3150
|
if (this.collapse && !this.collapseEl) {
|
|
396
3151
|
this.collapseEl = this.el.parentElement.querySelector(`xv-data-table-collapse${this.collapse}`);
|
|
397
3152
|
this.collapsed = (_a = this.collapseEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('collapsed');
|
|
398
3153
|
}
|
|
3154
|
+
const table = this.el.closest(XV_DATA_TABLE_TAG);
|
|
399
3155
|
if (!this.hover) {
|
|
400
|
-
|
|
401
|
-
this.hover = table.hasAttribute('hover');
|
|
3156
|
+
this.hover = (_b = table === null || table === void 0 ? void 0 : table.hasAttribute('hover')) !== null && _b !== void 0 ? _b : false;
|
|
402
3157
|
}
|
|
3158
|
+
const isDirectChild = this.el.parentElement === table;
|
|
3159
|
+
this.reorderable = isDirectChild && ((_c = table === null || table === void 0 ? void 0 : table.hasAttribute('reorderable')) !== null && _c !== void 0 ? _c : false);
|
|
3160
|
+
this.reorderHandleMode = (table === null || table === void 0 ? void 0 : table.getAttribute('reorder-handle')) || 'icon';
|
|
403
3161
|
};
|
|
404
3162
|
this.checkedChangeHandle = ({ detail: checked }) => {
|
|
405
3163
|
if (!checked && this.partial)
|
|
406
3164
|
this.partial = checked;
|
|
407
3165
|
if (!this.name)
|
|
408
|
-
this.name = index$
|
|
3166
|
+
this.name = index$2.uidGenerator();
|
|
409
3167
|
this.check.emit({
|
|
410
3168
|
checked,
|
|
411
3169
|
name: this.name,
|
|
@@ -424,16 +3182,22 @@ const XvDataTableRow = class {
|
|
|
424
3182
|
await this.collapseEl.setCollapsed(true);
|
|
425
3183
|
}
|
|
426
3184
|
render() {
|
|
427
|
-
|
|
3185
|
+
const isHeader = this.el.slot === 'header' || !!this.header;
|
|
3186
|
+
const isFooter = this.el.slot === 'footer' || !!this.footer;
|
|
3187
|
+
const isGroup = !!this.collapse || !!this.group;
|
|
3188
|
+
const isDraggableRow = this.reorderable && !isHeader && !isFooter && !this.group;
|
|
3189
|
+
const showHandleCell = this.reorderable && this.reorderHandleMode === 'icon';
|
|
3190
|
+
return (index$1.h(index$1.Host, { key: '74ea5e91d4423b4f5751fcaf5bce50e11843805c', role: "row", part: "xv-row", class: {
|
|
428
3191
|
checked: this.checked,
|
|
429
3192
|
hover: this.hover,
|
|
430
3193
|
disabled: this.disabled,
|
|
431
|
-
group:
|
|
432
|
-
header:
|
|
433
|
-
footer:
|
|
434
|
-
|
|
3194
|
+
group: isGroup,
|
|
3195
|
+
header: isHeader,
|
|
3196
|
+
footer: isFooter,
|
|
3197
|
+
'reorder-row': isDraggableRow && this.reorderHandleMode === 'row',
|
|
3198
|
+
} }, showHandleCell && (index$1.h("xv-data-table-cell", { key: '806087b882248f7f1317a3ad23c64f3e0d550d76', width: "16px", class: "cell-control cell-control--drag" }, isDraggableRow && (index$1.h("span", { key: 'ad6ab54599047674f535397f705bf78f5169e3fc', class: `cell-control_drag ${XV_ROW_DRAG_HANDLE_CLASS}`, "aria-label": "Drag to reorder" }, index$1.h("svg", { key: 'b6c038a701bf7b24f3639eca9c772c46485b6007', viewBox: "0 0 8 14", width: "8", height: "14", fill: "currentColor", "aria-hidden": "true" }, index$1.h("circle", { key: '6a036769cc49e19fb5cf53d41b03d9822c057857', cx: "2", cy: "2", r: "1.2" }), index$1.h("circle", { key: '20b8ee5561fe23f75db9b9d98e1c7211b43986dc', cx: "6", cy: "2", r: "1.2" }), index$1.h("circle", { key: '6f685e7cb62f3093d51b92be0519841aac132a41', cx: "2", cy: "7", r: "1.2" }), index$1.h("circle", { key: 'e93f642c885bb32dd68fd7ffe38c528b0f06f5e6', cx: "6", cy: "7", r: "1.2" }), index$1.h("circle", { key: '4ed95d06db9caff9b7f672be9faba43c62b5f10e', cx: "2", cy: "12", r: "1.2" }), index$1.h("circle", { key: 'ad4574700d5497d8dd2b050a438ebe45c9d0554a', cx: "6", cy: "12", r: "1.2" })))))), (!!this.variant || this.collapsable) && (index$1.h("xv-data-table-cell", { key: '96bc6bb3c9b05147940691f57b222e3b984d4597', width: !!this.variant ? '16px' : '0', class: "cell-control" }, !!this.collapse && (index$1.h("button", { key: '79c7b71873a2f07decb6fc71fb8842b8f94f7f4d', class: { 'cell-control_collapse': true, open: !this.collapsed }, onClick: this.collapseClick })), this.variant === 'checkbox' && (index$1.h("xv-checkbox-v2", { key: '950ab4b841ea1c1f71ca968db8c3e88827a420e1', 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: 'aa156d42a6c407d7fe213d165d8a4abab3b3aed8', onSlotchange: this.setInitialState })));
|
|
435
3199
|
}
|
|
436
|
-
get el() { return index.getElement(this); }
|
|
3200
|
+
get el() { return index$1.getElement(this); }
|
|
437
3201
|
};
|
|
438
3202
|
XvDataTableRow.style = xvDataTableRowCss();
|
|
439
3203
|
|
|
@@ -77352,9 +80116,9 @@ const WEEK = Array
|
|
|
77352
80116
|
const DEF_FORMAT = 'yyyy-MM-dd'; // the same browser input are using
|
|
77353
80117
|
const XvDatepicker = class {
|
|
77354
80118
|
constructor(hostRef) {
|
|
77355
|
-
index.registerInstance(this, hostRef);
|
|
77356
|
-
this.valueChange = index.createEvent(this, "valueChange", 7);
|
|
77357
|
-
this.xvBlur = index.createEvent(this, "xvBlur", 7);
|
|
80119
|
+
index$1.registerInstance(this, hostRef);
|
|
80120
|
+
this.valueChange = index$1.createEvent(this, "valueChange", 7);
|
|
80121
|
+
this.xvBlur = index$1.createEvent(this, "xvBlur", 7);
|
|
77358
80122
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
77359
80123
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
77360
80124
|
}
|
|
@@ -77486,8 +80250,10 @@ const XvDatepicker = class {
|
|
|
77486
80250
|
get isPrevDisabled() {
|
|
77487
80251
|
if (!this.minDate)
|
|
77488
80252
|
return false;
|
|
77489
|
-
|
|
77490
|
-
|
|
80253
|
+
// disable only when the WHOLE previous month is before min — its end must
|
|
80254
|
+
// be compared, otherwise a mid-month min blocks navigating to its own month
|
|
80255
|
+
const prevMonthEnd = dateFns.endOfMonth(dateFns.addMonths(this.month, -1));
|
|
80256
|
+
return dateFns.isBefore(prevMonthEnd, this.minDate);
|
|
77491
80257
|
}
|
|
77492
80258
|
get isNextDisabled() {
|
|
77493
80259
|
if (!this.maxDate)
|
|
@@ -77579,12 +80345,12 @@ const XvDatepicker = class {
|
|
|
77579
80345
|
}
|
|
77580
80346
|
render() {
|
|
77581
80347
|
const [start, end] = this.value;
|
|
77582
|
-
return (index.h(index.Host, { key: '
|
|
80348
|
+
return (index$1.h(index$1.Host, { key: '4e1b7968bb670a8fc361c929fcffb804622abcfd', class: { disabled: !!this.disabled }, tabindex: this.disabled ? '-1' : undefined }, index$1.h("div", { key: '9a9f2dc31c4d48f5a78ffe904ebbac1c47902c02', "aria-controls": "popover", class: "control" }, this.label && index$1.h("label", { key: 'e46e942c45de9d58f6bf131d8f9bf68edc9aeef2', class: "control_label" }, this.label), index$1.h("div", { key: '71eb87432754769fe562ed71137d6df64183772d', class: {
|
|
77583
80349
|
'control_field': true,
|
|
77584
80350
|
loading: this.loading,
|
|
77585
80351
|
error: !!this.error || !!this.localError,
|
|
77586
80352
|
warning: this.warning !== undefined,
|
|
77587
|
-
}, onClick: this.handleOpen, ref: (el) => (this.controlEl = el) }, index.h("input", { key: '
|
|
80353
|
+
}, onClick: this.handleOpen, ref: (el) => (this.controlEl = el) }, index$1.h("input", { key: '0908d3af22f8aaf8c5407a8b66ac56c3a34b7d24', 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: '1841a2f65ddb657e0aeff38cc34e90c01019815b', 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: '13766133adfab4a2ce2c4e038871699d360f22ce' }, this.helper && index$1.h("p", { key: '274c7dfcc09ef35b9f0cdbba8454c2fc385370f7', class: "control_message helper" }, this.helper), (this.error || this.warning || this.localError) && (index$1.h("p", { key: '3ed6f0c1f53f15c22e60fabf5f476bb663b8d24c', class: { control_message: true, error: !!this.error || !!this.localError } }, this.error || this.localError || this.warning))))), index$1.h("div", { key: '5762ec14597d9418dfbd04a31db44d299aa88625', role: "dialog", class: { popover: true, open: this.open }, ref: (el) => (this.popoverEl = el) }, index$1.h("div", { key: '8ad3a1e6c31b982755f7b82b7cb16644c4f23f38', class: "header" }, index$1.h("xv-button-v2", { key: 'db4d454e82ca8ec26fcf4f291ac21146dcb14a3b', tabindex: this.open ? undefined : '-1', disabled: this.isPrevDisabled, variant: "ghost", onClick: this.prevMonth }, index$1.h("span", { key: 'e80d1efac41ea1e4aa7aa83a22cd5f7d9db40553', slot: "icon-left", class: "header_icon prev" })), index$1.h("p", { key: '37505645ea5e5181a0797560aeada8b0f22ef92e', class: "header_date" }, dateFns.format(this.month, 'LLLL', { locale: localeExports.de }), index$1.h("input", { key: 'b3ccae4078f4ce61ec85a79abe16a4c406553f6f', tabindex: this.open ? undefined : '-1', type: "number", value: this.month.getFullYear(), onInput: this.handleYearChange, onBlur: this.handleYearBlur })), index$1.h("xv-button-v2", { key: '8ece0927ba0dc434765a7b2fea50ad1420913cbe', tabindex: this.open ? undefined : '-1', disabled: this.isNextDisabled, variant: "ghost", onClick: this.nextMonth }, index$1.h("span", { key: 'b471b2d6137c5c52f5089d821225d21c93cb1f4d', slot: "icon-left", class: "header_icon next" }))), index$1.h("div", { key: 'd7de53d7865a5c033fb0e5e2c416eee8dff3b60a', class: "week" }, index$1.h("p", { key: '8d4d8b3b9e42c040435d2e6813aa96bcaca2144d', class: "week_day" }), WEEK.map((day) => index$1.h("p", { class: "week_day" }, day, "."))), index$1.h("div", { key: '63b91609bc0e2709952f8b66b20997b16b960260', 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: {
|
|
77588
80354
|
'week_day': true,
|
|
77589
80355
|
inRange: this.variant === 'range' && dateFns.isWithinInterval(day.date, { start, end }),
|
|
77590
80356
|
isToday: day.isToday,
|
|
@@ -77593,7 +80359,7 @@ const XvDatepicker = class {
|
|
|
77593
80359
|
} }, day.day))))))));
|
|
77594
80360
|
}
|
|
77595
80361
|
static get formAssociated() { return true; }
|
|
77596
|
-
get el() { return index.getElement(this); }
|
|
80362
|
+
get el() { return index$1.getElement(this); }
|
|
77597
80363
|
static get watchers() { return {
|
|
77598
80364
|
"open": [{
|
|
77599
80365
|
"openChange": 0
|
|
@@ -77614,9 +80380,9 @@ const xvDropdownCss = () => `.xv-container{width:100%;max-width:1170px;margin-in
|
|
|
77614
80380
|
|
|
77615
80381
|
const XvDropdown = class {
|
|
77616
80382
|
constructor(hostRef) {
|
|
77617
|
-
index.registerInstance(this, hostRef);
|
|
77618
|
-
this.changeSelection = index.createEvent(this, "changeSelection", 7);
|
|
77619
|
-
this.openChange = index.createEvent(this, "openChange", 3);
|
|
80383
|
+
index$1.registerInstance(this, hostRef);
|
|
80384
|
+
this.changeSelection = index$1.createEvent(this, "changeSelection", 7);
|
|
80385
|
+
this.openChange = index$1.createEvent(this, "openChange", 3);
|
|
77620
80386
|
this.searchPlaceholder = 'Suchen';
|
|
77621
80387
|
this.size = _vars.SIZE_VAR.MD;
|
|
77622
80388
|
this.variant = 'default';
|
|
@@ -77652,7 +80418,7 @@ const XvDropdown = class {
|
|
|
77652
80418
|
};
|
|
77653
80419
|
this.clearHandle = () => {
|
|
77654
80420
|
const options = this.el.querySelectorAll(DropdownItemSelector);
|
|
77655
|
-
index$
|
|
80421
|
+
index$2.forEach(options, (option) => index$2.setAttr(option, 'selected', false));
|
|
77656
80422
|
this.selectedMap.clear();
|
|
77657
80423
|
this.changeSelection.emit(this.setSelected(this.selectedMap, options));
|
|
77658
80424
|
};
|
|
@@ -77695,10 +80461,10 @@ const XvDropdown = class {
|
|
|
77695
80461
|
}
|
|
77696
80462
|
}
|
|
77697
80463
|
multipleChangeHandle() {
|
|
77698
|
-
index$
|
|
77699
|
-
index$
|
|
80464
|
+
index$2.forEach(this.el.querySelectorAll(DropdownItemSelector), (option) => {
|
|
80465
|
+
index$2.setAttr(option, 'size', this.size);
|
|
77700
80466
|
if (this.multiple)
|
|
77701
|
-
index$
|
|
80467
|
+
index$2.setAttr(option, 'multiple', this.multiple);
|
|
77702
80468
|
});
|
|
77703
80469
|
}
|
|
77704
80470
|
valueChange() {
|
|
@@ -77713,14 +80479,14 @@ const XvDropdown = class {
|
|
|
77713
80479
|
if (values.every((v) => this.selectedMap.has(v)))
|
|
77714
80480
|
return;
|
|
77715
80481
|
const selected = new Set(values);
|
|
77716
|
-
index$
|
|
80482
|
+
index$2.forEach(options, (option) => {
|
|
77717
80483
|
const value = option.getAttribute('value');
|
|
77718
80484
|
const dropdownItemData = {
|
|
77719
80485
|
value,
|
|
77720
80486
|
text: option.innerText || '',
|
|
77721
80487
|
selected: selected.has(Number(value)) || selected.has(value),
|
|
77722
80488
|
};
|
|
77723
|
-
index$
|
|
80489
|
+
index$2.setAttr(option, 'selected', dropdownItemData.selected);
|
|
77724
80490
|
if (dropdownItemData.selected) {
|
|
77725
80491
|
this.selectedMap.set(dropdownItemData.value, dropdownItemData);
|
|
77726
80492
|
}
|
|
@@ -77757,12 +80523,12 @@ const XvDropdown = class {
|
|
|
77757
80523
|
this.open = false;
|
|
77758
80524
|
}
|
|
77759
80525
|
const optionElements = this.el.querySelectorAll(DropdownItemSelector);
|
|
77760
|
-
index$
|
|
80526
|
+
index$2.forEach(optionElements, (option) => index$2.setAttr(option, 'selected', this.selectedMap.has(option.getAttribute('value'))));
|
|
77761
80527
|
this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));
|
|
77762
80528
|
}
|
|
77763
80529
|
/* endregion Search methods */
|
|
77764
80530
|
render() {
|
|
77765
|
-
return (index.h(index.Host, { key: '
|
|
80531
|
+
return (index$1.h(index$1.Host, { key: 'fd9278225b7c1e0499f11a43b447b792ffecbecf', class: { 'xv-dropdown': true, [this.variant]: !!this.variant }, role: "combobox", size: this.size, open: this.open, error: !!this.error, disabled: this.disabled, tabindex: (this.disabled || this.readonly) ? -1 : false }, (this.label || this.info) && (index$1.h("label", { key: '4e1e6dd506e7c0ca12f24717a4ac0c507ed77150', class: "label" }, index$1.h("slot", { key: '7a7f9d886c871616a0214264fc012495b77d48a8', name: "label" }, this.label), this.info && index$1.h("xv-tooltip-v2", { key: '97b64ef9259c2924fa9cc388e029775f22d67f77', class: "label_info", message: this.info }))), index$1.h("div", { key: '57aa25e912aa840bbe049fa30248315ad1962f79', 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: 'ccdd67146706bde7a0b1d68db1033700262db1ad', 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: '2594b21e9b9150a1d50099603b964177d467fb7b', 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 16 16" }, index$1.h("path", { key: 'df82db7fb2c6a43e97484b5f8f987bd9f0aaae90', d: "M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" }))), this.open && index$1.h("div", { key: '841b3935e0140289491a79711c5a81f3d838cb6e', class: "options" }, this.search && (index$1.h("div", { key: '836c860255c81b585525a7aa0a15ed4e9c4153b8', class: "options_search" }, index$1.h("xv-text-input-v2", { key: '24e362915e2b2137fe4b96073b4f358e757e68e1', type: "search", 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: '4e2e576aaeb17740cf79c045edbe19c48eb4c346', class: "helper" }, this.error || this.warning || this.helper))));
|
|
77766
80532
|
}
|
|
77767
80533
|
componentDidLoad() {
|
|
77768
80534
|
this.syncOpenState();
|
|
@@ -77775,17 +80541,17 @@ const XvDropdown = class {
|
|
|
77775
80541
|
}
|
|
77776
80542
|
_renderIcon() {
|
|
77777
80543
|
if (this.loading) {
|
|
77778
|
-
return index.h("xv-loader-v2", { class: "control_icon error", size: _vars.SIZE_VAR.XS });
|
|
80544
|
+
return index$1.h("xv-loader-v2", { class: "control_icon error", size: _vars.SIZE_VAR.XS });
|
|
77779
80545
|
}
|
|
77780
80546
|
if (!!this.error) {
|
|
77781
|
-
return (index.h("svg", { class: "control_icon error", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index.h("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" })));
|
|
80547
|
+
return (index$1.h("svg", { class: "control_icon error", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index$1.h("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" })));
|
|
77782
80548
|
}
|
|
77783
80549
|
if (!this.error && !!this.warning) {
|
|
77784
|
-
return (index.h("svg", { class: "control_icon warning", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index.h("path", { fill: "currentColor", d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" })));
|
|
80550
|
+
return (index$1.h("svg", { class: "control_icon warning", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index$1.h("path", { fill: "currentColor", d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" })));
|
|
77785
80551
|
}
|
|
77786
80552
|
return undefined;
|
|
77787
80553
|
}
|
|
77788
|
-
get el() { return index.getElement(this); }
|
|
80554
|
+
get el() { return index$1.getElement(this); }
|
|
77789
80555
|
static get watchers() { return {
|
|
77790
80556
|
"open": [{
|
|
77791
80557
|
"openChangeHandle": 0
|
|
@@ -77804,8 +80570,8 @@ const xvDropdownItemCss = () => `.xv-container{width:100%;max-width:1170px;margi
|
|
|
77804
80570
|
|
|
77805
80571
|
const XvDropdownItem = class {
|
|
77806
80572
|
constructor(hostRef) {
|
|
77807
|
-
index.registerInstance(this, hostRef);
|
|
77808
|
-
this.itemSelected = index.createEvent(this, "itemSelected", 7);
|
|
80573
|
+
index$1.registerInstance(this, hostRef);
|
|
80574
|
+
this.itemSelected = index$1.createEvent(this, "itemSelected", 7);
|
|
77809
80575
|
this.disabled = false;
|
|
77810
80576
|
this.value = '';
|
|
77811
80577
|
this.selected = false;
|
|
@@ -77822,13 +80588,13 @@ const XvDropdownItem = class {
|
|
|
77822
80588
|
});
|
|
77823
80589
|
}
|
|
77824
80590
|
render() {
|
|
77825
|
-
return (index.h(index.Host, { key: '
|
|
80591
|
+
return (index$1.h(index$1.Host, { key: '355cf1fe5be6d5fda5fd30f6a892b2591d94b36b', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, this.multiple && (index$1.h("xv-checkbox-v2", { key: '957c7fe39439b9ce115176e5c4c609635f0aa482', class: "multiple-check", size: this.size, checked: this.selected, disabled: this.disabled })), index$1.h("slot", { key: '75a513ed8ca0e9e6bea629a9fb0c5673965a960a' }), (!this.multiple && this.selected) && index$1.h("span", { key: '3368c59f452b9cdcb5fdf8ccbd4ea918ba0bb45e', class: "checkmark far fa-check" })));
|
|
77826
80592
|
}
|
|
77827
80593
|
componentWillLoad() {
|
|
77828
80594
|
if (!this.value)
|
|
77829
80595
|
this.value = this.el.innerText;
|
|
77830
80596
|
}
|
|
77831
|
-
get el() { return index.getElement(this); }
|
|
80597
|
+
get el() { return index$1.getElement(this); }
|
|
77832
80598
|
};
|
|
77833
80599
|
XvDropdownItem.style = xvDropdownItemCss();
|
|
77834
80600
|
|
|
@@ -77842,9 +80608,9 @@ const xvFileUploaderCss = () => `.xv-container{width:100%;max-width:1170px;margi
|
|
|
77842
80608
|
|
|
77843
80609
|
const XvFileUploader = class {
|
|
77844
80610
|
constructor(hostRef) {
|
|
77845
|
-
index.registerInstance(this, hostRef);
|
|
77846
|
-
this.filesChange = index.createEvent(this, "filesChange", 7);
|
|
77847
|
-
this.fileRemoved = index.createEvent(this, "fileRemoved", 7);
|
|
80611
|
+
index$1.registerInstance(this, hostRef);
|
|
80612
|
+
this.filesChange = index$1.createEvent(this, "filesChange", 7);
|
|
80613
|
+
this.fileRemoved = index$1.createEvent(this, "fileRemoved", 7);
|
|
77848
80614
|
this.variant = XvFileUploaderVariants.BUTTON;
|
|
77849
80615
|
this.size = _vars.SIZE_VAR.MD;
|
|
77850
80616
|
this.accept = [];
|
|
@@ -77926,35 +80692,35 @@ const XvFileUploader = class {
|
|
|
77926
80692
|
}
|
|
77927
80693
|
}
|
|
77928
80694
|
render() {
|
|
77929
|
-
return (index.h(index.Host, { key: '
|
|
80695
|
+
return (index$1.h(index$1.Host, { key: '4dcf9f36c770aab56b19334a8cf8e71da5264195', class: { 'upload-wrapper': true, [`uploader-${this.size}`]: true, disabled: !!this.disabled, error: !!this.error } }, this.label && index$1.h("label", { key: 'bfce6e9fab5884fcaf6b221251caa5dd5f896f3a', class: "label" }, this.label), this.description && index$1.h("p", { key: '21fa2b5e9ca8aeb2be2c405878fba66bb012f825', 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: '1a41f2dc19ab2176d63edaeb1973daf753ac28fb', 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: '67b83e7841948fea6ec34ba51cd838561039e1ff', class: "global-error" }, this.error), index$1.h("ul", { key: 'fbdb04a04604f64a995d6c8044c04fcf566c7e01', class: "file-list" }, this.files.map((file, index) => {
|
|
77930
80696
|
var _a, _b;
|
|
77931
|
-
return (index.h("li", { class: { file: true, withError: !!(((_a = this.errors) === null || _a === void 0 ? void 0 : _a[index
|
|
80697
|
+
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)));
|
|
77932
80698
|
}))));
|
|
77933
80699
|
}
|
|
77934
|
-
_renderLoaderState(index
|
|
80700
|
+
_renderLoaderState(index) {
|
|
77935
80701
|
var _a, _b, _c;
|
|
77936
|
-
const state = ((_a = this.loadingStates) === null || _a === void 0 ? void 0 : _a[index
|
|
77937
|
-
const errorIcon = ((_b = this.errors) === null || _b === void 0 ? void 0 : _b[index
|
|
80702
|
+
const state = ((_a = this.loadingStates) === null || _a === void 0 ? void 0 : _a[index]) || null;
|
|
80703
|
+
const errorIcon = ((_b = this.errors) === null || _b === void 0 ? void 0 : _b[index]) || ((_c = this.errorMessages) === null || _c === void 0 ? void 0 : _c[index]) ? (index$1.h("svg", { class: "file_container_errorIcon", width: "16", height: "16", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index$1.h("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" }))) : null;
|
|
77938
80704
|
switch (state) {
|
|
77939
80705
|
case 'loading':
|
|
77940
|
-
return (index.h(index.Fragment, null, errorIcon, index.h("xv-loader-v2", { size: _vars.SIZE_VAR.XS })));
|
|
80706
|
+
return (index$1.h(index$1.Fragment, null, errorIcon, index$1.h("xv-loader-v2", { size: _vars.SIZE_VAR.XS })));
|
|
77941
80707
|
case 'success':
|
|
77942
|
-
return (index.h(index.Fragment, null, errorIcon, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 18 16", fill: "none" }, index.h("path", { d: "M9 16C6.125 16 3.5 14.5 2.0625 12C0.625 9.53125 0.625 6.5 2.0625 4C3.5 1.53125 6.125 0 9 0C11.8438 0 14.4688 1.53125 15.9062 4C17.3438 6.5 17.3438 9.53125 15.9062 12C14.4688 14.5 11.8438 16 9 16ZM12.5312 6.53125H12.5C12.8125 6.25 12.8125 5.78125 12.5 5.46875C12.2188 5.1875 11.75 5.1875 11.4688 5.46875L8 8.96875L6.53125 7.5C6.21875 7.1875 5.75 7.1875 5.46875 7.5C5.15625 7.78125 5.15625 8.25 5.46875 8.53125L7.46875 10.5312C7.75 10.8438 8.21875 10.8438 8.53125 10.5312L12.5312 6.53125Z", fill: "#97BF0D" })), index.h("xv-button-v2", { variant: "ghost", size: _vars.SIZE_VAR.XS, onClick: () => this.removeFile(index
|
|
80708
|
+
return (index$1.h(index$1.Fragment, null, errorIcon, index$1.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 18 16", fill: "none" }, index$1.h("path", { d: "M9 16C6.125 16 3.5 14.5 2.0625 12C0.625 9.53125 0.625 6.5 2.0625 4C3.5 1.53125 6.125 0 9 0C11.8438 0 14.4688 1.53125 15.9062 4C17.3438 6.5 17.3438 9.53125 15.9062 12C14.4688 14.5 11.8438 16 9 16ZM12.5312 6.53125H12.5C12.8125 6.25 12.8125 5.78125 12.5 5.46875C12.2188 5.1875 11.75 5.1875 11.4688 5.46875L8 8.96875L6.53125 7.5C6.21875 7.1875 5.75 7.1875 5.46875 7.5C5.15625 7.78125 5.15625 8.25 5.46875 8.53125L7.46875 10.5312C7.75 10.8438 8.21875 10.8438 8.53125 10.5312L12.5312 6.53125Z", fill: "#97BF0D" })), index$1.h("xv-button-v2", { variant: "ghost", size: _vars.SIZE_VAR.XS, onClick: () => this.removeFile(index) }, index$1.h("span", { slot: "icon-left" }, "\u00D7"))));
|
|
77943
80709
|
case 'uploaded':
|
|
77944
80710
|
default:
|
|
77945
|
-
return (index.h(index.Fragment, null, errorIcon, index.h("xv-button-v2", { variant: "ghost", size: _vars.SIZE_VAR.XS, onClick: () => this.removeFile(index
|
|
80711
|
+
return (index$1.h(index$1.Fragment, null, errorIcon, index$1.h("xv-button-v2", { variant: "ghost", size: _vars.SIZE_VAR.XS, onClick: () => this.removeFile(index) }, index$1.h("span", { slot: "icon-left" }, "\u00D7"))));
|
|
77946
80712
|
}
|
|
77947
80713
|
}
|
|
77948
|
-
_renderError(index
|
|
80714
|
+
_renderError(index) {
|
|
77949
80715
|
var _a, _b;
|
|
77950
|
-
const error = ((_a = this.errors) === null || _a === void 0 ? void 0 : _a[index
|
|
80716
|
+
const error = ((_a = this.errors) === null || _a === void 0 ? void 0 : _a[index]) || ((_b = this.errorMessages) === null || _b === void 0 ? void 0 : _b[index]);
|
|
77951
80717
|
if (!error)
|
|
77952
80718
|
return;
|
|
77953
80719
|
if (typeof error === 'object') {
|
|
77954
|
-
return (index.h("div", { class: "error-container" }, index.h("p", { class: "error-container_primary" }, error.primary), index.h("p", { class: "error-container_secondary" }, error.secondary)));
|
|
80720
|
+
return (index$1.h("div", { class: "error-container" }, index$1.h("p", { class: "error-container_primary" }, error.primary), index$1.h("p", { class: "error-container_secondary" }, error.secondary)));
|
|
77955
80721
|
}
|
|
77956
80722
|
if (typeof error === 'string') {
|
|
77957
|
-
return (index.h("div", { class: "error-container" }, index.h("p", { class: "error-container_primary" }, error)));
|
|
80723
|
+
return (index$1.h("div", { class: "error-container" }, index$1.h("p", { class: "error-container_primary" }, error)));
|
|
77958
80724
|
}
|
|
77959
80725
|
return null;
|
|
77960
80726
|
}
|
|
@@ -77965,7 +80731,7 @@ const xvFooterCss = () => `.xv-container{width:100%;max-width:1170px;margin-inli
|
|
|
77965
80731
|
|
|
77966
80732
|
const Xvfooter = class {
|
|
77967
80733
|
constructor(hostRef) {
|
|
77968
|
-
index.registerInstance(this, hostRef);
|
|
80734
|
+
index$1.registerInstance(this, hostRef);
|
|
77969
80735
|
this.openCookieSettings = (e) => {
|
|
77970
80736
|
var _a;
|
|
77971
80737
|
e.preventDefault();
|
|
@@ -77974,9 +80740,9 @@ const Xvfooter = class {
|
|
|
77974
80740
|
}
|
|
77975
80741
|
async handleLoadData() {
|
|
77976
80742
|
const baseUrl = 'https://xvsitefinitystorage.blob.core.windows.net/production/components/xv-footer/';
|
|
77977
|
-
const brand = index$
|
|
80743
|
+
const brand = index$2.resolveWhitelabel() || 'Xv';
|
|
77978
80744
|
try {
|
|
77979
|
-
this.data = await index$
|
|
80745
|
+
this.data = await index$2.api.get(`${baseUrl}xv-footer.data.${brand}.json`, { raw: true });
|
|
77980
80746
|
return;
|
|
77981
80747
|
}
|
|
77982
80748
|
catch (err) {
|
|
@@ -77986,7 +80752,7 @@ const Xvfooter = class {
|
|
|
77986
80752
|
}
|
|
77987
80753
|
// Fallback to default brand
|
|
77988
80754
|
try {
|
|
77989
|
-
this.data = await index$
|
|
80755
|
+
this.data = await index$2.api.get(`${baseUrl}xv-footer.data.Xv.json`, { raw: true });
|
|
77990
80756
|
}
|
|
77991
80757
|
catch (finalErr) {
|
|
77992
80758
|
console.error('Fallback footer load failed:', finalErr);
|
|
@@ -77998,18 +80764,18 @@ const Xvfooter = class {
|
|
|
77998
80764
|
render() {
|
|
77999
80765
|
const { categories, socials, logo, legalLinks, payments, partners, advantages } = this.data || {};
|
|
78000
80766
|
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));
|
|
78001
|
-
return (index.h("footer", { key: '
|
|
80767
|
+
return (index$1.h("footer", { key: '31f496895b343c1b5a26cf04a73acd82df4c0305', class: "xv-footer" }, (advantages === null || advantages === void 0 ? void 0 : advantages.length) > 0 && (index$1.h("div", { key: 'd1203c0a5596c41106c1433b4b7c4ae5432250ef', class: "xv-footer-advantages" }, index$1.h("div", { key: '288c8cc9b0507063e260a40dc105723eb59f5f1a', class: "xv-container" }, this._renderFooterList(advantages, { itemWithLabel: true })))), hasDataLength && (index$1.h("div", { key: '188b4a11d3f1b9f713b866157d21ac70b130781b', class: "xv-container" }, index$1.h("div", { key: 'f8c737d868c94a9502cd106597ac9fb006ee2075', class: "xv-footer__grid xv-footer-y-spacing" }, index$1.h("div", { key: '78e68d0fb11fc0a3e5f75cef4caa24078f9768f4', class: "xv-footer__col-main" }, index$1.h("ul", { key: 'ce1b2c7b2c98e490d44f670f745c9d6ed1579c4b', 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: '0d2f0a95a3435e9817c21e1eddf7372da1566404', 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: '771aabeac7888753cf561f9d6ef04561aeb1816c', class: "xv-footer-legal" }, index$1.h("div", { key: '31e92aa6c324e23d1f99b041360861741829e255', class: "xv-container" }, index$1.h("div", { key: '9e615547872c8a9fa75e76c0890430f82e8b5024', class: "xv-footer-legal-row" }, logo && (index$1.h("a", { key: 'f5c932dc0d29b25642f2da6fa74bd43a29359f3f', class: "xv-footer-logo", href: logo.href, target: logo.target }, logo.label && index$1.h("span", { key: '737eecddab96349fec709c4c5609d83e87d0e560', class: "xv-label-02" }, logo.label), index$1.h("img", { key: 'f5e64947742cfd5f9e79adffb14d5c7e7d0dc66e', loading: "lazy", src: logo.image, alt: logo.label }))), index$1.h("ul", { key: 'b05632d176a3a60f0c6b698d0958b8546ba0867f' }, legalLinks.map((item) => {
|
|
78002
80768
|
if (item.label === 'Cookie Einstellungen') {
|
|
78003
|
-
return index.h("li", null, index.h("a", { class: "xv-helper-text-02", onClick: this.openCookieSettings }, item.label));
|
|
80769
|
+
return index$1.h("li", null, index$1.h("a", { class: "xv-helper-text-02", onClick: this.openCookieSettings }, item.label));
|
|
78004
80770
|
}
|
|
78005
|
-
return index.h("li", null, index.h("a", { class: "xv-helper-text-02", href: item.href, target: item.target }, item.label));
|
|
80771
|
+
return index$1.h("li", null, index$1.h("a", { class: "xv-helper-text-02", href: item.href, target: item.target }, item.label));
|
|
78006
80772
|
}))))))));
|
|
78007
80773
|
}
|
|
78008
80774
|
_renderFooterList(items = [], opt) {
|
|
78009
80775
|
if (!(items === null || items === void 0 ? void 0 : items.length))
|
|
78010
80776
|
return null;
|
|
78011
|
-
const list = (index.h("ul", null, items.map((item) => (index.h("li", null, index.h("a", { href: item === null || item === void 0 ? void 0 : item.href, target: item.target }, item.icon && index.h("i", { class: { fa: true, [item.icon]: true } }), item.image && index.h("img", { src: item.image, alt: item.label }), (opt === null || opt === void 0 ? void 0 : opt.itemWithLabel) && item.label && index.h("span", { class: "xv-body-02" }, item.label)))))));
|
|
78012
|
-
return (opt === null || opt === void 0 ? void 0 : opt.label) ? (index.h("div", { class: { 'footer-grid': true, 'footer-grid--row': !!(opt === null || opt === void 0 ? void 0 : opt.isRow) } }, index.h("p", { class: "xv-heading-compact-02" }, opt.label), list)) : list;
|
|
80777
|
+
const list = (index$1.h("ul", null, items.map((item) => (index$1.h("li", null, index$1.h("a", { href: item === null || item === void 0 ? void 0 : item.href, target: item.target }, item.icon && index$1.h("i", { class: { fa: true, [item.icon]: true } }), item.image && index$1.h("img", { src: item.image, alt: item.label }), (opt === null || opt === void 0 ? void 0 : opt.itemWithLabel) && item.label && index$1.h("span", { class: "xv-body-02" }, item.label)))))));
|
|
80778
|
+
return (opt === null || opt === void 0 ? void 0 : opt.label) ? (index$1.h("div", { class: { 'footer-grid': true, 'footer-grid--row': !!(opt === null || opt === void 0 ? void 0 : opt.isRow) } }, index$1.h("p", { class: "xv-heading-compact-02" }, opt.label), list)) : list;
|
|
78013
80779
|
}
|
|
78014
80780
|
};
|
|
78015
80781
|
Xvfooter.style = xvFooterCss();
|
|
@@ -78020,8 +80786,8 @@ const xvHeaderCss = () => `.xv-container{width:100%;max-width:1170px;margin-inli
|
|
|
78020
80786
|
|
|
78021
80787
|
const XvHeader = class {
|
|
78022
80788
|
constructor(hostRef) {
|
|
78023
|
-
index.registerInstance(this, hostRef);
|
|
78024
|
-
this.xvMetaNavUpdate = index.createEvent(this, "xvMetaNavUpdate", 7);
|
|
80789
|
+
index$1.registerInstance(this, hostRef);
|
|
80790
|
+
this.xvMetaNavUpdate = index$1.createEvent(this, "xvMetaNavUpdate", 7);
|
|
78025
80791
|
this.orgUnit = '';
|
|
78026
80792
|
this.baseUrl = '';
|
|
78027
80793
|
this.loading = false;
|
|
@@ -78066,7 +80832,7 @@ const XvHeader = class {
|
|
|
78066
80832
|
$select: 'title_de,page_link,source',
|
|
78067
80833
|
$orderby: 'source desc',
|
|
78068
80834
|
}).toString();
|
|
78069
|
-
this.suggestions = await index$
|
|
80835
|
+
this.suggestions = await index$2.api.get(`https://xv-search.search.windows.net/indexes/xv-shared-index-live/docs/suggest?${queryString}`, { headers: { 'api-key': '7315DEF1FA0C8B12109B12BA28E517E7' } }).then(({ value }) => Array.isArray(value) ? value : []);
|
|
78070
80836
|
}
|
|
78071
80837
|
catch (error) {
|
|
78072
80838
|
console.log('error', error);
|
|
@@ -78104,7 +80870,7 @@ const XvHeader = class {
|
|
|
78104
80870
|
}
|
|
78105
80871
|
metaNavUpdate() {
|
|
78106
80872
|
var _a, _b;
|
|
78107
|
-
const metaNav = index$
|
|
80873
|
+
const metaNav = index$2.getMetaNav();
|
|
78108
80874
|
if (metaNav) {
|
|
78109
80875
|
this.metaNav = metaNav;
|
|
78110
80876
|
this.orgUnit = ((_b = (_a = this.metaNav) === null || _a === void 0 ? void 0 : _a.User) === null || _b === void 0 ? void 0 : _b.SelectedOrgUnitName) || '';
|
|
@@ -78113,13 +80879,13 @@ const XvHeader = class {
|
|
|
78113
80879
|
console.info('MetaNav was updated', this.metaNav);
|
|
78114
80880
|
}
|
|
78115
80881
|
componentWillLoad() {
|
|
78116
|
-
this.baseUrl = index$
|
|
80882
|
+
this.baseUrl = index$2.getBaseUrl();
|
|
78117
80883
|
void this.initHeader();
|
|
78118
80884
|
}
|
|
78119
80885
|
async initHeader() {
|
|
78120
80886
|
try {
|
|
78121
80887
|
this.loading = true;
|
|
78122
|
-
const metaNav = await index$
|
|
80888
|
+
const metaNav = await index$2.api.post('/de-de/home/getpersonalareajson', undefined, { credentials: 'include' });
|
|
78123
80889
|
this.xvMetaNavUpdate.emit(metaNav);
|
|
78124
80890
|
localStorage.setItem('metaNav', JSON.stringify(metaNav));
|
|
78125
80891
|
}
|
|
@@ -78135,7 +80901,7 @@ const XvHeader = class {
|
|
|
78135
80901
|
var _a;
|
|
78136
80902
|
if (((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a['EnableMegaMenuSearch']) !== true)
|
|
78137
80903
|
return null;
|
|
78138
|
-
return (index.h("li", { class: "search-form" }, index.h("form", { action: `${this.baseUrl}/de-de/media/search`, method: "get", role: "search" }, index.h("input", { onKeyDown: this.handleSearchKeydown, onInput: index$
|
|
80904
|
+
return (index$1.h("li", { class: "search-form" }, index$1.h("form", { action: `${this.baseUrl}/de-de/media/search`, method: "get", role: "search" }, index$1.h("input", { onKeyDown: this.handleSearchKeydown, onInput: index$2.debounce(this.handleSearch, 700), type: "search", name: "Q", placeholder: "Suchen", title: "Dr\u00FCcken Sie die 'Enter' zum 'Suchen' oder Escape zum Zur\u00FCcksetzen", autoComplete: "off" }), index$1.h("xv-button-v2", { onClick: this.handleSearchOpen, onMouseDown: this.handlePreventEvent, type: "button", variant: "ghost", size: _vars.SIZE_VAR.MD }, index$1.h("i", { class: "header-icon far fa-search" })), index$1.h("xv-button-v2", { type: "submit", variant: "ghost", size: _vars.SIZE_VAR.MD }, index$1.h("i", { class: "header-icon far fa-search" }))), index$1.h("ul", { class: { 'search-form-suggestions': true, loading: this.suggestionsLoading } }, this.suggestions.map((suggestion) => (index$1.h("li", null, index$1.h("xv-link-v2", { variant: "standalone", href: `${suggestion.source === 'marketplace' ? 'https://marketplace.crossvertise.com' : 'https://www.crossvertise.com'}${suggestion.page_link}` }, suggestion.title_de)))), !this.suggestions.length && index$1.h("li", { class: "text-center xv-helper-text-02" }, "Keine Daten gefunden"))));
|
|
78139
80905
|
}
|
|
78140
80906
|
// endregion
|
|
78141
80907
|
// region ImpersonationInfo
|
|
@@ -78143,14 +80909,14 @@ const XvHeader = class {
|
|
|
78143
80909
|
var _a, _b, _c, _d, _e;
|
|
78144
80910
|
if (!((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a.ImpersonationInfo))
|
|
78145
80911
|
return null;
|
|
78146
|
-
return (index.h("li", { class: "impersonationInfo" }, index.h("xv-toggle-tip", { position: "bottom-end", autoSize: true }, index.h("xv-button-v2", { variant: "ghost", slot: "trigger", size: _vars.SIZE_VAR.MD }, index.h("img", { slot: "icon-left", width: 16, height: 16, src: userMagnifyingGlassRegularFullSvg, alt: "ic" })), index.h("ul", { slot: "body", class: "xv-helper-text-02" }, index.h("li", null, "Kundenperspektive aktiviert f\u00FCr:"), index.h("li", null, (_b = this.metaNav.ImpersonationInfo) === null || _b === void 0 ? void 0 : _b.NameAndTitle), index.h("li", null, (_c = this.metaNav.ImpersonationInfo) === null || _c === void 0 ? void 0 : _c.CompanyName), index.h("li", null, (_d = this.metaNav.ImpersonationInfo) === null || _d === void 0 ? void 0 : _d.Email), index.h("li", null, (_e = this.metaNav.ImpersonationInfo) === null || _e === void 0 ? void 0 : _e.PhoneOffice)), index.h("xv-link-v2", { slot: "footer", href: `${this.baseUrl}/de-de/mycrossvertise/account/clearimpersonation`, variant: "ghost" }, index.h("xv-button-v2", { block: true, variant: "accent" }, "Kundenperspektive verlassen")))));
|
|
80912
|
+
return (index$1.h("li", { class: "impersonationInfo" }, index$1.h("xv-toggle-tip", { position: "bottom-end", autoSize: true }, index$1.h("xv-button-v2", { variant: "ghost", slot: "trigger", size: _vars.SIZE_VAR.MD }, index$1.h("img", { slot: "icon-left", width: 16, height: 16, src: userMagnifyingGlassRegularFullSvg, alt: "ic" })), index$1.h("ul", { slot: "body", class: "xv-helper-text-02" }, index$1.h("li", null, "Kundenperspektive aktiviert f\u00FCr:"), index$1.h("li", null, (_b = this.metaNav.ImpersonationInfo) === null || _b === void 0 ? void 0 : _b.NameAndTitle), index$1.h("li", null, (_c = this.metaNav.ImpersonationInfo) === null || _c === void 0 ? void 0 : _c.CompanyName), index$1.h("li", null, (_d = this.metaNav.ImpersonationInfo) === null || _d === void 0 ? void 0 : _d.Email), index$1.h("li", null, (_e = this.metaNav.ImpersonationInfo) === null || _e === void 0 ? void 0 : _e.PhoneOffice)), index$1.h("xv-link-v2", { slot: "footer", href: `${this.baseUrl}/de-de/mycrossvertise/account/clearimpersonation`, variant: "ghost" }, index$1.h("xv-button-v2", { block: true, variant: "accent" }, "Kundenperspektive verlassen")))));
|
|
78147
80913
|
}
|
|
78148
80914
|
async getNotifications() {
|
|
78149
80915
|
var _a;
|
|
78150
80916
|
if (!((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a.IsManager))
|
|
78151
80917
|
return;
|
|
78152
80918
|
try {
|
|
78153
|
-
this.notifications = await index$
|
|
80919
|
+
this.notifications = await index$2.api.get(`${this.baseUrl}/de-de/api/notifications/list`, { credentials: 'include' }).then(res => Array.isArray(res) ? res : []);
|
|
78154
80920
|
}
|
|
78155
80921
|
catch (error) {
|
|
78156
80922
|
this.notifications = [];
|
|
@@ -78160,33 +80926,33 @@ const XvHeader = class {
|
|
|
78160
80926
|
var _a;
|
|
78161
80927
|
if (!((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a.IsManager))
|
|
78162
80928
|
return null;
|
|
78163
|
-
return (index.h("li", { class: "notifications" }, index.h("xv-overflow-menu-v2", { position: "right", size: _vars.SIZE_VAR.MD }, index.h("span", { slot: "trigger", class: "fa-stack" }, index.h("i", { class: "notifications-icon far fa-bell fa-stack-1x" }), this.notifications.length > 0 && (index.h("xv-tag-v2", { class: "counter-badge counter-badge--absolute", bg: "var(--icon-interactive, #97BF0D)", color: "var(--text-inverse, #FFF)" }, this.notifications.length))), this.notifications.map((notification) => (index.h("xv-overflow-menu-v2-item", { value: notification.id, variant: _vars.OverflowMenuVariant.GHOST, disabled: notification.isRead, clickable: false }, index.h("div", { class: "notifications-item" }, index.h("i", { class: {
|
|
80929
|
+
return (index$1.h("li", { class: "notifications" }, index$1.h("xv-overflow-menu-v2", { position: "right", size: _vars.SIZE_VAR.MD }, index$1.h("span", { slot: "trigger", class: "fa-stack" }, index$1.h("i", { class: "notifications-icon far fa-bell fa-stack-1x" }), this.notifications.length > 0 && (index$1.h("xv-tag-v2", { class: "counter-badge counter-badge--absolute", bg: "var(--icon-interactive, #97BF0D)", color: "var(--text-inverse, #FFF)" }, this.notifications.length))), this.notifications.map((notification) => (index$1.h("xv-overflow-menu-v2-item", { value: notification.id, variant: _vars.OverflowMenuVariant.GHOST, disabled: notification.isRead, clickable: false }, index$1.h("div", { class: "notifications-item" }, index$1.h("i", { class: {
|
|
78164
80930
|
far: true,
|
|
78165
80931
|
'fa-clock': !notification.status,
|
|
78166
80932
|
'fa-times-circle': notification.status === 1,
|
|
78167
80933
|
'fa-circle': notification.status && notification.status !== 1,
|
|
78168
|
-
} }), index.h("div", { class: "notifications-item-body" }, index.h("span", null, "Rechnungsentwurf f\u00FCr Auftrag ", notification.orderId, " ist ausstehend"), index.h("xv-link-v2", { variant: notification.isRead ? 'ghost' : 'standalone', href: `/de-de/manager/ordersales/details/${notification.orderId}` }, "Auftrag anschauen")))))))));
|
|
80934
|
+
} }), index$1.h("div", { class: "notifications-item-body" }, index$1.h("span", null, "Rechnungsentwurf f\u00FCr Auftrag ", notification.orderId, " ist ausstehend"), index$1.h("xv-link-v2", { variant: notification.isRead ? 'ghost' : 'standalone', href: `/de-de/manager/ordersales/details/${notification.orderId}` }, "Auftrag anschauen")))))))));
|
|
78169
80935
|
}
|
|
78170
80936
|
_renderAccount() {
|
|
78171
80937
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
78172
80938
|
if (!((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a.IsAuthenticated)) {
|
|
78173
|
-
return (index.h("li", null, index.h("xv-button-v2", { variant: "ghost", size: _vars.SIZE_VAR.MD, onClick: () => this.showLoginModal = true }, index.h("i", { class: "header-icon far fa-user" }), index.h("span", { class: "header-label xv-body-02" }, "Mein Konto"))));
|
|
80939
|
+
return (index$1.h("li", null, index$1.h("xv-button-v2", { variant: "ghost", size: _vars.SIZE_VAR.MD, onClick: () => this.showLoginModal = true }, index$1.h("i", { class: "header-icon far fa-user" }), index$1.h("span", { class: "header-label xv-body-02" }, "Mein Konto"))));
|
|
78174
80940
|
}
|
|
78175
|
-
return (index.h("li", { class: { myArea: true, onHover: true, isOpen: false } }, index.h("xv-button-v2", { class: "myArea-btn", variant: "ghost", size: _vars.SIZE_VAR.MD }, index.h("i", { class: "far fa-user" }), index.h("div", { class: "header-label xv-body-02" }, ((_b = this.metaNav) === null || _b === void 0 ? void 0 : _b.IsManager) && index.h("small", { class: "xv-label-01" }, "Manager"), index.h("span", null, ((_c = this.metaNav) === null || _c === void 0 ? void 0 : _c.UserMenuText) || 'Mein Konto')), index.h("i", { class: "caret" })), index.h("ul", { class: "myArea-list" }, ((_e = (_d = this.metaNav) === null || _d === void 0 ? void 0 : _d.ManagerCockpitMenu) === null || _e === void 0 ? void 0 : _e.length) && (index.h(index.Fragment, null, index.h("li", { class: "myArea-list--category" }, "Cockpitfunktionen"), this.metaNav.ManagerCockpitMenu.map((item) => (index.h("li", null, index.h("xv-link-v2", { variant: "standalone", href: item.Url, target: item.Target }, item.Text, item.BadgeText && (index.h("xv-tag-v2", { class: "category-badge", color: "var(--text-inverse, #FFF)", bg: "var(--icon-interactive, #97BF0D)" }, item.BadgeText)))))), index.h("li", { class: "myArea-list--divider" }))), ((_g = (_f = this.metaNav) === null || _f === void 0 ? void 0 : _f.ManagerEntitiesMenu) === null || _g === void 0 ? void 0 : _g.length) && (index.h(index.Fragment, null, index.h("li", { class: "myArea-list--category" }, "Entit\u00E4ten"), this.metaNav.ManagerEntitiesMenu.map((item) => (index.h("li", null, index.h("xv-link-v2", { variant: "standalone", href: item.Url, target: item.Target }, item.Text, item.BadgeText && (index.h("xv-tag-v2", { class: "category-badge", color: "var(--text-inverse, #FFF)", bg: "var(--icon-interactive, #97BF0D)" }, item.BadgeText)))))), index.h("li", { class: "myArea-list--divider" }))), ((_j = (_h = this.metaNav) === null || _h === void 0 ? void 0 : _h.ManagerMenu) === null || _j === void 0 ? void 0 : _j.length) && (index.h(index.Fragment, null, this.metaNav.ManagerMenu.map((item) => (index.h("li", null, index.h("xv-link-v2", { variant: "standalone", href: item.Url, target: item.Target }, item.Text, item.BadgeText && (index.h("xv-tag-v2", { class: "category-badge", color: "var(--text-inverse, #FFF)", bg: "var(--icon-interactive, #97BF0D)" }, item.BadgeText)))))), index.h("li", { class: "myArea-list--divider" }))), !((_k = this.metaNav) === null || _k === void 0 ? void 0 : _k.IsManager) && ((_m = (_l = this.metaNav) === null || _l === void 0 ? void 0 : _l.UserMenu) === null || _m === void 0 ? void 0 : _m.length) && (index.h(index.Fragment, null, this.metaNav.UserMenu.map((item) => (index.h("li", null, index.h("xv-link-v2", { variant: "standalone", href: item.Url, target: item.Target }, item.Text, item.BadgeText && (index.h("xv-tag-v2", { class: "category-badge", color: "var(--text-inverse, #FFF)", bg: "var(--icon-interactive, #97BF0D)" }, item.BadgeText)))))), index.h("li", { class: "myArea-list--divider" }))), index.h("li", null, index.h("xv-link-v2", { href: `${this.baseUrl}/de-de/mycrossvertise/account/logoff?returnUrl=${window.location.hostname}`, variant: "standalone" }, "Abmelden")))));
|
|
80941
|
+
return (index$1.h("li", { class: { myArea: true, onHover: true, isOpen: false } }, index$1.h("xv-button-v2", { class: "myArea-btn", variant: "ghost", size: _vars.SIZE_VAR.MD }, index$1.h("i", { class: "far fa-user" }), index$1.h("div", { class: "header-label xv-body-02" }, ((_b = this.metaNav) === null || _b === void 0 ? void 0 : _b.IsManager) && index$1.h("small", { class: "xv-label-01" }, "Manager"), index$1.h("span", null, ((_c = this.metaNav) === null || _c === void 0 ? void 0 : _c.UserMenuText) || 'Mein Konto')), index$1.h("i", { class: "caret" })), index$1.h("ul", { class: "myArea-list" }, ((_e = (_d = this.metaNav) === null || _d === void 0 ? void 0 : _d.ManagerCockpitMenu) === null || _e === void 0 ? void 0 : _e.length) && (index$1.h(index$1.Fragment, null, index$1.h("li", { class: "myArea-list--category" }, "Cockpitfunktionen"), this.metaNav.ManagerCockpitMenu.map((item) => (index$1.h("li", null, index$1.h("xv-link-v2", { variant: "standalone", href: item.Url, target: item.Target }, item.Text, item.BadgeText && (index$1.h("xv-tag-v2", { class: "category-badge", color: "var(--text-inverse, #FFF)", bg: "var(--icon-interactive, #97BF0D)" }, item.BadgeText)))))), index$1.h("li", { class: "myArea-list--divider" }))), ((_g = (_f = this.metaNav) === null || _f === void 0 ? void 0 : _f.ManagerEntitiesMenu) === null || _g === void 0 ? void 0 : _g.length) && (index$1.h(index$1.Fragment, null, index$1.h("li", { class: "myArea-list--category" }, "Entit\u00E4ten"), this.metaNav.ManagerEntitiesMenu.map((item) => (index$1.h("li", null, index$1.h("xv-link-v2", { variant: "standalone", href: item.Url, target: item.Target }, item.Text, item.BadgeText && (index$1.h("xv-tag-v2", { class: "category-badge", color: "var(--text-inverse, #FFF)", bg: "var(--icon-interactive, #97BF0D)" }, item.BadgeText)))))), index$1.h("li", { class: "myArea-list--divider" }))), ((_j = (_h = this.metaNav) === null || _h === void 0 ? void 0 : _h.ManagerMenu) === null || _j === void 0 ? void 0 : _j.length) && (index$1.h(index$1.Fragment, null, this.metaNav.ManagerMenu.map((item) => (index$1.h("li", null, index$1.h("xv-link-v2", { variant: "standalone", href: item.Url, target: item.Target }, item.Text, item.BadgeText && (index$1.h("xv-tag-v2", { class: "category-badge", color: "var(--text-inverse, #FFF)", bg: "var(--icon-interactive, #97BF0D)" }, item.BadgeText)))))), index$1.h("li", { class: "myArea-list--divider" }))), !((_k = this.metaNav) === null || _k === void 0 ? void 0 : _k.IsManager) && ((_m = (_l = this.metaNav) === null || _l === void 0 ? void 0 : _l.UserMenu) === null || _m === void 0 ? void 0 : _m.length) && (index$1.h(index$1.Fragment, null, this.metaNav.UserMenu.map((item) => (index$1.h("li", null, index$1.h("xv-link-v2", { variant: "standalone", href: item.Url, target: item.Target }, item.Text, item.BadgeText && (index$1.h("xv-tag-v2", { class: "category-badge", color: "var(--text-inverse, #FFF)", bg: "var(--icon-interactive, #97BF0D)" }, item.BadgeText)))))), index$1.h("li", { class: "myArea-list--divider" }))), index$1.h("li", null, index$1.h("xv-link-v2", { href: `${this.baseUrl}/de-de/mycrossvertise/account/logoff?returnUrl=${window.location.hostname}`, variant: "standalone" }, "Abmelden")))));
|
|
78176
80942
|
}
|
|
78177
80943
|
// endregion Account
|
|
78178
80944
|
// region ShoppingCart
|
|
78179
80945
|
_renderShoppingCart() {
|
|
78180
80946
|
var _a, _b;
|
|
78181
|
-
return (index.h("li", null, index.h("xv-link-v2", { href: `${this.baseUrl}/de-de/mycrossvertise/shoppingcart/activecart`, variant: "ghost" }, index.h("xv-button-v2", { variant: "ghost", size: _vars.SIZE_VAR.MD }, index.h("i", { class: "header-icon far fa-shopping-cart" }), index.h("span", { class: "header-label xv-body-02" }, "Warenkorb"), index.h("xv-tag-v2", { id: "shopping-cart-items-badge", class: "counter-badge", bg: "var(--icon-interactive, #97BF0D)", color: "var(--text-inverse, #FFF)" }, ((_b = (_a = this.metaNav) === null || _a === void 0 ? void 0 : _a.Cart) === null || _b === void 0 ? void 0 : _b.NumberOfItems) || 0)))));
|
|
80947
|
+
return (index$1.h("li", null, index$1.h("xv-link-v2", { href: `${this.baseUrl}/de-de/mycrossvertise/shoppingcart/activecart`, variant: "ghost" }, index$1.h("xv-button-v2", { variant: "ghost", size: _vars.SIZE_VAR.MD }, index$1.h("i", { class: "header-icon far fa-shopping-cart" }), index$1.h("span", { class: "header-label xv-body-02" }, "Warenkorb"), index$1.h("xv-tag-v2", { id: "shopping-cart-items-badge", class: "counter-badge", bg: "var(--icon-interactive, #97BF0D)", color: "var(--text-inverse, #FFF)" }, ((_b = (_a = this.metaNav) === null || _a === void 0 ? void 0 : _a.Cart) === null || _b === void 0 ? void 0 : _b.NumberOfItems) || 0)))));
|
|
78182
80948
|
}
|
|
78183
80949
|
// endregion ShoppingCart
|
|
78184
80950
|
render() {
|
|
78185
80951
|
var _a, _b, _c, _d, _e;
|
|
78186
80952
|
const isXvBrand = (((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a['WhitelabelName']) || 'Xv') === 'Xv';
|
|
78187
|
-
return (index.h("header", { key: '
|
|
80953
|
+
return (index$1.h("header", { key: '4e04b78a99212bc5fdfbda41aa2f2f6a88175c48', class: "header" }, index$1.h("div", { key: 'd9966301c1616fcaec060e50fa29f81a3198227b', class: "header-wrapper" }, index$1.h("div", { key: '9256f6a7b31da73fff32ac2d95bee384e64496d2', class: "xv-container" }, index$1.h("div", { key: 'f9927a5b1d283fecfc57014c35676c5a3cf47d9f', class: "header-top" }, index$1.h("div", { key: 'fbd79ec4e41e203b0c7d8e37085633a6ab3ee466', class: "header-top--left" }, index$1.h("xv-button-v2", { key: '8d4e4f298e2f708e06a90a7c9a21ab578a43a7a3', class: "menu-btn", variant: "ghost", onClick: this.toggleMobMenu }, index$1.h("i", { key: '33aa5177581c5f8b47ec0c435a896b25e2305316', slot: "icon-left", class: { 'fa': true, 'fa-times': this.mobMenuOpen, 'fa-bars': !this.mobMenuOpen } })), this.metaNav && (index$1.h("a", { key: '1fca5d3cd0638145f34f9bdc6c6446e75f1fffdc', href: `${window.location.origin}/` }, index$1.h("picture", { key: 'a51179dd4e7b0a60d5e9a458660d23501b4d152b' }, index$1.h("source", { key: 'faef9c5ca3f5e6355862eedcb447a4975b14463b', 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: '83c80fb99185fceb3d6559bcd59b44e3bbaeb689', 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: '32b8ca9c78c50df7fac9a5f816fb75db96af1df5', class: "header-top--orgUnit", variant: "standalone", href: "/de-de/mycrossvertise" }, this.orgUnit))), index$1.h("ul", { key: '67a88b216fff8353188ce1b684b2e644dbb5c34a', 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: '5895fae5c1da7e8ac325c03b07c55e8c522d5d76' }, index$1.h("xv-link-v2", { key: '3ed95ee7d3bb9d250cc80f51265a45cdcbc879ae', variant: "ghost", href: "https://www.crossvertise.com/ueber-uns/kontakt" }, index$1.h("xv-button-v2", { key: 'fd3201859e31efb6767110a648f79b571ba9412e', variant: "ghost", size: _vars.SIZE_VAR.MD }, index$1.h("i", { key: 'a357cf1fc11f5df20c06ba7bba688760e730795d', class: "header-icon far fa-envelope" }), index$1.h("span", { key: '2958ee2e9b503b5a9eda1db721474d452bfc14d9', 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: '8e0d0ade405003a63512d7c736f4dd2e3aa65a3a' }, index$1.h("xv-link-v2", { key: '152ab5e9e8e13a1261de664f95d1ed10a4572d01', variant: "ghost", href: "https://help.crossvertise.com" }, index$1.h("xv-button-v2", { key: '641f8fca24c2bef017ba11494e76063731df1c9b', variant: "ghost", size: _vars.SIZE_VAR.MD }, index$1.h("i", { key: '2dab2659e3010e1cca36be982c14bfafa27f2a69', class: "header-icon far fa-question-circle" }), index$1.h("span", { key: '4c919f58a513e136311a30ac6367f5134171c109', class: "header-label xv-body-02" }, "Hilfe"))))), this._renderShoppingCart()))), index$1.h("div", { key: '35dc7801ae8b2b21b14a2f6d54c72d21aa6da9d2', class: "header-wrapper--bg" }, index$1.h("div", { key: '058fcec87bf3e1b7a9263f5e8d108b9d6d82857a', class: "xv-container" }, index$1.h("xv-mega-menu", { key: '43293fa89e5e9629847c47cd582425cf53fbb875', open: this.mobMenuOpen, onOpenChange: this.closeMobMenu })))), index$1.h("xv-login-modal", { key: 'f21b968eba5252c0acfb1963482da8e2d31a3ab0', visible: this.showLoginModal, onClose: () => this.showLoginModal = false })));
|
|
78188
80954
|
}
|
|
78189
|
-
get el() { return index.getElement(this); }
|
|
80955
|
+
get el() { return index$1.getElement(this); }
|
|
78190
80956
|
};
|
|
78191
80957
|
XvHeader.style = xvHeaderCss();
|
|
78192
80958
|
|
|
@@ -78194,7 +80960,7 @@ const xvImageViewerCss = () => `.xv-container{width:100%;max-width:1170px;margin
|
|
|
78194
80960
|
|
|
78195
80961
|
const XvImageViewer = class {
|
|
78196
80962
|
constructor(hostRef) {
|
|
78197
|
-
index.registerInstance(this, hostRef);
|
|
80963
|
+
index$1.registerInstance(this, hostRef);
|
|
78198
80964
|
this.alt = '';
|
|
78199
80965
|
this.placeholder = '';
|
|
78200
80966
|
this.lazy = false;
|
|
@@ -78229,12 +80995,12 @@ const XvImageViewer = class {
|
|
|
78229
80995
|
}
|
|
78230
80996
|
}
|
|
78231
80997
|
render() {
|
|
78232
|
-
return (index.h(index.Host, { key: '
|
|
80998
|
+
return (index$1.h(index$1.Host, { key: '18892e8e88de15de5654ef75ff85cbd99206e1a8', 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: '8f0aa7e798837d055c1b4c195f6cca2bd4c3a8cb', class: "fullscreen-overlay", onClick: this.closeFullscreen }, !this.fullscreenLoaded && index$1.h("xv-loader-v2", { key: '07851163ab07dccf30f82ad96b47965308950f5c', class: "loading", size: _vars.SIZE_VAR.LG }, this.placeholder), index$1.h("img", { key: '1a56f060df6768a603b80f3a1d816edb14147745', src: this.fullscreenSrc || this.src, alt: this.alt, class: {
|
|
78233
80999
|
'fullscreen-image': true,
|
|
78234
81000
|
loaded: this.fullscreenLoaded,
|
|
78235
81001
|
} })))));
|
|
78236
81002
|
}
|
|
78237
|
-
get el() { return index.getElement(this); }
|
|
81003
|
+
get el() { return index$1.getElement(this); }
|
|
78238
81004
|
};
|
|
78239
81005
|
XvImageViewer.style = xvImageViewerCss();
|
|
78240
81006
|
|
|
@@ -78242,7 +81008,7 @@ const xvLinkCss = () => `.xv-container{width:100%;max-width:1170px;margin-inline
|
|
|
78242
81008
|
|
|
78243
81009
|
const XvLink = class {
|
|
78244
81010
|
constructor(hostRef) {
|
|
78245
|
-
index.registerInstance(this, hostRef);
|
|
81011
|
+
index$1.registerInstance(this, hostRef);
|
|
78246
81012
|
this.disabled = false;
|
|
78247
81013
|
this.size = 'md';
|
|
78248
81014
|
this.variant = 'inline';
|
|
@@ -78254,7 +81020,7 @@ const XvLink = class {
|
|
|
78254
81020
|
e.stopPropagation();
|
|
78255
81021
|
}
|
|
78256
81022
|
render() {
|
|
78257
|
-
return (index.h(index.Host, { key: '
|
|
81023
|
+
return (index$1.h(index$1.Host, { key: '016e3dbb068768af7f3b1009a9ff4a41e7fe7e29', class: { [`xv-link_${this.variant}`]: true, disabled: !!this.disabled } }, index$1.h("a", { key: 'a3773aa9d56f67db1c8e38fb094ee182911eac2a', 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: '43cfd1a0bd21e3a06d626ebc1c011c0b97cb754b', name: "icon-left" }), index$1.h("slot", { key: '358556f640189ab282f907f16b1a9973561e7fe6' }), index$1.h("slot", { key: '252e9302928e87c88d502c7b513301333843cab0', name: "icon-right" }))));
|
|
78258
81024
|
}
|
|
78259
81025
|
};
|
|
78260
81026
|
XvLink.style = xvLinkCss();
|
|
@@ -78263,7 +81029,7 @@ const xvLoaderCss = () => `.xv-container{width:100%;max-width:1170px;margin-inli
|
|
|
78263
81029
|
|
|
78264
81030
|
const XvLoader = class {
|
|
78265
81031
|
constructor(hostRef) {
|
|
78266
|
-
index.registerInstance(this, hostRef);
|
|
81032
|
+
index$1.registerInstance(this, hostRef);
|
|
78267
81033
|
/**
|
|
78268
81034
|
* Is component displayed
|
|
78269
81035
|
*/
|
|
@@ -78280,7 +81046,7 @@ const XvLoader = class {
|
|
|
78280
81046
|
render() {
|
|
78281
81047
|
if (!this.show)
|
|
78282
81048
|
return null;
|
|
78283
|
-
return (index.h(index.Host, { class: { 'xv-loader': true }, size: this.size }, index.h("slot", { name: "before" }), index.h("div", { class: { spinner: true } }), index.h("slot", null)));
|
|
81049
|
+
return (index$1.h(index$1.Host, { class: { 'xv-loader': true }, size: this.size }, index$1.h("slot", { name: "before" }), index$1.h("div", { class: { spinner: true } }), index$1.h("slot", null)));
|
|
78284
81050
|
}
|
|
78285
81051
|
};
|
|
78286
81052
|
XvLoader.style = xvLoaderCss();
|
|
@@ -78297,8 +81063,8 @@ const xvLoginModalCss = () => `.xv-container.sc-xv-login-modal{width:100%;max-wi
|
|
|
78297
81063
|
|
|
78298
81064
|
const XvLoginModal = class {
|
|
78299
81065
|
constructor(hostRef) {
|
|
78300
|
-
index.registerInstance(this, hostRef);
|
|
78301
|
-
this.close = index.createEvent(this, "close", 7);
|
|
81066
|
+
index$1.registerInstance(this, hostRef);
|
|
81067
|
+
this.close = index$1.createEvent(this, "close", 7);
|
|
78302
81068
|
this.visible = false;
|
|
78303
81069
|
this.urls = {
|
|
78304
81070
|
return: '/',
|
|
@@ -78343,18 +81109,18 @@ const XvLoginModal = class {
|
|
|
78343
81109
|
}
|
|
78344
81110
|
setUrls() {
|
|
78345
81111
|
var _a;
|
|
78346
|
-
const baseUrl = index$
|
|
81112
|
+
const baseUrl = index$2.getBaseUrl();
|
|
78347
81113
|
const returnUrl = new URLSearchParams(location.search).get('returnUrl') || location.href;
|
|
78348
81114
|
this.urls = {
|
|
78349
81115
|
return: returnUrl.toLowerCase().includes('resetpassword') ? '/' : returnUrl,
|
|
78350
|
-
contact: (_a = index$
|
|
81116
|
+
contact: (_a = index$2.getMetaNav().ContactUrl) !== null && _a !== void 0 ? _a : `${baseUrl}/ueber-uns/kontakt`,
|
|
78351
81117
|
base: baseUrl,
|
|
78352
81118
|
};
|
|
78353
81119
|
}
|
|
78354
81120
|
render() {
|
|
78355
81121
|
if (!this.visible)
|
|
78356
81122
|
return null;
|
|
78357
|
-
return (index.h(index.Host, { class: "login" }, index.h("xv-modal-v2", { loading: this.loading, size: _vars.SIZE_VAR.LG, permanent: true, overflow: true, open: this.visible, onOpenChange: this.onOpenChange }, index.h("div", { slot: "header", class: "login_header" }, index.h("h4", { class: "login_header__title" }, "Willkommen!"), index.h("p", { class: "login_header__desc" }, "Melden Sie sich bei Ihrem Konto an.")), index.h("form", { class: "login_form", onSubmit: this.loginHandle }, index.h("xv-text-input-v2", { block: true, size: _vars.SIZE_VAR.LG, label: "E-Mail", placeholder: "E-Mail-Adresse eingeben", type: "email", name: "UserName" }), index.h("div", { class: "login_form__control" }, index.h("xv-text-input-v2", { block: true, size: _vars.SIZE_VAR.LG, label: "Passwort", placeholder: "Passwort", type: "password", name: "Password" }), index.h("xv-link-v2", { class: "to-right", href: `${this.urls.base}/de-de/mycrossvertise/account/lostpassword` }, "Passwort vergessen")), this.errorMessage && (index.h("xv-notification-v2", { title: "Die Anmeldung ist fehlgeschlagen", variant: NOTIFICATION_VARIANTS.ERROR }, this.errorMessage)), index.h("div", { class: "login_form__control" }, index.h("xv-button-v2", { size: _vars.SIZE_VAR.LG, block: true, type: "submit", variant: "primary" }, "Anmelden"), index.h("xv-checkbox-v2", { name: "RememberMe", value: "true" }, index.h("span", null, "Angemeldet bleiben")))), index.h("div", { class: "login_footer" }, index.h("p", { class: "login_spacer" }, "oder"), index.h("form", { class: "login_footer__google", method: "POST", action: `${this.urls.base}/de-de/mycrossvertise/account/externallogin` }, index.h("button", { type: "submit", name: "provider", value: "Google", title: "Mit Google anmelden" }, index.h("i", { class: "fab fa-google" }), index.h("span", null, "\u00DCber Google einloggen")), index.h("input", { type: "hidden", name: "BookNow", value: "false" })), index.h("div", { class: "login_footer__info" }, index.h("p", null, "Noch kein Kundenkonto? ", index.h("xv-link-v2", { href: `${this.urls.base}/de-de/mycrossvertise/account/register` }, "Jetzt kostenlos registrieren!")), index.h("p", null, "Sind Sie bereits registriert, k\u00F6nnen sich aber nicht anmelden?"), index.h("p", null, index.h("xv-link-v2", { href: this.urls.contact }, "Kontaktieren Sie uns"), ", wir k\u00FCmmern uns darum."))))));
|
|
81123
|
+
return (index$1.h(index$1.Host, { class: "login" }, index$1.h("xv-modal-v2", { loading: this.loading, size: _vars.SIZE_VAR.LG, permanent: true, overflow: true, open: this.visible, onOpenChange: this.onOpenChange }, index$1.h("div", { slot: "header", class: "login_header" }, index$1.h("h4", { class: "login_header__title" }, "Willkommen!"), index$1.h("p", { class: "login_header__desc" }, "Melden Sie sich bei Ihrem Konto an.")), index$1.h("form", { class: "login_form", onSubmit: this.loginHandle }, index$1.h("xv-text-input-v2", { block: true, size: _vars.SIZE_VAR.LG, label: "E-Mail", placeholder: "E-Mail-Adresse eingeben", type: "email", name: "UserName" }), index$1.h("div", { class: "login_form__control" }, index$1.h("xv-text-input-v2", { block: true, size: _vars.SIZE_VAR.LG, label: "Passwort", placeholder: "Passwort", type: "password", name: "Password" }), index$1.h("xv-link-v2", { class: "to-right", href: `${this.urls.base}/de-de/mycrossvertise/account/lostpassword` }, "Passwort vergessen")), this.errorMessage && (index$1.h("xv-notification-v2", { title: "Die Anmeldung ist fehlgeschlagen", variant: NOTIFICATION_VARIANTS.ERROR }, this.errorMessage)), index$1.h("div", { class: "login_form__control" }, index$1.h("xv-button-v2", { size: _vars.SIZE_VAR.LG, block: true, type: "submit", variant: "primary" }, "Anmelden"), index$1.h("xv-checkbox-v2", { name: "RememberMe", value: "true" }, index$1.h("span", null, "Angemeldet bleiben")))), index$1.h("div", { class: "login_footer" }, index$1.h("p", { class: "login_spacer" }, "oder"), index$1.h("form", { class: "login_footer__google", method: "POST", action: `${this.urls.base}/de-de/mycrossvertise/account/externallogin` }, index$1.h("button", { type: "submit", name: "provider", value: "Google", title: "Mit Google anmelden" }, index$1.h("i", { class: "fab fa-google" }), index$1.h("span", null, "\u00DCber Google einloggen")), index$1.h("input", { type: "hidden", name: "BookNow", value: "false" })), index$1.h("div", { class: "login_footer__info" }, index$1.h("p", null, "Noch kein Kundenkonto? ", index$1.h("xv-link-v2", { href: `${this.urls.base}/de-de/mycrossvertise/account/register` }, "Jetzt kostenlos registrieren!")), index$1.h("p", null, "Sind Sie bereits registriert, k\u00F6nnen sich aber nicht anmelden?"), index$1.h("p", null, index$1.h("xv-link-v2", { href: this.urls.contact }, "Kontaktieren Sie uns"), ", wir k\u00FCmmern uns darum."))))));
|
|
78358
81124
|
}
|
|
78359
81125
|
};
|
|
78360
81126
|
XvLoginModal.style = xvLoginModalCss();
|
|
@@ -78363,8 +81129,8 @@ const xvMegaMenuCss = () => `.xv-container{width:100%;max-width:1170px;margin-in
|
|
|
78363
81129
|
|
|
78364
81130
|
const XvMegaMenu = class {
|
|
78365
81131
|
constructor(hostRef) {
|
|
78366
|
-
index.registerInstance(this, hostRef);
|
|
78367
|
-
this.openChange = index.createEvent(this, "openChange", 7);
|
|
81132
|
+
index$1.registerInstance(this, hostRef);
|
|
81133
|
+
this.openChange = index$1.createEvent(this, "openChange", 7);
|
|
78368
81134
|
this.mobileSize = 991;
|
|
78369
81135
|
this.open = false;
|
|
78370
81136
|
this.menuItems = [];
|
|
@@ -78405,7 +81171,7 @@ const XvMegaMenu = class {
|
|
|
78405
81171
|
}
|
|
78406
81172
|
async fetchMenuData() {
|
|
78407
81173
|
try {
|
|
78408
|
-
this.menuItems = await index$
|
|
81174
|
+
this.menuItems = await index$2.api.get('/api-fd/v1/home/menu', {
|
|
78409
81175
|
awaitWl: true,
|
|
78410
81176
|
credentials: 'include'
|
|
78411
81177
|
}).then(({ data, meta }) => {
|
|
@@ -78422,19 +81188,19 @@ const XvMegaMenu = class {
|
|
|
78422
81188
|
void this.fetchMenuData();
|
|
78423
81189
|
}
|
|
78424
81190
|
render() {
|
|
78425
|
-
return (index.h(index.Host, { key: '
|
|
81191
|
+
return (index$1.h(index$1.Host, { key: 'b112b87e38c1534cd5313e6c71fdc96f6fc8f515' }, index$1.h("nav", { key: 'e2ce585ac7dcce8e7abf628be7eb635948985a4f', class: { 'xv-menu': true, open: this.open } }, this.menuLoading && (index$1.h("div", { key: 'f72304e9a5310914bad2c5f2160d4b408dba6c80', class: { 'xv-menu-loader': true, open: this.open } }, index$1.h("xv-loader-v2", { key: '08be3cc31abc000d508825ae0cba715de7265ad4' }))), index$1.h("ul", { key: '651eb649457fbab1f3bac968f55702fd5b2219f9', class: { menu: true, open: this.open } }, this.menuItems.map((menuItem) => {
|
|
78426
81192
|
var _a, _b;
|
|
78427
|
-
return (index.h("li", { class: { 'menu-item': true, active: menuItem.id === ((_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.id) } }, menuItem.route ? (index.h("xv-link-v2", { variant: "ghost", href: menuItem.route.route }, index.h("p", { class: "menu-item-label" }, (_b = menuItem.route) === null || _b === void 0 ? void 0 : _b.label))) : (index.h(index.Fragment, null, index.h("p", { class: "menu-item-label", onClick: () => this.setActiveItem(menuItem) }, menuItem === null || menuItem === void 0 ? void 0 : menuItem.label), index.h("ul", { class: "menu-item-groups" }, menuItem.groups.map((group) => {
|
|
81193
|
+
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) => {
|
|
78428
81194
|
var _a;
|
|
78429
|
-
return (index.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) && (index.h("div", { class: "group-label", onClick: () => this.setActiveGroup(group) }, index.h("span", { class: "group-label-text" }, group.label), index.h("span", { class: "group-label-icon" }))), index.h("div", { class: "group-container" }, index.h("div", { class: {
|
|
81195
|
+
return (index$1.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) && (index$1.h("div", { class: "group-label", onClick: () => this.setActiveGroup(group) }, index$1.h("span", { class: "group-label-text" }, group.label), index$1.h("span", { class: "group-label-icon" }))), index$1.h("div", { class: "group-container" }, index$1.h("div", { class: {
|
|
78430
81196
|
'group-container-absolute': true,
|
|
78431
81197
|
noLabel: !(group.label && menuItem.groups.length > 1),
|
|
78432
|
-
} }, index.h("div", { class: "group-menus" }, index.h("ul", { class: { 'group-menus-categories': true, inline: group.layout === 'inline' } }, group.categories.map((category) => (index.h("li", { class: "category" }, index.h("p", { class: "category-label" }, category.label), index.h("ul", { class: "category-routes" }, category.routes.map((route) => (index.h("li", { class: "route" }, index.h("xv-link-v2", { size: "lg", variant: "ghost", href: route.route || '#' }, route.label), route.tag && (index.h("xv-tag-v2", { class: "route-tag", size: "sm", color: "#161616", bg: "#E0E0E0" }, route.tag)))))))))), index.h("ul", { class: "group-menus-actions" }, group.actions.map((action) => (index.h("li", { class: "action" }, action.type === 'link' && (index.h("xv-link-v2", { variant: "standalone", href: action === null || action === void 0 ? void 0 : action.url }, action.label, index.h("span", { class: "link-chevron", slot: "icon-right" }, "\u2192"))), action.type === 'button' &&
|
|
78433
|
-
index.h("xv-button-v2", { onClick: () => this.navActionClick(action), block: true, variant: "tertiary" }, action.label)))))), (group === null || group === void 0 ? void 0 : group.card) && (index.h("div", { class: "group-card" }, index.h("xv-card-v2", { media: this.applicationContext !== 'Komsa' ? group.card.image : undefined, variant: this.isMobile ? 'horizontal' : 'vertical' }, index.h("h5", { slot: "header", class: "group-card-title" }, group.card.title), index.h("p", { slot: "body", class: "group-card-desc" }, group.card.description), group.card.linkLabel && (index.h("xv-link-v2", { slot: "footer", variant: "standalone", href: group.card.linkUrl || '#' }, group.card.linkLabel, index.h("span", { class: "link-chevron", slot: "icon-right" }, "\u2192"))))))))));
|
|
81198
|
+
} }, 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
|
+
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"))))))))));
|
|
78434
81200
|
}))))));
|
|
78435
|
-
}), index.h("li", { key: '
|
|
81201
|
+
}), index$1.h("li", { key: '9356ffcf87b9e622db21a01c40077e41169ea94e', class: "menu--right" }, index$1.h("slot", { key: 'ef5d8a0aaf0d44fd3eec9a68b91a642cb52d8555', name: "menu-right" })), this.open && (index$1.h("li", { key: '0710525eedf5b04ce377deba6a913af3a41b657a', class: "menu--backdrop", onClick: () => this.handleClose() }))))));
|
|
78436
81202
|
}
|
|
78437
|
-
get el() { return index.getElement(this); }
|
|
81203
|
+
get el() { return index$1.getElement(this); }
|
|
78438
81204
|
};
|
|
78439
81205
|
XvMegaMenu.style = xvMegaMenuCss();
|
|
78440
81206
|
|
|
@@ -78442,8 +81208,8 @@ const xvModalCss = () => `.xv-container{width:100%;max-width:1170px;margin-inlin
|
|
|
78442
81208
|
|
|
78443
81209
|
const XvModal = class {
|
|
78444
81210
|
constructor(hostRef) {
|
|
78445
|
-
index.registerInstance(this, hostRef);
|
|
78446
|
-
this.openChange = index.createEvent(this, "openChange", 3);
|
|
81211
|
+
index$1.registerInstance(this, hostRef);
|
|
81212
|
+
this.openChange = index$1.createEvent(this, "openChange", 3);
|
|
78447
81213
|
/**
|
|
78448
81214
|
* Is modal opened
|
|
78449
81215
|
*/
|
|
@@ -78500,12 +81266,12 @@ const XvModal = class {
|
|
|
78500
81266
|
}
|
|
78501
81267
|
render() {
|
|
78502
81268
|
var _a;
|
|
78503
|
-
return (index.h(index.Host, { key: '
|
|
81269
|
+
return (index$1.h(index$1.Host, { key: '459334f664b6ef23356082e08e7a5d2a6b843467', role: "dialog", size: this.size, id: this.el.id }, index$1.h("slot", { key: 'ea874bc6a5b9de9a7b8bb88b66f9eca564265c3f', name: "trigger", onSlotchange: this.setupTrigger }), index$1.h("div", { key: '97aad0310e31ca98a5d96afcc4215f338af59685', class: { backdrop: true }, onClick: this.onBackdropClick }, index$1.h("div", { key: '22de437bedf74a0f540cb5a4fe12cb27f0adc459', class: "modal" }, index$1.h("button", { key: '0daeb0c0ae716f28b9ba87bd6a752b688e5849c6', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), index$1.h("div", { key: '61632aed290597cf833a1bbe38ccf70c031e3cc7', class: "modal_header" }, index$1.h("slot", { key: '41d051393e58db7bbe13e26309040750f4a3f182', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && index$1.h("h5", { key: 'b1ad75b57fce071b11465a2a1941e73ee01aced8', class: "modal_header__title" }, this.el.title))), index$1.h("div", { key: 'ff17494529082dab14715cba727253655852f4f6', class: { 'modal_content': true, overflow: this.overflow } }, index$1.h("slot", { key: '9c8df6f31c4a2bf767317ab443c52bbf31c6b9f4' })), index$1.h("div", { key: 'be51d96a27f16833cf910b3876515f28e3ce30e0', class: "modal_footer" }, index$1.h("slot", { key: '43fa6135052faab628f3531d2d116df4e592f620', name: "footer" })), !!this.loading && (index$1.h("div", { key: '63379bfee79a569faecd6c90eb1447bc2d549f5f', class: "loading" }, index$1.h("xv-loader-v2", { key: '972b08c9ae0d135516cd2d46e4ad31168ad37c19', size: _vars.SIZE_VAR.LG })))))));
|
|
78504
81270
|
}
|
|
78505
81271
|
disconnectedCallback() {
|
|
78506
81272
|
this.removeTriggerListener();
|
|
78507
81273
|
}
|
|
78508
|
-
get el() { return index.getElement(this); }
|
|
81274
|
+
get el() { return index$1.getElement(this); }
|
|
78509
81275
|
};
|
|
78510
81276
|
XvModal.style = xvModalCss();
|
|
78511
81277
|
|
|
@@ -78513,24 +81279,24 @@ const xvNotificationCss = () => `.xv-container{width:100%;max-width:1170px;margi
|
|
|
78513
81279
|
|
|
78514
81280
|
const XvNotification = class {
|
|
78515
81281
|
constructor(hostRef) {
|
|
78516
|
-
index.registerInstance(this, hostRef);
|
|
78517
|
-
this.close = index.createEvent(this, "close", 7);
|
|
81282
|
+
index$1.registerInstance(this, hostRef);
|
|
81283
|
+
this.close = index$1.createEvent(this, "close", 7);
|
|
78518
81284
|
this.variant = NOTIFICATION_VARIANTS.INFO;
|
|
78519
81285
|
this.dismissible = false;
|
|
78520
81286
|
this.closeHandle = (e) => this.close.emit(e);
|
|
78521
81287
|
this.renderIcon = (variant, cls = 'icon') => {
|
|
78522
81288
|
switch (variant) {
|
|
78523
81289
|
case NOTIFICATION_VARIANTS.ERROR: {
|
|
78524
|
-
return (index.h("svg", { class: cls, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index.h("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" })));
|
|
81290
|
+
return (index$1.h("svg", { class: cls, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index$1.h("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" })));
|
|
78525
81291
|
}
|
|
78526
81292
|
case NOTIFICATION_VARIANTS.INFO: {
|
|
78527
|
-
return (index.h("svg", { class: cls, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index.h("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" })));
|
|
81293
|
+
return (index$1.h("svg", { class: cls, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index$1.h("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" })));
|
|
78528
81294
|
}
|
|
78529
81295
|
case NOTIFICATION_VARIANTS.SUCCESS: {
|
|
78530
|
-
return (index.h("svg", { class: cls, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index.h("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" })));
|
|
81296
|
+
return (index$1.h("svg", { class: cls, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index$1.h("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" })));
|
|
78531
81297
|
}
|
|
78532
81298
|
case NOTIFICATION_VARIANTS.WARNING: {
|
|
78533
|
-
return (index.h("svg", { class: cls, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index.h("path", { d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" })));
|
|
81299
|
+
return (index$1.h("svg", { class: cls, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index$1.h("path", { d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" })));
|
|
78534
81300
|
}
|
|
78535
81301
|
default:
|
|
78536
81302
|
return null;
|
|
@@ -78538,10 +81304,10 @@ const XvNotification = class {
|
|
|
78538
81304
|
};
|
|
78539
81305
|
}
|
|
78540
81306
|
render() {
|
|
78541
|
-
return (index.h(index.Host, { key: '
|
|
81307
|
+
return (index$1.h(index$1.Host, { key: 'adcd2d4a2e8e53164982ffb95de2682d2d833a1a', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), index$1.h("div", { key: 'c4b03ccfefcf2176eec5ce98263a65ca398c743a', class: "content" }, index$1.h("div", { key: 'f9eca551a35ddbaae8ca07f0059fca5f1a05b761', class: "content_wrapper" }, this.el.title && index$1.h("h5", { key: '7a1e4911679d5d1d45ef5a291f8a2071cf399cf8', class: "content_title" }, this.el.title), index$1.h("slot", { key: 'd23e3ec1a2b34cdee9cb20df306afe0f71e63170' })), index$1.h("slot", { key: 'd1e7d2df24c77f042e05353edf91565a5aa3828b', name: "footer" })), this.dismissible && index$1.h("button", { key: '53b218ecd5fefbc84557c0aab20f0a3015aa797e', class: "close", onClick: this.closeHandle })));
|
|
78542
81308
|
}
|
|
78543
81309
|
static get assetsDirs() { return ["xv-notification/icons"]; }
|
|
78544
|
-
get el() { return index.getElement(this); }
|
|
81310
|
+
get el() { return index$1.getElement(this); }
|
|
78545
81311
|
};
|
|
78546
81312
|
XvNotification.style = xvNotificationCss();
|
|
78547
81313
|
|
|
@@ -78549,8 +81315,8 @@ const xvNumberInputCss = () => `.xv-container{width:100%;max-width:1170px;margin
|
|
|
78549
81315
|
|
|
78550
81316
|
const XvNumberInput = class {
|
|
78551
81317
|
constructor(hostRef) {
|
|
78552
|
-
index.registerInstance(this, hostRef);
|
|
78553
|
-
this.valueChange = index.createEvent(this, "valueChange", 7);
|
|
81318
|
+
index$1.registerInstance(this, hostRef);
|
|
81319
|
+
this.valueChange = index$1.createEvent(this, "valueChange", 7);
|
|
78554
81320
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
78555
81321
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
78556
81322
|
}
|
|
@@ -78588,12 +81354,12 @@ const XvNumberInput = class {
|
|
|
78588
81354
|
this.valueChange.emit(this.value);
|
|
78589
81355
|
}
|
|
78590
81356
|
render() {
|
|
78591
|
-
return (index.h(index.Host, { key: '
|
|
81357
|
+
return (index$1.h(index$1.Host, { key: '7399237cc111a179efc8015c4a735591eaf58f47', class: { disabled: !!this.disabled } }, index$1.h("label", { key: 'a208140db3894262f1eca454aac4fe0f1f5dcd5b', class: "control" }, this.label && index$1.h("span", { key: 'f75f15839a0e6fdae658f3c8acdc89b817bddd4e', class: "control_label" }, this.label), index$1.h("div", { key: 'c46893c839e2c4d0ea1cc3cbe7b344b8d76d05ba', class: {
|
|
78592
81358
|
'control_input': true,
|
|
78593
81359
|
readonly: !!this.readonly,
|
|
78594
81360
|
error: !!this.error,
|
|
78595
81361
|
warning: !!this.warning
|
|
78596
|
-
} }, index.h("input", { key: '
|
|
81362
|
+
} }, index$1.h("input", { key: '84e546cca6541c13e3285525098b7a92c283927d', 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: '085c26dffcc68d09dfdfaa6bac4b9b8cfe75b5fc', 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: 'c3060dbc54a87aa58eef2ae870807048560dc196', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.decrement, "aria-label": "Decrease" }, index$1.h("span", { key: 'ea41fd15f042b101b73309e6a5d64e7493f947ef', slot: "icon-left", class: "status-icon" }, "\u2212")), index$1.h("hr", { key: '3a7acf4743c82b070c4218433759d3be364f1316' }), index$1.h("xv-button-v2", { key: '6508586d90c548fc39b8d3936b5aed6e9cca0aa2', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.increment, "aria-label": "Increase" }, index$1.h("span", { key: 'dd0f03bf3f5afc5e66b842625a23a71216017a6d', slot: "icon-left", class: "status-icon" }, "+"))))), this.helper && index$1.h("p", { key: '0aea5e60d957e5d81e3e88b99af84bb742d4a45b', 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));
|
|
78597
81363
|
}
|
|
78598
81364
|
static get formAssociated() { return true; }
|
|
78599
81365
|
};
|
|
@@ -78603,8 +81369,8 @@ const xvOverflowMenuCss = () => `.xv-container{width:100%;max-width:1170px;margi
|
|
|
78603
81369
|
|
|
78604
81370
|
const XvOverflowMenu = class {
|
|
78605
81371
|
constructor(hostRef) {
|
|
78606
|
-
index.registerInstance(this, hostRef);
|
|
78607
|
-
this.selectItem = index.createEvent(this, "selectItem", 7);
|
|
81372
|
+
index$1.registerInstance(this, hostRef);
|
|
81373
|
+
this.selectItem = index$1.createEvent(this, "selectItem", 7);
|
|
78608
81374
|
this.open = false;
|
|
78609
81375
|
this.disabled = false;
|
|
78610
81376
|
this.position = 'left';
|
|
@@ -78651,8 +81417,8 @@ const XvOverflowMenu = class {
|
|
|
78651
81417
|
}
|
|
78652
81418
|
}
|
|
78653
81419
|
render() {
|
|
78654
|
-
const button = (index.h("button", { key: '
|
|
78655
|
-
return (index.h(index.Host, { key: '
|
|
81420
|
+
const button = (index$1.h("button", { key: '65d10df68e12786c31afc40edc8c22ecfd0302cf', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, index$1.h("slot", { key: '97a5406ec0f76269a2e7bac68bf1a5f1632b8804', name: "trigger" }, index$1.h("svg", { key: '6d011f7fa6e4f17bf3e75609bd989fa9676e280b', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, index$1.h("path", { key: 'e40d3dc7b5c672beb1be641e2327053d94c7cdde', 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" })))));
|
|
81421
|
+
return (index$1.h(index$1.Host, { key: 'a53abac823b5ddca6a0ccae9c174c54e5feb953d', 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: 'd426de907da491e9a7b5152b8ff4ebe0260cdbc4', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, index$1.h("slot", { key: '855cfac0879de6781c8b78e04ed2e763fb6b472b' }))));
|
|
78656
81422
|
}
|
|
78657
81423
|
componentDidLoad() {
|
|
78658
81424
|
this.openChangeHandle();
|
|
@@ -78660,7 +81426,7 @@ const XvOverflowMenu = class {
|
|
|
78660
81426
|
disconnectedCallback() {
|
|
78661
81427
|
this.removeListeners();
|
|
78662
81428
|
}
|
|
78663
|
-
get el() { return index.getElement(this); }
|
|
81429
|
+
get el() { return index$1.getElement(this); }
|
|
78664
81430
|
static get watchers() { return {
|
|
78665
81431
|
"open": [{
|
|
78666
81432
|
"openChangeHandle": 0
|
|
@@ -78673,8 +81439,8 @@ const xvOverflowMenuItemCss = () => `.xv-container{width:100%;max-width:1170px;m
|
|
|
78673
81439
|
|
|
78674
81440
|
const XvOverflowMenuItem = class {
|
|
78675
81441
|
constructor(hostRef) {
|
|
78676
|
-
index.registerInstance(this, hostRef);
|
|
78677
|
-
this.itemClick = index.createEvent(this, "itemClick", 7);
|
|
81442
|
+
index$1.registerInstance(this, hostRef);
|
|
81443
|
+
this.itemClick = index$1.createEvent(this, "itemClick", 7);
|
|
78678
81444
|
this.disabled = false;
|
|
78679
81445
|
this.variant = _vars.OverflowMenuVariant.DEFAULT;
|
|
78680
81446
|
this.clickable = true;
|
|
@@ -78685,7 +81451,7 @@ const XvOverflowMenuItem = class {
|
|
|
78685
81451
|
this.itemClick.emit({ event, value: this.value });
|
|
78686
81452
|
}
|
|
78687
81453
|
render() {
|
|
78688
|
-
return (index.h(index.Host, { key: '
|
|
81454
|
+
return (index$1.h(index$1.Host, { key: '3d13f5e706f187f6fdc0a925df29ab9a3d185bbf', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, index$1.h("slot", { key: '9fd7ed9c9b5122ef15d92b34368187ac08dddafb' })));
|
|
78689
81455
|
}
|
|
78690
81456
|
};
|
|
78691
81457
|
XvOverflowMenuItem.style = xvOverflowMenuItemCss();
|
|
@@ -78694,8 +81460,8 @@ const xvPaginationCss = () => `.xv-container{width:100%;max-width:1170px;margin-
|
|
|
78694
81460
|
|
|
78695
81461
|
const XvPagination = class {
|
|
78696
81462
|
constructor(hostRef) {
|
|
78697
|
-
index.registerInstance(this, hostRef);
|
|
78698
|
-
this.pageChange = index.createEvent(this, "pageChange", 7);
|
|
81463
|
+
index$1.registerInstance(this, hostRef);
|
|
81464
|
+
this.pageChange = index$1.createEvent(this, "pageChange", 7);
|
|
78699
81465
|
this.itemsPerPageOptions = [10, 20, 30, 40, 50, 100];
|
|
78700
81466
|
this.itemsPerPage = this.itemsPerPageOptions[0];
|
|
78701
81467
|
/*
|
|
@@ -78783,9 +81549,9 @@ const XvPagination = class {
|
|
|
78783
81549
|
this.observer.disconnect();
|
|
78784
81550
|
}
|
|
78785
81551
|
render() {
|
|
78786
|
-
return (index.h(index.Host, { key: '
|
|
81552
|
+
return (index$1.h(index$1.Host, { key: 'c633c6ac9fe8914f9bb3450454d29deb4498f33c', class: { block: this.block, [this.currentVariant]: true, [this.size]: !!this.size } }, this.currentVariant === 'full' && (index$1.h("div", { key: '4689c4ed6f64a9b5dc2e3395d53b490a730e5ca5', class: "block" }, index$1.h("select", { key: '5f862add397fe7cede0dd669cf2cac3ee2faed24', 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: 'cf3e2494f6de619c2c7f6022e399a73a3008f959', 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: 'ba7e56f791156055ed691c650538a4f96ea17fa7', class: "block" }, index$1.h("select", { key: '253e38124f969a044dae1bca9fcfec208d632e19', 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: '7ea03075ea162fc9207dd9289a0a5ccef2843b04' }, "von ", this.total, " Seiten"))), this.currentVariant === 'compact' && index$1.h("span", { key: 'a9823279d3d3a75b87b00a191f751593b9b5e697', class: "block" }, "Seite ", this.page), index$1.h("xv-button-v2", { key: '231a8a4b65aed97f8da971985189db36a134bd7b', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page - 1), disabled: this.page <= 1 }, index$1.h("span", { key: 'dcbb692dbc819e659f257b96325b7db487c98eaf', slot: "icon-left", class: "icon icon_prev" })), this.currentVariant === 'regular' && (index$1.h("ul", { key: '5f8b4afeb3d9db94cee15be516a670456d433753', 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: 'b38241f82c34e3f24c49b6b2afe1a221c23079b8', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page + 1), disabled: this.page >= this.total }, index$1.h("span", { key: '9a3f915b28dc8bb53079c8f66c7959e81163762f', slot: "icon-left", class: "icon icon_next" }))));
|
|
78787
81553
|
}
|
|
78788
|
-
get el() { return index.getElement(this); }
|
|
81554
|
+
get el() { return index$1.getElement(this); }
|
|
78789
81555
|
};
|
|
78790
81556
|
XvPagination.style = xvPaginationCss();
|
|
78791
81557
|
|
|
@@ -78800,7 +81566,7 @@ const xvProgressIndicatorCss = () => `.xv-container{width:100%;max-width:1170px;
|
|
|
78800
81566
|
|
|
78801
81567
|
const XvProgressIndicator = class {
|
|
78802
81568
|
constructor(hostRef) {
|
|
78803
|
-
index.registerInstance(this, hostRef);
|
|
81569
|
+
index$1.registerInstance(this, hostRef);
|
|
78804
81570
|
/**
|
|
78805
81571
|
* Current progress
|
|
78806
81572
|
* from 0 to 100
|
|
@@ -78825,7 +81591,7 @@ const XvProgressIndicator = class {
|
|
|
78825
81591
|
const progressPerItem = 100 / itemsCount;
|
|
78826
81592
|
if (!items.length || !itemsCount)
|
|
78827
81593
|
return;
|
|
78828
|
-
index$
|
|
81594
|
+
index$2.forEach(items, (item, index) => {
|
|
78829
81595
|
var _a;
|
|
78830
81596
|
const itemProgressStart = index * progressPerItem;
|
|
78831
81597
|
let status;
|
|
@@ -78852,9 +81618,9 @@ const XvProgressIndicator = class {
|
|
|
78852
81618
|
this.updateChildItems();
|
|
78853
81619
|
}
|
|
78854
81620
|
render() {
|
|
78855
|
-
return (index.h(index.Host, { key: '
|
|
81621
|
+
return (index$1.h(index$1.Host, { key: 'bb40f89cb341b8eddf809abb091cf7e14ac76852', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, index$1.h("slot", { key: '71e0cd0931a4173910094c6cd42f741052d54aba' })));
|
|
78856
81622
|
}
|
|
78857
|
-
get el() { return index.getElement(this); }
|
|
81623
|
+
get el() { return index$1.getElement(this); }
|
|
78858
81624
|
static get watchers() { return {
|
|
78859
81625
|
"progress": [{
|
|
78860
81626
|
"updateChildItems": 0
|
|
@@ -78867,13 +81633,13 @@ const xvProgressIndicatorItemCss = () => `.xv-container{width:100%;max-width:117
|
|
|
78867
81633
|
|
|
78868
81634
|
const XvProgressIndicatorItem = class {
|
|
78869
81635
|
constructor(hostRef) {
|
|
78870
|
-
index.registerInstance(this, hostRef);
|
|
81636
|
+
index$1.registerInstance(this, hostRef);
|
|
78871
81637
|
this.status = PROGRESS_ITEM_STATUS.NO_STARTED;
|
|
78872
81638
|
}
|
|
78873
81639
|
render() {
|
|
78874
|
-
return (index.h(index.Host, { key: '
|
|
81640
|
+
return (index$1.h(index$1.Host, { key: '36c3535224bef33c901f5ca306e8a51f7ec67b7d', status: this.status, class: { 'xv-progress-indicator-item': true } }, index$1.h("span", { key: '07f68ece4250da1fa1c6865b2109181b455233ac', class: "line" }), index$1.h("span", { key: '8b1a10b3492a8565a3ece85e0992844b4789f6ed', class: "icon" }, index$1.h("svg", { key: '9b4d63c32a8c8b2b4e48ffd48e1bc97e9d28911b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, index$1.h("path", { key: 'a324fd9401d75744e6f6be34b087035561699c46', 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: 'ced9d4b3685303b707ade7cfbb778e58bd76f354', class: "label" }, index$1.h("slot", { key: 'f016d1345554df36532f7521706a794c9cb6ed76' }))));
|
|
78875
81641
|
}
|
|
78876
|
-
get el() { return index.getElement(this); }
|
|
81642
|
+
get el() { return index$1.getElement(this); }
|
|
78877
81643
|
};
|
|
78878
81644
|
XvProgressIndicatorItem.style = xvProgressIndicatorItemCss();
|
|
78879
81645
|
|
|
@@ -78881,7 +81647,7 @@ const xvRadioCss = () => `.xv-container{width:100%;max-width:1170px;margin-inlin
|
|
|
78881
81647
|
|
|
78882
81648
|
const XvRadio = class {
|
|
78883
81649
|
constructor(hostRef) {
|
|
78884
|
-
index.registerInstance(this, hostRef);
|
|
81650
|
+
index$1.registerInstance(this, hostRef);
|
|
78885
81651
|
var _a, _b;
|
|
78886
81652
|
this.checked = false;
|
|
78887
81653
|
this.indeterminate = false;
|
|
@@ -78903,12 +81669,12 @@ const XvRadio = class {
|
|
|
78903
81669
|
}
|
|
78904
81670
|
}
|
|
78905
81671
|
render() {
|
|
78906
|
-
return (index.h("div", { key: '
|
|
81672
|
+
return (index$1.h("div", { key: 'd39b23f3c28a16df2d1e49adc9fd9f40d7db4f0c', class: {
|
|
78907
81673
|
'xv-radio': true,
|
|
78908
81674
|
'xv-radio--reverse': this.reverse,
|
|
78909
81675
|
'xv-radio--block': this.block,
|
|
78910
81676
|
[`xv-radio--size-${this.size}`]: !!this.size,
|
|
78911
|
-
} }, this.label && index.h("p", { key: '
|
|
81677
|
+
} }, this.label && index$1.h("p", { key: '80d31ae0a11efd2932ccce7cdc63bd4cadddc10f', class: "xv-radio_label" }, this.label), index$1.h("label", { key: '3c35adf7f54f0f9a851895617c2a37af4a169f47', class: { 'xv-radio_container': true, disabled: this.disabled } }, index$1.h("div", { key: '7d855ff448ad0e1f84cab925d6b878266370b9cb', class: { 'xv-radio_input': true, 'xv-radio_input--error': !!this.error || this.error === '' } }, index$1.h("input", { key: 'a294a52f28430bdba5655d4887e4e57134abe949', 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: 'b3027b89b304089daacff7e859b60e39deae808e', class: "xv-radio_input__mark" })), index$1.h("span", { key: '3b1fc2ad56bedc1eda7047e133ce73b23e1b1444', class: "xv-radio_container__label" }, index$1.h("slot", { key: '43e176a5689ec2e8c926a69f06e66e431353dfa2' }))), this.error && typeof this.error === 'string' && (index$1.h("span", { key: 'b0d2bbfb9631cdf6b8a8485939d2409b375a7440', class: "xv-radio_msg xv-radio_msg--error" }, index$1.h("span", { key: '7c5596328ed9442238432afd32d717e1091708e7', class: "xv-radio_msg__status", "aria-hidden": "true" }, "!"), this.error)), this.warning && typeof this.warning === 'string' && (index$1.h("span", { key: '5a436705b45a94e32e34f3c5719297b84a2d4a9a', class: "xv-radio_msg xv-radio_msg--warning" }, index$1.h("span", { key: '9673b716cbc485730743b3c28904cc78a1fb3ece', class: "xv-radio_msg__status", "aria-hidden": "true" }, "\u26A0"), this.warning)), index$1.h("slot", { key: 'e96ff6f8ace0779168cee761635845b6aa17b819', name: "info" })));
|
|
78912
81678
|
}
|
|
78913
81679
|
connectedCallback() {
|
|
78914
81680
|
var _a;
|
|
@@ -78933,7 +81699,7 @@ const XvRadio = class {
|
|
|
78933
81699
|
this.checked = state === this.value;
|
|
78934
81700
|
}
|
|
78935
81701
|
static get formAssociated() { return true; }
|
|
78936
|
-
get el() { return index.getElement(this); }
|
|
81702
|
+
get el() { return index$1.getElement(this); }
|
|
78937
81703
|
static get watchers() { return {
|
|
78938
81704
|
"checked": [{
|
|
78939
81705
|
"onCheckedChange": 0
|
|
@@ -78946,8 +81712,8 @@ const xvSliderCss = () => `.xv-container{width:100%;max-width:1170px;margin-inli
|
|
|
78946
81712
|
|
|
78947
81713
|
const XvSlider = class {
|
|
78948
81714
|
constructor(hostRef) {
|
|
78949
|
-
index.registerInstance(this, hostRef);
|
|
78950
|
-
this.valueChange = index.createEvent(this, "valueChange", 7);
|
|
81715
|
+
index$1.registerInstance(this, hostRef);
|
|
81716
|
+
this.valueChange = index$1.createEvent(this, "valueChange", 7);
|
|
78951
81717
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
78952
81718
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
78953
81719
|
}
|
|
@@ -78992,7 +81758,7 @@ const XvSlider = class {
|
|
|
78992
81758
|
this.setValue(this.min);
|
|
78993
81759
|
}
|
|
78994
81760
|
render() {
|
|
78995
|
-
return (index.h(index.Host, { key: '
|
|
81761
|
+
return (index$1.h(index$1.Host, { key: 'ef456842d1d4c3df75f6c0cb544a1fae87a29dec', class: { disabled: this.disabled, readonly: this.readonly } }, this.label && index$1.h("label", { key: 'f0214585603c03787d7f6301b2ac819bf39aa787', class: "label" }, this.label), index$1.h("div", { key: '6292a5442f275217220fe4242eeb8ac6f6347d63', class: "control" }, index$1.h("span", { key: '3ab0b137d2c6751c0deb24fde8a03f5321de268d', class: "control_label" }, this.min), index$1.h("input", { key: 'a960716059163f3add2d400338aad3314f3b9e3e', 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: '47fda72522094ee1352c5723fac227bb501b6393', class: "control_label" }, this.max), !this.notEditable && (index$1.h("input", { key: '44b86c9b5a2fe3797fcb7a9fc3ceec327860a258', 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 })))));
|
|
78996
81762
|
}
|
|
78997
81763
|
static get formAssociated() { return true; }
|
|
78998
81764
|
};
|
|
@@ -79002,12 +81768,12 @@ const xvTabCss = () => `.xv-container{width:100%;max-width:1170px;margin-inline:
|
|
|
79002
81768
|
|
|
79003
81769
|
const XvTab = class {
|
|
79004
81770
|
constructor(hostRef) {
|
|
79005
|
-
index.registerInstance(this, hostRef);
|
|
81771
|
+
index$1.registerInstance(this, hostRef);
|
|
79006
81772
|
this.disabled = false;
|
|
79007
81773
|
this.loading = false;
|
|
79008
81774
|
}
|
|
79009
81775
|
render() {
|
|
79010
|
-
return (index.h(index.Host, { key: '
|
|
81776
|
+
return (index$1.h(index$1.Host, { key: 'a3a246e230762d73d3121fc7332944268ff98f51', disabled: this.disabled, name: this.name }, this.loading ? index$1.h("xv-loader-v2", { size: _vars.SIZE_VAR.LG }) : index$1.h("slot", null)));
|
|
79011
81777
|
}
|
|
79012
81778
|
};
|
|
79013
81779
|
XvTab.style = xvTabCss();
|
|
@@ -79016,7 +81782,7 @@ const xvTableCss = () => `.xv-container{width:100%;max-width:1170px;margin-inlin
|
|
|
79016
81782
|
|
|
79017
81783
|
const XvTable = class {
|
|
79018
81784
|
constructor(hostRef) {
|
|
79019
|
-
index.registerInstance(this, hostRef);
|
|
81785
|
+
index$1.registerInstance(this, hostRef);
|
|
79020
81786
|
this.size = _vars.SIZE_VAR.MD;
|
|
79021
81787
|
this.selected = new Map();
|
|
79022
81788
|
this.selectedCount = 0;
|
|
@@ -79047,12 +81813,12 @@ const XvTable = class {
|
|
|
79047
81813
|
.join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
|
|
79048
81814
|
}
|
|
79049
81815
|
render() {
|
|
79050
|
-
return (index.h(index.Host, { key: '
|
|
81816
|
+
return (index$1.h(index$1.Host, { key: '9165b2158fd6b349c668897732fddeca1020d4f6', class: { batchVisible: !!this.selectedCount } }, index$1.h("slot", { key: '942a4944c4a52526606ad86677c43bdae161c0bc', name: "title" }, !!this.el.title && index$1.h("h2", { key: '3ef51b8d693e8c9051e9e99d1a5b61fb0ed478fd', class: "xv-table-title" }, this.el.title)), index$1.h("slot", { key: '84f3f4d90446afc9e482d87c8b1a8933b3925674', name: "toolbar" }), index$1.h("div", { key: '380853357cdff87abaddcc332010510d6e43c224', class: "xv-table" }, index$1.h("div", { key: 'be7c3aa788d56981d09743940c282e947eebe77e', class: "batch-actions" }, index$1.h(index$1.Fragment, { key: 'ccab420ac3275c4164842c74f0b6722b502b04f4' }, index$1.h("div", { key: '93d9a2904b6ede48f75420f4ba54c23f852834bf', class: "batch-actions_content" }, index$1.h("slot", { key: '994048ab8173b5d2bde4814c97728eea50c17413', name: "batch" })), index$1.h("p", { key: 'bdf9db2d4a24ce565516b6737b58129522fc679a', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), index$1.h("div", { key: 'b9e0fa25ddfd331c0a1096f4051ebf78aef7c80c', class: "xv-table_wrapper" }, index$1.h("slot", { key: '15d4da2a12dec31d44fcfe23013bf287576c0f5d' }), index$1.h("slot", { key: 'b95b04b5bf2e4beaf138b640e1487e3016413dac', name: "footer" })), !!this.loading && (index$1.h("div", { key: '17038219b16e52bc087fe6886ebe79df8f85d6cc', class: "xv-table_loading" }, index$1.h("xv-loader-v2", { key: '0b06ac0be73bb3c0ff8dccf7311e04ff591e35b6', size: _vars.SIZE_VAR.LG }))))));
|
|
79051
81817
|
}
|
|
79052
81818
|
componentWillLoad() {
|
|
79053
81819
|
this.setColsSizeTemplate();
|
|
79054
81820
|
}
|
|
79055
|
-
get el() { return index.getElement(this); }
|
|
81821
|
+
get el() { return index$1.getElement(this); }
|
|
79056
81822
|
static get watchers() { return {
|
|
79057
81823
|
"colsSize": [{
|
|
79058
81824
|
"setColsSizeTemplate": 0
|
|
@@ -79065,8 +81831,8 @@ const xvTableCellCss = () => `@charset "UTF-8";.xv-container{width:100%;max-widt
|
|
|
79065
81831
|
|
|
79066
81832
|
const XvTableCell = class {
|
|
79067
81833
|
constructor(hostRef) {
|
|
79068
|
-
index.registerInstance(this, hostRef);
|
|
79069
|
-
this.sortChange = index.createEvent(this, "sortChange", 7);
|
|
81834
|
+
index$1.registerInstance(this, hostRef);
|
|
81835
|
+
this.sortChange = index$1.createEvent(this, "sortChange", 7);
|
|
79070
81836
|
}
|
|
79071
81837
|
handleSort() {
|
|
79072
81838
|
if (this.sort === undefined)
|
|
@@ -79077,20 +81843,20 @@ const XvTableCell = class {
|
|
|
79077
81843
|
this.sort = sort === _vars.XV_SORT_DIR.NONE ?
|
|
79078
81844
|
_vars.XV_SORT_DIR.ASC : sort === _vars.XV_SORT_DIR.ASC ?
|
|
79079
81845
|
_vars.XV_SORT_DIR.DESC : _vars.XV_SORT_DIR.NONE;
|
|
79080
|
-
index$
|
|
81846
|
+
index$2.forEach(this.el.parentElement.children, (cell) => {
|
|
79081
81847
|
if (cell !== this.el && cell.hasAttribute('sort')) {
|
|
79082
81848
|
cell.setAttribute('sort', 'none');
|
|
79083
81849
|
}
|
|
79084
81850
|
});
|
|
79085
81851
|
if (!this.name)
|
|
79086
|
-
this.name = index$
|
|
81852
|
+
this.name = index$2.uidGenerator();
|
|
79087
81853
|
this.sortChange.emit({ name: this.name, value: this.sort });
|
|
79088
81854
|
}
|
|
79089
81855
|
;
|
|
79090
81856
|
render() {
|
|
79091
|
-
return (index.h(index.Host, { key: '
|
|
81857
|
+
return (index$1.h(index$1.Host, { key: '831a54a37b0421da3e69c1cd19f41ed645027cc1' }, index$1.h("slot", { key: 'afd20a201d255060cca1f0f4257895cb7761143c' })));
|
|
79092
81858
|
}
|
|
79093
|
-
get el() { return index.getElement(this); }
|
|
81859
|
+
get el() { return index$1.getElement(this); }
|
|
79094
81860
|
};
|
|
79095
81861
|
XvTableCell.style = xvTableCellCss();
|
|
79096
81862
|
|
|
@@ -79101,7 +81867,7 @@ const xvTableExpandCss = () => `.xv-container{width:100%;max-width:1170px;margin
|
|
|
79101
81867
|
|
|
79102
81868
|
const XvTableExpand = class {
|
|
79103
81869
|
constructor(hostRef) {
|
|
79104
|
-
index.registerInstance(this, hostRef);
|
|
81870
|
+
index$1.registerInstance(this, hostRef);
|
|
79105
81871
|
this.open = false;
|
|
79106
81872
|
this.disabled = false;
|
|
79107
81873
|
this.handleExpand = () => {
|
|
@@ -79109,12 +81875,12 @@ const XvTableExpand = class {
|
|
|
79109
81875
|
};
|
|
79110
81876
|
}
|
|
79111
81877
|
render() {
|
|
79112
|
-
return (index.h(index.Host, { key: '
|
|
81878
|
+
return (index$1.h(index$1.Host, { key: '3443d1d685a9dac874ed0127283f445a141c2982' }, index$1.h("button", { key: '7e43a26b0ec58090ff27cf0c10cab3260b2040c4', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), index$1.h("slot", { key: 'aff47453aa4ac5a1d69cd5953b64ce51dd68ab9e', name: XV_EXPANDABLE_KEY }), index$1.h("div", { key: 'e5fd048f354a94272664110560a1d1b574f4fa15', class: { expandableContent: true, open: this.open } }, index$1.h("slot", { key: 'bf70da40879b37ececc8166bfd9d64f3584eef45' }))));
|
|
79113
81879
|
}
|
|
79114
81880
|
componentDidLoad() {
|
|
79115
|
-
index$
|
|
81881
|
+
index$2.setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
|
|
79116
81882
|
}
|
|
79117
|
-
get el() { return index.getElement(this); }
|
|
81883
|
+
get el() { return index$1.getElement(this); }
|
|
79118
81884
|
};
|
|
79119
81885
|
XvTableExpand.style = xvTableExpandCss();
|
|
79120
81886
|
|
|
@@ -79122,14 +81888,14 @@ const xvTableRowCss = () => `.xv-container{width:100%;max-width:1170px;margin-in
|
|
|
79122
81888
|
|
|
79123
81889
|
const XvTableRow = class {
|
|
79124
81890
|
constructor(hostRef) {
|
|
79125
|
-
index.registerInstance(this, hostRef);
|
|
79126
|
-
this.checkedChange = index.createEvent(this, "checkedChange", 7);
|
|
79127
|
-
this.selectRow = index.createEvent(this, "selectRow", 7);
|
|
81891
|
+
index$1.registerInstance(this, hostRef);
|
|
81892
|
+
this.checkedChange = index$1.createEvent(this, "checkedChange", 7);
|
|
81893
|
+
this.selectRow = index$1.createEvent(this, "selectRow", 7);
|
|
79128
81894
|
this.checkHandle = ({ detail: checked }) => {
|
|
79129
81895
|
if (!checked && this.partial)
|
|
79130
81896
|
this.partial = checked;
|
|
79131
81897
|
if (!this.name)
|
|
79132
|
-
this.name = index$
|
|
81898
|
+
this.name = index$2.uidGenerator();
|
|
79133
81899
|
this.selectRow.emit({
|
|
79134
81900
|
name: this.name,
|
|
79135
81901
|
value: this.value,
|
|
@@ -79142,7 +81908,7 @@ const XvTableRow = class {
|
|
|
79142
81908
|
}
|
|
79143
81909
|
checkedChangeHandle() {
|
|
79144
81910
|
if (!this.name)
|
|
79145
|
-
this.name = index$
|
|
81911
|
+
this.name = index$2.uidGenerator();
|
|
79146
81912
|
this.checkedChange.emit({
|
|
79147
81913
|
name: this.name,
|
|
79148
81914
|
value: this.value,
|
|
@@ -79159,17 +81925,17 @@ const XvTableRow = class {
|
|
|
79159
81925
|
this.hover = tableEl.hasAttribute('hover');
|
|
79160
81926
|
}
|
|
79161
81927
|
if (this.variant) {
|
|
79162
|
-
index$
|
|
81928
|
+
index$2.setAttr(this.el.closest(XV_TABLE_TAG), `variant-${this.variant}`, !!this.variant);
|
|
79163
81929
|
}
|
|
79164
81930
|
}
|
|
79165
81931
|
}
|
|
79166
81932
|
render() {
|
|
79167
|
-
return (index.h(index.Host, { key: '
|
|
81933
|
+
return (index$1.h(index$1.Host, { key: '3b825498d2a19ed5c5995a5a88dc690ed2488343' }, this.variant !== undefined && (index$1.h("xv-table-v2-cell", { key: 'd0523d6ff070d06e2e3f6d1043276ba5d45ad897', class: "cell-control" }, this.variant === 'checkbox' && (index$1.h("xv-checkbox-v2", { key: '4a48e8c6dd712b8c1d80114c8e7bc1a5cafba496', 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: '61f9b67b4d2445e2e95ccd5223f2c2da670d2037', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), index$1.h("slot", { key: 'a285f068bbb1abb881d3b0558610c91e9a27e11b' })));
|
|
79168
81934
|
}
|
|
79169
81935
|
componentWillLoad() {
|
|
79170
81936
|
this.setInitialAttrs();
|
|
79171
81937
|
}
|
|
79172
|
-
get el() { return index.getElement(this); }
|
|
81938
|
+
get el() { return index$1.getElement(this); }
|
|
79173
81939
|
static get watchers() { return {
|
|
79174
81940
|
"checked": [{
|
|
79175
81941
|
"checkedChangeHandle": 0
|
|
@@ -79194,8 +81960,8 @@ const xvTabsCss = () => `.xv-container{width:100%;max-width:1170px;margin-inline
|
|
|
79194
81960
|
|
|
79195
81961
|
const XvTabs = class {
|
|
79196
81962
|
constructor(hostRef) {
|
|
79197
|
-
index.registerInstance(this, hostRef);
|
|
79198
|
-
this.activeChange = index.createEvent(this, "activeChange", 7);
|
|
81963
|
+
index$1.registerInstance(this, hostRef);
|
|
81964
|
+
this.activeChange = index$1.createEvent(this, "activeChange", 7);
|
|
79199
81965
|
/**
|
|
79200
81966
|
* Index of active tab
|
|
79201
81967
|
*/
|
|
@@ -79271,17 +82037,17 @@ const XvTabs = class {
|
|
|
79271
82037
|
render() {
|
|
79272
82038
|
var _a, _b, _c, _d;
|
|
79273
82039
|
if (this.loading) {
|
|
79274
|
-
return (index.h(index.Host, { class: "xv-tabs", variant: this.variant }, index.h("xv-loader-v2", { size: _vars.SIZE_VAR.XL })));
|
|
82040
|
+
return (index$1.h(index$1.Host, { class: "xv-tabs", variant: this.variant }, index$1.h("xv-loader-v2", { size: _vars.SIZE_VAR.XL })));
|
|
79275
82041
|
}
|
|
79276
|
-
return (index.h(index.Host, { class: "xv-tabs", variant: this.variant }, index.h("div", { class: "tab-headers", hidden: this.hideSingleTab && ((_a = this.tabElements) === null || _a === void 0 ? void 0 : _a.length) === 1, role: "tablist" }, index.h("button", { hidden: !this.showArrows || !((_b = this.tabElements) === null || _b === void 0 ? void 0 : _b.length), "aria-label": "Previous", class: "tab-headers_btn prev", onClick: () => this.setTab(-1) }), index.h("div", { class: "tab-headers_container" }, ((_c = this.tabElements) === null || _c === void 0 ? void 0 : _c.length) ? this.tabElements.map((tab, index
|
|
82042
|
+
return (index$1.h(index$1.Host, { class: "xv-tabs", variant: this.variant }, index$1.h("div", { class: "tab-headers", hidden: this.hideSingleTab && ((_a = this.tabElements) === null || _a === void 0 ? void 0 : _a.length) === 1, role: "tablist" }, index$1.h("button", { hidden: !this.showArrows || !((_b = this.tabElements) === null || _b === void 0 ? void 0 : _b.length), "aria-label": "Previous", class: "tab-headers_btn prev", onClick: () => this.setTab(-1) }), index$1.h("div", { class: "tab-headers_container" }, ((_c = this.tabElements) === null || _c === void 0 ? void 0 : _c.length) ? this.tabElements.map((tab, index) => (index$1.h("button", { role: "tab", disabled: !!tab.getAttribute('disabled') || !!(tab === null || tab === void 0 ? void 0 : tab.disabled), class: {
|
|
79277
82043
|
'tab-headers_tab': true,
|
|
79278
|
-
active: (tab.getAttribute('name') || `${index
|
|
79279
|
-
}, onClick: () => this.handleTabClick(tab.getAttribute('name') || `${index
|
|
82044
|
+
active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,
|
|
82045
|
+
}, onClick: () => this.handleTabClick(tab.getAttribute('name') || `${index}`) }, tab.getAttribute('label') || `Tab ${index + 1}`))) : this.emptyMessage && index$1.h("p", { class: "xv-tabs_empty" }, this.emptyMessage)), index$1.h("button", { "aria-label": "Next", hidden: !this.showArrows || !((_d = this.tabElements) === null || _d === void 0 ? void 0 : _d.length), class: "tab-headers_btn next", onClick: () => this.setTab(1) })), index$1.h("div", { class: "tab-content-wrapper", role: "tabpanel", tabindex: -1 }, index$1.h("slot", { onSlotchange: this.collectTabs }))));
|
|
79280
82046
|
}
|
|
79281
82047
|
componentDidRender() {
|
|
79282
82048
|
this.updateTabClasses();
|
|
79283
82049
|
}
|
|
79284
|
-
get el() { return index.getElement(this); }
|
|
82050
|
+
get el() { return index$1.getElement(this); }
|
|
79285
82051
|
};
|
|
79286
82052
|
XvTabs.style = xvTabsCss();
|
|
79287
82053
|
|
|
@@ -79289,9 +82055,9 @@ const xvTagComboboxCss = () => `.xv-container{width:100%;max-width:1170px;margin
|
|
|
79289
82055
|
|
|
79290
82056
|
const XvTagCombobox = class {
|
|
79291
82057
|
constructor(hostRef) {
|
|
79292
|
-
index.registerInstance(this, hostRef);
|
|
79293
|
-
this.valueChange = index.createEvent(this, "valueChange", 7);
|
|
79294
|
-
this.inputChange = index.createEvent(this, "inputChange", 7);
|
|
82058
|
+
index$1.registerInstance(this, hostRef);
|
|
82059
|
+
this.valueChange = index$1.createEvent(this, "valueChange", 7);
|
|
82060
|
+
this.inputChange = index$1.createEvent(this, "inputChange", 7);
|
|
79295
82061
|
// props
|
|
79296
82062
|
this.options = [];
|
|
79297
82063
|
this.label = '';
|
|
@@ -79522,14 +82288,14 @@ const XvTagCombobox = class {
|
|
|
79522
82288
|
const suggestionsVisible = this.open && this.filtered.length > 0;
|
|
79523
82289
|
const ariaOwns = suggestionsVisible ? `${this.uid}-listbox` : undefined;
|
|
79524
82290
|
const activedesc = this.highlighted >= 0 ? this.optionId(this.highlighted) : undefined;
|
|
79525
|
-
return (index.h(index.Host, { key: '
|
|
82291
|
+
return (index$1.h(index$1.Host, { key: '96495f25e8a105ea6a93b7e837e24ae6083f3d42', class: "xv-combobox", part: "root", size: this.size }, this.label && index$1.h("label", { key: 'bee7ba8b79541e0e98be5bd4b66a077ce16e4dd1', class: "label" }, this.label), index$1.h("div", { key: '920fc9e5876e55e3c243dcec19cb4ebbd066b4cc', class: {
|
|
79526
82292
|
'control': true,
|
|
79527
82293
|
'control--disabled': this.disabled,
|
|
79528
82294
|
'control--error': !!this.error,
|
|
79529
82295
|
'control--readonly': !!this.readonly,
|
|
79530
|
-
}, onClick: () => this.blockClick() }, index.h("div", { key: '
|
|
82296
|
+
}, onClick: () => this.blockClick() }, index$1.h("div", { key: 'f01b3d43dbe2a242016ff8480a5594c755839730', 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: '420992b83aaa3db4953efa56120fc4e3f9705c68', 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: 'db69212f73783866a0fde4bb74895c18d3b297eb', class: "message message--error" }, this.error)), this.warning && typeof this.warning === 'string' && (index$1.h("p", { key: 'b61a345f03e7d6dbcb2c15721362a651a27486bf', class: "message message--warning" }, this.warning)), suggestionsVisible && (index$1.h("ul", { key: '035b4037f2a86e1b153b9391a1d140111e0d0cb6', 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)))))))))));
|
|
79531
82297
|
}
|
|
79532
|
-
get host() { return index.getElement(this); }
|
|
82298
|
+
get host() { return index$1.getElement(this); }
|
|
79533
82299
|
static get watchers() { return {
|
|
79534
82300
|
"options": [{
|
|
79535
82301
|
"watchOptions": 0
|
|
@@ -79545,8 +82311,8 @@ const xvTagCss = () => `@charset "UTF-8";.xv-container{width:100%;max-width:1170
|
|
|
79545
82311
|
|
|
79546
82312
|
const XvTag = class {
|
|
79547
82313
|
constructor(hostRef) {
|
|
79548
|
-
index.registerInstance(this, hostRef);
|
|
79549
|
-
this.closeClick = index.createEvent(this, "closeClick", 7);
|
|
82314
|
+
index$1.registerInstance(this, hostRef);
|
|
82315
|
+
this.closeClick = index$1.createEvent(this, "closeClick", 7);
|
|
79550
82316
|
this.size = 'md';
|
|
79551
82317
|
this.color = '';
|
|
79552
82318
|
this.bg = '';
|
|
@@ -79559,7 +82325,7 @@ const XvTag = class {
|
|
|
79559
82325
|
this.closeClick.emit(e);
|
|
79560
82326
|
}
|
|
79561
82327
|
render() {
|
|
79562
|
-
return (index.h(index.Host, { key: '
|
|
82328
|
+
return (index$1.h(index$1.Host, { key: '7ef853745a7840918420ece66e329f7c5b18a066', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, index$1.h("div", { key: 'b00e04c91e626964a6b37180c2970be4f0a3155d', class: "xv-tag_content", part: "details-content" }, index$1.h("slot", { key: 'bb288888f2bff1d730283dadc9737128fd1ca7d8' })), this.closeable && (index$1.h("button", { key: 'e184830bf1ffd57caf9142ab9995efcbcd059611', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
|
|
79563
82329
|
}
|
|
79564
82330
|
};
|
|
79565
82331
|
XvTag.style = xvTagCss();
|
|
@@ -79568,8 +82334,8 @@ const xvTextInputCss = () => `.xv-container{width:100%;max-width:1170px;margin-i
|
|
|
79568
82334
|
|
|
79569
82335
|
const XvTextInput = class {
|
|
79570
82336
|
constructor(hostRef) {
|
|
79571
|
-
index.registerInstance(this, hostRef);
|
|
79572
|
-
this.valueChange = index.createEvent(this, "valueChange", 7);
|
|
82337
|
+
index$1.registerInstance(this, hostRef);
|
|
82338
|
+
this.valueChange = index$1.createEvent(this, "valueChange", 7);
|
|
79573
82339
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
79574
82340
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
79575
82341
|
}
|
|
@@ -79593,13 +82359,13 @@ const XvTextInput = class {
|
|
|
79593
82359
|
};
|
|
79594
82360
|
}
|
|
79595
82361
|
render() {
|
|
79596
|
-
return (index.h(index.Host, { key: '
|
|
82362
|
+
return (index$1.h(index$1.Host, { key: '2e6fa4c7fd866857e104cc9eee8bd7f1e1000d36', class: { disabled: !!this.disabled } }, index$1.h("label", { key: '3818f53ff4444350d20e94df3ed8c333fa3afca9', class: "control" }, this.label && index$1.h("span", { key: '0b76eb49d4c63e9d17d67e1ae01976e356230957', class: "control_label" }, this.label), index$1.h("div", { key: 'cc0c3bdad84572f104188f06f4b7170e448e49a0', class: {
|
|
79597
82363
|
'control_input': true,
|
|
79598
82364
|
readonly: !!this.readonly,
|
|
79599
82365
|
[this.size]: true,
|
|
79600
82366
|
error: !!this.error,
|
|
79601
82367
|
warning: !!this.warning,
|
|
79602
|
-
} }, index.h("input", { key: '
|
|
82368
|
+
} }, index$1.h("input", { key: '3a24d98edc170e0b4e2ee9ebd5df39febb5952aa', 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: '874381befedbf3083074142d966fb6ad50e4f4df', class: "control_input__icons" }, this.loading && index$1.h("xv-loader-v2", { key: '1e444f92682c77c2eb38bb76b903247a1ddd0877', 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: 'ff366b830506bf866c747094f9041a498dc9ff15', onClick: this.togglePassword, disabled: this.disabled, class: "status-icon" }, index$1.h("svg", { key: '911022c330c7d92838578a45e26d7ebd9da7fd62', 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: '7a8b366d1ec3bd6fe1ccabacedbea7c72a740fd6', 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));
|
|
79603
82369
|
}
|
|
79604
82370
|
static get formAssociated() { return true; }
|
|
79605
82371
|
};
|
|
@@ -79609,8 +82375,8 @@ const xvTextareaCss = () => `.xv-container{width:100%;max-width:1170px;margin-in
|
|
|
79609
82375
|
|
|
79610
82376
|
const XvTextarea = class {
|
|
79611
82377
|
constructor(hostRef) {
|
|
79612
|
-
index.registerInstance(this, hostRef);
|
|
79613
|
-
this.valueChange = index.createEvent(this, "valueChange", 7);
|
|
82378
|
+
index$1.registerInstance(this, hostRef);
|
|
82379
|
+
this.valueChange = index$1.createEvent(this, "valueChange", 7);
|
|
79614
82380
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
79615
82381
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
79616
82382
|
}
|
|
@@ -79636,21 +82402,21 @@ const XvTextarea = class {
|
|
|
79636
82402
|
this.value && this.internals.setFormValue(this.value);
|
|
79637
82403
|
}
|
|
79638
82404
|
render() {
|
|
79639
|
-
return (index.h(index.Host, { key: '
|
|
82405
|
+
return (index$1.h(index$1.Host, { key: '03e7ebffa73fe67ba9f853af4a1598d77711e687', class: { disabled: !!this.disabled } }, index$1.h("label", { key: 'e1329d2693ad53a17e26d20b6b6f91f24c17fb08', class: "control" }, (this.label || this.max) && (index$1.h("p", { key: '51f236a55bcc5d228247aa5df7ed780175790a39', class: "control_label" }, index$1.h("span", { key: '3212f353d07f9085e14a0a57357919d7b0d839c0' }, this.label, this.info && index$1.h("xv-tooltip-v2", { key: 'c3aa28ecdad09b8ec453027f7cad202d0cdcdec4', message: this.info })), this.max !== undefined && !this.counterHide && (index$1.h("span", { key: '0faf004149c127fde7540e492ecf8bd456aeaca7', class: "control_label__count" }, this.value.length || 0, "/", this.max)))), index$1.h("div", { key: 'dd412a7a38499fe6a04c23f62ac927cb2c0dcec3', class: {
|
|
79640
82406
|
'control_input': true,
|
|
79641
82407
|
readonly: !!this.readonly,
|
|
79642
82408
|
error: !!this.error,
|
|
79643
82409
|
warning: this.warning !== undefined,
|
|
79644
|
-
} }, index.h("textarea", { key: '
|
|
82410
|
+
} }, index$1.h("textarea", { key: '2dca7de68cf3eeaa7c6e01b9e00da26187bb39a1', 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: '88bc05fdb4ad329457b831bb02fba92d073f6953', class: "control_input__icons" }, this._renderIcon()))), this.helper && index$1.h("p", { key: 'e0174e4a3af8217a756f1433872a78bc41cffa8a', 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));
|
|
79645
82411
|
}
|
|
79646
82412
|
_renderIcon() {
|
|
79647
82413
|
if (this.loading)
|
|
79648
|
-
return index.h("xv-loader-v2", { size: _vars.SIZE_VAR.XS });
|
|
82414
|
+
return index$1.h("xv-loader-v2", { size: _vars.SIZE_VAR.XS });
|
|
79649
82415
|
if (!!this.error) {
|
|
79650
|
-
return index.h("span", { class: "status-icon error", "aria-hidden": "true" }, "!");
|
|
82416
|
+
return index$1.h("span", { class: "status-icon error", "aria-hidden": "true" }, "!");
|
|
79651
82417
|
}
|
|
79652
82418
|
else if (!!this.warning) {
|
|
79653
|
-
return index.h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0");
|
|
82419
|
+
return index$1.h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0");
|
|
79654
82420
|
}
|
|
79655
82421
|
return null;
|
|
79656
82422
|
}
|
|
@@ -79662,8 +82428,8 @@ const xvTileCss = () => `@charset "UTF-8";.xv-container{width:100%;max-width:117
|
|
|
79662
82428
|
|
|
79663
82429
|
const XvTile = class {
|
|
79664
82430
|
constructor(hostRef) {
|
|
79665
|
-
index.registerInstance(this, hostRef);
|
|
79666
|
-
this.tileChange = index.createEvent(this, "tileChange", 7);
|
|
82431
|
+
index$1.registerInstance(this, hostRef);
|
|
82432
|
+
this.tileChange = index$1.createEvent(this, "tileChange", 7);
|
|
79667
82433
|
this.variant = 'base';
|
|
79668
82434
|
this.checked = false;
|
|
79669
82435
|
this.readonly = false;
|
|
@@ -79692,7 +82458,7 @@ const XvTile = class {
|
|
|
79692
82458
|
this.checked = !this.checked;
|
|
79693
82459
|
}
|
|
79694
82460
|
render() {
|
|
79695
|
-
return (index.h(index.Host, { key: '
|
|
82461
|
+
return (index$1.h(index$1.Host, { key: 'c6d00c040c1125441fbfbeeec787a49e6d96edd8', class: "xv-tile--host" }, index$1.h("label", { key: 'f2460110e9ff5be0fb97b8d3bf6a60be13d12aef', class: {
|
|
79696
82462
|
[this.el.className]: !!this.el.className,
|
|
79697
82463
|
'xv-tile': true,
|
|
79698
82464
|
[`xv-tile--variant-${this.variant}`]: !!this.variant,
|
|
@@ -79700,9 +82466,9 @@ const XvTile = class {
|
|
|
79700
82466
|
'xv-tile--disabled': !!this.disabled,
|
|
79701
82467
|
'selected': !!this.checked,
|
|
79702
82468
|
'xv-tile--error': !!this.error,
|
|
79703
|
-
} }, index.h("div", { key: '
|
|
82469
|
+
} }, index$1.h("div", { key: '03dfbbb5b4e64827f420499689d9c715bf9c1eda', class: "xv-tile_content" }, this.label && index$1.h("p", { key: '0ce8526939aa10dd81643297228f804ed7e06d8b', class: "xv-tile_content__title" }, this.label), index$1.h("slot", { key: '026f8d5af0ffc6f3b1c2b0ba46e571649ebe80a4' })), this.variant === 'selectable' && (index$1.h("div", { key: 'dacd8cffe17187119d1e2f3b27a47398104e9b8b', 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: '198aec62cbc33730c39a32166684ac03d4f835ca', class: "xv-tile_footer" }, index$1.h("button", { key: '4add8f9f71e08e54c59ea48149a428dbb64e084d', class: { 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked } }))), index$1.h("div", { key: 'ea222f9359fb28d26addec27522a51e83b23f9ae', class: { 'xv-tile_expandable': true, open: this.checked } }, index$1.h("slot", { key: 'af0520de5ba1d48d6c31ed11ea2e94e87b68afdd', name: "expandable" })))));
|
|
79704
82470
|
}
|
|
79705
|
-
get el() { return index.getElement(this); }
|
|
82471
|
+
get el() { return index$1.getElement(this); }
|
|
79706
82472
|
};
|
|
79707
82473
|
XvTile.style = xvTileCss();
|
|
79708
82474
|
|
|
@@ -79710,8 +82476,8 @@ const xvToggleCss = () => `.xv-container{width:100%;max-width:1170px;margin-inli
|
|
|
79710
82476
|
|
|
79711
82477
|
const XvToggle = class {
|
|
79712
82478
|
constructor(hostRef) {
|
|
79713
|
-
index.registerInstance(this, hostRef);
|
|
79714
|
-
this.toggleChange = index.createEvent(this, "toggleChange", 7);
|
|
82479
|
+
index$1.registerInstance(this, hostRef);
|
|
82480
|
+
this.toggleChange = index$1.createEvent(this, "toggleChange", 7);
|
|
79715
82481
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
79716
82482
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
79717
82483
|
}
|
|
@@ -79732,7 +82498,7 @@ const XvToggle = class {
|
|
|
79732
82498
|
};
|
|
79733
82499
|
}
|
|
79734
82500
|
render() {
|
|
79735
|
-
return (index.h(index.Host, { key: '
|
|
82501
|
+
return (index$1.h(index$1.Host, { key: 'a4c7db088862dcae9471dd95b2698af1f77d5017', class: { 'xv-toggle': true, disabled: this.disabled, readonly: !!this.readonly, block: !!this.block } }, this.label && index$1.h("span", { key: '962d886c27033e34c27f5422af41324ad626972e', class: "label" }, this.label), index$1.h("label", { key: '3ab94e6af077e0a3231390e348fd087db0b88de2', class: "control" }, index$1.h("slot", { key: '5df02cdcda6edcc2eaa155b99a8bd5ca18971955', name: "before" }), index$1.h("div", { key: 'a8fd1d667f83b5ac7eb9140101e98a2ef6b5b948', class: "control_input" }, index$1.h("input", { key: 'c36f9ee766631e89ddee7e5ded5f611a2100222f', 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: '331bca3c9e61dce5a7bde5ce4fd1a49d961a1c62', class: "toggle" })), index$1.h("slot", { key: '0d5313bb74c80168f24152d161e96c885eb43b68', name: "after" }))));
|
|
79736
82502
|
}
|
|
79737
82503
|
static get formAssociated() { return true; }
|
|
79738
82504
|
};
|
|
@@ -79742,8 +82508,8 @@ const xvToggleTipCss = () => `.xv-container{width:100%;max-width:1170px;margin-i
|
|
|
79742
82508
|
|
|
79743
82509
|
const XvToggleTip = class {
|
|
79744
82510
|
constructor(hostRef) {
|
|
79745
|
-
index.registerInstance(this, hostRef);
|
|
79746
|
-
this.openChange = index.createEvent(this, "openChange", 3);
|
|
82511
|
+
index$1.registerInstance(this, hostRef);
|
|
82512
|
+
this.openChange = index$1.createEvent(this, "openChange", 3);
|
|
79747
82513
|
this.open = false;
|
|
79748
82514
|
this.autoSize = false;
|
|
79749
82515
|
this.block = false;
|
|
@@ -79809,12 +82575,12 @@ const XvToggleTip = class {
|
|
|
79809
82575
|
}
|
|
79810
82576
|
;
|
|
79811
82577
|
render() {
|
|
79812
|
-
return (index.h(index.Host, { key: '
|
|
82578
|
+
return (index$1.h(index$1.Host, { key: 'ea323b0b30d9c64a8331cdcbe26604aae7514919', class: "xv-toggle-tip" }, index$1.h("div", { key: '755153ca241f3b6dbf4afd679e32f37e02cc6e06', 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: 'de6c5bebb14b9527778583721613dbee8d31c7b9', name: "trigger" }, index$1.h("svg", { key: '422c8198fc6c2acbb7741eeb4fe80a836c513b79', class: "trigger_icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, index$1.h("path", { key: '27acc8437785b92f7e2863d8698e7883e4bd75c1', 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: '02360fd327e3f87ed053a5ad739df8272812c9e5', class: { popover: true, autoSize: !!this.autoSize }, role: "tooltip", tabindex: "-1", ref: (el) => (this.popoverEl = el) }, index$1.h("div", { key: '854fdfebc92d0329104dab26f1971528a99bb1f5', class: "popover-tip", part: "tip", "data-popper-arrow": "" }), index$1.h("div", { key: '34dd98113ac8155556f800cd3fb79c57123bdae7', class: "popover-content" }, index$1.h("slot", { key: 'd00d4259e6eeddfac8ba57e370920ce551fe7687', name: "header" }), index$1.h("slot", { key: '5bf9adb4a8060ec40131010f256c5b26f47afe0e', name: "body" }), index$1.h("slot", { key: '76c01a0f68366f63708520716d2c6c5a37106cce', name: "footer" })))));
|
|
79813
82579
|
}
|
|
79814
82580
|
disconnectedCallback() {
|
|
79815
82581
|
this.destroyPopper();
|
|
79816
82582
|
}
|
|
79817
|
-
get el() { return index.getElement(this); }
|
|
82583
|
+
get el() { return index$1.getElement(this); }
|
|
79818
82584
|
static get watchers() { return {
|
|
79819
82585
|
"open": [{
|
|
79820
82586
|
"openChangeHandle": 0
|
|
@@ -79827,7 +82593,7 @@ const xvTooltipCss = () => `.xv-container{width:100%;max-width:1170px;margin-inl
|
|
|
79827
82593
|
|
|
79828
82594
|
const XvTooltip = class {
|
|
79829
82595
|
constructor(hostRef) {
|
|
79830
|
-
index.registerInstance(this, hostRef);
|
|
82596
|
+
index$1.registerInstance(this, hostRef);
|
|
79831
82597
|
this.position = 'auto';
|
|
79832
82598
|
}
|
|
79833
82599
|
onMouseEnter() {
|
|
@@ -79864,13 +82630,13 @@ const XvTooltip = class {
|
|
|
79864
82630
|
this.destroyTooltip();
|
|
79865
82631
|
}
|
|
79866
82632
|
render() {
|
|
79867
|
-
return (index.h(index.Host, { key: '
|
|
82633
|
+
return (index$1.h(index$1.Host, { key: '4ea241a9d4a49c933300886b7d8cf54321462452', role: "tooltip", class: {
|
|
79868
82634
|
'xv-tooltip-wrapper': true,
|
|
79869
82635
|
[`xv-tooltip-wrapper__block`]: !!this.block,
|
|
79870
82636
|
[`xv-tooltip-wrapper__dashed`]: !!this.dashed,
|
|
79871
|
-
} }, index.h("slot", { key: '
|
|
82637
|
+
} }, index$1.h("slot", { key: '3df199308449e2fea26fd538b72f52b3f08e012b' }, index$1.h("svg", { key: 'c10dcac4a351f1bcb7feadca1650abbe321526ba', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, index$1.h("path", { key: '6ba8aa00b18f4aa21531362f247db04de95c35ec', 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" })))));
|
|
79872
82638
|
}
|
|
79873
|
-
get el() { return index.getElement(this); }
|
|
82639
|
+
get el() { return index$1.getElement(this); }
|
|
79874
82640
|
};
|
|
79875
82641
|
XvTooltip.style = xvTooltipCss();
|
|
79876
82642
|
|