xv-webcomponents 1.16.4 → 1.16.5-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 +3017 -253
- 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 +2 -2
- package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js +1 -1
- package/dist/collection/components/xv-dropdown/xv-dropdown.js +1 -1
- package/dist/collection/components/xv-file-uploader/xv-file-uploader.js +1 -1
- package/dist/collection/components/xv-footer/xv-footer.js +1 -1
- package/dist/collection/components/xv-header/xv-header.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 +2819 -55
- 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-e96a197b.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
|
}
|
|
@@ -77579,12 +80343,12 @@ const XvDatepicker = class {
|
|
|
77579
80343
|
}
|
|
77580
80344
|
render() {
|
|
77581
80345
|
const [start, end] = this.value;
|
|
77582
|
-
return (index.h(index.Host, { key: '
|
|
80346
|
+
return (index$1.h(index$1.Host, { key: '3289a4359e496b9bf4ea367d651b725d4ff0cce4', class: { disabled: !!this.disabled }, tabindex: this.disabled ? '-1' : undefined }, index$1.h("div", { key: 'c0b42eb7c4101ccc696f82d6ed8a623ebf67a1df', "aria-controls": "popover", class: "control" }, this.label && index$1.h("label", { key: '1d05181900511e3e4e8a0888caf04c7795310be2', class: "control_label" }, this.label), index$1.h("div", { key: '894425978fc98868b3b78b0754053f4913fde695', class: {
|
|
77583
80347
|
'control_field': true,
|
|
77584
80348
|
loading: this.loading,
|
|
77585
80349
|
error: !!this.error || !!this.localError,
|
|
77586
80350
|
warning: this.warning !== undefined,
|
|
77587
|
-
}, onClick: this.handleOpen, ref: (el) => (this.controlEl = el) }, index.h("input", { key: '
|
|
80351
|
+
}, onClick: this.handleOpen, ref: (el) => (this.controlEl = el) }, index$1.h("input", { key: 'c1db1ab521162a5a0d8c54600dc82c54c2fe7b2a', 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: 'ae9604705ae82bed2f82759de164ac4a510b8100', 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: '7afbdd9e4b0eccd144b35998110a97ed2d198ae6' }, this.helper && index$1.h("p", { key: 'cd6766d7bd96e2c23b290514ecf5a41c66f0c475', class: "control_message helper" }, this.helper), (this.error || this.warning || this.localError) && (index$1.h("p", { key: '94756aee0bae6ac8fdeb8c2962bb1d664c62c96b', class: { control_message: true, error: !!this.error || !!this.localError } }, this.error || this.localError || this.warning))))), index$1.h("div", { key: '0c7b9a5bd9f0b8cb3577bf1dfffef00aae071d84', role: "dialog", class: { popover: true, open: this.open }, ref: (el) => (this.popoverEl = el) }, index$1.h("div", { key: 'cc47a62bf581a3e0ad22f4a6c450ce1b1f93beab', class: "header" }, index$1.h("xv-button-v2", { key: '32968cc1355f18f26492a5a13c8d32aef24b3191', tabindex: this.open ? undefined : '-1', disabled: this.isPrevDisabled, variant: "ghost", onClick: this.prevMonth }, index$1.h("span", { key: '96e96385516abad610fe442be13ac476de1d4c0d', slot: "icon-left", class: "header_icon prev" })), index$1.h("p", { key: '18216a0dc2934485f4b39745071eeaf9991e3901', class: "header_date" }, dateFns.format(this.month, 'LLLL', { locale: localeExports.de }), index$1.h("input", { key: '44794c9903616f2096af25ad34827fb89cd3e955', tabindex: this.open ? undefined : '-1', type: "number", value: this.month.getFullYear(), onInput: this.handleYearChange, onBlur: this.handleYearBlur })), index$1.h("xv-button-v2", { key: '199eab4375e1c8f331e9a02d1f0a7b97274233d0', tabindex: this.open ? undefined : '-1', disabled: this.isNextDisabled, variant: "ghost", onClick: this.nextMonth }, index$1.h("span", { key: '5669d1a32d2fca702837077ab47d5e337524d1f9', slot: "icon-left", class: "header_icon next" }))), index$1.h("div", { key: '62c8026ab7a1c86a8884b92892687cedacab2c8e', class: "week" }, index$1.h("p", { key: 'b8352feda8503fa2a53916b676fa4c1fc177a1f9', class: "week_day" }), WEEK.map((day) => index$1.h("p", { class: "week_day" }, day, "."))), index$1.h("div", { key: '020132e4ed4dea2c6836d2fe2d5126e595874b41', 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
80352
|
'week_day': true,
|
|
77589
80353
|
inRange: this.variant === 'range' && dateFns.isWithinInterval(day.date, { start, end }),
|
|
77590
80354
|
isToday: day.isToday,
|
|
@@ -77593,7 +80357,7 @@ const XvDatepicker = class {
|
|
|
77593
80357
|
} }, day.day))))))));
|
|
77594
80358
|
}
|
|
77595
80359
|
static get formAssociated() { return true; }
|
|
77596
|
-
get el() { return index.getElement(this); }
|
|
80360
|
+
get el() { return index$1.getElement(this); }
|
|
77597
80361
|
static get watchers() { return {
|
|
77598
80362
|
"open": [{
|
|
77599
80363
|
"openChange": 0
|
|
@@ -77614,9 +80378,9 @@ const xvDropdownCss = () => `.xv-container{width:100%;max-width:1170px;margin-in
|
|
|
77614
80378
|
|
|
77615
80379
|
const XvDropdown = class {
|
|
77616
80380
|
constructor(hostRef) {
|
|
77617
|
-
index.registerInstance(this, hostRef);
|
|
77618
|
-
this.changeSelection = index.createEvent(this, "changeSelection", 7);
|
|
77619
|
-
this.openChange = index.createEvent(this, "openChange", 3);
|
|
80381
|
+
index$1.registerInstance(this, hostRef);
|
|
80382
|
+
this.changeSelection = index$1.createEvent(this, "changeSelection", 7);
|
|
80383
|
+
this.openChange = index$1.createEvent(this, "openChange", 3);
|
|
77620
80384
|
this.searchPlaceholder = 'Suchen';
|
|
77621
80385
|
this.size = _vars.SIZE_VAR.MD;
|
|
77622
80386
|
this.variant = 'default';
|
|
@@ -77652,7 +80416,7 @@ const XvDropdown = class {
|
|
|
77652
80416
|
};
|
|
77653
80417
|
this.clearHandle = () => {
|
|
77654
80418
|
const options = this.el.querySelectorAll(DropdownItemSelector);
|
|
77655
|
-
index$
|
|
80419
|
+
index$2.forEach(options, (option) => index$2.setAttr(option, 'selected', false));
|
|
77656
80420
|
this.selectedMap.clear();
|
|
77657
80421
|
this.changeSelection.emit(this.setSelected(this.selectedMap, options));
|
|
77658
80422
|
};
|
|
@@ -77695,10 +80459,10 @@ const XvDropdown = class {
|
|
|
77695
80459
|
}
|
|
77696
80460
|
}
|
|
77697
80461
|
multipleChangeHandle() {
|
|
77698
|
-
index$
|
|
77699
|
-
index$
|
|
80462
|
+
index$2.forEach(this.el.querySelectorAll(DropdownItemSelector), (option) => {
|
|
80463
|
+
index$2.setAttr(option, 'size', this.size);
|
|
77700
80464
|
if (this.multiple)
|
|
77701
|
-
index$
|
|
80465
|
+
index$2.setAttr(option, 'multiple', this.multiple);
|
|
77702
80466
|
});
|
|
77703
80467
|
}
|
|
77704
80468
|
valueChange() {
|
|
@@ -77713,14 +80477,14 @@ const XvDropdown = class {
|
|
|
77713
80477
|
if (values.every((v) => this.selectedMap.has(v)))
|
|
77714
80478
|
return;
|
|
77715
80479
|
const selected = new Set(values);
|
|
77716
|
-
index$
|
|
80480
|
+
index$2.forEach(options, (option) => {
|
|
77717
80481
|
const value = option.getAttribute('value');
|
|
77718
80482
|
const dropdownItemData = {
|
|
77719
80483
|
value,
|
|
77720
80484
|
text: option.innerText || '',
|
|
77721
80485
|
selected: selected.has(Number(value)) || selected.has(value),
|
|
77722
80486
|
};
|
|
77723
|
-
index$
|
|
80487
|
+
index$2.setAttr(option, 'selected', dropdownItemData.selected);
|
|
77724
80488
|
if (dropdownItemData.selected) {
|
|
77725
80489
|
this.selectedMap.set(dropdownItemData.value, dropdownItemData);
|
|
77726
80490
|
}
|
|
@@ -77757,12 +80521,12 @@ const XvDropdown = class {
|
|
|
77757
80521
|
this.open = false;
|
|
77758
80522
|
}
|
|
77759
80523
|
const optionElements = this.el.querySelectorAll(DropdownItemSelector);
|
|
77760
|
-
index$
|
|
80524
|
+
index$2.forEach(optionElements, (option) => index$2.setAttr(option, 'selected', this.selectedMap.has(option.getAttribute('value'))));
|
|
77761
80525
|
this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));
|
|
77762
80526
|
}
|
|
77763
80527
|
/* endregion Search methods */
|
|
77764
80528
|
render() {
|
|
77765
|
-
return (index.h(index.Host, { key: '
|
|
80529
|
+
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
80530
|
}
|
|
77767
80531
|
componentDidLoad() {
|
|
77768
80532
|
this.syncOpenState();
|
|
@@ -77775,17 +80539,17 @@ const XvDropdown = class {
|
|
|
77775
80539
|
}
|
|
77776
80540
|
_renderIcon() {
|
|
77777
80541
|
if (this.loading) {
|
|
77778
|
-
return index.h("xv-loader-v2", { class: "control_icon error", size: _vars.SIZE_VAR.XS });
|
|
80542
|
+
return index$1.h("xv-loader-v2", { class: "control_icon error", size: _vars.SIZE_VAR.XS });
|
|
77779
80543
|
}
|
|
77780
80544
|
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" })));
|
|
80545
|
+
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
80546
|
}
|
|
77783
80547
|
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" })));
|
|
80548
|
+
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
80549
|
}
|
|
77786
80550
|
return undefined;
|
|
77787
80551
|
}
|
|
77788
|
-
get el() { return index.getElement(this); }
|
|
80552
|
+
get el() { return index$1.getElement(this); }
|
|
77789
80553
|
static get watchers() { return {
|
|
77790
80554
|
"open": [{
|
|
77791
80555
|
"openChangeHandle": 0
|
|
@@ -77804,8 +80568,8 @@ const xvDropdownItemCss = () => `.xv-container{width:100%;max-width:1170px;margi
|
|
|
77804
80568
|
|
|
77805
80569
|
const XvDropdownItem = class {
|
|
77806
80570
|
constructor(hostRef) {
|
|
77807
|
-
index.registerInstance(this, hostRef);
|
|
77808
|
-
this.itemSelected = index.createEvent(this, "itemSelected", 7);
|
|
80571
|
+
index$1.registerInstance(this, hostRef);
|
|
80572
|
+
this.itemSelected = index$1.createEvent(this, "itemSelected", 7);
|
|
77809
80573
|
this.disabled = false;
|
|
77810
80574
|
this.value = '';
|
|
77811
80575
|
this.selected = false;
|
|
@@ -77822,13 +80586,13 @@ const XvDropdownItem = class {
|
|
|
77822
80586
|
});
|
|
77823
80587
|
}
|
|
77824
80588
|
render() {
|
|
77825
|
-
return (index.h(index.Host, { key: '
|
|
80589
|
+
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
80590
|
}
|
|
77827
80591
|
componentWillLoad() {
|
|
77828
80592
|
if (!this.value)
|
|
77829
80593
|
this.value = this.el.innerText;
|
|
77830
80594
|
}
|
|
77831
|
-
get el() { return index.getElement(this); }
|
|
80595
|
+
get el() { return index$1.getElement(this); }
|
|
77832
80596
|
};
|
|
77833
80597
|
XvDropdownItem.style = xvDropdownItemCss();
|
|
77834
80598
|
|
|
@@ -77842,9 +80606,9 @@ const xvFileUploaderCss = () => `.xv-container{width:100%;max-width:1170px;margi
|
|
|
77842
80606
|
|
|
77843
80607
|
const XvFileUploader = class {
|
|
77844
80608
|
constructor(hostRef) {
|
|
77845
|
-
index.registerInstance(this, hostRef);
|
|
77846
|
-
this.filesChange = index.createEvent(this, "filesChange", 7);
|
|
77847
|
-
this.fileRemoved = index.createEvent(this, "fileRemoved", 7);
|
|
80609
|
+
index$1.registerInstance(this, hostRef);
|
|
80610
|
+
this.filesChange = index$1.createEvent(this, "filesChange", 7);
|
|
80611
|
+
this.fileRemoved = index$1.createEvent(this, "fileRemoved", 7);
|
|
77848
80612
|
this.variant = XvFileUploaderVariants.BUTTON;
|
|
77849
80613
|
this.size = _vars.SIZE_VAR.MD;
|
|
77850
80614
|
this.accept = [];
|
|
@@ -77926,35 +80690,35 @@ const XvFileUploader = class {
|
|
|
77926
80690
|
}
|
|
77927
80691
|
}
|
|
77928
80692
|
render() {
|
|
77929
|
-
return (index.h(index.Host, { key: '
|
|
80693
|
+
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
80694
|
var _a, _b;
|
|
77931
|
-
return (index.h("li", { class: { file: true, withError: !!(((_a = this.errors) === null || _a === void 0 ? void 0 : _a[index
|
|
80695
|
+
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
80696
|
}))));
|
|
77933
80697
|
}
|
|
77934
|
-
_renderLoaderState(index
|
|
80698
|
+
_renderLoaderState(index) {
|
|
77935
80699
|
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
|
|
80700
|
+
const state = ((_a = this.loadingStates) === null || _a === void 0 ? void 0 : _a[index]) || null;
|
|
80701
|
+
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
80702
|
switch (state) {
|
|
77939
80703
|
case 'loading':
|
|
77940
|
-
return (index.h(index.Fragment, null, errorIcon, index.h("xv-loader-v2", { size: _vars.SIZE_VAR.XS })));
|
|
80704
|
+
return (index$1.h(index$1.Fragment, null, errorIcon, index$1.h("xv-loader-v2", { size: _vars.SIZE_VAR.XS })));
|
|
77941
80705
|
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
|
|
80706
|
+
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
80707
|
case 'uploaded':
|
|
77944
80708
|
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
|
|
80709
|
+
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
80710
|
}
|
|
77947
80711
|
}
|
|
77948
|
-
_renderError(index
|
|
80712
|
+
_renderError(index) {
|
|
77949
80713
|
var _a, _b;
|
|
77950
|
-
const error = ((_a = this.errors) === null || _a === void 0 ? void 0 : _a[index
|
|
80714
|
+
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
80715
|
if (!error)
|
|
77952
80716
|
return;
|
|
77953
80717
|
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)));
|
|
80718
|
+
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
80719
|
}
|
|
77956
80720
|
if (typeof error === 'string') {
|
|
77957
|
-
return (index.h("div", { class: "error-container" }, index.h("p", { class: "error-container_primary" }, error)));
|
|
80721
|
+
return (index$1.h("div", { class: "error-container" }, index$1.h("p", { class: "error-container_primary" }, error)));
|
|
77958
80722
|
}
|
|
77959
80723
|
return null;
|
|
77960
80724
|
}
|
|
@@ -77965,7 +80729,7 @@ const xvFooterCss = () => `.xv-container{width:100%;max-width:1170px;margin-inli
|
|
|
77965
80729
|
|
|
77966
80730
|
const Xvfooter = class {
|
|
77967
80731
|
constructor(hostRef) {
|
|
77968
|
-
index.registerInstance(this, hostRef);
|
|
80732
|
+
index$1.registerInstance(this, hostRef);
|
|
77969
80733
|
this.openCookieSettings = (e) => {
|
|
77970
80734
|
var _a;
|
|
77971
80735
|
e.preventDefault();
|
|
@@ -77974,9 +80738,9 @@ const Xvfooter = class {
|
|
|
77974
80738
|
}
|
|
77975
80739
|
async handleLoadData() {
|
|
77976
80740
|
const baseUrl = 'https://xvsitefinitystorage.blob.core.windows.net/production/components/xv-footer/';
|
|
77977
|
-
const brand = index$
|
|
80741
|
+
const brand = index$2.resolveWhitelabel() || 'Xv';
|
|
77978
80742
|
try {
|
|
77979
|
-
this.data = await index$
|
|
80743
|
+
this.data = await index$2.api.get(`${baseUrl}xv-footer.data.${brand}.json`, { raw: true });
|
|
77980
80744
|
return;
|
|
77981
80745
|
}
|
|
77982
80746
|
catch (err) {
|
|
@@ -77986,7 +80750,7 @@ const Xvfooter = class {
|
|
|
77986
80750
|
}
|
|
77987
80751
|
// Fallback to default brand
|
|
77988
80752
|
try {
|
|
77989
|
-
this.data = await index$
|
|
80753
|
+
this.data = await index$2.api.get(`${baseUrl}xv-footer.data.Xv.json`, { raw: true });
|
|
77990
80754
|
}
|
|
77991
80755
|
catch (finalErr) {
|
|
77992
80756
|
console.error('Fallback footer load failed:', finalErr);
|
|
@@ -77998,18 +80762,18 @@ const Xvfooter = class {
|
|
|
77998
80762
|
render() {
|
|
77999
80763
|
const { categories, socials, logo, legalLinks, payments, partners, advantages } = this.data || {};
|
|
78000
80764
|
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: '
|
|
80765
|
+
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
80766
|
if (item.label === 'Cookie Einstellungen') {
|
|
78003
|
-
return index.h("li", null, index.h("a", { class: "xv-helper-text-02", onClick: this.openCookieSettings }, item.label));
|
|
80767
|
+
return index$1.h("li", null, index$1.h("a", { class: "xv-helper-text-02", onClick: this.openCookieSettings }, item.label));
|
|
78004
80768
|
}
|
|
78005
|
-
return index.h("li", null, index.h("a", { class: "xv-helper-text-02", href: item.href, target: item.target }, item.label));
|
|
80769
|
+
return index$1.h("li", null, index$1.h("a", { class: "xv-helper-text-02", href: item.href, target: item.target }, item.label));
|
|
78006
80770
|
}))))))));
|
|
78007
80771
|
}
|
|
78008
80772
|
_renderFooterList(items = [], opt) {
|
|
78009
80773
|
if (!(items === null || items === void 0 ? void 0 : items.length))
|
|
78010
80774
|
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;
|
|
80775
|
+
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)))))));
|
|
80776
|
+
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
80777
|
}
|
|
78014
80778
|
};
|
|
78015
80779
|
Xvfooter.style = xvFooterCss();
|
|
@@ -78020,8 +80784,8 @@ const xvHeaderCss = () => `.xv-container{width:100%;max-width:1170px;margin-inli
|
|
|
78020
80784
|
|
|
78021
80785
|
const XvHeader = class {
|
|
78022
80786
|
constructor(hostRef) {
|
|
78023
|
-
index.registerInstance(this, hostRef);
|
|
78024
|
-
this.xvMetaNavUpdate = index.createEvent(this, "xvMetaNavUpdate", 7);
|
|
80787
|
+
index$1.registerInstance(this, hostRef);
|
|
80788
|
+
this.xvMetaNavUpdate = index$1.createEvent(this, "xvMetaNavUpdate", 7);
|
|
78025
80789
|
this.orgUnit = '';
|
|
78026
80790
|
this.baseUrl = '';
|
|
78027
80791
|
this.loading = false;
|
|
@@ -78066,7 +80830,7 @@ const XvHeader = class {
|
|
|
78066
80830
|
$select: 'title_de,page_link,source',
|
|
78067
80831
|
$orderby: 'source desc',
|
|
78068
80832
|
}).toString();
|
|
78069
|
-
this.suggestions = await index$
|
|
80833
|
+
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
80834
|
}
|
|
78071
80835
|
catch (error) {
|
|
78072
80836
|
console.log('error', error);
|
|
@@ -78104,7 +80868,7 @@ const XvHeader = class {
|
|
|
78104
80868
|
}
|
|
78105
80869
|
metaNavUpdate() {
|
|
78106
80870
|
var _a, _b;
|
|
78107
|
-
const metaNav = index$
|
|
80871
|
+
const metaNav = index$2.getMetaNav();
|
|
78108
80872
|
if (metaNav) {
|
|
78109
80873
|
this.metaNav = metaNav;
|
|
78110
80874
|
this.orgUnit = ((_b = (_a = this.metaNav) === null || _a === void 0 ? void 0 : _a.User) === null || _b === void 0 ? void 0 : _b.SelectedOrgUnitName) || '';
|
|
@@ -78113,13 +80877,13 @@ const XvHeader = class {
|
|
|
78113
80877
|
console.info('MetaNav was updated', this.metaNav);
|
|
78114
80878
|
}
|
|
78115
80879
|
componentWillLoad() {
|
|
78116
|
-
this.baseUrl = index$
|
|
80880
|
+
this.baseUrl = index$2.getBaseUrl();
|
|
78117
80881
|
void this.initHeader();
|
|
78118
80882
|
}
|
|
78119
80883
|
async initHeader() {
|
|
78120
80884
|
try {
|
|
78121
80885
|
this.loading = true;
|
|
78122
|
-
const metaNav = await index$
|
|
80886
|
+
const metaNav = await index$2.api.post('/de-de/home/getpersonalareajson', undefined, { credentials: 'include' });
|
|
78123
80887
|
this.xvMetaNavUpdate.emit(metaNav);
|
|
78124
80888
|
localStorage.setItem('metaNav', JSON.stringify(metaNav));
|
|
78125
80889
|
}
|
|
@@ -78135,7 +80899,7 @@ const XvHeader = class {
|
|
|
78135
80899
|
var _a;
|
|
78136
80900
|
if (((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a['EnableMegaMenuSearch']) !== true)
|
|
78137
80901
|
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$
|
|
80902
|
+
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
80903
|
}
|
|
78140
80904
|
// endregion
|
|
78141
80905
|
// region ImpersonationInfo
|
|
@@ -78143,14 +80907,14 @@ const XvHeader = class {
|
|
|
78143
80907
|
var _a, _b, _c, _d, _e;
|
|
78144
80908
|
if (!((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a.ImpersonationInfo))
|
|
78145
80909
|
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")))));
|
|
80910
|
+
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
80911
|
}
|
|
78148
80912
|
async getNotifications() {
|
|
78149
80913
|
var _a;
|
|
78150
80914
|
if (!((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a.IsManager))
|
|
78151
80915
|
return;
|
|
78152
80916
|
try {
|
|
78153
|
-
this.notifications = await index$
|
|
80917
|
+
this.notifications = await index$2.api.get(`${this.baseUrl}/de-de/api/notifications/list`, { credentials: 'include' }).then(res => Array.isArray(res) ? res : []);
|
|
78154
80918
|
}
|
|
78155
80919
|
catch (error) {
|
|
78156
80920
|
this.notifications = [];
|
|
@@ -78160,33 +80924,33 @@ const XvHeader = class {
|
|
|
78160
80924
|
var _a;
|
|
78161
80925
|
if (!((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a.IsManager))
|
|
78162
80926
|
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: {
|
|
80927
|
+
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
80928
|
far: true,
|
|
78165
80929
|
'fa-clock': !notification.status,
|
|
78166
80930
|
'fa-times-circle': notification.status === 1,
|
|
78167
80931
|
'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")))))))));
|
|
80932
|
+
} }), 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
80933
|
}
|
|
78170
80934
|
_renderAccount() {
|
|
78171
80935
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
78172
80936
|
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"))));
|
|
80937
|
+
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
80938
|
}
|
|
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")))));
|
|
80939
|
+
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
80940
|
}
|
|
78177
80941
|
// endregion Account
|
|
78178
80942
|
// region ShoppingCart
|
|
78179
80943
|
_renderShoppingCart() {
|
|
78180
80944
|
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)))));
|
|
80945
|
+
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
80946
|
}
|
|
78183
80947
|
// endregion ShoppingCart
|
|
78184
80948
|
render() {
|
|
78185
80949
|
var _a, _b, _c, _d, _e;
|
|
78186
80950
|
const isXvBrand = (((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a['WhitelabelName']) || 'Xv') === 'Xv';
|
|
78187
|
-
return (index.h("header", { key: '
|
|
80951
|
+
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
80952
|
}
|
|
78189
|
-
get el() { return index.getElement(this); }
|
|
80953
|
+
get el() { return index$1.getElement(this); }
|
|
78190
80954
|
};
|
|
78191
80955
|
XvHeader.style = xvHeaderCss();
|
|
78192
80956
|
|
|
@@ -78194,7 +80958,7 @@ const xvImageViewerCss = () => `.xv-container{width:100%;max-width:1170px;margin
|
|
|
78194
80958
|
|
|
78195
80959
|
const XvImageViewer = class {
|
|
78196
80960
|
constructor(hostRef) {
|
|
78197
|
-
index.registerInstance(this, hostRef);
|
|
80961
|
+
index$1.registerInstance(this, hostRef);
|
|
78198
80962
|
this.alt = '';
|
|
78199
80963
|
this.placeholder = '';
|
|
78200
80964
|
this.lazy = false;
|
|
@@ -78229,12 +80993,12 @@ const XvImageViewer = class {
|
|
|
78229
80993
|
}
|
|
78230
80994
|
}
|
|
78231
80995
|
render() {
|
|
78232
|
-
return (index.h(index.Host, { key: '
|
|
80996
|
+
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
80997
|
'fullscreen-image': true,
|
|
78234
80998
|
loaded: this.fullscreenLoaded,
|
|
78235
80999
|
} })))));
|
|
78236
81000
|
}
|
|
78237
|
-
get el() { return index.getElement(this); }
|
|
81001
|
+
get el() { return index$1.getElement(this); }
|
|
78238
81002
|
};
|
|
78239
81003
|
XvImageViewer.style = xvImageViewerCss();
|
|
78240
81004
|
|
|
@@ -78242,7 +81006,7 @@ const xvLinkCss = () => `.xv-container{width:100%;max-width:1170px;margin-inline
|
|
|
78242
81006
|
|
|
78243
81007
|
const XvLink = class {
|
|
78244
81008
|
constructor(hostRef) {
|
|
78245
|
-
index.registerInstance(this, hostRef);
|
|
81009
|
+
index$1.registerInstance(this, hostRef);
|
|
78246
81010
|
this.disabled = false;
|
|
78247
81011
|
this.size = 'md';
|
|
78248
81012
|
this.variant = 'inline';
|
|
@@ -78254,7 +81018,7 @@ const XvLink = class {
|
|
|
78254
81018
|
e.stopPropagation();
|
|
78255
81019
|
}
|
|
78256
81020
|
render() {
|
|
78257
|
-
return (index.h(index.Host, { key: '
|
|
81021
|
+
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
81022
|
}
|
|
78259
81023
|
};
|
|
78260
81024
|
XvLink.style = xvLinkCss();
|
|
@@ -78263,7 +81027,7 @@ const xvLoaderCss = () => `.xv-container{width:100%;max-width:1170px;margin-inli
|
|
|
78263
81027
|
|
|
78264
81028
|
const XvLoader = class {
|
|
78265
81029
|
constructor(hostRef) {
|
|
78266
|
-
index.registerInstance(this, hostRef);
|
|
81030
|
+
index$1.registerInstance(this, hostRef);
|
|
78267
81031
|
/**
|
|
78268
81032
|
* Is component displayed
|
|
78269
81033
|
*/
|
|
@@ -78280,7 +81044,7 @@ const XvLoader = class {
|
|
|
78280
81044
|
render() {
|
|
78281
81045
|
if (!this.show)
|
|
78282
81046
|
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)));
|
|
81047
|
+
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
81048
|
}
|
|
78285
81049
|
};
|
|
78286
81050
|
XvLoader.style = xvLoaderCss();
|
|
@@ -78297,8 +81061,8 @@ const xvLoginModalCss = () => `.xv-container.sc-xv-login-modal{width:100%;max-wi
|
|
|
78297
81061
|
|
|
78298
81062
|
const XvLoginModal = class {
|
|
78299
81063
|
constructor(hostRef) {
|
|
78300
|
-
index.registerInstance(this, hostRef);
|
|
78301
|
-
this.close = index.createEvent(this, "close", 7);
|
|
81064
|
+
index$1.registerInstance(this, hostRef);
|
|
81065
|
+
this.close = index$1.createEvent(this, "close", 7);
|
|
78302
81066
|
this.visible = false;
|
|
78303
81067
|
this.urls = {
|
|
78304
81068
|
return: '/',
|
|
@@ -78343,18 +81107,18 @@ const XvLoginModal = class {
|
|
|
78343
81107
|
}
|
|
78344
81108
|
setUrls() {
|
|
78345
81109
|
var _a;
|
|
78346
|
-
const baseUrl = index$
|
|
81110
|
+
const baseUrl = index$2.getBaseUrl();
|
|
78347
81111
|
const returnUrl = new URLSearchParams(location.search).get('returnUrl') || location.href;
|
|
78348
81112
|
this.urls = {
|
|
78349
81113
|
return: returnUrl.toLowerCase().includes('resetpassword') ? '/' : returnUrl,
|
|
78350
|
-
contact: (_a = index$
|
|
81114
|
+
contact: (_a = index$2.getMetaNav().ContactUrl) !== null && _a !== void 0 ? _a : `${baseUrl}/ueber-uns/kontakt`,
|
|
78351
81115
|
base: baseUrl,
|
|
78352
81116
|
};
|
|
78353
81117
|
}
|
|
78354
81118
|
render() {
|
|
78355
81119
|
if (!this.visible)
|
|
78356
81120
|
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."))))));
|
|
81121
|
+
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
81122
|
}
|
|
78359
81123
|
};
|
|
78360
81124
|
XvLoginModal.style = xvLoginModalCss();
|
|
@@ -78363,8 +81127,8 @@ const xvMegaMenuCss = () => `.xv-container{width:100%;max-width:1170px;margin-in
|
|
|
78363
81127
|
|
|
78364
81128
|
const XvMegaMenu = class {
|
|
78365
81129
|
constructor(hostRef) {
|
|
78366
|
-
index.registerInstance(this, hostRef);
|
|
78367
|
-
this.openChange = index.createEvent(this, "openChange", 7);
|
|
81130
|
+
index$1.registerInstance(this, hostRef);
|
|
81131
|
+
this.openChange = index$1.createEvent(this, "openChange", 7);
|
|
78368
81132
|
this.mobileSize = 991;
|
|
78369
81133
|
this.open = false;
|
|
78370
81134
|
this.menuItems = [];
|
|
@@ -78405,7 +81169,7 @@ const XvMegaMenu = class {
|
|
|
78405
81169
|
}
|
|
78406
81170
|
async fetchMenuData() {
|
|
78407
81171
|
try {
|
|
78408
|
-
this.menuItems = await index$
|
|
81172
|
+
this.menuItems = await index$2.api.get('/api-fd/v1/home/menu', {
|
|
78409
81173
|
awaitWl: true,
|
|
78410
81174
|
credentials: 'include'
|
|
78411
81175
|
}).then(({ data, meta }) => {
|
|
@@ -78422,19 +81186,19 @@ const XvMegaMenu = class {
|
|
|
78422
81186
|
void this.fetchMenuData();
|
|
78423
81187
|
}
|
|
78424
81188
|
render() {
|
|
78425
|
-
return (index.h(index.Host, { key: '
|
|
81189
|
+
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
81190
|
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) => {
|
|
81191
|
+
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
81192
|
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: {
|
|
81193
|
+
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
81194
|
'group-container-absolute': true,
|
|
78431
81195
|
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"))))))))));
|
|
81196
|
+
} }, 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' &&
|
|
81197
|
+
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
81198
|
}))))));
|
|
78435
|
-
}), index.h("li", { key: '
|
|
81199
|
+
}), 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
81200
|
}
|
|
78437
|
-
get el() { return index.getElement(this); }
|
|
81201
|
+
get el() { return index$1.getElement(this); }
|
|
78438
81202
|
};
|
|
78439
81203
|
XvMegaMenu.style = xvMegaMenuCss();
|
|
78440
81204
|
|
|
@@ -78442,8 +81206,8 @@ const xvModalCss = () => `.xv-container{width:100%;max-width:1170px;margin-inlin
|
|
|
78442
81206
|
|
|
78443
81207
|
const XvModal = class {
|
|
78444
81208
|
constructor(hostRef) {
|
|
78445
|
-
index.registerInstance(this, hostRef);
|
|
78446
|
-
this.openChange = index.createEvent(this, "openChange", 3);
|
|
81209
|
+
index$1.registerInstance(this, hostRef);
|
|
81210
|
+
this.openChange = index$1.createEvent(this, "openChange", 3);
|
|
78447
81211
|
/**
|
|
78448
81212
|
* Is modal opened
|
|
78449
81213
|
*/
|
|
@@ -78500,12 +81264,12 @@ const XvModal = class {
|
|
|
78500
81264
|
}
|
|
78501
81265
|
render() {
|
|
78502
81266
|
var _a;
|
|
78503
|
-
return (index.h(index.Host, { key: '
|
|
81267
|
+
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
81268
|
}
|
|
78505
81269
|
disconnectedCallback() {
|
|
78506
81270
|
this.removeTriggerListener();
|
|
78507
81271
|
}
|
|
78508
|
-
get el() { return index.getElement(this); }
|
|
81272
|
+
get el() { return index$1.getElement(this); }
|
|
78509
81273
|
};
|
|
78510
81274
|
XvModal.style = xvModalCss();
|
|
78511
81275
|
|
|
@@ -78513,24 +81277,24 @@ const xvNotificationCss = () => `.xv-container{width:100%;max-width:1170px;margi
|
|
|
78513
81277
|
|
|
78514
81278
|
const XvNotification = class {
|
|
78515
81279
|
constructor(hostRef) {
|
|
78516
|
-
index.registerInstance(this, hostRef);
|
|
78517
|
-
this.close = index.createEvent(this, "close", 7);
|
|
81280
|
+
index$1.registerInstance(this, hostRef);
|
|
81281
|
+
this.close = index$1.createEvent(this, "close", 7);
|
|
78518
81282
|
this.variant = NOTIFICATION_VARIANTS.INFO;
|
|
78519
81283
|
this.dismissible = false;
|
|
78520
81284
|
this.closeHandle = (e) => this.close.emit(e);
|
|
78521
81285
|
this.renderIcon = (variant, cls = 'icon') => {
|
|
78522
81286
|
switch (variant) {
|
|
78523
81287
|
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" })));
|
|
81288
|
+
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
81289
|
}
|
|
78526
81290
|
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" })));
|
|
81291
|
+
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
81292
|
}
|
|
78529
81293
|
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" })));
|
|
81294
|
+
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
81295
|
}
|
|
78532
81296
|
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" })));
|
|
81297
|
+
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
81298
|
}
|
|
78535
81299
|
default:
|
|
78536
81300
|
return null;
|
|
@@ -78538,10 +81302,10 @@ const XvNotification = class {
|
|
|
78538
81302
|
};
|
|
78539
81303
|
}
|
|
78540
81304
|
render() {
|
|
78541
|
-
return (index.h(index.Host, { key: '
|
|
81305
|
+
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
81306
|
}
|
|
78543
81307
|
static get assetsDirs() { return ["xv-notification/icons"]; }
|
|
78544
|
-
get el() { return index.getElement(this); }
|
|
81308
|
+
get el() { return index$1.getElement(this); }
|
|
78545
81309
|
};
|
|
78546
81310
|
XvNotification.style = xvNotificationCss();
|
|
78547
81311
|
|
|
@@ -78549,8 +81313,8 @@ const xvNumberInputCss = () => `.xv-container{width:100%;max-width:1170px;margin
|
|
|
78549
81313
|
|
|
78550
81314
|
const XvNumberInput = class {
|
|
78551
81315
|
constructor(hostRef) {
|
|
78552
|
-
index.registerInstance(this, hostRef);
|
|
78553
|
-
this.valueChange = index.createEvent(this, "valueChange", 7);
|
|
81316
|
+
index$1.registerInstance(this, hostRef);
|
|
81317
|
+
this.valueChange = index$1.createEvent(this, "valueChange", 7);
|
|
78554
81318
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
78555
81319
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
78556
81320
|
}
|
|
@@ -78588,12 +81352,12 @@ const XvNumberInput = class {
|
|
|
78588
81352
|
this.valueChange.emit(this.value);
|
|
78589
81353
|
}
|
|
78590
81354
|
render() {
|
|
78591
|
-
return (index.h(index.Host, { key: '
|
|
81355
|
+
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
81356
|
'control_input': true,
|
|
78593
81357
|
readonly: !!this.readonly,
|
|
78594
81358
|
error: !!this.error,
|
|
78595
81359
|
warning: !!this.warning
|
|
78596
|
-
} }, index.h("input", { key: '
|
|
81360
|
+
} }, 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
81361
|
}
|
|
78598
81362
|
static get formAssociated() { return true; }
|
|
78599
81363
|
};
|
|
@@ -78603,8 +81367,8 @@ const xvOverflowMenuCss = () => `.xv-container{width:100%;max-width:1170px;margi
|
|
|
78603
81367
|
|
|
78604
81368
|
const XvOverflowMenu = class {
|
|
78605
81369
|
constructor(hostRef) {
|
|
78606
|
-
index.registerInstance(this, hostRef);
|
|
78607
|
-
this.selectItem = index.createEvent(this, "selectItem", 7);
|
|
81370
|
+
index$1.registerInstance(this, hostRef);
|
|
81371
|
+
this.selectItem = index$1.createEvent(this, "selectItem", 7);
|
|
78608
81372
|
this.open = false;
|
|
78609
81373
|
this.disabled = false;
|
|
78610
81374
|
this.position = 'left';
|
|
@@ -78651,8 +81415,8 @@ const XvOverflowMenu = class {
|
|
|
78651
81415
|
}
|
|
78652
81416
|
}
|
|
78653
81417
|
render() {
|
|
78654
|
-
const button = (index.h("button", { key: '
|
|
78655
|
-
return (index.h(index.Host, { key: '
|
|
81418
|
+
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" })))));
|
|
81419
|
+
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
81420
|
}
|
|
78657
81421
|
componentDidLoad() {
|
|
78658
81422
|
this.openChangeHandle();
|
|
@@ -78660,7 +81424,7 @@ const XvOverflowMenu = class {
|
|
|
78660
81424
|
disconnectedCallback() {
|
|
78661
81425
|
this.removeListeners();
|
|
78662
81426
|
}
|
|
78663
|
-
get el() { return index.getElement(this); }
|
|
81427
|
+
get el() { return index$1.getElement(this); }
|
|
78664
81428
|
static get watchers() { return {
|
|
78665
81429
|
"open": [{
|
|
78666
81430
|
"openChangeHandle": 0
|
|
@@ -78673,8 +81437,8 @@ const xvOverflowMenuItemCss = () => `.xv-container{width:100%;max-width:1170px;m
|
|
|
78673
81437
|
|
|
78674
81438
|
const XvOverflowMenuItem = class {
|
|
78675
81439
|
constructor(hostRef) {
|
|
78676
|
-
index.registerInstance(this, hostRef);
|
|
78677
|
-
this.itemClick = index.createEvent(this, "itemClick", 7);
|
|
81440
|
+
index$1.registerInstance(this, hostRef);
|
|
81441
|
+
this.itemClick = index$1.createEvent(this, "itemClick", 7);
|
|
78678
81442
|
this.disabled = false;
|
|
78679
81443
|
this.variant = _vars.OverflowMenuVariant.DEFAULT;
|
|
78680
81444
|
this.clickable = true;
|
|
@@ -78685,7 +81449,7 @@ const XvOverflowMenuItem = class {
|
|
|
78685
81449
|
this.itemClick.emit({ event, value: this.value });
|
|
78686
81450
|
}
|
|
78687
81451
|
render() {
|
|
78688
|
-
return (index.h(index.Host, { key: '
|
|
81452
|
+
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
81453
|
}
|
|
78690
81454
|
};
|
|
78691
81455
|
XvOverflowMenuItem.style = xvOverflowMenuItemCss();
|
|
@@ -78694,8 +81458,8 @@ const xvPaginationCss = () => `.xv-container{width:100%;max-width:1170px;margin-
|
|
|
78694
81458
|
|
|
78695
81459
|
const XvPagination = class {
|
|
78696
81460
|
constructor(hostRef) {
|
|
78697
|
-
index.registerInstance(this, hostRef);
|
|
78698
|
-
this.pageChange = index.createEvent(this, "pageChange", 7);
|
|
81461
|
+
index$1.registerInstance(this, hostRef);
|
|
81462
|
+
this.pageChange = index$1.createEvent(this, "pageChange", 7);
|
|
78699
81463
|
this.itemsPerPageOptions = [10, 20, 30, 40, 50, 100];
|
|
78700
81464
|
this.itemsPerPage = this.itemsPerPageOptions[0];
|
|
78701
81465
|
/*
|
|
@@ -78783,9 +81547,9 @@ const XvPagination = class {
|
|
|
78783
81547
|
this.observer.disconnect();
|
|
78784
81548
|
}
|
|
78785
81549
|
render() {
|
|
78786
|
-
return (index.h(index.Host, { key: '
|
|
81550
|
+
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
81551
|
}
|
|
78788
|
-
get el() { return index.getElement(this); }
|
|
81552
|
+
get el() { return index$1.getElement(this); }
|
|
78789
81553
|
};
|
|
78790
81554
|
XvPagination.style = xvPaginationCss();
|
|
78791
81555
|
|
|
@@ -78800,7 +81564,7 @@ const xvProgressIndicatorCss = () => `.xv-container{width:100%;max-width:1170px;
|
|
|
78800
81564
|
|
|
78801
81565
|
const XvProgressIndicator = class {
|
|
78802
81566
|
constructor(hostRef) {
|
|
78803
|
-
index.registerInstance(this, hostRef);
|
|
81567
|
+
index$1.registerInstance(this, hostRef);
|
|
78804
81568
|
/**
|
|
78805
81569
|
* Current progress
|
|
78806
81570
|
* from 0 to 100
|
|
@@ -78825,7 +81589,7 @@ const XvProgressIndicator = class {
|
|
|
78825
81589
|
const progressPerItem = 100 / itemsCount;
|
|
78826
81590
|
if (!items.length || !itemsCount)
|
|
78827
81591
|
return;
|
|
78828
|
-
index$
|
|
81592
|
+
index$2.forEach(items, (item, index) => {
|
|
78829
81593
|
var _a;
|
|
78830
81594
|
const itemProgressStart = index * progressPerItem;
|
|
78831
81595
|
let status;
|
|
@@ -78852,9 +81616,9 @@ const XvProgressIndicator = class {
|
|
|
78852
81616
|
this.updateChildItems();
|
|
78853
81617
|
}
|
|
78854
81618
|
render() {
|
|
78855
|
-
return (index.h(index.Host, { key: '
|
|
81619
|
+
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
81620
|
}
|
|
78857
|
-
get el() { return index.getElement(this); }
|
|
81621
|
+
get el() { return index$1.getElement(this); }
|
|
78858
81622
|
static get watchers() { return {
|
|
78859
81623
|
"progress": [{
|
|
78860
81624
|
"updateChildItems": 0
|
|
@@ -78867,13 +81631,13 @@ const xvProgressIndicatorItemCss = () => `.xv-container{width:100%;max-width:117
|
|
|
78867
81631
|
|
|
78868
81632
|
const XvProgressIndicatorItem = class {
|
|
78869
81633
|
constructor(hostRef) {
|
|
78870
|
-
index.registerInstance(this, hostRef);
|
|
81634
|
+
index$1.registerInstance(this, hostRef);
|
|
78871
81635
|
this.status = PROGRESS_ITEM_STATUS.NO_STARTED;
|
|
78872
81636
|
}
|
|
78873
81637
|
render() {
|
|
78874
|
-
return (index.h(index.Host, { key: '
|
|
81638
|
+
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
81639
|
}
|
|
78876
|
-
get el() { return index.getElement(this); }
|
|
81640
|
+
get el() { return index$1.getElement(this); }
|
|
78877
81641
|
};
|
|
78878
81642
|
XvProgressIndicatorItem.style = xvProgressIndicatorItemCss();
|
|
78879
81643
|
|
|
@@ -78881,7 +81645,7 @@ const xvRadioCss = () => `.xv-container{width:100%;max-width:1170px;margin-inlin
|
|
|
78881
81645
|
|
|
78882
81646
|
const XvRadio = class {
|
|
78883
81647
|
constructor(hostRef) {
|
|
78884
|
-
index.registerInstance(this, hostRef);
|
|
81648
|
+
index$1.registerInstance(this, hostRef);
|
|
78885
81649
|
var _a, _b;
|
|
78886
81650
|
this.checked = false;
|
|
78887
81651
|
this.indeterminate = false;
|
|
@@ -78903,12 +81667,12 @@ const XvRadio = class {
|
|
|
78903
81667
|
}
|
|
78904
81668
|
}
|
|
78905
81669
|
render() {
|
|
78906
|
-
return (index.h("div", { key: '
|
|
81670
|
+
return (index$1.h("div", { key: 'd39b23f3c28a16df2d1e49adc9fd9f40d7db4f0c', class: {
|
|
78907
81671
|
'xv-radio': true,
|
|
78908
81672
|
'xv-radio--reverse': this.reverse,
|
|
78909
81673
|
'xv-radio--block': this.block,
|
|
78910
81674
|
[`xv-radio--size-${this.size}`]: !!this.size,
|
|
78911
|
-
} }, this.label && index.h("p", { key: '
|
|
81675
|
+
} }, 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
81676
|
}
|
|
78913
81677
|
connectedCallback() {
|
|
78914
81678
|
var _a;
|
|
@@ -78933,7 +81697,7 @@ const XvRadio = class {
|
|
|
78933
81697
|
this.checked = state === this.value;
|
|
78934
81698
|
}
|
|
78935
81699
|
static get formAssociated() { return true; }
|
|
78936
|
-
get el() { return index.getElement(this); }
|
|
81700
|
+
get el() { return index$1.getElement(this); }
|
|
78937
81701
|
static get watchers() { return {
|
|
78938
81702
|
"checked": [{
|
|
78939
81703
|
"onCheckedChange": 0
|
|
@@ -78946,8 +81710,8 @@ const xvSliderCss = () => `.xv-container{width:100%;max-width:1170px;margin-inli
|
|
|
78946
81710
|
|
|
78947
81711
|
const XvSlider = class {
|
|
78948
81712
|
constructor(hostRef) {
|
|
78949
|
-
index.registerInstance(this, hostRef);
|
|
78950
|
-
this.valueChange = index.createEvent(this, "valueChange", 7);
|
|
81713
|
+
index$1.registerInstance(this, hostRef);
|
|
81714
|
+
this.valueChange = index$1.createEvent(this, "valueChange", 7);
|
|
78951
81715
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
78952
81716
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
78953
81717
|
}
|
|
@@ -78992,7 +81756,7 @@ const XvSlider = class {
|
|
|
78992
81756
|
this.setValue(this.min);
|
|
78993
81757
|
}
|
|
78994
81758
|
render() {
|
|
78995
|
-
return (index.h(index.Host, { key: '
|
|
81759
|
+
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
81760
|
}
|
|
78997
81761
|
static get formAssociated() { return true; }
|
|
78998
81762
|
};
|
|
@@ -79002,12 +81766,12 @@ const xvTabCss = () => `.xv-container{width:100%;max-width:1170px;margin-inline:
|
|
|
79002
81766
|
|
|
79003
81767
|
const XvTab = class {
|
|
79004
81768
|
constructor(hostRef) {
|
|
79005
|
-
index.registerInstance(this, hostRef);
|
|
81769
|
+
index$1.registerInstance(this, hostRef);
|
|
79006
81770
|
this.disabled = false;
|
|
79007
81771
|
this.loading = false;
|
|
79008
81772
|
}
|
|
79009
81773
|
render() {
|
|
79010
|
-
return (index.h(index.Host, { key: '
|
|
81774
|
+
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
81775
|
}
|
|
79012
81776
|
};
|
|
79013
81777
|
XvTab.style = xvTabCss();
|
|
@@ -79016,7 +81780,7 @@ const xvTableCss = () => `.xv-container{width:100%;max-width:1170px;margin-inlin
|
|
|
79016
81780
|
|
|
79017
81781
|
const XvTable = class {
|
|
79018
81782
|
constructor(hostRef) {
|
|
79019
|
-
index.registerInstance(this, hostRef);
|
|
81783
|
+
index$1.registerInstance(this, hostRef);
|
|
79020
81784
|
this.size = _vars.SIZE_VAR.MD;
|
|
79021
81785
|
this.selected = new Map();
|
|
79022
81786
|
this.selectedCount = 0;
|
|
@@ -79047,12 +81811,12 @@ const XvTable = class {
|
|
|
79047
81811
|
.join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
|
|
79048
81812
|
}
|
|
79049
81813
|
render() {
|
|
79050
|
-
return (index.h(index.Host, { key: '
|
|
81814
|
+
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
81815
|
}
|
|
79052
81816
|
componentWillLoad() {
|
|
79053
81817
|
this.setColsSizeTemplate();
|
|
79054
81818
|
}
|
|
79055
|
-
get el() { return index.getElement(this); }
|
|
81819
|
+
get el() { return index$1.getElement(this); }
|
|
79056
81820
|
static get watchers() { return {
|
|
79057
81821
|
"colsSize": [{
|
|
79058
81822
|
"setColsSizeTemplate": 0
|
|
@@ -79065,8 +81829,8 @@ const xvTableCellCss = () => `@charset "UTF-8";.xv-container{width:100%;max-widt
|
|
|
79065
81829
|
|
|
79066
81830
|
const XvTableCell = class {
|
|
79067
81831
|
constructor(hostRef) {
|
|
79068
|
-
index.registerInstance(this, hostRef);
|
|
79069
|
-
this.sortChange = index.createEvent(this, "sortChange", 7);
|
|
81832
|
+
index$1.registerInstance(this, hostRef);
|
|
81833
|
+
this.sortChange = index$1.createEvent(this, "sortChange", 7);
|
|
79070
81834
|
}
|
|
79071
81835
|
handleSort() {
|
|
79072
81836
|
if (this.sort === undefined)
|
|
@@ -79077,20 +81841,20 @@ const XvTableCell = class {
|
|
|
79077
81841
|
this.sort = sort === _vars.XV_SORT_DIR.NONE ?
|
|
79078
81842
|
_vars.XV_SORT_DIR.ASC : sort === _vars.XV_SORT_DIR.ASC ?
|
|
79079
81843
|
_vars.XV_SORT_DIR.DESC : _vars.XV_SORT_DIR.NONE;
|
|
79080
|
-
index$
|
|
81844
|
+
index$2.forEach(this.el.parentElement.children, (cell) => {
|
|
79081
81845
|
if (cell !== this.el && cell.hasAttribute('sort')) {
|
|
79082
81846
|
cell.setAttribute('sort', 'none');
|
|
79083
81847
|
}
|
|
79084
81848
|
});
|
|
79085
81849
|
if (!this.name)
|
|
79086
|
-
this.name = index$
|
|
81850
|
+
this.name = index$2.uidGenerator();
|
|
79087
81851
|
this.sortChange.emit({ name: this.name, value: this.sort });
|
|
79088
81852
|
}
|
|
79089
81853
|
;
|
|
79090
81854
|
render() {
|
|
79091
|
-
return (index.h(index.Host, { key: '
|
|
81855
|
+
return (index$1.h(index$1.Host, { key: '831a54a37b0421da3e69c1cd19f41ed645027cc1' }, index$1.h("slot", { key: 'afd20a201d255060cca1f0f4257895cb7761143c' })));
|
|
79092
81856
|
}
|
|
79093
|
-
get el() { return index.getElement(this); }
|
|
81857
|
+
get el() { return index$1.getElement(this); }
|
|
79094
81858
|
};
|
|
79095
81859
|
XvTableCell.style = xvTableCellCss();
|
|
79096
81860
|
|
|
@@ -79101,7 +81865,7 @@ const xvTableExpandCss = () => `.xv-container{width:100%;max-width:1170px;margin
|
|
|
79101
81865
|
|
|
79102
81866
|
const XvTableExpand = class {
|
|
79103
81867
|
constructor(hostRef) {
|
|
79104
|
-
index.registerInstance(this, hostRef);
|
|
81868
|
+
index$1.registerInstance(this, hostRef);
|
|
79105
81869
|
this.open = false;
|
|
79106
81870
|
this.disabled = false;
|
|
79107
81871
|
this.handleExpand = () => {
|
|
@@ -79109,12 +81873,12 @@ const XvTableExpand = class {
|
|
|
79109
81873
|
};
|
|
79110
81874
|
}
|
|
79111
81875
|
render() {
|
|
79112
|
-
return (index.h(index.Host, { key: '
|
|
81876
|
+
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
81877
|
}
|
|
79114
81878
|
componentDidLoad() {
|
|
79115
|
-
index$
|
|
81879
|
+
index$2.setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
|
|
79116
81880
|
}
|
|
79117
|
-
get el() { return index.getElement(this); }
|
|
81881
|
+
get el() { return index$1.getElement(this); }
|
|
79118
81882
|
};
|
|
79119
81883
|
XvTableExpand.style = xvTableExpandCss();
|
|
79120
81884
|
|
|
@@ -79122,14 +81886,14 @@ const xvTableRowCss = () => `.xv-container{width:100%;max-width:1170px;margin-in
|
|
|
79122
81886
|
|
|
79123
81887
|
const XvTableRow = class {
|
|
79124
81888
|
constructor(hostRef) {
|
|
79125
|
-
index.registerInstance(this, hostRef);
|
|
79126
|
-
this.checkedChange = index.createEvent(this, "checkedChange", 7);
|
|
79127
|
-
this.selectRow = index.createEvent(this, "selectRow", 7);
|
|
81889
|
+
index$1.registerInstance(this, hostRef);
|
|
81890
|
+
this.checkedChange = index$1.createEvent(this, "checkedChange", 7);
|
|
81891
|
+
this.selectRow = index$1.createEvent(this, "selectRow", 7);
|
|
79128
81892
|
this.checkHandle = ({ detail: checked }) => {
|
|
79129
81893
|
if (!checked && this.partial)
|
|
79130
81894
|
this.partial = checked;
|
|
79131
81895
|
if (!this.name)
|
|
79132
|
-
this.name = index$
|
|
81896
|
+
this.name = index$2.uidGenerator();
|
|
79133
81897
|
this.selectRow.emit({
|
|
79134
81898
|
name: this.name,
|
|
79135
81899
|
value: this.value,
|
|
@@ -79142,7 +81906,7 @@ const XvTableRow = class {
|
|
|
79142
81906
|
}
|
|
79143
81907
|
checkedChangeHandle() {
|
|
79144
81908
|
if (!this.name)
|
|
79145
|
-
this.name = index$
|
|
81909
|
+
this.name = index$2.uidGenerator();
|
|
79146
81910
|
this.checkedChange.emit({
|
|
79147
81911
|
name: this.name,
|
|
79148
81912
|
value: this.value,
|
|
@@ -79159,17 +81923,17 @@ const XvTableRow = class {
|
|
|
79159
81923
|
this.hover = tableEl.hasAttribute('hover');
|
|
79160
81924
|
}
|
|
79161
81925
|
if (this.variant) {
|
|
79162
|
-
index$
|
|
81926
|
+
index$2.setAttr(this.el.closest(XV_TABLE_TAG), `variant-${this.variant}`, !!this.variant);
|
|
79163
81927
|
}
|
|
79164
81928
|
}
|
|
79165
81929
|
}
|
|
79166
81930
|
render() {
|
|
79167
|
-
return (index.h(index.Host, { key: '
|
|
81931
|
+
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
81932
|
}
|
|
79169
81933
|
componentWillLoad() {
|
|
79170
81934
|
this.setInitialAttrs();
|
|
79171
81935
|
}
|
|
79172
|
-
get el() { return index.getElement(this); }
|
|
81936
|
+
get el() { return index$1.getElement(this); }
|
|
79173
81937
|
static get watchers() { return {
|
|
79174
81938
|
"checked": [{
|
|
79175
81939
|
"checkedChangeHandle": 0
|
|
@@ -79194,8 +81958,8 @@ const xvTabsCss = () => `.xv-container{width:100%;max-width:1170px;margin-inline
|
|
|
79194
81958
|
|
|
79195
81959
|
const XvTabs = class {
|
|
79196
81960
|
constructor(hostRef) {
|
|
79197
|
-
index.registerInstance(this, hostRef);
|
|
79198
|
-
this.activeChange = index.createEvent(this, "activeChange", 7);
|
|
81961
|
+
index$1.registerInstance(this, hostRef);
|
|
81962
|
+
this.activeChange = index$1.createEvent(this, "activeChange", 7);
|
|
79199
81963
|
/**
|
|
79200
81964
|
* Index of active tab
|
|
79201
81965
|
*/
|
|
@@ -79271,17 +82035,17 @@ const XvTabs = class {
|
|
|
79271
82035
|
render() {
|
|
79272
82036
|
var _a, _b, _c, _d;
|
|
79273
82037
|
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 })));
|
|
82038
|
+
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
82039
|
}
|
|
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
|
|
82040
|
+
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
82041
|
'tab-headers_tab': true,
|
|
79278
|
-
active: (tab.getAttribute('name') || `${index
|
|
79279
|
-
}, onClick: () => this.handleTabClick(tab.getAttribute('name') || `${index
|
|
82042
|
+
active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,
|
|
82043
|
+
}, 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
82044
|
}
|
|
79281
82045
|
componentDidRender() {
|
|
79282
82046
|
this.updateTabClasses();
|
|
79283
82047
|
}
|
|
79284
|
-
get el() { return index.getElement(this); }
|
|
82048
|
+
get el() { return index$1.getElement(this); }
|
|
79285
82049
|
};
|
|
79286
82050
|
XvTabs.style = xvTabsCss();
|
|
79287
82051
|
|
|
@@ -79289,9 +82053,9 @@ const xvTagComboboxCss = () => `.xv-container{width:100%;max-width:1170px;margin
|
|
|
79289
82053
|
|
|
79290
82054
|
const XvTagCombobox = class {
|
|
79291
82055
|
constructor(hostRef) {
|
|
79292
|
-
index.registerInstance(this, hostRef);
|
|
79293
|
-
this.valueChange = index.createEvent(this, "valueChange", 7);
|
|
79294
|
-
this.inputChange = index.createEvent(this, "inputChange", 7);
|
|
82056
|
+
index$1.registerInstance(this, hostRef);
|
|
82057
|
+
this.valueChange = index$1.createEvent(this, "valueChange", 7);
|
|
82058
|
+
this.inputChange = index$1.createEvent(this, "inputChange", 7);
|
|
79295
82059
|
// props
|
|
79296
82060
|
this.options = [];
|
|
79297
82061
|
this.label = '';
|
|
@@ -79522,14 +82286,14 @@ const XvTagCombobox = class {
|
|
|
79522
82286
|
const suggestionsVisible = this.open && this.filtered.length > 0;
|
|
79523
82287
|
const ariaOwns = suggestionsVisible ? `${this.uid}-listbox` : undefined;
|
|
79524
82288
|
const activedesc = this.highlighted >= 0 ? this.optionId(this.highlighted) : undefined;
|
|
79525
|
-
return (index.h(index.Host, { key: '
|
|
82289
|
+
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
82290
|
'control': true,
|
|
79527
82291
|
'control--disabled': this.disabled,
|
|
79528
82292
|
'control--error': !!this.error,
|
|
79529
82293
|
'control--readonly': !!this.readonly,
|
|
79530
|
-
}, onClick: () => this.blockClick() }, index.h("div", { key: '
|
|
82294
|
+
}, 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
82295
|
}
|
|
79532
|
-
get host() { return index.getElement(this); }
|
|
82296
|
+
get host() { return index$1.getElement(this); }
|
|
79533
82297
|
static get watchers() { return {
|
|
79534
82298
|
"options": [{
|
|
79535
82299
|
"watchOptions": 0
|
|
@@ -79545,8 +82309,8 @@ const xvTagCss = () => `@charset "UTF-8";.xv-container{width:100%;max-width:1170
|
|
|
79545
82309
|
|
|
79546
82310
|
const XvTag = class {
|
|
79547
82311
|
constructor(hostRef) {
|
|
79548
|
-
index.registerInstance(this, hostRef);
|
|
79549
|
-
this.closeClick = index.createEvent(this, "closeClick", 7);
|
|
82312
|
+
index$1.registerInstance(this, hostRef);
|
|
82313
|
+
this.closeClick = index$1.createEvent(this, "closeClick", 7);
|
|
79550
82314
|
this.size = 'md';
|
|
79551
82315
|
this.color = '';
|
|
79552
82316
|
this.bg = '';
|
|
@@ -79559,7 +82323,7 @@ const XvTag = class {
|
|
|
79559
82323
|
this.closeClick.emit(e);
|
|
79560
82324
|
}
|
|
79561
82325
|
render() {
|
|
79562
|
-
return (index.h(index.Host, { key: '
|
|
82326
|
+
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
82327
|
}
|
|
79564
82328
|
};
|
|
79565
82329
|
XvTag.style = xvTagCss();
|
|
@@ -79568,8 +82332,8 @@ const xvTextInputCss = () => `.xv-container{width:100%;max-width:1170px;margin-i
|
|
|
79568
82332
|
|
|
79569
82333
|
const XvTextInput = class {
|
|
79570
82334
|
constructor(hostRef) {
|
|
79571
|
-
index.registerInstance(this, hostRef);
|
|
79572
|
-
this.valueChange = index.createEvent(this, "valueChange", 7);
|
|
82335
|
+
index$1.registerInstance(this, hostRef);
|
|
82336
|
+
this.valueChange = index$1.createEvent(this, "valueChange", 7);
|
|
79573
82337
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
79574
82338
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
79575
82339
|
}
|
|
@@ -79593,13 +82357,13 @@ const XvTextInput = class {
|
|
|
79593
82357
|
};
|
|
79594
82358
|
}
|
|
79595
82359
|
render() {
|
|
79596
|
-
return (index.h(index.Host, { key: '
|
|
82360
|
+
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
82361
|
'control_input': true,
|
|
79598
82362
|
readonly: !!this.readonly,
|
|
79599
82363
|
[this.size]: true,
|
|
79600
82364
|
error: !!this.error,
|
|
79601
82365
|
warning: !!this.warning,
|
|
79602
|
-
} }, index.h("input", { key: '
|
|
82366
|
+
} }, 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
82367
|
}
|
|
79604
82368
|
static get formAssociated() { return true; }
|
|
79605
82369
|
};
|
|
@@ -79609,8 +82373,8 @@ const xvTextareaCss = () => `.xv-container{width:100%;max-width:1170px;margin-in
|
|
|
79609
82373
|
|
|
79610
82374
|
const XvTextarea = class {
|
|
79611
82375
|
constructor(hostRef) {
|
|
79612
|
-
index.registerInstance(this, hostRef);
|
|
79613
|
-
this.valueChange = index.createEvent(this, "valueChange", 7);
|
|
82376
|
+
index$1.registerInstance(this, hostRef);
|
|
82377
|
+
this.valueChange = index$1.createEvent(this, "valueChange", 7);
|
|
79614
82378
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
79615
82379
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
79616
82380
|
}
|
|
@@ -79636,21 +82400,21 @@ const XvTextarea = class {
|
|
|
79636
82400
|
this.value && this.internals.setFormValue(this.value);
|
|
79637
82401
|
}
|
|
79638
82402
|
render() {
|
|
79639
|
-
return (index.h(index.Host, { key: '
|
|
82403
|
+
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
82404
|
'control_input': true,
|
|
79641
82405
|
readonly: !!this.readonly,
|
|
79642
82406
|
error: !!this.error,
|
|
79643
82407
|
warning: this.warning !== undefined,
|
|
79644
|
-
} }, index.h("textarea", { key: '
|
|
82408
|
+
} }, 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
82409
|
}
|
|
79646
82410
|
_renderIcon() {
|
|
79647
82411
|
if (this.loading)
|
|
79648
|
-
return index.h("xv-loader-v2", { size: _vars.SIZE_VAR.XS });
|
|
82412
|
+
return index$1.h("xv-loader-v2", { size: _vars.SIZE_VAR.XS });
|
|
79649
82413
|
if (!!this.error) {
|
|
79650
|
-
return index.h("span", { class: "status-icon error", "aria-hidden": "true" }, "!");
|
|
82414
|
+
return index$1.h("span", { class: "status-icon error", "aria-hidden": "true" }, "!");
|
|
79651
82415
|
}
|
|
79652
82416
|
else if (!!this.warning) {
|
|
79653
|
-
return index.h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0");
|
|
82417
|
+
return index$1.h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0");
|
|
79654
82418
|
}
|
|
79655
82419
|
return null;
|
|
79656
82420
|
}
|
|
@@ -79662,8 +82426,8 @@ const xvTileCss = () => `@charset "UTF-8";.xv-container{width:100%;max-width:117
|
|
|
79662
82426
|
|
|
79663
82427
|
const XvTile = class {
|
|
79664
82428
|
constructor(hostRef) {
|
|
79665
|
-
index.registerInstance(this, hostRef);
|
|
79666
|
-
this.tileChange = index.createEvent(this, "tileChange", 7);
|
|
82429
|
+
index$1.registerInstance(this, hostRef);
|
|
82430
|
+
this.tileChange = index$1.createEvent(this, "tileChange", 7);
|
|
79667
82431
|
this.variant = 'base';
|
|
79668
82432
|
this.checked = false;
|
|
79669
82433
|
this.readonly = false;
|
|
@@ -79692,7 +82456,7 @@ const XvTile = class {
|
|
|
79692
82456
|
this.checked = !this.checked;
|
|
79693
82457
|
}
|
|
79694
82458
|
render() {
|
|
79695
|
-
return (index.h(index.Host, { key: '
|
|
82459
|
+
return (index$1.h(index$1.Host, { key: 'c6d00c040c1125441fbfbeeec787a49e6d96edd8', class: "xv-tile--host" }, index$1.h("label", { key: 'f2460110e9ff5be0fb97b8d3bf6a60be13d12aef', class: {
|
|
79696
82460
|
[this.el.className]: !!this.el.className,
|
|
79697
82461
|
'xv-tile': true,
|
|
79698
82462
|
[`xv-tile--variant-${this.variant}`]: !!this.variant,
|
|
@@ -79700,9 +82464,9 @@ const XvTile = class {
|
|
|
79700
82464
|
'xv-tile--disabled': !!this.disabled,
|
|
79701
82465
|
'selected': !!this.checked,
|
|
79702
82466
|
'xv-tile--error': !!this.error,
|
|
79703
|
-
} }, index.h("div", { key: '
|
|
82467
|
+
} }, 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
82468
|
}
|
|
79705
|
-
get el() { return index.getElement(this); }
|
|
82469
|
+
get el() { return index$1.getElement(this); }
|
|
79706
82470
|
};
|
|
79707
82471
|
XvTile.style = xvTileCss();
|
|
79708
82472
|
|
|
@@ -79710,8 +82474,8 @@ const xvToggleCss = () => `.xv-container{width:100%;max-width:1170px;margin-inli
|
|
|
79710
82474
|
|
|
79711
82475
|
const XvToggle = class {
|
|
79712
82476
|
constructor(hostRef) {
|
|
79713
|
-
index.registerInstance(this, hostRef);
|
|
79714
|
-
this.toggleChange = index.createEvent(this, "toggleChange", 7);
|
|
82477
|
+
index$1.registerInstance(this, hostRef);
|
|
82478
|
+
this.toggleChange = index$1.createEvent(this, "toggleChange", 7);
|
|
79715
82479
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
79716
82480
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
79717
82481
|
}
|
|
@@ -79732,7 +82496,7 @@ const XvToggle = class {
|
|
|
79732
82496
|
};
|
|
79733
82497
|
}
|
|
79734
82498
|
render() {
|
|
79735
|
-
return (index.h(index.Host, { key: '
|
|
82499
|
+
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
82500
|
}
|
|
79737
82501
|
static get formAssociated() { return true; }
|
|
79738
82502
|
};
|
|
@@ -79742,8 +82506,8 @@ const xvToggleTipCss = () => `.xv-container{width:100%;max-width:1170px;margin-i
|
|
|
79742
82506
|
|
|
79743
82507
|
const XvToggleTip = class {
|
|
79744
82508
|
constructor(hostRef) {
|
|
79745
|
-
index.registerInstance(this, hostRef);
|
|
79746
|
-
this.openChange = index.createEvent(this, "openChange", 3);
|
|
82509
|
+
index$1.registerInstance(this, hostRef);
|
|
82510
|
+
this.openChange = index$1.createEvent(this, "openChange", 3);
|
|
79747
82511
|
this.open = false;
|
|
79748
82512
|
this.autoSize = false;
|
|
79749
82513
|
this.block = false;
|
|
@@ -79809,12 +82573,12 @@ const XvToggleTip = class {
|
|
|
79809
82573
|
}
|
|
79810
82574
|
;
|
|
79811
82575
|
render() {
|
|
79812
|
-
return (index.h(index.Host, { key: '
|
|
82576
|
+
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
82577
|
}
|
|
79814
82578
|
disconnectedCallback() {
|
|
79815
82579
|
this.destroyPopper();
|
|
79816
82580
|
}
|
|
79817
|
-
get el() { return index.getElement(this); }
|
|
82581
|
+
get el() { return index$1.getElement(this); }
|
|
79818
82582
|
static get watchers() { return {
|
|
79819
82583
|
"open": [{
|
|
79820
82584
|
"openChangeHandle": 0
|
|
@@ -79827,7 +82591,7 @@ const xvTooltipCss = () => `.xv-container{width:100%;max-width:1170px;margin-inl
|
|
|
79827
82591
|
|
|
79828
82592
|
const XvTooltip = class {
|
|
79829
82593
|
constructor(hostRef) {
|
|
79830
|
-
index.registerInstance(this, hostRef);
|
|
82594
|
+
index$1.registerInstance(this, hostRef);
|
|
79831
82595
|
this.position = 'auto';
|
|
79832
82596
|
}
|
|
79833
82597
|
onMouseEnter() {
|
|
@@ -79864,13 +82628,13 @@ const XvTooltip = class {
|
|
|
79864
82628
|
this.destroyTooltip();
|
|
79865
82629
|
}
|
|
79866
82630
|
render() {
|
|
79867
|
-
return (index.h(index.Host, { key: '
|
|
82631
|
+
return (index$1.h(index$1.Host, { key: '4ea241a9d4a49c933300886b7d8cf54321462452', role: "tooltip", class: {
|
|
79868
82632
|
'xv-tooltip-wrapper': true,
|
|
79869
82633
|
[`xv-tooltip-wrapper__block`]: !!this.block,
|
|
79870
82634
|
[`xv-tooltip-wrapper__dashed`]: !!this.dashed,
|
|
79871
|
-
} }, index.h("slot", { key: '
|
|
82635
|
+
} }, 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
82636
|
}
|
|
79873
|
-
get el() { return index.getElement(this); }
|
|
82637
|
+
get el() { return index$1.getElement(this); }
|
|
79874
82638
|
};
|
|
79875
82639
|
XvTooltip.style = xvTooltipCss();
|
|
79876
82640
|
|