xv-webcomponents 0.1.29 → 0.1.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-782b9733.js → index-5ee1b884.js} +43 -2
- package/dist/cjs/index-5ee1b884.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/{utils-aa46f72a.js → utils-22c0eda0.js} +1 -16
- package/dist/cjs/utils-22c0eda0.js.map +1 -0
- package/dist/cjs/{xv-accordion-v2_28.cjs.entry.js → xv-accordion-v2_26.cjs.entry.js} +124 -429
- package/dist/cjs/xv-accordion-v2_26.cjs.entry.js.map +1 -0
- package/dist/cjs/xv-breadcrumbs-v2.cjs.entry.js +1 -1
- package/dist/cjs/xv-webcomponents.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +1 -3
- package/dist/collection/components/xv-checkbox/xv-checkbox.css +4 -1
- package/dist/collection/components/xv-checkbox/xv-checkbox.js +1 -1
- package/dist/collection/components/xv-checkbox/xv-checkbox.js.map +1 -1
- package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js +1 -1
- package/dist/collection/components/xv-dropdown/xv-dropdown.css +1 -1
- package/dist/collection/components/xv-dropdown/xv-dropdown.js +1 -2
- package/dist/collection/components/xv-dropdown/xv-dropdown.js.map +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-link/xv-link.js +1 -1
- package/dist/collection/components/xv-modal/xv-modal.css +5 -4
- package/dist/collection/components/xv-modal/xv-modal.js +1 -1
- package/dist/collection/components/xv-modal/xv-modal.js.map +1 -1
- package/dist/collection/components/xv-notification/xv-notification.js +1 -1
- 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 +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 +2 -2
- package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js.map +1 -1
- package/dist/collection/components/xv-table/_vars.js +9 -0
- package/dist/collection/components/xv-table/_vars.js.map +1 -0
- package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.css +86 -0
- package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.js +160 -0
- package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.js.map +1 -0
- package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.css +55 -114
- package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.js +28 -151
- package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.js.map +1 -1
- package/dist/collection/components/xv-table/xv-table-row/xv-table-row.css +22 -36
- package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js +146 -118
- package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js.map +1 -1
- package/dist/collection/components/xv-table/xv-table.css +83 -141
- package/dist/collection/components/xv-table/xv-table.js +56 -208
- package/dist/collection/components/xv-table/xv-table.js.map +1 -1
- package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js +3 -3
- package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js.map +1 -1
- package/dist/collection/components/xv-tabs/xv-tabs.css +5 -3
- package/dist/collection/components/xv-tabs/xv-tabs.js +8 -36
- package/dist/collection/components/xv-tabs/xv-tabs.js.map +1 -1
- package/dist/collection/components/xv-tag/xv-tag.js +1 -1
- package/dist/collection/components/xv-text-input/xv-text-input.js +10 -10
- package/dist/collection/components/xv-text-input/xv-text-input.js.map +1 -1
- package/dist/collection/components/xv-tooltip/xv-tooltip.js +1 -1
- package/dist/esm/{index-83ab73b7.js → index-590eb7d2.js} +43 -3
- package/dist/esm/index-590eb7d2.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/{utils-0d1c18d5.js → utils-a9c71376.js} +2 -16
- package/dist/esm/utils-a9c71376.js.map +1 -0
- package/dist/esm/{xv-accordion-v2_28.entry.js → xv-accordion-v2_26.entry.js} +124 -427
- package/dist/esm/xv-accordion-v2_26.entry.js.map +1 -0
- package/dist/esm/xv-breadcrumbs-v2.entry.js +1 -1
- package/dist/esm/xv-webcomponents.js +3 -3
- package/dist/types/components/xv-table/_vars.d.ts +15 -0
- package/dist/types/components/xv-table/xv-table-cell/xv-table-cell.d.ts +15 -0
- package/dist/types/components/xv-table/xv-table-expand/xv-table-expand.d.ts +4 -20
- package/dist/types/components/xv-table/xv-table-row/xv-table-row.d.ts +15 -46
- package/dist/types/components/xv-table/xv-table.d.ts +9 -32
- package/dist/types/components/xv-tabs/xv-tabs.d.ts +1 -10
- package/dist/types/components.d.ts +57 -273
- package/dist/xv-webcomponents/index.esm.js +1 -1
- package/dist/xv-webcomponents/p-612356e6.js +3 -0
- package/dist/xv-webcomponents/p-612356e6.js.map +1 -0
- package/dist/xv-webcomponents/p-c09a0bfe.entry.js +2 -0
- package/dist/xv-webcomponents/p-e750290d.entry.js +2 -0
- package/dist/xv-webcomponents/p-e750290d.entry.js.map +1 -0
- package/dist/xv-webcomponents/p-f98a1845.js +2 -0
- package/dist/xv-webcomponents/p-f98a1845.js.map +1 -0
- package/dist/xv-webcomponents/xv-webcomponents.esm.js +1 -1
- package/dist/xv-webcomponents/xv-webcomponents.esm.js.map +1 -1
- package/package.json +1 -1
- package/dist/cjs/index-782b9733.js.map +0 -1
- package/dist/cjs/utils-aa46f72a.js.map +0 -1
- package/dist/cjs/xv-accordion-v2_28.cjs.entry.js.map +0 -1
- package/dist/collection/components/xv-table/defs.js +0 -28
- package/dist/collection/components/xv-table/defs.js.map +0 -1
- package/dist/collection/components/xv-table/xv-table-col/xv-table-col.css +0 -13
- package/dist/collection/components/xv-table/xv-table-col/xv-table-col.js +0 -111
- package/dist/collection/components/xv-table/xv-table-col/xv-table-col.js.map +0 -1
- package/dist/collection/components/xv-table/xv-table-header-row/xv-table-header-row.css +0 -80
- package/dist/collection/components/xv-table/xv-table-header-row/xv-table-header-row.js +0 -172
- package/dist/collection/components/xv-table/xv-table-header-row/xv-table-header-row.js.map +0 -1
- package/dist/collection/components/xv-table/xv-table-toolbar/xv-table-toolbar.css +0 -47
- package/dist/collection/components/xv-table/xv-table-toolbar/xv-table-toolbar.js +0 -78
- package/dist/collection/components/xv-table/xv-table-toolbar/xv-table-toolbar.js.map +0 -1
- package/dist/esm/index-83ab73b7.js.map +0 -1
- package/dist/esm/utils-0d1c18d5.js.map +0 -1
- package/dist/esm/xv-accordion-v2_28.entry.js.map +0 -1
- package/dist/types/components/xv-table/defs.d.ts +0 -38
- package/dist/types/components/xv-table/xv-table-col/xv-table-col.d.ts +0 -9
- package/dist/types/components/xv-table/xv-table-header-row/xv-table-header-row.d.ts +0 -28
- package/dist/types/components/xv-table/xv-table-toolbar/xv-table-toolbar.d.ts +0 -6
- package/dist/xv-webcomponents/p-39bf1511.js +0 -2
- package/dist/xv-webcomponents/p-39bf1511.js.map +0 -1
- package/dist/xv-webcomponents/p-5f18d718.entry.js +0 -2
- package/dist/xv-webcomponents/p-840929c5.js +0 -3
- package/dist/xv-webcomponents/p-840929c5.js.map +0 -1
- package/dist/xv-webcomponents/p-cc83f7ea.entry.js +0 -2
- package/dist/xv-webcomponents/p-cc83f7ea.entry.js.map +0 -1
- /package/dist/xv-webcomponents/{p-5f18d718.entry.js.map → p-c09a0bfe.entry.js.map} +0 -0
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
6
|
-
const utils = require('./utils-
|
|
5
|
+
const index = require('./index-5ee1b884.js');
|
|
6
|
+
const utils = require('./utils-22c0eda0.js');
|
|
7
7
|
|
|
8
8
|
const xvAccordionCss = ":host{display:block}";
|
|
9
9
|
const XvAccordionV2Style0 = xvAccordionCss;
|
|
@@ -115,7 +115,7 @@ const XvCard = class {
|
|
|
115
115
|
};
|
|
116
116
|
XvCard.style = XvCardV2Style0;
|
|
117
117
|
|
|
118
|
-
const xvCheckboxCss = ":host{--checkbox-size:max(1rem, 16px);box-sizing:border-box;display:inline-flex;flex-direction:column}:host([error]) .xv-checkbox .checkmark{border-color:var(--text-error, #D62512)}.error,[name=info]{display:inline-flex;align-items:center;justify-content:flex-start;font-size:var(--fz-sm, 12px);font-family:var(--ff-body, Tahoma);line-height:133.333%;letter-spacing:0.32px}.error{margin-top:var(--gap-xs, 5px);color:var(--text-error, #D62512)}.error::before{margin-right:var(--gap-xs, 5px);content:\"!\";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:var(--fz-sm, 12px);font-weight:bold;color:white;background-color:var(--text-error, #D62512);border-radius:50%}.xv-checkbox{display:inline-flex;align-items:center;cursor:pointer;user-select:none}.xv-checkbox input[type=checkbox]{position:absolute;width:var(--checkbox-size);height:var(--checkbox-size);margin:0;padding:0;opacity:0;pointer-events:none;box-sizing:border-box}.xv-checkbox .checkmark{width:var(--checkbox-size);min-width:var(--checkbox-size);height:var(--checkbox-size);min-height:var(--checkbox-size);box-sizing:border-box;margin:0;padding:0;border:1.4px solid var(--icon-primary, #D1D1D1);border-radius:2px;background-color:var(--background, #FFF);transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center}.xv-checkbox input:checked+.checkmark{background-color:var(--background-brand, #97BF0D);border-color:var(--background-brand, #97BF0D)}.xv-checkbox input:checked+.checkmark:not(.checkmark-partial)::after{content:\"\";width:calc(var(--checkbox-size) / 4);height:calc(var(--checkbox-size) / 2.5);border:solid var(--background, #FFF);margin-bottom:calc(var(--checkbox-size) / 10);border-width:0 2px 2px 0;transform:rotate(45deg);display:block}.xv-checkbox input:checked+.checkmark.checkmark-partial::after{content:\"\";width:calc(var(--checkbox-size) / 3);height:calc(var(--checkbox-size) / 10);background-color:var(--background, #FFF)}.xv-checkbox input:focus+.checkmark{outline:1.4px solid var(--focus, #8B8B8B)}.xv-checkbox .label{
|
|
118
|
+
const xvCheckboxCss = ":host{--checkbox-size:max(1rem, 16px);box-sizing:border-box;display:inline-flex;flex-direction:column}:host([error]) .xv-checkbox .checkmark{border-color:var(--text-error, #D62512)}.error,[name=info]{display:inline-flex;align-items:center;justify-content:flex-start;font-size:var(--fz-sm, 12px);font-family:var(--ff-body, Tahoma);line-height:133.333%;letter-spacing:0.32px}.error{margin-top:var(--gap-xs, 5px);color:var(--text-error, #D62512)}.error::before{margin-right:var(--gap-xs, 5px);content:\"!\";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:var(--fz-sm, 12px);font-weight:bold;color:white;background-color:var(--text-error, #D62512);border-radius:50%}.xv-checkbox{display:inline-flex;align-items:center;cursor:pointer;user-select:none}.xv-checkbox input[type=checkbox]{position:absolute;width:var(--checkbox-size);height:var(--checkbox-size);margin:0;padding:0;opacity:0;pointer-events:none;box-sizing:border-box}.xv-checkbox .checkmark{width:var(--checkbox-size);min-width:var(--checkbox-size);height:var(--checkbox-size);min-height:var(--checkbox-size);box-sizing:border-box;margin:0;padding:0;border:1.4px solid var(--icon-primary, #D1D1D1);border-radius:2px;background-color:var(--background, #FFF);transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center}.xv-checkbox input:checked+.checkmark{background-color:var(--background-brand, #97BF0D);border-color:var(--background-brand, #97BF0D)}.xv-checkbox input:checked+.checkmark:not(.checkmark-partial)::after{content:\"\";width:calc(var(--checkbox-size) / 4);height:calc(var(--checkbox-size) / 2.5);border:solid var(--background, #FFF);margin-bottom:calc(var(--checkbox-size) / 10);border-width:0 2px 2px 0;transform:rotate(45deg);display:block}.xv-checkbox input:checked+.checkmark.checkmark-partial::after{content:\"\";width:calc(var(--checkbox-size) / 3);height:calc(var(--checkbox-size) / 10);background-color:var(--background, #FFF)}.xv-checkbox input:focus+.checkmark{outline:1.4px solid var(--focus, #8B8B8B)}.xv-checkbox .label{color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:128.571%;letter-spacing:0.16px}.xv-checkbox .label_str,.xv-checkbox .label ::slotted(*){margin-left:8px}.xv-checkbox.readonly{cursor:initial}.xv-checkbox.readonly input:checked+.checkmark{background-color:var(--background, #FFF);border:1.4px solid var(--icon-disabled, #D1D1D1)}.xv-checkbox.readonly input:checked+.checkmark:after{border-color:var(--icon-primary, #131313)}.xv-checkbox.readonly input:checked+.checkmark-partial:after{background-color:var(--icon-primary, #131313)}.xv-checkbox.readonly .checkmark{border:1.4px solid var(--icon-disabled, #D1D1D1)}.xv-checkbox.readonly .label{color:var(--text-primary, #333)}.xv-checkbox.disabled{cursor:not-allowed}.xv-checkbox.disabled .checkmark{border:1.4px solid var(--icon-disabled, #D1D1D1)}.xv-checkbox.disabled .label{color:var(--text-disabled, rgba(19, 19, 19, 0.25))}";
|
|
119
119
|
const XvCheckboxV2Style0 = xvCheckboxCss;
|
|
120
120
|
|
|
121
121
|
const XvCheckbox = class {
|
|
@@ -190,7 +190,7 @@ const XvCheckbox = class {
|
|
|
190
190
|
}
|
|
191
191
|
}
|
|
192
192
|
render() {
|
|
193
|
-
return (index.h(index.Host, { key: 'bcaedf1b88ff4b64cec1ca477a214dc8987c6ed0' }, index.h("label", { key: '85770d8c9326340f63e024893c5fd28bc79f85a7', class: { 'xv-checkbox': true, disabled: this.disabled, readonly: this.readonly } }, index.h("input", { key: '156869a713eed4506123e267dc8e4b0ed74e73bb', 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: '1b2a979ae6d31e48e03ab41a054236cd5dbaab26', class: `checkmark ${this.partial ? 'checkmark-partial' : ''}` }), index.h("div", { key: '5bb240548e68a3e44fd665a917ccc75d2bd423b1', class: "label" }, index.h("slot", { key: '7ac3876f675592624c2fd252d8dc9941ad823de9' }, this.label))), index.h("slot", { key: '
|
|
193
|
+
return (index.h(index.Host, { key: 'bcaedf1b88ff4b64cec1ca477a214dc8987c6ed0' }, index.h("label", { key: '85770d8c9326340f63e024893c5fd28bc79f85a7', class: { 'xv-checkbox': true, disabled: this.disabled, readonly: this.readonly } }, index.h("input", { key: '156869a713eed4506123e267dc8e4b0ed74e73bb', 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: '1b2a979ae6d31e48e03ab41a054236cd5dbaab26', class: `checkmark ${this.partial ? 'checkmark-partial' : ''}` }), index.h("div", { key: '5bb240548e68a3e44fd665a917ccc75d2bd423b1', class: "label" }, index.h("slot", { key: '7ac3876f675592624c2fd252d8dc9941ad823de9' }, this.label && index.h("span", { key: '263f592cf8f71cfbb6d4a53180b67e71260f36da', class: "label_str" }, this.label)))), index.h("slot", { key: 'aaf1a57125f9561f0902e943991ba8c91b763534', name: "info" }), !!this.error && index.h("span", { key: 'a7e94090ad70cf9929b6112965ff6da3965de627', class: "error" }, this.error)));
|
|
194
194
|
}
|
|
195
195
|
componentDidLoad() {
|
|
196
196
|
if (this.indeterminate) {
|
|
@@ -227,7 +227,7 @@ var SIZE_VAR;
|
|
|
227
227
|
|
|
228
228
|
const DropdownItemSelector = '.xv-dropdown-item';
|
|
229
229
|
|
|
230
|
-
const xvDropdownCss = ":host{--dropdown-padding-x:16px;--dropdown-padding-y:11px;--dropdown-max-width:300px;display:block;position:relative;text-align:left;max-width:min(var(--dropdown-max-width), 100%)}:host .label{color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:12px;font-style:normal;font-weight:700;line-height:16px;letter-spacing:0.32px}:host .label ::slotted([slot=label]){color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:12px;font-style:normal;font-weight:700;line-height:16px;letter-spacing:0.32px}:host .control{background-blend-mode:multiply;border-radius:3px;box-shadow:0 0 0 1px #8B8B8B inset;transition:0.2s ease-in-out background-color;cursor:pointer;margin:
|
|
230
|
+
const xvDropdownCss = ":host{--dropdown-padding-x:16px;--dropdown-padding-y:11px;--dropdown-max-width:300px;display:block;position:relative;text-align:left;max-width:min(var(--dropdown-max-width), 100%)}:host .label{color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:12px;font-style:normal;font-weight:700;line-height:16px;letter-spacing:0.32px}:host .label ::slotted([slot=label]){color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:12px;font-style:normal;font-weight:700;line-height:16px;letter-spacing:0.32px}:host .control{background-blend-mode:multiply;border-radius:3px;box-shadow:0 0 0 1px #8B8B8B inset;transition:0.2s ease-in-out background-color;cursor:pointer;margin:0;box-sizing:border-box;font-family:inherit;font-size:100%;padding:0;border:0;appearance:none;background-color:var(--field-02, #FFF);text-align:start;inline-size:100%;position:relative;display:inline-flex;overflow:hidden;align-items:center;block-size:calc(100% + 1px);outline:none;padding-block:var(--dropdown-padding-y);padding-inline:var(--dropdown-padding-x);text-overflow:ellipsis;vertical-align:top;white-space:nowrap}:host .control_value,:host .control_placeholder{flex:1;margin:0;overflow:hidden;color:var(--text-primary, #333);user-select:none;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fz-body, Tahoma);font-size:14px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:0.16px;padding-inline:0 1rem}:host .control_placeholder{color:var(--text-placeholder, #ACACAC)}:host .control_icon{width:18px;height:18px}:host .control_icon.error{color:var(--support-error, #F1290E)}:host .control_icon.warning{color:var(--support-warning, #FF7F04)}:host .control_arrow{box-sizing:border-box;margin:0;font-size:100%;vertical-align:baseline;padding:0;border:0;appearance:none;background:none;text-align:start;display:flex;align-items:center;justify-content:center;block-size:1.5rem;inline-size:1.5rem;inset-inline-end:0.75rem;outline:none;transition:transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9)}:host .control:hover{background-color:var(--field-hover-02, #E9E9E9)}:host .control:active{background-color:var(--layer-selected-02, #E3E3E3)}:host .options{inset-block-start:100%;margin-block-start:1px;display:block;max-block-size:13.75rem;box-shadow:0 2px 6px rgba(0, 0, 0, 0.3);position:absolute;z-index:10;inline-size:100%;inset-inline:0;overflow-y:auto;transition:max-height 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);border-radius:3px;background-color:var(--field-02, #FFF);scrollbar-width:thin;scrollbar-color:var(--layer-accent-03) transparent}:host .options ::slotted(.xv-dropdown-item){display:block;max-block-size:13.75rem;inset-inline:0;box-sizing:border-box;padding:var(--dropdown-padding-y) calc(var(--dropdown-padding-x) + 16px) var(--dropdown-padding-y) var(--dropdown-padding-x);position:relative;cursor:pointer;overflow:hidden;color:var(--text-secondary, #515151);text-overflow:ellipsis;white-space:nowrap;font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:18px;letter-spacing:0.16px;transition:0.2s ease-in-out background-color;user-select:none}:host .options ::slotted(.xv-dropdown-item):after{content:\"\";position:absolute;bottom:0;height:1px;left:10px;width:calc(100% - 20px);background-color:var(--border-subtle-01)}:host .options ::slotted(.xv-dropdown-item:hover){background-color:var(--layer-hover-02, #F7F7F7)}:host .options ::slotted(.xv-dropdown-item:active){background-color:var(--layer-selected-hover-02, #DADADA)}:host .options ::slotted(.xv-dropdown-item[selected]){background-color:var(--layer-selected-02, #E3E3E3)}:host .options ::slotted(.xv-dropdown-item[selected]:hover){background-color:var(--layer-selected-hover-02, #DADADA)}:host .options ::slotted(.xv-dropdown-item[disabled]){background-color:transparent;opacity:0.4;cursor:not-allowed}:host .helper{color:var(--text-helper, #646464);font-family:var(--ff-heading, \"IBM Plex Sans\");font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px;margin:0;padding:0}:host([open]) .control_arrow{transform:rotate(180deg)}:host([disabled]){opacity:0.4;cursor:not-allowed}:host([disabled]) .control{cursor:inherit}:host([disabled]) .control:hover,:host([disabled]) .control:active,:host([disabled]) .control:focus-within{background-color:transparent}:host([error]) .control{box-shadow:none;outline:2px solid var(--support-support-error, #F1290E)}:host([error]) .helper{color:var(--text-error, #D62512)}:host([size=xs]){--dropdown-padding-y:4px}:host([size=sm]){--dropdown-padding-y:7px}:host([size=md]){--dropdown-padding-y:11px}:host([size=lg]){--dropdown-padding-y:15px}:host([size=xl]){--dropdown-padding-y:16px}";
|
|
231
231
|
const XvDropdownV2Style0 = xvDropdownCss;
|
|
232
232
|
|
|
233
233
|
const XvDropdown = class {
|
|
@@ -275,7 +275,6 @@ const XvDropdown = class {
|
|
|
275
275
|
selected: `${this.defaultValue}` === option.getAttribute('value'),
|
|
276
276
|
};
|
|
277
277
|
if (dropdownItemData.selected) {
|
|
278
|
-
console.log('dropdownItemData', dropdownItemData);
|
|
279
278
|
utils.setAttr(option, 'selected', dropdownItemData.selected);
|
|
280
279
|
this.selectedMap.set(dropdownItemData.value, dropdownItemData);
|
|
281
280
|
}
|
|
@@ -325,7 +324,7 @@ const XvDropdown = class {
|
|
|
325
324
|
this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));
|
|
326
325
|
}
|
|
327
326
|
render() {
|
|
328
|
-
return (index.h(index.Host, { key: '
|
|
327
|
+
return (index.h(index.Host, { key: '6f956a9fc7685d1f9bf4bdd0cf209955827a6cdf', size: this.size, class: "xv-dropdown", role: "combobox", tabindex: this.disabled ? -1 : false }, index.h("label", { key: '1b0ba7ffee64cfc5bc1aa551520f63f3b12d2e3f', class: "label" }, index.h("slot", { key: 'cd5f0834db24ffa22254b3d41f7ebe83958b4379', name: "label" }, this.label)), index.h("div", { key: '861d9f40dcc9aa80df3e69be819d787bfacb1af7', class: "xv-dropdown-control control", onClick: this.handleOpen }, this.selected.length ? (index.h("p", { class: "control_value" }, this.selected.join(', '))) : (index.h("p", { class: "control_placeholder" }, this.placeholder || '')), this.error && (index.h("svg", { key: '70bb351d4b7c8dbd9dbcac502a6d34dd5140bcad', class: "control_icon error", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index.h("path", { key: '5762de3f8edb0409873e9326647da50170fc5d2b', 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" }))), (!this.error && !!this.warning) && (index.h("svg", { key: '9b2e79816102116236f88f8af5d31fd32e2763ce', class: "control_icon warning", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index.h("path", { key: 'aa5c82bd35ee1fed90e9175f3a43bf86afdf056d', 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" }))), index.h("svg", { key: '9910f9e62f1e92a6236cd34ce5183f330a92c92f', 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.h("path", { key: '64e10f0154a51bf83b08362640887bcdaee2bea8', d: "M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" }))), this.open && index.h("div", { key: '1be73390412c2ba192deddbd55bc2cf3e5e8bbf6', class: "options" }, index.h("slot", { key: "xv-dropdown-options" })), (this.helper || this.error || this.warning) && (index.h("p", { key: '4f914e125d5366ee705c82df9991051eec7c0124', class: "helper" }, this.error || this.warning || this.helper))));
|
|
329
328
|
}
|
|
330
329
|
componentWillLoad() {
|
|
331
330
|
this.setDefaultValues();
|
|
@@ -364,7 +363,7 @@ const XvDropdownItem = class {
|
|
|
364
363
|
});
|
|
365
364
|
}
|
|
366
365
|
render() {
|
|
367
|
-
return (index.h(index.Host, { key: '
|
|
366
|
+
return (index.h(index.Host, { key: '1788b565ef78a5bcc7a0fc1eb1b43fc4f6bbea75', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, index.h("slot", { key: 'f449f4f022abf298aa3766641864e5ccdf2fec96' }), this.selected && index.h("span", { key: 'c5ad6f42c36a63168c396130462e51e94e2a59df', class: "checkmark" })));
|
|
368
367
|
}
|
|
369
368
|
componentWillLoad() {
|
|
370
369
|
if (!this.value)
|
|
@@ -393,7 +392,7 @@ const Xvfooter = class {
|
|
|
393
392
|
}
|
|
394
393
|
}
|
|
395
394
|
render() {
|
|
396
|
-
return (index.h("footer", { key: '
|
|
395
|
+
return (index.h("footer", { key: '388feeecaff3930827b9917e7cb7a29c3f1abf6c' }, index.h("div", { key: 'd1c793a6d35ceca9ba7ef1285e4bbe41761035c4', innerHTML: this.htmlContent })));
|
|
397
396
|
}
|
|
398
397
|
get el() { return index.getElement(this); }
|
|
399
398
|
};
|
|
@@ -427,7 +426,7 @@ const XvHeader = class {
|
|
|
427
426
|
}
|
|
428
427
|
}
|
|
429
428
|
render() {
|
|
430
|
-
return (index.h("div", { key: '
|
|
429
|
+
return (index.h("div", { key: '4d63b5a2a761c9572837b3a7b74e6f7acb821e87', id: "nav-container", class: "xv-header" }, index.h("nav", { key: '75d4cbfc57c1ba5959eee023d5da87d8fa2e1593', class: "navbar navbar-default navbar-fixed-top backend-force-relative" }, index.h("div", { key: 'ae0a155619a1f0f67c105bd0123643a918cfdcc8', class: "container" }, index.h("div", { key: '71fcc35dd557a834882fff2d389728574288ce6f', class: "row" }, index.h("div", { key: '92b8baa2f987983e2821d97cc211592fc57b1be0', class: "col-sm-3 col-xs-3 col-xxs-4 no-padding-right" }, index.h("div", { key: 'f5937c804669745b157929e6764f7b60d9c82001', class: "navbar-header" }, index.h("button", { key: '45f2f7f73e0410e61a5a2251fbf16339eaedec60', class: "btn btn-default navbar-toggle pull-left navbar-btn", "data-toggle": "collapse", "data-target": "#main-menu" }, index.h("i", { key: '13c9668bb1ee99479563d0a9e7ac377f7b8b2388', class: "fa fa-bars fa-lg", "aria-hidden": "true" })), index.h("div", { key: '62af63881a860c16340d8ba69c5c0a621579969f', class: "visible-xs-inline" }, index.h("a", { key: 'c10b4b30eabcb53f157a4643352929bc2689bd3e', href: "https://www.crossvertise.com/", class: "navbar-brand" }, index.h("img", { key: 'ccaf23d0a4ff0bf5e5b6dead006d30c56508ed80', src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg", alt: "Crossvertise" }))), index.h("div", { key: '896419cb1570f0f096e8cb6ebb6cfe265e23bedf', class: "hidden-xs" }, index.h("a", { key: '5a990ed4585e9a5ae15363b6cc143f40bd912c79', href: "https://www.crossvertise.com/", class: "navbar-brand" }, index.h("img", { key: '55ca09baacafac12f9ac5b8ebdf0a76eb6665324', loading: "lazy", src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg", alt: "Crossvertise" }))))), index.h("div", { key: 'febc736394aee82099258ed2fbcb8e438391d879', class: "col-sm-9 col-xs-9 col-xxs-8 no-padding-left" }, index.h("ul", { key: 'a44a208987969c1ba9622b85368948ef42ad4fbb', class: "nav nav-pills nav-meta pull-right" }, index.h("li", { key: 'a1aae4e1229b0900ecd0cd9377fedf1c8285b0d0' }, index.h("a", { key: '8010c9ae98cac607121f49293cbd8b30e86b5921', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, index.h("i", { key: '67dc50ff933034309d81211a0990e0c50f268ff5', class: "fa fa-user" }), index.h("i", { key: '0b17ff7fa8c5dc1dfc9d43ec13cc4811ad382503', class: "fa fa-exchange-alt" }))), index.h("li", { key: 'ac62ab6e696ebf4eb3b74afe752cfb6c2fc0f03b' }, index.h("a", { key: '50216c2209606afbd5dcf02398cd4ac8464e679b', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, "Kontakt"), index.h("a", { key: '126d9c452ebd4be95122092abf5415b4b3584c58', href: "https://www.crossvertise.com/contact", class: "btn btn-link navbar-btn hidden-xs", style: { display: 'none' } }, "Kontakt"), index.h("a", { key: '6fc5fee12d475ad585b2fbfdbde8d938d0f899c7', class: "btn btn-default btn-link navbar-btn visible-xs hidden-xxs", href: "#" }, index.h("i", { key: 'e8c7493c865fa95703e1997ddbce6cde4beccea4', class: "fa fa-phone" }))), index.h("li", { key: 'dad7499b9ccbfc3d2322213c138f4bdb13d4def7', class: "dropdown", id: "my-xv-menu" }, index.h("a", { key: 'b301eb9dc192e83b4aaad423a59ed318fd4a433a', href: "#", class: "dropdown-toggle btn btn-default navbar-btn btn-link", "data-toggle": "dropdown" }, index.h("i", { key: '220c92657241b5a4463eead088d798fd05ad770e', class: "fa fa-user fa-lg text-success", "aria-hidden": "true" }), "\u00A0", index.h("span", { key: '25fd14fe1e85a1581a3e9c9db515ba24f253bbcc', class: "hidden-xs" }, "Mein Bereich"), index.h("span", { key: 'e68e239541d1444960e5350fe92e97b83088e452', class: "caret" })), index.h("ul", { key: '63e6083836736c898ca7fe6b6200b7eff6c47ceb', class: "dropdown-menu-left dropdown-menu navbar-myxv" }, index.h("li", { key: 'f6667e3e6bea0b333713c6151491938ed53c11cf' }, index.h("a", { key: '673e250041d0ae7f2732ebba2123b3da5c43f609', href: "#" }, index.h("i", { key: 'c158578cf7f3d0d6778ac36870932d267bccdfdc', class: "fa fa-tachometer-alt fa-fw" }), "\u00A0Cockpitfunktionen\u00A0", index.h("i", { key: '9f9e397d478159e71641ba40fa2f3864cabad7d0', class: "fa fa-caret-down" }))), index.h("li", { key: '11ed0af1b90c116cab55b0e7746496cbf7adb25b' }, index.h("a", { key: '73a956381f2f300af1bf9a8fd01ec828acf0c63b', href: "#" }, index.h("i", { key: '8a7426207d672ea442ccbe28154d468c67f6197f', class: "fa fa-cubes" }), "\u00A0Entit\u00E4ten\u00A0", index.h("i", { key: '3b5cd486831b281c8b8a4a36d5471a7e83cbf34e', class: "fa fa-caret-down" }))), index.h("li", { key: '79f8ddcbbffcbee4947d3df7c19fe6aa699c9563', role: "separator", class: "divider" }), index.h("li", { key: 'cbb65c4782fba2f3621dd7fa302ea40e8ecabe1c' }, index.h("a", { key: 'd4200246a2fe6e7bfa7e05d8779e99111f1b9880', href: "#" }, index.h("i", { key: '67a4401e9f0b8a7b9cde06ab01639fc947c96468', class: "fa fa-user" }), "\u00A0Mein Crossvertise\u00A0", index.h("span", { key: 'e335d4f6039246234d6d3509ff4324de299cb030', class: "badge" }, "0"), index.h("i", { key: 'da05388b188f52a94ea9637744dd04fadced8b20', class: "fa fa-caret-down" }))), index.h("li", { key: '49ad09eb586654a9eafcabce1485941d36f6e5dc' }, index.h("a", { key: '10c547f4a1c65393f231a0cf955a1d9c83eccb14', href: "https://www.crossvertise.com/de-de/mycrossvertise/account/logoff?returnUrl=https%3A%2F%2Fwww.crossvertise.com" }, index.h("i", { key: '3f77d7d4f6137654aa0c2bb8dda8929a859540f3', class: "fa fa-sign-out-alt fa-fw", "aria-hidden": "true" }), "\u00A0Logout")))), index.h("li", { key: '3f5ad5d2175e19002c341861f96e9fe44a53c8eb', class: "visible-sm-block visible-xs-block hidden-xxs" }, index.h("a", { key: 'cafbcfb763a6cb5550c061e2543c97993c94a5aa', class: "btn btn-default navbar-btn btn-link", "data-toggle": "collapse", "data-target": "#search-collapse" }, index.h("i", { key: '0882b7cee2b9c6ee5be389122c1a06354f39e555', class: "fa fa-search", "aria-hidden": "true" }))), index.h("li", { key: '06b5c2aa09d92336a22a5edbbfaf30f7634f5196', class: "hidden-md hidden-lg" }, index.h("a", { key: 'e936c613fd86cc1b16392625c7881b931ad716df', class: "btn btn-default navbar-btn btn-link", href: "https://market.crossvertise.com/de-de/mycrossvertise/account/logon?returnUrl=https%3A%2F%2Fwww.crossvertise.com%2F" }, index.h("i", { key: '9ed2c56a75d7d48cc9abfd8502e5a9305741d16a', class: "fa fa-user fa-lg", "aria-hidden": "true" }), index.h("span", { key: '5a662afe04aeee03a526f03c42a8414de7741349', class: "hidden-xs" }, "Login"))), index.h("li", { key: 'f4da3a511859cfbb88b6bd1ae189cb475825d84c', class: "hidden-xs hidden-sm" }, index.h("a", { key: '365b8b92a8dd5ae78309849b370c94b8efa5e35d', role: "button", class: "btn btn-default navbar-btn btn-link", "data-toggle": "modal", "data-target": "#login-modal" }, index.h("i", { key: '97e6c4304cff28c40f35289fa9e15771bc6c59a4', class: "fa fa-user fa-lg", "aria-hidden": "true" }), index.h("span", { key: '136f6a36a29204f744e13e1c500b97c4af9a34b9' }, "Login"))), index.h("li", { key: 'cc4dccd4e0af199910dadc06fdbe6a0184177757', class: "hidden-xs" }, index.h("a", { key: '38a2ac77bc8d4dbeb6488ae6cf60bd0432231354', class: "btn btn-default navbar-btn btn-link", href: "https://market.crossvertise.com/de-de/mycrossvertise/account/register" }, index.h("span", { key: '56573d5cc1550ee1e829f65481614063854f3259' }, "Registrieren"))), index.h("li", { key: 'a4e91f3bb7ac567bb9b306187eb6fabce72e0fb9', class: "navbar-divider hidden-xs" }), index.h("li", { key: 'f74bb3d0f4ab2d272fa5a0d76b693ca3e6549c69' }, index.h("a", { key: '8e74a25bd8e9c411b243decfbb0f502dd163200c', class: "btn btn-success navbar-btn", href: "https://market.crossvertise.com/de-de/mycrossvertise/shoppingcart/activecart" }, index.h("span", { key: 'bf4212c069cc707a776641fb7107076f389b4059', class: "xv-font-icon-warenkorb fa-lg fa-fw", "aria-hidden": "true" }), index.h("span", { key: 'c7b98e2d51e372b201e2ad6573d4711680bd39ca', class: "hidden-xs hidden-sm" }, "\u00A0Warenkorb\u00A0"), index.h("span", { key: 'f8afa9445884dde4a3340b23d9072dd412ebf0fc', class: "badge badge-success" }, "0"))))))), index.h("div", { key: 'c5763a108218073004cacc860ce5475950ff537b', class: "collapse hidden-md hidden-lg", id: "search-collapse" }, index.h("div", { key: '4e1f4d4c32accf64286ee5481eb1725971654c2d', class: "container" }, index.h("form", { key: '7f800689b66c89f30d2f1213892eb854c7999cc5', action: "https://market.crossvertise.com/de-de/media/search", class: "navbar-form", method: "get", role: "search" }, index.h("div", { key: '75f6787fec9f6386eb3ed31b5a766fdc11126114', class: "input-group" }, index.h("input", { key: '45fb8d3c671099f62577494b28942f6757bcbc40', class: "form-control", name: "Q", placeholder: "Suche", type: "text", autocomplete: "off" }), index.h("span", { key: '62b2804ccf299a3e6235eb8e9c7856bdba616eec', class: "input-group-btn force-full-width" }, index.h("button", { key: 'c30f2347d41b5540a000819b189b941823672e8d', class: "btn btn-default search-addon", type: "submit" }, index.h("i", { key: 'fe74c738cb7bcc233e94c6a79ad17ef5d40e77bc', class: "fa fa-search", "aria-hidden": "true" })))))))), index.h("div", { key: 'baa87485eae18301b753121c117f64e9e545b146', innerHTML: this.htmlContent })));
|
|
431
430
|
}
|
|
432
431
|
get el() { return index.getElement(this); }
|
|
433
432
|
};
|
|
@@ -450,7 +449,7 @@ const XvLink = class {
|
|
|
450
449
|
e.stopPropagation();
|
|
451
450
|
}
|
|
452
451
|
render() {
|
|
453
|
-
return (index.h(index.Host, { key: '
|
|
452
|
+
return (index.h(index.Host, { key: 'd4b3e206cdaca75bdd585014363a5b4aedc2db5d', class: `xv-link_${this.variant}` }, index.h("a", { key: 'ad7d185ec3985d2a313b1b4ad82d90453f102548', href: this.href, onClick: this.preventLinkHandler.bind(this), class: `xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`, target: this.target }, index.h("slot", { key: '67c31b93b0679a3696b413fa680410b33dc1cdc9', name: "icon-left" }), index.h("slot", { key: '874587336e2e8031a6e7f4dd5cf77854c3c08493' }), index.h("slot", { key: 'f9c92f41bde2d2f5147cc6ca06b09d80a573a50c', name: "icon-right" }))));
|
|
454
453
|
}
|
|
455
454
|
};
|
|
456
455
|
XvLink.style = XvLinkV2Style0;
|
|
@@ -482,7 +481,7 @@ const XvLoader = class {
|
|
|
482
481
|
};
|
|
483
482
|
XvLoader.style = XvLoaderV2Style0;
|
|
484
483
|
|
|
485
|
-
const xvModalCss = ":host{display:inline-
|
|
484
|
+
const xvModalCss = ":host{display:inline-flex}:host .backdrop{position:fixed;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;pointer-events:none;transition:opacity 0.3s ease;z-index:1000;display:flex;align-items:center;justify-content:center}:host .modal{display:flex;flex-direction:column;max-height:60vh;max-width:960px;position:relative;animation:fadeIn 0.25s ease;padding-block:var(--gap-md, 16px);background:var(--layer-02, #FFF);box-shadow:0 6px 10px 4px rgba(39, 52, 53, 0.15), 0 2px 3px 0 rgba(39, 52, 53, 0.3)}:host .modal_header{position:relative;padding-inline:var(--gap-md, 16px)}:host .modal_header__title{color:var(--text-text-primary, #333);font-family:var(--ff-heading, \"Gill Sans\");font-size:var(--fz-xl, 21px);line-height:133.333%;margin:0 20px 0 0}:host .modal_content{padding:var(--gap-md, 16px);overflow:auto}:host .modal_footer{position:relative;padding-inline:var(--gap-md, 16px)}:host .modal_close{z-index:1;cursor:pointer;border:none;outline:none;font-size:28px;background-color:transparent;position:absolute;right:10px;top:10px;transition:350ms ease-in-out opacity}:host .modal_close:hover{opacity:0.6}:host .modal_close:active{opacity:0.3}:host([open]) .backdrop{opacity:1;pointer-events:all}:host([size=xs]) .modal{max-width:min(300px, 90vw)}:host([size=sm]) .modal{max-width:min(480px, 90vw)}:host([size=md]) .modal{max-width:min(600px, 90vw)}:host([size=lg]) .modal{max-width:min(960px, 90vw)}:host([size=xl]) .modal{max-width:min(1200px, 80vw)}@keyframes fadeIn{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}";
|
|
486
485
|
const XvModalV2Style0 = xvModalCss;
|
|
487
486
|
|
|
488
487
|
const XvModal = class {
|
|
@@ -541,7 +540,7 @@ const XvModal = class {
|
|
|
541
540
|
}
|
|
542
541
|
render() {
|
|
543
542
|
var _a;
|
|
544
|
-
return (index.h(index.Host, { key: '
|
|
543
|
+
return (index.h(index.Host, { key: '42e2bddb4c2af56814a311749b7637de2857e860', role: "dialog", size: this.size, id: this.el.id }, index.h("slot", { key: '83627e8bc9007f469a072b05a5f56cf1cf90dac7', name: "trigger", onSlotchange: this.setupTrigger }), index.h("div", { key: 'c04488c89bef869fa069cd82fde93da1aae30675', class: { backdrop: true }, onClick: this.onBackdropClick }, index.h("div", { key: '335da4c24ba63b3f2f948d4a54adfdc61fca3d3d', class: "modal" }, index.h("button", { key: '1180a615116846931e3204d0f640a91f27034fc6', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), index.h("div", { key: '6448c7fd6b8af2912f13844047fb26fab622ad19', class: "modal_header" }, index.h("slot", { key: '33196b3f0b520050aba79c17b49a9c90b1c8d5e0', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && index.h("h5", { key: '60769656e4dc3ccbbf091d72d071c9b341f9b3ab', class: "modal_header__title" }, this.el.title))), index.h("div", { key: '408b186993981659df3984f4954cf15a26359307', class: "modal_content" }, index.h("slot", { key: '9f4251a450f1ff7973003724bb068f079752d13d' })), index.h("div", { key: '1e364e6de6fc6b38e7329493b9725d01b8858487', class: "modal_footer" }, index.h("slot", { key: 'a18acef4f02937f42e2bc8a0ead89561c4907cb3', name: "footer" }))))));
|
|
545
544
|
}
|
|
546
545
|
disconnectedCallback() {
|
|
547
546
|
this.removeTriggerListener();
|
|
@@ -588,7 +587,7 @@ const XvNotification = class {
|
|
|
588
587
|
};
|
|
589
588
|
}
|
|
590
589
|
render() {
|
|
591
|
-
return (index.h(index.Host, { key: '
|
|
590
|
+
return (index.h(index.Host, { key: 'd7d5cf361f87d6775e6919772014d4372f5f42c5', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), index.h("div", { key: 'f8b31c8585336a933fc2af24a373fc77a3f3eeba', class: "content" }, index.h("div", { key: '5b04c4ef61781fcf1d03b5129508cad02f8ccc1d', class: "content_wrapper" }, this.el.title && index.h("h5", { key: '6a69653ed2610c956c72bf81c1ad8c539cd45595', class: "content_title" }, this.el.title), index.h("slot", { key: '02c8a5ee16553a952e771aa52f6d7c9d76c275e0' })), index.h("slot", { key: 'a31913d9e81f3291b722b1df4ad62ef3518f3003', name: "footer" })), this.dismissible && index.h("button", { key: '0cbd353dc22938fcbdbe6d03f8304493768545a5', class: "close", onClick: this.closeHandle })));
|
|
592
591
|
}
|
|
593
592
|
static get assetsDirs() { return ["xv-notification/icons"]; }
|
|
594
593
|
get el() { return index.getElement(this); }
|
|
@@ -648,7 +647,7 @@ const XvOverflowMenu = class {
|
|
|
648
647
|
}
|
|
649
648
|
}
|
|
650
649
|
render() {
|
|
651
|
-
return (index.h(index.Host, { key: '
|
|
650
|
+
return (index.h(index.Host, { key: '7d1ce5178923330d0b2baa98978481234550147b', class: "xv-overflow-menu", size: this.size, role: "menu", tabindex: -1 }, index.h("button", { key: 'c5761d536a97ff749bb199e2af16bf2af24da40a', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, index.h("svg", { key: 'adb9c65c2d63ced81e308c37ffcbd5975da6162a', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, index.h("path", { key: 'ff8a77b3cdac1889f3dc7c4a9b0f0ddf5809196e', 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" }))), index.h("div", { key: '315c4fcf3137fce656bfca55f7b807649728c7f9', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, index.h("slot", { key: 'dccf2b51c68e895e85c46b6f3b1b688ec26da7b3' }))));
|
|
652
651
|
}
|
|
653
652
|
componentDidLoad() {
|
|
654
653
|
this.openChangeHandle();
|
|
@@ -685,7 +684,7 @@ const XvOverflowMenuItem = class {
|
|
|
685
684
|
this.itemClick.emit({ event, value: this.value });
|
|
686
685
|
}
|
|
687
686
|
render() {
|
|
688
|
-
return (index.h(index.Host, { key: '
|
|
687
|
+
return (index.h(index.Host, { key: '85b9cd385b30e646dc170e130e31e5773917b057', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, index.h("slot", { key: 'fe0128d66d9b500c685d0eafa231f1a4f099b8db' })));
|
|
689
688
|
}
|
|
690
689
|
};
|
|
691
690
|
XvOverflowMenuItem.style = XvOverflowMenuV2ItemStyle0;
|
|
@@ -760,7 +759,7 @@ const XvProgressIndicator = class {
|
|
|
760
759
|
this.updateChildItems();
|
|
761
760
|
}
|
|
762
761
|
render() {
|
|
763
|
-
return (index.h(index.Host, { key: '
|
|
762
|
+
return (index.h(index.Host, { key: '8f050bb2255b64fbaae593053ac4cc9c912f538a', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, index.h("slot", { key: 'c311395c02fa84b73746bd5d2a7074f315f220d3' })));
|
|
764
763
|
}
|
|
765
764
|
get el() { return index.getElement(this); }
|
|
766
765
|
static get watchers() { return {
|
|
@@ -778,7 +777,7 @@ const XvProgressIndicatorItem = class {
|
|
|
778
777
|
this.status = PROGRESS_ITEM_STATUS.NO_STARTED;
|
|
779
778
|
}
|
|
780
779
|
render() {
|
|
781
|
-
return (index.h(index.Host, { key: '
|
|
780
|
+
return (index.h(index.Host, { key: '2298819d5ff22c59545a1eb19539f9f61e9224dd', status: this.status, class: { 'xv-progress-indicator-item': true } }, index.h("span", { key: '4d9c5325746cf1b88fe64bfcc81b9a79aaef30de', class: "line" }), index.h("span", { key: 'e9ef0a957c1fe89d3ea6a204f65ae274867b773a', class: "icon" }, index.h("svg", { key: 'e7a77f7ecbc69aa8a304a8cfc5d09dd9ebb8a10b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, index.h("path", { key: '438cab4fd260cf07bf3392faac03107fab7b0adb', 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.h("p", { key: '5cc4069d5d3862237d7deb1c4c06063e2175f8e1', class: "label" }, index.h("slot", { key: '393bd83d59a4f17c603c8fcdcb9fc649500850c5' }))));
|
|
782
781
|
}
|
|
783
782
|
get el() { return index.getElement(this); }
|
|
784
783
|
};
|
|
@@ -793,407 +792,161 @@ const XvTab = class {
|
|
|
793
792
|
this.disabled = false;
|
|
794
793
|
}
|
|
795
794
|
render() {
|
|
796
|
-
return index.h(index.Host, { key: '
|
|
795
|
+
return index.h(index.Host, { key: '3dcd55f79d9c95dc54efd7d2547470b61f8bd091', disabled: this.disabled }, index.h("slot", { key: '72ea7a00510f9a3baa35e11512ab22d1800fdf8c' }));
|
|
797
796
|
}
|
|
798
797
|
};
|
|
799
798
|
XvTab.style = XvTabV2Style0;
|
|
800
799
|
|
|
801
|
-
var
|
|
802
|
-
(function (TABLE_COLOR_SCHEMA) {
|
|
803
|
-
TABLE_COLOR_SCHEMA["DEF"] = "";
|
|
804
|
-
TABLE_COLOR_SCHEMA["ZEBRA"] = "zebra";
|
|
805
|
-
})(TABLE_COLOR_SCHEMA || (TABLE_COLOR_SCHEMA = {}));
|
|
806
|
-
var TABLE_SIZE;
|
|
807
|
-
(function (TABLE_SIZE) {
|
|
808
|
-
TABLE_SIZE["EXTRA_SMALL"] = "xs";
|
|
809
|
-
TABLE_SIZE["SMALL"] = "sm";
|
|
810
|
-
TABLE_SIZE["MEDIUM"] = "md";
|
|
811
|
-
TABLE_SIZE["LARGE"] = "lg";
|
|
812
|
-
TABLE_SIZE["EXTRA_LARGE"] = "xl";
|
|
813
|
-
})(TABLE_SIZE || (TABLE_SIZE = {}));
|
|
814
|
-
var TABLE_TAG;
|
|
815
|
-
(function (TABLE_TAG) {
|
|
816
|
-
TABLE_TAG["TABLE"] = "XV-TABLE-V2";
|
|
817
|
-
TABLE_TAG["EXPAND"] = "XV-TABLE-V2-EXPAND";
|
|
818
|
-
TABLE_TAG["ROW"] = "XV-TABLE-V2-ROW";
|
|
819
|
-
TABLE_TAG["HEADER"] = "XV-TABLE-V2-HEADER-ROW";
|
|
820
|
-
TABLE_TAG["TOOLBAR"] = "XV-TABLE-V2-TOOLBAR";
|
|
821
|
-
})(TABLE_TAG || (TABLE_TAG = {}));
|
|
822
|
-
var SORT_DIR;
|
|
823
|
-
(function (SORT_DIR) {
|
|
824
|
-
SORT_DIR["ASC"] = "asc";
|
|
825
|
-
SORT_DIR["DESC"] = "desc";
|
|
826
|
-
SORT_DIR["NONE"] = "none";
|
|
827
|
-
})(SORT_DIR || (SORT_DIR = {}));
|
|
828
|
-
|
|
829
|
-
const xvTableCss = ":host{position:relative;--xv-table-row-bg-color:var(--layer-02, #FFF);--xv-table-first-col-size:0px;--xv-table-padding:16px}:host ::slotted(xv-table-v2-header-row[cols=\"1\"]),:host ::slotted(xv-table-v2-row[cols=\"1\"]),:host ::slotted(xv-table-v2-expand[cols=\"1\"]){--xv-table-cols:1}:host ::slotted(xv-table-v2-header-row[cols=\"2\"]),:host ::slotted(xv-table-v2-row[cols=\"2\"]),:host ::slotted(xv-table-v2-expand[cols=\"2\"]){--xv-table-cols:2}:host ::slotted(xv-table-v2-header-row[cols=\"3\"]),:host ::slotted(xv-table-v2-row[cols=\"3\"]),:host ::slotted(xv-table-v2-expand[cols=\"3\"]){--xv-table-cols:3}:host ::slotted(xv-table-v2-header-row[cols=\"4\"]),:host ::slotted(xv-table-v2-row[cols=\"4\"]),:host ::slotted(xv-table-v2-expand[cols=\"4\"]){--xv-table-cols:4}:host ::slotted(xv-table-v2-header-row[cols=\"5\"]),:host ::slotted(xv-table-v2-row[cols=\"5\"]),:host ::slotted(xv-table-v2-expand[cols=\"5\"]){--xv-table-cols:5}:host ::slotted(xv-table-v2-header-row[cols=\"6\"]),:host ::slotted(xv-table-v2-row[cols=\"6\"]),:host ::slotted(xv-table-v2-expand[cols=\"6\"]){--xv-table-cols:6}:host ::slotted(xv-table-v2-header-row[cols=\"7\"]),:host ::slotted(xv-table-v2-row[cols=\"7\"]),:host ::slotted(xv-table-v2-expand[cols=\"7\"]){--xv-table-cols:7}:host ::slotted(xv-table-v2-header-row[cols=\"8\"]),:host ::slotted(xv-table-v2-row[cols=\"8\"]),:host ::slotted(xv-table-v2-expand[cols=\"8\"]){--xv-table-cols:8}:host ::slotted(xv-table-v2-header-row[cols=\"9\"]),:host ::slotted(xv-table-v2-row[cols=\"9\"]),:host ::slotted(xv-table-v2-expand[cols=\"9\"]){--xv-table-cols:9}:host ::slotted(xv-table-v2-header-row[cols=\"10\"]),:host ::slotted(xv-table-v2-row[cols=\"10\"]),:host ::slotted(xv-table-v2-expand[cols=\"10\"]){--xv-table-cols:10}:host ::slotted(xv-table-v2-header-row[cols=\"11\"]),:host ::slotted(xv-table-v2-row[cols=\"11\"]),:host ::slotted(xv-table-v2-expand[cols=\"11\"]){--xv-table-cols:11}:host ::slotted(xv-table-v2-header-row[cols=\"12\"]),:host ::slotted(xv-table-v2-row[cols=\"12\"]),:host ::slotted(xv-table-v2-expand[cols=\"12\"]){--xv-table-cols:12}:host ::slotted(xv-table-v2-header-row[cols=\"13\"]),:host ::slotted(xv-table-v2-row[cols=\"13\"]),:host ::slotted(xv-table-v2-expand[cols=\"13\"]){--xv-table-cols:13}:host ::slotted(xv-table-v2-header-row[cols=\"14\"]),:host ::slotted(xv-table-v2-row[cols=\"14\"]),:host ::slotted(xv-table-v2-expand[cols=\"14\"]){--xv-table-cols:14}:host ::slotted(xv-table-v2-header-row[cols=\"15\"]),:host ::slotted(xv-table-v2-row[cols=\"15\"]),:host ::slotted(xv-table-v2-expand[cols=\"15\"]){--xv-table-cols:15}:host ::slotted(xv-table-v2-header-row[cols=\"16\"]),:host ::slotted(xv-table-v2-row[cols=\"16\"]),:host ::slotted(xv-table-v2-expand[cols=\"16\"]){--xv-table-cols:16}:host ::slotted(xv-table-v2-header-row[cols=\"17\"]),:host ::slotted(xv-table-v2-row[cols=\"17\"]),:host ::slotted(xv-table-v2-expand[cols=\"17\"]){--xv-table-cols:17}:host ::slotted(xv-table-v2-header-row[cols=\"18\"]),:host ::slotted(xv-table-v2-row[cols=\"18\"]),:host ::slotted(xv-table-v2-expand[cols=\"18\"]){--xv-table-cols:18}:host ::slotted(xv-table-v2-header-row[cols=\"19\"]),:host ::slotted(xv-table-v2-row[cols=\"19\"]),:host ::slotted(xv-table-v2-expand[cols=\"19\"]){--xv-table-cols:19}:host ::slotted(xv-table-v2-header-row[cols=\"20\"]),:host ::slotted(xv-table-v2-row[cols=\"20\"]),:host ::slotted(xv-table-v2-expand[cols=\"20\"]){--xv-table-cols:20}:host .caption{padding:16px 16px 18px}:host .caption_title,:host .caption_description{color:var(--text-primary, #333);margin:0}:host .caption_title{font-family:var(--ff-heading, \"Gill Sans\");font-size:21px}:host .caption_description{font-family:var(--ff-body, Tahoma);font-size:14px;line-height:128.571%;letter-spacing:0.16px}:host([expandable]){--xv-table-first-col-size:48px}:host([selectable]){--xv-table-first-col-size:50px}:host([expandable][selectable]){--xv-table-first-col-size:98px}:host([size=xs]){--xv-table-padding:2px}:host([size=sm]){--xv-table-padding:8px}:host([size=md]){--xv-table-padding:16px}:host([size=lg]){--xv-table-padding:18px}:host([size=xl]){--xv-table-padding:20px}:host([hoverable]) ::slotted(xv-table-v2-row:hover),:host([hoverable]) ::slotted(xv-table-v2-expand:hover){--xv-table-row-bg-color:var(--layer-hover-01, #E3E3E3)}:host(xv-table-v2) ::slotted(xv-table-v2-row[odd]),:host(xv-table-v2) ::slotted(xv-table-v2-expand[odd]){--xv-table-row-bg-color:var(--layer-selected-01, #E3E3E3)}";
|
|
800
|
+
const xvTableCss = ":host{--xv-table-padding-x:16px;--xv-table-padding-y:15px;--xv-table-cols-template:repeat(auto-fit, minmax(0, 1fr));display:block}:host .batch-actions{user-select:none;pointer-events:none;position:absolute;left:0;bottom:100%;width:0;min-height:48px;overflow:hidden;border-radius:3px 3px 0 0;background-color:var(--interactive-01, #273435);display:flex;align-items:center;justify-content:space-between;column-gap:var(--spacing-04);flex-wrap:nowrap;box-sizing:border-box;transition:250ms ease-in-out height, 250ms ease-in-out width, 250ms ease-in-out padding-inline;color:var(--text-on-color, #fff)}:host .batch-actions_content{display:block;overflow:hidden;white-space:nowrap}:host .batch-actions_count{margin:0;white-space:nowrap;font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:var(--fz-lg, 18px);letter-spacing:0.16px}:host .xv-table{display:flex;flex-direction:column;position:relative}:host .xv-table ::slotted([checked]){background-color:var(--layer-selected-01, #E3E3E3)}:host .xv-table ::slotted([checked]:not([header]):hover){background-color:var(--layer-selected-hover-01, #DADADA)}:host .xv-table ::slotted(xv-table-v2-row[disabled]){opacity:0.4;cursor:not-allowed;user-select:none}:host .xv-table ::slotted([slot=footer]:hover),:host .xv-table ::slotted([slot=footer]){background-color:var(--layer-accent-02, #E3E3E3)}:host .xv-table-title,:host ::slotted([slot=title]){color:var(--text-primary, #333) !important;font-size:var(--fz-xl, 21px) !important;margin-top:var(--spacing-05, 16px) !important;margin-bottom:var(--spacing-06, 24px) !important;font-family:var(--ff-heading, \"Gill Sans\");font-style:normal;font-weight:400;line-height:normal}:host([hover]) .xv-table ::slotted(:hover:not([header])){background-color:var(--layer-hover-01, #E9E9E9)}:host(.batchVisible) .batch-actions{pointer-events:initial;user-select:initial;width:100%;padding-inline:var(--xv-table-padding-x)}:host([expandable]) ::slotted(xv-table-v2-row){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 10px)}:host([variant-checkbox]) ::slotted([slot=footer]:not([variant])){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 57.97px)}:host([size=xs]){--xv-table-padding-y:7px}:host([size=sm]){--xv-table-padding-y:10px}:host([size=lg]){--xv-table-padding-y:21px}:host([size=xl]){--xv-table-padding-y:31px}";
|
|
830
801
|
const XvTableV2Style0 = xvTableCss;
|
|
831
802
|
|
|
832
803
|
const XvTable = class {
|
|
833
804
|
constructor(hostRef) {
|
|
834
805
|
index.registerInstance(this, hostRef);
|
|
835
|
-
this.
|
|
836
|
-
|
|
837
|
-
* Set current color schema type of enum TABLE_COLOR_SCHEMA
|
|
838
|
-
* Possible options 'zebra'
|
|
839
|
-
*/
|
|
840
|
-
this.colorSchema = TABLE_COLOR_SCHEMA.DEF;
|
|
841
|
-
/**
|
|
842
|
-
* If table is expandable fields
|
|
843
|
-
*/
|
|
844
|
-
this.expandable = false;
|
|
845
|
-
/**
|
|
846
|
-
* Table size
|
|
847
|
-
* enum TABLE_SIZE
|
|
848
|
-
*/
|
|
849
|
-
this.size = TABLE_SIZE.MEDIUM;
|
|
850
|
-
/**
|
|
851
|
-
* Add checkbox selection to the table
|
|
852
|
-
*/
|
|
853
|
-
this.selectable = false;
|
|
854
|
-
this.selectedRows = new Map();
|
|
855
|
-
this.debouncedChangeSelection = utils.debounce(async () => {
|
|
856
|
-
var _a;
|
|
857
|
-
const results = Array.from(this.selectedRows.values());
|
|
858
|
-
const toolbar = this.el.querySelector(TABLE_TAG.TOOLBAR);
|
|
859
|
-
await ((_a = toolbar === null || toolbar === void 0 ? void 0 : toolbar.setSelectedItems) === null || _a === void 0 ? void 0 : _a.call(toolbar, this.selectedRows));
|
|
860
|
-
const header = this.el.querySelector(TABLE_TAG.HEADER);
|
|
861
|
-
let partial = false;
|
|
862
|
-
utils.forEach(this.el.querySelectorAll(TABLE_TAG.ROW), (row) => {
|
|
863
|
-
if (!row.hasAttribute('checked'))
|
|
864
|
-
partial = true;
|
|
865
|
-
});
|
|
866
|
-
utils.setAttr(header, 'checked', !!this.selectedRows.size);
|
|
867
|
-
utils.setAttr(header, 'partial', partial);
|
|
868
|
-
this.changeSelection.emit(results);
|
|
869
|
-
}, 150);
|
|
870
|
-
this.handleCheckedChange = async (e) => {
|
|
871
|
-
const { name, checked } = e.detail;
|
|
872
|
-
if (checked) {
|
|
873
|
-
this.selectedRows.set(name, e.detail);
|
|
874
|
-
}
|
|
875
|
-
else {
|
|
876
|
-
this.selectedRows.delete(name);
|
|
877
|
-
}
|
|
878
|
-
this.debouncedChangeSelection();
|
|
879
|
-
};
|
|
880
|
-
this.setRowProps = () => {
|
|
881
|
-
const rows = Array
|
|
882
|
-
.from(this.el.childNodes)
|
|
883
|
-
.filter((node) => node.nodeType === Node.ELEMENT_NODE && ((node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-ROW` ||
|
|
884
|
-
(node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW` ||
|
|
885
|
-
(node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-EXPAND`));
|
|
886
|
-
let visualIndex = 0;
|
|
887
|
-
rows.forEach((node, i) => {
|
|
888
|
-
const row = node;
|
|
889
|
-
const isHeaderRow = (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW`;
|
|
890
|
-
if (isHeaderRow)
|
|
891
|
-
return;
|
|
892
|
-
switch (this.colorSchema) {
|
|
893
|
-
case TABLE_COLOR_SCHEMA.ZEBRA:
|
|
894
|
-
const stripe = visualIndex % 2 === 0 ? 'even' : 'odd';
|
|
895
|
-
if (row.hasAttribute('expandable') && rows[i + 1]) {
|
|
896
|
-
row.setAttribute(stripe, '');
|
|
897
|
-
}
|
|
898
|
-
else {
|
|
899
|
-
visualIndex++;
|
|
900
|
-
row.setAttribute(stripe, '');
|
|
901
|
-
}
|
|
902
|
-
break;
|
|
903
|
-
default:
|
|
904
|
-
row.removeAttribute('odd');
|
|
905
|
-
row.removeAttribute('even');
|
|
906
|
-
}
|
|
907
|
-
});
|
|
908
|
-
};
|
|
806
|
+
this.selected = new Map();
|
|
807
|
+
this.selectedCount = 0;
|
|
909
808
|
}
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
this.el.addEventListener('checkedChange', this.handleCheckedChange);
|
|
809
|
+
handleSelectRow({ detail }) {
|
|
810
|
+
if (detail.header || detail.expandable)
|
|
811
|
+
return;
|
|
812
|
+
if (detail.checked) {
|
|
813
|
+
this.selected.set(detail.name, detail);
|
|
916
814
|
}
|
|
917
815
|
else {
|
|
918
|
-
this.
|
|
816
|
+
this.selected.delete(detail.name);
|
|
919
817
|
}
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
});
|
|
818
|
+
this.selectedCount = this.selected.size;
|
|
819
|
+
}
|
|
820
|
+
setColsSizeTemplate() {
|
|
821
|
+
var _a;
|
|
822
|
+
if (!this.colsSize || !((_a = this.colsSize) === null || _a === void 0 ? void 0 : _a.length))
|
|
823
|
+
return;
|
|
824
|
+
this.el.style.setProperty('--xv-table-cols-template', this.colsSize
|
|
825
|
+
.map((v) => {
|
|
826
|
+
if (!v)
|
|
827
|
+
return 'minmax(0, 1fr)';
|
|
828
|
+
if (v === 'auto')
|
|
829
|
+
return 'minmax(0, auto)';
|
|
830
|
+
return `calc(${v} - ${50 / this.colsSize.length}px)`;
|
|
831
|
+
})
|
|
832
|
+
.join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
|
|
936
833
|
}
|
|
937
834
|
render() {
|
|
938
|
-
return (index.h(index.Host, { key: '
|
|
835
|
+
return (index.h(index.Host, { key: '98ad681acc0e04bf0c1bb819ab012b3ea22e04c6', class: { batchVisible: !!this.selectedCount } }, index.h("slot", { key: 'b4315a19b272218842902dfe9ad73fc878e29530', name: "title" }, !!this.el.title && index.h("h2", { key: 'c2a7a7d1b75206f13475443d31c6554cf80cc91f', class: "xv-table-title" }, this.el.title)), index.h("slot", { key: '1d3f709b9f6bfb6972eacbb34ae310da4c71ccc9', name: "toolbar" }), index.h("div", { key: '0653df0154242466a8147e6dee9b2d500d651977', class: "xv-table" }, index.h("div", { key: '0c1dc822a97f299e5269a4a7b03408c5bb568982', class: "batch-actions" }, index.h(index.Fragment, { key: '5974e0f94f21860e78dfe163296099cd6ee42da7' }, index.h("div", { key: 'f74a8d397e5ff1244b923697559ea1b5c9adf443', class: "batch-actions_content" }, index.h("slot", { key: '9ab1a03ea8eade4b9b021302f2305c4fca5ccaaf', name: "batch" })), index.h("p", { key: '4b63b6deaa4d31d5aa13e336a6331dcd86961579', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), index.h("slot", { key: '64a7b87bc705b4378665e0991fd1d9506048e4b6' }), index.h("slot", { key: 'c7a5ac279541c4eaf917e768b27f7a0ee1f1e8dd', name: "footer" }))));
|
|
939
836
|
}
|
|
940
837
|
componentWillLoad() {
|
|
941
|
-
this.
|
|
942
|
-
this.listenSelectableHandle();
|
|
943
|
-
}
|
|
944
|
-
disconnectedCallback() {
|
|
945
|
-
this.el.removeEventListener('checkedChange', this.handleCheckedChange);
|
|
838
|
+
this.setColsSizeTemplate();
|
|
946
839
|
}
|
|
947
840
|
get el() { return index.getElement(this); }
|
|
948
|
-
static get watchers() { return {
|
|
949
|
-
"colorSchema": ["handleSetColorSchema"],
|
|
950
|
-
"selectable": ["listenSelectableHandle"]
|
|
951
|
-
}; }
|
|
952
841
|
};
|
|
953
842
|
XvTable.style = XvTableV2Style0;
|
|
954
843
|
|
|
955
|
-
|
|
956
|
-
|
|
844
|
+
var XV_SORT_DIR;
|
|
845
|
+
(function (XV_SORT_DIR) {
|
|
846
|
+
XV_SORT_DIR["ASC"] = "asc";
|
|
847
|
+
XV_SORT_DIR["DESC"] = "desc";
|
|
848
|
+
XV_SORT_DIR["NONE"] = "none";
|
|
849
|
+
})(XV_SORT_DIR || (XV_SORT_DIR = {}));
|
|
850
|
+
const XV_EXPANDABLE_KEY = 'expandable';
|
|
851
|
+
const XV_TABLE_TAG = 'xv-table-v2';
|
|
852
|
+
|
|
853
|
+
const xvTableCellCss = "@charset \"UTF-8\";:host{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:var(--xv-table-padding-y) var(--xv-table-padding-x);color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:14px;font-style:normal;font-weight:400;line-height:1.2;letter-spacing:0.16px;transition:0.25s ease-in-out background-color}:host([align=left]){text-align:left}:host([align=right]){text-align:right}:host([align=center]){text-align:center}:host([sort]){position:relative;cursor:pointer;user-select:none}:host([sort]):before,:host([sort]):after{font-size:12px;line-height:10px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;right:8px;pointer-events:none;transition:350ms ease-in-out opacity;opacity:0}:host([sort]):before{content:\"▲\";top:50%;transform:translateY(calc(-50% - 5px))}:host([sort])::after{content:\"▼\";top:50%;transform:translateY(calc(-50% + 5px))}:host([sort]:hover){background-color:var(--layer-accent-hover-01, #E3E3E3)}:host([sort]:hover)::before,:host([sort]:hover)::after{opacity:1}:host([sort=asc]){background-color:var(--layer-accent-active-01, #D1D1D1)}:host([sort=asc])::before{opacity:1}:host([sort=asc])::after{display:none}:host([sort=desc]){background-color:var(--layer-accent-active-01, #D1D1D1)}:host([sort=desc])::before{display:none}:host([sort=desc])::after{opacity:1}";
|
|
854
|
+
const XvTableV2CellStyle0 = xvTableCellCss;
|
|
957
855
|
|
|
958
|
-
const
|
|
856
|
+
const XvTableCell = class {
|
|
959
857
|
constructor(hostRef) {
|
|
960
858
|
index.registerInstance(this, hostRef);
|
|
961
|
-
this.
|
|
859
|
+
this.sortChange = index.createEvent(this, "sortChange", 7);
|
|
962
860
|
}
|
|
963
|
-
|
|
861
|
+
handleSort() {
|
|
964
862
|
if (this.sort === undefined)
|
|
965
863
|
return;
|
|
864
|
+
let sort = this.sort;
|
|
966
865
|
if (this.sort === '')
|
|
967
|
-
|
|
968
|
-
this.sort =
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
866
|
+
sort = XV_SORT_DIR.NONE;
|
|
867
|
+
this.sort = sort === XV_SORT_DIR.NONE ?
|
|
868
|
+
XV_SORT_DIR.ASC : sort === XV_SORT_DIR.ASC ?
|
|
869
|
+
XV_SORT_DIR.DESC : XV_SORT_DIR.NONE;
|
|
870
|
+
utils.forEach(this.el.parentElement.children, (cell) => {
|
|
871
|
+
if (cell !== this.el && cell.hasAttribute('sort')) {
|
|
872
|
+
cell.setAttribute('sort', 'none');
|
|
873
|
+
}
|
|
874
|
+
});
|
|
875
|
+
if (!this.name)
|
|
876
|
+
this.name = utils.uidGenerator();
|
|
877
|
+
this.sortChange.emit({ name: this.name, value: this.sort });
|
|
972
878
|
}
|
|
879
|
+
;
|
|
973
880
|
render() {
|
|
974
|
-
return (index.h(index.Host, { key: '
|
|
881
|
+
return (index.h(index.Host, { key: 'f48b63c8ec367c6d1e90c64237c29064ad5e6372', style: { width: this.width } }, index.h("slot", { key: 'cb9b159bd4a4951b5981a696bf0cd951c26c8efa' })));
|
|
975
882
|
}
|
|
883
|
+
get el() { return index.getElement(this); }
|
|
976
884
|
};
|
|
977
|
-
|
|
885
|
+
XvTableCell.style = XvTableV2CellStyle0;
|
|
978
886
|
|
|
979
|
-
const xvTableExpandCss = ":host
|
|
887
|
+
const xvTableExpandCss = ":host{display:block;position:relative;transition:0.25s ease-in-out background-color}:host .expand-btn{z-index:9;position:absolute;left:max(10px, var(--xv-table-padding-x));top:max(2px, var(--xv-table-padding-y) + 2px);background-color:transparent;cursor:pointer;outline:none;margin:0;padding:0;box-sizing:border-box;display:block;width:8.5px;height:8.5px;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}:host .expand-btn:disabled{cursor:not-allowed;opacity:0.5}:host .expand-btn.open{transform:rotate(-135deg)}:host .expandableContent{overflow:hidden;margin:0;padding:0;max-height:0;transition:250ms ease max-height}:host .expandableContent.open{max-height:600px}:host ::slotted([slot=expandable]){display:grid;align-items:center}:host ::slotted(xv-table-v2-row),:host ::slotted([slot=expandable]){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 10px)}:host ::slotted([disabled]){opacity:0.4;cursor:not-allowed;user-select:none}";
|
|
980
888
|
const XvTableV2ExpandStyle0 = xvTableExpandCss;
|
|
981
889
|
|
|
982
890
|
const XvTableExpand = class {
|
|
983
891
|
constructor(hostRef) {
|
|
984
892
|
index.registerInstance(this, hostRef);
|
|
985
|
-
this.
|
|
986
|
-
this.
|
|
987
|
-
this.
|
|
988
|
-
|
|
989
|
-
this.checkedGroup = new Map();
|
|
990
|
-
this.selectedRows = new Set();
|
|
991
|
-
// Expand group ID
|
|
992
|
-
this.groupId = utils.uidGenerator();
|
|
993
|
-
this.setExpandAttrs = (expanded) => {
|
|
994
|
-
utils.forEach(this.el.children, (row, i) => {
|
|
995
|
-
// set group id
|
|
996
|
-
this.setAttr(row, 'group-id', this.groupId);
|
|
997
|
-
// If it's Main selection row
|
|
998
|
-
if (!i) {
|
|
999
|
-
this.setAttr(row, 'expandable', true);
|
|
1000
|
-
this.setAttr(row, 'expanded', expanded);
|
|
1001
|
-
return;
|
|
1002
|
-
}
|
|
1003
|
-
});
|
|
1004
|
-
};
|
|
1005
|
-
this.onSlotChange = () => {
|
|
1006
|
-
this.cols = this.el.firstElementChild.childElementCount;
|
|
1007
|
-
this.setExpandAttrs(this.expanded);
|
|
1008
|
-
};
|
|
1009
|
-
this.emitChangeSelectionEvent = utils.debounce(() => {
|
|
1010
|
-
var _a, _b;
|
|
1011
|
-
return this.checkedChange.emit(Object.assign(Object.assign({ name: ((_a = this.mainRowData) === null || _a === void 0 ? void 0 : _a.name) || this.el.firstElementChild.getAttribute('selection-name') }, (this.mainRowData || {})), { checked: !!this.selectedRows.size, group: Object.assign(Object.assign({ id: this.groupId }, (((_b = this.mainRowData) === null || _b === void 0 ? void 0 : _b.group) || {})), { data: Array.from(this.selectedRows.values()) }) }));
|
|
1012
|
-
}, 100);
|
|
1013
|
-
this.handleCheckedChange = (e) => {
|
|
1014
|
-
const { group, checked, name } = e.detail;
|
|
1015
|
-
if ((group === null || group === void 0 ? void 0 : group.id) !== this.groupId)
|
|
1016
|
-
return;
|
|
1017
|
-
if (group === null || group === void 0 ? void 0 : group.isMainRow) {
|
|
1018
|
-
this.mainRowData = e.detail;
|
|
1019
|
-
// clear group selection
|
|
1020
|
-
if (!checked)
|
|
1021
|
-
this.selectedRows.clear();
|
|
1022
|
-
// Change all group except first row
|
|
1023
|
-
utils.forEach(this.el.children, (row, i) => {
|
|
1024
|
-
if (!i || row.hasAttribute('disabled'))
|
|
1025
|
-
return;
|
|
1026
|
-
this.setAttr(row, 'checked', checked);
|
|
1027
|
-
});
|
|
1028
|
-
}
|
|
1029
|
-
else {
|
|
1030
|
-
if (checked) {
|
|
1031
|
-
this.selectedRows.add(e.detail);
|
|
1032
|
-
}
|
|
1033
|
-
else {
|
|
1034
|
-
this.selectedRows
|
|
1035
|
-
.forEach(item => item.name === name && this.selectedRows.delete(item));
|
|
1036
|
-
}
|
|
1037
|
-
}
|
|
1038
|
-
const isNoSelected = !this.selectedRows.size;
|
|
1039
|
-
const isAllSelected = this.selectedRows.size == this.el.childElementCount - 1;
|
|
1040
|
-
const isPartialSelected = !isNoSelected && (this.selectedRows.size < this.el.childElementCount - 1);
|
|
1041
|
-
if (isAllSelected) {
|
|
1042
|
-
this.setAttr(this.el.firstElementChild, 'checked', true);
|
|
1043
|
-
}
|
|
1044
|
-
else if (isNoSelected) {
|
|
1045
|
-
this.setAttr(this.el.firstElementChild, 'checked', false);
|
|
1046
|
-
}
|
|
1047
|
-
this.setAttr(this.el.firstElementChild, 'partial', isPartialSelected);
|
|
1048
|
-
this.emitChangeSelectionEvent();
|
|
893
|
+
this.open = false;
|
|
894
|
+
this.disabled = false;
|
|
895
|
+
this.handleExpand = () => {
|
|
896
|
+
this.open = !this.open;
|
|
1049
897
|
};
|
|
1050
898
|
}
|
|
1051
|
-
async toggleExpand(expanded) {
|
|
1052
|
-
this.expanded = !!expanded;
|
|
1053
|
-
}
|
|
1054
|
-
setAttr(node, name, value) {
|
|
1055
|
-
if (typeof value === 'string') {
|
|
1056
|
-
!node.hasAttribute(name) && node.setAttribute(name, value);
|
|
1057
|
-
return;
|
|
1058
|
-
}
|
|
1059
|
-
if (value) {
|
|
1060
|
-
!node.hasAttribute(name) && node.setAttribute(name, '');
|
|
1061
|
-
}
|
|
1062
|
-
else {
|
|
1063
|
-
node.hasAttribute(name) && node.removeAttribute(name);
|
|
1064
|
-
}
|
|
1065
|
-
}
|
|
1066
|
-
setInitialExpandStatus() {
|
|
1067
|
-
const table = this.el.parentElement;
|
|
1068
|
-
if (table.tagName === TABLE_TAG.TABLE)
|
|
1069
|
-
this.setAttr(table, 'expandable', true);
|
|
1070
|
-
}
|
|
1071
899
|
render() {
|
|
1072
|
-
return (index.h(index.Host, { key: '
|
|
900
|
+
return (index.h(index.Host, { key: '03fe6f6aeccdd968034eb8ca2f927ef47e7864d8' }, index.h("button", { key: 'c6fd847183f1ce75de771c1138de6ed058f555b2', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), index.h("slot", { key: '4d7d466275d3cb55552d5b7df60e28bbe75cb058', name: XV_EXPANDABLE_KEY }), index.h("div", { key: '5fdaa8095fc4cd05ce98549228200a739dadc2a3', class: { expandableContent: true, open: this.open } }, index.h("slot", { key: '3c04cf53d2a7c3989a4511f3d407e8e0e7597a7e' }))));
|
|
1073
901
|
}
|
|
1074
|
-
|
|
1075
|
-
this.
|
|
1076
|
-
}
|
|
1077
|
-
connectedCallback() {
|
|
1078
|
-
this.el.childNodes.forEach(row => row.addEventListener('checkedGroupChange', this.handleCheckedChange));
|
|
1079
|
-
}
|
|
1080
|
-
disconnectedCallback() {
|
|
1081
|
-
this.el.childNodes.forEach(row => row.removeEventListener('checkedGroupChange', this.handleCheckedChange));
|
|
902
|
+
componentDidLoad() {
|
|
903
|
+
utils.setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
|
|
1082
904
|
}
|
|
1083
905
|
get el() { return index.getElement(this); }
|
|
1084
906
|
};
|
|
1085
907
|
XvTableExpand.style = XvTableV2ExpandStyle0;
|
|
1086
908
|
|
|
1087
|
-
const
|
|
1088
|
-
const XvTableV2HeaderRowStyle0 = xvTableHeaderRowCss;
|
|
1089
|
-
|
|
1090
|
-
const XvTableHeaderRow = class {
|
|
1091
|
-
constructor(hostRef) {
|
|
1092
|
-
index.registerInstance(this, hostRef);
|
|
1093
|
-
this.sortChange = index.createEvent(this, "sortChange", 7);
|
|
1094
|
-
/**
|
|
1095
|
-
* Checkbox row selected partially
|
|
1096
|
-
*/
|
|
1097
|
-
this.partial = false;
|
|
1098
|
-
/**
|
|
1099
|
-
* Checkbox row checked
|
|
1100
|
-
*/
|
|
1101
|
-
this.checked = false;
|
|
1102
|
-
this.cols = 1;
|
|
1103
|
-
this.sortChangeHandle = ({ detail, target }) => {
|
|
1104
|
-
// Reset prev selected sort
|
|
1105
|
-
utils.forEach(this.el.children, (col) => {
|
|
1106
|
-
if (col !== target && col.hasAttribute('sort')) {
|
|
1107
|
-
col.setAttribute('sort', 'none');
|
|
1108
|
-
}
|
|
1109
|
-
});
|
|
1110
|
-
this.sortChange.emit(detail);
|
|
1111
|
-
};
|
|
1112
|
-
this.slotChangeHandle = () => {
|
|
1113
|
-
this.cols = this.el.childElementCount;
|
|
1114
|
-
if (this.sortable) {
|
|
1115
|
-
this.el.removeEventListener('sortColChange', this.sortChangeHandle.bind(this));
|
|
1116
|
-
this.el.addEventListener('sortColChange', this.sortChangeHandle.bind(this));
|
|
1117
|
-
}
|
|
1118
|
-
};
|
|
1119
|
-
this.checkboxChange = (e) => {
|
|
1120
|
-
this.checked = e.detail;
|
|
1121
|
-
this.partial = false;
|
|
1122
|
-
utils.forEach(this.el.parentElement.querySelectorAll(TABLE_TAG.ROW), (row) => {
|
|
1123
|
-
if (!row.hasAttribute('disabled')) {
|
|
1124
|
-
utils.setAttr(row, 'checked', this.checked);
|
|
1125
|
-
}
|
|
1126
|
-
});
|
|
1127
|
-
};
|
|
1128
|
-
}
|
|
1129
|
-
render() {
|
|
1130
|
-
return (index.h(index.Host, { key: 'caee6dd4e34bd546e779da904c2ade00aca65541', role: "row", cols: this.cols }, index.h("div", { key: '780da58526356bb241e1af14aee3be693076f8c9', class: "left-container" }, this.selectionName !== undefined && (index.h("xv-checkbox-v2", { key: 'a91c0b981008fb4808af1dda2d6adf6a6aa9fb53', partial: this.partial, name: this.selectionName, checked: this.checked, onEventChange: this.checkboxChange }))), index.h("slot", { key: '8e49ed42174d8a393624b8393485a951910713df', onSlotchange: this.slotChangeHandle })));
|
|
1131
|
-
}
|
|
1132
|
-
disconnectedCallback() {
|
|
1133
|
-
this.el.removeEventListener('sortColChange', this.sortChangeHandle.bind(this));
|
|
1134
|
-
}
|
|
1135
|
-
get el() { return index.getElement(this); }
|
|
1136
|
-
};
|
|
1137
|
-
XvTableHeaderRow.style = XvTableV2HeaderRowStyle0;
|
|
1138
|
-
|
|
1139
|
-
const xvTableRowCss = ":host(xv-table-v2-row){display:grid;align-items:center;transition:height 0.15s cubic-bezier(0.2, 0, 0.38, 0.9), padding 0.15s ease-in-out, background-color 0.2ms ease-in-out;background-color:var(--xv-table-row-bg-color);box-shadow:0 0 0 1px #E3E3E3 inset;padding-top:var(--xv-table-padding, 16px);padding-bottom:var(--xv-table-padding, 16px);grid-template-columns:var(--xv-table-first-col-size, 0) repeat(var(--xv-table-cols, 1), 1fr)}:host(xv-table-v2-row) .left-container{height:100%;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 16px}:host(xv-table-v2-row) .expand-btn{outline:none;background-color:transparent;display:block;margin:0 auto;border:solid var(--icon-primary, #131313);border-width:0 1px 1px 0;padding:3px;transform:rotate(45deg);cursor:pointer;transition:opacity 300ms ease-in-out, transform 200ms ease-in-out}:host(xv-table-v2-row) .expand-btn:active{opacity:0.5}:host(xv-table-v2-row) .expand-btn.expanded{margin-top:4px;transform:rotate(225deg)}:host([disabled]){opacity:0.4;pointer-events:none;cursor:not-allowed}:host([disabled]) ::slotted(xv-table-v2-col){cursor:not-allowed}";
|
|
909
|
+
const xvTableRowCss = ":host{display:grid;align-items:center;grid-template-columns:var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));border-bottom:1px solid #E3E3E3;transition:0.25s ease-in-out background-color}:host .cell-control{min-height:20px}:host([variant]){grid-template-columns:minmax(47.97px, min-content) var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)))}:host([hover]:not([header]):hover){background-color:var(--layer-hover-01, #E9E9E9)}:host([checked]){background-color:var(--layer-selected-01, #E3E3E3)}:host([checked]:hover){background-color:var(--layer-selected-hover-01, #DADADA)}:host([header]){background-color:var(--layer-accent-01, #F7F7F7);box-shadow:0 0 0 1px #E3E3E3 inset;border-bottom:none}";
|
|
1140
910
|
const XvTableV2RowStyle0 = xvTableRowCss;
|
|
1141
911
|
|
|
1142
912
|
const XvTableRow = class {
|
|
1143
913
|
constructor(hostRef) {
|
|
1144
914
|
index.registerInstance(this, hostRef);
|
|
1145
|
-
this.
|
|
1146
|
-
this.
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
*/
|
|
1151
|
-
this.expandable = false;
|
|
1152
|
-
/**
|
|
1153
|
-
* Default state of expandable
|
|
1154
|
-
*/
|
|
1155
|
-
this.expanded = false;
|
|
1156
|
-
/**
|
|
1157
|
-
* Disabled status
|
|
1158
|
-
*/
|
|
1159
|
-
this.disabled = false;
|
|
1160
|
-
this.cols = 1;
|
|
1161
|
-
this.hovered = false;
|
|
1162
|
-
this.checkboxChange = (e) => {
|
|
1163
|
-
this.checked = e.detail;
|
|
1164
|
-
};
|
|
1165
|
-
this.onExpandHandle = async () => {
|
|
1166
|
-
this.expanded = !this.expanded;
|
|
1167
|
-
const parent = this.el.parentElement;
|
|
1168
|
-
if (parent.tagName === TABLE_TAG.EXPAND) {
|
|
1169
|
-
await (parent === null || parent === void 0 ? void 0 : parent.toggleExpand(this.expanded));
|
|
1170
|
-
}
|
|
915
|
+
this.selectRow = index.createEvent(this, "selectRow", 7);
|
|
916
|
+
this.checkHandle = ({ detail: checked }) => {
|
|
917
|
+
this.checked = checked;
|
|
918
|
+
if (!checked && this.partial)
|
|
919
|
+
this.partial = checked;
|
|
1171
920
|
};
|
|
1172
921
|
}
|
|
1173
922
|
checkedChangeHandle() {
|
|
1174
|
-
|
|
1175
|
-
name
|
|
923
|
+
if (!this.name)
|
|
924
|
+
this.name = utils.uidGenerator();
|
|
925
|
+
this.selectRow.emit({
|
|
926
|
+
name: this.name,
|
|
1176
927
|
value: this.value,
|
|
1177
928
|
checked: this.checked,
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
}
|
|
1182
|
-
if (changeData.group) {
|
|
1183
|
-
this.checkedGroupChange.emit(changeData);
|
|
1184
|
-
}
|
|
1185
|
-
else {
|
|
1186
|
-
this.checkedChange.emit(changeData);
|
|
1187
|
-
}
|
|
929
|
+
partial: this.partial,
|
|
930
|
+
header: this.header,
|
|
931
|
+
expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,
|
|
932
|
+
});
|
|
1188
933
|
}
|
|
1189
|
-
|
|
1190
|
-
this.
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
934
|
+
setInitialAttrs() {
|
|
935
|
+
if (this.variant || !this.hover) {
|
|
936
|
+
const tableEl = this.el.closest(XV_TABLE_TAG);
|
|
937
|
+
if (!this.hover) {
|
|
938
|
+
this.hover = tableEl.hasAttribute('hover');
|
|
939
|
+
}
|
|
940
|
+
if (this.variant) {
|
|
941
|
+
utils.setAttr(this.el.closest(XV_TABLE_TAG), `variant-${this.variant}`, !!this.variant);
|
|
942
|
+
}
|
|
943
|
+
}
|
|
1194
944
|
}
|
|
1195
945
|
render() {
|
|
1196
|
-
return (index.h(index.Host, { key: '
|
|
946
|
+
return (index.h(index.Host, { key: '5a5fd70ee1706f3c250c58139a2dc81dfd5a4a6a' }, this.variant !== undefined && (index.h("xv-table-v2-cell", { key: '4a9ac57fcb6baccaf97d866519b747ef1d921199', class: "cell-control" }, this.variant === 'checkbox' && (index.h("xv-checkbox-v2", { key: '452ea4f34c537f02f16ef0c26ad17abff15f943d', 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.h("input", { key: 'b92316fbec5ed18d0097017cc260097e87443b79', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), index.h("slot", { key: '5a80306e5b35a072d9f8cabcb9fa3a9bce8ec72c' })));
|
|
947
|
+
}
|
|
948
|
+
componentWillLoad() {
|
|
949
|
+
this.setInitialAttrs();
|
|
1197
950
|
}
|
|
1198
951
|
get el() { return index.getElement(this); }
|
|
1199
952
|
static get watchers() { return {
|
|
@@ -1202,37 +955,6 @@ const XvTableRow = class {
|
|
|
1202
955
|
};
|
|
1203
956
|
XvTableRow.style = XvTableV2RowStyle0;
|
|
1204
957
|
|
|
1205
|
-
const xvTableToolbarCss = ":host{display:block;font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);font-style:normal;font-weight:700;line-height:128.571%;letter-spacing:0.16px}:host .toolbar{transition:max-height 0.2s ease;overflow:hidden;max-height:96px;margin-bottom:8px}:host .butch-editing{display:flex;align-items:center;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;border-radius:3px;column-gap:var(--gap-md, 16px);background-color:var(--interactive-01, #273435);color:var(--text-on-color, var(--Text-text-on-color, #FFF));transition:max-height 0.2s ease;overflow:hidden;max-height:0}:host .butch-editing_content{flex:1;padding:var(--gap-md, 16px) 0 var(--gap-md, 16px) var(--gap-md, 16px)}:host .butch-editing_selected{padding:var(--gap-md, 16px) var(--gap-md, 16px) var(--gap-md, 16px) 0;align-self:center;text-align:right;min-width:117px}:host(.active) .toolbar{max-height:0;margin-bottom:0}:host(.active) .butch-editing{max-height:96px}";
|
|
1206
|
-
const XvTableV2ToolbarStyle0 = xvTableToolbarCss;
|
|
1207
|
-
|
|
1208
|
-
const XvTableToolbar = class {
|
|
1209
|
-
constructor(hostRef) {
|
|
1210
|
-
index.registerInstance(this, hostRef);
|
|
1211
|
-
this.selected = 0;
|
|
1212
|
-
}
|
|
1213
|
-
async setSelectedItems(selected) {
|
|
1214
|
-
let count = 0;
|
|
1215
|
-
selected.forEach(row => {
|
|
1216
|
-
var _a, _b, _c;
|
|
1217
|
-
// not count header
|
|
1218
|
-
if (row.name === 'header')
|
|
1219
|
-
return;
|
|
1220
|
-
// count row if it's not group
|
|
1221
|
-
if (!((_a = row.group) === null || _a === void 0 ? void 0 : _a.isMainRow)) {
|
|
1222
|
-
count++;
|
|
1223
|
-
return;
|
|
1224
|
-
}
|
|
1225
|
-
// count selected group rows
|
|
1226
|
-
count += (((_c = (_b = row.group) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.length) || 0);
|
|
1227
|
-
});
|
|
1228
|
-
this.selected = count;
|
|
1229
|
-
}
|
|
1230
|
-
render() {
|
|
1231
|
-
return (index.h(index.Host, { key: 'ff7f4169161d758dc2d9ecac906fe8f80e1aa0cc', class: { active: !!this.selected } }, index.h("div", { key: '687aacbb14767fc360a5ebd77333e5cc7d4991e2', class: "toolbar" }, index.h("slot", { key: '4eb52c981bd1193fb0c4f5c9b2f541329fafe010' })), index.h("div", { key: 'eb51c8c6d54629623fbf52d930b230067d2199de', class: "butch-editing" }, index.h("div", { key: '68fea62d37eb5b82ff3536a7bc2117c1d3b40ac7', class: "butch-editing_content" }, index.h("slot", { key: '513837fd458c511472704e11313345882845e33e', name: "actions" })), index.h("div", { key: '4e81903ecd38b1c84cede6c0ab64725b47d19dd6', class: "butch-editing_selected" }, this.selected, " ", this.selected === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'))));
|
|
1232
|
-
}
|
|
1233
|
-
};
|
|
1234
|
-
XvTableToolbar.style = XvTableV2ToolbarStyle0;
|
|
1235
|
-
|
|
1236
958
|
var TAB_TAGS;
|
|
1237
959
|
(function (TAB_TAGS) {
|
|
1238
960
|
TAB_TAGS["TABS"] = "xv-tabs-v2";
|
|
@@ -1244,7 +966,7 @@ var TABS_VATIANT;
|
|
|
1244
966
|
// other variants will be here
|
|
1245
967
|
})(TABS_VATIANT || (TABS_VATIANT = {}));
|
|
1246
968
|
|
|
1247
|
-
const xvTabsCss = ":host(.xv-tabs){display:flex;flex-direction:column}:host(.xv-tabs) .tab-headers{display:flex}:host(.xv-tabs) .tab-headers button{background:none;padding:11px var(--gap-md, 16px);cursor:pointer;font:inherit;transition:border-color 0.3s ease, font-weight 0.3s ease, color 0.3s ease;position:relative;border:2px solid transparent;border-bottom-color:var(--border-border-subtle-01, #D1D1D1);background-blend-mode:multiply;color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:18px;letter-spacing:0.16px;height:40px;white-space:nowrap}:host(.xv-tabs) .tab-headers button:after{content:\"\";position:absolute;transition:background-color 0.3s ease, width 0.3s ease;top:100%;left:0;right:0;width:0;height:2px;background-color:var(--interactive-01, #273435)}:host(.xv-tabs) .tab-headers button:focus{outline:none;border:2px solid var(--border-border-subtle-01, #D1D1D1)}:host(.xv-tabs) .tab-headers button:hover{border-bottom-color:var(--border-strong-01, #8B8B8B)}:host(.xv-tabs) .tab-headers button.active{color:var(--text-primary, #333);font-weight:700}:host(.xv-tabs) .tab-headers button.active:after{width:100%}:host(.xv-tabs) .tab-headers button.active:focus{border-color:var(--interactive-01, #273435)}:host(.xv-tabs) .tab-headers button:disabled{color:var(--text-on-color-disabled, #8B8B8B);border-bottom-color:var(--border-disabled, #D1D1D1);cursor:not-allowed}:host(.xv-tabs) .tab-headers button:disabled:after{background-color:var(--border-disabled, #D1D1D1)}:host(.xv-tabs) .tab-content-wrapper{position:relative;overflow:hidden;
|
|
969
|
+
const xvTabsCss = ":host(.xv-tabs){display:flex;flex-direction:column}:host(.xv-tabs) .tab-headers{display:flex}:host(.xv-tabs) .tab-headers button{background:none;padding:11px var(--gap-md, 16px);cursor:pointer;font:inherit;transition:border-color 0.3s ease, font-weight 0.3s ease, color 0.3s ease;position:relative;border:2px solid transparent;border-bottom-color:var(--border-border-subtle-01, #D1D1D1);background-blend-mode:multiply;color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:18px;letter-spacing:0.16px;height:40px;white-space:nowrap}:host(.xv-tabs) .tab-headers button:after{content:\"\";position:absolute;transition:background-color 0.3s ease, width 0.3s ease;top:100%;left:0;right:0;width:0;height:2px;background-color:var(--interactive-01, #273435)}:host(.xv-tabs) .tab-headers button:focus{outline:none;border:2px solid var(--border-border-subtle-01, #D1D1D1)}:host(.xv-tabs) .tab-headers button:hover{border-bottom-color:var(--border-strong-01, #8B8B8B)}:host(.xv-tabs) .tab-headers button.active{color:var(--text-primary, #333);font-weight:700}:host(.xv-tabs) .tab-headers button.active:after{width:100%}:host(.xv-tabs) .tab-headers button.active:focus{border-color:var(--interactive-01, #273435)}:host(.xv-tabs) .tab-headers button:disabled{color:var(--text-on-color-disabled, #8B8B8B);border-bottom-color:var(--border-disabled, #D1D1D1);cursor:not-allowed}:host(.xv-tabs) .tab-headers button:disabled:after{background-color:var(--border-disabled, #D1D1D1)}:host(.xv-tabs) .tab-content-wrapper{position:relative;overflow:hidden;padding:var(--gap-md, 16px) 0}:host(.xv-tabs) ::slotted(xv-tab-v2){position:absolute;opacity:0;max-height:0;transition:max-height 0.5s ease;width:100%;pointer-events:none}:host(.xv-tabs) ::slotted(xv-tab-v2.active){position:relative;opacity:1;overflow-y:auto;pointer-events:auto;max-height:1000px}";
|
|
1248
970
|
const XvTabsV2Style0 = xvTabsCss;
|
|
1249
971
|
|
|
1250
972
|
const XvTabs = class {
|
|
@@ -1259,62 +981,37 @@ const XvTabs = class {
|
|
|
1259
981
|
* Variant of tabs from TABS_VATIANT enum
|
|
1260
982
|
*/
|
|
1261
983
|
this.variant = TABS_VATIANT.DEFAULT;
|
|
1262
|
-
/**
|
|
1263
|
-
* for animate the tab content
|
|
1264
|
-
*/
|
|
1265
|
-
this.height = 0;
|
|
1266
984
|
/**
|
|
1267
985
|
* local variable for tab labels collection
|
|
1268
986
|
*/
|
|
1269
987
|
this.tabElements = [];
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
this.setHeight();
|
|
1276
|
-
}
|
|
1277
|
-
collectTabs() {
|
|
1278
|
-
if (!this.tabElements.length) {
|
|
1279
|
-
this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));
|
|
1280
|
-
}
|
|
988
|
+
this.collectTabs = () => {
|
|
989
|
+
if (!this.tabElements.length) {
|
|
990
|
+
this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));
|
|
991
|
+
}
|
|
992
|
+
};
|
|
1281
993
|
}
|
|
1282
994
|
updateTabClasses() {
|
|
1283
995
|
this.tabElements.forEach((tab, i) => {
|
|
1284
996
|
tab.classList.toggle('active', i === this.active);
|
|
1285
997
|
});
|
|
1286
998
|
}
|
|
1287
|
-
setHeight() {
|
|
1288
|
-
requestAnimationFrame(() => {
|
|
1289
|
-
var _a;
|
|
1290
|
-
const tab = this.tabElements[this.active];
|
|
1291
|
-
if (tab) {
|
|
1292
|
-
const content = (_a = tab.shadowRoot) === null || _a === void 0 ? void 0 : _a.host;
|
|
1293
|
-
this.height = (content === null || content === void 0 ? void 0 : content.scrollHeight) || 0;
|
|
1294
|
-
}
|
|
1295
|
-
});
|
|
1296
|
-
}
|
|
1297
999
|
handleTabClick(index) {
|
|
1298
1000
|
if (index === this.active)
|
|
1299
1001
|
return;
|
|
1300
1002
|
this.active = index;
|
|
1301
|
-
this.setHeight();
|
|
1302
1003
|
this.tabSelect.emit(this.active);
|
|
1303
1004
|
}
|
|
1304
1005
|
render() {
|
|
1305
|
-
return (index.h(index.Host, { key: '
|
|
1006
|
+
return (index.h(index.Host, { key: '71222d5fc07d20673c5ef9e7cda9c6e443611011', class: "xv-tabs", variant: this.variant }, index.h("div", { key: '179f735cb97ca18df1e4d83167ce9f76a74a5afb', class: "tab-headers", role: "tablist" }, this.tabElements.map((tab, index$1) => (index.h("button", { role: "tab", disabled: !!tab.getAttribute('disabled') || !!(tab === null || tab === void 0 ? void 0 : tab.disabled), class: { active: index$1 === this.active }, onClick: () => this.handleTabClick(index$1) }, tab.getAttribute('label') || `Tab ${index$1 + 1}`)))), index.h("div", { key: 'c26bcad7439d3a8155fbb0af4e566845f77de28b', class: "tab-content-wrapper", role: "tabpanel", tabindex: -1 }, index.h("slot", { key: 'c7744d7960dc59ed279103c40e20fa59feb4d0d7', onSlotchange: this.collectTabs }))));
|
|
1306
1007
|
}
|
|
1307
1008
|
componentWillLoad() {
|
|
1308
|
-
this.collectTabs();
|
|
1309
|
-
this.setHeight();
|
|
1009
|
+
// this.collectTabs();
|
|
1310
1010
|
}
|
|
1311
1011
|
componentDidRender() {
|
|
1312
1012
|
this.updateTabClasses();
|
|
1313
1013
|
}
|
|
1314
1014
|
get el() { return index.getElement(this); }
|
|
1315
|
-
static get watchers() { return {
|
|
1316
|
-
"active": ["onActiveTabChanged"]
|
|
1317
|
-
}; }
|
|
1318
1015
|
};
|
|
1319
1016
|
XvTabs.style = XvTabsV2Style0;
|
|
1320
1017
|
|
|
@@ -1337,7 +1034,7 @@ const XvTag = class {
|
|
|
1337
1034
|
this.closeClick.emit(e);
|
|
1338
1035
|
}
|
|
1339
1036
|
render() {
|
|
1340
|
-
return (index.h(index.Host, { key: '
|
|
1037
|
+
return (index.h(index.Host, { key: '55ab2ded31587ebc443ace2a8417de8fa23a9d4d', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, index.h("div", { key: '8b10a67b88691eb68a0ab659c9d5e16bcf0cf3c4', class: "xv-tag_content" }, index.h("slot", { key: '31df2f187e4028849870d376fe38566a77c7bb70' })), this.closeable && (index.h("button", { key: '5dfd253f6c64121747cb7ea8ed4aa697b66edcb8', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
|
|
1341
1038
|
}
|
|
1342
1039
|
};
|
|
1343
1040
|
XvTag.style = XvTagV2Style0;
|
|
@@ -1385,7 +1082,7 @@ const XvTextInput = class {
|
|
|
1385
1082
|
};
|
|
1386
1083
|
}
|
|
1387
1084
|
render() {
|
|
1388
|
-
return (index.h(index.Host, { key: '
|
|
1085
|
+
return (index.h(index.Host, { key: '8556c01f698beadee8a07430dd5a33d07b0669bc', name: this.name, class: "xv-text-input", role: "textbox", tabindex: this.disabled ? -1 : false }, this.label && index.h("label", { key: 'd32d94e1731e624bfdb92dabe6dd19eb4a768956', class: "label" }, this.label), index.h("div", { key: 'ec0ecef3df39c6eb0682036efe30009688568299', class: "control" }, index.h("input", { key: 'c3d190af296b2cf9b8b2df95bca81f17699ed954', type: "text", class: { withIcon: this.status !== TextInputStatus.DEF }, readonly: this.readonly, value: this.value, disabled: this.disabled, onInput: this.handleInput, placeholder: this.placeholder }), this.getControlIcon(this.status)), this.helper && index.h("p", { key: '8abde71aa7c4f8dc6e85d36815789376bc00c4a6', class: "helper" }, this.helper)));
|
|
1389
1086
|
}
|
|
1390
1087
|
componentWillLoad() {
|
|
1391
1088
|
this.internals.setFormValue(this.value);
|
|
@@ -1409,7 +1106,7 @@ const XvTooltip = class {
|
|
|
1409
1106
|
this.position = 'top';
|
|
1410
1107
|
}
|
|
1411
1108
|
render() {
|
|
1412
|
-
return (index.h(index.Host, { key: '
|
|
1109
|
+
return (index.h(index.Host, { key: '9bfc552b3e9ed5697b9718e94344853698737651', tooltip: this.message, class: `xv-tooltip_${this.position}` }, index.h("slot", { key: '6ed625e9463d0fff4c24835cb1f5f12fb0dc4c01' }, index.h("svg", { key: '77dba81d363ff45e6903a73eae29f811a7cac7cf', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, index.h("path", { key: 'd956ddf5f82a21a93200cf079bf1f7ff096c0644', 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" })))));
|
|
1413
1110
|
}
|
|
1414
1111
|
};
|
|
1415
1112
|
XvTooltip.style = XvTooltipV2Style0;
|
|
@@ -1433,14 +1130,12 @@ exports.xv_progress_indicator_v2 = XvProgressIndicator;
|
|
|
1433
1130
|
exports.xv_progress_indicator_v2_item = XvProgressIndicatorItem;
|
|
1434
1131
|
exports.xv_tab_v2 = XvTab;
|
|
1435
1132
|
exports.xv_table_v2 = XvTable;
|
|
1436
|
-
exports.
|
|
1133
|
+
exports.xv_table_v2_cell = XvTableCell;
|
|
1437
1134
|
exports.xv_table_v2_expand = XvTableExpand;
|
|
1438
|
-
exports.xv_table_v2_header_row = XvTableHeaderRow;
|
|
1439
1135
|
exports.xv_table_v2_row = XvTableRow;
|
|
1440
|
-
exports.xv_table_v2_toolbar = XvTableToolbar;
|
|
1441
1136
|
exports.xv_tabs_v2 = XvTabs;
|
|
1442
1137
|
exports.xv_tag_v2 = XvTag;
|
|
1443
1138
|
exports.xv_text_input_v2 = XvTextInput;
|
|
1444
1139
|
exports.xv_tooltip_v2 = XvTooltip;
|
|
1445
1140
|
|
|
1446
|
-
//# sourceMappingURL=xv-accordion-
|
|
1141
|
+
//# sourceMappingURL=xv-accordion-v2_26.cjs.entry.js.map
|