@3t-transform/threeteeui 0.0.14 → 0.0.16

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 (104) hide show
  1. package/dist/cjs/{index-bf39be87.js → index-864b7110.js} +4 -3
  2. package/dist/cjs/loader.cjs.js +2 -2
  3. package/dist/cjs/tttx-button.cjs.entry.js +18 -18
  4. package/dist/cjs/tttx-checkbox.cjs.entry.js +18 -18
  5. package/dist/cjs/tttx-form.cjs.entry.js +364 -176
  6. package/dist/cjs/tttx-icon.cjs.entry.js +56 -54
  7. package/dist/cjs/tttx-list.cjs.entry.js +188 -188
  8. package/dist/cjs/tttx-loading-spinner.cjs.entry.js +16 -16
  9. package/dist/cjs/tttx-popover-content.cjs.entry.js +13 -13
  10. package/dist/cjs/tttx-standalone-input.cjs.entry.js +127 -127
  11. package/dist/cjs/tttx-table.cjs.entry.js +60 -0
  12. package/dist/cjs/tttx.cjs.js +2 -2
  13. package/dist/collection/collection-manifest.json +2 -1
  14. package/dist/collection/components/atoms/tttx-button/tttx-button.js +93 -93
  15. package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +25 -25
  16. package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +116 -114
  17. package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +32 -32
  18. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +66 -66
  19. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +17 -17
  20. package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.js +96 -96
  21. package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.stories.js +23 -23
  22. package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.js +101 -101
  23. package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.stories.js +9 -9
  24. package/dist/collection/components/molecules/tttx-form/tttx-form.js +451 -249
  25. package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +109 -102
  26. package/dist/collection/components/molecules/tttx-list/tttx-list.js +311 -311
  27. package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +15 -15
  28. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +569 -569
  29. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +134 -134
  30. package/dist/collection/components/molecules/tttx-table/tttx-table.css +166 -0
  31. package/dist/collection/components/molecules/tttx-table/tttx-table.js +177 -0
  32. package/dist/collection/components/molecules/tttx-table/tttx-table.stories.js +81 -0
  33. package/dist/collection/components/palette.stories.js +7 -7
  34. package/dist/collection/docs/gettingstarted-developer.stories.js +5 -5
  35. package/dist/collection/icons.js +2838 -2838
  36. package/dist/collection/index.js +1 -1
  37. package/dist/components/index.d.ts +1 -0
  38. package/dist/components/index.js +1 -0
  39. package/dist/components/tttx-button.js +35 -35
  40. package/dist/components/tttx-checkbox.js +36 -36
  41. package/dist/components/tttx-form.js +381 -193
  42. package/dist/components/tttx-icon2.js +73 -71
  43. package/dist/components/tttx-list.js +214 -214
  44. package/dist/components/tttx-loading-spinner2.js +33 -33
  45. package/dist/components/tttx-popover-content.js +1 -37
  46. package/dist/components/tttx-popover-content2.js +39 -0
  47. package/dist/components/tttx-standalone-input.js +169 -168
  48. package/dist/components/tttx-table.d.ts +11 -0
  49. package/dist/components/tttx-table.js +91 -0
  50. package/dist/esm/{index-63c4d25e.js → index-232e347b.js} +4 -3
  51. package/dist/esm/loader.js +3 -3
  52. package/dist/esm/polyfills/core-js.js +0 -0
  53. package/dist/esm/polyfills/dom.js +0 -0
  54. package/dist/esm/polyfills/es5-html-element.js +0 -0
  55. package/dist/esm/polyfills/index.js +0 -0
  56. package/dist/esm/polyfills/system.js +0 -0
  57. package/dist/esm/tttx-button.entry.js +18 -18
  58. package/dist/esm/tttx-checkbox.entry.js +18 -18
  59. package/dist/esm/tttx-form.entry.js +364 -176
  60. package/dist/esm/tttx-icon.entry.js +56 -54
  61. package/dist/esm/tttx-list.entry.js +188 -188
  62. package/dist/esm/tttx-loading-spinner.entry.js +16 -16
  63. package/dist/esm/tttx-popover-content.entry.js +13 -13
  64. package/dist/esm/tttx-standalone-input.entry.js +127 -127
  65. package/dist/esm/tttx-table.entry.js +56 -0
  66. package/dist/esm/tttx.js +3 -3
  67. package/dist/tttx/{p-2d54f8aa.entry.js → p-01e1894e.entry.js} +1 -1
  68. package/dist/tttx/{p-709246f5.entry.js → p-10316ff1.entry.js} +1 -1
  69. package/dist/tttx/p-125f06b3.entry.js +1 -0
  70. package/dist/tttx/p-184c4fae.js +2 -0
  71. package/dist/tttx/{p-ad0c3fe4.entry.js → p-3973b7dd.entry.js} +1 -1
  72. package/dist/tttx/p-5ce1ba22.entry.js +1 -0
  73. package/dist/tttx/{p-4c57bcbd.entry.js → p-6828fe6f.entry.js} +1 -1
  74. package/dist/tttx/p-b1c22f5f.entry.js +1 -0
  75. package/dist/tttx/{p-1a4eb1f3.entry.js → p-c7f9be65.entry.js} +1 -1
  76. package/dist/tttx/{p-2b6720ac.entry.js → p-fe4c70b2.entry.js} +1 -1
  77. package/dist/tttx/tttx.esm.js +1 -1
  78. package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +9 -9
  79. package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +20 -20
  80. package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +14 -14
  81. package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +21 -21
  82. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -6
  83. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +17 -17
  84. package/dist/types/components/atoms/tttx-popover-content/tttx-popover-content.d.ts +7 -7
  85. package/dist/types/components/atoms/tttx-popover-content/tttx-popover-content.stories.d.ts +18 -18
  86. package/dist/types/components/atoms/ttx-checkbox/tttx-checkbox.d.ts +9 -9
  87. package/dist/types/components/atoms/ttx-checkbox/tttx-checkbox.stories.d.ts +6 -6
  88. package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +134 -18
  89. package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +12 -6
  90. package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +51 -51
  91. package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +13 -13
  92. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +38 -38
  93. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +106 -106
  94. package/dist/types/components/molecules/tttx-table/tttx-table.d.ts +15 -0
  95. package/dist/types/components/molecules/tttx-table/tttx-table.stories.d.ts +21 -0
  96. package/dist/types/components/palette.stories.d.ts +6 -6
  97. package/dist/types/components.d.ts +29 -1
  98. package/dist/types/docs/gettingstarted-developer.stories.d.ts +5 -5
  99. package/dist/types/icons.d.ts +2 -2
  100. package/dist/types/index.d.ts +1 -1
  101. package/package.json +7 -4
  102. package/dist/tttx/p-28e4c359.entry.js +0 -1
  103. package/dist/tttx/p-95a29e09.entry.js +0 -1
  104. package/dist/tttx/p-bec472d8.js +0 -2
@@ -1,569 +1,569 @@
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 "scoped"; }
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
+ 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
+ }