@3t-transform/threeteeui 0.1.36 → 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.
Files changed (125) hide show
  1. package/dist/cjs/domsanitiser.options-277161b9.js +1667 -0
  2. package/dist/cjs/{index-457ca775.js → index-76f14107.js} +2 -88
  3. package/dist/cjs/loader.cjs.js +2 -3
  4. package/dist/cjs/tttx-button.cjs.entry.js +25 -25
  5. package/dist/cjs/tttx-filter.cjs.entry.js +159 -159
  6. package/dist/cjs/tttx-form.cjs.entry.js +457 -373
  7. package/dist/cjs/tttx-icon.cjs.entry.js +11 -11
  8. package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +59 -59
  9. package/dist/cjs/tttx-list.cjs.entry.js +32 -1694
  10. package/dist/cjs/tttx-loading-spinner.cjs.entry.js +16 -16
  11. package/dist/cjs/tttx-sorter.cjs.entry.js +102 -102
  12. package/dist/cjs/tttx-standalone-input.cjs.entry.js +79 -79
  13. package/dist/cjs/tttx-toolbar.cjs.entry.js +10 -10
  14. package/dist/cjs/tttx.cjs.js +2 -6
  15. package/dist/collection/collection-manifest.json +2 -2
  16. package/dist/collection/components/atoms/tttx-button/tttx-button.css +4 -4
  17. package/dist/collection/components/atoms/tttx-button/tttx-button.js +110 -110
  18. package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +14 -14
  19. package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +62 -62
  20. package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +22 -22
  21. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +109 -109
  22. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +38 -38
  23. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +67 -67
  24. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +17 -17
  25. package/dist/collection/components/molecules/tttx-filter/tttx-filter.js +334 -334
  26. package/dist/collection/components/molecules/tttx-filter/tttx-filter.stories.js +62 -62
  27. package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js +37 -37
  28. package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js +61 -58
  29. package/dist/collection/components/molecules/tttx-form/tttx-form.css +98 -2
  30. package/dist/collection/components/molecules/tttx-form/tttx-form.js +477 -393
  31. package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +274 -218
  32. package/dist/collection/components/molecules/tttx-list/tttx-list.js +105 -105
  33. package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +43 -43
  34. package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.js +224 -224
  35. package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.stories.js +42 -42
  36. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +759 -759
  37. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +172 -172
  38. package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.js +44 -44
  39. package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.stories.js +14 -14
  40. package/dist/collection/components/palette.stories.js +7 -7
  41. package/dist/collection/docs/gettingstarted-developer.stories.js +5 -5
  42. package/dist/collection/icons.js +2838 -2838
  43. package/dist/collection/index.js +1 -1
  44. package/dist/collection/shared/domsanitiser.options.js +14 -14
  45. package/dist/components/domsanitiser.options.js +1664 -0
  46. package/dist/components/index.d.ts +0 -9
  47. package/dist/components/index.js +1 -1
  48. package/dist/components/tttx-button.js +49 -49
  49. package/dist/components/tttx-filter.js +191 -191
  50. package/dist/components/tttx-form.js +475 -391
  51. package/dist/components/tttx-icon2.js +28 -28
  52. package/dist/components/tttx-keyvalue-block.js +76 -76
  53. package/dist/components/tttx-list.js +54 -1716
  54. package/dist/components/tttx-loading-spinner.js +33 -33
  55. package/dist/components/tttx-sorter.js +130 -130
  56. package/dist/components/tttx-standalone-input.js +130 -130
  57. package/dist/components/tttx-toolbar.js +26 -26
  58. package/dist/esm/domsanitiser.options-cc420431.js +1664 -0
  59. package/dist/esm/{index-d784fb3e.js → index-9cde46a5.js} +3 -88
  60. package/dist/esm/loader.js +2 -3
  61. package/dist/esm/polyfills/core-js.js +0 -0
  62. package/dist/esm/polyfills/css-shim.js +1 -1
  63. package/dist/esm/polyfills/dom.js +0 -0
  64. package/dist/esm/polyfills/es5-html-element.js +0 -0
  65. package/dist/esm/polyfills/index.js +0 -0
  66. package/dist/esm/polyfills/system.js +0 -0
  67. package/dist/esm/tttx-button.entry.js +25 -25
  68. package/dist/esm/tttx-filter.entry.js +159 -159
  69. package/dist/esm/tttx-form.entry.js +457 -373
  70. package/dist/esm/tttx-icon.entry.js +11 -11
  71. package/dist/esm/tttx-keyvalue-block.entry.js +59 -59
  72. package/dist/esm/tttx-list.entry.js +32 -1694
  73. package/dist/esm/tttx-loading-spinner.entry.js +16 -16
  74. package/dist/esm/tttx-sorter.entry.js +102 -102
  75. package/dist/esm/tttx-standalone-input.entry.js +79 -79
  76. package/dist/esm/tttx-toolbar.entry.js +10 -10
  77. package/dist/esm/tttx.js +2 -3
  78. package/dist/tttx/{p-400868f1.entry.js → p-3b1be372.entry.js} +1 -1
  79. package/dist/tttx/{p-563605b2.entry.js → p-561224f5.entry.js} +1 -1
  80. package/dist/tttx/{p-b720c4ad.entry.js → p-9f1e9cc1.entry.js} +1 -1
  81. package/dist/tttx/{p-798a098a.entry.js → p-aef96333.entry.js} +1 -1
  82. package/dist/tttx/p-b4290a5b.js +3 -0
  83. package/dist/tttx/p-bd1edaed.entry.js +1 -0
  84. package/dist/tttx/p-d0ff9ad0.entry.js +1 -0
  85. package/dist/tttx/{p-cac26a1b.entry.js → p-d2f1aa8e.entry.js} +1 -1
  86. package/dist/tttx/p-db059a69.js +2 -0
  87. package/dist/tttx/p-dc2a37b0.entry.js +1 -0
  88. package/dist/tttx/{p-ab6ce9f6.entry.js → p-e53c7f9d.entry.js} +1 -1
  89. package/dist/tttx/{p-92cade7f.entry.js → p-f885f17a.entry.js} +1 -1
  90. package/dist/tttx/tttx.esm.js +1 -1
  91. package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +10 -10
  92. package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +10 -10
  93. package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +5 -5
  94. package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +20 -20
  95. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +7 -7
  96. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +9 -9
  97. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -6
  98. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +17 -17
  99. package/dist/types/components/molecules/tttx-filter/tttx-filter.d.ts +39 -39
  100. package/dist/types/components/molecules/tttx-filter/tttx-filter.stories.d.ts +68 -68
  101. package/dist/types/components/molecules/tttx-form/lib/setErrorState.d.ts +13 -13
  102. package/dist/types/components/molecules/tttx-form/lib/validityCheck.d.ts +17 -17
  103. package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +133 -111
  104. package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +278 -13
  105. package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +11 -11
  106. package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +14 -14
  107. package/dist/types/components/molecules/tttx-sorter/tttx-sorter.d.ts +19 -19
  108. package/dist/types/components/molecules/tttx-sorter/tttx-sorter.stories.d.ts +30 -30
  109. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +69 -69
  110. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +143 -143
  111. package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.d.ts +4 -4
  112. package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.stories.d.ts +13 -13
  113. package/dist/types/components/palette.stories.d.ts +6 -6
  114. package/dist/types/components.d.ts +1 -1
  115. package/dist/types/docs/gettingstarted-developer.stories.d.ts +5 -5
  116. package/dist/types/icons.d.ts +2 -2
  117. package/dist/types/index.d.ts +1 -1
  118. package/dist/types/shared/domsanitiser.options.d.ts +10 -10
  119. package/dist/types/stencil-public-runtime.d.ts +3 -59
  120. package/loader/index.d.ts +0 -9
  121. package/package.json +1 -1
  122. package/dist/tttx/p-0ebffdfc.js +0 -2
  123. package/dist/tttx/p-72e7f7dd.entry.js +0 -3
  124. package/dist/tttx/p-c4162029.entry.js +0 -1
  125. 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
+ }