@3t-transform/threeteeui 0.0.16 → 0.0.18

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/{index-864b7110.js → index-bf777121.js} +3 -0
  2. package/dist/cjs/loader.cjs.js +2 -2
  3. package/dist/cjs/tttx-button.cjs.entry.js +25 -19
  4. package/dist/cjs/tttx-checkbox.cjs.entry.js +18 -18
  5. package/dist/cjs/tttx-form.cjs.entry.js +365 -365
  6. package/dist/cjs/tttx-icon.cjs.entry.js +14 -1856
  7. package/dist/cjs/tttx-input-calendar.cjs.entry.js +125 -0
  8. package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +33 -0
  9. package/dist/cjs/tttx-list.cjs.entry.js +188 -188
  10. package/dist/cjs/tttx-loading-spinner.cjs.entry.js +16 -16
  11. package/dist/cjs/tttx-popover-content.cjs.entry.js +13 -13
  12. package/dist/cjs/tttx-standalone-input.cjs.entry.js +127 -127
  13. package/dist/cjs/tttx-table.cjs.entry.js +50 -50
  14. package/dist/cjs/tttx.cjs.js +2 -2
  15. package/dist/collection/collection-manifest.json +2 -0
  16. package/dist/collection/components/atoms/tttx-button/tttx-button.css +94 -18
  17. package/dist/collection/components/atoms/tttx-button/tttx-button.js +110 -93
  18. package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +74 -27
  19. package/dist/collection/components/atoms/tttx-icon/tttx-icon.css +8 -5
  20. package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +62 -116
  21. package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +22 -47
  22. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.css +26 -0
  23. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +56 -0
  24. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +12 -0
  25. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +67 -66
  26. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +17 -17
  27. package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.js +97 -96
  28. package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.stories.js +23 -23
  29. package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.js +102 -101
  30. package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.stories.js +9 -9
  31. package/dist/collection/components/molecules/tttx-form/tttx-form.css +95 -11
  32. package/dist/collection/components/molecules/tttx-form/tttx-form.js +452 -451
  33. package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +109 -109
  34. package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.css +93 -0
  35. package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.js +174 -0
  36. package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.stories.js +27 -0
  37. package/dist/collection/components/molecules/tttx-list/tttx-list.js +312 -311
  38. package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +14 -14
  39. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +570 -569
  40. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +134 -134
  41. package/dist/collection/components/molecules/tttx-table/tttx-table.js +174 -177
  42. package/dist/collection/components/molecules/tttx-table/tttx-table.stories.js +65 -65
  43. package/dist/collection/components/palette.stories.js +7 -7
  44. package/dist/collection/docs/gettingstarted-developer.stories.js +5 -5
  45. package/dist/collection/icons.js +2838 -2838
  46. package/dist/collection/index.js +1 -1
  47. package/dist/components/index.d.ts +2 -0
  48. package/dist/components/index.js +2 -0
  49. package/dist/components/tttx-button.js +1 -40
  50. package/dist/components/tttx-button2.js +56 -0
  51. package/dist/components/tttx-checkbox.js +36 -36
  52. package/dist/components/tttx-form.js +382 -382
  53. package/dist/components/tttx-icon2.js +32 -1874
  54. package/dist/components/tttx-input-calendar.d.ts +11 -0
  55. package/dist/components/tttx-input-calendar.js +157 -0
  56. package/dist/components/tttx-keyvalue-block.d.ts +11 -0
  57. package/dist/components/tttx-keyvalue-block.js +49 -0
  58. package/dist/components/tttx-list.js +214 -214
  59. package/dist/components/tttx-loading-spinner2.js +33 -33
  60. package/dist/components/tttx-popover-content2.js +32 -32
  61. package/dist/components/tttx-standalone-input.js +168 -169
  62. package/dist/components/tttx-table.js +79 -79
  63. package/dist/esm/{index-232e347b.js → index-a05bd606.js} +3 -0
  64. package/dist/esm/loader.js +3 -3
  65. package/dist/esm/polyfills/core-js.js +0 -0
  66. package/dist/esm/polyfills/dom.js +0 -0
  67. package/dist/esm/polyfills/es5-html-element.js +0 -0
  68. package/dist/esm/polyfills/index.js +0 -0
  69. package/dist/esm/polyfills/system.js +0 -0
  70. package/dist/esm/tttx-button.entry.js +25 -19
  71. package/dist/esm/tttx-checkbox.entry.js +18 -18
  72. package/dist/esm/tttx-form.entry.js +365 -365
  73. package/dist/esm/tttx-icon.entry.js +14 -1856
  74. package/dist/esm/tttx-input-calendar.entry.js +121 -0
  75. package/dist/esm/tttx-keyvalue-block.entry.js +29 -0
  76. package/dist/esm/tttx-list.entry.js +188 -188
  77. package/dist/esm/tttx-loading-spinner.entry.js +16 -16
  78. package/dist/esm/tttx-popover-content.entry.js +13 -13
  79. package/dist/esm/tttx-standalone-input.entry.js +127 -127
  80. package/dist/esm/tttx-table.entry.js +50 -50
  81. package/dist/esm/tttx.js +3 -3
  82. package/dist/tttx/{p-3973b7dd.entry.js → p-037d286f.entry.js} +1 -1
  83. package/dist/tttx/{p-184c4fae.js → p-07b134af.js} +1 -1
  84. package/dist/tttx/{p-125f06b3.entry.js → p-1b63f16a.entry.js} +1 -1
  85. package/dist/tttx/p-45afb84c.entry.js +1 -0
  86. package/dist/tttx/p-68ff0f39.entry.js +1 -0
  87. package/dist/tttx/{p-6828fe6f.entry.js → p-93763d3c.entry.js} +1 -1
  88. package/dist/tttx/p-a5808741.entry.js +1 -0
  89. package/dist/tttx/{p-fe4c70b2.entry.js → p-a92ca87e.entry.js} +1 -1
  90. package/dist/tttx/{p-5ce1ba22.entry.js → p-a96ca037.entry.js} +1 -1
  91. package/dist/tttx/p-dc087fd8.entry.js +1 -0
  92. package/dist/tttx/p-e3cc75bb.entry.js +1 -0
  93. package/dist/tttx/{p-01e1894e.entry.js → p-f579ed1e.entry.js} +1 -1
  94. package/dist/tttx/tttx.esm.js +1 -1
  95. package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +10 -9
  96. package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +10 -20
  97. package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +5 -14
  98. package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +20 -21
  99. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +4 -0
  100. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +6 -0
  101. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -6
  102. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +17 -17
  103. package/dist/types/components/atoms/tttx-popover-content/tttx-popover-content.d.ts +7 -7
  104. package/dist/types/components/atoms/tttx-popover-content/tttx-popover-content.stories.d.ts +18 -18
  105. package/dist/types/components/atoms/ttx-checkbox/tttx-checkbox.d.ts +9 -9
  106. package/dist/types/components/atoms/ttx-checkbox/tttx-checkbox.stories.d.ts +6 -6
  107. package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +134 -134
  108. package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +12 -12
  109. package/dist/types/components/molecules/tttx-input-calendar/tttx-input-calendar.d.ts +19 -0
  110. package/dist/types/components/molecules/tttx-input-calendar/tttx-input-calendar.stories.d.ts +26 -0
  111. package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +51 -51
  112. package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +13 -13
  113. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +38 -38
  114. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +106 -106
  115. package/dist/types/components/molecules/tttx-table/tttx-table.d.ts +15 -15
  116. package/dist/types/components/molecules/tttx-table/tttx-table.stories.d.ts +21 -21
  117. package/dist/types/components/palette.stories.d.ts +6 -6
  118. package/dist/types/components.d.ts +46 -15
  119. package/dist/types/docs/gettingstarted-developer.stories.d.ts +5 -5
  120. package/dist/types/icons.d.ts +2 -2
  121. package/dist/types/index.d.ts +1 -1
  122. package/package.json +4 -4
  123. package/dist/tttx/p-10316ff1.entry.js +0 -1
  124. package/dist/tttx/p-b1c22f5f.entry.js +0 -1
  125. package/dist/tttx/p-c7f9be65.entry.js +0 -1
@@ -1,569 +1,570 @@
1
- import { Host, h } from '@stencil/core';
2
- export class TttxInput {
3
- constructor() {
4
- this.label = undefined;
5
- this.showerrormsg = undefined;
6
- this.errormsg = undefined;
7
- this.iconleft = undefined;
8
- this.iconright = undefined;
9
- this.autocapitalize = undefined;
10
- this.autocomplete = undefined;
11
- this.autofocus = undefined;
12
- this.checked = undefined;
13
- this.disabled = undefined;
14
- this.max = undefined;
15
- this.maxlength = undefined;
16
- this.min = undefined;
17
- this.minlength = undefined;
18
- this.name = undefined;
19
- this.pattern = undefined;
20
- this.placeholder = undefined;
21
- this.readonly = undefined;
22
- this.required = undefined;
23
- this.step = undefined;
24
- this.type = 'text';
25
- this.value = undefined;
26
- }
27
- handleChange(event) {
28
- const target = event.target;
29
- this.value = target.value;
30
- this.valueChanged.emit(target.value);
31
- }
32
- handleFocus(event) {
33
- const target = event.target;
34
- this.focusChanged.emit(target.value);
35
- }
36
- handleBlur(event) {
37
- const target = event.target;
38
- this.blurChanged.emit(target.value);
39
- }
40
- render() {
41
- const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
42
- return (h(Host, null, h("label", { class: 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.iconleft, colour: "grey" }))), h("input", { class: classNames, autocapitalize: this.type === 'url' || this.type === 'email' || this.type === 'password' ? this.autocapitalize : null, autofocus: this.autofocus, autocomplete: this.type === 'text' ||
43
- this.type === 'search' ||
44
- this.type === 'url' ||
45
- this.type === 'tel' ||
46
- this.type === 'email' ||
47
- this.type === 'password' ||
48
- this.type === 'datepickers' ||
49
- this.type === 'range' ||
50
- this.type === 'color'
51
- ? this.autocomplete
52
- : null, checked: this.type === 'checkbox' || this.type === 'radio' ? this.checked : null, disabled: !this.required ? this.disabled : null, max: this.type === 'date' ||
53
- this.type === 'month' ||
54
- this.type === 'week' ||
55
- this.type === 'time' ||
56
- this.type === 'datetime-local' ||
57
- this.type === 'number' ||
58
- this.type === 'range'
59
- ? this.max
60
- : null, maxlength: this.maxlength, min: this.type === 'date' ||
61
- this.type === 'month' ||
62
- this.type === 'week' ||
63
- this.type === 'time' ||
64
- this.type === 'datetime-local' ||
65
- this.type === 'number' ||
66
- this.type === 'range'
67
- ? this.min
68
- : null, minlength: this.minlength, name: this.name, pattern: this.type === 'text' ||
69
- this.type === 'date' ||
70
- this.type === 'search' ||
71
- this.type === 'url' ||
72
- this.type === 'tel' ||
73
- this.type === 'email' ||
74
- this.type === 'password'
75
- ? this.pattern
76
- : null, placeholder: this.type === 'text' ||
77
- this.type === 'tel' ||
78
- this.type === 'email' ||
79
- this.type === 'url' ||
80
- this.type === 'password' ||
81
- this.type === 'search'
82
- ? this.placeholder
83
- : null, readonly: this.type === 'text' ||
84
- this.type === 'search' ||
85
- this.type === 'url' ||
86
- this.type === 'tel' ||
87
- this.type === 'email' ||
88
- this.type === 'password' ||
89
- this.type === 'date' ||
90
- this.type === 'month' ||
91
- this.type === 'week' ||
92
- this.type === 'time' ||
93
- this.type === 'datetime-local' ||
94
- this.type === 'number'
95
- ? this.readonly
96
- : null, required: this.type === 'text' ||
97
- this.type === 'search' ||
98
- this.type === 'url' ||
99
- this.type === 'tel' ||
100
- this.type === 'email' ||
101
- this.type === 'password' ||
102
- this.type === 'date' ||
103
- this.type === 'month' ||
104
- this.type === 'week' ||
105
- this.type === 'time' ||
106
- this.type === 'datetime-local' ||
107
- this.type === 'number' ||
108
- this.type === 'checkbox' ||
109
- this.type === 'radio' ||
110
- this.type === 'file'
111
- ? this.required
112
- : null, step: this.type === 'date' ||
113
- this.type === 'month' ||
114
- this.type === 'week' ||
115
- this.type === 'time' ||
116
- this.type === 'datetime-local' ||
117
- this.type === 'number' ||
118
- this.type === 'range'
119
- ? this.step
120
- : null, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this) }), this.iconright && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, colour: "grey" }))), h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
121
- }
122
- static get is() { return "tttx-standalone-input"; }
123
- static get encapsulation() { return "shadow"; }
124
- static get originalStyleUrls() {
125
- return {
126
- "$": ["./tttx-standalone-input.scss"]
127
- };
128
- }
129
- static get styleUrls() {
130
- return {
131
- "$": ["tttx-standalone-input.css"]
132
- };
133
- }
134
- static get properties() {
135
- return {
136
- "label": {
137
- "type": "string",
138
- "mutable": false,
139
- "complexType": {
140
- "original": "string",
141
- "resolved": "string",
142
- "references": {}
143
- },
144
- "required": false,
145
- "optional": false,
146
- "docs": {
147
- "tags": [],
148
- "text": ""
149
- },
150
- "attribute": "label",
151
- "reflect": false
152
- },
153
- "showerrormsg": {
154
- "type": "boolean",
155
- "mutable": false,
156
- "complexType": {
157
- "original": "boolean",
158
- "resolved": "boolean",
159
- "references": {}
160
- },
161
- "required": false,
162
- "optional": false,
163
- "docs": {
164
- "tags": [],
165
- "text": ""
166
- },
167
- "attribute": "showerrormsg",
168
- "reflect": false
169
- },
170
- "errormsg": {
171
- "type": "string",
172
- "mutable": false,
173
- "complexType": {
174
- "original": "string",
175
- "resolved": "string",
176
- "references": {}
177
- },
178
- "required": false,
179
- "optional": false,
180
- "docs": {
181
- "tags": [],
182
- "text": ""
183
- },
184
- "attribute": "errormsg",
185
- "reflect": false
186
- },
187
- "iconleft": {
188
- "type": "string",
189
- "mutable": false,
190
- "complexType": {
191
- "original": "string",
192
- "resolved": "string",
193
- "references": {}
194
- },
195
- "required": false,
196
- "optional": false,
197
- "docs": {
198
- "tags": [],
199
- "text": ""
200
- },
201
- "attribute": "iconleft",
202
- "reflect": false
203
- },
204
- "iconright": {
205
- "type": "string",
206
- "mutable": false,
207
- "complexType": {
208
- "original": "string",
209
- "resolved": "string",
210
- "references": {}
211
- },
212
- "required": false,
213
- "optional": false,
214
- "docs": {
215
- "tags": [],
216
- "text": ""
217
- },
218
- "attribute": "iconright",
219
- "reflect": false
220
- },
221
- "autocapitalize": {
222
- "type": "string",
223
- "mutable": false,
224
- "complexType": {
225
- "original": "string",
226
- "resolved": "string",
227
- "references": {}
228
- },
229
- "required": false,
230
- "optional": false,
231
- "docs": {
232
- "tags": [],
233
- "text": ""
234
- },
235
- "attribute": "autocapitalize",
236
- "reflect": false
237
- },
238
- "autocomplete": {
239
- "type": "string",
240
- "mutable": false,
241
- "complexType": {
242
- "original": "'off' | 'on'",
243
- "resolved": "\"off\" | \"on\"",
244
- "references": {}
245
- },
246
- "required": false,
247
- "optional": false,
248
- "docs": {
249
- "tags": [],
250
- "text": ""
251
- },
252
- "attribute": "autocomplete",
253
- "reflect": false
254
- },
255
- "autofocus": {
256
- "type": "boolean",
257
- "mutable": false,
258
- "complexType": {
259
- "original": "boolean",
260
- "resolved": "boolean",
261
- "references": {}
262
- },
263
- "required": false,
264
- "optional": false,
265
- "docs": {
266
- "tags": [],
267
- "text": ""
268
- },
269
- "attribute": "autofocus",
270
- "reflect": false
271
- },
272
- "checked": {
273
- "type": "boolean",
274
- "mutable": false,
275
- "complexType": {
276
- "original": "boolean",
277
- "resolved": "boolean",
278
- "references": {}
279
- },
280
- "required": false,
281
- "optional": false,
282
- "docs": {
283
- "tags": [],
284
- "text": ""
285
- },
286
- "attribute": "checked",
287
- "reflect": false
288
- },
289
- "disabled": {
290
- "type": "boolean",
291
- "mutable": false,
292
- "complexType": {
293
- "original": "boolean",
294
- "resolved": "boolean",
295
- "references": {}
296
- },
297
- "required": false,
298
- "optional": false,
299
- "docs": {
300
- "tags": [],
301
- "text": ""
302
- },
303
- "attribute": "disabled",
304
- "reflect": false
305
- },
306
- "max": {
307
- "type": "any",
308
- "mutable": false,
309
- "complexType": {
310
- "original": "MinMaxDates | number",
311
- "resolved": "`${number}${number}${number}${number}-${number}${number}-${number}${number}T${number}${number}:${number}${number}` | `${number}${number}${number}${number}-${number}${number}-${number}${number}` | `${number}${number}${number}${number}-${number}${number}` | `${number}${number}${number}${number}-W${number}${number}` | `${number}${number}:${number}${number}` | number",
312
- "references": {
313
- "MinMaxDates": {
314
- "location": "local"
315
- }
316
- }
317
- },
318
- "required": false,
319
- "optional": false,
320
- "docs": {
321
- "tags": [],
322
- "text": ""
323
- },
324
- "attribute": "max",
325
- "reflect": false
326
- },
327
- "maxlength": {
328
- "type": "any",
329
- "mutable": false,
330
- "complexType": {
331
- "original": "string | number",
332
- "resolved": "number | string",
333
- "references": {}
334
- },
335
- "required": false,
336
- "optional": false,
337
- "docs": {
338
- "tags": [],
339
- "text": ""
340
- },
341
- "attribute": "maxlength",
342
- "reflect": false
343
- },
344
- "min": {
345
- "type": "any",
346
- "mutable": false,
347
- "complexType": {
348
- "original": "MinMaxDates | number",
349
- "resolved": "`${number}${number}${number}${number}-${number}${number}-${number}${number}T${number}${number}:${number}${number}` | `${number}${number}${number}${number}-${number}${number}-${number}${number}` | `${number}${number}${number}${number}-${number}${number}` | `${number}${number}${number}${number}-W${number}${number}` | `${number}${number}:${number}${number}` | number",
350
- "references": {
351
- "MinMaxDates": {
352
- "location": "local"
353
- }
354
- }
355
- },
356
- "required": false,
357
- "optional": false,
358
- "docs": {
359
- "tags": [],
360
- "text": ""
361
- },
362
- "attribute": "min",
363
- "reflect": false
364
- },
365
- "minlength": {
366
- "type": "any",
367
- "mutable": false,
368
- "complexType": {
369
- "original": "string | number",
370
- "resolved": "number | string",
371
- "references": {}
372
- },
373
- "required": false,
374
- "optional": false,
375
- "docs": {
376
- "tags": [],
377
- "text": ""
378
- },
379
- "attribute": "minlength",
380
- "reflect": false
381
- },
382
- "name": {
383
- "type": "string",
384
- "mutable": false,
385
- "complexType": {
386
- "original": "string",
387
- "resolved": "string",
388
- "references": {}
389
- },
390
- "required": false,
391
- "optional": false,
392
- "docs": {
393
- "tags": [],
394
- "text": ""
395
- },
396
- "attribute": "name",
397
- "reflect": false
398
- },
399
- "pattern": {
400
- "type": "string",
401
- "mutable": false,
402
- "complexType": {
403
- "original": "string",
404
- "resolved": "string",
405
- "references": {}
406
- },
407
- "required": false,
408
- "optional": false,
409
- "docs": {
410
- "tags": [],
411
- "text": ""
412
- },
413
- "attribute": "pattern",
414
- "reflect": false
415
- },
416
- "placeholder": {
417
- "type": "string",
418
- "mutable": false,
419
- "complexType": {
420
- "original": "string",
421
- "resolved": "string",
422
- "references": {}
423
- },
424
- "required": false,
425
- "optional": false,
426
- "docs": {
427
- "tags": [],
428
- "text": ""
429
- },
430
- "attribute": "placeholder",
431
- "reflect": false
432
- },
433
- "readonly": {
434
- "type": "any",
435
- "mutable": false,
436
- "complexType": {
437
- "original": "string | boolean",
438
- "resolved": "boolean | string",
439
- "references": {}
440
- },
441
- "required": false,
442
- "optional": false,
443
- "docs": {
444
- "tags": [],
445
- "text": ""
446
- },
447
- "attribute": "readonly",
448
- "reflect": false
449
- },
450
- "required": {
451
- "type": "boolean",
452
- "mutable": false,
453
- "complexType": {
454
- "original": "boolean",
455
- "resolved": "boolean",
456
- "references": {}
457
- },
458
- "required": false,
459
- "optional": false,
460
- "docs": {
461
- "tags": [],
462
- "text": ""
463
- },
464
- "attribute": "required",
465
- "reflect": false
466
- },
467
- "step": {
468
- "type": "any",
469
- "mutable": false,
470
- "complexType": {
471
- "original": "string | number",
472
- "resolved": "number | string",
473
- "references": {}
474
- },
475
- "required": false,
476
- "optional": false,
477
- "docs": {
478
- "tags": [],
479
- "text": ""
480
- },
481
- "attribute": "step",
482
- "reflect": false
483
- },
484
- "type": {
485
- "type": "string",
486
- "mutable": false,
487
- "complexType": {
488
- "original": "string",
489
- "resolved": "string",
490
- "references": {}
491
- },
492
- "required": false,
493
- "optional": false,
494
- "docs": {
495
- "tags": [],
496
- "text": ""
497
- },
498
- "attribute": "type",
499
- "reflect": false,
500
- "defaultValue": "'text'"
501
- },
502
- "value": {
503
- "type": "any",
504
- "mutable": true,
505
- "complexType": {
506
- "original": "string | number",
507
- "resolved": "number | string",
508
- "references": {}
509
- },
510
- "required": false,
511
- "optional": false,
512
- "docs": {
513
- "tags": [],
514
- "text": ""
515
- },
516
- "attribute": "value",
517
- "reflect": false
518
- }
519
- };
520
- }
521
- static get events() {
522
- return [{
523
- "method": "valueChanged",
524
- "name": "valueChanged",
525
- "bubbles": true,
526
- "cancelable": true,
527
- "composed": true,
528
- "docs": {
529
- "tags": [],
530
- "text": ""
531
- },
532
- "complexType": {
533
- "original": "string",
534
- "resolved": "string",
535
- "references": {}
536
- }
537
- }, {
538
- "method": "focusChanged",
539
- "name": "focusChanged",
540
- "bubbles": true,
541
- "cancelable": true,
542
- "composed": true,
543
- "docs": {
544
- "tags": [],
545
- "text": ""
546
- },
547
- "complexType": {
548
- "original": "string",
549
- "resolved": "string",
550
- "references": {}
551
- }
552
- }, {
553
- "method": "blurChanged",
554
- "name": "blurChanged",
555
- "bubbles": true,
556
- "cancelable": true,
557
- "composed": true,
558
- "docs": {
559
- "tags": [],
560
- "text": ""
561
- },
562
- "complexType": {
563
- "original": "string",
564
- "resolved": "string",
565
- "references": {}
566
- }
567
- }];
568
- }
569
- }
1
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
2
+ import { Host, h } from '@stencil/core';
3
+ export class TttxInput {
4
+ constructor() {
5
+ this.label = undefined;
6
+ this.showerrormsg = undefined;
7
+ this.errormsg = undefined;
8
+ this.iconleft = undefined;
9
+ this.iconright = undefined;
10
+ this.autocapitalize = undefined;
11
+ this.autocomplete = undefined;
12
+ this.autofocus = undefined;
13
+ this.checked = undefined;
14
+ this.disabled = undefined;
15
+ this.max = undefined;
16
+ this.maxlength = undefined;
17
+ this.min = undefined;
18
+ this.minlength = undefined;
19
+ this.name = undefined;
20
+ this.pattern = undefined;
21
+ this.placeholder = undefined;
22
+ this.readonly = undefined;
23
+ this.required = undefined;
24
+ this.step = undefined;
25
+ this.type = 'text';
26
+ this.value = undefined;
27
+ }
28
+ handleChange(event) {
29
+ const target = event.target;
30
+ this.value = target.value;
31
+ this.valueChanged.emit(target.value);
32
+ }
33
+ handleFocus(event) {
34
+ const target = event.target;
35
+ this.focusChanged.emit(target.value);
36
+ }
37
+ handleBlur(event) {
38
+ const target = event.target;
39
+ this.blurChanged.emit(target.value);
40
+ }
41
+ render() {
42
+ const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
43
+ return (h(Host, null, h("label", { class: 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.iconleft, color: "grey" }))), h("input", { class: classNames, autocapitalize: this.type === 'url' || this.type === 'email' || this.type === 'password' ? this.autocapitalize : null, autofocus: this.autofocus, autocomplete: this.type === 'text' ||
44
+ this.type === 'search' ||
45
+ this.type === 'url' ||
46
+ this.type === 'tel' ||
47
+ this.type === 'email' ||
48
+ this.type === 'password' ||
49
+ this.type === 'datepickers' ||
50
+ this.type === 'range' ||
51
+ this.type === 'color'
52
+ ? this.autocomplete
53
+ : null, checked: this.type === 'checkbox' || this.type === 'radio' ? this.checked : null, disabled: !this.required ? this.disabled : null, max: this.type === 'date' ||
54
+ this.type === 'month' ||
55
+ this.type === 'week' ||
56
+ this.type === 'time' ||
57
+ this.type === 'datetime-local' ||
58
+ this.type === 'number' ||
59
+ this.type === 'range'
60
+ ? this.max
61
+ : null, maxlength: this.maxlength, min: this.type === 'date' ||
62
+ this.type === 'month' ||
63
+ this.type === 'week' ||
64
+ this.type === 'time' ||
65
+ this.type === 'datetime-local' ||
66
+ this.type === 'number' ||
67
+ this.type === 'range'
68
+ ? this.min
69
+ : null, minlength: this.minlength, name: this.name, pattern: this.type === 'text' ||
70
+ this.type === 'date' ||
71
+ this.type === 'search' ||
72
+ this.type === 'url' ||
73
+ this.type === 'tel' ||
74
+ this.type === 'email' ||
75
+ this.type === 'password'
76
+ ? this.pattern
77
+ : null, placeholder: this.type === 'text' ||
78
+ this.type === 'tel' ||
79
+ this.type === 'email' ||
80
+ this.type === 'url' ||
81
+ this.type === 'password' ||
82
+ this.type === 'search'
83
+ ? this.placeholder
84
+ : null, readonly: this.type === 'text' ||
85
+ this.type === 'search' ||
86
+ this.type === 'url' ||
87
+ this.type === 'tel' ||
88
+ this.type === 'email' ||
89
+ this.type === 'password' ||
90
+ this.type === 'date' ||
91
+ this.type === 'month' ||
92
+ this.type === 'week' ||
93
+ this.type === 'time' ||
94
+ this.type === 'datetime-local' ||
95
+ this.type === 'number'
96
+ ? this.readonly
97
+ : null, required: this.type === 'text' ||
98
+ this.type === 'search' ||
99
+ this.type === 'url' ||
100
+ this.type === 'tel' ||
101
+ this.type === 'email' ||
102
+ this.type === 'password' ||
103
+ this.type === 'date' ||
104
+ this.type === 'month' ||
105
+ this.type === 'week' ||
106
+ this.type === 'time' ||
107
+ this.type === 'datetime-local' ||
108
+ this.type === 'number' ||
109
+ this.type === 'checkbox' ||
110
+ this.type === 'radio' ||
111
+ this.type === 'file'
112
+ ? this.required
113
+ : null, step: this.type === 'date' ||
114
+ this.type === 'month' ||
115
+ this.type === 'week' ||
116
+ this.type === 'time' ||
117
+ this.type === 'datetime-local' ||
118
+ this.type === 'number' ||
119
+ this.type === 'range'
120
+ ? this.step
121
+ : null, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this) }), this.iconright && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, color: "grey" }))), h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
122
+ }
123
+ static get is() { return "tttx-standalone-input"; }
124
+ static get encapsulation() { return "scoped"; }
125
+ static get originalStyleUrls() {
126
+ return {
127
+ "$": ["./tttx-standalone-input.scss"]
128
+ };
129
+ }
130
+ static get styleUrls() {
131
+ return {
132
+ "$": ["tttx-standalone-input.css"]
133
+ };
134
+ }
135
+ static get properties() {
136
+ return {
137
+ "label": {
138
+ "type": "string",
139
+ "mutable": false,
140
+ "complexType": {
141
+ "original": "string",
142
+ "resolved": "string",
143
+ "references": {}
144
+ },
145
+ "required": false,
146
+ "optional": false,
147
+ "docs": {
148
+ "tags": [],
149
+ "text": ""
150
+ },
151
+ "attribute": "label",
152
+ "reflect": false
153
+ },
154
+ "showerrormsg": {
155
+ "type": "boolean",
156
+ "mutable": false,
157
+ "complexType": {
158
+ "original": "boolean",
159
+ "resolved": "boolean",
160
+ "references": {}
161
+ },
162
+ "required": false,
163
+ "optional": false,
164
+ "docs": {
165
+ "tags": [],
166
+ "text": ""
167
+ },
168
+ "attribute": "showerrormsg",
169
+ "reflect": false
170
+ },
171
+ "errormsg": {
172
+ "type": "string",
173
+ "mutable": false,
174
+ "complexType": {
175
+ "original": "string",
176
+ "resolved": "string",
177
+ "references": {}
178
+ },
179
+ "required": false,
180
+ "optional": false,
181
+ "docs": {
182
+ "tags": [],
183
+ "text": ""
184
+ },
185
+ "attribute": "errormsg",
186
+ "reflect": false
187
+ },
188
+ "iconleft": {
189
+ "type": "string",
190
+ "mutable": false,
191
+ "complexType": {
192
+ "original": "string",
193
+ "resolved": "string",
194
+ "references": {}
195
+ },
196
+ "required": false,
197
+ "optional": false,
198
+ "docs": {
199
+ "tags": [],
200
+ "text": ""
201
+ },
202
+ "attribute": "iconleft",
203
+ "reflect": false
204
+ },
205
+ "iconright": {
206
+ "type": "string",
207
+ "mutable": false,
208
+ "complexType": {
209
+ "original": "string",
210
+ "resolved": "string",
211
+ "references": {}
212
+ },
213
+ "required": false,
214
+ "optional": false,
215
+ "docs": {
216
+ "tags": [],
217
+ "text": ""
218
+ },
219
+ "attribute": "iconright",
220
+ "reflect": false
221
+ },
222
+ "autocapitalize": {
223
+ "type": "string",
224
+ "mutable": false,
225
+ "complexType": {
226
+ "original": "string",
227
+ "resolved": "string",
228
+ "references": {}
229
+ },
230
+ "required": false,
231
+ "optional": false,
232
+ "docs": {
233
+ "tags": [],
234
+ "text": ""
235
+ },
236
+ "attribute": "autocapitalize",
237
+ "reflect": false
238
+ },
239
+ "autocomplete": {
240
+ "type": "string",
241
+ "mutable": false,
242
+ "complexType": {
243
+ "original": "'off' | 'on'",
244
+ "resolved": "\"off\" | \"on\"",
245
+ "references": {}
246
+ },
247
+ "required": false,
248
+ "optional": false,
249
+ "docs": {
250
+ "tags": [],
251
+ "text": ""
252
+ },
253
+ "attribute": "autocomplete",
254
+ "reflect": false
255
+ },
256
+ "autofocus": {
257
+ "type": "boolean",
258
+ "mutable": false,
259
+ "complexType": {
260
+ "original": "boolean",
261
+ "resolved": "boolean",
262
+ "references": {}
263
+ },
264
+ "required": false,
265
+ "optional": false,
266
+ "docs": {
267
+ "tags": [],
268
+ "text": ""
269
+ },
270
+ "attribute": "autofocus",
271
+ "reflect": false
272
+ },
273
+ "checked": {
274
+ "type": "boolean",
275
+ "mutable": false,
276
+ "complexType": {
277
+ "original": "boolean",
278
+ "resolved": "boolean",
279
+ "references": {}
280
+ },
281
+ "required": false,
282
+ "optional": false,
283
+ "docs": {
284
+ "tags": [],
285
+ "text": ""
286
+ },
287
+ "attribute": "checked",
288
+ "reflect": false
289
+ },
290
+ "disabled": {
291
+ "type": "boolean",
292
+ "mutable": false,
293
+ "complexType": {
294
+ "original": "boolean",
295
+ "resolved": "boolean",
296
+ "references": {}
297
+ },
298
+ "required": false,
299
+ "optional": false,
300
+ "docs": {
301
+ "tags": [],
302
+ "text": ""
303
+ },
304
+ "attribute": "disabled",
305
+ "reflect": false
306
+ },
307
+ "max": {
308
+ "type": "any",
309
+ "mutable": false,
310
+ "complexType": {
311
+ "original": "MinMaxDates | number",
312
+ "resolved": "`${number}${number}${number}${number}-${number}${number}-${number}${number}T${number}${number}:${number}${number}` | `${number}${number}${number}${number}-${number}${number}-${number}${number}` | `${number}${number}${number}${number}-${number}${number}` | `${number}${number}${number}${number}-W${number}${number}` | `${number}${number}:${number}${number}` | number",
313
+ "references": {
314
+ "MinMaxDates": {
315
+ "location": "local"
316
+ }
317
+ }
318
+ },
319
+ "required": false,
320
+ "optional": false,
321
+ "docs": {
322
+ "tags": [],
323
+ "text": ""
324
+ },
325
+ "attribute": "max",
326
+ "reflect": false
327
+ },
328
+ "maxlength": {
329
+ "type": "any",
330
+ "mutable": false,
331
+ "complexType": {
332
+ "original": "string | number",
333
+ "resolved": "number | string",
334
+ "references": {}
335
+ },
336
+ "required": false,
337
+ "optional": false,
338
+ "docs": {
339
+ "tags": [],
340
+ "text": ""
341
+ },
342
+ "attribute": "maxlength",
343
+ "reflect": false
344
+ },
345
+ "min": {
346
+ "type": "any",
347
+ "mutable": false,
348
+ "complexType": {
349
+ "original": "MinMaxDates | number",
350
+ "resolved": "`${number}${number}${number}${number}-${number}${number}-${number}${number}T${number}${number}:${number}${number}` | `${number}${number}${number}${number}-${number}${number}-${number}${number}` | `${number}${number}${number}${number}-${number}${number}` | `${number}${number}${number}${number}-W${number}${number}` | `${number}${number}:${number}${number}` | number",
351
+ "references": {
352
+ "MinMaxDates": {
353
+ "location": "local"
354
+ }
355
+ }
356
+ },
357
+ "required": false,
358
+ "optional": false,
359
+ "docs": {
360
+ "tags": [],
361
+ "text": ""
362
+ },
363
+ "attribute": "min",
364
+ "reflect": false
365
+ },
366
+ "minlength": {
367
+ "type": "any",
368
+ "mutable": false,
369
+ "complexType": {
370
+ "original": "string | number",
371
+ "resolved": "number | string",
372
+ "references": {}
373
+ },
374
+ "required": false,
375
+ "optional": false,
376
+ "docs": {
377
+ "tags": [],
378
+ "text": ""
379
+ },
380
+ "attribute": "minlength",
381
+ "reflect": false
382
+ },
383
+ "name": {
384
+ "type": "string",
385
+ "mutable": false,
386
+ "complexType": {
387
+ "original": "string",
388
+ "resolved": "string",
389
+ "references": {}
390
+ },
391
+ "required": false,
392
+ "optional": false,
393
+ "docs": {
394
+ "tags": [],
395
+ "text": ""
396
+ },
397
+ "attribute": "name",
398
+ "reflect": false
399
+ },
400
+ "pattern": {
401
+ "type": "string",
402
+ "mutable": false,
403
+ "complexType": {
404
+ "original": "string",
405
+ "resolved": "string",
406
+ "references": {}
407
+ },
408
+ "required": false,
409
+ "optional": false,
410
+ "docs": {
411
+ "tags": [],
412
+ "text": ""
413
+ },
414
+ "attribute": "pattern",
415
+ "reflect": false
416
+ },
417
+ "placeholder": {
418
+ "type": "string",
419
+ "mutable": false,
420
+ "complexType": {
421
+ "original": "string",
422
+ "resolved": "string",
423
+ "references": {}
424
+ },
425
+ "required": false,
426
+ "optional": false,
427
+ "docs": {
428
+ "tags": [],
429
+ "text": ""
430
+ },
431
+ "attribute": "placeholder",
432
+ "reflect": false
433
+ },
434
+ "readonly": {
435
+ "type": "any",
436
+ "mutable": false,
437
+ "complexType": {
438
+ "original": "string | boolean",
439
+ "resolved": "boolean | string",
440
+ "references": {}
441
+ },
442
+ "required": false,
443
+ "optional": false,
444
+ "docs": {
445
+ "tags": [],
446
+ "text": ""
447
+ },
448
+ "attribute": "readonly",
449
+ "reflect": false
450
+ },
451
+ "required": {
452
+ "type": "boolean",
453
+ "mutable": false,
454
+ "complexType": {
455
+ "original": "boolean",
456
+ "resolved": "boolean",
457
+ "references": {}
458
+ },
459
+ "required": false,
460
+ "optional": false,
461
+ "docs": {
462
+ "tags": [],
463
+ "text": ""
464
+ },
465
+ "attribute": "required",
466
+ "reflect": false
467
+ },
468
+ "step": {
469
+ "type": "any",
470
+ "mutable": false,
471
+ "complexType": {
472
+ "original": "string | number",
473
+ "resolved": "number | string",
474
+ "references": {}
475
+ },
476
+ "required": false,
477
+ "optional": false,
478
+ "docs": {
479
+ "tags": [],
480
+ "text": ""
481
+ },
482
+ "attribute": "step",
483
+ "reflect": false
484
+ },
485
+ "type": {
486
+ "type": "string",
487
+ "mutable": false,
488
+ "complexType": {
489
+ "original": "string",
490
+ "resolved": "string",
491
+ "references": {}
492
+ },
493
+ "required": false,
494
+ "optional": false,
495
+ "docs": {
496
+ "tags": [],
497
+ "text": ""
498
+ },
499
+ "attribute": "type",
500
+ "reflect": false,
501
+ "defaultValue": "'text'"
502
+ },
503
+ "value": {
504
+ "type": "any",
505
+ "mutable": true,
506
+ "complexType": {
507
+ "original": "string | number",
508
+ "resolved": "number | string",
509
+ "references": {}
510
+ },
511
+ "required": false,
512
+ "optional": false,
513
+ "docs": {
514
+ "tags": [],
515
+ "text": ""
516
+ },
517
+ "attribute": "value",
518
+ "reflect": false
519
+ }
520
+ };
521
+ }
522
+ static get events() {
523
+ return [{
524
+ "method": "valueChanged",
525
+ "name": "valueChanged",
526
+ "bubbles": true,
527
+ "cancelable": true,
528
+ "composed": true,
529
+ "docs": {
530
+ "tags": [],
531
+ "text": ""
532
+ },
533
+ "complexType": {
534
+ "original": "string",
535
+ "resolved": "string",
536
+ "references": {}
537
+ }
538
+ }, {
539
+ "method": "focusChanged",
540
+ "name": "focusChanged",
541
+ "bubbles": true,
542
+ "cancelable": true,
543
+ "composed": true,
544
+ "docs": {
545
+ "tags": [],
546
+ "text": ""
547
+ },
548
+ "complexType": {
549
+ "original": "string",
550
+ "resolved": "string",
551
+ "references": {}
552
+ }
553
+ }, {
554
+ "method": "blurChanged",
555
+ "name": "blurChanged",
556
+ "bubbles": true,
557
+ "cancelable": true,
558
+ "composed": true,
559
+ "docs": {
560
+ "tags": [],
561
+ "text": ""
562
+ },
563
+ "complexType": {
564
+ "original": "string",
565
+ "resolved": "string",
566
+ "references": {}
567
+ }
568
+ }];
569
+ }
570
+ }