xv-webcomponents 0.1.28 → 0.1.29
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_27.cjs.entry.js → xv-accordion-v2_28.cjs.entry.js} +105 -17
- package/dist/cjs/xv-accordion-v2_28.cjs.entry.js.map +1 -0
- package/dist/cjs/xv-webcomponents.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/xv-button/xv-button.js +34 -8
- package/dist/collection/components/xv-button/xv-button.js.map +1 -1
- package/dist/collection/components/xv-dropdown/_vars.js +1 -1
- package/dist/collection/components/xv-dropdown/_vars.js.map +1 -1
- package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js +8 -6
- package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js.map +1 -1
- package/dist/collection/components/xv-dropdown/xv-dropdown.js +61 -7
- package/dist/collection/components/xv-dropdown/xv-dropdown.js.map +1 -1
- package/dist/collection/components/xv-text-input/_vars.js +7 -0
- package/dist/collection/components/xv-text-input/_vars.js.map +1 -0
- package/dist/collection/components/xv-text-input/xv-text-input.css +122 -0
- package/dist/collection/components/xv-text-input/xv-text-input.js +248 -0
- package/dist/collection/components/xv-text-input/xv-text-input.js.map +1 -0
- package/dist/collection/components/xv-tooltip/xv-tooltip.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{xv-accordion-v2_27.entry.js → xv-accordion-v2_28.entry.js} +105 -18
- package/dist/esm/xv-accordion-v2_28.entry.js.map +1 -0
- package/dist/esm/xv-webcomponents.js +1 -1
- package/dist/types/components/xv-button/xv-button.d.ts +3 -1
- package/dist/types/components/xv-dropdown/_vars.d.ts +1 -0
- package/dist/types/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.d.ts +1 -0
- package/dist/types/components/xv-dropdown/xv-dropdown.d.ts +4 -0
- package/dist/types/components/xv-text-input/_vars.d.ts +5 -0
- package/dist/types/components/xv-text-input/xv-text-input.d.ts +24 -0
- package/dist/types/components.d.ts +73 -2
- package/dist/xv-webcomponents/p-cc83f7ea.entry.js +2 -0
- package/dist/xv-webcomponents/p-cc83f7ea.entry.js.map +1 -0
- package/dist/xv-webcomponents/xv-webcomponents.esm.js +1 -1
- package/dist/xv-webcomponents/xv-webcomponents.esm.js.map +1 -1
- package/package.json +1 -1
- package/dist/cjs/xv-accordion-v2_27.cjs.entry.js.map +0 -1
- package/dist/esm/xv-accordion-v2_27.entry.js.map +0 -1
- package/dist/xv-webcomponents/p-07dfeba3.entry.js +0 -2
- package/dist/xv-webcomponents/p-07dfeba3.entry.js.map +0 -1
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
|
-
import { uidGenerator } from "../../../utils/utils";
|
|
3
2
|
/**
|
|
4
3
|
* xv-dropdown-item — custom dropdown list item
|
|
5
4
|
* if you want to create new dropdown list item you need to extend current class properties and
|
|
@@ -9,13 +8,12 @@ import { uidGenerator } from "../../../utils/utils";
|
|
|
9
8
|
export class XvDropdownItem {
|
|
10
9
|
constructor() {
|
|
11
10
|
this.disabled = false;
|
|
12
|
-
this.value =
|
|
11
|
+
this.value = '';
|
|
13
12
|
this.selected = false;
|
|
14
13
|
}
|
|
15
14
|
handleClick() {
|
|
16
15
|
if (this.disabled)
|
|
17
16
|
return;
|
|
18
|
-
// this.selected = !this.selected;
|
|
19
17
|
this.itemSelected.emit({
|
|
20
18
|
selected: !this.selected,
|
|
21
19
|
value: this.value,
|
|
@@ -23,7 +21,11 @@ export class XvDropdownItem {
|
|
|
23
21
|
});
|
|
24
22
|
}
|
|
25
23
|
render() {
|
|
26
|
-
return (h(Host, { key: '
|
|
24
|
+
return (h(Host, { key: '5f53db0c93d6268bdbcf67cac0fdb4f0e81348d8', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, h("slot", { key: 'b19170a4eae7ee4580d9b486fc271766c304148f' }), this.selected && h("span", { key: 'c3abf41a488cf964fbc854d80ee59b7a111b3147', class: "checkmark" })));
|
|
25
|
+
}
|
|
26
|
+
componentWillLoad() {
|
|
27
|
+
if (!this.value)
|
|
28
|
+
this.value = this.el.innerText;
|
|
27
29
|
}
|
|
28
30
|
static get is() { return "xv-dropdown-v2-item"; }
|
|
29
31
|
static get encapsulation() { return "shadow"; }
|
|
@@ -61,7 +63,7 @@ export class XvDropdownItem {
|
|
|
61
63
|
},
|
|
62
64
|
"value": {
|
|
63
65
|
"type": "any",
|
|
64
|
-
"mutable":
|
|
66
|
+
"mutable": true,
|
|
65
67
|
"complexType": {
|
|
66
68
|
"original": "DropdownItemData['value']",
|
|
67
69
|
"resolved": "number | string",
|
|
@@ -83,7 +85,7 @@ export class XvDropdownItem {
|
|
|
83
85
|
"setter": false,
|
|
84
86
|
"attribute": "value",
|
|
85
87
|
"reflect": true,
|
|
86
|
-
"defaultValue": "
|
|
88
|
+
"defaultValue": "''"
|
|
87
89
|
},
|
|
88
90
|
"selected": {
|
|
89
91
|
"type": "boolean",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xv-dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"xv-dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAG/F;;;;;GAKG;AAMH,MAAM,OAAO,cAAc;IAL3B;QAOU,aAAQ,GAAY,KAAK,CAAC;QACM,UAAK,GAA8B,EAAE,CAAC;QACtC,aAAQ,GAAiC,KAAK,CAAC;KA4BxF;IAxBC,WAAW;QACT,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;YACxB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,SAAS;SACxB,CAAC,CAAC;IACL,CAAC;IAGD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,kBAAkB,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK;YAClG,8DAAa;YAEZ,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,WAAW,GAAG,CACvC,CACR,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;IAClD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Event, EventEmitter, Listen, Prop, Element } from '@stencil/core';\nimport { DropdownItemData } from '../_vars';\n\n/**\n * xv-dropdown-item — custom dropdown list item\n * if you want to create new dropdown list item you need to extend current class properties and\n * events\n * should be created and emitted 'itemSelected' event\n */\n@Component({\n tag: 'xv-dropdown-v2-item',\n styleUrl: 'xv-dropdown-item.scss',\n shadow: true,\n})\nexport class XvDropdownItem {\n @Element() el: HTMLElement;\n @Prop() disabled: boolean = false;\n @Prop({ reflect: true, mutable: true }) value: DropdownItemData['value'] = '';\n @Prop({ reflect: true, mutable: true }) selected: DropdownItemData['selected'] = false;\n @Event() itemSelected: EventEmitter<DropdownItemData>;\n\n @Listen('click')\n handleClick() {\n if (this.disabled) return;\n\n this.itemSelected.emit({\n selected: !this.selected,\n value: this.value,\n text: this.el.innerText\n });\n }\n\n\n render() {\n return (\n <Host class=\"xv-dropdown-item\" value={this.value} role=\"option\" tabindex={this.disabled ? -1 : false}>\n <slot></slot>\n\n {this.selected && <span class=\"checkmark\" />}\n </Host>\n );\n }\n\n componentWillLoad() {\n if (!this.value) this.value = this.el.innerText;\n }\n}\n"]}
|
|
@@ -1,11 +1,20 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
import { SIZE_VAR } from "../../types/enum";
|
|
3
|
+
import { DropdownItemSelector } from "./_vars";
|
|
3
4
|
import { forEach, setAttr } from "../../utils/utils";
|
|
4
5
|
export class XvDropdown {
|
|
5
6
|
constructor() {
|
|
6
7
|
this.size = SIZE_VAR.MD;
|
|
7
8
|
this.selected = [];
|
|
8
9
|
this.selectedMap = new Map();
|
|
10
|
+
this.setSelected = (selectedMap, optionNodes) => {
|
|
11
|
+
const values = Array.from(selectedMap.values());
|
|
12
|
+
const options = optionNodes || this.el.querySelectorAll(DropdownItemSelector);
|
|
13
|
+
this.selected = values.length === options.length ?
|
|
14
|
+
['Alle ausgewählt'] : values.length > 2 ?
|
|
15
|
+
[`${values.length} ausgewählt`] : values.map((v) => v.text);
|
|
16
|
+
return values;
|
|
17
|
+
};
|
|
9
18
|
this.handleOpen = () => {
|
|
10
19
|
if (this.disabled || this.open)
|
|
11
20
|
return;
|
|
@@ -23,6 +32,27 @@ export class XvDropdown {
|
|
|
23
32
|
this.removeListeners = () => {
|
|
24
33
|
document.body.removeEventListener('click', this.handleClickOutside);
|
|
25
34
|
};
|
|
35
|
+
this.setDefaultValues = () => {
|
|
36
|
+
if (!this.defaultValue)
|
|
37
|
+
return;
|
|
38
|
+
// Needs to wait next Javascript tik
|
|
39
|
+
setTimeout(() => {
|
|
40
|
+
const options = this.el.querySelectorAll(DropdownItemSelector);
|
|
41
|
+
forEach(options, (option) => {
|
|
42
|
+
const dropdownItemData = {
|
|
43
|
+
value: option.getAttribute('value'),
|
|
44
|
+
text: option.innerText,
|
|
45
|
+
selected: `${this.defaultValue}` === option.getAttribute('value'),
|
|
46
|
+
};
|
|
47
|
+
if (dropdownItemData.selected) {
|
|
48
|
+
console.log('dropdownItemData', dropdownItemData);
|
|
49
|
+
setAttr(option, 'selected', dropdownItemData.selected);
|
|
50
|
+
this.selectedMap.set(dropdownItemData.value, dropdownItemData);
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
this.setSelected(this.selectedMap, options);
|
|
54
|
+
});
|
|
55
|
+
};
|
|
26
56
|
}
|
|
27
57
|
openChangeHandle() {
|
|
28
58
|
if (this.disabled)
|
|
@@ -60,16 +90,15 @@ export class XvDropdown {
|
|
|
60
90
|
}
|
|
61
91
|
this.open = false;
|
|
62
92
|
}
|
|
63
|
-
const optionElements = this.el.querySelectorAll(
|
|
93
|
+
const optionElements = this.el.querySelectorAll(DropdownItemSelector);
|
|
64
94
|
forEach(optionElements, (option) => setAttr(option, 'selected', this.selectedMap.has(option.getAttribute('value'))));
|
|
65
|
-
|
|
66
|
-
this.selected = values.length === optionElements.length ?
|
|
67
|
-
['Alle ausgewählt'] : values.length > 2 ?
|
|
68
|
-
[`${values.length} ausgewählt`] : values.map((v) => v.text);
|
|
69
|
-
this.changeSelection.emit(values);
|
|
95
|
+
this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));
|
|
70
96
|
}
|
|
71
97
|
render() {
|
|
72
|
-
return (h(Host, { key: '
|
|
98
|
+
return (h(Host, { key: '7c3f08a31359efeba9c35dabba6b9d1cfa66086d', size: this.size, class: "xv-dropdown", role: "combobox", tabindex: this.disabled ? -1 : false }, h("label", { key: '530293b5a2bd148576f41cb343d5ccaefb51cdd3', class: "label" }, h("slot", { key: 'fd66aff04936aedd63bcecf2decec0d4176f6174', name: "label" }, this.label)), h("div", { key: '72c4bd316a9104b0610d06cecdbc57de3b98df88', class: "xv-dropdown-control control", onClick: this.handleOpen }, this.selected.length ? (h("p", { class: "control_value" }, this.selected.join(', '))) : (h("p", { class: "control_placeholder" }, this.placeholder || '')), this.error && (h("svg", { key: '26ebc2800b21e02d783e928abb7fb4ef0280cee4', class: "control_icon error", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { key: 'bfce50f7bd4972652941003a42e3205f8d4a014f', fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" }))), (!this.error && !!this.warning) && (h("svg", { key: '4fe8eccfb3322d1595a327face9ebb762dfa4c4f', class: "control_icon warning", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { key: 'fd0df7d4d2e439ac314fa227dc315c8edf6aff3d', fill: "currentColor", d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" }))), h("svg", { key: 'bb39e6b12ca1dbd20b3f299c3602045c26128c14', class: "control_arrow", focusable: "false", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16" }, h("path", { key: '37918f651612b529d8120cc230e09e768a0cda11', d: "M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" }))), this.open && h("div", { key: '70b5add96ff43f0eff9074822ad767b5b78e0e92', class: "options" }, h("slot", { key: "xv-dropdown-options" })), (this.helper || this.error || this.warning) && (h("p", { key: 'c5b425f7406751318f53f549584cff6892f8a173', class: "helper" }, this.error || this.warning || this.helper))));
|
|
99
|
+
}
|
|
100
|
+
componentWillLoad() {
|
|
101
|
+
this.setDefaultValues();
|
|
73
102
|
}
|
|
74
103
|
componentDidLoad() {
|
|
75
104
|
this.openChangeHandle();
|
|
@@ -287,6 +316,31 @@ export class XvDropdown {
|
|
|
287
316
|
"attribute": "size",
|
|
288
317
|
"reflect": false,
|
|
289
318
|
"defaultValue": "SIZE_VAR.MD"
|
|
319
|
+
},
|
|
320
|
+
"defaultValue": {
|
|
321
|
+
"type": "any",
|
|
322
|
+
"mutable": false,
|
|
323
|
+
"complexType": {
|
|
324
|
+
"original": "DropdownItemData['value']",
|
|
325
|
+
"resolved": "number | string",
|
|
326
|
+
"references": {
|
|
327
|
+
"DropdownItemData": {
|
|
328
|
+
"location": "import",
|
|
329
|
+
"path": "./_vars",
|
|
330
|
+
"id": "src/components/xv-dropdown/_vars.ts::DropdownItemData"
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
},
|
|
334
|
+
"required": false,
|
|
335
|
+
"optional": true,
|
|
336
|
+
"docs": {
|
|
337
|
+
"tags": [],
|
|
338
|
+
"text": ""
|
|
339
|
+
},
|
|
340
|
+
"getter": false,
|
|
341
|
+
"setter": false,
|
|
342
|
+
"attribute": "default-value",
|
|
343
|
+
"reflect": false
|
|
290
344
|
}
|
|
291
345
|
};
|
|
292
346
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xv-dropdown.js","sourceRoot":"","sources":["../../../src/components/xv-dropdown/xv-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, Watch, Listen, Event, EventEmitter } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\nimport { DropdownItemData } from './_vars';\nimport { forEach, setAttr } from '../../utils/utils';\n\n@Component({\n tag: 'xv-dropdown-v2',\n styleUrl: 'xv-dropdown.scss',\n shadow: true,\n})\nexport class XvDropdown {\n @Element() el: HTMLElement;\n @Prop() disabled?: boolean;\n @Prop() multiple?: boolean;\n @Prop() required?: boolean;\n @Prop({ reflect: true, mutable: true }) open?: boolean;\n @Prop() error?: string;\n @Prop() label?: string;\n @Prop() helper?: string;\n @Prop() warning?: string;\n @Prop() placeholder?: string;\n @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n\n @State() selected: DropdownItemData['text'][] = [];\n @State() selectedMap: Map<DropdownItemData['value'], DropdownItemData> = new Map();\n\n @Event() changeSelection: EventEmitter<DropdownItemData[]>;\n\n @Watch('open')\n openChangeHandle() {\n if (this.disabled) return;\n\n if (this.open) {\n this.addListeners();\n } else {\n this.removeListeners();\n }\n }\n\n @Listen('itemSelected')\n handleItemSelected({ detail }: CustomEvent<DropdownItemData>) {\n const hasItem = this.selectedMap.has(detail.value);\n\n if (this.multiple) {\n if (detail.selected) {\n if (!hasItem) this.selectedMap.set(detail.value, detail);\n } else {\n if (hasItem) {\n if (this.required && this.selectedMap.size === 1) return;\n this.selectedMap.delete(detail.value);\n }\n }\n } else {\n if (detail.selected) {\n this.selectedMap.clear();\n this.selectedMap.set(detail.value, detail);\n } else {\n if (!this.required) this.selectedMap.clear();\n }\n this.open = false;\n }\n\n const optionElements = this.el.querySelectorAll('.xv-dropdown-item');\n\n forEach(\n optionElements,\n (option) => setAttr(option, 'selected', this.selectedMap.has(option.getAttribute('value')))\n );\n\n const values = Array.from(this.selectedMap.values());\n this.selected = values.length === optionElements.length ?\n ['Alle ausgewählt'] : values.length > 2 ?\n [`${values.length} ausgewählt`] : values.map((v) => v.text);\n this.changeSelection.emit(values);\n }\n\n private handleOpen = () => {\n if (this.disabled || this.open) return;\n this.open = true;\n };\n\n private handleClickOutside = (ev: MouseEvent) => {\n if (!this.open || this.el.contains(ev.target as Node)) return;\n\n if (this.open) this.open = false;\n }\n\n private addListeners = () => {\n document.body.addEventListener('click', this.handleClickOutside);\n }\n\n private removeListeners = () => {\n document.body.removeEventListener('click', this.handleClickOutside);\n }\n\n render() {\n return (\n <Host size={this.size} class=\"xv-dropdown\" role=\"combobox\" tabindex={this.disabled ? -1 : false}>\n <label class=\"label\">\n <slot name=\"label\">{this.label}</slot>\n </label>\n\n <div class=\"xv-dropdown-control control\" onClick={this.handleOpen}>\n {this.selected.length ? (\n <p class=\"control_value\">{this.selected.join(', ')}</p>\n ) : (\n <p class=\"control_placeholder\">{this.placeholder || ''}</p>\n )}\n\n {this.error && (\n <svg class=\"control_icon error\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <path fill=\"currentColor\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z\" />\n </svg>\n )}\n {(!this.error && !!this.warning) && (\n <svg class=\"control_icon warning\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <path fill=\"currentColor\" d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\" />\n </svg>\n )}\n\n <svg class=\"control_arrow\" focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\" aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n </svg>\n </div>\n\n {this.open && <div class=\"options\">\n <slot key=\"xv-dropdown-options\" />\n </div>}\n\n {(this.helper || this.error || this.warning) && (\n <p class=\"helper\">{this.error || this.warning || this.helper}</p>\n )}\n </Host>\n );\n }\n\n componentDidLoad() {\n this.openChangeHandle();\n }\n\n disconnectedCallback() {\n this.removeListeners();\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"xv-dropdown.js","sourceRoot":"","sources":["../../../src/components/xv-dropdown/xv-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, Watch, Listen, Event, EventEmitter } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\nimport { DropdownItemData, DropdownItemSelector } from './_vars';\nimport { forEach, setAttr } from '../../utils/utils';\n\n@Component({\n tag: 'xv-dropdown-v2',\n styleUrl: 'xv-dropdown.scss',\n shadow: true,\n})\nexport class XvDropdown {\n @Element() el: HTMLElement;\n @Prop() disabled?: boolean;\n @Prop() multiple?: boolean;\n @Prop() required?: boolean;\n @Prop({ reflect: true, mutable: true }) open?: boolean;\n @Prop() error?: string;\n @Prop() label?: string;\n @Prop() helper?: string;\n @Prop() warning?: string;\n @Prop() placeholder?: string;\n @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n @Prop({ attribute: 'default-value'}) defaultValue?: DropdownItemData['value'];\n\n @State() selected: DropdownItemData['text'][] = [];\n @State() selectedMap: Map<DropdownItemData['value'], DropdownItemData> = new Map();\n\n @Event() changeSelection: EventEmitter<DropdownItemData[]>;\n\n @Watch('open')\n openChangeHandle() {\n if (this.disabled) return;\n\n if (this.open) {\n this.addListeners();\n } else {\n this.removeListeners();\n }\n }\n\n @Listen('itemSelected')\n handleItemSelected({ detail }: CustomEvent<DropdownItemData>) {\n const hasItem = this.selectedMap.has(detail.value);\n\n if (this.multiple) {\n if (detail.selected) {\n if (!hasItem) this.selectedMap.set(detail.value, detail);\n } else {\n if (hasItem) {\n if (this.required && this.selectedMap.size === 1) return;\n this.selectedMap.delete(detail.value);\n }\n }\n } else {\n if (detail.selected) {\n this.selectedMap.clear();\n this.selectedMap.set(detail.value, detail);\n } else {\n if (!this.required) this.selectedMap.clear();\n }\n this.open = false;\n }\n\n const optionElements = this.el.querySelectorAll(DropdownItemSelector);\n\n forEach(\n optionElements,\n (option) => setAttr(option, 'selected', this.selectedMap.has(option.getAttribute('value')))\n );\n\n this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));\n }\n\n private setSelected = (selectedMap: typeof this.selectedMap, optionNodes?: NodeListOf<Element>): DropdownItemData[] => {\n const values = Array.from(selectedMap.values());\n const options = optionNodes || this.el.querySelectorAll(DropdownItemSelector);\n\n this.selected = values.length === options.length ?\n ['Alle ausgewählt'] : values.length > 2 ?\n [`${values.length} ausgewählt`] : values.map((v) => v.text);\n\n return values;\n };\n\n private handleOpen = () => {\n if (this.disabled || this.open) return;\n this.open = true;\n };\n\n private handleClickOutside = (ev: MouseEvent) => {\n if (!this.open || this.el.contains(ev.target as Node)) return;\n\n if (this.open) this.open = false;\n }\n\n private addListeners = () => {\n document.body.addEventListener('click', this.handleClickOutside);\n }\n\n private removeListeners = () => {\n document.body.removeEventListener('click', this.handleClickOutside);\n }\n\n private setDefaultValues = () => {\n if (!this.defaultValue) return;\n\n // Needs to wait next Javascript tik\n setTimeout(() => {\n const options = this.el.querySelectorAll(DropdownItemSelector);\n\n forEach(\n options,\n (option) => {\n const dropdownItemData: DropdownItemData = {\n value: option.getAttribute('value'),\n text: (option as any).innerText,\n selected: `${this.defaultValue}` === option.getAttribute('value'),\n };\n\n if (dropdownItemData.selected) {\n console.log('dropdownItemData', dropdownItemData);\n setAttr(option, 'selected', dropdownItemData.selected);\n this.selectedMap.set(dropdownItemData.value, dropdownItemData);\n }\n }\n );\n\n this.setSelected(this.selectedMap, options);\n });\n };\n\n render() {\n return (\n <Host size={this.size} class=\"xv-dropdown\" role=\"combobox\" tabindex={this.disabled ? -1 : false}>\n <label class=\"label\">\n <slot name=\"label\">{this.label}</slot>\n </label>\n\n <div class=\"xv-dropdown-control control\" onClick={this.handleOpen}>\n {this.selected.length ? (\n <p class=\"control_value\">{this.selected.join(', ')}</p>\n ) : (\n <p class=\"control_placeholder\">{this.placeholder || ''}</p>\n )}\n\n {this.error && (\n <svg class=\"control_icon error\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <path fill=\"currentColor\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z\" />\n </svg>\n )}\n {(!this.error && !!this.warning) && (\n <svg class=\"control_icon warning\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <path fill=\"currentColor\" d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\" />\n </svg>\n )}\n\n <svg class=\"control_arrow\" focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\" aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n </svg>\n </div>\n\n {this.open && <div class=\"options\">\n <slot key=\"xv-dropdown-options\" />\n </div>}\n\n {(this.helper || this.error || this.warning) && (\n <p class=\"helper\">{this.error || this.warning || this.helper}</p>\n )}\n </Host>\n );\n }\n\n componentWillLoad() {\n this.setDefaultValues();\n }\n\n componentDidLoad() {\n this.openChangeHandle();\n }\n\n disconnectedCallback() {\n this.removeListeners();\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"_vars.js","sourceRoot":"","sources":["../../../src/components/xv-text-input/_vars.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,eAIX;AAJD,WAAY,eAAe;IACzB,kCAAe,CAAA;IACf,sCAAmB,CAAA;IACnB,2BAAQ,CAAA;AACV,CAAC,EAJW,eAAe,KAAf,eAAe,QAI1B","sourcesContent":["export enum TextInputStatus {\n ERROR = 'error',\n WARNING = 'warning',\n DEF = ''\n}\n"]}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
:host {
|
|
2
|
+
--text-input-padding-x: 16px;
|
|
3
|
+
--text-input-padding-y: 11px;
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
row-gap: calc(var(--text-input-padding-y) / 2);
|
|
7
|
+
text-align: left;
|
|
8
|
+
font-family: var(--ff-body, Tahoma);
|
|
9
|
+
}
|
|
10
|
+
:host .label {
|
|
11
|
+
margin: 0;
|
|
12
|
+
color: var(--text-secondary, #515151);
|
|
13
|
+
font-size: var(--fz-sm, 12px);
|
|
14
|
+
font-weight: 700;
|
|
15
|
+
line-height: 133.333%;
|
|
16
|
+
letter-spacing: 0.32px;
|
|
17
|
+
}
|
|
18
|
+
:host .control {
|
|
19
|
+
margin: 0;
|
|
20
|
+
position: relative;
|
|
21
|
+
box-sizing: border-box;
|
|
22
|
+
display: flex;
|
|
23
|
+
column-gap: 5px;
|
|
24
|
+
align-items: center;
|
|
25
|
+
flex-direction: row;
|
|
26
|
+
}
|
|
27
|
+
:host .control input {
|
|
28
|
+
background-color: var(--field-02, #FFF);
|
|
29
|
+
border: 1px solid var(--border-strong-01, #E3E3E3);
|
|
30
|
+
border-radius: 3px;
|
|
31
|
+
padding-block: var(--text-input-padding-y);
|
|
32
|
+
padding-inline-start: var(--text-input-padding-x);
|
|
33
|
+
padding-inline-end: var(--text-input-padding-x);
|
|
34
|
+
flex: 1;
|
|
35
|
+
outline: 2px solid transparent;
|
|
36
|
+
color: var(--text-primary, #333);
|
|
37
|
+
font-size: var(--fz-md, 14px);
|
|
38
|
+
font-style: normal;
|
|
39
|
+
font-weight: 400;
|
|
40
|
+
line-height: 128.571%;
|
|
41
|
+
letter-spacing: 0.16px;
|
|
42
|
+
transition: 0.2s ease-in-out border-color, 0.2s ease-in-out outline-color;
|
|
43
|
+
}
|
|
44
|
+
:host .control input.withIcon {
|
|
45
|
+
padding-inline-end: calc(var(--text-input-padding-x) + 22px);
|
|
46
|
+
}
|
|
47
|
+
:host .control input::placeholder {
|
|
48
|
+
color: var(--text-placeholder, #ACACAC);
|
|
49
|
+
}
|
|
50
|
+
:host .control input:focus {
|
|
51
|
+
outline: 2px solid var(--focus, #273435);
|
|
52
|
+
}
|
|
53
|
+
:host .control_icon {
|
|
54
|
+
position: absolute;
|
|
55
|
+
top: calc(50% - 9px);
|
|
56
|
+
right: var(--text-input-padding-y);
|
|
57
|
+
width: 18px;
|
|
58
|
+
height: 18px;
|
|
59
|
+
}
|
|
60
|
+
:host .control_icon.error {
|
|
61
|
+
color: var(--support-error, #F1290E);
|
|
62
|
+
}
|
|
63
|
+
:host .control_icon.warning {
|
|
64
|
+
color: var(--support-warning, #FF7F04);
|
|
65
|
+
}
|
|
66
|
+
:host .helper {
|
|
67
|
+
margin: 0;
|
|
68
|
+
color: var(--text-helper, #646464);
|
|
69
|
+
font-size: var(--fz-sm, 12px);
|
|
70
|
+
line-height: 133.333%;
|
|
71
|
+
letter-spacing: 0.32px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
:host([status=error]) .control input {
|
|
75
|
+
border-color: var(--support-error, #F1290E);
|
|
76
|
+
}
|
|
77
|
+
:host([status=error]) .control input:focus {
|
|
78
|
+
outline-color: var(--support-error, #F1290E);
|
|
79
|
+
}
|
|
80
|
+
:host([status=error]) .helper {
|
|
81
|
+
color: var(--text-error, #D62512);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
:host([readonly]) .control input {
|
|
85
|
+
border-top-color: transparent;
|
|
86
|
+
border-right-color: transparent;
|
|
87
|
+
border-left-color: transparent;
|
|
88
|
+
cursor: default;
|
|
89
|
+
background-color: transparent;
|
|
90
|
+
}
|
|
91
|
+
:host([readonly]) .control input:focus {
|
|
92
|
+
outline-color: transparent;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
:host([disabled]) {
|
|
96
|
+
opacity: 0.4;
|
|
97
|
+
}
|
|
98
|
+
:host([disabled]) .control input {
|
|
99
|
+
cursor: not-allowed;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
:host([size=xs]) {
|
|
103
|
+
--text-input-padding-y: 4px;
|
|
104
|
+
--text-input-padding-x: 6px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
:host([size=sm]) {
|
|
108
|
+
--text-input-padding-y: 7px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
:host([size=md]) {
|
|
112
|
+
--text-input-padding-y: 11px;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
:host([size=lg]) {
|
|
116
|
+
--text-input-padding-y: 15px;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
:host([size=xl]) {
|
|
120
|
+
--text-input-padding-y: 16px;
|
|
121
|
+
--text-input-padding-x: 18px;
|
|
122
|
+
}
|
|
@@ -0,0 +1,248 @@
|
|
|
1
|
+
import { h, Host } from "@stencil/core";
|
|
2
|
+
import { SIZE_VAR } from "../../types/enum";
|
|
3
|
+
import { TextInputStatus } from "./_vars";
|
|
4
|
+
/**
|
|
5
|
+
* xv-text-input — custom input
|
|
6
|
+
* ti get data you can use default Input event
|
|
7
|
+
* Angular - (input), React - (onInput), Pure - addEventListener('input', e => ...)
|
|
8
|
+
*/
|
|
9
|
+
export class XvTextInput {
|
|
10
|
+
constructor() {
|
|
11
|
+
this.helper = '';
|
|
12
|
+
this.size = SIZE_VAR.MD;
|
|
13
|
+
this.status = TextInputStatus.DEF;
|
|
14
|
+
this.value = '';
|
|
15
|
+
this.disabled = false;
|
|
16
|
+
this.readonly = false;
|
|
17
|
+
this.handleInput = (e) => {
|
|
18
|
+
const target = e.target;
|
|
19
|
+
this.value = target.value;
|
|
20
|
+
this.internals.setFormValue(target.value);
|
|
21
|
+
};
|
|
22
|
+
this.getControlIcon = (status) => {
|
|
23
|
+
switch (status) {
|
|
24
|
+
case TextInputStatus.ERROR: {
|
|
25
|
+
return (h("svg", { class: "control_icon error", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" })));
|
|
26
|
+
}
|
|
27
|
+
case TextInputStatus.WARNING:
|
|
28
|
+
return (h("svg", { class: "control_icon warning", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { fill: "currentColor", d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" })));
|
|
29
|
+
default: return null;
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
render() {
|
|
34
|
+
return (h(Host, { key: '4a16cd6ea36fd074e118bc262bf2aa50a32bbc90', name: this.name, class: "xv-text-input", role: "textbox", tabindex: this.disabled ? -1 : false }, this.label && h("label", { key: 'a18f098c242b7923951ad745d8fdca68289b6a1e', class: "label" }, this.label), h("div", { key: '3fc93834180279e5dfcc4b203e6e821e13acb539', class: "control" }, h("input", { key: '5d4b743dcb4c7afff9475f69b0127b478bc6a2a1', type: "text", class: { withIcon: this.status !== TextInputStatus.DEF }, readonly: this.readonly, value: this.value, disabled: this.disabled, onInput: this.handleInput, placeholder: this.placeholder }), this.getControlIcon(this.status)), this.helper && h("p", { key: 'e24b2c111e6fdba83006493d1fc7dcdf08256880', class: "helper" }, this.helper)));
|
|
35
|
+
}
|
|
36
|
+
componentWillLoad() {
|
|
37
|
+
this.internals.setFormValue(this.value);
|
|
38
|
+
}
|
|
39
|
+
static get is() { return "xv-text-input-v2"; }
|
|
40
|
+
static get encapsulation() { return "shadow"; }
|
|
41
|
+
static get formAssociated() { return true; }
|
|
42
|
+
static get originalStyleUrls() {
|
|
43
|
+
return {
|
|
44
|
+
"$": ["xv-text-input.scss"]
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
static get styleUrls() {
|
|
48
|
+
return {
|
|
49
|
+
"$": ["xv-text-input.css"]
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
static get properties() {
|
|
53
|
+
return {
|
|
54
|
+
"label": {
|
|
55
|
+
"type": "string",
|
|
56
|
+
"mutable": false,
|
|
57
|
+
"complexType": {
|
|
58
|
+
"original": "string",
|
|
59
|
+
"resolved": "string",
|
|
60
|
+
"references": {}
|
|
61
|
+
},
|
|
62
|
+
"required": false,
|
|
63
|
+
"optional": true,
|
|
64
|
+
"docs": {
|
|
65
|
+
"tags": [],
|
|
66
|
+
"text": ""
|
|
67
|
+
},
|
|
68
|
+
"getter": false,
|
|
69
|
+
"setter": false,
|
|
70
|
+
"attribute": "label",
|
|
71
|
+
"reflect": false
|
|
72
|
+
},
|
|
73
|
+
"placeholder": {
|
|
74
|
+
"type": "string",
|
|
75
|
+
"mutable": false,
|
|
76
|
+
"complexType": {
|
|
77
|
+
"original": "string",
|
|
78
|
+
"resolved": "string",
|
|
79
|
+
"references": {}
|
|
80
|
+
},
|
|
81
|
+
"required": false,
|
|
82
|
+
"optional": true,
|
|
83
|
+
"docs": {
|
|
84
|
+
"tags": [],
|
|
85
|
+
"text": ""
|
|
86
|
+
},
|
|
87
|
+
"getter": false,
|
|
88
|
+
"setter": false,
|
|
89
|
+
"attribute": "placeholder",
|
|
90
|
+
"reflect": false
|
|
91
|
+
},
|
|
92
|
+
"helper": {
|
|
93
|
+
"type": "string",
|
|
94
|
+
"mutable": false,
|
|
95
|
+
"complexType": {
|
|
96
|
+
"original": "string",
|
|
97
|
+
"resolved": "string",
|
|
98
|
+
"references": {}
|
|
99
|
+
},
|
|
100
|
+
"required": false,
|
|
101
|
+
"optional": false,
|
|
102
|
+
"docs": {
|
|
103
|
+
"tags": [],
|
|
104
|
+
"text": ""
|
|
105
|
+
},
|
|
106
|
+
"getter": false,
|
|
107
|
+
"setter": false,
|
|
108
|
+
"attribute": "helper",
|
|
109
|
+
"reflect": false,
|
|
110
|
+
"defaultValue": "''"
|
|
111
|
+
},
|
|
112
|
+
"name": {
|
|
113
|
+
"type": "string",
|
|
114
|
+
"mutable": false,
|
|
115
|
+
"complexType": {
|
|
116
|
+
"original": "string",
|
|
117
|
+
"resolved": "string",
|
|
118
|
+
"references": {}
|
|
119
|
+
},
|
|
120
|
+
"required": false,
|
|
121
|
+
"optional": true,
|
|
122
|
+
"docs": {
|
|
123
|
+
"tags": [],
|
|
124
|
+
"text": ""
|
|
125
|
+
},
|
|
126
|
+
"getter": false,
|
|
127
|
+
"setter": false,
|
|
128
|
+
"attribute": "name",
|
|
129
|
+
"reflect": false
|
|
130
|
+
},
|
|
131
|
+
"size": {
|
|
132
|
+
"type": "string",
|
|
133
|
+
"mutable": false,
|
|
134
|
+
"complexType": {
|
|
135
|
+
"original": "SIZE_VAR",
|
|
136
|
+
"resolved": "SIZE_VAR.LG | SIZE_VAR.MD | SIZE_VAR.SM | SIZE_VAR.XL | SIZE_VAR.XS",
|
|
137
|
+
"references": {
|
|
138
|
+
"SIZE_VAR": {
|
|
139
|
+
"location": "import",
|
|
140
|
+
"path": "../../types/enum",
|
|
141
|
+
"id": "src/types/enum.ts::SIZE_VAR"
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
"required": false,
|
|
146
|
+
"optional": false,
|
|
147
|
+
"docs": {
|
|
148
|
+
"tags": [],
|
|
149
|
+
"text": ""
|
|
150
|
+
},
|
|
151
|
+
"getter": false,
|
|
152
|
+
"setter": false,
|
|
153
|
+
"attribute": "size",
|
|
154
|
+
"reflect": false,
|
|
155
|
+
"defaultValue": "SIZE_VAR.MD"
|
|
156
|
+
},
|
|
157
|
+
"status": {
|
|
158
|
+
"type": "string",
|
|
159
|
+
"mutable": false,
|
|
160
|
+
"complexType": {
|
|
161
|
+
"original": "TextInputStatus",
|
|
162
|
+
"resolved": "TextInputStatus.DEF | TextInputStatus.ERROR | TextInputStatus.WARNING",
|
|
163
|
+
"references": {
|
|
164
|
+
"TextInputStatus": {
|
|
165
|
+
"location": "import",
|
|
166
|
+
"path": "./_vars",
|
|
167
|
+
"id": "src/components/xv-text-input/_vars.ts::TextInputStatus"
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
},
|
|
171
|
+
"required": false,
|
|
172
|
+
"optional": false,
|
|
173
|
+
"docs": {
|
|
174
|
+
"tags": [],
|
|
175
|
+
"text": ""
|
|
176
|
+
},
|
|
177
|
+
"getter": false,
|
|
178
|
+
"setter": false,
|
|
179
|
+
"attribute": "status",
|
|
180
|
+
"reflect": false,
|
|
181
|
+
"defaultValue": "TextInputStatus.DEF"
|
|
182
|
+
},
|
|
183
|
+
"value": {
|
|
184
|
+
"type": "string",
|
|
185
|
+
"mutable": true,
|
|
186
|
+
"complexType": {
|
|
187
|
+
"original": "string",
|
|
188
|
+
"resolved": "string",
|
|
189
|
+
"references": {}
|
|
190
|
+
},
|
|
191
|
+
"required": false,
|
|
192
|
+
"optional": false,
|
|
193
|
+
"docs": {
|
|
194
|
+
"tags": [],
|
|
195
|
+
"text": ""
|
|
196
|
+
},
|
|
197
|
+
"getter": false,
|
|
198
|
+
"setter": false,
|
|
199
|
+
"attribute": "value",
|
|
200
|
+
"reflect": false,
|
|
201
|
+
"defaultValue": "''"
|
|
202
|
+
},
|
|
203
|
+
"disabled": {
|
|
204
|
+
"type": "boolean",
|
|
205
|
+
"mutable": false,
|
|
206
|
+
"complexType": {
|
|
207
|
+
"original": "boolean",
|
|
208
|
+
"resolved": "boolean",
|
|
209
|
+
"references": {}
|
|
210
|
+
},
|
|
211
|
+
"required": false,
|
|
212
|
+
"optional": false,
|
|
213
|
+
"docs": {
|
|
214
|
+
"tags": [],
|
|
215
|
+
"text": ""
|
|
216
|
+
},
|
|
217
|
+
"getter": false,
|
|
218
|
+
"setter": false,
|
|
219
|
+
"attribute": "disabled",
|
|
220
|
+
"reflect": false,
|
|
221
|
+
"defaultValue": "false"
|
|
222
|
+
},
|
|
223
|
+
"readonly": {
|
|
224
|
+
"type": "boolean",
|
|
225
|
+
"mutable": false,
|
|
226
|
+
"complexType": {
|
|
227
|
+
"original": "boolean",
|
|
228
|
+
"resolved": "boolean",
|
|
229
|
+
"references": {}
|
|
230
|
+
},
|
|
231
|
+
"required": false,
|
|
232
|
+
"optional": false,
|
|
233
|
+
"docs": {
|
|
234
|
+
"tags": [],
|
|
235
|
+
"text": ""
|
|
236
|
+
},
|
|
237
|
+
"getter": false,
|
|
238
|
+
"setter": false,
|
|
239
|
+
"attribute": "readonly",
|
|
240
|
+
"reflect": false,
|
|
241
|
+
"defaultValue": "false"
|
|
242
|
+
}
|
|
243
|
+
};
|
|
244
|
+
}
|
|
245
|
+
static get elementRef() { return "el"; }
|
|
246
|
+
static get attachInternalsMemberName() { return "internals"; }
|
|
247
|
+
}
|
|
248
|
+
//# sourceMappingURL=xv-text-input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"xv-text-input.js","sourceRoot":"","sources":["../../../src/components/xv-text-input/xv-text-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, h, Host, Element, Prop } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\nimport { TextInputStatus } from './_vars';\n\n/**\n * xv-text-input — custom input\n * ti get data you can use default Input event\n * Angular - (input), React - (onInput), Pure - addEventListener('input', e => ...)\n */\n@Component({\n tag: 'xv-text-input-v2',\n styleUrl: 'xv-text-input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class XvTextInput {\n @Element() el: HTMLElement;\n @Prop() label?: string;\n @Prop() placeholder?: string;\n @Prop() helper: string = '';\n @Prop() name?: string;\n @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n @Prop() status: TextInputStatus = TextInputStatus.DEF;\n @Prop({ mutable: true }) value: string = '';\n @Prop() disabled: boolean = false;\n @Prop() readonly: boolean = false;\n\n @AttachInternals() internals: ElementInternals;\n\n private handleInput = (e: InputEvent) => {\n const target = e.target as HTMLInputElement;\n this.value = target.value;\n this.internals.setFormValue(target.value);\n }\n\n render() {\n return (\n <Host name={this.name} class=\"xv-text-input\" role=\"textbox\" tabindex={this.disabled ? -1 : false}>\n {this.label && <label class=\"label\">{this.label}</label>}\n\n <div class=\"control\">\n <input\n type=\"text\"\n class={{ withIcon: this.status !== TextInputStatus.DEF }}\n readonly={this.readonly}\n value={this.value}\n disabled={this.disabled}\n onInput={this.handleInput}\n placeholder={this.placeholder}\n />\n\n {this.getControlIcon(this.status)}\n </div>\n\n {this.helper && <p class=\"helper\">{this.helper}</p>}\n </Host>\n );\n }\n\n componentWillLoad() {\n this.internals.setFormValue(this.value);\n }\n\n private getControlIcon = (status: TextInputStatus) => {\n switch (status) {\n case TextInputStatus.ERROR: {\n return (\n <svg class=\"control_icon error\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <path fill=\"currentColor\"\n d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z\" />\n </svg>\n )\n }\n case TextInputStatus.WARNING:\n return (\n <svg class=\"control_icon warning\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <path fill=\"currentColor\"\n d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\" />\n </svg>\n )\n default: return null;\n }\n };\n}\n"]}
|
|
@@ -9,7 +9,7 @@ export class XvTooltip {
|
|
|
9
9
|
this.position = 'top';
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (h(Host, { key: '
|
|
12
|
+
return (h(Host, { key: '3cbaa0f4193f8d41adfa47fac25a9e77b4deaa0d', tooltip: this.message, class: `xv-tooltip_${this.position}` }, h("slot", { key: '176f13a692ca159849dacf780030f1a71f22de87' }, h("svg", { key: '334581c0388fcf67337605189461f8d7433fbf8c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: 'd0bbcb1d8ed14bcc183d6dc3277873702510900e', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))));
|
|
13
13
|
}
|
|
14
14
|
static get is() { return "xv-tooltip-v2"; }
|
|
15
15
|
static get encapsulation() { return "shadow"; }
|