xv-webcomponents 1.20.2 → 1.22.1-staging.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-DwneAp1a.js → index-Cb30DBqk.js} +16 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/xv-accordion-v2_48.cjs.entry.js +79 -51
- package/dist/cjs/xv-header-next.cjs.entry.js +2 -2
- package/dist/cjs/xv-mega-menu-next.cjs.entry.js +3 -3
- package/dist/cjs/xv-webcomponents.cjs.js +1 -1
- package/dist/collection/components/xv-button/xv-button-v2.css +3 -3
- package/dist/collection/components/xv-button/xv-button.js +4 -4
- package/dist/collection/components/xv-datepicker/xv-datepicker.css +3 -0
- package/dist/collection/components/xv-datepicker/xv-datepicker.js +8 -2
- package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js +1 -1
- package/dist/collection/components/xv-dropdown/xv-dropdown.css +3 -2
- package/dist/collection/components/xv-dropdown/xv-dropdown.js +5 -4
- package/dist/collection/components/xv-file-uploader/xv-file-uploader.js +1 -1
- package/dist/collection/components/xv-footer/xv-footer.js +1 -1
- package/dist/collection/components/xv-header/xv-header.js +1 -1
- package/dist/collection/components/xv-header-next/xv-header-next.js +1 -1
- package/dist/collection/components/xv-image-viewer/xv-image-viewer.js +1 -1
- package/dist/collection/components/xv-link/xv-link.js +1 -1
- package/dist/collection/components/xv-mega-menu/xv-mega-menu.js +2 -2
- package/dist/collection/components/xv-mega-menu-next/xv-mega-menu-next.js +2 -2
- package/dist/collection/components/xv-modal/xv-modal.js +1 -1
- package/dist/collection/components/xv-notification/xv-notification.js +1 -1
- package/dist/collection/components/xv-number-input/xv-number-input.js +4 -2
- package/dist/collection/components/xv-pagination/xv-pagination.js +59 -3
- package/dist/collection/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.js +1 -1
- package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js +1 -1
- package/dist/collection/components/xv-radio/xv-radio.css +3 -0
- package/dist/collection/components/xv-radio/xv-radio.js +23 -2
- package/dist/collection/components/xv-slider/xv-slider.js +1 -1
- package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.js +1 -1
- package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.js +1 -1
- package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js +1 -1
- package/dist/collection/components/xv-table/xv-table.js +1 -1
- package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js +1 -1
- package/dist/collection/components/xv-tag/xv-tag.js +1 -1
- package/dist/collection/components/xv-tag-combobox/xv-tag-combobox.css +2 -2
- package/dist/collection/components/xv-tag-combobox/xv-tag-combobox.js +23 -2
- package/dist/collection/components/xv-text-input/xv-text-input.js +4 -2
- package/dist/collection/components/xv-textarea/xv-textarea.css +11 -1
- package/dist/collection/components/xv-textarea/xv-textarea.js +4 -2
- package/dist/collection/components/xv-tile/xv-tile.js +2 -2
- package/dist/collection/components/xv-toggle/xv-toggle.js +1 -1
- package/dist/collection/components/xv-toggle-tip/xv-toggle-tip.js +1 -1
- package/dist/collection/components/xv-tooltip/xv-tooltip.js +2 -2
- package/dist/collection/utils/utils.js +15 -0
- package/dist/esm/{index-OqHMuwQF.js → index-CQm2sRKT.js} +16 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/xv-accordion-v2_48.entry.js +79 -51
- package/dist/esm/xv-header-next.entry.js +2 -2
- package/dist/esm/xv-mega-menu-next.entry.js +3 -3
- package/dist/esm/xv-webcomponents.js +1 -1
- package/dist/types/components/xv-button/xv-button.d.ts +1 -1
- package/dist/types/components/xv-pagination/xv-pagination.d.ts +3 -1
- package/dist/types/components/xv-radio/xv-radio.d.ts +1 -0
- package/dist/types/components/xv-tag-combobox/xv-tag-combobox.d.ts +1 -0
- package/dist/types/components.d.ts +22 -2
- package/dist/types/utils/utils.d.ts +9 -0
- package/dist/xv-webcomponents/index.esm.js +1 -1
- package/dist/xv-webcomponents/{p-fa1779f0.entry.js → p-4ad13642.entry.js} +1 -1
- package/dist/xv-webcomponents/p-616a74df.entry.js +8 -0
- package/dist/xv-webcomponents/{p-0b0ce8e2.entry.js → p-8eca98c5.entry.js} +1 -1
- package/dist/xv-webcomponents/p-CQm2sRKT.js +1 -0
- package/dist/xv-webcomponents/xv-webcomponents.esm.js +1 -1
- package/package.json +1 -1
- package/dist/xv-webcomponents/p-00197757.entry.js +0 -8
- package/dist/xv-webcomponents/p-OqHMuwQF.js +0 -1
|
@@ -25,7 +25,7 @@ export class XvNotification {
|
|
|
25
25
|
};
|
|
26
26
|
}
|
|
27
27
|
render() {
|
|
28
|
-
return (h(Host, { key: '
|
|
28
|
+
return (h(Host, { key: 'd37f00c52f812a385c456d82b4b87c7906916812', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), h("div", { key: '1467b38a639bae0b44e8e2d0b16defeac4f72166', class: "content" }, h("div", { key: 'f50a6392c377f28964080dea4f425ce71a4dae66', class: "content_wrapper" }, this.el.title && h("h5", { key: 'd741175becbe9e1a5cc9e1f01dfac721d2cbdedf', class: "content_title" }, this.el.title), h("slot", { key: '63285e32f21da48b813fa221b1c03f72c98a1ef3' })), h("slot", { key: 'd51483a2a787804ebc7939aa656a2341ca1186b7', name: "footer" })), this.dismissible && h("button", { key: '052f4ca6bcc29ace7f898848b5cb76e8b45c82cb', class: "close", onClick: this.closeHandle })));
|
|
29
29
|
}
|
|
30
30
|
static get is() { return "xv-notification-v2"; }
|
|
31
31
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
import { SIZE_VAR } from "../../types/enum";
|
|
3
|
+
import { resolveFieldMessage } from "../../utils/utils";
|
|
3
4
|
export class XvNumberInput {
|
|
4
5
|
constructor() {
|
|
5
6
|
this.step = 10;
|
|
@@ -32,12 +33,13 @@ export class XvNumberInput {
|
|
|
32
33
|
this.valueChange.emit(this.value);
|
|
33
34
|
}
|
|
34
35
|
render() {
|
|
35
|
-
|
|
36
|
+
const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
|
|
37
|
+
return (h(Host, { key: 'ba63e7fa19fd83ab096c869ab3a33ed4dabef168', class: { disabled: !!this.disabled } }, h("label", { key: '8a137804864b4e54565596c91ed52c79fa6a66cf', class: "control" }, this.label && h("span", { key: '77ddec282acdf268d31af796d1cf8da7fe44fe5e', class: "control_label" }, this.label), h("div", { key: '064f3788cf5c2ef4d9cdfb923a358e97d561c7a0', class: {
|
|
36
38
|
'control_input': true,
|
|
37
39
|
readonly: !!this.readonly,
|
|
38
40
|
error: !!this.error,
|
|
39
41
|
warning: !!this.warning
|
|
40
|
-
} }, h("input", { key: '
|
|
42
|
+
} }, h("input", { key: '4bf26b850789d854d44b793dca1c0d227c660a99', type: "number", placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, min: this.min, max: this.max, step: this.step, value: this.value }), h("div", { key: '596667cfe48667f702dfcb9065c98a898d610211', class: "control_input__icons" }, this.loading ? (h("xv-loader-v2", { size: SIZE_VAR.XS })) : !!this.error ? (h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null, h("xv-button-v2", { key: '9e79ffafd54dc828dead73978cdbb72b179c4897', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.decrement, "aria-label": "Decrease" }, h("span", { key: 'f0d3762af206c0a66ec2164446455d17480a376e', slot: "icon-left", class: "status-icon" }, "\u2212")), h("hr", { key: 'd52a3f06f82bf5889ad1e0dd43cbd4e0714d71d5' }), h("xv-button-v2", { key: '41599106c8c01c493b0a5b8ee2ef0c3ab089168f', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.increment, "aria-label": "Increase" }, h("span", { key: 'ff2bdef2a4b23c35026be7b748a900aaf92d8015', slot: "icon-left", class: "status-icon" }, "+"))))), message && (h("p", { key: 'c47ab641f1397f365fc38e745eaedc8e7c42d93d', class: { message: true, [message.level]: true } }, message.text))));
|
|
41
43
|
}
|
|
42
44
|
static get is() { return "xv-number-input-v2"; }
|
|
43
45
|
static get encapsulation() { return "shadow"; }
|
|
@@ -2,8 +2,14 @@ import { Host, h } from "@stencil/core";
|
|
|
2
2
|
import { SIZE_VAR } from "../../types/enum";
|
|
3
3
|
export class XvPagination {
|
|
4
4
|
constructor() {
|
|
5
|
+
/*
|
|
6
|
+
* Rows per page; the select updates it, the consumer can also set it
|
|
7
|
+
* */
|
|
8
|
+
this.itemsPerPage = 10;
|
|
9
|
+
/*
|
|
10
|
+
* Selectable page sizes; array, or comma-separated via the attribute
|
|
11
|
+
* */
|
|
5
12
|
this.itemsPerPageOptions = [10, 20, 30, 40, 50, 100];
|
|
6
|
-
this.itemsPerPage = this.itemsPerPageOptions[0];
|
|
7
13
|
/*
|
|
8
14
|
* total number of pages
|
|
9
15
|
* */
|
|
@@ -40,6 +46,17 @@ export class XvPagination {
|
|
|
40
46
|
this.rafId = requestAnimationFrame(() => this.updateVariantByWidth(width));
|
|
41
47
|
};
|
|
42
48
|
}
|
|
49
|
+
/** Select options; always includes the current itemsPerPage so it can be displayed. */
|
|
50
|
+
get pageSizeOptions() {
|
|
51
|
+
const raw = this.itemsPerPageOptions;
|
|
52
|
+
const parsed = (Array.isArray(raw) ? raw : `${raw !== null && raw !== void 0 ? raw : ''}`.split(','))
|
|
53
|
+
.map((option) => Number(option))
|
|
54
|
+
.filter((option) => Number.isFinite(option) && option > 0);
|
|
55
|
+
const options = parsed.length ? parsed : [this.itemsPerPage];
|
|
56
|
+
if (!options.includes(this.itemsPerPage))
|
|
57
|
+
options.push(this.itemsPerPage);
|
|
58
|
+
return [...new Set(options)].sort((a, b) => a - b);
|
|
59
|
+
}
|
|
43
60
|
get visiblePagesWithDots() {
|
|
44
61
|
const total = this.total;
|
|
45
62
|
const current = this.page;
|
|
@@ -89,7 +106,7 @@ export class XvPagination {
|
|
|
89
106
|
this.observer.disconnect();
|
|
90
107
|
}
|
|
91
108
|
render() {
|
|
92
|
-
return (h(Host, { key: '
|
|
109
|
+
return (h(Host, { key: '2c45649ea96896456a9581f91318c88e0d1da92d', class: { block: this.block, [this.currentVariant]: true, [this.size]: !!this.size } }, this.currentVariant === 'full' && (h("div", { key: '14e0b47142d8a4354189517fd905e7e40791d907', class: "block" }, h("select", { key: '5acf0ce1728ac5be192be4843c62e97e38bc1ba2', class: "options-select", name: "options", onChange: this.handleItemsPerPageChange }, this.pageSizeOptions.map((v) => h("option", { selected: v === this.itemsPerPage, value: v }, v))))), this.currentVariant === 'full' && (h("span", { key: 'f65d2dd587ebb258dd98454f759ca074a64660c5', class: "block block_full" }, `${(this.page - 1) * this.itemsPerPage + 1} – ${Math.min(this.page * this.itemsPerPage, this.totalItems)} von ${this.totalItems} Einträgen`)), this.currentVariant === 'full' && (h("div", { key: 'c553a7624172e0654e6cc7b6d912f578d2994fcd', class: "block" }, h("select", { key: '77353413fa93b1029124d24cdf9cf8dffeeef3ec', class: "options-select", name: "pages", onChange: this.handlePageSelectChange }, Array.from({ length: this.total }, (_, i) => (h("option", { selected: this.page === i + 1, value: i + 1 }, i + 1)))), h("span", { key: 'cbcc1292fdcf3856c1dfb26e3aa4fa6f7c4a9b3d' }, "von ", this.total, " Seiten"))), this.currentVariant === 'compact' && h("span", { key: 'e9c749e5f44dae92884c2c792de00e3e9d85d7f7', class: "block" }, "Seite ", this.page), h("xv-button-v2", { key: 'f78d723ac642b9a33bfd6b06d265181d6fcb8206', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page - 1), disabled: this.page <= 1 }, h("span", { key: 'a7bb0b0496d1aaa165079888d91fb584d71df08d', slot: "icon-left", class: "icon icon_prev" })), this.currentVariant === 'regular' && (h("ul", { key: '56304a37a61343911a49137b1ab57869d9f0c0a6', class: "list" }, this.visiblePagesWithDots.map((page) => (h("li", { class: { active: this.page === page } }, page === 'dots-start' ? (h("div", { class: "list_dots" }, h("xv-button-v2", { variant: "ghost", size: this.size, tabindex: -1 }, h("span", { slot: "icon-left", class: "list_dots__icon" }, "...")), h("select", { name: "start", onChange: this.handlePageSelectChange }, Array.from({ length: this.page - 3 }, (_, i) => (h("option", { value: i + 2 }, i + 2)))))) : page === 'dots-end' ? (h("div", { class: "list_dots" }, h("xv-button-v2", { variant: "ghost", size: this.size, tabindex: -1 }, h("span", { slot: "icon-left", class: "list_dots__icon" }, "...")), h("select", { name: "end", onChange: this.handlePageSelectChange }, Array.from({ length: this.total - (this.page + 2) }, (_, i) => (h("option", { value: i + this.page + 2 }, i + this.page + 2)))))) : (h("xv-button-v2", { variant: "ghost", size: this.size, disabled: this.page === page, onClick: () => this.handlePageChange(page) }, h("span", { class: "list_page", slot: "icon-left" }, page)))))))), h("xv-button-v2", { key: '7fe669510394685cfa3bdab5afef60e5ac56d5ff', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page + 1), disabled: this.page >= this.total }, h("span", { key: '8651da07fab67e8d43f04e3f84f9fa5e1f326328', slot: "icon-left", class: "icon icon_next" }))));
|
|
93
110
|
}
|
|
94
111
|
static get is() { return "xv-pagination"; }
|
|
95
112
|
static get encapsulation() { return "shadow"; }
|
|
@@ -105,6 +122,46 @@ export class XvPagination {
|
|
|
105
122
|
}
|
|
106
123
|
static get properties() {
|
|
107
124
|
return {
|
|
125
|
+
"itemsPerPage": {
|
|
126
|
+
"type": "number",
|
|
127
|
+
"mutable": true,
|
|
128
|
+
"complexType": {
|
|
129
|
+
"original": "number",
|
|
130
|
+
"resolved": "number",
|
|
131
|
+
"references": {}
|
|
132
|
+
},
|
|
133
|
+
"required": false,
|
|
134
|
+
"optional": false,
|
|
135
|
+
"docs": {
|
|
136
|
+
"tags": [],
|
|
137
|
+
"text": ""
|
|
138
|
+
},
|
|
139
|
+
"getter": false,
|
|
140
|
+
"setter": false,
|
|
141
|
+
"reflect": false,
|
|
142
|
+
"attribute": "items-per-page",
|
|
143
|
+
"defaultValue": "10"
|
|
144
|
+
},
|
|
145
|
+
"itemsPerPageOptions": {
|
|
146
|
+
"type": "string",
|
|
147
|
+
"mutable": false,
|
|
148
|
+
"complexType": {
|
|
149
|
+
"original": "number[] | string",
|
|
150
|
+
"resolved": "number[] | string",
|
|
151
|
+
"references": {}
|
|
152
|
+
},
|
|
153
|
+
"required": false,
|
|
154
|
+
"optional": false,
|
|
155
|
+
"docs": {
|
|
156
|
+
"tags": [],
|
|
157
|
+
"text": ""
|
|
158
|
+
},
|
|
159
|
+
"getter": false,
|
|
160
|
+
"setter": false,
|
|
161
|
+
"reflect": false,
|
|
162
|
+
"attribute": "items-per-page-options",
|
|
163
|
+
"defaultValue": "[10, 20, 30, 40, 50, 100]"
|
|
164
|
+
},
|
|
108
165
|
"total": {
|
|
109
166
|
"type": "number",
|
|
110
167
|
"mutable": false,
|
|
@@ -271,7 +328,6 @@ export class XvPagination {
|
|
|
271
328
|
}
|
|
272
329
|
static get states() {
|
|
273
330
|
return {
|
|
274
|
-
"itemsPerPage": {},
|
|
275
331
|
"currentVariant": {}
|
|
276
332
|
};
|
|
277
333
|
}
|
|
@@ -5,7 +5,7 @@ export class XvProgressIndicatorItem {
|
|
|
5
5
|
this.status = PROGRESS_ITEM_STATUS.NO_STARTED;
|
|
6
6
|
}
|
|
7
7
|
render() {
|
|
8
|
-
return (h(Host, { key: '
|
|
8
|
+
return (h(Host, { key: '36c3535224bef33c901f5ca306e8a51f7ec67b7d', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: '07f68ece4250da1fa1c6865b2109181b455233ac', class: "line" }), h("span", { key: '8b1a10b3492a8565a3ece85e0992844b4789f6ed', class: "icon" }, h("svg", { key: '9b4d63c32a8c8b2b4e48ffd48e1bc97e9d28911b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: 'a324fd9401d75744e6f6be34b087035561699c46', fill: "currentColor", d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }))), h("p", { key: 'ced9d4b3685303b707ade7cfbb778e58bd76f354', class: "label" }, h("slot", { key: 'f016d1345554df36532f7521706a794c9cb6ed76' }))));
|
|
9
9
|
}
|
|
10
10
|
static get is() { return "xv-progress-indicator-v2-item"; }
|
|
11
11
|
static get encapsulation() { return "shadow"; }
|
|
@@ -55,7 +55,7 @@ export class XvProgressIndicator {
|
|
|
55
55
|
this.updateChildItems();
|
|
56
56
|
}
|
|
57
57
|
render() {
|
|
58
|
-
return (h(Host, { key: '
|
|
58
|
+
return (h(Host, { key: 'bb40f89cb341b8eddf809abb091cf7e14ac76852', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: '71e0cd0931a4173910094c6cd42f741052d54aba' })));
|
|
59
59
|
}
|
|
60
60
|
static get is() { return "xv-progress-indicator-v2"; }
|
|
61
61
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { SIZE_VAR } from "../../types/enum";
|
|
3
|
+
import { resolveFieldMessage } from "../../utils/utils";
|
|
3
4
|
export class XvRadio {
|
|
4
5
|
constructor() {
|
|
5
6
|
var _a, _b;
|
|
@@ -23,12 +24,13 @@ export class XvRadio {
|
|
|
23
24
|
}
|
|
24
25
|
}
|
|
25
26
|
render() {
|
|
26
|
-
|
|
27
|
+
const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
|
|
28
|
+
return (h("div", { key: 'b8994fbbe13dae03ed013d20d0e5192f725d654f', class: {
|
|
27
29
|
'xv-radio': true,
|
|
28
30
|
'xv-radio--reverse': this.reverse,
|
|
29
31
|
'xv-radio--block': this.block,
|
|
30
32
|
[`xv-radio--size-${this.size}`]: !!this.size,
|
|
31
|
-
} }, this.label && h("p", { key: '
|
|
33
|
+
} }, this.label && h("p", { key: '0cfbfb3bca9277d5c88b6f81a0c7281b4a6adedb', class: "xv-radio_label" }, this.label), h("label", { key: 'c865aaefeb217455477ebfef4a2218f6274223d0', class: { 'xv-radio_container': true, disabled: this.disabled } }, h("div", { key: '4e57e1fb3cb5f30e901fae68149d4f506b7fe406', class: { 'xv-radio_input': true, 'xv-radio_input--error': !!this.error || this.error === '' } }, h("input", { key: '39b18a7bc1e07505a3e40e7be7ed80c2f8df79d4', ref: el => (this.inputEl = el), type: "radio", name: this.name, value: this.value, checked: this.checked, readonly: this.readonly, disabled: this.disabled }), h("span", { key: 'df7a63e28065fdeed1ff6571d362931843b89aff', class: "xv-radio_input__mark" })), h("span", { key: '0b07ed57ac1002c2b1ed4d9b2331ac425874497b', class: "xv-radio_container__label" }, h("slot", { key: '67676761a7bc81eb3be69bc98c0e6a37126fe630' }))), message && (h("span", { key: '8d166e80b438fecadb9b4db08555318d6db39f74', class: `xv-radio_msg xv-radio_msg--${message.level}` }, message.level !== 'helper' && (h("span", { key: '68efc88831840cd5783f55c9cf520c3e394485e8', class: "xv-radio_msg__status", "aria-hidden": "true" }, message.level === 'error' ? '!' : '⚠')), message.text)), h("slot", { key: 'f68797d142232191a14ef4181692967598634b27', name: "info" })));
|
|
32
34
|
}
|
|
33
35
|
connectedCallback() {
|
|
34
36
|
var _a;
|
|
@@ -303,6 +305,25 @@ export class XvRadio {
|
|
|
303
305
|
"attribute": "warning",
|
|
304
306
|
"defaultValue": "false"
|
|
305
307
|
},
|
|
308
|
+
"helper": {
|
|
309
|
+
"type": "string",
|
|
310
|
+
"mutable": false,
|
|
311
|
+
"complexType": {
|
|
312
|
+
"original": "string",
|
|
313
|
+
"resolved": "string",
|
|
314
|
+
"references": {}
|
|
315
|
+
},
|
|
316
|
+
"required": false,
|
|
317
|
+
"optional": true,
|
|
318
|
+
"docs": {
|
|
319
|
+
"tags": [],
|
|
320
|
+
"text": ""
|
|
321
|
+
},
|
|
322
|
+
"getter": false,
|
|
323
|
+
"setter": false,
|
|
324
|
+
"reflect": false,
|
|
325
|
+
"attribute": "helper"
|
|
326
|
+
},
|
|
306
327
|
"size": {
|
|
307
328
|
"type": "string",
|
|
308
329
|
"mutable": false,
|
|
@@ -38,7 +38,7 @@ export class XvSlider {
|
|
|
38
38
|
this.setValue(this.min);
|
|
39
39
|
}
|
|
40
40
|
render() {
|
|
41
|
-
return (h(Host, { key: '
|
|
41
|
+
return (h(Host, { key: 'bd19f35ec689d875daa44bb89b4ef96a42e27151', class: { disabled: this.disabled, readonly: this.readonly } }, this.label && h("label", { key: '89018407c77a03948187978780453715b76adb7a', class: "label" }, this.label), h("div", { key: 'd062d47edb6dfbd8c71c5188715b830d8c64f31c', class: "control" }, h("span", { key: 'b412961bb8059b885bd537fe70418069c79d0b3d', class: "control_label" }, this.min), h("input", { key: '60726a3e509fd0125d53ea8158012daeb86ffd19', type: "range", disabled: this.disabled || this.readonly, readonly: this.readonly, name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, style: { backgroundSize: `${((this.value - this.min) * 100) / (this.max - this.min)}% 100%` } }), h("span", { key: '1ed3936a025eb043fba3230176846f83e7c5c118', class: "control_label" }, this.max), !this.notEditable && (h("input", { key: '56672e8a5a15150eb5d67b40ad36cf1eeb9b6f1d', type: "number", disabled: this.disabled, readonly: this.readonly, name: `${this.name}-number-input`, step: this.step, min: this.min, max: this.max, value: this.value, onInput: this.handleNumberInput, onBlur: this.handleNumberBlur })))));
|
|
42
42
|
}
|
|
43
43
|
static get is() { return "xv-slider-v2"; }
|
|
44
44
|
static get encapsulation() { return "shadow"; }
|
|
@@ -22,7 +22,7 @@ export class XvTableCell {
|
|
|
22
22
|
}
|
|
23
23
|
;
|
|
24
24
|
render() {
|
|
25
|
-
return (h(Host, { key: '
|
|
25
|
+
return (h(Host, { key: '6ee17c6de912d82fc3bf76e0c20d023b9ddd5bc1' }, h("slot", { key: '3d27a83a969c5ec21d7e8eb8cc8b5adf7e4cf8c2' })));
|
|
26
26
|
}
|
|
27
27
|
static get is() { return "xv-table-v2-cell"; }
|
|
28
28
|
static get encapsulation() { return "shadow"; }
|
|
@@ -10,7 +10,7 @@ export class XvTableExpand {
|
|
|
10
10
|
};
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: '23a3235ef6b7062ce8e9405f8ded7ae11fa1807c' }, h("button", { key: '8eb1219937521aea469072ef5d613777cb634bbb', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: '67669e95fd4f1937e676ca735253ec5f567bfb80', name: XV_EXPANDABLE_KEY }), h("div", { key: 'e9af551fc826dcb13c2756ecce077cea83e26862', class: { expandableContent: true, open: this.open } }, h("slot", { key: '4fe063a81e8d29b03565cc295915ac0ab256751c' }))));
|
|
14
14
|
}
|
|
15
15
|
componentDidLoad() {
|
|
16
16
|
setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
|
|
@@ -42,7 +42,7 @@ export class XvTableRow {
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
render() {
|
|
45
|
-
return (h(Host, { key: '
|
|
45
|
+
return (h(Host, { key: '6654656802da45a485ce7d9cd2225c47c5a96834' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: 'eeedd56ac34ba04b12a7fcaf8043f13f0cd29dc3', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: 'cf46bd85a5b0c5cfe7e87734a11a3cd2a0d94c3d', 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: 'cae91b4260f30e275c30dad23ee2cf465a44027f', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: 'dc0f6fbf428605f3597d23aa9c2d849d2b706ac3' })));
|
|
46
46
|
}
|
|
47
47
|
componentWillLoad() {
|
|
48
48
|
this.setInitialAttrs();
|
|
@@ -32,7 +32,7 @@ export class XvTable {
|
|
|
32
32
|
.join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
|
|
33
33
|
}
|
|
34
34
|
render() {
|
|
35
|
-
return (h(Host, { key: '
|
|
35
|
+
return (h(Host, { key: 'fd4585dc7c7957ed5e21813a07cd4e4b37ba0aee', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: 'b10178e16858ac503457249d4070beade84f54b9', name: "title" }, !!this.el.title && h("h2", { key: '98cd98947c8f6c63c7b829ed5b9dca00da0a2a6a', class: "xv-table-title" }, this.el.title)), h("slot", { key: '20423cba333fa94bf410227cfe0b7ff05328399f', name: "toolbar" }), h("div", { key: '1030c895768fc8ff8212a988c54b9fc7863c5565', class: "xv-table" }, h("div", { key: '710c51587dae457eb6f72243b46e05face727594', class: "batch-actions" }, h(Fragment, { key: 'a9680b4c8cea82391fe77bde726be60d79964db6' }, h("div", { key: 'b181513de135d124ff65b9d8b0418dde5a091c2f', class: "batch-actions_content" }, h("slot", { key: '7456e6ccfc9cd61dc69196aa73a71979736402ce', name: "batch" })), h("p", { key: '8003d6d3f5301c46bf2242570b325dcd0f3b8ce5', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("div", { key: 'afcd09d150fc54cbe7d1b92673ab6241af976f75', class: "xv-table_wrapper" }, h("slot", { key: '850ca927740dafb4254005d5aaa8a43c1e0c9bbb' }), h("slot", { key: '3eca59a2f660d3fa2da5a9e78de5b3aa54e7accd', name: "footer" })), !!this.loading && (h("div", { key: '7db450622a06e9e429edf383d06e45fd9b336883', class: "xv-table_loading" }, h("xv-loader-v2", { key: '46758039848f0c87657f672f992e72f413f0c31a', size: SIZE_VAR.LG }))))));
|
|
36
36
|
}
|
|
37
37
|
componentWillLoad() {
|
|
38
38
|
this.setColsSizeTemplate();
|
|
@@ -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: 'e2348a46b92e44c6603ac2ff49247182bbc8c30e', 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"; }
|
|
@@ -13,7 +13,7 @@ export class XvTag {
|
|
|
13
13
|
this.closeClick.emit(e);
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
|
-
return (h(Host, { key: '
|
|
16
|
+
return (h(Host, { key: 'b64f1b10a7d5e97048541aa8ed893e143d133dfa', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '4a5cea52e023d781ef5e209cd559e704430edd0c', class: "xv-tag_content", part: "details-content" }, h("slot", { key: '09b52772c45a20f6dbf715bafb1f12876a995bb7' })), this.closeable && (h("button", { key: '0e88e905c51189fd45b23722a75650f8c91e1a7e', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
|
|
17
17
|
}
|
|
18
18
|
static get is() { return "xv-tag-v2"; }
|
|
19
19
|
static get encapsulation() { return "shadow"; }
|
|
@@ -214,10 +214,10 @@
|
|
|
214
214
|
line-height: var(--fz-md, 16px);
|
|
215
215
|
letter-spacing: 0.32px;
|
|
216
216
|
}
|
|
217
|
-
:host .message
|
|
217
|
+
:host .message.error {
|
|
218
218
|
color: var(--text-error);
|
|
219
219
|
}
|
|
220
|
-
:host .message
|
|
220
|
+
:host .message.warning {
|
|
221
221
|
color: var(--text-secondary, #515151);
|
|
222
222
|
}
|
|
223
223
|
:host .suggestions {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { h, Host, } from "@stencil/core";
|
|
2
2
|
import { SIZE_VAR } from "../../types/enum";
|
|
3
|
+
import { resolveFieldMessage } from "../../utils/utils";
|
|
3
4
|
export class XvTagCombobox {
|
|
4
5
|
constructor() {
|
|
5
6
|
// props
|
|
@@ -240,12 +241,13 @@ export class XvTagCombobox {
|
|
|
240
241
|
const suggestionsVisible = this.open && this.filtered.length > 0;
|
|
241
242
|
const ariaOwns = suggestionsVisible ? `${this.uid}-listbox` : undefined;
|
|
242
243
|
const activedesc = this.highlighted >= 0 ? this.optionId(this.highlighted) : undefined;
|
|
243
|
-
|
|
244
|
+
const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
|
|
245
|
+
return (h(Host, { key: '01d166609d849318870f660189b78a338b0f4aa5', class: "xv-combobox", part: "root", size: this.size }, this.label && h("label", { key: '1d61003e3c71e4d6bc1e6a3041bcbf52d5f8dd57', class: "label" }, this.label), h("div", { key: 'fcd516b08d3c0342a2eca4304fede8f38ca79e67', class: {
|
|
244
246
|
'control': true,
|
|
245
247
|
'control--disabled': this.disabled,
|
|
246
248
|
'control--error': !!this.error,
|
|
247
249
|
'control--readonly': !!this.readonly,
|
|
248
|
-
}, onClick: () => this.blockClick() }, h("div", { key: '
|
|
250
|
+
}, onClick: () => this.blockClick() }, h("div", { key: '9e238f73b82169c2113d9fb959400c22b87f4647', class: "control-chips", role: "list" }, this.selected.map((s, i) => (h("xv-tag-v2", { role: "listitem", part: "chip", "data-value": s.value, size: this.COMPARE_TAG_SIZE[this.size], disabled: this.disabled, bg: (s === null || s === void 0 ? void 0 : s.bg) || 'var(--layer-accent-01, #F7F7F7)', color: (s === null || s === void 0 ? void 0 : s.color) || 'var(--text-primary, #333)', closeable: !this.readonly, onCloseClick: ({ detail }) => this.removeTag(i, detail) }, s.label))), h("input", { key: 'bf46dbe9ef161154de60b84d672d1d7582da68bc', ref: (el) => (this.inputEl = el), class: "control-input", readonly: this.readonly, placeholder: this.selected.length ? '' : this.placeholder, value: this.inputValue, onInput: (e) => this.onInput(e), onKeyDown: (e) => this.onKeyDown(e), onFocus: () => { this.onOpen(); this.recomputeFiltered(); }, "aria-autocomplete": "list", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": ariaOwns, "aria-activedescendant": activedesc, disabled: this.disabled })), this.loading && (h("span", { key: 'ccd07156dcf4f63f74e9ffaaaddd8cbc530a2b16', class: "control-loader", part: "loader", "aria-hidden": "true" }, h("xv-loader-v2", { key: '9698585b063d0ab965a2083e4a2b2eab51d8f05f', size: "sm", variant: "horizontal" })))), message && (h("p", { key: '4c58ec11c9379d3d36ab49752b42b6ace964dc80', class: { message: true, [message.level]: true } }, message.text)), suggestionsVisible && (h("ul", { key: 'c9a2eeb8375689f11547794f71e0e0bb94b7c97c', id: `${this.uid}-listbox`, class: "suggestions", role: "listbox", part: "listbox" }, this.filtered.map((opt, idx) => (h("li", { id: this.optionId(idx), class: { 'suggestions-opt': true, 'suggestions-opt--highlight': idx === this.highlighted }, role: "option", "aria-selected": idx === this.highlighted, onMouseEnter: () => this.onOptionMouseEnter(idx), onMouseDown: (ev) => ev.preventDefault(), onClick: () => this.selectOption(opt) }, h("div", { class: "suggestions-opt-content" }, opt.bg ? h("span", { class: "suggestions-opt-content--color", style: { background: opt.bg } }) : null, h("span", { class: "suggestions-opt-content--label" }, this.highlightLabel(opt.label).map((seg, i) => typeof seg === 'string' ? h("span", { key: i }, seg) : h("strong", { key: i }, seg.match)))))))))));
|
|
249
251
|
}
|
|
250
252
|
static get is() { return "xv-tag-combobox"; }
|
|
251
253
|
static get encapsulation() { return "shadow"; }
|
|
@@ -491,6 +493,25 @@ export class XvTagCombobox {
|
|
|
491
493
|
"attribute": "warning",
|
|
492
494
|
"defaultValue": "false"
|
|
493
495
|
},
|
|
496
|
+
"helper": {
|
|
497
|
+
"type": "string",
|
|
498
|
+
"mutable": false,
|
|
499
|
+
"complexType": {
|
|
500
|
+
"original": "string",
|
|
501
|
+
"resolved": "string",
|
|
502
|
+
"references": {}
|
|
503
|
+
},
|
|
504
|
+
"required": false,
|
|
505
|
+
"optional": true,
|
|
506
|
+
"docs": {
|
|
507
|
+
"tags": [],
|
|
508
|
+
"text": ""
|
|
509
|
+
},
|
|
510
|
+
"getter": false,
|
|
511
|
+
"setter": false,
|
|
512
|
+
"reflect": false,
|
|
513
|
+
"attribute": "helper"
|
|
514
|
+
},
|
|
494
515
|
"value": {
|
|
495
516
|
"type": "unknown",
|
|
496
517
|
"mutable": false,
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
import { SIZE_VAR } from "../../types/enum";
|
|
3
|
+
import { resolveFieldMessage } from "../../utils/utils";
|
|
3
4
|
/**
|
|
4
5
|
* xv-text-input — custom input
|
|
5
6
|
* ti get data you can use default Input event
|
|
@@ -28,13 +29,14 @@ export class XvTextInput {
|
|
|
28
29
|
};
|
|
29
30
|
}
|
|
30
31
|
render() {
|
|
31
|
-
|
|
32
|
+
const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
|
|
33
|
+
return (h(Host, { key: '728132c4f2d5cd28bb4414213f65876db27c6598', class: { disabled: !!this.disabled } }, h("label", { key: '916c560a1453363844d38f14c758daa17dac51a4', class: "control" }, this.label && h("span", { key: 'e938f987a26432a5d2fece95e21d63661bc34fb1', class: "control_label" }, this.label), h("div", { key: '588c879e28b4ba11a74f41caad027881c3d7728e', class: {
|
|
32
34
|
'control_input': true,
|
|
33
35
|
readonly: !!this.readonly,
|
|
34
36
|
[this.size]: true,
|
|
35
37
|
error: !!this.error,
|
|
36
38
|
warning: !!this.warning,
|
|
37
|
-
} }, h("input", { key: '
|
|
39
|
+
} }, h("input", { key: 'f6a72a291c7c8b73c51b9224aa0d0caa3273b36c', autocomplete: this.autocomplete, type: (this.type === 'password' && this.isPasswordVisible && 'text') || this.type, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, value: this.value }), h("div", { key: 'fa71ff83ea55c7b59999f80b82f761d81479bf70', class: "control_input__icons" }, this.loading && h("xv-loader-v2", { key: '3ee0f61ddeee95bbd449315035793baf7c30ad6c', size: SIZE_VAR.XS }), this.clearable && this.value && !this.loading && !this.disabled && !this.readonly && (h("button", { key: '06603596787e4ab07dcdb8a1587435128fbed330', type: "button", class: "status-icon clear", "aria-label": "Clear", onClick: this.handleClear }, "\u00D7")), !!this.error ? (h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null, this.type === 'password' && (h("button", { key: 'aee36af3c5d4d3024dc8ffa49b2d22c2ed2cec58', onClick: this.togglePassword, disabled: this.disabled, class: "status-icon" }, h("svg", { key: 'db794b19fb972e0f25a4bd3e5fad62c222950809', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 512", width: 16, height: 16 }, this.isPasswordVisible ? (h("path", { fill: "currentColor", d: "M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z" })) : (h("path", { fill: "currentColor", d: "M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z" })))))))), message && (h("p", { key: '4ed34371cfb83c4f0b0143e068a07546407b59ad', class: { message: true, [message.level]: true } }, message.text))));
|
|
38
40
|
}
|
|
39
41
|
static get is() { return "xv-text-input-v2"; }
|
|
40
42
|
static get encapsulation() { return "shadow"; }
|
|
@@ -128,6 +128,7 @@
|
|
|
128
128
|
:host {
|
|
129
129
|
display: inline-block;
|
|
130
130
|
text-align: left;
|
|
131
|
+
font-family: var(--ff-body), sans-serif;
|
|
131
132
|
}
|
|
132
133
|
:host .control_label {
|
|
133
134
|
display: flex;
|
|
@@ -183,7 +184,6 @@
|
|
|
183
184
|
border: none;
|
|
184
185
|
outline: none;
|
|
185
186
|
margin: 0;
|
|
186
|
-
font-family: inherit;
|
|
187
187
|
background-color: transparent;
|
|
188
188
|
padding-block: var(--spacing-05);
|
|
189
189
|
padding-inline: var(--spacing-05);
|
|
@@ -194,6 +194,16 @@
|
|
|
194
194
|
font-style: normal;
|
|
195
195
|
font-weight: 400;
|
|
196
196
|
letter-spacing: 0.16px;
|
|
197
|
+
font-family: inherit;
|
|
198
|
+
line-height: 20px;
|
|
199
|
+
}
|
|
200
|
+
:host .control_input textarea::placeholder {
|
|
201
|
+
color: var(--text-placeholder);
|
|
202
|
+
font-family: inherit;
|
|
203
|
+
font-weight: 400;
|
|
204
|
+
font-size: 14px;
|
|
205
|
+
letter-spacing: 0.16px;
|
|
206
|
+
line-height: 20px;
|
|
197
207
|
}
|
|
198
208
|
:host .control_input textarea.no-resize {
|
|
199
209
|
resize: none;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
import { SIZE_VAR } from "../../types/enum";
|
|
3
|
+
import { resolveFieldMessage } from "../../utils/utils";
|
|
3
4
|
export class XvTextarea {
|
|
4
5
|
constructor() {
|
|
5
6
|
this.value = '';
|
|
@@ -20,12 +21,13 @@ export class XvTextarea {
|
|
|
20
21
|
this.value && this.internals.setFormValue(this.value);
|
|
21
22
|
}
|
|
22
23
|
render() {
|
|
23
|
-
|
|
24
|
+
const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
|
|
25
|
+
return (h(Host, { key: '448aeca8d42352e64a83a064f5da13d20a4e82c3', class: { disabled: !!this.disabled } }, h("label", { key: '925f5e159d6b1ef6db4d813f299a0ab70d6d7a15', class: "control" }, (this.label || this.max) && (h("p", { key: 'deab9c54bc80f0d412e22d9a69739de4b5c8cf5a', class: "control_label" }, h("span", { key: 'c857d7abe6030fa3433cfc85b3bd0350e4fcf695' }, this.label, this.info && h("xv-tooltip-v2", { key: '27dcf6a84157469575ae7ac0a5aaa27bd76c0a54', message: this.info })), this.max !== undefined && !this.counterHide && (h("span", { key: '2ba5ea16f84f2ebc9b95e2b3973cbf1abf1f3cd5', class: "control_label__count" }, this.value.length || 0, "/", this.max)))), h("div", { key: '58390a704ccd7c2d16b61b5ab76107edfb8f68ce', class: {
|
|
24
26
|
'control_input': true,
|
|
25
27
|
readonly: !!this.readonly,
|
|
26
28
|
error: !!this.error,
|
|
27
29
|
warning: this.warning !== undefined,
|
|
28
|
-
} }, h("textarea", { key: '
|
|
30
|
+
} }, h("textarea", { key: '9225df71f40ad73db53f26ba091ae27486933c2a', class: { 'no-resize': !!this.noResize }, name: this.name, rows: this.rows, value: this.value, maxLength: this.max, disabled: this.disabled, readOnly: this.readonly, placeholder: this.placeholder, onInput: this.onInput }), h("div", { key: 'd101bc52aabef1af250f28da6ec666817cee0fc7', class: "control_input__icons" }, this._renderIcon()))), message && (h("p", { key: 'b016c623339b97057de1705fc325644ed59bb1f7', class: { message: true, [message.level]: true } }, message.text))));
|
|
29
31
|
}
|
|
30
32
|
_renderIcon() {
|
|
31
33
|
if (this.loading)
|
|
@@ -29,7 +29,7 @@ export class XvTile {
|
|
|
29
29
|
this.checked = !this.checked;
|
|
30
30
|
}
|
|
31
31
|
render() {
|
|
32
|
-
return (h(Host, { key: '
|
|
32
|
+
return (h(Host, { key: 'c6d00c040c1125441fbfbeeec787a49e6d96edd8', class: "xv-tile--host" }, h("label", { key: 'f2460110e9ff5be0fb97b8d3bf6a60be13d12aef', class: {
|
|
33
33
|
[this.el.className]: !!this.el.className,
|
|
34
34
|
'xv-tile': true,
|
|
35
35
|
[`xv-tile--variant-${this.variant}`]: !!this.variant,
|
|
@@ -37,7 +37,7 @@ export class XvTile {
|
|
|
37
37
|
'xv-tile--disabled': !!this.disabled,
|
|
38
38
|
'selected': !!this.checked,
|
|
39
39
|
'xv-tile--error': !!this.error,
|
|
40
|
-
} }, h("div", { key: '
|
|
40
|
+
} }, h("div", { key: '03dfbbb5b4e64827f420499689d9c715bf9c1eda', class: "xv-tile_content" }, this.label && h("p", { key: '0ce8526939aa10dd81643297228f804ed7e06d8b', class: "xv-tile_content__title" }, this.label), h("slot", { key: '026f8d5af0ffc6f3b1c2b0ba46e571649ebe80a4' })), this.variant === 'selectable' && (h("div", { key: 'dacd8cffe17187119d1e2f3b27a47398104e9b8b', class: "xv-tile_control" }, this.multiple ? (h("input", { type: "checkbox", disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })) : (h("input", { type: "radio", disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })))), (this.variant === 'clickable' || this.variant === 'expandable') && (h("div", { key: '198aec62cbc33730c39a32166684ac03d4f835ca', class: "xv-tile_footer" }, h("button", { key: '4add8f9f71e08e54c59ea48149a428dbb64e084d', class: { 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked } }))), h("div", { key: 'ea222f9359fb28d26addec27522a51e83b23f9ae', class: { 'xv-tile_expandable': true, open: this.checked } }, h("slot", { key: 'af0520de5ba1d48d6c31ed11ea2e94e87b68afdd', name: "expandable" })))));
|
|
41
41
|
}
|
|
42
42
|
static get is() { return "xv-tile"; }
|
|
43
43
|
static get originalStyleUrls() {
|
|
@@ -15,7 +15,7 @@ export class XvToggle {
|
|
|
15
15
|
};
|
|
16
16
|
}
|
|
17
17
|
render() {
|
|
18
|
-
return (h(Host, { key: '
|
|
18
|
+
return (h(Host, { key: 'a4c7db088862dcae9471dd95b2698af1f77d5017', class: { 'xv-toggle': true, disabled: this.disabled, readonly: !!this.readonly, block: !!this.block } }, this.label && h("span", { key: '962d886c27033e34c27f5422af41324ad626972e', class: "label" }, this.label), h("label", { key: '3ab94e6af077e0a3231390e348fd087db0b88de2', class: "control" }, h("slot", { key: '5df02cdcda6edcc2eaa155b99a8bd5ca18971955', name: "before" }), h("div", { key: 'a8fd1d667f83b5ac7eb9140101e98a2ef6b5b948', class: "control_input" }, h("input", { key: 'c36f9ee766631e89ddee7e5ded5f611a2100222f', type: "checkbox", readonly: this.readonly, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, onChange: this.onChange }), h("span", { key: '331bca3c9e61dce5a7bde5ce4fd1a49d961a1c62', class: "toggle" })), h("slot", { key: '0d5313bb74c80168f24152d161e96c885eb43b68', name: "after" }))));
|
|
19
19
|
}
|
|
20
20
|
static get is() { return "xv-toggle"; }
|
|
21
21
|
static get encapsulation() { return "shadow"; }
|
|
@@ -67,7 +67,7 @@ export class XvToggleTip {
|
|
|
67
67
|
}
|
|
68
68
|
;
|
|
69
69
|
render() {
|
|
70
|
-
return (h(Host, { key: '
|
|
70
|
+
return (h(Host, { key: 'ea323b0b30d9c64a8331cdcbe26604aae7514919', class: "xv-toggle-tip" }, h("div", { key: '755153ca241f3b6dbf4afd679e32f37e02cc6e06', class: { 'trigger': true, 'trigger--block': this.block }, role: "button", tabindex: "0", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "popover", onClick: () => this.setPopover(!this.open), ref: (el) => (this.triggerEl = el) }, h("slot", { key: 'de6c5bebb14b9527778583721613dbee8d31c7b9', name: "trigger" }, h("svg", { key: '422c8198fc6c2acbb7741eeb4fe80a836c513b79', class: "trigger_icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '27acc8437785b92f7e2863d8698e7883e4bd75c1', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))), h("div", { key: '02360fd327e3f87ed053a5ad739df8272812c9e5', class: { popover: true, autoSize: !!this.autoSize }, role: "tooltip", tabindex: "-1", ref: (el) => (this.popoverEl = el) }, h("div", { key: '854fdfebc92d0329104dab26f1971528a99bb1f5', class: "popover-tip", part: "tip", "data-popper-arrow": "" }), h("div", { key: '34dd98113ac8155556f800cd3fb79c57123bdae7', class: "popover-content" }, h("slot", { key: 'd00d4259e6eeddfac8ba57e370920ce551fe7687', name: "header" }), h("slot", { key: '5bf9adb4a8060ec40131010f256c5b26f47afe0e', name: "body" }), h("slot", { key: '76c01a0f68366f63708520716d2c6c5a37106cce', name: "footer" })))));
|
|
71
71
|
}
|
|
72
72
|
disconnectedCallback() {
|
|
73
73
|
this.destroyPopper();
|
|
@@ -38,11 +38,11 @@ export class XvTooltip {
|
|
|
38
38
|
this.destroyTooltip();
|
|
39
39
|
}
|
|
40
40
|
render() {
|
|
41
|
-
return (h(Host, { key: '
|
|
41
|
+
return (h(Host, { key: '4ea241a9d4a49c933300886b7d8cf54321462452', role: "tooltip", class: {
|
|
42
42
|
'xv-tooltip-wrapper': true,
|
|
43
43
|
[`xv-tooltip-wrapper__block`]: !!this.block,
|
|
44
44
|
[`xv-tooltip-wrapper__dashed`]: !!this.dashed,
|
|
45
|
-
} }, h("slot", { key: '
|
|
45
|
+
} }, h("slot", { key: '3df199308449e2fea26fd538b72f52b3f08e012b' }, h("svg", { key: 'c10dcac4a351f1bcb7feadca1650abbe321526ba', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '6ba8aa00b18f4aa21531362f247db04de95c35ec', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))));
|
|
46
46
|
}
|
|
47
47
|
static get is() { return "xv-tooltip-v2"; }
|
|
48
48
|
static get originalStyleUrls() {
|