@3t-transform/threeteeui 0.1.21 → 0.1.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-b8a62ede.js → index-dc6cc829.js} +2 -88
- package/dist/cjs/loader.cjs.js +3 -4
- package/dist/cjs/tttx-button.cjs.entry.js +24 -24
- package/dist/cjs/tttx-filter.cjs.entry.js +152 -152
- package/dist/cjs/tttx-form.cjs.entry.js +363 -363
- 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 +43 -43
- package/dist/cjs/tttx-loading-spinner.cjs.entry.js +16 -16
- package/dist/cjs/tttx-sorter.cjs.entry.js +112 -0
- package/dist/cjs/tttx-standalone-input.cjs.entry.js +60 -60
- package/dist/cjs/tttx-toolbar.cjs.entry.js +10 -10
- package/dist/cjs/tttx.cjs.js +3 -7
- package/dist/collection/collection-manifest.json +3 -2
- 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 +325 -325
- package/dist/collection/components/molecules/tttx-filter/tttx-filter.stories.js +89 -89
- package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js +35 -35
- package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js +58 -58
- package/dist/collection/components/molecules/tttx-form/tttx-form.js +364 -364
- package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +127 -127
- 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.css +108 -0
- package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.js +224 -0
- package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.stories.js +49 -0
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +627 -627
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +157 -157
- 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/index.d.ts +1 -9
- package/dist/components/index.js +2 -1
- package/dist/components/tttx-button.js +48 -48
- package/dist/components/tttx-filter.js +184 -184
- package/dist/components/tttx-form.js +380 -380
- package/dist/components/tttx-icon2.js +28 -28
- package/dist/components/tttx-keyvalue-block.js +76 -76
- package/dist/components/tttx-list.js +65 -65
- package/dist/components/tttx-loading-spinner.js +33 -33
- package/dist/components/tttx-sorter.d.ts +11 -0
- package/dist/components/tttx-sorter.js +141 -0
- package/dist/components/tttx-standalone-input.js +107 -107
- package/dist/components/tttx-toolbar.js +26 -26
- package/dist/esm/{index-e888a5f4.js → index-86faeaab.js} +3 -88
- package/dist/esm/loader.js +3 -4
- 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 +24 -24
- package/dist/esm/tttx-filter.entry.js +152 -152
- package/dist/esm/tttx-form.entry.js +363 -363
- 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 +43 -43
- package/dist/esm/tttx-loading-spinner.entry.js +16 -16
- package/dist/esm/tttx-sorter.entry.js +108 -0
- package/dist/esm/tttx-standalone-input.entry.js +60 -60
- package/dist/esm/tttx-toolbar.entry.js +10 -10
- package/dist/esm/tttx.js +3 -4
- package/dist/tttx/p-12fc0b16.entry.js +3 -0
- package/dist/tttx/p-52a47b7c.js +2 -0
- package/dist/tttx/{p-41f5b296.entry.js → p-603f6ebe.entry.js} +1 -1
- package/dist/tttx/{p-e145951b.entry.js → p-72b4c98a.entry.js} +1 -1
- package/dist/tttx/{p-043f9b8a.entry.js → p-8f3badad.entry.js} +1 -1
- package/dist/tttx/{p-4cf3e1e0.entry.js → p-ae48fe5a.entry.js} +1 -1
- package/dist/tttx/{p-01f4628e.entry.js → p-bdb054b2.entry.js} +1 -1
- package/dist/tttx/{p-dc5c356b.entry.js → p-c72d1a03.entry.js} +1 -1
- package/dist/tttx/{p-96bbf1ed.entry.js → p-e25d5fe2.entry.js} +1 -1
- package/dist/tttx/p-f19194f8.entry.js +1 -0
- package/dist/tttx/{p-b3a03986.entry.js → p-f1d7eb35.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 +37 -37
- package/dist/types/components/molecules/tttx-filter/tttx-filter.stories.d.ts +43 -43
- 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 +114 -114
- package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +13 -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/interfaces.d.ts +9 -0
- package/dist/types/components/molecules/tttx-sorter/tttx-sorter.d.ts +19 -0
- package/dist/types/components/molecules/tttx-sorter/tttx-sorter.stories.d.ts +30 -0
- package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +56 -56
- package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +123 -123
- 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 +27 -0
- 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-6dff6b5a.entry.js +0 -3
- package/dist/tttx/p-f764ffc4.js +0 -2
|
@@ -8,12 +8,13 @@
|
|
|
8
8
|
"./components/atoms/tttx-loading-spinner/tttx-loading-spinner.js",
|
|
9
9
|
"./components/molecules/tttx-form/tttx-form.js",
|
|
10
10
|
"./components/molecules/tttx-list/tttx-list.js",
|
|
11
|
+
"./components/molecules/tttx-sorter/tttx-sorter.js",
|
|
11
12
|
"./components/molecules/tttx-toolbar/tttx-toolbar.js"
|
|
12
13
|
],
|
|
13
14
|
"compiler": {
|
|
14
15
|
"name": "@stencil/core",
|
|
15
|
-
"version": "2.
|
|
16
|
-
"typescriptVersion": "4.
|
|
16
|
+
"version": "2.20.0",
|
|
17
|
+
"typescriptVersion": "4.8.4"
|
|
17
18
|
},
|
|
18
19
|
"collections": [],
|
|
19
20
|
"bundles": []
|
|
@@ -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
|
+
};
|