xv-webcomponents 0.1.46 → 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 +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-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.js +1 -1
- 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.js +2 -2
- package/dist/collection/components/xv-footer/xv-footer.js +1 -1
- package/dist/collection/components/xv-header/xv-header.js +1 -1
- package/dist/collection/components/xv-link/xv-link.js +1 -1
- package/dist/collection/components/xv-modal/xv-modal.js +1 -1
- package/dist/collection/components/xv-notification/xv-notification.css +1 -1
- package/dist/collection/components/xv-notification/xv-notification.js +1 -1
- package/dist/collection/components/xv-number-input/xv-number-input.js +2 -2
- package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js +1 -1
- package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.js +1 -1
- package/dist/collection/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.js +1 -1
- package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js +1 -1
- package/dist/collection/components/xv-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.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.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.js +1 -1
- package/dist/collection/components/xv-tooltip/xv-tooltip.js +2 -2
- 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 +1 -1
- package/dist/esm/xv-webcomponents.js +4 -5
- package/dist/esm/xv-webcomponents.js.map +1 -1
- package/dist/types/components/xv-datepicker/xv-datepicker.d.ts +69 -0
- package/dist/types/components/xv-slider/xv-slider.d.ts +20 -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.d.ts +344 -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-851c4716.entry.js → p-a8d785da.entry.js} +2 -2
- 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 -3542
- 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 -3507
- package/dist/esm/xv-accordion-v2_34.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
- package/dist/xv-webcomponents/p-d96c1b6a.entry.js +0 -2
- package/dist/xv-webcomponents/p-d96c1b6a.entry.js.map +0 -1
- /package/dist/xv-webcomponents/{p-851c4716.entry.js.map → p-a8d785da.entry.js.map} +0 -0
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
import { Host, h } from "@stencil/core";
|
|
2
|
+
export class XvSlider {
|
|
3
|
+
constructor() {
|
|
4
|
+
this.label = '';
|
|
5
|
+
this.name = 'range';
|
|
6
|
+
this.min = 0;
|
|
7
|
+
this.max = 100;
|
|
8
|
+
this.value = 0;
|
|
9
|
+
this.step = 1;
|
|
10
|
+
this.disabled = false;
|
|
11
|
+
this.readonly = false;
|
|
12
|
+
this.handleInput = (e) => {
|
|
13
|
+
if (this.readonly || this.disabled)
|
|
14
|
+
return;
|
|
15
|
+
this.setValue(Number(e.target.value));
|
|
16
|
+
};
|
|
17
|
+
this.handleNumberInput = (e) => {
|
|
18
|
+
const val = Number(e.target.value);
|
|
19
|
+
if (!isNaN(val) && val >= this.min && val <= this.max)
|
|
20
|
+
this.setValue(val);
|
|
21
|
+
};
|
|
22
|
+
this.handleNumberBlur = (e) => {
|
|
23
|
+
var _a;
|
|
24
|
+
const input = e.target;
|
|
25
|
+
const val = Number(input.value);
|
|
26
|
+
if (val !== this.value) {
|
|
27
|
+
input.value = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) || '';
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
setValue(value) {
|
|
32
|
+
this.value = value;
|
|
33
|
+
this.valueChange.emit(value);
|
|
34
|
+
this.internals.setFormValue((value === null || value === void 0 ? void 0 : value.toString()) || '');
|
|
35
|
+
}
|
|
36
|
+
componentWillLoad() {
|
|
37
|
+
if (!this.value && this.min)
|
|
38
|
+
this.setValue(this.min);
|
|
39
|
+
}
|
|
40
|
+
render() {
|
|
41
|
+
return (h(Host, { key: 'e26067db759d4d7b6b5937e006ae108dc1052aa1', class: { disabled: this.disabled, readonly: this.readonly } }, this.label && h("label", { key: '28c63084c306bc13a9d9c437ab078007d200cf87', class: "label" }, this.label), h("div", { key: 'a936e3da1e4a9746aed359d6a4a1a4cb20ac111c', class: "control" }, h("span", { key: 'a0b17e87acd277553b7ca9e2f0ab196fe4b883b3', class: "control_label" }, this.min), h("input", { key: '19f52dc40462bd506a210e63f8ac51668bd47bfd', 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: 'a97b78b26349d1531a1ca1bc2284fdd3ba3e3b44', class: "control_label" }, this.max), !this.notEditable && (h("input", { key: '183b9d2659d2961b32ccb777a0d22757764532cb', 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
|
+
}
|
|
43
|
+
static get is() { return "xv-slider-v2"; }
|
|
44
|
+
static get encapsulation() { return "shadow"; }
|
|
45
|
+
static get formAssociated() { return true; }
|
|
46
|
+
static get originalStyleUrls() {
|
|
47
|
+
return {
|
|
48
|
+
"$": ["xv-slider.scss"]
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
static get styleUrls() {
|
|
52
|
+
return {
|
|
53
|
+
"$": ["xv-slider.css"]
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
static get properties() {
|
|
57
|
+
return {
|
|
58
|
+
"label": {
|
|
59
|
+
"type": "string",
|
|
60
|
+
"attribute": "label",
|
|
61
|
+
"mutable": false,
|
|
62
|
+
"complexType": {
|
|
63
|
+
"original": "string",
|
|
64
|
+
"resolved": "string",
|
|
65
|
+
"references": {}
|
|
66
|
+
},
|
|
67
|
+
"required": false,
|
|
68
|
+
"optional": false,
|
|
69
|
+
"docs": {
|
|
70
|
+
"tags": [],
|
|
71
|
+
"text": ""
|
|
72
|
+
},
|
|
73
|
+
"getter": false,
|
|
74
|
+
"setter": false,
|
|
75
|
+
"reflect": false,
|
|
76
|
+
"defaultValue": "''"
|
|
77
|
+
},
|
|
78
|
+
"name": {
|
|
79
|
+
"type": "string",
|
|
80
|
+
"attribute": "name",
|
|
81
|
+
"mutable": false,
|
|
82
|
+
"complexType": {
|
|
83
|
+
"original": "string",
|
|
84
|
+
"resolved": "string",
|
|
85
|
+
"references": {}
|
|
86
|
+
},
|
|
87
|
+
"required": false,
|
|
88
|
+
"optional": false,
|
|
89
|
+
"docs": {
|
|
90
|
+
"tags": [],
|
|
91
|
+
"text": ""
|
|
92
|
+
},
|
|
93
|
+
"getter": false,
|
|
94
|
+
"setter": false,
|
|
95
|
+
"reflect": false,
|
|
96
|
+
"defaultValue": "'range'"
|
|
97
|
+
},
|
|
98
|
+
"min": {
|
|
99
|
+
"type": "number",
|
|
100
|
+
"attribute": "min",
|
|
101
|
+
"mutable": false,
|
|
102
|
+
"complexType": {
|
|
103
|
+
"original": "number",
|
|
104
|
+
"resolved": "number",
|
|
105
|
+
"references": {}
|
|
106
|
+
},
|
|
107
|
+
"required": false,
|
|
108
|
+
"optional": false,
|
|
109
|
+
"docs": {
|
|
110
|
+
"tags": [],
|
|
111
|
+
"text": ""
|
|
112
|
+
},
|
|
113
|
+
"getter": false,
|
|
114
|
+
"setter": false,
|
|
115
|
+
"reflect": false,
|
|
116
|
+
"defaultValue": "0"
|
|
117
|
+
},
|
|
118
|
+
"max": {
|
|
119
|
+
"type": "number",
|
|
120
|
+
"attribute": "max",
|
|
121
|
+
"mutable": false,
|
|
122
|
+
"complexType": {
|
|
123
|
+
"original": "number",
|
|
124
|
+
"resolved": "number",
|
|
125
|
+
"references": {}
|
|
126
|
+
},
|
|
127
|
+
"required": false,
|
|
128
|
+
"optional": false,
|
|
129
|
+
"docs": {
|
|
130
|
+
"tags": [],
|
|
131
|
+
"text": ""
|
|
132
|
+
},
|
|
133
|
+
"getter": false,
|
|
134
|
+
"setter": false,
|
|
135
|
+
"reflect": false,
|
|
136
|
+
"defaultValue": "100"
|
|
137
|
+
},
|
|
138
|
+
"value": {
|
|
139
|
+
"type": "number",
|
|
140
|
+
"attribute": "value",
|
|
141
|
+
"mutable": true,
|
|
142
|
+
"complexType": {
|
|
143
|
+
"original": "number",
|
|
144
|
+
"resolved": "number",
|
|
145
|
+
"references": {}
|
|
146
|
+
},
|
|
147
|
+
"required": false,
|
|
148
|
+
"optional": false,
|
|
149
|
+
"docs": {
|
|
150
|
+
"tags": [],
|
|
151
|
+
"text": ""
|
|
152
|
+
},
|
|
153
|
+
"getter": false,
|
|
154
|
+
"setter": false,
|
|
155
|
+
"reflect": false,
|
|
156
|
+
"defaultValue": "0"
|
|
157
|
+
},
|
|
158
|
+
"step": {
|
|
159
|
+
"type": "number",
|
|
160
|
+
"attribute": "step",
|
|
161
|
+
"mutable": false,
|
|
162
|
+
"complexType": {
|
|
163
|
+
"original": "number",
|
|
164
|
+
"resolved": "number",
|
|
165
|
+
"references": {}
|
|
166
|
+
},
|
|
167
|
+
"required": false,
|
|
168
|
+
"optional": false,
|
|
169
|
+
"docs": {
|
|
170
|
+
"tags": [],
|
|
171
|
+
"text": ""
|
|
172
|
+
},
|
|
173
|
+
"getter": false,
|
|
174
|
+
"setter": false,
|
|
175
|
+
"reflect": false,
|
|
176
|
+
"defaultValue": "1"
|
|
177
|
+
},
|
|
178
|
+
"disabled": {
|
|
179
|
+
"type": "boolean",
|
|
180
|
+
"attribute": "disabled",
|
|
181
|
+
"mutable": false,
|
|
182
|
+
"complexType": {
|
|
183
|
+
"original": "boolean",
|
|
184
|
+
"resolved": "boolean",
|
|
185
|
+
"references": {}
|
|
186
|
+
},
|
|
187
|
+
"required": false,
|
|
188
|
+
"optional": false,
|
|
189
|
+
"docs": {
|
|
190
|
+
"tags": [],
|
|
191
|
+
"text": ""
|
|
192
|
+
},
|
|
193
|
+
"getter": false,
|
|
194
|
+
"setter": false,
|
|
195
|
+
"reflect": false,
|
|
196
|
+
"defaultValue": "false"
|
|
197
|
+
},
|
|
198
|
+
"readonly": {
|
|
199
|
+
"type": "boolean",
|
|
200
|
+
"attribute": "readonly",
|
|
201
|
+
"mutable": false,
|
|
202
|
+
"complexType": {
|
|
203
|
+
"original": "boolean",
|
|
204
|
+
"resolved": "boolean",
|
|
205
|
+
"references": {}
|
|
206
|
+
},
|
|
207
|
+
"required": false,
|
|
208
|
+
"optional": false,
|
|
209
|
+
"docs": {
|
|
210
|
+
"tags": [],
|
|
211
|
+
"text": ""
|
|
212
|
+
},
|
|
213
|
+
"getter": false,
|
|
214
|
+
"setter": false,
|
|
215
|
+
"reflect": false,
|
|
216
|
+
"defaultValue": "false"
|
|
217
|
+
},
|
|
218
|
+
"notEditable": {
|
|
219
|
+
"type": "boolean",
|
|
220
|
+
"attribute": "not-editable",
|
|
221
|
+
"mutable": false,
|
|
222
|
+
"complexType": {
|
|
223
|
+
"original": "boolean",
|
|
224
|
+
"resolved": "boolean",
|
|
225
|
+
"references": {}
|
|
226
|
+
},
|
|
227
|
+
"required": false,
|
|
228
|
+
"optional": true,
|
|
229
|
+
"docs": {
|
|
230
|
+
"tags": [],
|
|
231
|
+
"text": ""
|
|
232
|
+
},
|
|
233
|
+
"getter": false,
|
|
234
|
+
"setter": false,
|
|
235
|
+
"reflect": false
|
|
236
|
+
}
|
|
237
|
+
};
|
|
238
|
+
}
|
|
239
|
+
static get events() {
|
|
240
|
+
return [{
|
|
241
|
+
"method": "valueChange",
|
|
242
|
+
"name": "valueChange",
|
|
243
|
+
"bubbles": true,
|
|
244
|
+
"cancelable": true,
|
|
245
|
+
"composed": true,
|
|
246
|
+
"docs": {
|
|
247
|
+
"tags": [],
|
|
248
|
+
"text": ""
|
|
249
|
+
},
|
|
250
|
+
"complexType": {
|
|
251
|
+
"original": "number",
|
|
252
|
+
"resolved": "number",
|
|
253
|
+
"references": {}
|
|
254
|
+
}
|
|
255
|
+
}];
|
|
256
|
+
}
|
|
257
|
+
static get attachInternalsMemberName() { return "internals"; }
|
|
258
|
+
}
|
|
259
|
+
//# sourceMappingURL=xv-slider.js.map
|
|
@@ -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"]}
|
|
@@ -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"; }
|
|
@@ -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);
|
|
@@ -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();
|
|
@@ -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();
|
|
@@ -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"; }
|
|
@@ -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: '9cb94f4c7aa2266e5ee0ccdbfdfa46864950d20c', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '425d8151ab21d436b11905018b60cf9fbb73bd4a', class: "xv-tag_content" }, h("slot", { key: '378c749949096c909478d7aae2cc07787134c62f' })), this.closeable && (h("button", { key: 'c00f9c254ef2e31965c3ae85874c71b354189e18', 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: '7a0e9e589aff2f41a3a0d887f7d6b7b89ff34ede', class: { disabled: !!this.disabled } }, h("label", { key: '6c59370778abcbe123497af3b113a51e640834d7', class: "control" }, this.label && h("span", { key: 'cf429799147f423f825bd0c4cc2977a6711717f6', class: "control_label" }, this.label), h("div", { key: 'ea0b6dad2c22ee59461176df65931bf19d004a7e', 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: '1a3d07c3fb9abfc00b7652c342d0724f3cad4892', 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: 'dceafc8d5a1d1fa8a7a0cd8130246579432f3bc7', class: "control_input__icons" }, this.loading && h("xv-loader-v2", { key: '9791217db5882d2463454b5dca25e3bf4f0215c4', 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: '22b59a179548e6690a1d97b2cc4bfce4bef1fc74', 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"; }
|
|
@@ -0,0 +1,254 @@
|
|
|
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 {
|
|
97
|
+
display: inline-block;
|
|
98
|
+
text-align: left;
|
|
99
|
+
}
|
|
100
|
+
:host .control_label {
|
|
101
|
+
display: flex;
|
|
102
|
+
justify-content: space-between;
|
|
103
|
+
column-gap: var(--spacing-03);
|
|
104
|
+
margin: 0 0 var(--spacing-03);
|
|
105
|
+
color: var(--text-secondary, #515151);
|
|
106
|
+
font-family: var(--ff-body, Tahoma);
|
|
107
|
+
font-size: var(--fz-sm, 12px);
|
|
108
|
+
font-style: normal;
|
|
109
|
+
font-weight: 700;
|
|
110
|
+
line-height: var(--fz-md);
|
|
111
|
+
letter-spacing: 0.32px;
|
|
112
|
+
}
|
|
113
|
+
:host .control_label__count {
|
|
114
|
+
font-weight: 400;
|
|
115
|
+
}
|
|
116
|
+
:host .control_label [role=tooltip] {
|
|
117
|
+
margin-left: var(--spacing-03);
|
|
118
|
+
}
|
|
119
|
+
:host .control_input {
|
|
120
|
+
display: flex;
|
|
121
|
+
position: relative;
|
|
122
|
+
border: 1px solid var(--border-subtle-01);
|
|
123
|
+
font-size: var(--fz-md, 14px);
|
|
124
|
+
outline: 2px solid transparent;
|
|
125
|
+
background-color: transparent;
|
|
126
|
+
border-radius: 3px;
|
|
127
|
+
transition: 250ms ease-in-out border-color, 250ms ease-in-out outline-color;
|
|
128
|
+
}
|
|
129
|
+
:host .control_input:hover {
|
|
130
|
+
border-color: var(--border-subtle-selected-01);
|
|
131
|
+
}
|
|
132
|
+
:host .control_input:focus-within {
|
|
133
|
+
outline-color: var(--focus);
|
|
134
|
+
}
|
|
135
|
+
:host .control_input.error {
|
|
136
|
+
outline-color: var(--support-error);
|
|
137
|
+
}
|
|
138
|
+
:host .control_input.readonly {
|
|
139
|
+
border-radius: 0;
|
|
140
|
+
border-top-width: 0;
|
|
141
|
+
border-left-width: 0;
|
|
142
|
+
border-right-width: 0;
|
|
143
|
+
outline-color: transparent;
|
|
144
|
+
}
|
|
145
|
+
:host .control_input.error textarea, :host .control_input.warning textarea {
|
|
146
|
+
padding-inline-end: calc(var(--spacing-05, 16px) + 16px);
|
|
147
|
+
}
|
|
148
|
+
:host .control_input textarea {
|
|
149
|
+
flex: 1;
|
|
150
|
+
border: none;
|
|
151
|
+
outline: none;
|
|
152
|
+
margin: 0;
|
|
153
|
+
font-family: inherit;
|
|
154
|
+
background-color: transparent;
|
|
155
|
+
padding-block: var(--spacing-05);
|
|
156
|
+
padding-inline: var(--spacing-05);
|
|
157
|
+
box-sizing: border-box;
|
|
158
|
+
color: var(--text-primary);
|
|
159
|
+
min-width: 20px;
|
|
160
|
+
font-size: inherit;
|
|
161
|
+
font-style: normal;
|
|
162
|
+
font-weight: 400;
|
|
163
|
+
letter-spacing: 0.16px;
|
|
164
|
+
}
|
|
165
|
+
:host .control_input textarea.no-resize {
|
|
166
|
+
resize: none;
|
|
167
|
+
}
|
|
168
|
+
:host .control_input__icons {
|
|
169
|
+
position: absolute;
|
|
170
|
+
right: var(--spacing-05);
|
|
171
|
+
top: var(--spacing-05);
|
|
172
|
+
display: inline-flex;
|
|
173
|
+
align-items: stretch;
|
|
174
|
+
column-gap: 2px;
|
|
175
|
+
}
|
|
176
|
+
:host .control_input__icons .status-icon {
|
|
177
|
+
display: inline-flex;
|
|
178
|
+
align-items: center;
|
|
179
|
+
align-self: center;
|
|
180
|
+
font-size: 16px;
|
|
181
|
+
line-height: 1;
|
|
182
|
+
}
|
|
183
|
+
:host .control_input__icons .status-icon.error {
|
|
184
|
+
background-color: var(--support-error);
|
|
185
|
+
color: white;
|
|
186
|
+
width: 16px;
|
|
187
|
+
height: 16px;
|
|
188
|
+
border-radius: 8px;
|
|
189
|
+
font-size: 12px;
|
|
190
|
+
font-weight: bold;
|
|
191
|
+
align-items: center;
|
|
192
|
+
justify-content: center;
|
|
193
|
+
}
|
|
194
|
+
:host .control_input__icons .status-icon.warning {
|
|
195
|
+
color: var(--support-warning);
|
|
196
|
+
}
|
|
197
|
+
:host .message {
|
|
198
|
+
margin: var(--spacing-02) 0 0;
|
|
199
|
+
color: var(--text-helper, #646464);
|
|
200
|
+
font-size: var(--fz-sm, 12px);
|
|
201
|
+
font-style: normal;
|
|
202
|
+
font-weight: 400;
|
|
203
|
+
line-height: var(--fz-md, 16px);
|
|
204
|
+
letter-spacing: 0.32px;
|
|
205
|
+
}
|
|
206
|
+
:host .message.error {
|
|
207
|
+
color: var(--text-error);
|
|
208
|
+
}
|
|
209
|
+
:host .message.warning {
|
|
210
|
+
color: var(--text-secondary, #515151);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
:host(.disabled) {
|
|
214
|
+
cursor: not-allowed;
|
|
215
|
+
}
|
|
216
|
+
:host(.disabled) .control_label,
|
|
217
|
+
:host(.disabled) .control_input textarea,
|
|
218
|
+
:host(.disabled) .control_input textarea::placeholder,
|
|
219
|
+
:host(.disabled) .message:not(.error) {
|
|
220
|
+
color: var(--text-disabled);
|
|
221
|
+
cursor: not-allowed;
|
|
222
|
+
}
|
|
223
|
+
:host(.disabled) .control_input__icons,
|
|
224
|
+
:host(.disabled) .message.error {
|
|
225
|
+
opacity: 0.5;
|
|
226
|
+
cursor: not-allowed;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
:host([block]) {
|
|
230
|
+
display: block;
|
|
231
|
+
}
|
|
232
|
+
:host([block]) .control_input textarea {
|
|
233
|
+
width: 100%;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
:host([size=xs]) .control_input textarea {
|
|
237
|
+
padding-block: var(--spacing-03);
|
|
238
|
+
font-size: 0.8em;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
:host([size=sm]) .control_input textarea {
|
|
242
|
+
padding-block: var(--spacing-04);
|
|
243
|
+
font-size: 0.9em;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
:host([size=lg]) .control_input textarea {
|
|
247
|
+
padding-block: var(--spacing-06);
|
|
248
|
+
font-size: 1.1em;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
:host([size=xl]) .control_input textarea {
|
|
252
|
+
padding-block: var(--spacing-07);
|
|
253
|
+
font-size: 1.2em;
|
|
254
|
+
}
|