xv-webcomponents 0.1.31 → 0.1.32
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_26.cjs.entry.js +97 -41
- package/dist/cjs/xv-accordion-v2_26.cjs.entry.js.map +1 -1
- package/dist/cjs/xv-webcomponents.cjs.js +1 -1
- package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js +1 -1
- package/dist/collection/components/xv-dropdown/xv-dropdown.js +41 -10
- package/dist/collection/components/xv-dropdown/xv-dropdown.js.map +1 -1
- package/dist/collection/components/xv-footer/xv-footer.js +1 -1
- package/dist/collection/components/xv-header/xv-header.js +1 -1
- package/dist/collection/components/xv-link/xv-link.css +5 -0
- package/dist/collection/components/xv-link/xv-link.js +3 -3
- package/dist/collection/components/xv-link/xv-link.js.map +1 -1
- package/dist/collection/components/xv-modal/xv-modal.css +3 -0
- package/dist/collection/components/xv-modal/xv-modal.js +31 -7
- package/dist/collection/components/xv-modal/xv-modal.js.map +1 -1
- package/dist/collection/components/xv-notification/xv-notification.js +3 -3
- package/dist/collection/components/xv-notification/xv-notification.js.map +1 -1
- 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.css +3 -0
- 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-table/_vars.js.map +1 -1
- package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.css +10 -3
- package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.js +10 -10
- package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.js.map +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.css +8 -1
- package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js +33 -2
- package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js.map +1 -1
- package/dist/collection/components/xv-table/xv-table.css +18 -0
- package/dist/collection/components/xv-table/xv-table.js +30 -4
- package/dist/collection/components/xv-table/xv-table.js.map +1 -1
- package/dist/collection/components/xv-tabs/xv-tab/xv-tab.css +7 -0
- package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js +42 -1
- package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js.map +1 -1
- package/dist/collection/components/xv-tabs/xv-tabs.css +55 -9
- package/dist/collection/components/xv-tabs/xv-tabs.js +90 -13
- package/dist/collection/components/xv-tabs/xv-tabs.js.map +1 -1
- package/dist/collection/components/xv-tag/xv-tag.js +1 -1
- package/dist/collection/components/xv-text-input/xv-text-input.js +44 -1
- package/dist/collection/components/xv-text-input/xv-text-input.js.map +1 -1
- package/dist/collection/components/xv-tooltip/xv-tooltip.css +6 -1
- package/dist/collection/components/xv-tooltip/xv-tooltip.js +22 -3
- package/dist/collection/components/xv-tooltip/xv-tooltip.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/xv-accordion-v2_26.entry.js +97 -41
- package/dist/esm/xv-accordion-v2_26.entry.js.map +1 -1
- package/dist/esm/xv-webcomponents.js +1 -1
- package/dist/types/components/xv-dropdown/xv-dropdown.d.ts +2 -0
- package/dist/types/components/xv-link/xv-link.d.ts +1 -1
- package/dist/types/components/xv-modal/xv-modal.d.ts +5 -1
- package/dist/types/components/xv-table/_vars.d.ts +4 -0
- package/dist/types/components/xv-table/xv-table-cell/xv-table-cell.d.ts +3 -6
- package/dist/types/components/xv-table/xv-table-row/xv-table-row.d.ts +1 -0
- package/dist/types/components/xv-table/xv-table.d.ts +2 -1
- package/dist/types/components/xv-tabs/xv-tab/xv-tab.d.ts +2 -0
- package/dist/types/components/xv-tabs/xv-tabs.d.ts +16 -3
- package/dist/types/components/xv-text-input/xv-text-input.d.ts +3 -0
- package/dist/types/components/xv-tooltip/xv-tooltip.d.ts +1 -0
- package/dist/types/components.d.ts +92 -14
- package/dist/xv-webcomponents/p-51113bf3.entry.js +2 -0
- package/dist/xv-webcomponents/p-51113bf3.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/xv-webcomponents/p-e750290d.entry.js +0 -2
- package/dist/xv-webcomponents/p-e750290d.entry.js.map +0 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
import { TAB_TAGS, TABS_VATIANT } from "./_vars";
|
|
3
|
+
import { SIZE_VAR } from "../../types/enum";
|
|
3
4
|
export class XvTabs {
|
|
4
5
|
constructor() {
|
|
5
6
|
/**
|
|
@@ -17,22 +18,41 @@ export class XvTabs {
|
|
|
17
18
|
this.collectTabs = () => {
|
|
18
19
|
if (!this.tabElements.length) {
|
|
19
20
|
this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));
|
|
21
|
+
this.tabElements.forEach((tab) => {
|
|
22
|
+
if (tab.hasAttribute('name') && !this.active) {
|
|
23
|
+
this.active = tab.getAttribute('name');
|
|
24
|
+
}
|
|
25
|
+
});
|
|
20
26
|
}
|
|
21
27
|
};
|
|
22
28
|
}
|
|
23
29
|
updateTabClasses() {
|
|
24
30
|
this.tabElements.forEach((tab, i) => {
|
|
25
|
-
tab.classList.toggle('active', i === this.active);
|
|
31
|
+
tab.classList.toggle('active', (tab.getAttribute('name') || `${i}`) === `${this.active}`);
|
|
26
32
|
});
|
|
27
33
|
}
|
|
28
|
-
handleTabClick(
|
|
29
|
-
if (
|
|
34
|
+
handleTabClick(active) {
|
|
35
|
+
if (active === this.active)
|
|
30
36
|
return;
|
|
31
|
-
this.active =
|
|
32
|
-
this.
|
|
37
|
+
this.active = active;
|
|
38
|
+
this.activeChange.emit(Number(this.active) || this.active);
|
|
39
|
+
}
|
|
40
|
+
setTab(count = 1) {
|
|
41
|
+
const currentIdx = this.tabElements.findIndex((tab, i) => (tab.getAttribute('name') || `${i}`) === `${this.active}`);
|
|
42
|
+
const tab = this.tabElements[currentIdx + count];
|
|
43
|
+
if (tab && !(tab === null || tab === void 0 ? void 0 : tab.hasAttribute('disabled'))) {
|
|
44
|
+
this.active = tab.getAttribute('name') || `${currentIdx + count}`;
|
|
45
|
+
}
|
|
33
46
|
}
|
|
34
47
|
render() {
|
|
35
|
-
|
|
48
|
+
var _a, _b, _c;
|
|
49
|
+
if (this.loading) {
|
|
50
|
+
return (h(Host, { class: "xv-tabs", variant: this.variant }, h("xv-loader-v2", { size: SIZE_VAR.XL })));
|
|
51
|
+
}
|
|
52
|
+
return (h(Host, { class: "xv-tabs", variant: this.variant }, h("div", { class: "tab-headers", role: "tablist" }, h("button", { hidden: !this.showArrows || !((_a = this.tabElements) === null || _a === void 0 ? void 0 : _a.length), "aria-label": "Previous", class: "tab-headers_btn prev", onClick: () => this.setTab(-1) }), ((_b = this.tabElements) === null || _b === void 0 ? void 0 : _b.length) ? this.tabElements.map((tab, index) => (h("button", { role: "tab", disabled: !!tab.getAttribute('disabled') || !!(tab === null || tab === void 0 ? void 0 : tab.disabled), class: {
|
|
53
|
+
'tab-headers_tab': true,
|
|
54
|
+
active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,
|
|
55
|
+
}, onClick: () => this.handleTabClick(tab.getAttribute('name') || `${index}`) }, tab.getAttribute('label') || `Tab ${index + 1}`))) : this.emptyMessage && h("p", { class: "xv-tabs_empty" }, this.emptyMessage), h("button", { "aria-label": "Next", hidden: !this.showArrows || !((_c = this.tabElements) === null || _c === void 0 ? void 0 : _c.length), class: "tab-headers_btn next", onClick: () => this.setTab(1) })), h("div", { class: "tab-content-wrapper", role: "tabpanel", tabindex: -1 }, h("slot", { onSlotchange: this.collectTabs }))));
|
|
36
56
|
}
|
|
37
57
|
componentWillLoad() {
|
|
38
58
|
// this.collectTabs();
|
|
@@ -55,11 +75,11 @@ export class XvTabs {
|
|
|
55
75
|
static get properties() {
|
|
56
76
|
return {
|
|
57
77
|
"active": {
|
|
58
|
-
"type": "
|
|
78
|
+
"type": "any",
|
|
59
79
|
"mutable": true,
|
|
60
80
|
"complexType": {
|
|
61
|
-
"original": "number",
|
|
62
|
-
"resolved": "number",
|
|
81
|
+
"original": "number | string",
|
|
82
|
+
"resolved": "number | string",
|
|
63
83
|
"references": {}
|
|
64
84
|
},
|
|
65
85
|
"required": false,
|
|
@@ -74,6 +94,25 @@ export class XvTabs {
|
|
|
74
94
|
"reflect": true,
|
|
75
95
|
"defaultValue": "0"
|
|
76
96
|
},
|
|
97
|
+
"loading": {
|
|
98
|
+
"type": "boolean",
|
|
99
|
+
"mutable": false,
|
|
100
|
+
"complexType": {
|
|
101
|
+
"original": "boolean",
|
|
102
|
+
"resolved": "boolean",
|
|
103
|
+
"references": {}
|
|
104
|
+
},
|
|
105
|
+
"required": false,
|
|
106
|
+
"optional": true,
|
|
107
|
+
"docs": {
|
|
108
|
+
"tags": [],
|
|
109
|
+
"text": "Show loader"
|
|
110
|
+
},
|
|
111
|
+
"getter": false,
|
|
112
|
+
"setter": false,
|
|
113
|
+
"attribute": "loading",
|
|
114
|
+
"reflect": true
|
|
115
|
+
},
|
|
77
116
|
"variant": {
|
|
78
117
|
"type": "string",
|
|
79
118
|
"mutable": false,
|
|
@@ -99,6 +138,44 @@ export class XvTabs {
|
|
|
99
138
|
"attribute": "variant",
|
|
100
139
|
"reflect": false,
|
|
101
140
|
"defaultValue": "TABS_VATIANT.DEFAULT"
|
|
141
|
+
},
|
|
142
|
+
"emptyMessage": {
|
|
143
|
+
"type": "string",
|
|
144
|
+
"mutable": false,
|
|
145
|
+
"complexType": {
|
|
146
|
+
"original": "string",
|
|
147
|
+
"resolved": "string",
|
|
148
|
+
"references": {}
|
|
149
|
+
},
|
|
150
|
+
"required": false,
|
|
151
|
+
"optional": true,
|
|
152
|
+
"docs": {
|
|
153
|
+
"tags": [],
|
|
154
|
+
"text": "Message when have no tabs"
|
|
155
|
+
},
|
|
156
|
+
"getter": false,
|
|
157
|
+
"setter": false,
|
|
158
|
+
"attribute": "empty-message",
|
|
159
|
+
"reflect": false
|
|
160
|
+
},
|
|
161
|
+
"showArrows": {
|
|
162
|
+
"type": "boolean",
|
|
163
|
+
"mutable": false,
|
|
164
|
+
"complexType": {
|
|
165
|
+
"original": "boolean",
|
|
166
|
+
"resolved": "boolean",
|
|
167
|
+
"references": {}
|
|
168
|
+
},
|
|
169
|
+
"required": false,
|
|
170
|
+
"optional": true,
|
|
171
|
+
"docs": {
|
|
172
|
+
"tags": [],
|
|
173
|
+
"text": "Message when have no tabs"
|
|
174
|
+
},
|
|
175
|
+
"getter": false,
|
|
176
|
+
"setter": false,
|
|
177
|
+
"attribute": "show-arrows",
|
|
178
|
+
"reflect": true
|
|
102
179
|
}
|
|
103
180
|
};
|
|
104
181
|
}
|
|
@@ -109,8 +186,8 @@ export class XvTabs {
|
|
|
109
186
|
}
|
|
110
187
|
static get events() {
|
|
111
188
|
return [{
|
|
112
|
-
"method": "
|
|
113
|
-
"name": "
|
|
189
|
+
"method": "activeChange",
|
|
190
|
+
"name": "activeChange",
|
|
114
191
|
"bubbles": true,
|
|
115
192
|
"cancelable": true,
|
|
116
193
|
"composed": true,
|
|
@@ -119,8 +196,8 @@ export class XvTabs {
|
|
|
119
196
|
"text": "Emit event to outside"
|
|
120
197
|
},
|
|
121
198
|
"complexType": {
|
|
122
|
-
"original": "number",
|
|
123
|
-
"resolved": "number",
|
|
199
|
+
"original": "number | string",
|
|
200
|
+
"resolved": "number | string",
|
|
124
201
|
"references": {}
|
|
125
202
|
}
|
|
126
203
|
}];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xv-tabs.js","sourceRoot":"","sources":["../../../src/components/xv-tabs/xv-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"xv-tabs.js","sourceRoot":"","sources":["../../../src/components/xv-tabs/xv-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, Event, EventEmitter, State } from '@stencil/core';\nimport { TAB_TAGS, TABS_VATIANT } from './_vars';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n tag: 'xv-tabs-v2',\n styleUrl: 'xv-tabs.scss',\n shadow: true,\n})\nexport class XvTabs {\n @Element() el: HTMLElement;\n /**\n * Index of active tab\n */\n @Prop({ reflect: true, mutable: true }) active: number | string = 0;\n /**\n * Emit event to outside\n */\n @Event() activeChange: EventEmitter<number | string>;\n /**\n * Show loader\n */\n @Prop({ reflect: true }) loading?: boolean;\n /**\n * Variant of tabs from TABS_VATIANT enum\n */\n @Prop() variant: TABS_VATIANT = TABS_VATIANT.DEFAULT;\n /**\n * Message when have no tabs\n */\n @Prop() emptyMessage?: string;\n /**\n * Message when have no tabs\n */\n @Prop({ reflect: true }) showArrows?: boolean;\n /**\n * local variable for tab labels collection\n */\n @State() tabElements: HTMLElement[] = [];\n\n private collectTabs = () => {\n if (!this.tabElements.length) {\n this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));\n this.tabElements.forEach((tab) => {\n if (tab.hasAttribute('name') && !this.active) {\n this.active = tab.getAttribute('name');\n }\n })\n }\n }\n\n private updateTabClasses() {\n this.tabElements.forEach((tab, i) => {\n tab.classList.toggle(\n 'active',\n (tab.getAttribute('name') || `${i}`) === `${this.active}`\n );\n });\n }\n\n private handleTabClick(active: string | number) {\n if (active === this.active) return;\n\n this.active = active;\n this.activeChange.emit(Number(this.active) || this.active);\n }\n\n private setTab(count: number = 1) {\n const currentIdx = this.tabElements.findIndex(\n (tab, i) =>\n (tab.getAttribute('name') || `${i}`) === `${this.active}`\n );\n const tab = this.tabElements[currentIdx + count];\n\n if (tab && !tab?.hasAttribute('disabled')) {\n this.active = tab.getAttribute('name') || `${currentIdx + count}`;\n }\n }\n\n render() {\n if (this.loading) {\n return (\n <Host class=\"xv-tabs\" variant={this.variant}>\n <xv-loader-v2 size={SIZE_VAR.XL} />\n </Host>\n )\n }\n\n return (\n <Host class=\"xv-tabs\" variant={this.variant}>\n <div class=\"tab-headers\" role=\"tablist\">\n <button\n hidden={!this.showArrows || !this.tabElements?.length}\n aria-label=\"Previous\"\n class=\"tab-headers_btn prev\"\n onClick={() => this.setTab(-1)}\n />\n {this.tabElements?.length ? this.tabElements.map((tab, index) => (\n <button\n role=\"tab\"\n disabled={!!tab.getAttribute('disabled') || !!(tab as any)?.disabled}\n class={{\n 'tab-headers_tab': true,\n active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,\n }}\n onClick={() => this.handleTabClick(tab.getAttribute('name') || `${index}`)}\n >\n {tab.getAttribute('label') || `Tab ${index + 1}`}\n </button>\n )) : this.emptyMessage && <p class=\"xv-tabs_empty\">{this.emptyMessage}</p>}\n\n <button\n aria-label=\"Next\"\n hidden={!this.showArrows || !this.tabElements?.length}\n class=\"tab-headers_btn next\"\n onClick={() => this.setTab(1)}\n />\n </div>\n\n <div\n class=\"tab-content-wrapper\"\n role=\"tabpanel\"\n tabindex={-1}\n >\n <slot onSlotchange={this.collectTabs} />\n </div>\n </Host>\n );\n }\n\n componentWillLoad() {\n // this.collectTabs();\n }\n\n componentDidRender() {\n this.updateTabClasses();\n }\n}\n"]}
|
|
@@ -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: 'e7015e92932ed5f4d6d3acb68ab63628e4a4bcb6', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '87a56eb93d86027dfcfa6c2e0edc22defe7628b4', class: "xv-tag_content" }, h("slot", { key: 'b71fb28fdbf29da81d8cc701f7a9b4bf0fc23c4d' })), this.closeable && (h("button", { key: 'f99c2fc938973a3809a355a8621cf161e185c46c', 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"; }
|
|
@@ -14,12 +14,17 @@ export class XvTextInput {
|
|
|
14
14
|
this.value = '';
|
|
15
15
|
this.disabled = false;
|
|
16
16
|
this.readonly = false;
|
|
17
|
+
this.loading = false;
|
|
17
18
|
this.handleInput = (e) => {
|
|
18
19
|
const target = e.target;
|
|
19
20
|
this.value = target.value;
|
|
21
|
+
this.valueChange.emit(this.value);
|
|
20
22
|
this.internals.setFormValue(target.value);
|
|
21
23
|
};
|
|
22
24
|
this.getControlIcon = (status) => {
|
|
25
|
+
if (this.loading) {
|
|
26
|
+
return h("xv-loader-v2", { class: "control_icon", size: SIZE_VAR.XS });
|
|
27
|
+
}
|
|
23
28
|
switch (status) {
|
|
24
29
|
case TextInputStatus.ERROR: {
|
|
25
30
|
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" })));
|
|
@@ -31,7 +36,7 @@ export class XvTextInput {
|
|
|
31
36
|
};
|
|
32
37
|
}
|
|
33
38
|
render() {
|
|
34
|
-
return (h(Host, { key: '
|
|
39
|
+
return (h(Host, { key: '7e773cbebf4bd3bc6c2e71f454f733de77ec2b56', name: this.name, class: "xv-text-input", role: "textbox", tabindex: this.disabled ? -1 : false }, this.label && h("label", { key: 'a28eca6e736e747c5730d2b517cbcf33178a53af', class: "label" }, this.label), h("div", { key: 'c432a6ca83a94d1f160745b1f0f2e1a532441ccd', class: "control" }, h("input", { key: '5545a39193c180329fe382f8f9fd4aac5d79adcd', 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: 'ab7aee3589f336f3899afef307845466c4eee41e', class: "helper" }, this.helper)));
|
|
35
40
|
}
|
|
36
41
|
componentWillLoad() {
|
|
37
42
|
this.internals.setFormValue(this.value);
|
|
@@ -239,9 +244,47 @@ export class XvTextInput {
|
|
|
239
244
|
"attribute": "readonly",
|
|
240
245
|
"reflect": true,
|
|
241
246
|
"defaultValue": "false"
|
|
247
|
+
},
|
|
248
|
+
"loading": {
|
|
249
|
+
"type": "boolean",
|
|
250
|
+
"mutable": false,
|
|
251
|
+
"complexType": {
|
|
252
|
+
"original": "boolean",
|
|
253
|
+
"resolved": "boolean",
|
|
254
|
+
"references": {}
|
|
255
|
+
},
|
|
256
|
+
"required": false,
|
|
257
|
+
"optional": false,
|
|
258
|
+
"docs": {
|
|
259
|
+
"tags": [],
|
|
260
|
+
"text": ""
|
|
261
|
+
},
|
|
262
|
+
"getter": false,
|
|
263
|
+
"setter": false,
|
|
264
|
+
"attribute": "loading",
|
|
265
|
+
"reflect": true,
|
|
266
|
+
"defaultValue": "false"
|
|
242
267
|
}
|
|
243
268
|
};
|
|
244
269
|
}
|
|
270
|
+
static get events() {
|
|
271
|
+
return [{
|
|
272
|
+
"method": "valueChange",
|
|
273
|
+
"name": "valueChange",
|
|
274
|
+
"bubbles": true,
|
|
275
|
+
"cancelable": true,
|
|
276
|
+
"composed": true,
|
|
277
|
+
"docs": {
|
|
278
|
+
"tags": [],
|
|
279
|
+
"text": ""
|
|
280
|
+
},
|
|
281
|
+
"complexType": {
|
|
282
|
+
"original": "string",
|
|
283
|
+
"resolved": "string",
|
|
284
|
+
"references": {}
|
|
285
|
+
}
|
|
286
|
+
}];
|
|
287
|
+
}
|
|
245
288
|
static get elementRef() { return "el"; }
|
|
246
289
|
static get attachInternalsMemberName() { return "internals"; }
|
|
247
290
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xv-text-input.js","sourceRoot":"","sources":["../../../src/components/xv-text-input/xv-text-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;
|
|
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, Event, EventEmitter } 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({ reflect: true }) label?: string;\n @Prop({ reflect: true }) placeholder?: string;\n @Prop({ reflect: true }) helper: string = '';\n @Prop({ reflect: true }) name?: string;\n @Prop({ reflect: true }) size: SIZE_VAR = SIZE_VAR.MD;\n @Prop({ reflect: true }) status: TextInputStatus = TextInputStatus.DEF;\n @Prop({ reflect: true, mutable: true }) value: string = '';\n @Event({ eventName: 'valueChange' }) valueChange: EventEmitter<string>;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) readonly: boolean = false;\n @Prop({ reflect: true }) loading: 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.valueChange.emit(this.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 if (this.loading) {\n return <xv-loader-v2 class=\"control_icon\" size={SIZE_VAR.XS} />\n }\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"]}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
position: absolute;
|
|
12
12
|
opacity: 0;
|
|
13
13
|
visibility: hidden;
|
|
14
|
-
transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
|
|
14
|
+
transition: opacity 0.2s ease-in-out 0.5s, transform 0.2s ease-in-out 0.5s;
|
|
15
15
|
z-index: 10;
|
|
16
16
|
}
|
|
17
17
|
|
|
@@ -33,6 +33,11 @@
|
|
|
33
33
|
letter-spacing: 0.16px;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
+
:host([multiline])::before {
|
|
37
|
+
white-space: normal;
|
|
38
|
+
min-width: 300px;
|
|
39
|
+
}
|
|
40
|
+
|
|
36
41
|
/* Arrow */
|
|
37
42
|
:host::after {
|
|
38
43
|
content: "";
|
|
@@ -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: 'caeab002ff02c6b43a1eefc52a59f0f0f6d5c75a', tooltip: this.message, class: `xv-tooltip_${this.position}` }, h("slot", { key: '9d873d03af5225e4f2d1cc607221044499c59485' }, h("svg", { key: 'b6a29a947bdcb7903e526c430cbbd6486ec496e4', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '43144f435eeaad899b446273309719e99283240f', 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"; }
|
|
@@ -42,7 +42,7 @@ export class XvTooltip {
|
|
|
42
42
|
"getter": false,
|
|
43
43
|
"setter": false,
|
|
44
44
|
"attribute": "message",
|
|
45
|
-
"reflect":
|
|
45
|
+
"reflect": true
|
|
46
46
|
},
|
|
47
47
|
"position": {
|
|
48
48
|
"type": "string",
|
|
@@ -61,8 +61,27 @@ export class XvTooltip {
|
|
|
61
61
|
"getter": false,
|
|
62
62
|
"setter": false,
|
|
63
63
|
"attribute": "position",
|
|
64
|
-
"reflect":
|
|
64
|
+
"reflect": true,
|
|
65
65
|
"defaultValue": "'top'"
|
|
66
|
+
},
|
|
67
|
+
"multiline": {
|
|
68
|
+
"type": "boolean",
|
|
69
|
+
"mutable": false,
|
|
70
|
+
"complexType": {
|
|
71
|
+
"original": "boolean",
|
|
72
|
+
"resolved": "boolean",
|
|
73
|
+
"references": {}
|
|
74
|
+
},
|
|
75
|
+
"required": false,
|
|
76
|
+
"optional": false,
|
|
77
|
+
"docs": {
|
|
78
|
+
"tags": [],
|
|
79
|
+
"text": ""
|
|
80
|
+
},
|
|
81
|
+
"getter": false,
|
|
82
|
+
"setter": false,
|
|
83
|
+
"attribute": "multiline",
|
|
84
|
+
"reflect": true
|
|
66
85
|
}
|
|
67
86
|
};
|
|
68
87
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xv-tooltip.js","sourceRoot":"","sources":["../../../src/components/xv-tooltip/xv-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;IALtB;QAQE;;;;WAIG;
|
|
1
|
+
{"version":3,"file":"xv-tooltip.js","sourceRoot":"","sources":["../../../src/components/xv-tooltip/xv-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;IALtB;QAQE;;;;WAIG;QACsB,aAAQ,GAAoG,KAAK,CAAC;KAiB5I;IAdC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,cAAc,IAAI,CAAC,QAAQ,EAAE;YAC/D;gBACE,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE;oBACjF,6DACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,yTAAyT,GAC3T,CACE,CACD,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'xv-tooltip-v2',\n styleUrl: 'xv-tooltip.scss',\n shadow: true,\n})\nexport class XvTooltip {\n /** Message what will be shown for tooltip **/\n @Prop({ reflect: true }) message: string;\n /**\n * Tooltip and arrow position related to element\n * possible options: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'.\n * By default, \"top\"\n */\n @Prop({ reflect: true }) position: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right' = 'top';\n\n @Prop({ reflect: true }) multiline: boolean;\n render() {\n return (\n <Host tooltip={this.message} class={`xv-tooltip_${this.position}`}>\n <slot>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width={16} height={16}>\n <path\n fill=\"currentColor\"\n 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\"\n />\n </svg>\n </slot>\n </Host>\n );\n }\n}\n"]}
|
package/dist/esm/loader.js
CHANGED
|
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await globalScripts();
|
|
8
|
-
return bootstrapLazy([["xv-breadcrumbs-v2",[[1,"xv-breadcrumbs-v2"]]],["xv-accordion-v2_26",[[1,"xv-table-v2-row",{"checked":[1540],"partial":[1540],"name":[1537],"value":[520],"hover":[1540],"readonly":[516],"required":[516],"disabled":[516],"header":[516],"variant":[1537]},null,{"checked":["checkedChangeHandle"]}],[1,"xv-
|
|
8
|
+
return bootstrapLazy([["xv-breadcrumbs-v2",[[1,"xv-breadcrumbs-v2"]]],["xv-accordion-v2_26",[[1,"xv-table-v2-row",{"checked":[1540],"partial":[1540],"name":[1537],"value":[520],"hover":[1540],"readonly":[516],"required":[516],"disabled":[516],"header":[516],"variant":[1537]},null,{"checked":["checkedChangeHandle"]}],[1,"xv-dropdown-v2",{"disabled":[516],"multiple":[516],"required":[516],"loading":[516],"open":[1540],"error":[513],"label":[513],"helper":[513],"warning":[513],"placeholder":[513],"size":[1],"defaultValue":[8,"default-value"],"selected":[32],"selectedMap":[32]},[[0,"itemSelected","handleItemSelected"]],{"open":["openChangeHandle"]}],[1,"xv-tab-v2",{"label":[513],"disabled":[516],"loading":[516],"name":[8]}],[1,"xv-table-v2",{"size":[513],"hover":[516],"loading":[516],"colsSize":[16],"selected":[32],"selectedCount":[32]},[[0,"checkedChange","handleCheckedChange"]],{"colsSize":["setColsSizeTemplate"]}],[1,"xv-tabs-v2",{"active":[1544],"loading":[516],"variant":[1],"emptyMessage":[1,"empty-message"],"showArrows":[516,"show-arrows"],"tabElements":[32]}],[65,"xv-text-input-v2",{"label":[513],"placeholder":[513],"helper":[513],"name":[513],"size":[513],"status":[513],"value":[1537],"disabled":[516],"readonly":[516],"loading":[516]}],[1,"xv-accordion-v2",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}],[1,"xv-accordion-v2-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]],[1,"xv-button-v2",{"label":[1],"block":[4],"type":[1],"variant":[1],"disabled":[4]}],[1,"xv-card-v2",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}],[1,"xv-dropdown-v2-item",{"disabled":[4],"value":[1544],"selected":[1540]},[[0,"click","handleClick"]]],[0,"xv-footer",{"htmlContent":[32]}],[0,"xv-header",{"htmlContent":[32]}],[1,"xv-link-v2",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}],[1,"xv-modal-v2",{"open":[1540],"permanent":[516],"size":[513],"overflow":[516],"openModal":[64],"closeModal":[64]}],[1,"xv-notification-v2",{"variant":[513],"dismissible":[516]}],[1,"xv-overflow-menu-v2",{"open":[1540],"disabled":[516],"position":[1],"size":[1]},[[0,"keydown","handleKeyDown"]],{"open":["openChangeHandle"]}],[1,"xv-overflow-menu-v2-item",{"disabled":[516],"value":[520],"variant":[1]},[[0,"click","handleClick"]]],[1,"xv-progress-indicator-v2",{"progress":[514],"variant":[1],"size":[1]},null,{"progress":["updateChildItems"]}],[1,"xv-progress-indicator-v2-item",{"status":[1]}],[1,"xv-table-v2-expand",{"open":[1540],"disabled":[516]}],[1,"xv-tag-v2",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}],[1,"xv-tooltip-v2",{"message":[513],"position":[513],"multiline":[516]}],[65,"xv-checkbox-v2",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[513],"value":[513],"readonly":[516],"required":[516],"partial":[516],"label":[1],"size":[513],"error":[520],"hasFocus":[32]},null,{"checked":["onCheckedChange"]}],[1,"xv-table-v2-cell",{"multiline":[516],"name":[1537],"align":[513],"sort":[1537]},[[0,"click","handleSort"]]],[1,"xv-loader-v2",{"show":[4],"variant":[1],"size":[1]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|