xv-webcomponents 0.1.44 → 0.1.48
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-MLh9SbX2.js → index-CjhPTfz8.js} +41 -14
- package/dist/cjs/index-CjhPTfz8.js.map +1 -0
- package/dist/cjs/loader.cjs.js +3 -4
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/cjs/xv-accordion-v2_38.cjs.entry.js +79072 -0
- package/dist/cjs/xv-accordion-v2_38.cjs.entry.js.map +1 -0
- package/dist/cjs/xv-breadcrumbs-v2.cjs.entry.js +2 -2
- package/dist/cjs/xv-breadcrumbs-v2.cjs.entry.js.map +1 -1
- package/dist/cjs/xv-breadcrumbs-v2.entry.cjs.js.map +1 -1
- package/dist/cjs/xv-webcomponents.cjs.js +4 -5
- package/dist/cjs/xv-webcomponents.cjs.js.map +1 -1
- package/dist/collection/collection-manifest.json +5 -1
- package/dist/collection/components/xv-accordion/xv-accordion.css +95 -0
- package/dist/collection/components/xv-accordion-item/xv-accordion-item.css +95 -0
- package/dist/collection/components/xv-breadcrumbs/xv-breadcrumbs.css +95 -0
- package/dist/collection/components/xv-button/xv-button-v2.css +95 -0
- package/dist/collection/components/xv-card/xv-card.css +95 -0
- package/dist/collection/components/xv-checkbox/xv-checkbox.css +95 -0
- package/dist/collection/components/xv-data-table/xv-data-table-cell/xv-data-table-cell.css +95 -0
- package/dist/collection/components/xv-data-table/xv-data-table-cell/xv-data-table-cell.js +29 -5
- package/dist/collection/components/xv-data-table/xv-data-table-cell/xv-data-table-cell.js.map +1 -1
- package/dist/collection/components/xv-data-table/xv-data-table-collapse/xv-data-table-collapse.css +95 -0
- package/dist/collection/components/xv-data-table/xv-data-table-collapse/xv-data-table-collapse.js +1 -1
- package/dist/collection/components/xv-data-table/xv-data-table-row/xv-data-table-row.css +104 -7
- package/dist/collection/components/xv-data-table/xv-data-table-row/xv-data-table-row.js +9 -3
- package/dist/collection/components/xv-data-table/xv-data-table-row/xv-data-table-row.js.map +1 -1
- package/dist/collection/components/xv-data-table/xv-data-table.css +112 -2
- package/dist/collection/components/xv-data-table/xv-data-table.js +20 -1
- package/dist/collection/components/xv-data-table/xv-data-table.js.map +1 -1
- package/dist/collection/components/xv-datepicker/xv-datepicker.css +401 -0
- package/dist/collection/components/xv-datepicker/xv-datepicker.js +570 -0
- package/dist/collection/components/xv-datepicker/xv-datepicker.js.map +1 -0
- package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.css +95 -0
- package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js +1 -1
- package/dist/collection/components/xv-dropdown/xv-dropdown.css +95 -0
- package/dist/collection/components/xv-dropdown/xv-dropdown.js +2 -2
- package/dist/collection/components/xv-dropdown/xv-dropdown.js.map +1 -1
- package/dist/collection/components/xv-file-uploader/xv-file-uploader.css +98 -1
- package/dist/collection/components/xv-file-uploader/xv-file-uploader.js +76 -10
- package/dist/collection/components/xv-file-uploader/xv-file-uploader.js.map +1 -1
- package/dist/collection/components/xv-footer/xv-footer.css +95 -0
- package/dist/collection/components/xv-footer/xv-footer.js +1 -1
- package/dist/collection/components/xv-header/xv-header.css +95 -0
- package/dist/collection/components/xv-header/xv-header.js +1 -1
- package/dist/collection/components/xv-link/xv-link.css +95 -0
- package/dist/collection/components/xv-link/xv-link.js +1 -1
- package/dist/collection/components/xv-loader/xv-loader.css +95 -0
- package/dist/collection/components/xv-login-modal/xv-login-modal.css +95 -0
- package/dist/collection/components/xv-modal/xv-modal.css +108 -0
- package/dist/collection/components/xv-modal/xv-modal.js +20 -1
- package/dist/collection/components/xv-modal/xv-modal.js.map +1 -1
- package/dist/collection/components/xv-notification/xv-notification.css +96 -1
- package/dist/collection/components/xv-notification/xv-notification.js +1 -1
- package/dist/collection/components/xv-number-input/xv-number-input.css +95 -0
- 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.css +95 -0
- 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.css +95 -0
- 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.css +96 -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.css +95 -0
- package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js +1 -1
- package/dist/collection/components/xv-slider/xv-slider.css +196 -0
- package/dist/collection/components/xv-slider/xv-slider.js +259 -0
- package/dist/collection/components/xv-slider/xv-slider.js.map +1 -0
- package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.css +95 -0
- 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.css +95 -0
- 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.css +95 -0
- package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js +1 -1
- package/dist/collection/components/xv-table/xv-table.css +95 -0
- package/dist/collection/components/xv-table/xv-table.js +1 -1
- package/dist/collection/components/xv-tabs/xv-tab/xv-tab.css +95 -0
- package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js +1 -1
- package/dist/collection/components/xv-tabs/xv-tabs.css +100 -11
- package/dist/collection/components/xv-tag/xv-tag.css +95 -0
- package/dist/collection/components/xv-tag/xv-tag.js +1 -1
- package/dist/collection/components/xv-text-input/xv-text-input.css +98 -0
- package/dist/collection/components/xv-text-input/xv-text-input.js +21 -2
- package/dist/collection/components/xv-text-input/xv-text-input.js.map +1 -1
- package/dist/collection/components/xv-textarea/xv-textarea.css +254 -0
- package/dist/collection/components/xv-textarea/xv-textarea.js +411 -0
- package/dist/collection/components/xv-textarea/xv-textarea.js.map +1 -0
- package/dist/collection/components/xv-tile/xv-tile.css +294 -0
- package/dist/collection/components/xv-tile/xv-tile.js +264 -0
- package/dist/collection/components/xv-tile/xv-tile.js.map +1 -0
- package/dist/collection/components/xv-toggle-tip/xv-toggle-tip.css +95 -0
- package/dist/collection/components/xv-toggle-tip/xv-toggle-tip.js +1 -1
- package/dist/collection/components/xv-tooltip/xv-tooltip.css +92 -28
- package/dist/collection/components/xv-tooltip/xv-tooltip.js +66 -18
- package/dist/collection/components/xv-tooltip/xv-tooltip.js.map +1 -1
- package/dist/esm/{index-DLYJiP99.js → index-BQoQLd_U.js} +41 -15
- package/dist/esm/index-BQoQLd_U.js.map +1 -0
- package/dist/esm/loader.js +3 -4
- package/dist/esm/loader.js.map +1 -1
- package/dist/esm/xv-accordion-v2_38.entry.js +79033 -0
- package/dist/esm/xv-accordion-v2_38.entry.js.map +1 -0
- package/dist/esm/xv-breadcrumbs-v2.entry.js +2 -2
- package/dist/esm/xv-breadcrumbs-v2.entry.js.map +1 -1
- package/dist/esm/xv-webcomponents.js +4 -5
- package/dist/esm/xv-webcomponents.js.map +1 -1
- package/dist/types/components/xv-data-table/xv-data-table-cell/xv-data-table-cell.d.ts +2 -0
- package/dist/types/components/xv-data-table/xv-data-table.d.ts +1 -0
- package/dist/types/components/xv-datepicker/xv-datepicker.d.ts +69 -0
- package/dist/types/components/xv-file-uploader/xv-file-uploader.d.ts +3 -0
- package/dist/types/components/xv-modal/xv-modal.d.ts +4 -0
- package/dist/types/components/xv-slider/xv-slider.d.ts +20 -0
- package/dist/types/components/xv-text-input/xv-text-input.d.ts +1 -0
- package/dist/types/components/xv-textarea/xv-textarea.d.ts +27 -0
- package/dist/types/components/xv-tile/xv-tile.d.ts +24 -0
- package/dist/types/components/xv-tooltip/xv-tooltip.d.ts +5 -3
- package/dist/types/components.d.ts +373 -0
- package/dist/types/stencil-public-runtime.d.ts +1 -1
- package/dist/xv-webcomponents/loader.esm.js.map +1 -1
- package/dist/xv-webcomponents/p-50fb934d.entry.js +2 -0
- package/dist/xv-webcomponents/p-50fb934d.entry.js.map +1 -0
- package/dist/xv-webcomponents/p-BQoQLd_U.js +3 -0
- package/dist/xv-webcomponents/p-BQoQLd_U.js.map +1 -0
- package/dist/xv-webcomponents/p-a8d785da.entry.js +2 -0
- package/dist/xv-webcomponents/{p-5b63a259.entry.js.map → p-a8d785da.entry.js.map} +1 -1
- package/dist/xv-webcomponents/xv-breadcrumbs-v2.entry.esm.js.map +1 -1
- package/dist/xv-webcomponents/xv-webcomponents.esm.js +1 -1
- package/dist/xv-webcomponents/xv-webcomponents.esm.js.map +1 -1
- package/package.json +7 -4
- package/dist/cjs/app-globals-V2Kpy_OQ.js +0 -8
- package/dist/cjs/app-globals-V2Kpy_OQ.js.map +0 -1
- package/dist/cjs/index-MLh9SbX2.js.map +0 -1
- package/dist/cjs/xv-accordion-v2_34.cjs.entry.js +0 -3510
- package/dist/cjs/xv-accordion-v2_34.cjs.entry.js.map +0 -1
- package/dist/esm/app-globals-DQuL1Twl.js +0 -6
- package/dist/esm/app-globals-DQuL1Twl.js.map +0 -1
- package/dist/esm/index-DLYJiP99.js.map +0 -1
- package/dist/esm/xv-accordion-v2_34.entry.js +0 -3475
- package/dist/esm/xv-accordion-v2_34.entry.js.map +0 -1
- package/dist/xv-webcomponents/p-5b63a259.entry.js +0 -2
- package/dist/xv-webcomponents/p-9c06f44c.entry.js +0 -2
- package/dist/xv-webcomponents/p-9c06f44c.entry.js.map +0 -1
- package/dist/xv-webcomponents/p-DLYJiP99.js +0 -3
- package/dist/xv-webcomponents/p-DLYJiP99.js.map +0 -1
- package/dist/xv-webcomponents/p-DQuL1Twl.js +0 -2
- package/dist/xv-webcomponents/p-DQuL1Twl.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"xv-slider.js","sourceRoot":"","sources":["../../../src/components/xv-slider/xv-slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, AttachInternals } from '@stencil/core';\n\n@Component({\n tag: 'xv-slider-v2',\n styleUrl: 'xv-slider.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class XvSlider {\n @Prop() label: string = '';\n @Prop() name: string = 'range';\n @Prop() min: number = 0;\n @Prop() max: number = 100;\n @Prop({ mutable: true }) value: number = 0;\n @Prop() step: number = 1;\n @Prop() disabled: boolean = false;\n @Prop() readonly: boolean = false;\n @Prop({ attribute: 'not-editable'}) notEditable?: boolean;\n\n @Event() valueChange: EventEmitter<number>;\n @AttachInternals() internals: ElementInternals;\n\n private setValue(value?: number) {\n this.value = value;\n this.valueChange.emit(value);\n this.internals.setFormValue(value?.toString() || '');\n }\n\n private handleInput = (e: Event) => {\n if (this.readonly || this.disabled) return;\n this.setValue(Number((e.target as HTMLInputElement).value));\n };\n\n private handleNumberInput = (e: Event) => {\n const val = Number((e.target as HTMLInputElement).value);\n if (!isNaN(val) && val >= this.min && val <= this.max) this.setValue(val);\n };\n\n private handleNumberBlur = (e: FocusEvent) => {\n const input = e.target as HTMLInputElement;\n const val = Number(input.value);\n if (val !== this.value) {\n input.value = this.value?.toString() || '';\n }\n }\n\n componentWillLoad() {\n if (!this.value && this.min) this.setValue(this.min);\n }\n\n render() {\n return (\n <Host class={{ disabled: this.disabled, readonly: this.readonly }}>\n {this.label && <label class=\"label\">{this.label}</label>}\n <div class=\"control\">\n <span class=\"control_label\">{this.min}</span>\n <input\n type=\"range\"\n disabled={this.disabled || this.readonly}\n readonly={this.readonly}\n name={this.name}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.value}\n onInput={this.handleInput}\n style={{ backgroundSize: `${((this.value - this.min) * 100) / (this.max - this.min)}% 100%` }}\n />\n <span class=\"control_label\">{this.max}</span>\n\n {!this.notEditable && (\n <input\n type=\"number\"\n disabled={this.disabled}\n readonly={this.readonly}\n name={`${this.name}-number-input`}\n step={this.step}\n min={this.min}\n max={this.max}\n value={this.value}\n onInput={this.handleNumberInput}\n onBlur={this.handleNumberBlur}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -1,4 +1,99 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
+
.xv-tooltip[role=tooltip] {
|
|
3
|
+
position: absolute;
|
|
4
|
+
background-color: var(--background-inverse, #333333);
|
|
5
|
+
color: var(--text-on-color);
|
|
6
|
+
padding: var(--spacing-03) var(--spacing-04);
|
|
7
|
+
border-radius: 3px;
|
|
8
|
+
font-size: var(--fz-sm);
|
|
9
|
+
z-index: 999;
|
|
10
|
+
min-width: min(150px, 90vw);
|
|
11
|
+
max-width: min(400px, 90vw);
|
|
12
|
+
}
|
|
13
|
+
.xv-tooltip[role=tooltip]::after {
|
|
14
|
+
content: "";
|
|
15
|
+
position: absolute;
|
|
16
|
+
width: 0;
|
|
17
|
+
height: 0;
|
|
18
|
+
border-style: solid;
|
|
19
|
+
}
|
|
20
|
+
.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
|
|
21
|
+
bottom: -5px;
|
|
22
|
+
left: 50%;
|
|
23
|
+
transform: translateX(-50%);
|
|
24
|
+
border-width: 5px 5px 0 5px;
|
|
25
|
+
border-color: var(--background-inverse, black) transparent transparent transparent;
|
|
26
|
+
}
|
|
27
|
+
.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
|
|
28
|
+
bottom: -5px;
|
|
29
|
+
left: 12px;
|
|
30
|
+
border-width: 5px 5px 0 5px;
|
|
31
|
+
border-color: var(--background-inverse, black) transparent transparent transparent;
|
|
32
|
+
}
|
|
33
|
+
.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
|
|
34
|
+
bottom: -5px;
|
|
35
|
+
right: 12px;
|
|
36
|
+
border-width: 5px 5px 0 5px;
|
|
37
|
+
border-color: var(--background-inverse, black) transparent transparent transparent;
|
|
38
|
+
}
|
|
39
|
+
.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
|
|
40
|
+
top: -5px;
|
|
41
|
+
left: 50%;
|
|
42
|
+
transform: translateX(-50%);
|
|
43
|
+
border-width: 0 5px 5px 5px;
|
|
44
|
+
border-color: transparent transparent var(--background-inverse, black) transparent;
|
|
45
|
+
}
|
|
46
|
+
.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
|
|
47
|
+
top: -5px;
|
|
48
|
+
left: 12px;
|
|
49
|
+
border-width: 0 5px 5px 5px;
|
|
50
|
+
border-color: transparent transparent var(--background-inverse, black) transparent;
|
|
51
|
+
}
|
|
52
|
+
.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
|
|
53
|
+
top: -5px;
|
|
54
|
+
right: 12px;
|
|
55
|
+
border-width: 0 5px 5px 5px;
|
|
56
|
+
border-color: transparent transparent var(--background-inverse, black) transparent;
|
|
57
|
+
}
|
|
58
|
+
.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
|
|
59
|
+
top: 50%;
|
|
60
|
+
right: -5px;
|
|
61
|
+
transform: translateY(-50%);
|
|
62
|
+
border-width: 5px 0 5px 5px;
|
|
63
|
+
border-color: transparent transparent transparent var(--background-inverse, black);
|
|
64
|
+
}
|
|
65
|
+
.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
|
|
66
|
+
top: 12px;
|
|
67
|
+
right: -5px;
|
|
68
|
+
border-width: 5px 0 5px 5px;
|
|
69
|
+
border-color: transparent transparent transparent var(--background-inverse, black);
|
|
70
|
+
}
|
|
71
|
+
.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
|
|
72
|
+
bottom: 12px;
|
|
73
|
+
right: -5px;
|
|
74
|
+
border-width: 5px 0 5px 5px;
|
|
75
|
+
border-color: transparent transparent transparent var(--background-inverse, black);
|
|
76
|
+
}
|
|
77
|
+
.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
|
|
78
|
+
top: 50%;
|
|
79
|
+
left: -5px;
|
|
80
|
+
transform: translateY(-50%);
|
|
81
|
+
border-width: 5px 5px 5px 0;
|
|
82
|
+
border-color: transparent var(--background-inverse, black) transparent transparent;
|
|
83
|
+
}
|
|
84
|
+
.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
|
|
85
|
+
top: 12px;
|
|
86
|
+
left: -5px;
|
|
87
|
+
border-width: 5px 5px 5px 0;
|
|
88
|
+
border-color: transparent var(--background-inverse, black) transparent transparent;
|
|
89
|
+
}
|
|
90
|
+
.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
|
|
91
|
+
bottom: 12px;
|
|
92
|
+
left: -5px;
|
|
93
|
+
border-width: 5px 5px 5px 0;
|
|
94
|
+
border-color: transparent var(--background-inverse, black) transparent transparent;
|
|
95
|
+
}
|
|
96
|
+
|
|
2
97
|
:host {
|
|
3
98
|
white-space: nowrap;
|
|
4
99
|
overflow: hidden;
|
|
@@ -22,7 +22,7 @@ export class XvTableCell {
|
|
|
22
22
|
}
|
|
23
23
|
;
|
|
24
24
|
render() {
|
|
25
|
-
return (h(Host, { key: '
|
|
25
|
+
return (h(Host, { key: 'da0cf9e00eca6e9ee3306a8dc825f2b4a87eb598' }, h("slot", { key: '7f36800f9661fc43ae2391552aa283304baf2538' })));
|
|
26
26
|
}
|
|
27
27
|
static get is() { return "xv-table-v2-cell"; }
|
|
28
28
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,3 +1,98 @@
|
|
|
1
|
+
.xv-tooltip[role=tooltip] {
|
|
2
|
+
position: absolute;
|
|
3
|
+
background-color: var(--background-inverse, #333333);
|
|
4
|
+
color: var(--text-on-color);
|
|
5
|
+
padding: var(--spacing-03) var(--spacing-04);
|
|
6
|
+
border-radius: 3px;
|
|
7
|
+
font-size: var(--fz-sm);
|
|
8
|
+
z-index: 999;
|
|
9
|
+
min-width: min(150px, 90vw);
|
|
10
|
+
max-width: min(400px, 90vw);
|
|
11
|
+
}
|
|
12
|
+
.xv-tooltip[role=tooltip]::after {
|
|
13
|
+
content: "";
|
|
14
|
+
position: absolute;
|
|
15
|
+
width: 0;
|
|
16
|
+
height: 0;
|
|
17
|
+
border-style: solid;
|
|
18
|
+
}
|
|
19
|
+
.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
|
|
20
|
+
bottom: -5px;
|
|
21
|
+
left: 50%;
|
|
22
|
+
transform: translateX(-50%);
|
|
23
|
+
border-width: 5px 5px 0 5px;
|
|
24
|
+
border-color: var(--background-inverse, black) transparent transparent transparent;
|
|
25
|
+
}
|
|
26
|
+
.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
|
|
27
|
+
bottom: -5px;
|
|
28
|
+
left: 12px;
|
|
29
|
+
border-width: 5px 5px 0 5px;
|
|
30
|
+
border-color: var(--background-inverse, black) transparent transparent transparent;
|
|
31
|
+
}
|
|
32
|
+
.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
|
|
33
|
+
bottom: -5px;
|
|
34
|
+
right: 12px;
|
|
35
|
+
border-width: 5px 5px 0 5px;
|
|
36
|
+
border-color: var(--background-inverse, black) transparent transparent transparent;
|
|
37
|
+
}
|
|
38
|
+
.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
|
|
39
|
+
top: -5px;
|
|
40
|
+
left: 50%;
|
|
41
|
+
transform: translateX(-50%);
|
|
42
|
+
border-width: 0 5px 5px 5px;
|
|
43
|
+
border-color: transparent transparent var(--background-inverse, black) transparent;
|
|
44
|
+
}
|
|
45
|
+
.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
|
|
46
|
+
top: -5px;
|
|
47
|
+
left: 12px;
|
|
48
|
+
border-width: 0 5px 5px 5px;
|
|
49
|
+
border-color: transparent transparent var(--background-inverse, black) transparent;
|
|
50
|
+
}
|
|
51
|
+
.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
|
|
52
|
+
top: -5px;
|
|
53
|
+
right: 12px;
|
|
54
|
+
border-width: 0 5px 5px 5px;
|
|
55
|
+
border-color: transparent transparent var(--background-inverse, black) transparent;
|
|
56
|
+
}
|
|
57
|
+
.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
|
|
58
|
+
top: 50%;
|
|
59
|
+
right: -5px;
|
|
60
|
+
transform: translateY(-50%);
|
|
61
|
+
border-width: 5px 0 5px 5px;
|
|
62
|
+
border-color: transparent transparent transparent var(--background-inverse, black);
|
|
63
|
+
}
|
|
64
|
+
.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
|
|
65
|
+
top: 12px;
|
|
66
|
+
right: -5px;
|
|
67
|
+
border-width: 5px 0 5px 5px;
|
|
68
|
+
border-color: transparent transparent transparent var(--background-inverse, black);
|
|
69
|
+
}
|
|
70
|
+
.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
|
|
71
|
+
bottom: 12px;
|
|
72
|
+
right: -5px;
|
|
73
|
+
border-width: 5px 0 5px 5px;
|
|
74
|
+
border-color: transparent transparent transparent var(--background-inverse, black);
|
|
75
|
+
}
|
|
76
|
+
.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
|
|
77
|
+
top: 50%;
|
|
78
|
+
left: -5px;
|
|
79
|
+
transform: translateY(-50%);
|
|
80
|
+
border-width: 5px 5px 5px 0;
|
|
81
|
+
border-color: transparent var(--background-inverse, black) transparent transparent;
|
|
82
|
+
}
|
|
83
|
+
.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
|
|
84
|
+
top: 12px;
|
|
85
|
+
left: -5px;
|
|
86
|
+
border-width: 5px 5px 5px 0;
|
|
87
|
+
border-color: transparent var(--background-inverse, black) transparent transparent;
|
|
88
|
+
}
|
|
89
|
+
.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
|
|
90
|
+
bottom: 12px;
|
|
91
|
+
left: -5px;
|
|
92
|
+
border-width: 5px 5px 5px 0;
|
|
93
|
+
border-color: transparent var(--background-inverse, black) transparent transparent;
|
|
94
|
+
}
|
|
95
|
+
|
|
1
96
|
:host {
|
|
2
97
|
display: block;
|
|
3
98
|
position: relative;
|
|
@@ -10,7 +10,7 @@ export class XvTableExpand {
|
|
|
10
10
|
};
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: 'a9e5cd47d39abb01decdc96639875a1898a387bc' }, h("button", { key: 'e2898b708cea17663c3c2dabe0559e92292a57ad', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: 'e24c605e5ec21d6361bc95100d2c6df21ac51211', name: XV_EXPANDABLE_KEY }), h("div", { key: '521cdc49e930d8c97acaa96154da1995c337a531', class: { expandableContent: true, open: this.open } }, h("slot", { key: 'ac9ba7114a00733d18211f9c78fb9280cbaa098e' }))));
|
|
14
14
|
}
|
|
15
15
|
componentDidLoad() {
|
|
16
16
|
setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
|
|
@@ -1,3 +1,98 @@
|
|
|
1
|
+
.xv-tooltip[role=tooltip] {
|
|
2
|
+
position: absolute;
|
|
3
|
+
background-color: var(--background-inverse, #333333);
|
|
4
|
+
color: var(--text-on-color);
|
|
5
|
+
padding: var(--spacing-03) var(--spacing-04);
|
|
6
|
+
border-radius: 3px;
|
|
7
|
+
font-size: var(--fz-sm);
|
|
8
|
+
z-index: 999;
|
|
9
|
+
min-width: min(150px, 90vw);
|
|
10
|
+
max-width: min(400px, 90vw);
|
|
11
|
+
}
|
|
12
|
+
.xv-tooltip[role=tooltip]::after {
|
|
13
|
+
content: "";
|
|
14
|
+
position: absolute;
|
|
15
|
+
width: 0;
|
|
16
|
+
height: 0;
|
|
17
|
+
border-style: solid;
|
|
18
|
+
}
|
|
19
|
+
.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
|
|
20
|
+
bottom: -5px;
|
|
21
|
+
left: 50%;
|
|
22
|
+
transform: translateX(-50%);
|
|
23
|
+
border-width: 5px 5px 0 5px;
|
|
24
|
+
border-color: var(--background-inverse, black) transparent transparent transparent;
|
|
25
|
+
}
|
|
26
|
+
.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
|
|
27
|
+
bottom: -5px;
|
|
28
|
+
left: 12px;
|
|
29
|
+
border-width: 5px 5px 0 5px;
|
|
30
|
+
border-color: var(--background-inverse, black) transparent transparent transparent;
|
|
31
|
+
}
|
|
32
|
+
.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
|
|
33
|
+
bottom: -5px;
|
|
34
|
+
right: 12px;
|
|
35
|
+
border-width: 5px 5px 0 5px;
|
|
36
|
+
border-color: var(--background-inverse, black) transparent transparent transparent;
|
|
37
|
+
}
|
|
38
|
+
.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
|
|
39
|
+
top: -5px;
|
|
40
|
+
left: 50%;
|
|
41
|
+
transform: translateX(-50%);
|
|
42
|
+
border-width: 0 5px 5px 5px;
|
|
43
|
+
border-color: transparent transparent var(--background-inverse, black) transparent;
|
|
44
|
+
}
|
|
45
|
+
.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
|
|
46
|
+
top: -5px;
|
|
47
|
+
left: 12px;
|
|
48
|
+
border-width: 0 5px 5px 5px;
|
|
49
|
+
border-color: transparent transparent var(--background-inverse, black) transparent;
|
|
50
|
+
}
|
|
51
|
+
.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
|
|
52
|
+
top: -5px;
|
|
53
|
+
right: 12px;
|
|
54
|
+
border-width: 0 5px 5px 5px;
|
|
55
|
+
border-color: transparent transparent var(--background-inverse, black) transparent;
|
|
56
|
+
}
|
|
57
|
+
.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
|
|
58
|
+
top: 50%;
|
|
59
|
+
right: -5px;
|
|
60
|
+
transform: translateY(-50%);
|
|
61
|
+
border-width: 5px 0 5px 5px;
|
|
62
|
+
border-color: transparent transparent transparent var(--background-inverse, black);
|
|
63
|
+
}
|
|
64
|
+
.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
|
|
65
|
+
top: 12px;
|
|
66
|
+
right: -5px;
|
|
67
|
+
border-width: 5px 0 5px 5px;
|
|
68
|
+
border-color: transparent transparent transparent var(--background-inverse, black);
|
|
69
|
+
}
|
|
70
|
+
.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
|
|
71
|
+
bottom: 12px;
|
|
72
|
+
right: -5px;
|
|
73
|
+
border-width: 5px 0 5px 5px;
|
|
74
|
+
border-color: transparent transparent transparent var(--background-inverse, black);
|
|
75
|
+
}
|
|
76
|
+
.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
|
|
77
|
+
top: 50%;
|
|
78
|
+
left: -5px;
|
|
79
|
+
transform: translateY(-50%);
|
|
80
|
+
border-width: 5px 5px 5px 0;
|
|
81
|
+
border-color: transparent var(--background-inverse, black) transparent transparent;
|
|
82
|
+
}
|
|
83
|
+
.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
|
|
84
|
+
top: 12px;
|
|
85
|
+
left: -5px;
|
|
86
|
+
border-width: 5px 5px 5px 0;
|
|
87
|
+
border-color: transparent var(--background-inverse, black) transparent transparent;
|
|
88
|
+
}
|
|
89
|
+
.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
|
|
90
|
+
bottom: 12px;
|
|
91
|
+
left: -5px;
|
|
92
|
+
border-width: 5px 5px 5px 0;
|
|
93
|
+
border-color: transparent var(--background-inverse, black) transparent transparent;
|
|
94
|
+
}
|
|
95
|
+
|
|
1
96
|
:host {
|
|
2
97
|
display: grid;
|
|
3
98
|
grid-template-columns: var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));
|
|
@@ -42,7 +42,7 @@ export class XvTableRow {
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
render() {
|
|
45
|
-
return (h(Host, { key: '
|
|
45
|
+
return (h(Host, { key: '48449909525e477d9f4801b44e4a38ab0c5596b8' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: '86a4c79fdc02b6c63420a5309fb33ba05652a581', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: '617e19158a6eca1d876d819acf395b003189262f', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (h("input", { key: '0f945ee0248531f177c0aba52a9c563bd891c157', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: 'd84ff84dead01a356db64b4c32a886f98dccdddc' })));
|
|
46
46
|
}
|
|
47
47
|
componentWillLoad() {
|
|
48
48
|
this.setInitialAttrs();
|
|
@@ -1,3 +1,98 @@
|
|
|
1
|
+
.xv-tooltip[role=tooltip] {
|
|
2
|
+
position: absolute;
|
|
3
|
+
background-color: var(--background-inverse, #333333);
|
|
4
|
+
color: var(--text-on-color);
|
|
5
|
+
padding: var(--spacing-03) var(--spacing-04);
|
|
6
|
+
border-radius: 3px;
|
|
7
|
+
font-size: var(--fz-sm);
|
|
8
|
+
z-index: 999;
|
|
9
|
+
min-width: min(150px, 90vw);
|
|
10
|
+
max-width: min(400px, 90vw);
|
|
11
|
+
}
|
|
12
|
+
.xv-tooltip[role=tooltip]::after {
|
|
13
|
+
content: "";
|
|
14
|
+
position: absolute;
|
|
15
|
+
width: 0;
|
|
16
|
+
height: 0;
|
|
17
|
+
border-style: solid;
|
|
18
|
+
}
|
|
19
|
+
.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
|
|
20
|
+
bottom: -5px;
|
|
21
|
+
left: 50%;
|
|
22
|
+
transform: translateX(-50%);
|
|
23
|
+
border-width: 5px 5px 0 5px;
|
|
24
|
+
border-color: var(--background-inverse, black) transparent transparent transparent;
|
|
25
|
+
}
|
|
26
|
+
.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
|
|
27
|
+
bottom: -5px;
|
|
28
|
+
left: 12px;
|
|
29
|
+
border-width: 5px 5px 0 5px;
|
|
30
|
+
border-color: var(--background-inverse, black) transparent transparent transparent;
|
|
31
|
+
}
|
|
32
|
+
.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
|
|
33
|
+
bottom: -5px;
|
|
34
|
+
right: 12px;
|
|
35
|
+
border-width: 5px 5px 0 5px;
|
|
36
|
+
border-color: var(--background-inverse, black) transparent transparent transparent;
|
|
37
|
+
}
|
|
38
|
+
.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
|
|
39
|
+
top: -5px;
|
|
40
|
+
left: 50%;
|
|
41
|
+
transform: translateX(-50%);
|
|
42
|
+
border-width: 0 5px 5px 5px;
|
|
43
|
+
border-color: transparent transparent var(--background-inverse, black) transparent;
|
|
44
|
+
}
|
|
45
|
+
.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
|
|
46
|
+
top: -5px;
|
|
47
|
+
left: 12px;
|
|
48
|
+
border-width: 0 5px 5px 5px;
|
|
49
|
+
border-color: transparent transparent var(--background-inverse, black) transparent;
|
|
50
|
+
}
|
|
51
|
+
.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
|
|
52
|
+
top: -5px;
|
|
53
|
+
right: 12px;
|
|
54
|
+
border-width: 0 5px 5px 5px;
|
|
55
|
+
border-color: transparent transparent var(--background-inverse, black) transparent;
|
|
56
|
+
}
|
|
57
|
+
.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
|
|
58
|
+
top: 50%;
|
|
59
|
+
right: -5px;
|
|
60
|
+
transform: translateY(-50%);
|
|
61
|
+
border-width: 5px 0 5px 5px;
|
|
62
|
+
border-color: transparent transparent transparent var(--background-inverse, black);
|
|
63
|
+
}
|
|
64
|
+
.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
|
|
65
|
+
top: 12px;
|
|
66
|
+
right: -5px;
|
|
67
|
+
border-width: 5px 0 5px 5px;
|
|
68
|
+
border-color: transparent transparent transparent var(--background-inverse, black);
|
|
69
|
+
}
|
|
70
|
+
.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
|
|
71
|
+
bottom: 12px;
|
|
72
|
+
right: -5px;
|
|
73
|
+
border-width: 5px 0 5px 5px;
|
|
74
|
+
border-color: transparent transparent transparent var(--background-inverse, black);
|
|
75
|
+
}
|
|
76
|
+
.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
|
|
77
|
+
top: 50%;
|
|
78
|
+
left: -5px;
|
|
79
|
+
transform: translateY(-50%);
|
|
80
|
+
border-width: 5px 5px 5px 0;
|
|
81
|
+
border-color: transparent var(--background-inverse, black) transparent transparent;
|
|
82
|
+
}
|
|
83
|
+
.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
|
|
84
|
+
top: 12px;
|
|
85
|
+
left: -5px;
|
|
86
|
+
border-width: 5px 5px 5px 0;
|
|
87
|
+
border-color: transparent var(--background-inverse, black) transparent transparent;
|
|
88
|
+
}
|
|
89
|
+
.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
|
|
90
|
+
bottom: 12px;
|
|
91
|
+
left: -5px;
|
|
92
|
+
border-width: 5px 5px 5px 0;
|
|
93
|
+
border-color: transparent var(--background-inverse, black) transparent transparent;
|
|
94
|
+
}
|
|
95
|
+
|
|
1
96
|
:host {
|
|
2
97
|
--xv-table-min-height: 51.11px;
|
|
3
98
|
--xv-table-padding-x: 16px;
|
|
@@ -31,7 +31,7 @@ export class XvTable {
|
|
|
31
31
|
.join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
|
|
32
32
|
}
|
|
33
33
|
render() {
|
|
34
|
-
return (h(Host, { key: '
|
|
34
|
+
return (h(Host, { key: '29601da5e5dc0fec7df33bc0e1b7367a6ef4047e', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: '012d3ace649ac0df4b3fd0fd1cb5a449805f21d6', name: "title" }, !!this.el.title && h("h2", { key: '3457829aae2426f3b5c6eb39c822065f9398c81a', class: "xv-table-title" }, this.el.title)), h("slot", { key: 'e761d8765f165a0d0364c39947a614fde40195bc', name: "toolbar" }), h("div", { key: '93ec10505ff0a85f6c8cd5ff3bff5d6662b29191', class: "xv-table" }, h("div", { key: 'f55a1902e987d123825cc909959189793cbc9368', class: "batch-actions" }, h(Fragment, { key: 'dff038c64ef1b439f19e8adfe27d18d623a039a2' }, h("div", { key: '569ac0520aaeb2741293a4177c26359a5488d4cf', class: "batch-actions_content" }, h("slot", { key: 'eba51bd2a22c64d9e6ab016080004bacdb82b4e9', name: "batch" })), h("p", { key: 'f4f34d07ffff002bc7058e7e013d8b8e74b19936', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("div", { key: '4f8bb6393cc19868c9bdb366e0e81ef221653127', class: "xv-table_wrapper" }, h("slot", { key: '136e84a6102287b1bfd81d6820d16639a294c1d3' }), h("slot", { key: 'e3340ec606b97d90c3f9717c3da24fbe2ba9c4c0', name: "footer" })), !!this.loading && (h("div", { key: '5463c9a544bfbd36a1e42e396a013a7c8272b262', class: "xv-table_loading" }, h("xv-loader-v2", { key: '2365ba0f589ca81ae113bb02b3b5f842dd866a3a', size: SIZE_VAR.LG }))))));
|
|
35
35
|
}
|
|
36
36
|
componentWillLoad() {
|
|
37
37
|
this.setColsSizeTemplate();
|
|
@@ -1,3 +1,98 @@
|
|
|
1
|
+
.xv-tooltip[role=tooltip] {
|
|
2
|
+
position: absolute;
|
|
3
|
+
background-color: var(--background-inverse, #333333);
|
|
4
|
+
color: var(--text-on-color);
|
|
5
|
+
padding: var(--spacing-03) var(--spacing-04);
|
|
6
|
+
border-radius: 3px;
|
|
7
|
+
font-size: var(--fz-sm);
|
|
8
|
+
z-index: 999;
|
|
9
|
+
min-width: min(150px, 90vw);
|
|
10
|
+
max-width: min(400px, 90vw);
|
|
11
|
+
}
|
|
12
|
+
.xv-tooltip[role=tooltip]::after {
|
|
13
|
+
content: "";
|
|
14
|
+
position: absolute;
|
|
15
|
+
width: 0;
|
|
16
|
+
height: 0;
|
|
17
|
+
border-style: solid;
|
|
18
|
+
}
|
|
19
|
+
.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
|
|
20
|
+
bottom: -5px;
|
|
21
|
+
left: 50%;
|
|
22
|
+
transform: translateX(-50%);
|
|
23
|
+
border-width: 5px 5px 0 5px;
|
|
24
|
+
border-color: var(--background-inverse, black) transparent transparent transparent;
|
|
25
|
+
}
|
|
26
|
+
.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
|
|
27
|
+
bottom: -5px;
|
|
28
|
+
left: 12px;
|
|
29
|
+
border-width: 5px 5px 0 5px;
|
|
30
|
+
border-color: var(--background-inverse, black) transparent transparent transparent;
|
|
31
|
+
}
|
|
32
|
+
.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
|
|
33
|
+
bottom: -5px;
|
|
34
|
+
right: 12px;
|
|
35
|
+
border-width: 5px 5px 0 5px;
|
|
36
|
+
border-color: var(--background-inverse, black) transparent transparent transparent;
|
|
37
|
+
}
|
|
38
|
+
.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
|
|
39
|
+
top: -5px;
|
|
40
|
+
left: 50%;
|
|
41
|
+
transform: translateX(-50%);
|
|
42
|
+
border-width: 0 5px 5px 5px;
|
|
43
|
+
border-color: transparent transparent var(--background-inverse, black) transparent;
|
|
44
|
+
}
|
|
45
|
+
.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
|
|
46
|
+
top: -5px;
|
|
47
|
+
left: 12px;
|
|
48
|
+
border-width: 0 5px 5px 5px;
|
|
49
|
+
border-color: transparent transparent var(--background-inverse, black) transparent;
|
|
50
|
+
}
|
|
51
|
+
.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
|
|
52
|
+
top: -5px;
|
|
53
|
+
right: 12px;
|
|
54
|
+
border-width: 0 5px 5px 5px;
|
|
55
|
+
border-color: transparent transparent var(--background-inverse, black) transparent;
|
|
56
|
+
}
|
|
57
|
+
.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
|
|
58
|
+
top: 50%;
|
|
59
|
+
right: -5px;
|
|
60
|
+
transform: translateY(-50%);
|
|
61
|
+
border-width: 5px 0 5px 5px;
|
|
62
|
+
border-color: transparent transparent transparent var(--background-inverse, black);
|
|
63
|
+
}
|
|
64
|
+
.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
|
|
65
|
+
top: 12px;
|
|
66
|
+
right: -5px;
|
|
67
|
+
border-width: 5px 0 5px 5px;
|
|
68
|
+
border-color: transparent transparent transparent var(--background-inverse, black);
|
|
69
|
+
}
|
|
70
|
+
.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
|
|
71
|
+
bottom: 12px;
|
|
72
|
+
right: -5px;
|
|
73
|
+
border-width: 5px 0 5px 5px;
|
|
74
|
+
border-color: transparent transparent transparent var(--background-inverse, black);
|
|
75
|
+
}
|
|
76
|
+
.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
|
|
77
|
+
top: 50%;
|
|
78
|
+
left: -5px;
|
|
79
|
+
transform: translateY(-50%);
|
|
80
|
+
border-width: 5px 5px 5px 0;
|
|
81
|
+
border-color: transparent var(--background-inverse, black) transparent transparent;
|
|
82
|
+
}
|
|
83
|
+
.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
|
|
84
|
+
top: 12px;
|
|
85
|
+
left: -5px;
|
|
86
|
+
border-width: 5px 5px 5px 0;
|
|
87
|
+
border-color: transparent var(--background-inverse, black) transparent transparent;
|
|
88
|
+
}
|
|
89
|
+
.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
|
|
90
|
+
bottom: 12px;
|
|
91
|
+
left: -5px;
|
|
92
|
+
border-width: 5px 5px 5px 0;
|
|
93
|
+
border-color: transparent var(--background-inverse, black) transparent transparent;
|
|
94
|
+
}
|
|
95
|
+
|
|
1
96
|
:host {
|
|
2
97
|
display: block;
|
|
3
98
|
}
|
|
@@ -6,7 +6,7 @@ export class XvTab {
|
|
|
6
6
|
this.loading = false;
|
|
7
7
|
}
|
|
8
8
|
render() {
|
|
9
|
-
return (h(Host, { key: '
|
|
9
|
+
return (h(Host, { key: 'fae61291cf2492770a38d24f3c9648676de3122a', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
|
|
10
10
|
}
|
|
11
11
|
static get is() { return "xv-tab-v2"; }
|
|
12
12
|
static get encapsulation() { return "shadow"; }
|