@3t-transform/threeteeui 0.1.37 → 0.1.41
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/domsanitiser.options-277161b9.js +1667 -0
- package/dist/cjs/{index-457ca775.js → index-76f14107.js} +2 -88
- package/dist/cjs/loader.cjs.js +2 -3
- package/dist/cjs/tttx-button.cjs.entry.js +25 -25
- package/dist/cjs/tttx-filter.cjs.entry.js +159 -159
- package/dist/cjs/tttx-form.cjs.entry.js +457 -373
- package/dist/cjs/tttx-icon.cjs.entry.js +11 -11
- package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +59 -59
- package/dist/cjs/tttx-list.cjs.entry.js +32 -1694
- package/dist/cjs/tttx-loading-spinner.cjs.entry.js +16 -16
- package/dist/cjs/tttx-sorter.cjs.entry.js +102 -102
- package/dist/cjs/tttx-standalone-input.cjs.entry.js +79 -79
- package/dist/cjs/tttx-toolbar.cjs.entry.js +10 -10
- package/dist/cjs/tttx.cjs.js +2 -6
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/atoms/tttx-button/tttx-button.css +4 -4
- package/dist/collection/components/atoms/tttx-button/tttx-button.js +110 -110
- package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +14 -14
- package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +62 -62
- package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +22 -22
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +109 -109
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +38 -38
- package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +67 -67
- package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +17 -17
- package/dist/collection/components/molecules/tttx-filter/tttx-filter.js +334 -334
- package/dist/collection/components/molecules/tttx-filter/tttx-filter.stories.js +62 -62
- package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js +37 -37
- package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js +61 -58
- package/dist/collection/components/molecules/tttx-form/tttx-form.css +98 -2
- package/dist/collection/components/molecules/tttx-form/tttx-form.js +477 -393
- package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +274 -218
- package/dist/collection/components/molecules/tttx-list/tttx-list.js +105 -105
- package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +43 -43
- package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.js +224 -224
- package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.stories.js +42 -42
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +759 -759
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +172 -172
- package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.js +44 -44
- package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.stories.js +14 -14
- package/dist/collection/components/palette.stories.js +7 -7
- package/dist/collection/docs/gettingstarted-developer.stories.js +5 -5
- package/dist/collection/icons.js +2838 -2838
- package/dist/collection/index.js +1 -1
- package/dist/collection/shared/domsanitiser.options.js +14 -14
- package/dist/components/domsanitiser.options.js +1664 -0
- package/dist/components/index.d.ts +0 -9
- package/dist/components/index.js +1 -1
- package/dist/components/tttx-button.js +49 -49
- package/dist/components/tttx-filter.js +191 -191
- package/dist/components/tttx-form.js +475 -391
- package/dist/components/tttx-icon2.js +28 -28
- package/dist/components/tttx-keyvalue-block.js +76 -76
- package/dist/components/tttx-list.js +54 -1716
- package/dist/components/tttx-loading-spinner.js +33 -33
- package/dist/components/tttx-sorter.js +130 -130
- package/dist/components/tttx-standalone-input.js +130 -130
- package/dist/components/tttx-toolbar.js +26 -26
- package/dist/esm/domsanitiser.options-cc420431.js +1664 -0
- package/dist/esm/{index-d784fb3e.js → index-9cde46a5.js} +3 -88
- package/dist/esm/loader.js +2 -3
- package/dist/esm/polyfills/core-js.js +0 -0
- package/dist/esm/polyfills/css-shim.js +1 -1
- package/dist/esm/polyfills/dom.js +0 -0
- package/dist/esm/polyfills/es5-html-element.js +0 -0
- package/dist/esm/polyfills/index.js +0 -0
- package/dist/esm/polyfills/system.js +0 -0
- package/dist/esm/tttx-button.entry.js +25 -25
- package/dist/esm/tttx-filter.entry.js +159 -159
- package/dist/esm/tttx-form.entry.js +457 -373
- package/dist/esm/tttx-icon.entry.js +11 -11
- package/dist/esm/tttx-keyvalue-block.entry.js +59 -59
- package/dist/esm/tttx-list.entry.js +32 -1694
- package/dist/esm/tttx-loading-spinner.entry.js +16 -16
- package/dist/esm/tttx-sorter.entry.js +102 -102
- package/dist/esm/tttx-standalone-input.entry.js +79 -79
- package/dist/esm/tttx-toolbar.entry.js +10 -10
- package/dist/esm/tttx.js +2 -3
- package/dist/tttx/{p-400868f1.entry.js → p-3b1be372.entry.js} +1 -1
- package/dist/tttx/{p-563605b2.entry.js → p-561224f5.entry.js} +1 -1
- package/dist/tttx/{p-b720c4ad.entry.js → p-9f1e9cc1.entry.js} +1 -1
- package/dist/tttx/{p-798a098a.entry.js → p-aef96333.entry.js} +1 -1
- package/dist/tttx/p-b4290a5b.js +3 -0
- package/dist/tttx/p-bd1edaed.entry.js +1 -0
- package/dist/tttx/p-d0ff9ad0.entry.js +1 -0
- package/dist/tttx/{p-cac26a1b.entry.js → p-d2f1aa8e.entry.js} +1 -1
- package/dist/tttx/p-db059a69.js +2 -0
- package/dist/tttx/p-dc2a37b0.entry.js +1 -0
- package/dist/tttx/{p-ab6ce9f6.entry.js → p-e53c7f9d.entry.js} +1 -1
- package/dist/tttx/{p-92cade7f.entry.js → p-f885f17a.entry.js} +1 -1
- package/dist/tttx/tttx.esm.js +1 -1
- package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +10 -10
- package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +10 -10
- package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +5 -5
- package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +20 -20
- package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +7 -7
- package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +9 -9
- package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -6
- package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +17 -17
- package/dist/types/components/molecules/tttx-filter/tttx-filter.d.ts +39 -39
- package/dist/types/components/molecules/tttx-filter/tttx-filter.stories.d.ts +68 -68
- package/dist/types/components/molecules/tttx-form/lib/setErrorState.d.ts +13 -13
- package/dist/types/components/molecules/tttx-form/lib/validityCheck.d.ts +17 -17
- package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +133 -111
- package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +278 -13
- package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +11 -11
- package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +14 -14
- package/dist/types/components/molecules/tttx-sorter/tttx-sorter.d.ts +19 -19
- package/dist/types/components/molecules/tttx-sorter/tttx-sorter.stories.d.ts +30 -30
- package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +69 -69
- package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +143 -143
- package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.d.ts +4 -4
- package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.stories.d.ts +13 -13
- package/dist/types/components/palette.stories.d.ts +6 -6
- package/dist/types/components.d.ts +1 -1
- package/dist/types/docs/gettingstarted-developer.stories.d.ts +5 -5
- package/dist/types/icons.d.ts +2 -2
- package/dist/types/index.d.ts +1 -1
- package/dist/types/shared/domsanitiser.options.d.ts +10 -10
- package/dist/types/stencil-public-runtime.d.ts +3 -59
- package/loader/index.d.ts +0 -9
- package/package.json +1 -1
- package/dist/tttx/p-0ebffdfc.js +0 -2
- package/dist/tttx/p-72e7f7dd.entry.js +0 -3
- package/dist/tttx/p-c4162029.entry.js +0 -1
- package/dist/tttx/p-eb126fd0.entry.js +0 -1
|
@@ -1,110 +1,110 @@
|
|
|
1
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2
|
-
import { Host, h } from '@stencil/core';
|
|
3
|
-
export class TttxButton {
|
|
4
|
-
constructor() {
|
|
5
|
-
this._iconcolor = 'black';
|
|
6
|
-
this.notext = undefined;
|
|
7
|
-
this.icon = undefined;
|
|
8
|
-
this.iconposition = 'left';
|
|
9
|
-
this.design = 'default';
|
|
10
|
-
}
|
|
11
|
-
componentWillLoad() {
|
|
12
|
-
this._design = this.design;
|
|
13
|
-
const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
|
|
14
|
-
if (!designs.includes(this.design)) {
|
|
15
|
-
this._design = 'default';
|
|
16
|
-
}
|
|
17
|
-
if (this._design === 'primary' || this._design === 'danger') {
|
|
18
|
-
this._iconcolor = 'white';
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
render() {
|
|
22
|
-
return (h(Host, null, h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''} ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && h("div", { class: "button-content" }, h("slot", null)), this.icon && this.iconposition === 'right' && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
|
|
23
|
-
}
|
|
24
|
-
static get is() { return "tttx-button"; }
|
|
25
|
-
static get encapsulation() { return "shadow"; }
|
|
26
|
-
static get originalStyleUrls() {
|
|
27
|
-
return {
|
|
28
|
-
"$": ["tttx-button.scss"]
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
|
-
static get styleUrls() {
|
|
32
|
-
return {
|
|
33
|
-
"$": ["tttx-button.css"]
|
|
34
|
-
};
|
|
35
|
-
}
|
|
36
|
-
static get properties() {
|
|
37
|
-
return {
|
|
38
|
-
"notext": {
|
|
39
|
-
"type": "boolean",
|
|
40
|
-
"mutable": false,
|
|
41
|
-
"complexType": {
|
|
42
|
-
"original": "boolean",
|
|
43
|
-
"resolved": "boolean",
|
|
44
|
-
"references": {}
|
|
45
|
-
},
|
|
46
|
-
"required": false,
|
|
47
|
-
"optional": false,
|
|
48
|
-
"docs": {
|
|
49
|
-
"tags": [],
|
|
50
|
-
"text": ""
|
|
51
|
-
},
|
|
52
|
-
"attribute": "notext",
|
|
53
|
-
"reflect": false
|
|
54
|
-
},
|
|
55
|
-
"icon": {
|
|
56
|
-
"type": "string",
|
|
57
|
-
"mutable": false,
|
|
58
|
-
"complexType": {
|
|
59
|
-
"original": "string",
|
|
60
|
-
"resolved": "string",
|
|
61
|
-
"references": {}
|
|
62
|
-
},
|
|
63
|
-
"required": false,
|
|
64
|
-
"optional": false,
|
|
65
|
-
"docs": {
|
|
66
|
-
"tags": [],
|
|
67
|
-
"text": ""
|
|
68
|
-
},
|
|
69
|
-
"attribute": "icon",
|
|
70
|
-
"reflect": false
|
|
71
|
-
},
|
|
72
|
-
"iconposition": {
|
|
73
|
-
"type": "string",
|
|
74
|
-
"mutable": false,
|
|
75
|
-
"complexType": {
|
|
76
|
-
"original": "'left' | 'right'",
|
|
77
|
-
"resolved": "\"left\" | \"right\"",
|
|
78
|
-
"references": {}
|
|
79
|
-
},
|
|
80
|
-
"required": false,
|
|
81
|
-
"optional": false,
|
|
82
|
-
"docs": {
|
|
83
|
-
"tags": [],
|
|
84
|
-
"text": ""
|
|
85
|
-
},
|
|
86
|
-
"attribute": "iconposition",
|
|
87
|
-
"reflect": false,
|
|
88
|
-
"defaultValue": "'left'"
|
|
89
|
-
},
|
|
90
|
-
"design": {
|
|
91
|
-
"type": "string",
|
|
92
|
-
"mutable": false,
|
|
93
|
-
"complexType": {
|
|
94
|
-
"original": "string",
|
|
95
|
-
"resolved": "string",
|
|
96
|
-
"references": {}
|
|
97
|
-
},
|
|
98
|
-
"required": false,
|
|
99
|
-
"optional": false,
|
|
100
|
-
"docs": {
|
|
101
|
-
"tags": [],
|
|
102
|
-
"text": ""
|
|
103
|
-
},
|
|
104
|
-
"attribute": "design",
|
|
105
|
-
"reflect": false,
|
|
106
|
-
"defaultValue": "'default'"
|
|
107
|
-
}
|
|
108
|
-
};
|
|
109
|
-
}
|
|
110
|
-
}
|
|
1
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2
|
+
import { Host, h } from '@stencil/core';
|
|
3
|
+
export class TttxButton {
|
|
4
|
+
constructor() {
|
|
5
|
+
this._iconcolor = 'black';
|
|
6
|
+
this.notext = undefined;
|
|
7
|
+
this.icon = undefined;
|
|
8
|
+
this.iconposition = 'left';
|
|
9
|
+
this.design = 'default';
|
|
10
|
+
}
|
|
11
|
+
componentWillLoad() {
|
|
12
|
+
this._design = this.design;
|
|
13
|
+
const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
|
|
14
|
+
if (!designs.includes(this.design)) {
|
|
15
|
+
this._design = 'default';
|
|
16
|
+
}
|
|
17
|
+
if (this._design === 'primary' || this._design === 'danger') {
|
|
18
|
+
this._iconcolor = 'white';
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
render() {
|
|
22
|
+
return (h(Host, null, h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''} ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && h("div", { class: "button-content" }, h("slot", null)), this.icon && this.iconposition === 'right' && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
|
|
23
|
+
}
|
|
24
|
+
static get is() { return "tttx-button"; }
|
|
25
|
+
static get encapsulation() { return "shadow"; }
|
|
26
|
+
static get originalStyleUrls() {
|
|
27
|
+
return {
|
|
28
|
+
"$": ["tttx-button.scss"]
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
static get styleUrls() {
|
|
32
|
+
return {
|
|
33
|
+
"$": ["tttx-button.css"]
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
static get properties() {
|
|
37
|
+
return {
|
|
38
|
+
"notext": {
|
|
39
|
+
"type": "boolean",
|
|
40
|
+
"mutable": false,
|
|
41
|
+
"complexType": {
|
|
42
|
+
"original": "boolean",
|
|
43
|
+
"resolved": "boolean",
|
|
44
|
+
"references": {}
|
|
45
|
+
},
|
|
46
|
+
"required": false,
|
|
47
|
+
"optional": false,
|
|
48
|
+
"docs": {
|
|
49
|
+
"tags": [],
|
|
50
|
+
"text": ""
|
|
51
|
+
},
|
|
52
|
+
"attribute": "notext",
|
|
53
|
+
"reflect": false
|
|
54
|
+
},
|
|
55
|
+
"icon": {
|
|
56
|
+
"type": "string",
|
|
57
|
+
"mutable": false,
|
|
58
|
+
"complexType": {
|
|
59
|
+
"original": "string",
|
|
60
|
+
"resolved": "string",
|
|
61
|
+
"references": {}
|
|
62
|
+
},
|
|
63
|
+
"required": false,
|
|
64
|
+
"optional": false,
|
|
65
|
+
"docs": {
|
|
66
|
+
"tags": [],
|
|
67
|
+
"text": ""
|
|
68
|
+
},
|
|
69
|
+
"attribute": "icon",
|
|
70
|
+
"reflect": false
|
|
71
|
+
},
|
|
72
|
+
"iconposition": {
|
|
73
|
+
"type": "string",
|
|
74
|
+
"mutable": false,
|
|
75
|
+
"complexType": {
|
|
76
|
+
"original": "'left' | 'right'",
|
|
77
|
+
"resolved": "\"left\" | \"right\"",
|
|
78
|
+
"references": {}
|
|
79
|
+
},
|
|
80
|
+
"required": false,
|
|
81
|
+
"optional": false,
|
|
82
|
+
"docs": {
|
|
83
|
+
"tags": [],
|
|
84
|
+
"text": ""
|
|
85
|
+
},
|
|
86
|
+
"attribute": "iconposition",
|
|
87
|
+
"reflect": false,
|
|
88
|
+
"defaultValue": "'left'"
|
|
89
|
+
},
|
|
90
|
+
"design": {
|
|
91
|
+
"type": "string",
|
|
92
|
+
"mutable": false,
|
|
93
|
+
"complexType": {
|
|
94
|
+
"original": "string",
|
|
95
|
+
"resolved": "string",
|
|
96
|
+
"references": {}
|
|
97
|
+
},
|
|
98
|
+
"required": false,
|
|
99
|
+
"optional": false,
|
|
100
|
+
"docs": {
|
|
101
|
+
"tags": [],
|
|
102
|
+
"text": ""
|
|
103
|
+
},
|
|
104
|
+
"attribute": "design",
|
|
105
|
+
"reflect": false,
|
|
106
|
+
"defaultValue": "'default'"
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
}
|
|
110
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
export default {
|
|
2
|
-
title: 'Atoms/Button',
|
|
3
|
-
component: 'tttx-button'
|
|
4
|
-
};
|
|
1
|
+
export default {
|
|
2
|
+
title: 'Atoms/Button',
|
|
3
|
+
component: 'tttx-button'
|
|
4
|
+
};
|
|
5
5
|
const PrimaryButtons = () => `
|
|
6
6
|
<h2>Standard</h2>
|
|
7
7
|
<tttx-button design="primary">Primary</tttx-button>
|
|
@@ -14,8 +14,8 @@ const PrimaryButtons = () => `
|
|
|
14
14
|
<hr />
|
|
15
15
|
<h2>Icon Only</h2>
|
|
16
16
|
<tttx-button design="primary" icon="more_vert" notext></tttx-button>
|
|
17
|
-
`;
|
|
18
|
-
export const Primary = PrimaryButtons.bind({});
|
|
17
|
+
`;
|
|
18
|
+
export const Primary = PrimaryButtons.bind({});
|
|
19
19
|
const DefaultButtons = () => `
|
|
20
20
|
<h2>Standard</h2>
|
|
21
21
|
<tttx-button>Default</tttx-button>
|
|
@@ -28,8 +28,8 @@ const DefaultButtons = () => `
|
|
|
28
28
|
<hr />
|
|
29
29
|
<h2>Icon Only</h2>
|
|
30
30
|
<tttx-button icon="more_vert" notext></tttx-button>
|
|
31
|
-
`;
|
|
32
|
-
export const Default = DefaultButtons.bind({});
|
|
31
|
+
`;
|
|
32
|
+
export const Default = DefaultButtons.bind({});
|
|
33
33
|
const BorderlessButtons = () => `
|
|
34
34
|
<h2>Standard</h2>
|
|
35
35
|
<tttx-button design="borderless">Borderless</tttx-button>
|
|
@@ -42,8 +42,8 @@ const BorderlessButtons = () => `
|
|
|
42
42
|
<hr />
|
|
43
43
|
<h2>Icon Only</h2>
|
|
44
44
|
<tttx-button design="borderless" icon="more_vert" notext></tttx-button>
|
|
45
|
-
`;
|
|
46
|
-
export const Borderless = BorderlessButtons.bind({});
|
|
45
|
+
`;
|
|
46
|
+
export const Borderless = BorderlessButtons.bind({});
|
|
47
47
|
const DangerButtons = () => `
|
|
48
48
|
<h2>Standard</h2>
|
|
49
49
|
<tttx-button design="danger">Danger</tttx-button>
|
|
@@ -56,8 +56,8 @@ const DangerButtons = () => `
|
|
|
56
56
|
<hr />
|
|
57
57
|
<h2>Icon Only</h2>
|
|
58
58
|
<tttx-button design="danger" icon="more_vert" notext></tttx-button>
|
|
59
|
-
`;
|
|
60
|
-
export const Danger = DangerButtons.bind({});
|
|
59
|
+
`;
|
|
60
|
+
export const Danger = DangerButtons.bind({});
|
|
61
61
|
const DisabledButtons = () => `
|
|
62
62
|
<h2>Standard</h2>
|
|
63
63
|
<tttx-button design="disabled">Disabled</tttx-button>
|
|
@@ -70,5 +70,5 @@ const DisabledButtons = () => `
|
|
|
70
70
|
<hr />
|
|
71
71
|
<h2>Icon Only</h2>
|
|
72
72
|
<tttx-button design="disabled" icon="more_vert" notext></tttx-button>
|
|
73
|
-
`;
|
|
74
|
-
export const Disabled = DisabledButtons.bind({});
|
|
73
|
+
`;
|
|
74
|
+
export const Disabled = DisabledButtons.bind({});
|
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2
|
-
import { Host, h } from '@stencil/core';
|
|
3
|
-
export class TttxIcon {
|
|
4
|
-
constructor() {
|
|
5
|
-
this.icon = undefined;
|
|
6
|
-
this.color = 'grey';
|
|
7
|
-
}
|
|
8
|
-
render() {
|
|
9
|
-
return (h(Host, null, h("span", { class: `material-symbols-rounded ${this.color ? this.color : ''}` }, this.icon)));
|
|
10
|
-
}
|
|
11
|
-
static get is() { return "tttx-icon"; }
|
|
12
|
-
static get encapsulation() { return "shadow"; }
|
|
13
|
-
static get originalStyleUrls() {
|
|
14
|
-
return {
|
|
15
|
-
"$": ["tttx-icon.scss"]
|
|
16
|
-
};
|
|
17
|
-
}
|
|
18
|
-
static get styleUrls() {
|
|
19
|
-
return {
|
|
20
|
-
"$": ["tttx-icon.css"]
|
|
21
|
-
};
|
|
22
|
-
}
|
|
23
|
-
static get properties() {
|
|
24
|
-
return {
|
|
25
|
-
"icon": {
|
|
26
|
-
"type": "string",
|
|
27
|
-
"mutable": false,
|
|
28
|
-
"complexType": {
|
|
29
|
-
"original": "string",
|
|
30
|
-
"resolved": "string",
|
|
31
|
-
"references": {}
|
|
32
|
-
},
|
|
33
|
-
"required": false,
|
|
34
|
-
"optional": false,
|
|
35
|
-
"docs": {
|
|
36
|
-
"tags": [],
|
|
37
|
-
"text": ""
|
|
38
|
-
},
|
|
39
|
-
"attribute": "icon",
|
|
40
|
-
"reflect": false
|
|
41
|
-
},
|
|
42
|
-
"color": {
|
|
43
|
-
"type": "string",
|
|
44
|
-
"mutable": false,
|
|
45
|
-
"complexType": {
|
|
46
|
-
"original": "string",
|
|
47
|
-
"resolved": "string",
|
|
48
|
-
"references": {}
|
|
49
|
-
},
|
|
50
|
-
"required": false,
|
|
51
|
-
"optional": false,
|
|
52
|
-
"docs": {
|
|
53
|
-
"tags": [],
|
|
54
|
-
"text": ""
|
|
55
|
-
},
|
|
56
|
-
"attribute": "color",
|
|
57
|
-
"reflect": false,
|
|
58
|
-
"defaultValue": "'grey'"
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
}
|
|
62
|
-
}
|
|
1
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2
|
+
import { Host, h } from '@stencil/core';
|
|
3
|
+
export class TttxIcon {
|
|
4
|
+
constructor() {
|
|
5
|
+
this.icon = undefined;
|
|
6
|
+
this.color = 'grey';
|
|
7
|
+
}
|
|
8
|
+
render() {
|
|
9
|
+
return (h(Host, null, h("span", { class: `material-symbols-rounded ${this.color ? this.color : ''}` }, this.icon)));
|
|
10
|
+
}
|
|
11
|
+
static get is() { return "tttx-icon"; }
|
|
12
|
+
static get encapsulation() { return "shadow"; }
|
|
13
|
+
static get originalStyleUrls() {
|
|
14
|
+
return {
|
|
15
|
+
"$": ["tttx-icon.scss"]
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
static get styleUrls() {
|
|
19
|
+
return {
|
|
20
|
+
"$": ["tttx-icon.css"]
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
static get properties() {
|
|
24
|
+
return {
|
|
25
|
+
"icon": {
|
|
26
|
+
"type": "string",
|
|
27
|
+
"mutable": false,
|
|
28
|
+
"complexType": {
|
|
29
|
+
"original": "string",
|
|
30
|
+
"resolved": "string",
|
|
31
|
+
"references": {}
|
|
32
|
+
},
|
|
33
|
+
"required": false,
|
|
34
|
+
"optional": false,
|
|
35
|
+
"docs": {
|
|
36
|
+
"tags": [],
|
|
37
|
+
"text": ""
|
|
38
|
+
},
|
|
39
|
+
"attribute": "icon",
|
|
40
|
+
"reflect": false
|
|
41
|
+
},
|
|
42
|
+
"color": {
|
|
43
|
+
"type": "string",
|
|
44
|
+
"mutable": false,
|
|
45
|
+
"complexType": {
|
|
46
|
+
"original": "string",
|
|
47
|
+
"resolved": "string",
|
|
48
|
+
"references": {}
|
|
49
|
+
},
|
|
50
|
+
"required": false,
|
|
51
|
+
"optional": false,
|
|
52
|
+
"docs": {
|
|
53
|
+
"tags": [],
|
|
54
|
+
"text": ""
|
|
55
|
+
},
|
|
56
|
+
"attribute": "color",
|
|
57
|
+
"reflect": false,
|
|
58
|
+
"defaultValue": "'grey'"
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import icons from './../../../icons';
|
|
2
|
-
const colors = ['red', 'blue', 'black', 'white', 'gray', 'green', 'orange', 'darkred'];
|
|
3
|
-
export default {
|
|
4
|
-
title: 'Atoms/Icons',
|
|
5
|
-
component: 'tttx-icon',
|
|
6
|
-
argTypes: {
|
|
7
|
-
icon: {
|
|
8
|
-
control: { type: 'select' },
|
|
9
|
-
options: icons,
|
|
10
|
-
},
|
|
11
|
-
color: {
|
|
12
|
-
control: { type: 'select' },
|
|
13
|
-
options: colors,
|
|
14
|
-
},
|
|
15
|
-
},
|
|
16
|
-
};
|
|
17
|
-
const Template = ({ icon, color }) => `<tttx-icon icon="${icon}" color="${color}" />`;
|
|
18
|
-
export const Icon = Template.bind({});
|
|
19
|
-
Icon.args = {
|
|
20
|
-
icon: 'warning',
|
|
21
|
-
color: 'red',
|
|
22
|
-
};
|
|
1
|
+
import icons from './../../../icons';
|
|
2
|
+
const colors = ['red', 'blue', 'black', 'white', 'gray', 'green', 'orange', 'darkred'];
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Atoms/Icons',
|
|
5
|
+
component: 'tttx-icon',
|
|
6
|
+
argTypes: {
|
|
7
|
+
icon: {
|
|
8
|
+
control: { type: 'select' },
|
|
9
|
+
options: icons,
|
|
10
|
+
},
|
|
11
|
+
color: {
|
|
12
|
+
control: { type: 'select' },
|
|
13
|
+
options: colors,
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
};
|
|
17
|
+
const Template = ({ icon, color }) => `<tttx-icon icon="${icon}" color="${color}" />`;
|
|
18
|
+
export const Icon = Template.bind({});
|
|
19
|
+
Icon.args = {
|
|
20
|
+
icon: 'warning',
|
|
21
|
+
color: 'red',
|
|
22
|
+
};
|
|
@@ -1,109 +1,109 @@
|
|
|
1
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2
|
-
import { h, Host } from '@stencil/core';
|
|
3
|
-
export class TttxKeyvalueBlock {
|
|
4
|
-
constructor() {
|
|
5
|
-
this.keyvalues = undefined;
|
|
6
|
-
this.horizontal = undefined;
|
|
7
|
-
}
|
|
8
|
-
renderSingleElements(values) {
|
|
9
|
-
const keys = Object.keys(values);
|
|
10
|
-
const elements = [];
|
|
11
|
-
const divSize = (100 / keys.length).toString() + '%';
|
|
12
|
-
for (let i = 0; i < keys.length; i++) {
|
|
13
|
-
if (this.horizontal) {
|
|
14
|
-
elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", null, keys[i]), h("dd", null, values[keys[i]])));
|
|
15
|
-
}
|
|
16
|
-
else {
|
|
17
|
-
elements.push(h("dt", null, keys[i]));
|
|
18
|
-
elements.push(h("dd", null, values[keys[i]]));
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
return elements;
|
|
22
|
-
}
|
|
23
|
-
renderArrayElements(values) {
|
|
24
|
-
const elements = [];
|
|
25
|
-
const divSize = (100 / values.length).toString() + '%';
|
|
26
|
-
for (let i = 0; i < values.length; i++) {
|
|
27
|
-
const value = values[i];
|
|
28
|
-
if (this.horizontal) {
|
|
29
|
-
elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", { class: 'mainTitle' }, value.title), h("dt", { class: 'subTitle' }, value.subTitle), h("dd", null, value.data)));
|
|
30
|
-
}
|
|
31
|
-
else {
|
|
32
|
-
elements.push(h("dt", { class: 'mainTitle' }, value.title));
|
|
33
|
-
elements.push(h("dt", { class: 'subTitle' }, value.subTitle));
|
|
34
|
-
elements.push(h("dd", null, value.data));
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
return elements;
|
|
38
|
-
}
|
|
39
|
-
render() {
|
|
40
|
-
if (!this.keyvalues) {
|
|
41
|
-
return;
|
|
42
|
-
}
|
|
43
|
-
let values;
|
|
44
|
-
if (typeof this.keyvalues === 'string') {
|
|
45
|
-
values = JSON.parse(this.keyvalues);
|
|
46
|
-
}
|
|
47
|
-
else {
|
|
48
|
-
values = this.keyvalues;
|
|
49
|
-
}
|
|
50
|
-
let elements;
|
|
51
|
-
if (Array.isArray(values)) {
|
|
52
|
-
elements = this.renderArrayElements(values);
|
|
53
|
-
}
|
|
54
|
-
else {
|
|
55
|
-
elements = this.renderSingleElements(values);
|
|
56
|
-
}
|
|
57
|
-
return (h(Host, null, h("dl", { class: this.horizontal ? 'horizontal' : null }, elements)));
|
|
58
|
-
}
|
|
59
|
-
static get is() { return "tttx-keyvalue-block"; }
|
|
60
|
-
static get encapsulation() { return "shadow"; }
|
|
61
|
-
static get originalStyleUrls() {
|
|
62
|
-
return {
|
|
63
|
-
"$": ["tttx-keyvalue-block.scss"]
|
|
64
|
-
};
|
|
65
|
-
}
|
|
66
|
-
static get styleUrls() {
|
|
67
|
-
return {
|
|
68
|
-
"$": ["tttx-keyvalue-block.css"]
|
|
69
|
-
};
|
|
70
|
-
}
|
|
71
|
-
static get properties() {
|
|
72
|
-
return {
|
|
73
|
-
"keyvalues": {
|
|
74
|
-
"type": "any",
|
|
75
|
-
"mutable": false,
|
|
76
|
-
"complexType": {
|
|
77
|
-
"original": "any | any[] | string",
|
|
78
|
-
"resolved": "any",
|
|
79
|
-
"references": {}
|
|
80
|
-
},
|
|
81
|
-
"required": false,
|
|
82
|
-
"optional": false,
|
|
83
|
-
"docs": {
|
|
84
|
-
"tags": [],
|
|
85
|
-
"text": ""
|
|
86
|
-
},
|
|
87
|
-
"attribute": "keyvalues",
|
|
88
|
-
"reflect": false
|
|
89
|
-
},
|
|
90
|
-
"horizontal": {
|
|
91
|
-
"type": "boolean",
|
|
92
|
-
"mutable": false,
|
|
93
|
-
"complexType": {
|
|
94
|
-
"original": "boolean",
|
|
95
|
-
"resolved": "boolean",
|
|
96
|
-
"references": {}
|
|
97
|
-
},
|
|
98
|
-
"required": false,
|
|
99
|
-
"optional": false,
|
|
100
|
-
"docs": {
|
|
101
|
-
"tags": [],
|
|
102
|
-
"text": ""
|
|
103
|
-
},
|
|
104
|
-
"attribute": "horizontal",
|
|
105
|
-
"reflect": false
|
|
106
|
-
}
|
|
107
|
-
};
|
|
108
|
-
}
|
|
109
|
-
}
|
|
1
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2
|
+
import { h, Host } from '@stencil/core';
|
|
3
|
+
export class TttxKeyvalueBlock {
|
|
4
|
+
constructor() {
|
|
5
|
+
this.keyvalues = undefined;
|
|
6
|
+
this.horizontal = undefined;
|
|
7
|
+
}
|
|
8
|
+
renderSingleElements(values) {
|
|
9
|
+
const keys = Object.keys(values);
|
|
10
|
+
const elements = [];
|
|
11
|
+
const divSize = (100 / keys.length).toString() + '%';
|
|
12
|
+
for (let i = 0; i < keys.length; i++) {
|
|
13
|
+
if (this.horizontal) {
|
|
14
|
+
elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", null, keys[i]), h("dd", null, values[keys[i]])));
|
|
15
|
+
}
|
|
16
|
+
else {
|
|
17
|
+
elements.push(h("dt", null, keys[i]));
|
|
18
|
+
elements.push(h("dd", null, values[keys[i]]));
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
return elements;
|
|
22
|
+
}
|
|
23
|
+
renderArrayElements(values) {
|
|
24
|
+
const elements = [];
|
|
25
|
+
const divSize = (100 / values.length).toString() + '%';
|
|
26
|
+
for (let i = 0; i < values.length; i++) {
|
|
27
|
+
const value = values[i];
|
|
28
|
+
if (this.horizontal) {
|
|
29
|
+
elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", { class: 'mainTitle' }, value.title), h("dt", { class: 'subTitle' }, value.subTitle), h("dd", null, value.data)));
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
elements.push(h("dt", { class: 'mainTitle' }, value.title));
|
|
33
|
+
elements.push(h("dt", { class: 'subTitle' }, value.subTitle));
|
|
34
|
+
elements.push(h("dd", null, value.data));
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
return elements;
|
|
38
|
+
}
|
|
39
|
+
render() {
|
|
40
|
+
if (!this.keyvalues) {
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
let values;
|
|
44
|
+
if (typeof this.keyvalues === 'string') {
|
|
45
|
+
values = JSON.parse(this.keyvalues);
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
values = this.keyvalues;
|
|
49
|
+
}
|
|
50
|
+
let elements;
|
|
51
|
+
if (Array.isArray(values)) {
|
|
52
|
+
elements = this.renderArrayElements(values);
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
elements = this.renderSingleElements(values);
|
|
56
|
+
}
|
|
57
|
+
return (h(Host, null, h("dl", { class: this.horizontal ? 'horizontal' : null }, elements)));
|
|
58
|
+
}
|
|
59
|
+
static get is() { return "tttx-keyvalue-block"; }
|
|
60
|
+
static get encapsulation() { return "shadow"; }
|
|
61
|
+
static get originalStyleUrls() {
|
|
62
|
+
return {
|
|
63
|
+
"$": ["tttx-keyvalue-block.scss"]
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
static get styleUrls() {
|
|
67
|
+
return {
|
|
68
|
+
"$": ["tttx-keyvalue-block.css"]
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
static get properties() {
|
|
72
|
+
return {
|
|
73
|
+
"keyvalues": {
|
|
74
|
+
"type": "any",
|
|
75
|
+
"mutable": false,
|
|
76
|
+
"complexType": {
|
|
77
|
+
"original": "any | any[] | string",
|
|
78
|
+
"resolved": "any",
|
|
79
|
+
"references": {}
|
|
80
|
+
},
|
|
81
|
+
"required": false,
|
|
82
|
+
"optional": false,
|
|
83
|
+
"docs": {
|
|
84
|
+
"tags": [],
|
|
85
|
+
"text": ""
|
|
86
|
+
},
|
|
87
|
+
"attribute": "keyvalues",
|
|
88
|
+
"reflect": false
|
|
89
|
+
},
|
|
90
|
+
"horizontal": {
|
|
91
|
+
"type": "boolean",
|
|
92
|
+
"mutable": false,
|
|
93
|
+
"complexType": {
|
|
94
|
+
"original": "boolean",
|
|
95
|
+
"resolved": "boolean",
|
|
96
|
+
"references": {}
|
|
97
|
+
},
|
|
98
|
+
"required": false,
|
|
99
|
+
"optional": false,
|
|
100
|
+
"docs": {
|
|
101
|
+
"tags": [],
|
|
102
|
+
"text": ""
|
|
103
|
+
},
|
|
104
|
+
"attribute": "horizontal",
|
|
105
|
+
"reflect": false
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
}
|
|
109
|
+
}
|