@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,627 +1,572 @@
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.showerrorbubble = true;
8
- this.errormsg = undefined;
9
- this.iconleft = undefined;
10
- this.iconright = undefined;
11
- this.inputicon = undefined;
12
- this.inline = undefined;
13
- this.inputAutocapitalize = undefined;
14
- this.inputAutofocus = undefined;
15
- this.inputKeyhint = undefined;
16
- this.inputIndex = undefined;
17
- this.inputTitle = undefined;
18
- this.autocomplete = undefined;
19
- this.checked = undefined;
20
- this.disabled = undefined;
21
- this.max = undefined;
22
- this.maxlength = undefined;
23
- this.min = undefined;
24
- this.minlength = undefined;
25
- this.name = undefined;
26
- this.pattern = undefined;
27
- this.placeholder = undefined;
28
- this.readonly = undefined;
29
- this.required = undefined;
30
- this.step = undefined;
31
- this.type = 'text';
32
- this.value = undefined;
33
- }
34
- handleChange(event) {
35
- const target = event.target;
36
- this.value = target.value;
37
- this.valueChanged.emit(target.value);
38
- }
39
- handleFocus(event) {
40
- const target = event.target;
41
- this.focusChanged.emit(target.value);
42
- }
43
- handleBlur(event) {
44
- const target = event.target;
45
- this.blurChanged.emit(target.value);
46
- }
47
- handleInvalid(event) {
48
- event.preventDefault();
49
- const target = event.target;
50
- this.invalidChanged.emit(target.value);
51
- }
52
- render() {
53
- const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
54
- return (h(Host, null, h("label", { class: this.inline ? 'inputInline' : '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("div", { class: "input-container" }, this.inputicon && (h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: "grey" })), h("input", { class: classNames, autocapitalize: this.inputAutocapitalize, autofocus: this.inputAutofocus, enterkeyhint: this.inputKeyhint, tabindex: this.inputIndex, title: this.inputTitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), this.iconright && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, color: "grey" }))), this.showerrorbubble && (h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))))));
55
- }
56
- static get is() { return "tttx-standalone-input"; }
57
- static get encapsulation() { return "scoped"; }
58
- static get originalStyleUrls() {
59
- return {
60
- "$": ["./tttx-standalone-input.scss"]
61
- };
62
- }
63
- static get styleUrls() {
64
- return {
65
- "$": ["tttx-standalone-input.css"]
66
- };
67
- }
68
- static get properties() {
69
- return {
70
- "label": {
71
- "type": "string",
72
- "mutable": false,
73
- "complexType": {
74
- "original": "string",
75
- "resolved": "string",
76
- "references": {}
77
- },
78
- "required": false,
79
- "optional": false,
80
- "docs": {
81
- "tags": [],
82
- "text": ""
83
- },
84
- "attribute": "label",
85
- "reflect": false
86
- },
87
- "showerrormsg": {
88
- "type": "boolean",
89
- "mutable": false,
90
- "complexType": {
91
- "original": "boolean",
92
- "resolved": "boolean",
93
- "references": {}
94
- },
95
- "required": false,
96
- "optional": false,
97
- "docs": {
98
- "tags": [],
99
- "text": ""
100
- },
101
- "attribute": "showerrormsg",
102
- "reflect": false
103
- },
104
- "showerrorbubble": {
105
- "type": "boolean",
106
- "mutable": false,
107
- "complexType": {
108
- "original": "boolean",
109
- "resolved": "boolean",
110
- "references": {}
111
- },
112
- "required": false,
113
- "optional": false,
114
- "docs": {
115
- "tags": [],
116
- "text": ""
117
- },
118
- "attribute": "showerrorbubble",
119
- "reflect": false,
120
- "defaultValue": "true"
121
- },
122
- "errormsg": {
123
- "type": "string",
124
- "mutable": false,
125
- "complexType": {
126
- "original": "string",
127
- "resolved": "string",
128
- "references": {}
129
- },
130
- "required": false,
131
- "optional": false,
132
- "docs": {
133
- "tags": [],
134
- "text": ""
135
- },
136
- "attribute": "errormsg",
137
- "reflect": false
138
- },
139
- "iconleft": {
140
- "type": "string",
141
- "mutable": false,
142
- "complexType": {
143
- "original": "string",
144
- "resolved": "string",
145
- "references": {}
146
- },
147
- "required": false,
148
- "optional": false,
149
- "docs": {
150
- "tags": [],
151
- "text": ""
152
- },
153
- "attribute": "iconleft",
154
- "reflect": false
155
- },
156
- "iconright": {
157
- "type": "string",
158
- "mutable": false,
159
- "complexType": {
160
- "original": "string",
161
- "resolved": "string",
162
- "references": {}
163
- },
164
- "required": false,
165
- "optional": false,
166
- "docs": {
167
- "tags": [],
168
- "text": ""
169
- },
170
- "attribute": "iconright",
171
- "reflect": false
172
- },
173
- "inputicon": {
174
- "type": "string",
175
- "mutable": false,
176
- "complexType": {
177
- "original": "string",
178
- "resolved": "string",
179
- "references": {}
180
- },
181
- "required": false,
182
- "optional": false,
183
- "docs": {
184
- "tags": [],
185
- "text": ""
186
- },
187
- "attribute": "inputicon",
188
- "reflect": false
189
- },
190
- "inline": {
191
- "type": "boolean",
192
- "mutable": false,
193
- "complexType": {
194
- "original": "boolean",
195
- "resolved": "boolean",
196
- "references": {}
197
- },
198
- "required": false,
199
- "optional": false,
200
- "docs": {
201
- "tags": [],
202
- "text": ""
203
- },
204
- "attribute": "inline",
205
- "reflect": false
206
- },
207
- "inputAutocapitalize": {
208
- "type": "string",
209
- "mutable": false,
210
- "complexType": {
211
- "original": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'",
212
- "resolved": "\"characters\" | \"none\" | \"off\" | \"on\" | \"sentences\" | \"words\"",
213
- "references": {}
214
- },
215
- "required": false,
216
- "optional": false,
217
- "docs": {
218
- "tags": [],
219
- "text": ""
220
- },
221
- "attribute": "input-autocapitalize",
222
- "reflect": false
223
- },
224
- "inputAutofocus": {
225
- "type": "boolean",
226
- "mutable": false,
227
- "complexType": {
228
- "original": "boolean",
229
- "resolved": "boolean",
230
- "references": {}
231
- },
232
- "required": false,
233
- "optional": false,
234
- "docs": {
235
- "tags": [],
236
- "text": ""
237
- },
238
- "attribute": "input-autofocus",
239
- "reflect": false
240
- },
241
- "inputKeyhint": {
242
- "type": "string",
243
- "mutable": false,
244
- "complexType": {
245
- "original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
246
- "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\"",
247
- "references": {}
248
- },
249
- "required": false,
250
- "optional": false,
251
- "docs": {
252
- "tags": [],
253
- "text": "Defines what action to present for the enter key on virtual keyboards"
254
- },
255
- "attribute": "input-keyhint",
256
- "reflect": false
257
- },
258
- "inputIndex": {
259
- "type": "any",
260
- "mutable": false,
261
- "complexType": {
262
- "original": "string | number",
263
- "resolved": "number | string",
264
- "references": {}
265
- },
266
- "required": false,
267
- "optional": false,
268
- "docs": {
269
- "tags": [{
270
- "name": "example",
271
- "text": "<caption>In HTML (like `index.html`)</caption>\n<tttx-standalone-input input-index=\"1\" />"
272
- }, {
273
- "name": "example",
274
- "text": "<caption>In TSX files</caption>\n<tttx-standalone-input inputIndex={1} />"
275
- }],
276
- "text": "tabindex - Allows the HTML elements to be focusable"
277
- },
278
- "attribute": "input-index",
279
- "reflect": false
280
- },
281
- "inputTitle": {
282
- "type": "string",
283
- "mutable": false,
284
- "complexType": {
285
- "original": "string",
286
- "resolved": "string",
287
- "references": {}
288
- },
289
- "required": false,
290
- "optional": false,
291
- "docs": {
292
- "tags": [],
293
- "text": ""
294
- },
295
- "attribute": "input-title",
296
- "reflect": false
297
- },
298
- "autocomplete": {
299
- "type": "string",
300
- "mutable": false,
301
- "complexType": {
302
- "original": "'off' | 'on'",
303
- "resolved": "\"off\" | \"on\"",
304
- "references": {}
305
- },
306
- "required": false,
307
- "optional": false,
308
- "docs": {
309
- "tags": [],
310
- "text": ""
311
- },
312
- "attribute": "autocomplete",
313
- "reflect": false
314
- },
315
- "checked": {
316
- "type": "boolean",
317
- "mutable": false,
318
- "complexType": {
319
- "original": "boolean",
320
- "resolved": "boolean",
321
- "references": {}
322
- },
323
- "required": false,
324
- "optional": false,
325
- "docs": {
326
- "tags": [],
327
- "text": ""
328
- },
329
- "attribute": "checked",
330
- "reflect": false
331
- },
332
- "disabled": {
333
- "type": "boolean",
334
- "mutable": false,
335
- "complexType": {
336
- "original": "boolean",
337
- "resolved": "boolean",
338
- "references": {}
339
- },
340
- "required": false,
341
- "optional": false,
342
- "docs": {
343
- "tags": [],
344
- "text": ""
345
- },
346
- "attribute": "disabled",
347
- "reflect": false
348
- },
349
- "max": {
350
- "type": "any",
351
- "mutable": false,
352
- "complexType": {
353
- "original": "MinMaxDates | number",
354
- "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",
355
- "references": {
356
- "MinMaxDates": {
357
- "location": "local"
358
- }
359
- }
360
- },
361
- "required": false,
362
- "optional": false,
363
- "docs": {
364
- "tags": [],
365
- "text": ""
366
- },
367
- "attribute": "max",
368
- "reflect": false
369
- },
370
- "maxlength": {
371
- "type": "any",
372
- "mutable": false,
373
- "complexType": {
374
- "original": "string | number",
375
- "resolved": "number | string",
376
- "references": {}
377
- },
378
- "required": false,
379
- "optional": false,
380
- "docs": {
381
- "tags": [],
382
- "text": ""
383
- },
384
- "attribute": "maxlength",
385
- "reflect": false
386
- },
387
- "min": {
388
- "type": "any",
389
- "mutable": false,
390
- "complexType": {
391
- "original": "MinMaxDates | number",
392
- "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",
393
- "references": {
394
- "MinMaxDates": {
395
- "location": "local"
396
- }
397
- }
398
- },
399
- "required": false,
400
- "optional": false,
401
- "docs": {
402
- "tags": [],
403
- "text": ""
404
- },
405
- "attribute": "min",
406
- "reflect": false
407
- },
408
- "minlength": {
409
- "type": "any",
410
- "mutable": false,
411
- "complexType": {
412
- "original": "string | number",
413
- "resolved": "number | string",
414
- "references": {}
415
- },
416
- "required": false,
417
- "optional": false,
418
- "docs": {
419
- "tags": [],
420
- "text": ""
421
- },
422
- "attribute": "minlength",
423
- "reflect": false
424
- },
425
- "name": {
426
- "type": "string",
427
- "mutable": false,
428
- "complexType": {
429
- "original": "string",
430
- "resolved": "string",
431
- "references": {}
432
- },
433
- "required": false,
434
- "optional": false,
435
- "docs": {
436
- "tags": [],
437
- "text": ""
438
- },
439
- "attribute": "name",
440
- "reflect": false
441
- },
442
- "pattern": {
443
- "type": "string",
444
- "mutable": false,
445
- "complexType": {
446
- "original": "string",
447
- "resolved": "string",
448
- "references": {}
449
- },
450
- "required": false,
451
- "optional": false,
452
- "docs": {
453
- "tags": [],
454
- "text": ""
455
- },
456
- "attribute": "pattern",
457
- "reflect": false
458
- },
459
- "placeholder": {
460
- "type": "string",
461
- "mutable": false,
462
- "complexType": {
463
- "original": "string",
464
- "resolved": "string",
465
- "references": {}
466
- },
467
- "required": false,
468
- "optional": false,
469
- "docs": {
470
- "tags": [],
471
- "text": ""
472
- },
473
- "attribute": "placeholder",
474
- "reflect": false
475
- },
476
- "readonly": {
477
- "type": "any",
478
- "mutable": false,
479
- "complexType": {
480
- "original": "string | boolean",
481
- "resolved": "boolean | string",
482
- "references": {}
483
- },
484
- "required": false,
485
- "optional": false,
486
- "docs": {
487
- "tags": [],
488
- "text": ""
489
- },
490
- "attribute": "readonly",
491
- "reflect": false
492
- },
493
- "required": {
494
- "type": "boolean",
495
- "mutable": false,
496
- "complexType": {
497
- "original": "boolean",
498
- "resolved": "boolean",
499
- "references": {}
500
- },
501
- "required": false,
502
- "optional": false,
503
- "docs": {
504
- "tags": [],
505
- "text": ""
506
- },
507
- "attribute": "required",
508
- "reflect": false
509
- },
510
- "step": {
511
- "type": "any",
512
- "mutable": false,
513
- "complexType": {
514
- "original": "string | number",
515
- "resolved": "number | string",
516
- "references": {}
517
- },
518
- "required": false,
519
- "optional": false,
520
- "docs": {
521
- "tags": [],
522
- "text": ""
523
- },
524
- "attribute": "step",
525
- "reflect": false
526
- },
527
- "type": {
528
- "type": "string",
529
- "mutable": false,
530
- "complexType": {
531
- "original": "string",
532
- "resolved": "string",
533
- "references": {}
534
- },
535
- "required": false,
536
- "optional": false,
537
- "docs": {
538
- "tags": [],
539
- "text": ""
540
- },
541
- "attribute": "type",
542
- "reflect": false,
543
- "defaultValue": "'text'"
544
- },
545
- "value": {
546
- "type": "any",
547
- "mutable": true,
548
- "complexType": {
549
- "original": "string | number",
550
- "resolved": "number | string",
551
- "references": {}
552
- },
553
- "required": false,
554
- "optional": false,
555
- "docs": {
556
- "tags": [],
557
- "text": ""
558
- },
559
- "attribute": "value",
560
- "reflect": false
561
- }
562
- };
563
- }
564
- static get events() {
565
- return [{
566
- "method": "valueChanged",
567
- "name": "valueChanged",
568
- "bubbles": true,
569
- "cancelable": true,
570
- "composed": true,
571
- "docs": {
572
- "tags": [],
573
- "text": ""
574
- },
575
- "complexType": {
576
- "original": "string",
577
- "resolved": "string",
578
- "references": {}
579
- }
580
- }, {
581
- "method": "focusChanged",
582
- "name": "focusChanged",
583
- "bubbles": true,
584
- "cancelable": true,
585
- "composed": true,
586
- "docs": {
587
- "tags": [],
588
- "text": ""
589
- },
590
- "complexType": {
591
- "original": "string",
592
- "resolved": "string",
593
- "references": {}
594
- }
595
- }, {
596
- "method": "blurChanged",
597
- "name": "blurChanged",
598
- "bubbles": true,
599
- "cancelable": true,
600
- "composed": true,
601
- "docs": {
602
- "tags": [],
603
- "text": ""
604
- },
605
- "complexType": {
606
- "original": "string",
607
- "resolved": "string",
608
- "references": {}
609
- }
610
- }, {
611
- "method": "invalidChanged",
612
- "name": "invalidChanged",
613
- "bubbles": true,
614
- "cancelable": true,
615
- "composed": true,
616
- "docs": {
617
- "tags": [],
618
- "text": ""
619
- },
620
- "complexType": {
621
- "original": "string",
622
- "resolved": "string",
623
- "references": {}
624
- }
625
- }];
626
- }
627
- }
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.inputAutocapitalize = undefined;
11
+ this.inputAutofocus = undefined;
12
+ this.inputKeyhint = undefined;
13
+ this.inputIndex = undefined;
14
+ this.inputTitle = undefined;
15
+ this.autocomplete = undefined;
16
+ this.checked = undefined;
17
+ this.disabled = undefined;
18
+ this.max = undefined;
19
+ this.maxlength = undefined;
20
+ this.min = undefined;
21
+ this.minlength = undefined;
22
+ this.name = undefined;
23
+ this.pattern = undefined;
24
+ this.placeholder = undefined;
25
+ this.readonly = undefined;
26
+ this.required = undefined;
27
+ this.step = undefined;
28
+ this.type = 'text';
29
+ this.value = undefined;
30
+ }
31
+ handleChange(event) {
32
+ const target = event.target;
33
+ this.value = target.value;
34
+ this.valueChanged.emit(target.value);
35
+ }
36
+ handleFocus(event) {
37
+ const target = event.target;
38
+ this.focusChanged.emit(target.value);
39
+ }
40
+ handleBlur(event) {
41
+ const target = event.target;
42
+ this.blurChanged.emit(target.value);
43
+ }
44
+ handleInvalid(event) {
45
+ event.preventDefault();
46
+ const target = event.target;
47
+ this.invalidChanged.emit(target.value);
48
+ }
49
+ render() {
50
+ const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
51
+ 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.inputAutocapitalize, autofocus: this.inputAutofocus, enterkeyhint: this.inputKeyhint, tabindex: this.inputIndex, title: this.inputTitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.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))));
52
+ }
53
+ static get is() { return "tttx-standalone-input"; }
54
+ static get encapsulation() { return "scoped"; }
55
+ static get originalStyleUrls() {
56
+ return {
57
+ "$": ["./tttx-standalone-input.scss"]
58
+ };
59
+ }
60
+ static get styleUrls() {
61
+ return {
62
+ "$": ["tttx-standalone-input.css"]
63
+ };
64
+ }
65
+ static get properties() {
66
+ return {
67
+ "label": {
68
+ "type": "string",
69
+ "mutable": false,
70
+ "complexType": {
71
+ "original": "string",
72
+ "resolved": "string",
73
+ "references": {}
74
+ },
75
+ "required": false,
76
+ "optional": false,
77
+ "docs": {
78
+ "tags": [],
79
+ "text": ""
80
+ },
81
+ "attribute": "label",
82
+ "reflect": false
83
+ },
84
+ "showerrormsg": {
85
+ "type": "boolean",
86
+ "mutable": false,
87
+ "complexType": {
88
+ "original": "boolean",
89
+ "resolved": "boolean",
90
+ "references": {}
91
+ },
92
+ "required": false,
93
+ "optional": false,
94
+ "docs": {
95
+ "tags": [],
96
+ "text": ""
97
+ },
98
+ "attribute": "showerrormsg",
99
+ "reflect": false
100
+ },
101
+ "errormsg": {
102
+ "type": "string",
103
+ "mutable": false,
104
+ "complexType": {
105
+ "original": "string",
106
+ "resolved": "string",
107
+ "references": {}
108
+ },
109
+ "required": false,
110
+ "optional": false,
111
+ "docs": {
112
+ "tags": [],
113
+ "text": ""
114
+ },
115
+ "attribute": "errormsg",
116
+ "reflect": false
117
+ },
118
+ "iconleft": {
119
+ "type": "string",
120
+ "mutable": false,
121
+ "complexType": {
122
+ "original": "string",
123
+ "resolved": "string",
124
+ "references": {}
125
+ },
126
+ "required": false,
127
+ "optional": false,
128
+ "docs": {
129
+ "tags": [],
130
+ "text": ""
131
+ },
132
+ "attribute": "iconleft",
133
+ "reflect": false
134
+ },
135
+ "iconright": {
136
+ "type": "string",
137
+ "mutable": false,
138
+ "complexType": {
139
+ "original": "string",
140
+ "resolved": "string",
141
+ "references": {}
142
+ },
143
+ "required": false,
144
+ "optional": false,
145
+ "docs": {
146
+ "tags": [],
147
+ "text": ""
148
+ },
149
+ "attribute": "iconright",
150
+ "reflect": false
151
+ },
152
+ "inputAutocapitalize": {
153
+ "type": "string",
154
+ "mutable": false,
155
+ "complexType": {
156
+ "original": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'",
157
+ "resolved": "\"characters\" | \"none\" | \"off\" | \"on\" | \"sentences\" | \"words\"",
158
+ "references": {}
159
+ },
160
+ "required": false,
161
+ "optional": false,
162
+ "docs": {
163
+ "tags": [],
164
+ "text": ""
165
+ },
166
+ "attribute": "input-autocapitalize",
167
+ "reflect": false
168
+ },
169
+ "inputAutofocus": {
170
+ "type": "boolean",
171
+ "mutable": false,
172
+ "complexType": {
173
+ "original": "boolean",
174
+ "resolved": "boolean",
175
+ "references": {}
176
+ },
177
+ "required": false,
178
+ "optional": false,
179
+ "docs": {
180
+ "tags": [],
181
+ "text": ""
182
+ },
183
+ "attribute": "input-autofocus",
184
+ "reflect": false
185
+ },
186
+ "inputKeyhint": {
187
+ "type": "string",
188
+ "mutable": false,
189
+ "complexType": {
190
+ "original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
191
+ "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\"",
192
+ "references": {}
193
+ },
194
+ "required": false,
195
+ "optional": false,
196
+ "docs": {
197
+ "tags": [],
198
+ "text": "Defines what action to present for the enter key on virtual keyboards"
199
+ },
200
+ "attribute": "input-keyhint",
201
+ "reflect": false
202
+ },
203
+ "inputIndex": {
204
+ "type": "any",
205
+ "mutable": false,
206
+ "complexType": {
207
+ "original": "string | number",
208
+ "resolved": "number | string",
209
+ "references": {}
210
+ },
211
+ "required": false,
212
+ "optional": false,
213
+ "docs": {
214
+ "tags": [{
215
+ "name": "example",
216
+ "text": "<caption>In HTML (like `index.html`)</caption>\n<tttx-standalone-input input-index=\"1\" />"
217
+ }, {
218
+ "name": "example",
219
+ "text": "<caption>In TSX files</caption>\n<tttx-standalone-input inputIndex={1} />"
220
+ }],
221
+ "text": "tabindex - Allows the HTML elements to be focusable"
222
+ },
223
+ "attribute": "input-index",
224
+ "reflect": false
225
+ },
226
+ "inputTitle": {
227
+ "type": "string",
228
+ "mutable": false,
229
+ "complexType": {
230
+ "original": "string",
231
+ "resolved": "string",
232
+ "references": {}
233
+ },
234
+ "required": false,
235
+ "optional": false,
236
+ "docs": {
237
+ "tags": [],
238
+ "text": ""
239
+ },
240
+ "attribute": "input-title",
241
+ "reflect": false
242
+ },
243
+ "autocomplete": {
244
+ "type": "string",
245
+ "mutable": false,
246
+ "complexType": {
247
+ "original": "'off' | 'on'",
248
+ "resolved": "\"off\" | \"on\"",
249
+ "references": {}
250
+ },
251
+ "required": false,
252
+ "optional": false,
253
+ "docs": {
254
+ "tags": [],
255
+ "text": ""
256
+ },
257
+ "attribute": "autocomplete",
258
+ "reflect": false
259
+ },
260
+ "checked": {
261
+ "type": "boolean",
262
+ "mutable": false,
263
+ "complexType": {
264
+ "original": "boolean",
265
+ "resolved": "boolean",
266
+ "references": {}
267
+ },
268
+ "required": false,
269
+ "optional": false,
270
+ "docs": {
271
+ "tags": [],
272
+ "text": ""
273
+ },
274
+ "attribute": "checked",
275
+ "reflect": false
276
+ },
277
+ "disabled": {
278
+ "type": "boolean",
279
+ "mutable": false,
280
+ "complexType": {
281
+ "original": "boolean",
282
+ "resolved": "boolean",
283
+ "references": {}
284
+ },
285
+ "required": false,
286
+ "optional": false,
287
+ "docs": {
288
+ "tags": [],
289
+ "text": ""
290
+ },
291
+ "attribute": "disabled",
292
+ "reflect": false
293
+ },
294
+ "max": {
295
+ "type": "any",
296
+ "mutable": false,
297
+ "complexType": {
298
+ "original": "MinMaxDates | number",
299
+ "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",
300
+ "references": {
301
+ "MinMaxDates": {
302
+ "location": "local"
303
+ }
304
+ }
305
+ },
306
+ "required": false,
307
+ "optional": false,
308
+ "docs": {
309
+ "tags": [],
310
+ "text": ""
311
+ },
312
+ "attribute": "max",
313
+ "reflect": false
314
+ },
315
+ "maxlength": {
316
+ "type": "any",
317
+ "mutable": false,
318
+ "complexType": {
319
+ "original": "string | number",
320
+ "resolved": "number | string",
321
+ "references": {}
322
+ },
323
+ "required": false,
324
+ "optional": false,
325
+ "docs": {
326
+ "tags": [],
327
+ "text": ""
328
+ },
329
+ "attribute": "maxlength",
330
+ "reflect": false
331
+ },
332
+ "min": {
333
+ "type": "any",
334
+ "mutable": false,
335
+ "complexType": {
336
+ "original": "MinMaxDates | number",
337
+ "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",
338
+ "references": {
339
+ "MinMaxDates": {
340
+ "location": "local"
341
+ }
342
+ }
343
+ },
344
+ "required": false,
345
+ "optional": false,
346
+ "docs": {
347
+ "tags": [],
348
+ "text": ""
349
+ },
350
+ "attribute": "min",
351
+ "reflect": false
352
+ },
353
+ "minlength": {
354
+ "type": "any",
355
+ "mutable": false,
356
+ "complexType": {
357
+ "original": "string | number",
358
+ "resolved": "number | string",
359
+ "references": {}
360
+ },
361
+ "required": false,
362
+ "optional": false,
363
+ "docs": {
364
+ "tags": [],
365
+ "text": ""
366
+ },
367
+ "attribute": "minlength",
368
+ "reflect": false
369
+ },
370
+ "name": {
371
+ "type": "string",
372
+ "mutable": false,
373
+ "complexType": {
374
+ "original": "string",
375
+ "resolved": "string",
376
+ "references": {}
377
+ },
378
+ "required": false,
379
+ "optional": false,
380
+ "docs": {
381
+ "tags": [],
382
+ "text": ""
383
+ },
384
+ "attribute": "name",
385
+ "reflect": false
386
+ },
387
+ "pattern": {
388
+ "type": "string",
389
+ "mutable": false,
390
+ "complexType": {
391
+ "original": "string",
392
+ "resolved": "string",
393
+ "references": {}
394
+ },
395
+ "required": false,
396
+ "optional": false,
397
+ "docs": {
398
+ "tags": [],
399
+ "text": ""
400
+ },
401
+ "attribute": "pattern",
402
+ "reflect": false
403
+ },
404
+ "placeholder": {
405
+ "type": "string",
406
+ "mutable": false,
407
+ "complexType": {
408
+ "original": "string",
409
+ "resolved": "string",
410
+ "references": {}
411
+ },
412
+ "required": false,
413
+ "optional": false,
414
+ "docs": {
415
+ "tags": [],
416
+ "text": ""
417
+ },
418
+ "attribute": "placeholder",
419
+ "reflect": false
420
+ },
421
+ "readonly": {
422
+ "type": "any",
423
+ "mutable": false,
424
+ "complexType": {
425
+ "original": "string | boolean",
426
+ "resolved": "boolean | string",
427
+ "references": {}
428
+ },
429
+ "required": false,
430
+ "optional": false,
431
+ "docs": {
432
+ "tags": [],
433
+ "text": ""
434
+ },
435
+ "attribute": "readonly",
436
+ "reflect": false
437
+ },
438
+ "required": {
439
+ "type": "boolean",
440
+ "mutable": false,
441
+ "complexType": {
442
+ "original": "boolean",
443
+ "resolved": "boolean",
444
+ "references": {}
445
+ },
446
+ "required": false,
447
+ "optional": false,
448
+ "docs": {
449
+ "tags": [],
450
+ "text": ""
451
+ },
452
+ "attribute": "required",
453
+ "reflect": false
454
+ },
455
+ "step": {
456
+ "type": "any",
457
+ "mutable": false,
458
+ "complexType": {
459
+ "original": "string | number",
460
+ "resolved": "number | string",
461
+ "references": {}
462
+ },
463
+ "required": false,
464
+ "optional": false,
465
+ "docs": {
466
+ "tags": [],
467
+ "text": ""
468
+ },
469
+ "attribute": "step",
470
+ "reflect": false
471
+ },
472
+ "type": {
473
+ "type": "string",
474
+ "mutable": false,
475
+ "complexType": {
476
+ "original": "string",
477
+ "resolved": "string",
478
+ "references": {}
479
+ },
480
+ "required": false,
481
+ "optional": false,
482
+ "docs": {
483
+ "tags": [],
484
+ "text": ""
485
+ },
486
+ "attribute": "type",
487
+ "reflect": false,
488
+ "defaultValue": "'text'"
489
+ },
490
+ "value": {
491
+ "type": "any",
492
+ "mutable": true,
493
+ "complexType": {
494
+ "original": "string | number",
495
+ "resolved": "number | string",
496
+ "references": {}
497
+ },
498
+ "required": false,
499
+ "optional": false,
500
+ "docs": {
501
+ "tags": [],
502
+ "text": ""
503
+ },
504
+ "attribute": "value",
505
+ "reflect": false
506
+ }
507
+ };
508
+ }
509
+ static get events() {
510
+ return [{
511
+ "method": "valueChanged",
512
+ "name": "valueChanged",
513
+ "bubbles": true,
514
+ "cancelable": true,
515
+ "composed": true,
516
+ "docs": {
517
+ "tags": [],
518
+ "text": ""
519
+ },
520
+ "complexType": {
521
+ "original": "string",
522
+ "resolved": "string",
523
+ "references": {}
524
+ }
525
+ }, {
526
+ "method": "focusChanged",
527
+ "name": "focusChanged",
528
+ "bubbles": true,
529
+ "cancelable": true,
530
+ "composed": true,
531
+ "docs": {
532
+ "tags": [],
533
+ "text": ""
534
+ },
535
+ "complexType": {
536
+ "original": "string",
537
+ "resolved": "string",
538
+ "references": {}
539
+ }
540
+ }, {
541
+ "method": "blurChanged",
542
+ "name": "blurChanged",
543
+ "bubbles": true,
544
+ "cancelable": true,
545
+ "composed": true,
546
+ "docs": {
547
+ "tags": [],
548
+ "text": ""
549
+ },
550
+ "complexType": {
551
+ "original": "string",
552
+ "resolved": "string",
553
+ "references": {}
554
+ }
555
+ }, {
556
+ "method": "invalidChanged",
557
+ "name": "invalidChanged",
558
+ "bubbles": true,
559
+ "cancelable": true,
560
+ "composed": true,
561
+ "docs": {
562
+ "tags": [],
563
+ "text": ""
564
+ },
565
+ "complexType": {
566
+ "original": "string",
567
+ "resolved": "string",
568
+ "references": {}
569
+ }
570
+ }];
571
+ }
572
+ }