@3t-transform/threeteeui 0.1.3 → 0.1.5

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 (101) hide show
  1. package/dist/cjs/{index-451f61dd.js → index-906c2757.js} +102 -3
  2. package/dist/cjs/loader.cjs.js +4 -3
  3. package/dist/cjs/{tttx-button.cjs.entry.js → tttx-button_2.cjs.entry.js} +50 -24
  4. package/dist/cjs/tttx-form.cjs.entry.js +364 -364
  5. package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +57 -57
  6. package/dist/cjs/tttx-list.cjs.entry.js +43 -43
  7. package/dist/cjs/tttx-loading-spinner.cjs.entry.js +16 -16
  8. package/dist/cjs/tttx-standalone-input.cjs.entry.js +58 -61
  9. package/dist/cjs/tttx.cjs.js +7 -3
  10. package/dist/collection/collection-manifest.json +2 -2
  11. package/dist/collection/components/atoms/tttx-button/tttx-button.js +116 -110
  12. package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +14 -14
  13. package/dist/collection/components/atoms/tttx-icon/tttx-icon.css +0 -4
  14. package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +62 -62
  15. package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +22 -22
  16. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +107 -107
  17. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +38 -38
  18. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +67 -67
  19. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +17 -17
  20. package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js +35 -35
  21. package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js +58 -58
  22. package/dist/collection/components/molecules/tttx-form/tttx-form.css +3 -26
  23. package/dist/collection/components/molecules/tttx-form/tttx-form.js +364 -364
  24. package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +127 -127
  25. package/dist/collection/components/molecules/tttx-list/tttx-list.js +105 -105
  26. package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +43 -43
  27. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.css +3 -26
  28. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +572 -627
  29. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +135 -148
  30. package/dist/collection/components/palette.stories.js +7 -7
  31. package/dist/collection/docs/gettingstarted-developer.stories.js +5 -5
  32. package/dist/collection/icons.js +2838 -2838
  33. package/dist/collection/index.js +1 -1
  34. package/dist/collection/shared/domsanitiser.options.js +14 -14
  35. package/dist/collection/transform-tag-name.js +5 -0
  36. package/dist/components/index.d.ts +9 -0
  37. package/dist/components/index.js +1 -1
  38. package/dist/components/tttx-button.js +59 -48
  39. package/dist/components/tttx-form.js +381 -381
  40. package/dist/components/tttx-icon2.js +29 -29
  41. package/dist/components/tttx-keyvalue-block.js +74 -74
  42. package/dist/components/tttx-list.js +65 -65
  43. package/dist/components/tttx-loading-spinner.js +33 -33
  44. package/dist/components/tttx-standalone-input.js +102 -108
  45. package/dist/esm/{index-0350f122.js → index-4010ad69.js} +101 -4
  46. package/dist/esm/loader.js +4 -3
  47. package/dist/esm/polyfills/core-js.js +0 -0
  48. package/dist/esm/polyfills/css-shim.js +1 -1
  49. package/dist/esm/polyfills/dom.js +0 -0
  50. package/dist/esm/polyfills/es5-html-element.js +0 -0
  51. package/dist/esm/polyfills/index.js +0 -0
  52. package/dist/esm/polyfills/system.js +0 -0
  53. package/dist/esm/{tttx-button.entry.js → tttx-button_2.entry.js} +50 -25
  54. package/dist/esm/tttx-form.entry.js +364 -364
  55. package/dist/esm/tttx-keyvalue-block.entry.js +57 -57
  56. package/dist/esm/tttx-list.entry.js +43 -43
  57. package/dist/esm/tttx-loading-spinner.entry.js +16 -16
  58. package/dist/esm/tttx-standalone-input.entry.js +58 -61
  59. package/dist/esm/tttx.js +4 -3
  60. package/dist/tttx/p-083eeedc.entry.js +1 -0
  61. package/dist/tttx/{p-1b015a9d.entry.js → p-3281444a.entry.js} +1 -1
  62. package/dist/tttx/p-5687f4ad.js +2 -0
  63. package/dist/tttx/p-5c9a1626.entry.js +3 -0
  64. package/dist/tttx/p-931e42c9.entry.js +1 -0
  65. package/dist/tttx/p-b5c1dd86.entry.js +1 -0
  66. package/dist/tttx/{p-a0179cb1.entry.js → p-dab7ee1b.entry.js} +1 -1
  67. package/dist/tttx/tttx.esm.js +1 -1
  68. package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +13 -10
  69. package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +10 -10
  70. package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +5 -5
  71. package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +20 -20
  72. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +7 -7
  73. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +9 -9
  74. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -6
  75. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +17 -17
  76. package/dist/types/components/molecules/tttx-form/lib/setErrorState.d.ts +13 -13
  77. package/dist/types/components/molecules/tttx-form/lib/validityCheck.d.ts +17 -17
  78. package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +114 -114
  79. package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +13 -13
  80. package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +11 -11
  81. package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +14 -14
  82. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +53 -56
  83. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +106 -122
  84. package/dist/types/components/palette.stories.d.ts +6 -6
  85. package/dist/types/components.d.ts +0 -6
  86. package/dist/types/docs/gettingstarted-developer.stories.d.ts +5 -5
  87. package/dist/types/icons.d.ts +2 -2
  88. package/dist/types/index.d.ts +1 -1
  89. package/dist/types/shared/domsanitiser.options.d.ts +10 -10
  90. package/dist/types/stencil-public-runtime.d.ts +59 -3
  91. package/dist/types/transform-tag-name.d.ts +1 -0
  92. package/loader/index.d.ts +9 -0
  93. package/package.json +1 -1
  94. package/dist/cjs/tttx-icon.cjs.entry.js +0 -21
  95. package/dist/esm/tttx-icon.entry.js +0 -17
  96. package/dist/tttx/p-4f3958fa.entry.js +0 -1
  97. package/dist/tttx/p-62869344.js +0 -2
  98. package/dist/tttx/p-92465671.entry.js +0 -1
  99. package/dist/tttx/p-bfdf5c4e.entry.js +0 -1
  100. package/dist/tttx/p-c773116b.entry.js +0 -1
  101. package/dist/tttx/p-cd1565e0.entry.js +0 -3
@@ -1,90 +1,77 @@
1
- import icons from '../../../icons';
2
- export default {
3
- title: 'Molecules/Standalone Input',
4
- component: 'tttx-standalone-input',
5
- argTypes: {
6
- iconleft: {
7
- options: icons,
8
- control: { type: 'select' },
9
- },
10
- iconright: {
11
- options: icons,
12
- control: { type: 'select' },
13
- },
14
- inputIcon: {
15
- options: icons,
16
- control: { type: 'select' },
17
- },
18
- label: {
19
- control: { type: 'text' },
20
- },
21
- errormsg: {
22
- control: { type: 'text' },
23
- },
24
- showerrorbubble: {
25
- control: { type: 'boolean' },
26
- },
27
- showerrormsg: {
28
- control: { type: 'boolean' },
29
- },
30
- inline: {
31
- control: { type: 'boolean' },
32
- },
33
- checked: {
34
- control: { type: 'boolean' },
35
- },
36
- disabled: {
37
- control: { type: 'boolean' },
38
- },
39
- max: {
40
- control: { type: 'text' },
41
- },
42
- maxlength: {
43
- control: { type: 'text' },
44
- },
45
- min: {
46
- control: { type: 'text' },
47
- },
48
- minlength: {
49
- control: { type: 'text' },
50
- },
51
- name: {
52
- control: { type: 'text' },
53
- },
54
- pattern: {
55
- control: { type: 'text' },
56
- },
57
- placeholder: {
58
- control: { type: 'text' },
59
- },
60
- readonly: {
61
- control: { type: 'boolean' },
62
- },
63
- required: {
64
- control: { type: 'boolean' },
65
- },
66
- step: {
67
- control: { type: 'text' },
68
- },
69
- type: {
70
- options: ['text', 'password', 'email', 'number'],
71
- control: { type: 'radio' },
72
- },
73
- value: {
74
- control: { type: 'text' },
75
- },
76
- },
77
- };
78
- const TemplateTextInput = ({ iconleft, iconright, inputIcon, label, errormsg, showerrorbubble, showerrormsg, inline, checked, disabled, max, maxlength, min, minlength, name, pattern, placeholder, readonly, required, step, type, value, }) => `
1
+ import icons from '../../../icons';
2
+ export default {
3
+ title: 'Molecules/Standalone Input',
4
+ component: 'tttx-standalone-input',
5
+ argTypes: {
6
+ iconleft: {
7
+ options: icons,
8
+ control: { type: 'select' },
9
+ },
10
+ iconright: {
11
+ options: icons,
12
+ control: { type: 'select' },
13
+ },
14
+ label: {
15
+ control: { type: 'text' },
16
+ },
17
+ errormsg: {
18
+ control: { type: 'text' },
19
+ },
20
+ showerrormsg: {
21
+ control: { type: 'boolean' },
22
+ },
23
+ checked: {
24
+ control: { type: 'boolean' },
25
+ },
26
+ disabled: {
27
+ control: { type: 'boolean' },
28
+ },
29
+ max: {
30
+ control: { type: 'text' },
31
+ },
32
+ maxlength: {
33
+ control: { type: 'text' },
34
+ },
35
+ min: {
36
+ control: { type: 'text' },
37
+ },
38
+ minlength: {
39
+ control: { type: 'text' },
40
+ },
41
+ name: {
42
+ control: { type: 'text' },
43
+ },
44
+ pattern: {
45
+ control: { type: 'text' },
46
+ },
47
+ placeholder: {
48
+ control: { type: 'text' },
49
+ },
50
+ readonly: {
51
+ control: { type: 'boolean' },
52
+ },
53
+ required: {
54
+ control: { type: 'boolean' },
55
+ },
56
+ step: {
57
+ control: { type: 'text' },
58
+ },
59
+ type: {
60
+ options: ['text', 'password', 'email', 'number'],
61
+ control: { type: 'radio' },
62
+ },
63
+ value: {
64
+ control: { type: 'text' },
65
+ },
66
+ },
67
+ };
68
+ const TemplateTextInput = ({ iconleft, iconright, label, errormsg, showerrormsg, checked, disabled, max, maxlength, min, minlength, name, pattern, placeholder, readonly, required, step, type, value, }) => `
79
69
  <tttx-standalone-input
80
70
  iconleft="${iconleft || ''}"
81
71
  iconright="${iconright || ''}"
82
- inputicon="${inputIcon || ''}"
83
72
  label="${label}"
84
73
  errormsg="${errormsg}"
85
- showerrorbubble="${showerrorbubble === false ? 'false' : 'true'}"
86
74
  ${showerrormsg ? 'showerrormsg' : ''}
87
- ${inline ? 'inline' : ''}
88
75
  ${checked ? 'checked' : ''}
89
76
  ${disabled ? 'disabled' : ''}
90
77
  ${max ? `max=${max}` : ''}
@@ -100,70 +87,70 @@ const TemplateTextInput = ({ iconleft, iconright, inputIcon, label, errormsg, sh
100
87
  type="${type}"
101
88
  value="${value}"
102
89
  />
103
- `;
104
- export const InputField = TemplateTextInput.bind({});
105
- InputField.args = {
106
- value: '',
107
- label: 'First name',
108
- type: 'text',
109
- errormsg: 'Please enter your first name',
110
- required: false,
111
- showerrormsg: false,
112
- placeholder: 'Enter first name',
113
- };
114
- // export const TextInputIconLeft = TemplateTextInput.bind({});
115
- // TextInputIconLeft.args = {
116
- // value: 'Uh egg',
117
- // label: 'Please tell me about your egg',
118
- // iconleft: 'egg',
119
- // type: 'text',
120
- // errormsg: 'Incorrect egg, please egg again.',
121
- // required: true,
122
- // showerrormsg: true,
123
- // placeholder: 'Please for the love of god tell me about your egg',
124
- // };
125
- // export const TextInputIconRight = TemplateTextInput.bind({});
126
- // TextInputIconRight.args = {
127
- // value: 'Uh egg',
128
- // label: 'Please tell me about your egg',
129
- // iconright: 'egg',
130
- // type: 'text',
131
- // errormsg: 'Incorrect egg, please egg again.',
132
- // required: true,
133
- // showerrormsg: true,
134
- // placeholder: 'Please for the love of god tell me about your egg',
135
- // };
136
- // export const PasswordInputBasic = TemplateTextInput.bind({});
137
- // PasswordInputBasic.args = {
138
- // value: 'qwefdweferg',
139
- // label: 'Input your Password',
140
- // iconleft: 'lock',
141
- // type: 'password',
142
- // errormsg: 'Password is not strong enough',
143
- // required: true,
144
- // showerrormsg: true,
145
- // placeholder: 'Your password',
146
- // };
147
- // export const EmailInputBasic = TemplateTextInput.bind({});
148
- // EmailInputBasic.args = {
149
- // value: 'email.address@website.com',
150
- // label: 'Choose an email address',
151
- // iconleft: 'mail',
152
- // type: 'email',
153
- // errormsg: 'This email smells funny',
154
- // required: true,
155
- // valid: false,
156
- // showerrormsg: true,
157
- // placeholder: 'Your email address',
158
- // };
159
- // export const NumberInputBasic = TemplateTextInput.bind({});
160
- // NumberInputBasic.args = {
161
- // value: '42069',
162
- // label: 'What is your favourite number?',
163
- // iconleft: '123',
164
- // type: 'number',
165
- // errormsg: 'This number feels wrong',
166
- // required: true,
167
- // showerrormsg: true,
168
- // placeholder: 'Your favourite number',
169
- // };
90
+ `;
91
+ export const InputField = TemplateTextInput.bind({});
92
+ InputField.args = {
93
+ value: '',
94
+ label: 'First name',
95
+ type: 'text',
96
+ errormsg: 'Please enter your first name',
97
+ required: false,
98
+ showerrormsg: false,
99
+ placeholder: 'Enter first name',
100
+ };
101
+ // export const TextInputIconLeft = TemplateTextInput.bind({});
102
+ // TextInputIconLeft.args = {
103
+ // value: 'Uh egg',
104
+ // label: 'Please tell me about your egg',
105
+ // iconleft: 'egg',
106
+ // type: 'text',
107
+ // errormsg: 'Incorrect egg, please egg again.',
108
+ // required: true,
109
+ // showerrormsg: true,
110
+ // placeholder: 'Please for the love of god tell me about your egg',
111
+ // };
112
+ // export const TextInputIconRight = TemplateTextInput.bind({});
113
+ // TextInputIconRight.args = {
114
+ // value: 'Uh egg',
115
+ // label: 'Please tell me about your egg',
116
+ // iconright: 'egg',
117
+ // type: 'text',
118
+ // errormsg: 'Incorrect egg, please egg again.',
119
+ // required: true,
120
+ // showerrormsg: true,
121
+ // placeholder: 'Please for the love of god tell me about your egg',
122
+ // };
123
+ // export const PasswordInputBasic = TemplateTextInput.bind({});
124
+ // PasswordInputBasic.args = {
125
+ // value: 'qwefdweferg',
126
+ // label: 'Input your Password',
127
+ // iconleft: 'lock',
128
+ // type: 'password',
129
+ // errormsg: 'Password is not strong enough',
130
+ // required: true,
131
+ // showerrormsg: true,
132
+ // placeholder: 'Your password',
133
+ // };
134
+ // export const EmailInputBasic = TemplateTextInput.bind({});
135
+ // EmailInputBasic.args = {
136
+ // value: 'email.address@website.com',
137
+ // label: 'Choose an email address',
138
+ // iconleft: 'mail',
139
+ // type: 'email',
140
+ // errormsg: 'This email smells funny',
141
+ // required: true,
142
+ // valid: false,
143
+ // showerrormsg: true,
144
+ // placeholder: 'Your email address',
145
+ // };
146
+ // export const NumberInputBasic = TemplateTextInput.bind({});
147
+ // NumberInputBasic.args = {
148
+ // value: '42069',
149
+ // label: 'What is your favourite number?',
150
+ // iconleft: '123',
151
+ // type: 'number',
152
+ // errormsg: 'This number feels wrong',
153
+ // required: true,
154
+ // showerrormsg: true,
155
+ // placeholder: 'Your favourite number',
156
+ // };
@@ -1,7 +1,7 @@
1
- export default {
2
- title: 'Foundations/Palette',
3
- component: 'tttx-palette',
4
- };
1
+ export default {
2
+ title: 'Foundations/Palette',
3
+ component: 'tttx-palette',
4
+ };
5
5
  const Swatch = (colour, name = '') => `
6
6
  <div class="swatch">
7
7
  <div class="swatchcontent" style="background-color:${colour};">
@@ -9,7 +9,7 @@ const Swatch = (colour, name = '') => `
9
9
  </div>
10
10
  <p>${name}</p>
11
11
  </div>
12
- `;
12
+ `;
13
13
  const Template = () => `
14
14
 
15
15
  <style>
@@ -84,5 +84,5 @@ ${Swatch('#EA6100', '$dv-high')}
84
84
  ${Swatch('#DC0000', '$dv-very-high')}
85
85
  ${Swatch('#A20000', '$dv-highest')}
86
86
 
87
- `;
88
- export const Default = Template.bind({});
87
+ `;
88
+ export const Default = Template.bind({});
@@ -1,9 +1,9 @@
1
- export default {
2
- title: 'Getting Started/Developer',
3
- };
1
+ export default {
2
+ title: 'Getting Started/Developer',
3
+ };
4
4
  const Template = () => `
5
5
  <tttx-typography>
6
6
  <p>Quick start guide for developers</p>
7
7
  </tttx-typography>
8
- `;
9
- export const Default = Template.bind({});
8
+ `;
9
+ export const Default = Template.bind({});