@3t-transform/threeteeui 0.1.37 → 0.1.42

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 (155) hide show
  1. package/dist/cjs/app-globals-3a1e7e63.js +5 -0
  2. package/dist/cjs/css-shim-211819bc.js +6 -0
  3. package/dist/cjs/dom-9deb26c8.js +75 -0
  4. package/dist/cjs/domsanitiser.options-277161b9.js +1667 -0
  5. package/dist/cjs/domsanitiser.options-3f1501b5.js +1697 -0
  6. package/dist/cjs/index-39a867c5.js +3298 -0
  7. package/dist/cjs/{index-457ca775.js → index-76f14107.js} +2 -88
  8. package/dist/cjs/loader.cjs.js +18 -3
  9. package/dist/cjs/shadow-css-bf3843d2.js +389 -0
  10. package/dist/cjs/tttx-button.cjs.entry.js +25 -25
  11. package/dist/cjs/tttx-filter.cjs.entry.js +159 -159
  12. package/dist/cjs/tttx-form.cjs.entry.js +459 -373
  13. package/dist/cjs/tttx-icon.cjs.entry.js +11 -11
  14. package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +59 -59
  15. package/dist/cjs/tttx-list.cjs.entry.js +32 -1694
  16. package/dist/cjs/tttx-loading-spinner.cjs.entry.js +16 -16
  17. package/dist/cjs/tttx-sorter.cjs.entry.js +102 -102
  18. package/dist/cjs/tttx-standalone-input.cjs.entry.js +79 -79
  19. package/dist/cjs/tttx-toolbar.cjs.entry.js +10 -10
  20. package/dist/cjs/tttx.cjs.js +116 -8
  21. package/dist/collection/collection-manifest.json +2 -2
  22. package/dist/collection/components/atoms/tttx-button/tttx-button.css +4 -4
  23. package/dist/collection/components/atoms/tttx-button/tttx-button.js +110 -110
  24. package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +14 -14
  25. package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +62 -62
  26. package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +22 -22
  27. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +109 -109
  28. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +38 -38
  29. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +67 -67
  30. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +17 -17
  31. package/dist/collection/components/molecules/tttx-filter/tttx-filter.js +334 -334
  32. package/dist/collection/components/molecules/tttx-filter/tttx-filter.stories.js +62 -62
  33. package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js +37 -37
  34. package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js +61 -58
  35. package/dist/collection/components/molecules/tttx-form/tttx-form.css +98 -2
  36. package/dist/collection/components/molecules/tttx-form/tttx-form.js +479 -393
  37. package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +274 -218
  38. package/dist/collection/components/molecules/tttx-list/tttx-list.js +105 -105
  39. package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +43 -43
  40. package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.js +224 -224
  41. package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.stories.js +42 -42
  42. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +759 -759
  43. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +172 -172
  44. package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.js +44 -44
  45. package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.stories.js +14 -14
  46. package/dist/collection/components/palette.stories.js +7 -7
  47. package/dist/collection/docs/gettingstarted-developer.stories.js +5 -5
  48. package/dist/collection/icons.js +2838 -2838
  49. package/dist/collection/index.js +1 -1
  50. package/dist/collection/shared/domsanitiser.options.js +14 -14
  51. package/dist/components/domsanitiser.options.js +1694 -0
  52. package/dist/components/index.d.ts +0 -9
  53. package/dist/components/index.js +5 -1
  54. package/dist/components/tttx-button.js +49 -49
  55. package/dist/components/tttx-filter.js +191 -191
  56. package/dist/components/tttx-form.js +477 -391
  57. package/dist/components/tttx-icon2.js +28 -28
  58. package/dist/components/tttx-keyvalue-block.js +76 -76
  59. package/dist/components/tttx-list.js +54 -1716
  60. package/dist/components/tttx-loading-spinner.js +33 -33
  61. package/dist/components/tttx-sorter.js +130 -130
  62. package/dist/components/tttx-standalone-input.js +130 -130
  63. package/dist/components/tttx-toolbar.js +26 -26
  64. package/dist/esm/app-globals-0f993ce5.js +3 -0
  65. package/dist/esm/css-shim-9d54a2f2.js +4 -0
  66. package/dist/esm/dom-6be6f662.js +73 -0
  67. package/dist/esm/domsanitiser.options-6f2878c8.js +1694 -0
  68. package/dist/esm/domsanitiser.options-cc420431.js +1664 -0
  69. package/dist/esm/{index-d784fb3e.js → index-9cde46a5.js} +3 -88
  70. package/dist/esm/index-e3e64631.js +3262 -0
  71. package/dist/esm/loader.js +18 -3
  72. package/dist/esm/polyfills/core-js.js +0 -0
  73. package/dist/esm/polyfills/css-shim.js +1 -1
  74. package/dist/esm/polyfills/dom.js +0 -0
  75. package/dist/esm/polyfills/es5-html-element.js +0 -0
  76. package/dist/esm/polyfills/index.js +0 -0
  77. package/dist/esm/polyfills/system.js +0 -0
  78. package/dist/esm/shadow-css-ed4599f8.js +387 -0
  79. package/dist/esm/tttx-button.entry.js +25 -25
  80. package/dist/esm/tttx-filter.entry.js +159 -159
  81. package/dist/esm/tttx-form.entry.js +459 -373
  82. package/dist/esm/tttx-icon.entry.js +11 -11
  83. package/dist/esm/tttx-keyvalue-block.entry.js +59 -59
  84. package/dist/esm/tttx-list.entry.js +32 -1694
  85. package/dist/esm/tttx-loading-spinner.entry.js +16 -16
  86. package/dist/esm/tttx-sorter.entry.js +102 -102
  87. package/dist/esm/tttx-standalone-input.entry.js +79 -79
  88. package/dist/esm/tttx-toolbar.entry.js +10 -10
  89. package/dist/esm/tttx.js +116 -5
  90. package/dist/tttx/app-globals-0f993ce5.js +3 -0
  91. package/dist/tttx/css-shim-9d54a2f2.js +4 -0
  92. package/dist/tttx/dom-6be6f662.js +73 -0
  93. package/dist/tttx/domsanitiser.options-6f2878c8.js +1694 -0
  94. package/dist/tttx/index-e3e64631.js +3262 -0
  95. package/dist/tttx/index.esm.js +1 -0
  96. package/dist/tttx/{p-400868f1.entry.js → p-3b1be372.entry.js} +1 -1
  97. package/dist/tttx/p-4e637d50.entry.js +1 -0
  98. package/dist/tttx/{p-563605b2.entry.js → p-561224f5.entry.js} +1 -1
  99. package/dist/tttx/{p-b720c4ad.entry.js → p-9f1e9cc1.entry.js} +1 -1
  100. package/dist/tttx/{p-798a098a.entry.js → p-aef96333.entry.js} +1 -1
  101. package/dist/tttx/p-b4290a5b.js +3 -0
  102. package/dist/tttx/p-bd1edaed.entry.js +1 -0
  103. package/dist/tttx/p-d0ff9ad0.entry.js +1 -0
  104. package/dist/tttx/{p-cac26a1b.entry.js → p-d2f1aa8e.entry.js} +1 -1
  105. package/dist/tttx/p-db059a69.js +2 -0
  106. package/dist/tttx/p-dc2a37b0.entry.js +1 -0
  107. package/dist/tttx/{p-ab6ce9f6.entry.js → p-e53c7f9d.entry.js} +1 -1
  108. package/dist/tttx/{p-92cade7f.entry.js → p-f885f17a.entry.js} +1 -1
  109. package/dist/tttx/shadow-css-ed4599f8.js +387 -0
  110. package/dist/tttx/tttx-button.entry.js +30 -0
  111. package/dist/tttx/tttx-filter.entry.js +165 -0
  112. package/dist/tttx/tttx-form.entry.js +468 -0
  113. package/dist/tttx/tttx-icon.entry.js +17 -0
  114. package/dist/tttx/tttx-keyvalue-block.entry.js +65 -0
  115. package/dist/tttx/tttx-list.entry.js +38 -0
  116. package/dist/tttx/tttx-loading-spinner.entry.js +22 -0
  117. package/dist/tttx/tttx-sorter.entry.js +108 -0
  118. package/dist/tttx/tttx-standalone-input.entry.js +85 -0
  119. package/dist/tttx/tttx-toolbar.entry.js +16 -0
  120. package/dist/tttx/tttx.esm.js +129 -1
  121. package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +10 -10
  122. package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +10 -10
  123. package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +5 -5
  124. package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +20 -20
  125. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +7 -7
  126. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +9 -9
  127. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -6
  128. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +17 -17
  129. package/dist/types/components/molecules/tttx-filter/tttx-filter.d.ts +39 -39
  130. package/dist/types/components/molecules/tttx-filter/tttx-filter.stories.d.ts +68 -68
  131. package/dist/types/components/molecules/tttx-form/lib/setErrorState.d.ts +13 -13
  132. package/dist/types/components/molecules/tttx-form/lib/validityCheck.d.ts +17 -17
  133. package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +133 -111
  134. package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +278 -13
  135. package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +11 -11
  136. package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +14 -14
  137. package/dist/types/components/molecules/tttx-sorter/tttx-sorter.d.ts +19 -19
  138. package/dist/types/components/molecules/tttx-sorter/tttx-sorter.stories.d.ts +30 -30
  139. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +69 -69
  140. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +143 -143
  141. package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.d.ts +4 -4
  142. package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.stories.d.ts +13 -13
  143. package/dist/types/components/palette.stories.d.ts +6 -6
  144. package/dist/types/components.d.ts +1 -1
  145. package/dist/types/docs/gettingstarted-developer.stories.d.ts +5 -5
  146. package/dist/types/icons.d.ts +2 -2
  147. package/dist/types/index.d.ts +1 -1
  148. package/dist/types/shared/domsanitiser.options.d.ts +10 -10
  149. package/dist/types/stencil-public-runtime.d.ts +3 -59
  150. package/loader/index.d.ts +0 -9
  151. package/package.json +1 -1
  152. package/dist/tttx/p-0ebffdfc.js +0 -2
  153. package/dist/tttx/p-72e7f7dd.entry.js +0 -3
  154. package/dist/tttx/p-c4162029.entry.js +0 -1
  155. package/dist/tttx/p-eb126fd0.entry.js +0 -1
@@ -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
+ }
@@ -1,38 +1,38 @@
1
- export default {
2
- title: 'atoms/Key Value Block',
3
- component: 'tttx-keyvalue-block'
4
- };
5
- const keyValues = {
6
- 'Name': 'John Doe',
7
- 'Date of birth': '14 Jan 1981',
8
- 'Start of postcode': 'AB10'
9
- };
10
- export const KeyValueBlock = () => {
11
- return `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValues)}' />`;
12
- };
13
- const keyValueArray = [
14
- {
15
- title: "Electrical Designer",
16
- subTitle: "Satchwell",
17
- data: "18 Oct 2021 - Present"
18
- },
19
- {
20
- title: "Electrical Inspector",
21
- subTitle: "Fastned",
22
- data: "20 Dec 2016 - 10 Oct 2021"
23
- },
24
- {
25
- title: "Electrical Tech Prof I - Eng",
26
- subTitle: "Voltech",
27
- data: "20 Dec 2009 - 20 Nov 2016"
28
- },
29
- ];
30
- export const KeyValueSubtitleBlock = () => {
31
- return `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValueArray)}' />`;
32
- };
33
- export const HorizontalKeyValueBlock = () => {
34
- return `<tttx-keyvalue-block horizontal='true' keyvalues='${JSON.stringify(keyValues)}' />`;
35
- };
36
- export const HorizontalKeyValueSubtitleBlock = () => {
37
- return `<tttx-keyvalue-block horizontal='true' keyvalues='${JSON.stringify(keyValueArray)}' />`;
38
- };
1
+ export default {
2
+ title: 'atoms/Key Value Block',
3
+ component: 'tttx-keyvalue-block'
4
+ };
5
+ const keyValues = {
6
+ 'Name': 'John Doe',
7
+ 'Date of birth': '14 Jan 1981',
8
+ 'Start of postcode': 'AB10'
9
+ };
10
+ export const KeyValueBlock = () => {
11
+ return `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValues)}' />`;
12
+ };
13
+ const keyValueArray = [
14
+ {
15
+ title: "Electrical Designer",
16
+ subTitle: "Satchwell",
17
+ data: "18 Oct 2021 - Present"
18
+ },
19
+ {
20
+ title: "Electrical Inspector",
21
+ subTitle: "Fastned",
22
+ data: "20 Dec 2016 - 10 Oct 2021"
23
+ },
24
+ {
25
+ title: "Electrical Tech Prof I - Eng",
26
+ subTitle: "Voltech",
27
+ data: "20 Dec 2009 - 20 Nov 2016"
28
+ },
29
+ ];
30
+ export const KeyValueSubtitleBlock = () => {
31
+ return `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValueArray)}' />`;
32
+ };
33
+ export const HorizontalKeyValueBlock = () => {
34
+ return `<tttx-keyvalue-block horizontal='true' keyvalues='${JSON.stringify(keyValues)}' />`;
35
+ };
36
+ export const HorizontalKeyValueSubtitleBlock = () => {
37
+ return `<tttx-keyvalue-block horizontal='true' keyvalues='${JSON.stringify(keyValueArray)}' />`;
38
+ };
@@ -1,67 +1,67 @@
1
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
2
- import { h } from '@stencil/core';
3
- export class TttxLoadingSpinner {
4
- constructor() {
5
- this.loadingMessage = undefined;
6
- this.size = 'large';
7
- }
8
- renderLoadingMessage() {
9
- if (!this.loadingMessage)
10
- return '';
11
- return h("div", { class: "loading-text" }, "Loading, please wait...");
12
- }
13
- render() {
14
- return (h("div", null, h("div", { class: "loading-box" }, h("span", { class: `spinner ${this.size}` })), this.renderLoadingMessage()));
15
- }
16
- static get is() { return "tttx-loading-spinner"; }
17
- static get encapsulation() { return "shadow"; }
18
- static get originalStyleUrls() {
19
- return {
20
- "$": ["tttx-loading-spinner.scss"]
21
- };
22
- }
23
- static get styleUrls() {
24
- return {
25
- "$": ["tttx-loading-spinner.css"]
26
- };
27
- }
28
- static get properties() {
29
- return {
30
- "loadingMessage": {
31
- "type": "boolean",
32
- "mutable": true,
33
- "complexType": {
34
- "original": "boolean",
35
- "resolved": "boolean",
36
- "references": {}
37
- },
38
- "required": false,
39
- "optional": false,
40
- "docs": {
41
- "tags": [],
42
- "text": ""
43
- },
44
- "attribute": "loading-message",
45
- "reflect": false
46
- },
47
- "size": {
48
- "type": "string",
49
- "mutable": true,
50
- "complexType": {
51
- "original": "'small' | 'large'",
52
- "resolved": "\"large\" | \"small\"",
53
- "references": {}
54
- },
55
- "required": false,
56
- "optional": false,
57
- "docs": {
58
- "tags": [],
59
- "text": ""
60
- },
61
- "attribute": "size",
62
- "reflect": false,
63
- "defaultValue": "'large'"
64
- }
65
- };
66
- }
67
- }
1
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
2
+ import { h } from '@stencil/core';
3
+ export class TttxLoadingSpinner {
4
+ constructor() {
5
+ this.loadingMessage = undefined;
6
+ this.size = 'large';
7
+ }
8
+ renderLoadingMessage() {
9
+ if (!this.loadingMessage)
10
+ return '';
11
+ return h("div", { class: "loading-text" }, "Loading, please wait...");
12
+ }
13
+ render() {
14
+ return (h("div", null, h("div", { class: "loading-box" }, h("span", { class: `spinner ${this.size}` })), this.renderLoadingMessage()));
15
+ }
16
+ static get is() { return "tttx-loading-spinner"; }
17
+ static get encapsulation() { return "shadow"; }
18
+ static get originalStyleUrls() {
19
+ return {
20
+ "$": ["tttx-loading-spinner.scss"]
21
+ };
22
+ }
23
+ static get styleUrls() {
24
+ return {
25
+ "$": ["tttx-loading-spinner.css"]
26
+ };
27
+ }
28
+ static get properties() {
29
+ return {
30
+ "loadingMessage": {
31
+ "type": "boolean",
32
+ "mutable": true,
33
+ "complexType": {
34
+ "original": "boolean",
35
+ "resolved": "boolean",
36
+ "references": {}
37
+ },
38
+ "required": false,
39
+ "optional": false,
40
+ "docs": {
41
+ "tags": [],
42
+ "text": ""
43
+ },
44
+ "attribute": "loading-message",
45
+ "reflect": false
46
+ },
47
+ "size": {
48
+ "type": "string",
49
+ "mutable": true,
50
+ "complexType": {
51
+ "original": "'small' | 'large'",
52
+ "resolved": "\"large\" | \"small\"",
53
+ "references": {}
54
+ },
55
+ "required": false,
56
+ "optional": false,
57
+ "docs": {
58
+ "tags": [],
59
+ "text": ""
60
+ },
61
+ "attribute": "size",
62
+ "reflect": false,
63
+ "defaultValue": "'large'"
64
+ }
65
+ };
66
+ }
67
+ }
@@ -1,17 +1,17 @@
1
- export default {
2
- title: 'atoms/Loading Spinner',
3
- component: 'tttx-loading-spinner',
4
- argTypes: {
5
- loadingMessage: {
6
- control: 'boolean',
7
- },
8
- size: {
9
- control: { type: 'radio' },
10
- options: ['small', 'large'],
11
- },
12
- },
13
- };
14
- export const Example = args => {
15
- const size = args.size || 'large';
16
- return `<tttx-loading-spinner ${args.loadingMessage ? 'loading-message' : ''} size='${size}' />`;
17
- };
1
+ export default {
2
+ title: 'atoms/Loading Spinner',
3
+ component: 'tttx-loading-spinner',
4
+ argTypes: {
5
+ loadingMessage: {
6
+ control: 'boolean',
7
+ },
8
+ size: {
9
+ control: { type: 'radio' },
10
+ options: ['small', 'large'],
11
+ },
12
+ },
13
+ };
14
+ export const Example = args => {
15
+ const size = args.size || 'large';
16
+ return `<tttx-loading-spinner ${args.loadingMessage ? 'loading-message' : ''} size='${size}' />`;
17
+ };