xv-webcomponents 0.1.56 → 0.1.57
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{xv-accordion-v2_38.cjs.entry.js → xv-accordion-v2_40.cjs.entry.js} +79 -26
- package/dist/cjs/{xv-accordion-v2_38.cjs.entry.js.map → xv-accordion-v2_40.cjs.entry.js.map} +1 -1
- package/dist/cjs/xv-webcomponents.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/xv-button/xv-button-v2.css +1 -0
- package/dist/collection/components/xv-header/xv-header.js +3 -3
- package/dist/collection/components/xv-header/xv-header.js.map +1 -1
- package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.css +1 -1
- package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.js +21 -1
- package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.js.map +1 -1
- package/dist/collection/components/xv-pagination/xv-pagination.css +98 -0
- package/dist/collection/components/xv-pagination/xv-pagination.js +150 -0
- package/dist/collection/components/xv-pagination/xv-pagination.js.map +1 -0
- 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-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-text-input/xv-text-input.js +2 -2
- package/dist/collection/components/xv-textarea/xv-textarea.js +2 -2
- package/dist/collection/components/xv-tile/xv-tile.js +2 -2
- package/dist/collection/components/xv-toggle/xv-toggle.css +219 -0
- package/dist/collection/components/xv-toggle/xv-toggle.js +219 -0
- package/dist/collection/components/xv-toggle/xv-toggle.js.map +1 -0
- package/dist/collection/components/xv-toggle-tip/xv-toggle-tip.js +1 -1
- package/dist/collection/components/xv-tooltip/xv-tooltip.js +2 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{xv-accordion-v2_38.entry.js → xv-accordion-v2_40.entry.js} +78 -27
- package/dist/esm/xv-accordion-v2_40.entry.js.map +1 -0
- package/dist/esm/xv-webcomponents.js +1 -1
- package/dist/types/components/xv-overflow-menu/xv-overflow-menu.d.ts +1 -0
- package/dist/types/components/xv-pagination/xv-pagination.d.ts +9 -0
- package/dist/types/components/xv-toggle/xv-toggle.d.ts +16 -0
- package/dist/types/components.d.ts +132 -0
- package/dist/xv-webcomponents/p-a5fcd861.entry.js +2 -0
- package/dist/xv-webcomponents/p-a5fcd861.entry.js.map +1 -0
- package/dist/xv-webcomponents/xv-webcomponents.esm.js +1 -1
- package/package.json +1 -1
- package/dist/esm/xv-accordion-v2_38.entry.js.map +0 -1
- package/dist/xv-webcomponents/p-af174c62.entry.js +0 -2
- package/dist/xv-webcomponents/p-af174c62.entry.js.map +0 -1
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { Host, h } from "@stencil/core";
|
|
2
|
+
export class XvPagination {
|
|
3
|
+
constructor() {
|
|
4
|
+
this.total = 1;
|
|
5
|
+
this.page = 1;
|
|
6
|
+
this.limit = 1;
|
|
7
|
+
this.pages = 1;
|
|
8
|
+
this.variant = 'full';
|
|
9
|
+
this.pageSizeOptions = [10, 25, 50, 100];
|
|
10
|
+
}
|
|
11
|
+
render() {
|
|
12
|
+
return (h(Host, { key: '3edb95f8874889523830239764e3346d51c49a98' }, h("button", { key: '059e085a4d37305f63427b2688cec81325212c1a', class: "btn btn_prev" }), h("ul", { key: 'dbd21c1028ac6ef222ad988813fc407043dfad6e', class: "pagination" }, h("li", { key: 'd19a4dea514e59bae26a532d5da51c16462908da', class: "page-item" }, "1"), h("li", { key: 'b609ea89b772cd38971502d06dd633c9f53e074e', class: "page-item" }, "2"), h("li", { key: 'a5dd3aca47915dd8e3efe648377f005c06b5b3f5', class: "page-item" }, "3")), h("button", { key: '32532136da79a1118924d3685ab36befdba9e3a7', class: "btn btn_next" })));
|
|
13
|
+
}
|
|
14
|
+
static get is() { return "xv-pagination"; }
|
|
15
|
+
static get encapsulation() { return "shadow"; }
|
|
16
|
+
static get originalStyleUrls() {
|
|
17
|
+
return {
|
|
18
|
+
"$": ["xv-pagination.scss"]
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
static get styleUrls() {
|
|
22
|
+
return {
|
|
23
|
+
"$": ["xv-pagination.css"]
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
static get properties() {
|
|
27
|
+
return {
|
|
28
|
+
"total": {
|
|
29
|
+
"type": "number",
|
|
30
|
+
"attribute": "total",
|
|
31
|
+
"mutable": false,
|
|
32
|
+
"complexType": {
|
|
33
|
+
"original": "number",
|
|
34
|
+
"resolved": "number",
|
|
35
|
+
"references": {}
|
|
36
|
+
},
|
|
37
|
+
"required": false,
|
|
38
|
+
"optional": false,
|
|
39
|
+
"docs": {
|
|
40
|
+
"tags": [],
|
|
41
|
+
"text": ""
|
|
42
|
+
},
|
|
43
|
+
"getter": false,
|
|
44
|
+
"setter": false,
|
|
45
|
+
"reflect": false,
|
|
46
|
+
"defaultValue": "1"
|
|
47
|
+
},
|
|
48
|
+
"page": {
|
|
49
|
+
"type": "number",
|
|
50
|
+
"attribute": "page",
|
|
51
|
+
"mutable": false,
|
|
52
|
+
"complexType": {
|
|
53
|
+
"original": "number",
|
|
54
|
+
"resolved": "number",
|
|
55
|
+
"references": {}
|
|
56
|
+
},
|
|
57
|
+
"required": false,
|
|
58
|
+
"optional": false,
|
|
59
|
+
"docs": {
|
|
60
|
+
"tags": [],
|
|
61
|
+
"text": ""
|
|
62
|
+
},
|
|
63
|
+
"getter": false,
|
|
64
|
+
"setter": false,
|
|
65
|
+
"reflect": false,
|
|
66
|
+
"defaultValue": "1"
|
|
67
|
+
},
|
|
68
|
+
"limit": {
|
|
69
|
+
"type": "number",
|
|
70
|
+
"attribute": "limit",
|
|
71
|
+
"mutable": false,
|
|
72
|
+
"complexType": {
|
|
73
|
+
"original": "number",
|
|
74
|
+
"resolved": "number",
|
|
75
|
+
"references": {}
|
|
76
|
+
},
|
|
77
|
+
"required": false,
|
|
78
|
+
"optional": false,
|
|
79
|
+
"docs": {
|
|
80
|
+
"tags": [],
|
|
81
|
+
"text": ""
|
|
82
|
+
},
|
|
83
|
+
"getter": false,
|
|
84
|
+
"setter": false,
|
|
85
|
+
"reflect": false,
|
|
86
|
+
"defaultValue": "1"
|
|
87
|
+
},
|
|
88
|
+
"pages": {
|
|
89
|
+
"type": "number",
|
|
90
|
+
"attribute": "pages",
|
|
91
|
+
"mutable": false,
|
|
92
|
+
"complexType": {
|
|
93
|
+
"original": "number",
|
|
94
|
+
"resolved": "number",
|
|
95
|
+
"references": {}
|
|
96
|
+
},
|
|
97
|
+
"required": false,
|
|
98
|
+
"optional": false,
|
|
99
|
+
"docs": {
|
|
100
|
+
"tags": [],
|
|
101
|
+
"text": ""
|
|
102
|
+
},
|
|
103
|
+
"getter": false,
|
|
104
|
+
"setter": false,
|
|
105
|
+
"reflect": false,
|
|
106
|
+
"defaultValue": "1"
|
|
107
|
+
},
|
|
108
|
+
"variant": {
|
|
109
|
+
"type": "string",
|
|
110
|
+
"attribute": "variant",
|
|
111
|
+
"mutable": false,
|
|
112
|
+
"complexType": {
|
|
113
|
+
"original": "'full' | 'simple' | 'compact'",
|
|
114
|
+
"resolved": "\"compact\" | \"full\" | \"simple\"",
|
|
115
|
+
"references": {}
|
|
116
|
+
},
|
|
117
|
+
"required": false,
|
|
118
|
+
"optional": false,
|
|
119
|
+
"docs": {
|
|
120
|
+
"tags": [],
|
|
121
|
+
"text": ""
|
|
122
|
+
},
|
|
123
|
+
"getter": false,
|
|
124
|
+
"setter": false,
|
|
125
|
+
"reflect": false,
|
|
126
|
+
"defaultValue": "'full'"
|
|
127
|
+
},
|
|
128
|
+
"pageSizeOptions": {
|
|
129
|
+
"type": "unknown",
|
|
130
|
+
"attribute": "page-size-options",
|
|
131
|
+
"mutable": false,
|
|
132
|
+
"complexType": {
|
|
133
|
+
"original": "number[]",
|
|
134
|
+
"resolved": "number[]",
|
|
135
|
+
"references": {}
|
|
136
|
+
},
|
|
137
|
+
"required": false,
|
|
138
|
+
"optional": false,
|
|
139
|
+
"docs": {
|
|
140
|
+
"tags": [],
|
|
141
|
+
"text": ""
|
|
142
|
+
},
|
|
143
|
+
"getter": false,
|
|
144
|
+
"setter": false,
|
|
145
|
+
"defaultValue": "[10, 25, 50, 100]"
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
//# sourceMappingURL=xv-pagination.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"xv-pagination.js","sourceRoot":"","sources":["../../../src/components/xv-pagination/xv-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,YAAY;IALzB;QAMU,UAAK,GAAW,CAAC,CAAC;QAClB,SAAI,GAAW,CAAC,CAAC;QACjB,UAAK,GAAW,CAAC,CAAC;QAClB,UAAK,GAAW,CAAC,CAAC;QAClB,YAAO,GAAkC,MAAM,CAAC;QACd,oBAAe,GAAa,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;KAezF;IAbC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,+DAAQ,KAAK,EAAC,cAAc,GAAG;YAC/B,2DAAI,KAAK,EAAC,YAAY;gBACpB,2DAAI,KAAK,EAAC,WAAW,QAAO;gBAC5B,2DAAI,KAAK,EAAC,WAAW,QAAO;gBAC5B,2DAAI,KAAK,EAAC,WAAW,QAAO,CACzB;YACL,+DAAQ,KAAK,EAAC,cAAc,GAAG,CAC1B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'xv-pagination',\n styleUrl: 'xv-pagination.scss',\n shadow: true,\n})\nexport class XvPagination {\n @Prop() total: number = 1;\n @Prop() page: number = 1;\n @Prop() limit: number = 1;\n @Prop() pages: number = 1;\n @Prop() variant: 'full' | 'simple' | 'compact' = 'full';\n @Prop({ attribute: 'page-size-options' }) pageSizeOptions: number[] = [10, 25, 50, 100];\n\n render() {\n return (\n <Host>\n <button class=\"btn btn_prev\" />\n <ul class=\"pagination\">\n <li class=\"page-item\">1</li>\n <li class=\"page-item\">2</li>\n <li class=\"page-item\">3</li>\n </ul>\n <button class=\"btn btn_next\" />\n </Host>\n );\n }\n}\n"]}
|
|
@@ -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: '447fb9a88c2c3e8b2ae3f62873b983d4ef3816e3', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: '40c4321e87fc2fd97ec611d4687a1a26fff3b3c7', class: "line" }), h("span", { key: 'c9bb988e441739dcaf21b869082afb6ca53905ed', class: "icon" }, h("svg", { key: 'd9664af837bb7e4864a556864c11aa166f4f94e0', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: 'bdc08ad792084531608a96066f33242950953351', 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: '066c79360dbe2a32c62805f232f965b54eca7d7f', class: "label" }, h("slot", { key: '76684c88596b3f71663d8199c633c7c8a54594da' }))));
|
|
9
9
|
}
|
|
10
10
|
static get is() { return "xv-progress-indicator-v2-item"; }
|
|
11
11
|
static get encapsulation() { return "shadow"; }
|
|
@@ -56,7 +56,7 @@ export class XvProgressIndicator {
|
|
|
56
56
|
this.updateChildItems();
|
|
57
57
|
}
|
|
58
58
|
render() {
|
|
59
|
-
return (h(Host, { key: '
|
|
59
|
+
return (h(Host, { key: '7d084ea7e590af7374e3c54900df4c9ca105f383', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: '6d1526b621e870fbe142c61d0ca2c59617fc070c' })));
|
|
60
60
|
}
|
|
61
61
|
static get is() { return "xv-progress-indicator-v2"; }
|
|
62
62
|
static get encapsulation() { return "shadow"; }
|
|
@@ -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: 'eb4f856f16d7b67d71db8fba682c6d6ac2d7f662', class: { disabled: this.disabled, readonly: this.readonly } }, this.label && h("label", { key: 'ba739501faa0172acad61bbd3ea4b9040820f68a', class: "label" }, this.label), h("div", { key: 'b66ab16ee8763e3a08d0e8553ccfffc476db3abf', class: "control" }, h("span", { key: '05a715e0f93c9f3fcb4634cae154fe91a013c18d', class: "control_label" }, this.min), h("input", { key: '5d0b22e7a92f286b8a8c4233d3cfb449aa05e3f1', 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: '4a0dd87311ba37c4c17001768ce392819e0885c3', class: "control_label" }, this.max), !this.notEditable && (h("input", { key: '52d8db3ab751186d016211e83711f03d2d4efbc7', 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: 'd061e948e1adb17f142e302b1026c503c55d2333' }, h("slot", { key: '17b1f30a1335117abbf07119da1c2f2e88ab3936' })));
|
|
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: 'd5c007569c8543416cc877f021371d664d9530b4' }, h("button", { key: '82122649cf697753f574ae4cd13590caf9a71d79', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: 'd21feee4c166b24e4fe6358f9bb7ce9124049733', name: XV_EXPANDABLE_KEY }), h("div", { key: '4fcd4a3d10ac6ef8214596ce90c3e34c27798794', class: { expandableContent: true, open: this.open } }, h("slot", { key: '338aa9364b03e9dff478059a7447f4ae2078974d' }))));
|
|
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: '75be77abc89fffa0d0bc670dc86804e9f8a21797' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: 'c4f48b2d2c62caede31a15d7c33b3b25b037ee96', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: '1fe8cbb6e11598db86869ed47dfc27f45cfad485', 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: '139c2f61cc1c0e3ed8c7c55a7368e9a666858d75', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: '6fe80ce1635908d85140ce04839c0cfb0026e878' })));
|
|
46
46
|
}
|
|
47
47
|
componentWillLoad() {
|
|
48
48
|
this.setInitialAttrs();
|
|
@@ -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: 'f78b672782a096a066452abebbcdbf874b6e2409', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: '31e85f84c17891279db4d2180df9ec3a4bdbbb6e', name: "title" }, !!this.el.title && h("h2", { key: 'd7f3a0b4010c9bc12f275f9b734d4c23a8ed7c6d', class: "xv-table-title" }, this.el.title)), h("slot", { key: '7706448b8c3e0ad5f6e8e4b76894e830e7bc226e', name: "toolbar" }), h("div", { key: 'b337e8e3e50afec9ea6b4bb8144e6eb14392d560', class: "xv-table" }, h("div", { key: '5faa131438d0a72066348f971d5173ceb5be5b7b', class: "batch-actions" }, h(Fragment, { key: '3cda1c57bf8f69cd91895cf60b74f9fe8305f1ab' }, h("div", { key: '02888373924936c7fb158b694b724e98979369ea', class: "batch-actions_content" }, h("slot", { key: '0d68e53ae6f663f5dbdd276520154bf572515d84', name: "batch" })), h("p", { key: '570b30a68b601a2d153a60bd4bde8153edd023f4', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("div", { key: '5e1591c41884ba1133e38a59a92e582d486c6ed5', class: "xv-table_wrapper" }, h("slot", { key: '6d0faf64c9b0e28da1e65169ba214e28396a12a7' }), h("slot", { key: '4fb5105769eaa99d5ef9623f31efc06e44ca3546', name: "footer" })), !!this.loading && (h("div", { key: '4ee0c380f318f7822db18321b7abb9f0c8263f94', class: "xv-table_loading" }, h("xv-loader-v2", { key: '114014c3849142bbb9f7730a4e8c8fc79c77a716', size: SIZE_VAR.LG }))))));
|
|
35
35
|
}
|
|
36
36
|
componentWillLoad() {
|
|
37
37
|
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: 'be1ae93ead867c747fbfea4af828b6585c66cd4a', 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: '325197395b3956e4d80a62aefe6de322841364fd', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '2b40401658f397381578e5f471c63ed830d9823a', class: "xv-tag_content" }, h("slot", { key: '7b7ff5b47a9fe13c16f3643a6bf93ca4ff6b9af4' })), this.closeable && (h("button", { key: 'ab9263218df9324299cdbac5cf050d3f5f4bb062', 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"; }
|
|
@@ -19,13 +19,13 @@ export class XvTextInput {
|
|
|
19
19
|
};
|
|
20
20
|
}
|
|
21
21
|
render() {
|
|
22
|
-
return (h(Host, { key: '
|
|
22
|
+
return (h(Host, { key: '39f30d0f2a7669aaf0052c48ce4dd074bcae6165', class: { disabled: !!this.disabled } }, h("label", { key: 'eef9471119a78be186392b7fecf8a1543b8181bc', class: "control" }, this.label && h("span", { key: '1d07fe45cae8349b4b188ba6eaf461375ef847d6', class: "control_label" }, this.label), h("div", { key: '115ea9fe51ae5d9af3f2405f4ef01356a44a3338', class: {
|
|
23
23
|
'control_input': true,
|
|
24
24
|
readonly: !!this.readonly,
|
|
25
25
|
[this.size]: true,
|
|
26
26
|
error: !!this.error,
|
|
27
27
|
warning: !!this.warning,
|
|
28
|
-
} }, h("input", { key: '
|
|
28
|
+
} }, h("input", { key: 'aa20a6feae322fe3dcdc2e6ca546e696ef1ad2a2', autocomplete: this.autocomplete, type: this.type, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, value: this.value }), h("div", { key: '06d2ab352aa5a1b4f5a5f9e1d0aedb7798aa23b0', class: "control_input__icons" }, this.loading && h("xv-loader-v2", { key: 'b5600395904f2eea653316dc5397dbeb88a88d38', 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))), this.helper && h("p", { key: '6a6b52ecc89388a6027ecfbd5696b3f1d67559a6', class: "message" }, this.helper), typeof this.error === 'string' ? (h("p", { class: "message error" }, this.error)) : typeof this.warning === 'string' ? (h("p", { class: "message warning" }, this.warning)) : null));
|
|
29
29
|
}
|
|
30
30
|
static get is() { return "xv-text-input-v2"; }
|
|
31
31
|
static get encapsulation() { return "shadow"; }
|
|
@@ -20,12 +20,12 @@ export class XvTextarea {
|
|
|
20
20
|
this.value && this.internals.setFormValue(this.value);
|
|
21
21
|
}
|
|
22
22
|
render() {
|
|
23
|
-
return (h(Host, { key: '
|
|
23
|
+
return (h(Host, { key: '32f72f91b2de57a3ffc02da9d2e32667c4fa0729', class: { disabled: !!this.disabled } }, h("label", { key: 'da9f30a76c1cecd3799be4d3b85677e18981ae3c', class: "control" }, (this.label || this.max) && (h("p", { key: '085a9af1ee4397c090efef0ab1d62de29af366e2', class: "control_label" }, h("span", { key: '1326948d124f0ee1b0f217fa97b701b0c8d341aa' }, this.label, this.info && h("xv-tooltip-v2", { key: 'b20a9a18540a7b311f469ad023b90dd2c51b3b6f', message: this.info })), this.max !== undefined && !this.counterHide && (h("span", { key: '0708f101c418d5f5482ed6b83a17b6221730d2b2', class: "control_label__count" }, this.value.length || 0, "/", this.max)))), h("div", { key: '6d86d2da372cba0893240ccbd41241f34e5fe580', class: {
|
|
24
24
|
'control_input': true,
|
|
25
25
|
readonly: !!this.readonly,
|
|
26
26
|
error: this.error !== undefined,
|
|
27
27
|
warning: this.warning !== undefined,
|
|
28
|
-
} }, h("textarea", { key: '
|
|
28
|
+
} }, h("textarea", { key: '7be345c20595e0c604417cf9d1122c6a7d28b029', 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: '650c677171cd607eef5c2f248f9be4b8101b994b', class: "control_input__icons" }, this._renderIcon()))), this.helper && h("p", { key: '80e99599ab50ee83094eed2a850657931d4527ff', class: "message" }, this.helper), typeof this.error === 'string' ? (h("p", { class: "message error" }, this.error)) : typeof this.warning === 'string' ? (h("p", { class: "message warning" }, this.warning)) : null));
|
|
29
29
|
}
|
|
30
30
|
_renderIcon() {
|
|
31
31
|
if (this.loading)
|
|
@@ -28,7 +28,7 @@ export class XvTile {
|
|
|
28
28
|
this.checked = !this.checked;
|
|
29
29
|
}
|
|
30
30
|
render() {
|
|
31
|
-
return (h(Host, { key: '
|
|
31
|
+
return (h(Host, { key: 'edef3ae985144f20a277f808490eeea178b3f073', class: "xv-tile--host" }, h("label", { key: 'b179772961bdb1a19f1b24cd21603eff4faac1ab', class: {
|
|
32
32
|
[this.el.className]: !!this.el.className,
|
|
33
33
|
'xv-tile': true,
|
|
34
34
|
[`xv-tile--variant-${this.variant}`]: !!this.variant,
|
|
@@ -36,7 +36,7 @@ export class XvTile {
|
|
|
36
36
|
'xv-tile--disabled': !!this.disabled,
|
|
37
37
|
'selected': !!this.checked,
|
|
38
38
|
'xv-tile--error': this.error !== undefined,
|
|
39
|
-
} }, h("div", { key: '
|
|
39
|
+
} }, h("div", { key: '9e77fb3f1ef0b58106e492be55f859a90fdd9426', class: "xv-tile_content" }, this.label && h("h4", { key: 'bf8f33ad2b9afd36f2cf385946d73fd5bfeca645', class: "xv-tile_content__title" }, this.label), h("slot", { key: '02150126ba82b55f9ca4d869b3181b76984c0a68' })), this.variant === 'selectable' && (h("div", { key: '5525f72ca1fc3f2fb763f5d941fe116a7599d9e2', class: "xv-tile_control" }, this.multiple ? (h("input", { type: "checkbox", disabled: this.disabled, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })) : (h("input", { type: "radio", disabled: this.disabled, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })))), (this.variant === 'clickable' || this.variant === 'expandable') && (h("div", { key: '2da086ca430a05a22a16b9d9ec5595abb4df7168', class: "xv-tile_footer" }, h("button", { key: '2e65a522d7c85eb96f3c8fa8aafad85647ea5662', class: { 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked } }))), h("div", { key: 'a82e08a05a9eb2c4abe06a43caf80c96aefa6703', class: { 'xv-tile_expandable': true, open: this.checked } }, h("slot", { key: '19bc3a3a87b930f5a551fdb7a2f0db2cadd6a764', name: "expandable" })))));
|
|
40
40
|
}
|
|
41
41
|
static get is() { return "xv-tile"; }
|
|
42
42
|
static get originalStyleUrls() {
|
|
@@ -0,0 +1,219 @@
|
|
|
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
|
+
|
|
96
|
+
:host(.xv-toggle) {
|
|
97
|
+
display: inline-flex;
|
|
98
|
+
flex-direction: column;
|
|
99
|
+
align-items: self-start;
|
|
100
|
+
row-gap: var(--spacing-03, 8px);
|
|
101
|
+
text-align: left;
|
|
102
|
+
font-family: var(--ff-body, Tahoma);
|
|
103
|
+
}
|
|
104
|
+
:host(.xv-toggle) .label {
|
|
105
|
+
color: var(--text-secondary, #515151);
|
|
106
|
+
font-size: var(--fz-sm, 12px);
|
|
107
|
+
line-height: var(--fz-md, 14px);
|
|
108
|
+
letter-spacing: 0.32px;
|
|
109
|
+
}
|
|
110
|
+
:host(.xv-toggle) .control {
|
|
111
|
+
display: inline-flex;
|
|
112
|
+
column-gap: var(--spacing-03, 8px);
|
|
113
|
+
align-items: center;
|
|
114
|
+
cursor: pointer;
|
|
115
|
+
color: var(--text-primary, #333);
|
|
116
|
+
font-size: var(--fz-md, 14px);
|
|
117
|
+
font-style: normal;
|
|
118
|
+
font-weight: 400;
|
|
119
|
+
line-height: var(--fz-lg, 16px);
|
|
120
|
+
letter-spacing: 0.16px;
|
|
121
|
+
}
|
|
122
|
+
:host(.xv-toggle) .control ::slotted([slot=before]),
|
|
123
|
+
:host(.xv-toggle) .control ::slotted([slot=after]) {
|
|
124
|
+
margin: 0 !important;
|
|
125
|
+
padding: 0 !important;
|
|
126
|
+
user-select: none;
|
|
127
|
+
}
|
|
128
|
+
:host(.xv-toggle) .control_input {
|
|
129
|
+
display: inline-flex;
|
|
130
|
+
position: relative;
|
|
131
|
+
width: 48px;
|
|
132
|
+
height: 24px;
|
|
133
|
+
}
|
|
134
|
+
:host(.xv-toggle) .control_input .toggle {
|
|
135
|
+
display: inline-block;
|
|
136
|
+
position: relative;
|
|
137
|
+
width: inherit;
|
|
138
|
+
height: inherit;
|
|
139
|
+
background-color: var(--border-strong-01, #8B8B8B);
|
|
140
|
+
border-radius: 100px;
|
|
141
|
+
outline: 2px solid transparent;
|
|
142
|
+
transition: background-color 0.2s, outline-color 0.2s;
|
|
143
|
+
}
|
|
144
|
+
:host(.xv-toggle) .control_input .toggle::before {
|
|
145
|
+
display: inline-flex;
|
|
146
|
+
align-items: center;
|
|
147
|
+
justify-content: center;
|
|
148
|
+
content: "";
|
|
149
|
+
font-size: 70%;
|
|
150
|
+
color: transparent;
|
|
151
|
+
position: absolute;
|
|
152
|
+
height: calc(100% - 4px);
|
|
153
|
+
aspect-ratio: 1;
|
|
154
|
+
top: 2px;
|
|
155
|
+
left: 2px;
|
|
156
|
+
background-color: var(--icon-on-color, white);
|
|
157
|
+
border-radius: 50%;
|
|
158
|
+
transition: left 0.2s, transform 0.2s;
|
|
159
|
+
}
|
|
160
|
+
:host(.xv-toggle) .control_input input[type=checkbox] {
|
|
161
|
+
position: absolute;
|
|
162
|
+
opacity: 0;
|
|
163
|
+
margin: 0;
|
|
164
|
+
padding: 0;
|
|
165
|
+
width: 100%;
|
|
166
|
+
height: 100%;
|
|
167
|
+
}
|
|
168
|
+
:host(.xv-toggle) .control_input input[type=checkbox]:checked + .toggle {
|
|
169
|
+
background-color: var(--support-success, #97BF0D);
|
|
170
|
+
}
|
|
171
|
+
:host(.xv-toggle) .control_input input[type=checkbox]:checked + .toggle::before {
|
|
172
|
+
color: var(--support-success, #97BF0D);
|
|
173
|
+
left: calc(100% - 2px);
|
|
174
|
+
transform: translateX(-100%);
|
|
175
|
+
}
|
|
176
|
+
:host(.xv-toggle) .control_input input[type=checkbox]:active:not(:disabled) + .toggle, :host(.xv-toggle) .control_input input[type=checkbox]:focus:not(:disabled) + .toggle {
|
|
177
|
+
outline-color: var(--focus);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
:host(.xv-toggle[size=xs]) .control_input {
|
|
181
|
+
width: 24px;
|
|
182
|
+
height: 12px;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
:host(.xv-toggle[size=sm]) .control_input {
|
|
186
|
+
width: 32px;
|
|
187
|
+
height: 16px;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
:host(.xv-toggle[size=lg]) .control_input {
|
|
191
|
+
width: 56px;
|
|
192
|
+
height: 28px;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
:host(.xv-toggle[size=xl]) .control_input {
|
|
196
|
+
width: 64px;
|
|
197
|
+
height: 32px;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
:host(.block) {
|
|
201
|
+
display: flex;
|
|
202
|
+
align-items: stretch;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
:host(.disabled) .label,
|
|
206
|
+
:host(.disabled) .control,
|
|
207
|
+
:host(.readonly) .label,
|
|
208
|
+
:host(.readonly) .control {
|
|
209
|
+
cursor: not-allowed;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
:host(.disabled) .control_input input[type=checkbox]:checked + .toggle,
|
|
213
|
+
:host(.disabled) .control_input .toggle {
|
|
214
|
+
background-color: var(--button-disabled, #8B8B8B);
|
|
215
|
+
}
|
|
216
|
+
:host(.disabled) .control_input input[type=checkbox]:checked + .toggle::before,
|
|
217
|
+
:host(.disabled) .control_input .toggle::before {
|
|
218
|
+
background-color: var(--text-on-color-disabled, white);
|
|
219
|
+
}
|