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.
Files changed (87) hide show
  1. package/dist/cjs/{index-MLh9SbX2.js → index-CjhPTfz8.js} +41 -14
  2. package/dist/cjs/index-CjhPTfz8.js.map +1 -0
  3. package/dist/cjs/loader.cjs.js +3 -4
  4. package/dist/cjs/loader.cjs.js.map +1 -1
  5. package/dist/cjs/xv-accordion-v2_38.cjs.entry.js +79072 -0
  6. package/dist/cjs/xv-accordion-v2_38.cjs.entry.js.map +1 -0
  7. package/dist/cjs/xv-breadcrumbs-v2.cjs.entry.js +1 -1
  8. package/dist/cjs/xv-webcomponents.cjs.js +4 -5
  9. package/dist/cjs/xv-webcomponents.cjs.js.map +1 -1
  10. package/dist/collection/collection-manifest.json +5 -1
  11. package/dist/collection/components/xv-datepicker/xv-datepicker.css +401 -0
  12. package/dist/collection/components/xv-datepicker/xv-datepicker.js +570 -0
  13. package/dist/collection/components/xv-datepicker/xv-datepicker.js.map +1 -0
  14. package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js +1 -1
  15. package/dist/collection/components/xv-dropdown/xv-dropdown.js +2 -2
  16. package/dist/collection/components/xv-dropdown/xv-dropdown.js.map +1 -1
  17. package/dist/collection/components/xv-file-uploader/xv-file-uploader.js +2 -2
  18. package/dist/collection/components/xv-footer/xv-footer.js +1 -1
  19. package/dist/collection/components/xv-header/xv-header.js +1 -1
  20. package/dist/collection/components/xv-link/xv-link.js +1 -1
  21. package/dist/collection/components/xv-modal/xv-modal.js +1 -1
  22. package/dist/collection/components/xv-notification/xv-notification.css +1 -1
  23. package/dist/collection/components/xv-notification/xv-notification.js +1 -1
  24. package/dist/collection/components/xv-number-input/xv-number-input.js +2 -2
  25. package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js +1 -1
  26. package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.js +1 -1
  27. package/dist/collection/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.js +1 -1
  28. package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js +1 -1
  29. package/dist/collection/components/xv-slider/xv-slider.css +196 -0
  30. package/dist/collection/components/xv-slider/xv-slider.js +259 -0
  31. package/dist/collection/components/xv-slider/xv-slider.js.map +1 -0
  32. package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.js +1 -1
  33. package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.js +1 -1
  34. package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js +1 -1
  35. package/dist/collection/components/xv-table/xv-table.js +1 -1
  36. package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js +1 -1
  37. package/dist/collection/components/xv-tag/xv-tag.js +1 -1
  38. package/dist/collection/components/xv-text-input/xv-text-input.js +2 -2
  39. package/dist/collection/components/xv-textarea/xv-textarea.css +254 -0
  40. package/dist/collection/components/xv-textarea/xv-textarea.js +411 -0
  41. package/dist/collection/components/xv-textarea/xv-textarea.js.map +1 -0
  42. package/dist/collection/components/xv-tile/xv-tile.css +294 -0
  43. package/dist/collection/components/xv-tile/xv-tile.js +264 -0
  44. package/dist/collection/components/xv-tile/xv-tile.js.map +1 -0
  45. package/dist/collection/components/xv-toggle-tip/xv-toggle-tip.js +1 -1
  46. package/dist/collection/components/xv-tooltip/xv-tooltip.js +2 -2
  47. package/dist/esm/{index-DLYJiP99.js → index-BQoQLd_U.js} +41 -15
  48. package/dist/esm/index-BQoQLd_U.js.map +1 -0
  49. package/dist/esm/loader.js +3 -4
  50. package/dist/esm/loader.js.map +1 -1
  51. package/dist/esm/xv-accordion-v2_38.entry.js +79033 -0
  52. package/dist/esm/xv-accordion-v2_38.entry.js.map +1 -0
  53. package/dist/esm/xv-breadcrumbs-v2.entry.js +1 -1
  54. package/dist/esm/xv-webcomponents.js +4 -5
  55. package/dist/esm/xv-webcomponents.js.map +1 -1
  56. package/dist/types/components/xv-datepicker/xv-datepicker.d.ts +69 -0
  57. package/dist/types/components/xv-slider/xv-slider.d.ts +20 -0
  58. package/dist/types/components/xv-textarea/xv-textarea.d.ts +27 -0
  59. package/dist/types/components/xv-tile/xv-tile.d.ts +24 -0
  60. package/dist/types/components.d.ts +344 -0
  61. package/dist/types/stencil-public-runtime.d.ts +1 -1
  62. package/dist/xv-webcomponents/loader.esm.js.map +1 -1
  63. package/dist/xv-webcomponents/p-50fb934d.entry.js +2 -0
  64. package/dist/xv-webcomponents/p-50fb934d.entry.js.map +1 -0
  65. package/dist/xv-webcomponents/p-BQoQLd_U.js +3 -0
  66. package/dist/xv-webcomponents/p-BQoQLd_U.js.map +1 -0
  67. package/dist/xv-webcomponents/{p-851c4716.entry.js → p-a8d785da.entry.js} +2 -2
  68. package/dist/xv-webcomponents/xv-webcomponents.esm.js +1 -1
  69. package/dist/xv-webcomponents/xv-webcomponents.esm.js.map +1 -1
  70. package/package.json +7 -4
  71. package/dist/cjs/app-globals-V2Kpy_OQ.js +0 -8
  72. package/dist/cjs/app-globals-V2Kpy_OQ.js.map +0 -1
  73. package/dist/cjs/index-MLh9SbX2.js.map +0 -1
  74. package/dist/cjs/xv-accordion-v2_34.cjs.entry.js +0 -3542
  75. package/dist/cjs/xv-accordion-v2_34.cjs.entry.js.map +0 -1
  76. package/dist/esm/app-globals-DQuL1Twl.js +0 -6
  77. package/dist/esm/app-globals-DQuL1Twl.js.map +0 -1
  78. package/dist/esm/index-DLYJiP99.js.map +0 -1
  79. package/dist/esm/xv-accordion-v2_34.entry.js +0 -3507
  80. package/dist/esm/xv-accordion-v2_34.entry.js.map +0 -1
  81. package/dist/xv-webcomponents/p-DLYJiP99.js +0 -3
  82. package/dist/xv-webcomponents/p-DLYJiP99.js.map +0 -1
  83. package/dist/xv-webcomponents/p-DQuL1Twl.js +0 -2
  84. package/dist/xv-webcomponents/p-DQuL1Twl.js.map +0 -1
  85. package/dist/xv-webcomponents/p-d96c1b6a.entry.js +0 -2
  86. package/dist/xv-webcomponents/p-d96c1b6a.entry.js.map +0 -1
  87. /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: 'f7132aec590cd675f3597372846e5f2bc748938b' }, h("slot", { key: 'ba008253d0c52036b8e2e2f772c962da0be84255' })));
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: 'd55e1a6bd3573bec454ec5f4d8d9706c6f44ac64' }, h("button", { key: 'a5dccc1e72ed26619dffbebe370994a318fa8c2c', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: '8c34a4660f90e5a7a48652125ab57308c06f605d', name: XV_EXPANDABLE_KEY }), h("div", { key: '01ab808711bd4848fbca87ea357886cfb4a9e318', class: { expandableContent: true, open: this.open } }, h("slot", { key: '6c52826625e7cdfdb8aa117763bd5fcb0fe8bbf6' }))));
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: 'd88d04bc5b45adfab3bb2e447cb9da737f9cff76' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: '59dd3933d2766c9b4a40d716ccfdc086d82846fe', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: 'c13b42d1f39c2154e3ead5985e59b0af0c907e4f', 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: '885d79daf03ac15d90cd823ba81c036d3c51db81', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: '0899c1666521ea2a69e68ee71bcf64657938e36a' })));
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: 'f5b1e071eb6a77ab5996787a57f6c0dcb16e2db5', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: '0ab62204e8ca9ee3be7bf02d9453169551afa320', name: "title" }, !!this.el.title && h("h2", { key: 'd068fa199d52eb6d03f6789c21b9772eeb613277', class: "xv-table-title" }, this.el.title)), h("slot", { key: '6341d71acc3a098d83d2bea92f75ff1401976c38', name: "toolbar" }), h("div", { key: 'ea3c38f9456de2e826a92a95beda1185b5c193da', class: "xv-table" }, h("div", { key: '1c1a95446e4a2f846161d91698e6da37a881fdad', class: "batch-actions" }, h(Fragment, { key: 'fc1a05dba097641e749691bef8a07bfe7941e511' }, h("div", { key: '3d727263feaec24b814649d32490a65030ca4272', class: "batch-actions_content" }, h("slot", { key: '2b03546395c0fb8a26baaa944f3cba9cf6b2e62b', name: "batch" })), h("p", { key: '54e0b63690449260e35cabd6731a01aee4e1a155', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("div", { key: 'f4a9ac9b6639f0dd8ee5154ae1c94c990b7e6a01', class: "xv-table_wrapper" }, h("slot", { key: '295e69ac1e3f4ee20f95e80c05bac87556830fc9' }), h("slot", { key: '666df67a1dfb02d252516f1a41f771b659d9f06d', name: "footer" })), !!this.loading && (h("div", { key: '436c99696fbf79d290f794dbd12b7530c4a6fe88', class: "xv-table_loading" }, h("xv-loader-v2", { key: '6431bdb466cee31d6ac92dd32e74df9f586450b9', size: SIZE_VAR.LG }))))));
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: '5ec34d69de173b64d3a477e4005f27868cde3a5f', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
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: '67eb8b7fb0f2735ffdbad22b136e166d81e8804e', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '946299b4189045b668b971d008d4f06425f45cca', class: "xv-tag_content" }, h("slot", { key: '594a1a18c2566df555415326d45b9753b5c8a13f' })), this.closeable && (h("button", { key: 'b4d5460c42d5269089f27a7a179e3f0e8692f94e', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
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: '55ad3da31cc7a7227a716372cbbf92f7f356e013', class: { disabled: !!this.disabled } }, h("label", { key: 'a6e6c987e8b2df5cd09873f012e434fe67548982', class: "control" }, this.label && h("span", { key: 'f58a081f55384ad7c1b9d98954292a6924489e0e', class: "control_label" }, this.label), h("div", { key: 'f64f313e69d8f4451da7cc68e15606ff7d7c568b', class: {
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: 'b9454f9f6538da073823f5498c529c841ad01619', 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: 'bdc79307498d78a536dcd16f24e093ffe3281cb8', class: "control_input__icons" }, this.loading && h("xv-loader-v2", { key: '81784254eff8c1ba06b7b6c34603f8c568882b86', 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: '04a93133b1b6e9fcdd4251fb3b97b7f12dd10051', 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));
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
+ }