@3t-transform/threeteeui 0.0.16 → 0.0.17

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 (118) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/tttx-button.cjs.entry.js +24 -18
  3. package/dist/cjs/tttx-checkbox.cjs.entry.js +17 -17
  4. package/dist/cjs/tttx-form.cjs.entry.js +364 -364
  5. package/dist/cjs/tttx-icon.cjs.entry.js +12 -1854
  6. package/dist/cjs/tttx-input-calendar.cjs.entry.js +125 -0
  7. package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +33 -0
  8. package/dist/cjs/tttx-list.cjs.entry.js +187 -187
  9. package/dist/cjs/tttx-loading-spinner.cjs.entry.js +15 -15
  10. package/dist/cjs/tttx-popover-content.cjs.entry.js +12 -12
  11. package/dist/cjs/tttx-standalone-input.cjs.entry.js +125 -125
  12. package/dist/cjs/tttx-table.cjs.entry.js +49 -49
  13. package/dist/cjs/tttx.cjs.js +1 -1
  14. package/dist/collection/collection-manifest.json +2 -0
  15. package/dist/collection/components/atoms/tttx-button/tttx-button.css +94 -18
  16. package/dist/collection/components/atoms/tttx-button/tttx-button.js +110 -93
  17. package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +74 -27
  18. package/dist/collection/components/atoms/tttx-icon/tttx-icon.css +8 -5
  19. package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +62 -116
  20. package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +22 -47
  21. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.css +26 -0
  22. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +56 -0
  23. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +12 -0
  24. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +67 -66
  25. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +17 -17
  26. package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.js +97 -96
  27. package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.stories.js +23 -23
  28. package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.js +102 -101
  29. package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.stories.js +9 -9
  30. package/dist/collection/components/molecules/tttx-form/tttx-form.css +95 -11
  31. package/dist/collection/components/molecules/tttx-form/tttx-form.js +452 -451
  32. package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +109 -109
  33. package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.css +93 -0
  34. package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.js +174 -0
  35. package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.stories.js +27 -0
  36. package/dist/collection/components/molecules/tttx-list/tttx-list.js +312 -311
  37. package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +14 -14
  38. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +570 -569
  39. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +134 -134
  40. package/dist/collection/components/molecules/tttx-table/tttx-table.js +174 -177
  41. package/dist/collection/components/molecules/tttx-table/tttx-table.stories.js +65 -65
  42. package/dist/collection/components/palette.stories.js +7 -7
  43. package/dist/collection/docs/gettingstarted-developer.stories.js +5 -5
  44. package/dist/collection/icons.js +2838 -2838
  45. package/dist/collection/index.js +1 -1
  46. package/dist/components/index.d.ts +2 -0
  47. package/dist/components/index.js +2 -0
  48. package/dist/components/tttx-button.js +1 -40
  49. package/dist/components/tttx-button2.js +56 -0
  50. package/dist/components/tttx-checkbox.js +36 -36
  51. package/dist/components/tttx-form.js +382 -382
  52. package/dist/components/tttx-icon2.js +32 -1874
  53. package/dist/components/tttx-input-calendar.d.ts +11 -0
  54. package/dist/components/tttx-input-calendar.js +157 -0
  55. package/dist/components/tttx-keyvalue-block.d.ts +11 -0
  56. package/dist/components/tttx-keyvalue-block.js +49 -0
  57. package/dist/components/tttx-list.js +214 -214
  58. package/dist/components/tttx-loading-spinner2.js +33 -33
  59. package/dist/components/tttx-popover-content2.js +32 -32
  60. package/dist/components/tttx-standalone-input.js +168 -168
  61. package/dist/components/tttx-table.js +79 -79
  62. package/dist/esm/loader.js +1 -1
  63. package/dist/esm/polyfills/core-js.js +0 -0
  64. package/dist/esm/polyfills/dom.js +0 -0
  65. package/dist/esm/polyfills/es5-html-element.js +0 -0
  66. package/dist/esm/polyfills/index.js +0 -0
  67. package/dist/esm/polyfills/system.js +0 -0
  68. package/dist/esm/tttx-button.entry.js +25 -19
  69. package/dist/esm/tttx-checkbox.entry.js +17 -17
  70. package/dist/esm/tttx-form.entry.js +364 -364
  71. package/dist/esm/tttx-icon.entry.js +14 -1856
  72. package/dist/esm/tttx-input-calendar.entry.js +121 -0
  73. package/dist/esm/tttx-keyvalue-block.entry.js +29 -0
  74. package/dist/esm/tttx-list.entry.js +187 -187
  75. package/dist/esm/tttx-loading-spinner.entry.js +15 -15
  76. package/dist/esm/tttx-popover-content.entry.js +12 -12
  77. package/dist/esm/tttx-standalone-input.entry.js +125 -125
  78. package/dist/esm/tttx-table.entry.js +49 -49
  79. package/dist/esm/tttx.js +1 -1
  80. package/dist/tttx/{p-125f06b3.entry.js → p-1bc3dfee.entry.js} +1 -1
  81. package/dist/tttx/p-1cf8f9e8.entry.js +1 -0
  82. package/dist/tttx/p-220f7519.entry.js +1 -0
  83. package/dist/tttx/{p-5ce1ba22.entry.js → p-5247e827.entry.js} +1 -1
  84. package/dist/tttx/p-81904eed.entry.js +1 -0
  85. package/dist/tttx/p-cf107fb6.entry.js +1 -0
  86. package/dist/tttx/p-f56fe662.entry.js +1 -0
  87. package/dist/tttx/tttx.esm.js +1 -1
  88. package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +10 -9
  89. package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +10 -20
  90. package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +5 -14
  91. package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +20 -21
  92. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +4 -0
  93. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +6 -0
  94. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -6
  95. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +17 -17
  96. package/dist/types/components/atoms/tttx-popover-content/tttx-popover-content.d.ts +7 -7
  97. package/dist/types/components/atoms/tttx-popover-content/tttx-popover-content.stories.d.ts +18 -18
  98. package/dist/types/components/atoms/ttx-checkbox/tttx-checkbox.d.ts +9 -9
  99. package/dist/types/components/atoms/ttx-checkbox/tttx-checkbox.stories.d.ts +6 -6
  100. package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +134 -134
  101. package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +12 -12
  102. package/dist/types/components/molecules/tttx-input-calendar/tttx-input-calendar.d.ts +19 -0
  103. package/dist/types/components/molecules/tttx-input-calendar/tttx-input-calendar.stories.d.ts +26 -0
  104. package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +51 -51
  105. package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +13 -13
  106. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +38 -38
  107. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +106 -106
  108. package/dist/types/components/molecules/tttx-table/tttx-table.d.ts +15 -15
  109. package/dist/types/components/molecules/tttx-table/tttx-table.stories.d.ts +21 -21
  110. package/dist/types/components/palette.stories.d.ts +6 -6
  111. package/dist/types/components.d.ts +46 -15
  112. package/dist/types/docs/gettingstarted-developer.stories.d.ts +5 -5
  113. package/dist/types/icons.d.ts +2 -2
  114. package/dist/types/index.d.ts +1 -1
  115. package/package.json +4 -4
  116. package/dist/tttx/p-10316ff1.entry.js +0 -1
  117. package/dist/tttx/p-b1c22f5f.entry.js +0 -1
  118. package/dist/tttx/p-c7f9be65.entry.js +0 -1
@@ -2,131 +2,131 @@ import { r as registerInstance, c as createEvent, h, H as Host } from './index-2
2
2
 
3
3
  const tttxStandaloneInputCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger{color:#dc0000}.optional{color:#757575;font-weight:normal}label.inputBlock{display:block;position:relative;line-height:21px}label{font-weight:500;font-size:16px}input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}input~.errorBubble{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input~.errorBubble:not(.visible){visibility:hidden}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input:focus{border-color:#1479c6}:host{display:block}";
4
4
 
5
- const TttxInput = class {
6
- constructor(hostRef) {
7
- registerInstance(this, hostRef);
8
- this.valueChanged = createEvent(this, "valueChanged", 7);
9
- this.focusChanged = createEvent(this, "focusChanged", 7);
10
- this.blurChanged = createEvent(this, "blurChanged", 7);
11
- this.label = undefined;
12
- this.showerrormsg = undefined;
13
- this.errormsg = undefined;
14
- this.iconleft = undefined;
15
- this.iconright = undefined;
16
- this.autocapitalize = undefined;
17
- this.autocomplete = undefined;
18
- this.autofocus = 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
- render() {
48
- const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
49
- 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' ||
50
- this.type === 'search' ||
51
- this.type === 'url' ||
52
- this.type === 'tel' ||
53
- this.type === 'email' ||
54
- this.type === 'password' ||
55
- this.type === 'datepickers' ||
56
- this.type === 'range' ||
57
- this.type === 'color'
58
- ? this.autocomplete
59
- : null, checked: this.type === 'checkbox' || this.type === 'radio' ? this.checked : null, disabled: !this.required ? this.disabled : null, max: this.type === 'date' ||
60
- this.type === 'month' ||
61
- this.type === 'week' ||
62
- this.type === 'time' ||
63
- this.type === 'datetime-local' ||
64
- this.type === 'number' ||
65
- this.type === 'range'
66
- ? this.max
67
- : null, maxlength: this.maxlength, min: this.type === 'date' ||
68
- this.type === 'month' ||
69
- this.type === 'week' ||
70
- this.type === 'time' ||
71
- this.type === 'datetime-local' ||
72
- this.type === 'number' ||
73
- this.type === 'range'
74
- ? this.min
75
- : null, minlength: this.minlength, name: this.name, pattern: this.type === 'text' ||
76
- this.type === 'date' ||
77
- this.type === 'search' ||
78
- this.type === 'url' ||
79
- this.type === 'tel' ||
80
- this.type === 'email' ||
81
- this.type === 'password'
82
- ? this.pattern
83
- : null, placeholder: this.type === 'text' ||
84
- this.type === 'tel' ||
85
- this.type === 'email' ||
86
- this.type === 'url' ||
87
- this.type === 'password' ||
88
- this.type === 'search'
89
- ? this.placeholder
90
- : null, readonly: this.type === 'text' ||
91
- this.type === 'search' ||
92
- this.type === 'url' ||
93
- this.type === 'tel' ||
94
- this.type === 'email' ||
95
- this.type === 'password' ||
96
- this.type === 'date' ||
97
- this.type === 'month' ||
98
- this.type === 'week' ||
99
- this.type === 'time' ||
100
- this.type === 'datetime-local' ||
101
- this.type === 'number'
102
- ? this.readonly
103
- : null, required: this.type === 'text' ||
104
- this.type === 'search' ||
105
- this.type === 'url' ||
106
- this.type === 'tel' ||
107
- this.type === 'email' ||
108
- this.type === 'password' ||
109
- this.type === 'date' ||
110
- this.type === 'month' ||
111
- this.type === 'week' ||
112
- this.type === 'time' ||
113
- this.type === 'datetime-local' ||
114
- this.type === 'number' ||
115
- this.type === 'checkbox' ||
116
- this.type === 'radio' ||
117
- this.type === 'file'
118
- ? this.required
119
- : null, step: this.type === 'date' ||
120
- this.type === 'month' ||
121
- this.type === 'week' ||
122
- this.type === 'time' ||
123
- this.type === 'datetime-local' ||
124
- this.type === 'number' ||
125
- this.type === 'range'
126
- ? this.step
127
- : 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))));
128
- }
129
- };
5
+ const TttxInput = class {
6
+ constructor(hostRef) {
7
+ registerInstance(this, hostRef);
8
+ this.valueChanged = createEvent(this, "valueChanged", 7);
9
+ this.focusChanged = createEvent(this, "focusChanged", 7);
10
+ this.blurChanged = createEvent(this, "blurChanged", 7);
11
+ this.label = undefined;
12
+ this.showerrormsg = undefined;
13
+ this.errormsg = undefined;
14
+ this.iconleft = undefined;
15
+ this.iconright = undefined;
16
+ this.autocapitalize = undefined;
17
+ this.autocomplete = undefined;
18
+ this.autofocus = 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
+ render() {
48
+ const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
49
+ 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' ||
50
+ this.type === 'search' ||
51
+ this.type === 'url' ||
52
+ this.type === 'tel' ||
53
+ this.type === 'email' ||
54
+ this.type === 'password' ||
55
+ this.type === 'datepickers' ||
56
+ this.type === 'range' ||
57
+ this.type === 'color'
58
+ ? this.autocomplete
59
+ : null, checked: this.type === 'checkbox' || this.type === 'radio' ? this.checked : null, disabled: !this.required ? this.disabled : null, max: this.type === 'date' ||
60
+ this.type === 'month' ||
61
+ this.type === 'week' ||
62
+ this.type === 'time' ||
63
+ this.type === 'datetime-local' ||
64
+ this.type === 'number' ||
65
+ this.type === 'range'
66
+ ? this.max
67
+ : null, maxlength: this.maxlength, min: this.type === 'date' ||
68
+ this.type === 'month' ||
69
+ this.type === 'week' ||
70
+ this.type === 'time' ||
71
+ this.type === 'datetime-local' ||
72
+ this.type === 'number' ||
73
+ this.type === 'range'
74
+ ? this.min
75
+ : null, minlength: this.minlength, name: this.name, pattern: this.type === 'text' ||
76
+ this.type === 'date' ||
77
+ this.type === 'search' ||
78
+ this.type === 'url' ||
79
+ this.type === 'tel' ||
80
+ this.type === 'email' ||
81
+ this.type === 'password'
82
+ ? this.pattern
83
+ : null, placeholder: this.type === 'text' ||
84
+ this.type === 'tel' ||
85
+ this.type === 'email' ||
86
+ this.type === 'url' ||
87
+ this.type === 'password' ||
88
+ this.type === 'search'
89
+ ? this.placeholder
90
+ : null, readonly: this.type === 'text' ||
91
+ this.type === 'search' ||
92
+ this.type === 'url' ||
93
+ this.type === 'tel' ||
94
+ this.type === 'email' ||
95
+ this.type === 'password' ||
96
+ this.type === 'date' ||
97
+ this.type === 'month' ||
98
+ this.type === 'week' ||
99
+ this.type === 'time' ||
100
+ this.type === 'datetime-local' ||
101
+ this.type === 'number'
102
+ ? this.readonly
103
+ : null, required: this.type === 'text' ||
104
+ this.type === 'search' ||
105
+ this.type === 'url' ||
106
+ this.type === 'tel' ||
107
+ this.type === 'email' ||
108
+ this.type === 'password' ||
109
+ this.type === 'date' ||
110
+ this.type === 'month' ||
111
+ this.type === 'week' ||
112
+ this.type === 'time' ||
113
+ this.type === 'datetime-local' ||
114
+ this.type === 'number' ||
115
+ this.type === 'checkbox' ||
116
+ this.type === 'radio' ||
117
+ this.type === 'file'
118
+ ? this.required
119
+ : null, step: this.type === 'date' ||
120
+ this.type === 'month' ||
121
+ this.type === 'week' ||
122
+ this.type === 'time' ||
123
+ this.type === 'datetime-local' ||
124
+ this.type === 'number' ||
125
+ this.type === 'range'
126
+ ? this.step
127
+ : 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))));
128
+ }
129
+ };
130
130
  TttxInput.style = tttxStandaloneInputCss;
131
131
 
132
132
  export { TttxInput as tttx_standalone_input };
@@ -2,55 +2,55 @@ import { r as registerInstance, c as createEvent, h, H as Host } from './index-2
2
2
 
3
3
  const tttxTableCss = "// SPACING $spacing-unit: 4px; // REGULAR $horizontal-spacing: $spacing-unit * 4; $vertical-spacing: $spacing-unit * 2; $base-padding: $vertical-spacing $horizontal-spacing; $base-height: $spacing-unit * 9; $component-spacing: $spacing-unit * 4; // SMALL $horizontal-spacing-sm: $spacing-unit * 2; $vertical-spacing-sm: $spacing-unit * 1; $base-padding-sm: $vertical-spacing-sm $horizontal-spacing-sm; $base-height-sm: $spacing-unit * 7; // COLOURS $grey-0: #212121; $grey-1: #363636; $grey-2: #4c4c4c; $grey-3: #636363; $grey-4: #757575; $grey-5: #9e9e9e; $grey-6: #aeaeae; $grey-7: #c8c8c8; $grey-8: #e3e3e3; $grey-9: #f0f0f0; $white: white; $black: $grey-0; $transparent: transparent; $blue-0: #00187c; $blue-1: #032e8c; $blue-2: #0849a3; $blue-3: #0951a8; $blue-4: #1169ba; $blue-5: #1479c6; $blue-6: #5194d2; $blue-7: #7aacdd; $blue-8: #b9d5ed; $blue-9: #e7f1f9; $red-0: #7c0000; $red-1: #8c0000; $red-2: #a30000; $red-3: #a80000; $red-4: #ba0000; $red-5: #dc0000; $red-6: #d25151; $red-7: #dd7a7a; $red-8: #edc1c1; $red-9: #f9e7e7; $black-1: #e6e6e6; $brand: $blue-0; $accent: $blue-5; $accent-selected: $blue-9; $error: $red-5; $severity-critical: #dc0000; $severity-warning: #f59500; $severity-success: #a2bb31; $severity-info: $accent; $ui-primary: $black; $ui-secondary: $grey-4; $ui-disabled: $grey-2; $ui-placeholder: $grey-5; $ui-background: $grey-9; $ui-sheet: $white; $ui-border: #d5d5d5; // BORDERS $ui-border-radius: 4px; $ui-border-width: 1px; // TYPOGRAPHY $font-size-default: 16px; $font-size-small: 14px; .material-symbols-rounded{font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24}.skeleton{animation:skeleton-loading 1s linear infinite alternate;border-radius:4px;width:100%}@keyframes skeleton-loading{0%{background-color:hsl(200, 20%, 80%)}100%{background-color:hsl(200, 20%, 95%)}}:host{display:block}table{box-sizing:border-box;width:100%;border-collapse:collapse;border-spacing:0;border:1px solid #ddd;border-bottom:none}thead tr{height:52px;color:#757575}tbody tr{height:48px;color:#212121}tr{font-family:'Roboto', sans-serif;font-weight:400;font-size:16px;display:flex;align-items:center;border-bottom:1px solid #ddd}.selected{background-color:#F0F0F0}.checked{background-color:#e7f1f9}td,th{min-width:300px;margin-left:16px;display:flex;align-items:left}.skeleton{height:24px;display:block}.align-right{margin-left:auto}";
4
4
 
5
- const TttxTable = class {
6
- constructor(hostRef) {
7
- registerInstance(this, hostRef);
8
- this.rowSelected = createEvent(this, "rowSelected", 7);
9
- this.headerClicked = createEvent(this, "headerClicked", 7);
10
- this.headers = [];
11
- this.data = {};
12
- this.loading = false;
13
- this.selected = -1;
14
- }
15
- handleKeyDown(ev) {
16
- if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
17
- this.updateSelectedIndex(ev.key);
18
- this.emitRowSelected();
19
- }
20
- }
21
- updateSelectedIndex(key) {
22
- if (this.selected === -1) {
23
- this.selected = 0;
24
- }
25
- else {
26
- const isArrowDown = key === 'ArrowDown';
27
- const isArrowUp = key === 'ArrowUp';
28
- if (isArrowDown && this.selected < this.data.length - 1) {
29
- this.selected++;
30
- }
31
- else if (isArrowUp && this.selected > 0) {
32
- this.selected--;
33
- }
34
- }
35
- }
36
- emitRowSelected() {
37
- this.rowSelected.emit(this.data[this.selected]);
38
- }
39
- rowSelectedHandler(row) {
40
- this.rowSelected.emit(row);
41
- this.selected = this.data.findIndex((item) => item === row);
42
- }
43
- headerClickedHandler(key) {
44
- this.headerClicked.emit(key);
45
- }
46
- render() {
47
- return (h(Host, null, h("table", null, h("thead", null, h("tr", null, this.loading ?
48
- [1, 2, 3].map(() => (h("th", null, h("div", { class: "skeleton" })))) :
49
- this.headers && this.headers.map((header) => (h("th", { scope: "col", onClick: () => this.headerClickedHandler(header.key) }, header.label))))), h("tbody", null, this.loading ?
50
- [1, 2, 3].map(() => (h("tr", null, h("td", null, h("div", { class: "skeleton" })), h("td", null, h("div", { class: "skeleton" })), h("td", null, h("div", { class: "skeleton" }))))) :
51
- Object.keys(this.data).map((key, index) => (h("tr", { class: index === this.selected ? 'selected' : '', onClick: () => this.rowSelectedHandler(this.data[key]) }, this.headers.map((header) => (h("td", null, this.data[key][header.key], " ", header.actions && h("tttx-icon", { class: "align-right", icon: "more_vert" }, h("div", { slot: "popover" }, h("tttx-popover-content", { header: "The humble egg", body: "Most arthropods such as insects, vertebrates (excluding live-bearing mammals), and mollusks lay eggs, although some, such as scorpions, do not.", linkcontext: "Wikipedia_egg", linktext: "Learn more about eggs" })))))))))))));
52
- }
53
- };
5
+ const TttxTable = class {
6
+ constructor(hostRef) {
7
+ registerInstance(this, hostRef);
8
+ this.rowSelected = createEvent(this, "rowSelected", 7);
9
+ this.headerClicked = createEvent(this, "headerClicked", 7);
10
+ this.headers = [];
11
+ this.data = [];
12
+ this.loading = false;
13
+ this.selected = -1;
14
+ }
15
+ handleKeyDown(ev) {
16
+ if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
17
+ this.updateSelectedIndex(ev.key);
18
+ this.emitRowSelected();
19
+ }
20
+ }
21
+ updateSelectedIndex(key) {
22
+ if (this.selected === -1) {
23
+ this.selected = 0;
24
+ }
25
+ else {
26
+ const isArrowDown = key === 'ArrowDown';
27
+ const isArrowUp = key === 'ArrowUp';
28
+ if (isArrowDown && this.selected < this.data.length - 1) {
29
+ this.selected++;
30
+ }
31
+ else if (isArrowUp && this.selected > 0) {
32
+ this.selected--;
33
+ }
34
+ }
35
+ }
36
+ emitRowSelected() {
37
+ this.rowSelected.emit(this.data[this.selected]);
38
+ }
39
+ rowSelectedHandler(row) {
40
+ this.rowSelected.emit(row);
41
+ this.selected = this.data.findIndex((item) => item === row);
42
+ }
43
+ headerClickedHandler(key) {
44
+ this.headerClicked.emit(key);
45
+ }
46
+ render() {
47
+ return (h(Host, null, h("table", null, h("thead", null, h("tr", null, this.loading ?
48
+ [1, 2, 3].map(() => (h("th", null, h("div", { class: "skeleton" })))) :
49
+ this.headers && this.headers.map((header) => (h("th", { scope: "col", onClick: () => this.headerClickedHandler(header.key) }, header.label))))), h("tbody", null, this.loading ?
50
+ [1, 2, 3].map(() => (h("tr", null, h("td", null, h("div", { class: "skeleton" })), h("td", null, h("div", { class: "skeleton" })), h("td", null, h("div", { class: "skeleton" }))))) :
51
+ Object.keys(this.data).map((key, index) => (h("tr", { class: index === this.selected ? 'selected' : '', onClick: () => this.rowSelectedHandler(this.data[key]) }, this.headers.map((header) => (h("td", null, this.data[key][header.key], " ", header.actions && h("tttx-icon", { class: "align-right", icon: "more_vert" }, h("div", { slot: "popover" }, h("tttx-popover-content", { header: "The humble egg", body: "Most arthropods such as insects, vertebrates (excluding live-bearing mammals), and mollusks lay eggs, although some, such as scorpions, do not.", linkcontext: "Wikipedia_egg", linktext: "Learn more about eggs" })))))))))))));
52
+ }
53
+ };
54
54
  TttxTable.style = tttxTableCss;
55
55
 
56
56
  export { TttxTable as tttx_table };
package/dist/esm/tttx.js CHANGED
@@ -14,5 +14,5 @@ const patchBrowser = () => {
14
14
  };
15
15
 
16
16
  patchBrowser().then(options => {
17
- return bootstrapLazy([["tttx-table",[[1,"tttx-table",{"headers":[8],"data":[8],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-list",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input",[[1,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autocomplete":[1],"autofocus":[4],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-button",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"colour":[1]},[[4,"click","handleDocumentClick"]]]]]], options);
17
+ return bootstrapLazy([["tttx-input-calendar",[[1,"tttx-input-calendar",{"months":[4],"years":[4],"showCalendar":[32],"selectedYear":[32],"selectedMonth":[32]}]]],["tttx-table",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-list",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input",[[1,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autocomplete":[1],"autofocus":[4],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-checkbox",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
18
18
  });
@@ -1 +1 @@
1
- import{r as t,c as i,h as e,H as n}from"./p-184c4fae.js";const o=class{constructor(e){t(this,e),this.dataSubmitted=i(this,"dataSubmitted",7),this.dataChanged=i(this,"dataChanged",7),this.template=document.createElement("template"),this.formschema=void 0,this.submitValue=void 0}onFormSchemaChange(t){this._formSchema="string"==typeof t?JSON.parse(t):t}fieldChanged(t){this.dataChanged.emit({name:t.target.name,value:t.target.value})}validityCheck(t){var i,e,n,o;t.preventDefault();const r=t.target;let a=!0,s="";switch(!0){case r.validity.valueMissing:s=null!==(i=r.dataset.required)&&void 0!==i?i:"This field is required";break;case r.validity.patternMismatch:s=null!==(e=r.dataset.pattern)&&void 0!==e?e:"Incorrect format";break;case r.validity.badInput:s=null!==(n=r.dataset.badinput)&&void 0!==n?n:"Wrong input type";break;case r.validity.rangeOverflow||r.validity.rangeUnderflow:s=null!==(o=r.dataset.range)&&void 0!==o?o:"Invalid value";break;default:a=!1}this.setErrorState(r,a,s)}setErrorState(t,i,e){const n=t.parentElement.querySelector(".errorBubble");if(i){t.className="invalid";const i=this.createErrorIcon();n.replaceChildren(i,e)}else t.className="",n.replaceChildren()}createErrorIcon(){const t=document.createElement("span");return t.className="material-symbols-rounded",t.textContent="warning",t}doSubmit(t){t.preventDefault();const i=new FormData(t.target);this.dataSubmitted.emit(i)}componentWillLoad(){this.onFormSchemaChange(this.formschema)}componentWillRender(){this.template=document.createElement("template"),this.populateFormFromSchema()}createInput(t,i){var e;const n=document.createElement("input");return n.name=t,n.type=i.type,n.placeholder=null!==(e=i.placeholder)&&void 0!==e?e:"",n.autocomplete="off",n.autocapitalize="off",n}applyValidation(t,i){var e,n;i.required&&(t.setAttribute("required",""),t.setAttribute("data-required",null!==(e=i.required.message)&&void 0!==e?e:"")),i.pattern&&(t.setAttribute("pattern",i.pattern.pattern),t.setAttribute("data-pattern",null!==(n=i.pattern.message)&&void 0!==n?n:"")),i.badInput&&t.setAttribute("data-badinput",i.badInput.message),i.minmax&&(t.setAttribute("min",i.minmax.min),t.setAttribute("max",i.minmax.max),t.setAttribute("data-range",i.minmax.message)),i.maxlength&&t.setAttribute("maxlength",i.maxlength)}createErrorBubble(){const t=document.createElement("div");return t.className="errorBubble",t}createLabel(t,i,e){const n=document.createElement("label");if(n.className="inputBlock",n.innerText=t.label,!t.validation){const t=document.createElement("span");t.className="optional",t.innerHTML="&nbsp;(optional)",n.appendChild(t)}return n.appendChild(i),n.appendChild(e),n}createSubmitButton(){const t=document.createElement("input");return t.type="submit",t.className="button primary-blue",t.value="Save",t}populateFormFromSchema(){if(!this._formSchema)return;const t=this._formSchema.properties;Object.keys(t).forEach((i=>{const e=t[i].form,n=this.createInput(i,e);e.validation&&this.applyValidation(n,e.validation);const o=this.createErrorBubble(),r=this.createLabel(e,n,o);this.template.content.append(r)}));const i=this.createSubmitButton();this.template.content.append(i)}componentDidRender(){if(!this._formSchema)return;const t=this.template.content.cloneNode(!0);Object.keys(this._formSchema.properties).forEach((i=>{const e=t.querySelector(`[name=${i}]`);e.oninvalid=this.validityCheck.bind(this),e.onblur=this.validityCheck.bind(this),e.onkeyup=this.fieldChanged.bind(this),e.onchange=this.fieldChanged.bind(this)})),this.fieldset.appendChild(t)}render(){return e(n,null,e("form",{onSubmit:this.doSubmit.bind(this)},e("fieldset",{ref:t=>this.fieldset=t})))}static get watchers(){return{formschema:["onFormSchemaChange"]}}};o.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-rounded{font-family:"Material Symbols Rounded", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger{color:#dc0000}.optional{color:#757575;font-weight:normal}label.inputBlock{display:block;position:relative;line-height:21px}label{font-weight:500;font-size:16px}input:not([type=submit]){font-family:"Roboto", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}input~.errorBubble{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:"Roboto", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input~.errorBubble:not(.visible){visibility:hidden}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:"Roboto", sans-serif;color:#dc0000;visibility:visible}input:focus{border-color:#1479c6}.button{height:36px;padding:8px 16px;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button:hover{background:#f0f0f0}.button:active{background:#e3e3e3}.primary-blue{background:#1479c6;border:1px solid #1479c6;color:white}.primary-blue:hover{background:#1169ba}.primary-blue:active{background:#0951a8}.secondary-white{background:white;border:1px solid #212121}:host{display:block}fieldset{margin:0;padding:0;border:none}input[type=submit]{margin-left:auto}';export{o as tttx_form}
1
+ import{r as t,c as i,h as o,H as e}from"./p-184c4fae.js";const n=class{constructor(o){t(this,o),this.dataSubmitted=i(this,"dataSubmitted",7),this.dataChanged=i(this,"dataChanged",7),this.template=document.createElement("template"),this.formschema=void 0,this.submitValue=void 0}onFormSchemaChange(t){this._formSchema="string"==typeof t?JSON.parse(t):t}fieldChanged(t){this.dataChanged.emit({name:t.target.name,value:t.target.value})}validityCheck(t){var i,o,e,n;t.preventDefault();const r=t.target;let a=!0,s="";switch(!0){case r.validity.valueMissing:s=null!==(i=r.dataset.required)&&void 0!==i?i:"This field is required";break;case r.validity.patternMismatch:s=null!==(o=r.dataset.pattern)&&void 0!==o?o:"Incorrect format";break;case r.validity.badInput:s=null!==(e=r.dataset.badinput)&&void 0!==e?e:"Wrong input type";break;case r.validity.rangeOverflow||r.validity.rangeUnderflow:s=null!==(n=r.dataset.range)&&void 0!==n?n:"Invalid value";break;default:a=!1}this.setErrorState(r,a,s)}setErrorState(t,i,o){const e=t.parentElement.querySelector(".errorBubble");if(i){t.className="invalid";const i=this.createErrorIcon();e.replaceChildren(i,o)}else t.className="",e.replaceChildren()}createErrorIcon(){const t=document.createElement("span");return t.className="material-symbols-rounded",t.textContent="warning",t}doSubmit(t){t.preventDefault();const i=new FormData(t.target);this.dataSubmitted.emit(i)}componentWillLoad(){this.onFormSchemaChange(this.formschema)}componentWillRender(){this.template=document.createElement("template"),this.populateFormFromSchema()}createInput(t,i){var o;const e=document.createElement("input");return e.name=t,e.type=i.type,e.placeholder=null!==(o=i.placeholder)&&void 0!==o?o:"",e.autocomplete="off",e.autocapitalize="off",e}applyValidation(t,i){var o,e;i.required&&(t.setAttribute("required",""),t.setAttribute("data-required",null!==(o=i.required.message)&&void 0!==o?o:"")),i.pattern&&(t.setAttribute("pattern",i.pattern.pattern),t.setAttribute("data-pattern",null!==(e=i.pattern.message)&&void 0!==e?e:"")),i.badInput&&t.setAttribute("data-badinput",i.badInput.message),i.minmax&&(t.setAttribute("min",i.minmax.min),t.setAttribute("max",i.minmax.max),t.setAttribute("data-range",i.minmax.message)),i.maxlength&&t.setAttribute("maxlength",i.maxlength)}createErrorBubble(){const t=document.createElement("div");return t.className="errorBubble",t}createLabel(t,i,o){const e=document.createElement("label");if(e.className="inputBlock",e.innerText=t.label,!t.validation){const t=document.createElement("span");t.className="optional",t.innerHTML="&nbsp;(optional)",e.appendChild(t)}return e.appendChild(i),e.appendChild(o),e}createSubmitButton(){const t=document.createElement("input");return t.type="submit",t.className="button primary-blue",t.value="Save",t}populateFormFromSchema(){if(!this._formSchema)return;const t=this._formSchema.properties;Object.keys(t).forEach((i=>{const o=t[i].form,e=this.createInput(i,o);o.validation&&this.applyValidation(e,o.validation);const n=this.createErrorBubble(),r=this.createLabel(o,e,n);this.template.content.append(r)}));const i=this.createSubmitButton();this.template.content.append(i)}componentDidRender(){if(!this._formSchema)return;const t=this.template.content.cloneNode(!0);Object.keys(this._formSchema.properties).forEach((i=>{const o=t.querySelector(`[name=${i}]`);o.oninvalid=this.validityCheck.bind(this),o.onblur=this.validityCheck.bind(this),o.onkeyup=this.fieldChanged.bind(this),o.onchange=this.fieldChanged.bind(this)})),this.fieldset.appendChild(t)}render(){return o(e,null,o("form",{onSubmit:this.doSubmit.bind(this)},o("fieldset",{ref:t=>this.fieldset=t})))}static get watchers(){return{formschema:["onFormSchemaChange"]}}};n.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-rounded{font-family:"Material Symbols Rounded", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger{color:#dc0000}.optional{color:#757575;font-weight:normal}label.inputBlock{display:block;position:relative;line-height:21px}label{font-weight:500;font-size:16px}input:not([type=submit]){font-family:"Roboto", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}input~.errorBubble{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:"Roboto", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input~.errorBubble:not(.visible){visibility:hidden}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:"Roboto", sans-serif;color:#dc0000;visibility:visible}input:focus{border-color:#1479c6}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #D5D5D5}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #D5D5D5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:hover{background:#146EB3;border:1px solid #146EB3}.primary:active{background:#1464A2;border:1px solid #1464A2}.borderless{background:transparent;border:none;color:#212121}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.danger{background:#DC0000;border:1px solid #DC0000;color:white}.danger:hover{background:#C60000;border:1px solid #C60000}.danger:active{background:#B00000;border:1px solid #B00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}:host{display:block}fieldset{margin:0;padding:0;border:none}input[type=submit]{margin-left:auto}';export{n as tttx_form}
@@ -0,0 +1 @@
1
+ import{r as i,c as t,h as s,H as e}from"./p-184c4fae.js";const o=class{constructor(s){i(this,s),this.valueChanged=t(this,"valueChanged",7),this.focusChanged=t(this,"focusChanged",7),this.blurChanged=t(this,"blurChanged",7),this.label=void 0,this.showerrormsg=void 0,this.errormsg=void 0,this.iconleft=void 0,this.iconright=void 0,this.autocapitalize=void 0,this.autocomplete=void 0,this.autofocus=void 0,this.checked=void 0,this.disabled=void 0,this.max=void 0,this.maxlength=void 0,this.min=void 0,this.minlength=void 0,this.name=void 0,this.pattern=void 0,this.placeholder=void 0,this.readonly=void 0,this.required=void 0,this.step=void 0,this.type="text",this.value=void 0}handleChange(i){const t=i.target;this.value=t.value,this.valueChanged.emit(t.value)}handleFocus(i){this.focusChanged.emit(i.target.value)}handleBlur(i){this.blurChanged.emit(i.target.value)}render(){const i=["standalone",this.showerrormsg?"invalid":""].join(" ");return s(e,null,s("label",{class:"inputBlock"},this.label,this.required?"":s("span",{class:"optional"}," (optional)"),this.iconleft&&s("div",{class:"icon-left"},s("tttx-icon",{icon:this.iconleft,color:"grey"})),s("input",{class:i,autocapitalize:"url"===this.type||"email"===this.type||"password"===this.type?this.autocapitalize:null,autofocus:this.autofocus,autocomplete:"text"===this.type||"search"===this.type||"url"===this.type||"tel"===this.type||"email"===this.type||"password"===this.type||"datepickers"===this.type||"range"===this.type||"color"===this.type?this.autocomplete:null,checked:"checkbox"===this.type||"radio"===this.type?this.checked:null,disabled:this.required?null:this.disabled,max:"date"===this.type||"month"===this.type||"week"===this.type||"time"===this.type||"datetime-local"===this.type||"number"===this.type||"range"===this.type?this.max:null,maxlength:this.maxlength,min:"date"===this.type||"month"===this.type||"week"===this.type||"time"===this.type||"datetime-local"===this.type||"number"===this.type||"range"===this.type?this.min:null,minlength:this.minlength,name:this.name,pattern:"text"===this.type||"date"===this.type||"search"===this.type||"url"===this.type||"tel"===this.type||"email"===this.type||"password"===this.type?this.pattern:null,placeholder:"text"===this.type||"tel"===this.type||"email"===this.type||"url"===this.type||"password"===this.type||"search"===this.type?this.placeholder:null,readonly:"text"===this.type||"search"===this.type||"url"===this.type||"tel"===this.type||"email"===this.type||"password"===this.type||"date"===this.type||"month"===this.type||"week"===this.type||"time"===this.type||"datetime-local"===this.type||"number"===this.type?this.readonly:null,required:"text"===this.type||"search"===this.type||"url"===this.type||"tel"===this.type||"email"===this.type||"password"===this.type||"date"===this.type||"month"===this.type||"week"===this.type||"time"===this.type||"datetime-local"===this.type||"number"===this.type||"checkbox"===this.type||"radio"===this.type||"file"===this.type?this.required:null,step:"date"===this.type||"month"===this.type||"week"===this.type||"time"===this.type||"datetime-local"===this.type||"number"===this.type||"range"===this.type?this.step:null,type:this.type,value:this.value,onBlur:this.handleBlur.bind(this),onFocus:this.handleFocus.bind(this),onInput:this.handleChange.bind(this)}),this.iconright&&s("div",{class:"icon-right"},s("tttx-icon",{icon:this.iconright,color:"grey"})),s("span",{class:["errorBubble",this.showerrormsg&&this.errormsg?"visible":""].join(" ")},s("span",{class:"material-symbols-rounded validationicon"},"warning")," ",this.errormsg)))}};o.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-rounded{font-family:"Material Symbols Rounded", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger{color:#dc0000}.optional{color:#757575;font-weight:normal}label.inputBlock{display:block;position:relative;line-height:21px}label{font-weight:500;font-size:16px}input:not([type=submit]){font-family:"Roboto", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}input~.errorBubble{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:"Roboto", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input~.errorBubble:not(.visible){visibility:hidden}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:"Roboto", sans-serif;color:#dc0000;visibility:visible}input:focus{border-color:#1479c6}:host{display:block}';export{o as tttx_standalone_input}
@@ -0,0 +1 @@
1
+ import{r as t,h as e,H as a,g as i}from"./p-184c4fae.js";const s=class{constructor(e){t(this,e),this.monthNames=Array.from({length:12},((t,e)=>e+1)).map((t=>{const e=new Date(0);return e.setUTCMonth(t-1),e.toLocaleString("default",{month:"long"})})),this.onClickOutside=t=>{!this.el.contains(t.target)&&this.showCalendar&&(this.showCalendar=!1)},this.onFocusIn=t=>{!this.el.contains(t.target)&&this.showCalendar&&(this.showCalendar=!1)},this.previousHandler=()=>{1===this.selectedMonth?(this.selectedMonth=12,this.selectedYear--):this.selectedMonth--},this.nextHandler=()=>{12===this.selectedMonth?(this.selectedMonth=1,this.selectedYear++):this.selectedMonth++},this.months=!1,this.years=!1,this.showCalendar=!1,this.selectedYear=(new Date).getFullYear(),this.selectedMonth=(new Date).getMonth()+1}componentDidLoad(){const t=this.el.shadowRoot.querySelector("slot");if(t){const e=t.assignedElements();e[0]&&e[0].addEventListener("click",(t=>{t.preventDefault(),this.showCalendar=!this.showCalendar}))}document.addEventListener("click",this.onClickOutside)}disconnectedCallback(){document.removeEventListener("click",this.onClickOutside)}getDaysAndDates(t,e){const a=new Date(t,e-1,1),i=new Date(t,e,0),s=[];for(let t=a;t<=i;t.setDate(t.getDate()+1)){const e=t.getDay(),a=t.getDate();s.push({day:e,date:a})}return s}clickDateHandler(t){const{year:e,month:a,day:i}=t,s=new Date(e,a-1,i+1);this.inputElement.valueAsDate=s,this.showCalendar=!1}render(){const t=this.getDaysAndDates(this.selectedYear,this.selectedMonth),i=(new Date).getFullYear(),s=Array.from({length:11},((t,e)=>i-5+e)),n=[];let l=[];for(let a=0;a<t[0].day;a++)l.push(e("td",null));if(t.forEach((({day:t,date:a})=>{l.push(e("td",null,e("span",{onClick:()=>this.clickDateHandler({year:this.selectedYear,month:this.selectedMonth,day:a})},a))),6===t&&(n.push(e("tr",null,l)),l=[])})),l.length>0){for(;l.length<7;)l.push(e("td",null));n.push(e("tr",null,l))}return e(a,null,e("div",{class:"calcontainer"},e("slot",null),e("div",{class:"calendar "+(this.showCalendar?"calendar-visible":"")},e("div",{class:"calendar-header"},e("tttx-button",{onClick:this.previousHandler,design:"borderless",icon:"chevron_left",notext:!0}),this.months&&e("select",{id:"month-select",onInput:t=>{this.selectedMonth=parseInt(t.target.value)}},Array.from({length:12},((t,e)=>e+1)).map((t=>e("option",{value:t,selected:t===this.selectedMonth},this.monthNames[t-1])))),this.years&&e("select",{id:"year-select",onInput:t=>{this.selectedYear=parseInt(t.target.value)}},s.map((t=>e("option",{value:t,selected:t===this.selectedYear},t)))),e("div",{class:"date-display"},this.monthNames[this.selectedMonth-1]," ",this.selectedYear),e("tttx-button",{onClick:this.nextHandler,design:"borderless",icon:"chevron_right",notext:!0})),e("table",{class:"calendar-table"},e("thead",null,e("tr",null,["Sun","Mon","Tue","Wed","Thu","Fri","Sat"].map((t=>e("th",null,t))))),e("tbody",null,n)))))}get el(){return i(this)}};s.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}:host{display:block;--border-radius:4px;position:relative}.calcontainer{-webkit-perspective:500px;perspective:500px}.lefty{float:left}.righty{float:right}.calendar{display:none;position:absolute;box-sizing:border-box;width:312px;height:332px;background-color:white;padding:16px;box-shadow:0px 1px 5px rgba(17, 17, 17, 0.3);border-radius:var(--border-radius)}.calendar-header{display:flex;justify-content:space-between;margin-bottom:8px}.date-display{margin-top:8px}.calendar-header select{border:none;padding:5px}.calendar-table{width:100%;border-collapse:collapse}.calendar-table th{text-align:center;padding:4px;text-transform:uppercase;font-size:14px;color:#757575;border-bottom:1px solid #d5d5d5;margin-bottom:8px}.calendar .calendar-table td{padding:0;margin:0;width:14.2%;text-align:center;height:36px;line-height:36px}.calendar .calendar-table td span:hover{background-color:#f0f0f0}.calendar .calendar-table td span{display:block;text-align:center;padding:4px;cursor:pointer;border-radius:var(--border-radius)}.calendar-visible{display:block}.calendar-table thead tr{border-bottom:1px solid #d5d5d5}';export{s as tttx_input_calendar}
@@ -1 +1 @@
1
- import{r as e,c as t,h as i,H as s}from"./p-184c4fae.js";const r=class{constructor(i){e(this,i),this.rowSelected=t(this,"rowSelected",7),this.headerClicked=t(this,"headerClicked",7),this.headers=[],this.data={},this.loading=!1,this.selected=-1}handleKeyDown(e){"ArrowDown"!==e.key&&"ArrowUp"!==e.key||(this.updateSelectedIndex(e.key),this.emitRowSelected())}updateSelectedIndex(e){if(-1===this.selected)this.selected=0;else{const t="ArrowUp"===e;"ArrowDown"===e&&this.selected<this.data.length-1?this.selected++:t&&this.selected>0&&this.selected--}}emitRowSelected(){this.rowSelected.emit(this.data[this.selected])}rowSelectedHandler(e){this.rowSelected.emit(e),this.selected=this.data.findIndex((t=>t===e))}headerClickedHandler(e){this.headerClicked.emit(e)}render(){return i(s,null,i("table",null,i("thead",null,i("tr",null,this.loading?[1,2,3].map((()=>i("th",null,i("div",{class:"skeleton"})))):this.headers&&this.headers.map((e=>i("th",{scope:"col",onClick:()=>this.headerClickedHandler(e.key)},e.label))))),i("tbody",null,this.loading?[1,2,3].map((()=>i("tr",null,i("td",null,i("div",{class:"skeleton"})),i("td",null,i("div",{class:"skeleton"})),i("td",null,i("div",{class:"skeleton"}))))):Object.keys(this.data).map(((e,t)=>i("tr",{class:t===this.selected?"selected":"",onClick:()=>this.rowSelectedHandler(this.data[e])},this.headers.map((t=>i("td",null,this.data[e][t.key]," ",t.actions&&i("tttx-icon",{class:"align-right",icon:"more_vert"},i("div",{slot:"popover"},i("tttx-popover-content",{header:"The humble egg",body:"Most arthropods such as insects, vertebrates (excluding live-bearing mammals), and mollusks lay eggs, although some, such as scorpions, do not.",linkcontext:"Wikipedia_egg",linktext:"Learn more about eggs"}))))))))))))}};r.style="// SPACING $spacing-unit: 4px; // REGULAR $horizontal-spacing: $spacing-unit * 4; $vertical-spacing: $spacing-unit * 2; $base-padding: $vertical-spacing $horizontal-spacing; $base-height: $spacing-unit * 9; $component-spacing: $spacing-unit * 4; // SMALL $horizontal-spacing-sm: $spacing-unit * 2; $vertical-spacing-sm: $spacing-unit * 1; $base-padding-sm: $vertical-spacing-sm $horizontal-spacing-sm; $base-height-sm: $spacing-unit * 7; // COLOURS $grey-0: #212121; $grey-1: #363636; $grey-2: #4c4c4c; $grey-3: #636363; $grey-4: #757575; $grey-5: #9e9e9e; $grey-6: #aeaeae; $grey-7: #c8c8c8; $grey-8: #e3e3e3; $grey-9: #f0f0f0; $white: white; $black: $grey-0; $transparent: transparent; $blue-0: #00187c; $blue-1: #032e8c; $blue-2: #0849a3; $blue-3: #0951a8; $blue-4: #1169ba; $blue-5: #1479c6; $blue-6: #5194d2; $blue-7: #7aacdd; $blue-8: #b9d5ed; $blue-9: #e7f1f9; $red-0: #7c0000; $red-1: #8c0000; $red-2: #a30000; $red-3: #a80000; $red-4: #ba0000; $red-5: #dc0000; $red-6: #d25151; $red-7: #dd7a7a; $red-8: #edc1c1; $red-9: #f9e7e7; $black-1: #e6e6e6; $brand: $blue-0; $accent: $blue-5; $accent-selected: $blue-9; $error: $red-5; $severity-critical: #dc0000; $severity-warning: #f59500; $severity-success: #a2bb31; $severity-info: $accent; $ui-primary: $black; $ui-secondary: $grey-4; $ui-disabled: $grey-2; $ui-placeholder: $grey-5; $ui-background: $grey-9; $ui-sheet: $white; $ui-border: #d5d5d5; // BORDERS $ui-border-radius: 4px; $ui-border-width: 1px; // TYPOGRAPHY $font-size-default: 16px; $font-size-small: 14px; .material-symbols-rounded{font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24}.skeleton{animation:skeleton-loading 1s linear infinite alternate;border-radius:4px;width:100%}@keyframes skeleton-loading{0%{background-color:hsl(200, 20%, 80%)}100%{background-color:hsl(200, 20%, 95%)}}:host{display:block}table{box-sizing:border-box;width:100%;border-collapse:collapse;border-spacing:0;border:1px solid #ddd;border-bottom:none}thead tr{height:52px;color:#757575}tbody tr{height:48px;color:#212121}tr{font-family:'Roboto', sans-serif;font-weight:400;font-size:16px;display:flex;align-items:center;border-bottom:1px solid #ddd}.selected{background-color:#F0F0F0}.checked{background-color:#e7f1f9}td,th{min-width:300px;margin-left:16px;display:flex;align-items:left}.skeleton{height:24px;display:block}.align-right{margin-left:auto}";export{r as tttx_table}
1
+ import{r as e,c as t,h as i,H as s}from"./p-184c4fae.js";const r=class{constructor(i){e(this,i),this.rowSelected=t(this,"rowSelected",7),this.headerClicked=t(this,"headerClicked",7),this.headers=[],this.data=[],this.loading=!1,this.selected=-1}handleKeyDown(e){"ArrowDown"!==e.key&&"ArrowUp"!==e.key||(this.updateSelectedIndex(e.key),this.emitRowSelected())}updateSelectedIndex(e){if(-1===this.selected)this.selected=0;else{const t="ArrowUp"===e;"ArrowDown"===e&&this.selected<this.data.length-1?this.selected++:t&&this.selected>0&&this.selected--}}emitRowSelected(){this.rowSelected.emit(this.data[this.selected])}rowSelectedHandler(e){this.rowSelected.emit(e),this.selected=this.data.findIndex((t=>t===e))}headerClickedHandler(e){this.headerClicked.emit(e)}render(){return i(s,null,i("table",null,i("thead",null,i("tr",null,this.loading?[1,2,3].map((()=>i("th",null,i("div",{class:"skeleton"})))):this.headers&&this.headers.map((e=>i("th",{scope:"col",onClick:()=>this.headerClickedHandler(e.key)},e.label))))),i("tbody",null,this.loading?[1,2,3].map((()=>i("tr",null,i("td",null,i("div",{class:"skeleton"})),i("td",null,i("div",{class:"skeleton"})),i("td",null,i("div",{class:"skeleton"}))))):Object.keys(this.data).map(((e,t)=>i("tr",{class:t===this.selected?"selected":"",onClick:()=>this.rowSelectedHandler(this.data[e])},this.headers.map((t=>i("td",null,this.data[e][t.key]," ",t.actions&&i("tttx-icon",{class:"align-right",icon:"more_vert"},i("div",{slot:"popover"},i("tttx-popover-content",{header:"The humble egg",body:"Most arthropods such as insects, vertebrates (excluding live-bearing mammals), and mollusks lay eggs, although some, such as scorpions, do not.",linkcontext:"Wikipedia_egg",linktext:"Learn more about eggs"}))))))))))))}};r.style="// SPACING $spacing-unit: 4px; // REGULAR $horizontal-spacing: $spacing-unit * 4; $vertical-spacing: $spacing-unit * 2; $base-padding: $vertical-spacing $horizontal-spacing; $base-height: $spacing-unit * 9; $component-spacing: $spacing-unit * 4; // SMALL $horizontal-spacing-sm: $spacing-unit * 2; $vertical-spacing-sm: $spacing-unit * 1; $base-padding-sm: $vertical-spacing-sm $horizontal-spacing-sm; $base-height-sm: $spacing-unit * 7; // COLOURS $grey-0: #212121; $grey-1: #363636; $grey-2: #4c4c4c; $grey-3: #636363; $grey-4: #757575; $grey-5: #9e9e9e; $grey-6: #aeaeae; $grey-7: #c8c8c8; $grey-8: #e3e3e3; $grey-9: #f0f0f0; $white: white; $black: $grey-0; $transparent: transparent; $blue-0: #00187c; $blue-1: #032e8c; $blue-2: #0849a3; $blue-3: #0951a8; $blue-4: #1169ba; $blue-5: #1479c6; $blue-6: #5194d2; $blue-7: #7aacdd; $blue-8: #b9d5ed; $blue-9: #e7f1f9; $red-0: #7c0000; $red-1: #8c0000; $red-2: #a30000; $red-3: #a80000; $red-4: #ba0000; $red-5: #dc0000; $red-6: #d25151; $red-7: #dd7a7a; $red-8: #edc1c1; $red-9: #f9e7e7; $black-1: #e6e6e6; $brand: $blue-0; $accent: $blue-5; $accent-selected: $blue-9; $error: $red-5; $severity-critical: #dc0000; $severity-warning: #f59500; $severity-success: #a2bb31; $severity-info: $accent; $ui-primary: $black; $ui-secondary: $grey-4; $ui-disabled: $grey-2; $ui-placeholder: $grey-5; $ui-background: $grey-9; $ui-sheet: $white; $ui-border: #d5d5d5; // BORDERS $ui-border-radius: 4px; $ui-border-width: 1px; // TYPOGRAPHY $font-size-default: 16px; $font-size-small: 14px; .material-symbols-rounded{font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24}.skeleton{animation:skeleton-loading 1s linear infinite alternate;border-radius:4px;width:100%}@keyframes skeleton-loading{0%{background-color:hsl(200, 20%, 80%)}100%{background-color:hsl(200, 20%, 95%)}}:host{display:block}table{box-sizing:border-box;width:100%;border-collapse:collapse;border-spacing:0;border:1px solid #ddd;border-bottom:none}thead tr{height:52px;color:#757575}tbody tr{height:48px;color:#212121}tr{font-family:'Roboto', sans-serif;font-weight:400;font-size:16px;display:flex;align-items:center;border-bottom:1px solid #ddd}.selected{background-color:#F0F0F0}.checked{background-color:#e7f1f9}td,th{min-width:300px;margin-left:16px;display:flex;align-items:left}.skeleton{height:24px;display:block}.align-right{margin-left:auto}";export{r as tttx_table}
@@ -0,0 +1 @@
1
+ import{r as o,h as t,H as e}from"./p-184c4fae.js";const r=class{constructor(t){o(this,t),this.icon=void 0,this.color="grey"}render(){return t(e,null,t("span",{class:`material-symbols-rounded ${this.color?this.color:""}`},this.icon))}};r.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-rounded{font-family:"Material Symbols Rounded", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}:host{display:inline-block;cursor:default;user-select:none}.icon-size{width:24px;height:24px}.tooltip{background:#ffffff;color:#343434;font-weight:bold;padding:8px 16px;font-size:13px;border-radius:4px;box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.3);display:none}.tooltip[data-show]{display:block}.arrow,.arrow::before{position:absolute;width:8px;height:8px;background:inherit}.arrow{visibility:hidden}.arrow::before{visibility:visible;content:"";transform:rotate(45deg)}.tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}.tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}.tooltip[data-popper-placement^=left]>.arrow{right:-4px}.tooltip[data-popper-placement^=right]>.arrow{left:-4px}.red{color:#dc0000}.orange{color:#f59500}.blue{color:#1479c6}.green{color:#a2bb31}.gray{color:#757575}.black{color:#212121}.white{color:white}';export{r as tttx_icon}
@@ -0,0 +1 @@
1
+ import{r as t,h as o,H as i}from"./p-184c4fae.js";const l=class{constructor(o){t(this,o),this.keyvalues=void 0}render(){let t;t="string"==typeof this.keyvalues?JSON.parse(this.keyvalues):this.keyvalues;const l=Object.keys(t),s=[];for(let i=0;i<l.length;i++)s.push(o("dt",null,l[i])),s.push(o("dd",null,t[l[i]]));return o(i,null,o("dl",null,s))}};l.style=':host{display:block}dl{margin:0;padding:0;font-family:"Roboto", sans-serif;cursor:default}dt{font-weight:400;line-height:21px;font-size:16px;color:#757575}dd{margin:0;font-weight:400;font-size:16px;color:#212121;line-height:21px;margin-bottom:18px}';export{l as tttx_keyvalue_block}
@@ -0,0 +1 @@
1
+ import{r as o,h as t,H as r}from"./p-184c4fae.js";const i=class{constructor(t){o(this,t),this._iconcolor="black",this.notext=void 0,this.icon=void 0,this.iconposition="left",this.design="default"}componentWillLoad(){this._design=this.design,["primary","default","disabled","danger","borderless"].includes(this.design)||(this._design="default"),"primary"!==this._design&&"danger"!==this._design||(this._iconcolor="white")}render(){return t(r,null,t("button",{class:`button ${this._design} ${this.icon?"withicon":""} ${this.icon&&this.iconposition?"icon"+this.iconposition:""} ${this.notext?"notext":""}`},this.icon&&"left"===this.iconposition&&t("div",{class:"icon-left"},t("tttx-icon",{icon:this.icon,color:this._iconcolor})),!this.notext&&t("div",{class:"button-content"},t("slot",null)),this.icon&&"right"===this.iconposition&&t("div",{class:"icon-right"},t("tttx-icon",{icon:this.icon,color:this._iconcolor}))))}};i.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #D5D5D5}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #D5D5D5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:hover{background:#146EB3;border:1px solid #146EB3}.primary:active{background:#1464A2;border:1px solid #1464A2}.borderless{background:transparent;border:none;color:#212121}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.danger{background:#DC0000;border:1px solid #DC0000;color:white}.danger:hover{background:#C60000;border:1px solid #C60000}.danger:active{background:#B00000;border:1px solid #B00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}:host{display:inline-block}.spacingleft{margin-left:8px}';export{i as tttx_button}
@@ -1 +1 @@
1
- import{p as e,b as t}from"./p-184c4fae.js";export{s as setNonce}from"./p-184c4fae.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),e(a)})().then((e=>t([["p-5ce1ba22",[[1,"tttx-table",{headers:[8],data:[8],loading:[4],selected:[2]},[[4,"keydown","handleKeyDown"]]]]],["p-fe4c70b2",[[1,"tttx-list",{name:[1],selectable:[4],items:[32],selectedIds:[32],loading:[32],lastPage:[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["p-b1c22f5f",[[1,"tttx-standalone-input",{label:[1],showerrormsg:[4],errormsg:[1],iconleft:[1],iconright:[1],autocapitalize:[1],autocomplete:[1],autofocus:[4],checked:[4],disabled:[4],max:[8],maxlength:[8],min:[8],minlength:[8],name:[1],pattern:[1],placeholder:[1],readonly:[8],required:[4],step:[8],type:[1],value:[1032]}]]],["p-c7f9be65",[[1,"tttx-button",{fontColor:[1,"font-color"],buttonStyle:[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["p-01e1894e",[[1,"tttx-checkbox",{value:[4],label:[1],required:[4]}]]],["p-125f06b3",[[1,"tttx-form",{formschema:[8],submitValue:[8,"submit-value"]}]]],["p-6828fe6f",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-3973b7dd",[[1,"tttx-popover-content",{header:[1],body:[1],linkcontext:[1],linktext:[1]}]]],["p-10316ff1",[[1,"tttx-icon",{icon:[1],colour:[1]},[[4,"click","handleDocumentClick"]]]]]],e)));
1
+ import{p as e,b as t}from"./p-184c4fae.js";export{s as setNonce}from"./p-184c4fae.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),e(a)})().then((e=>t([["p-220f7519",[[1,"tttx-input-calendar",{months:[4],years:[4],showCalendar:[32],selectedYear:[32],selectedMonth:[32]}]]],["p-5247e827",[[1,"tttx-table",{headers:[16],data:[16],loading:[4],selected:[2]},[[4,"keydown","handleKeyDown"]]]]],["p-fe4c70b2",[[1,"tttx-list",{name:[1],selectable:[4],items:[32],selectedIds:[32],loading:[32],lastPage:[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["p-1cf8f9e8",[[1,"tttx-standalone-input",{label:[1],showerrormsg:[4],errormsg:[1],iconleft:[1],iconright:[1],autocapitalize:[1],autocomplete:[1],autofocus:[4],checked:[4],disabled:[4],max:[8],maxlength:[8],min:[8],minlength:[8],name:[1],pattern:[1],placeholder:[1],readonly:[8],required:[4],step:[8],type:[1],value:[1032]}]]],["p-01e1894e",[[1,"tttx-checkbox",{value:[4],label:[1],required:[4]}]]],["p-1bc3dfee",[[1,"tttx-form",{formschema:[8],submitValue:[8,"submit-value"]}]]],["p-cf107fb6",[[1,"tttx-keyvalue-block",{keyvalues:[8]}]]],["p-f56fe662",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],design:[1]}]]],["p-6828fe6f",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-3973b7dd",[[1,"tttx-popover-content",{header:[1],body:[1],linkcontext:[1],linktext:[1]}]]],["p-81904eed",[[1,"tttx-icon",{icon:[1],color:[1]}]]]],e)));
@@ -1,9 +1,10 @@
1
- import { EventEmitter } from '../../../stencil-public-runtime';
2
- export declare class TttxButton {
3
- fontColor: string;
4
- buttonStyle: string;
5
- clickEvent: EventEmitter<string>;
6
- onClick(): void;
7
- onClicked(event: Event): void;
8
- render(): any;
9
- }
1
+ export declare class TttxButton {
2
+ notext: boolean;
3
+ icon: string;
4
+ iconposition: 'left' | 'right';
5
+ design: string;
6
+ _design: string;
7
+ _iconcolor: string;
8
+ componentWillLoad(): void;
9
+ render(): any;
10
+ }
@@ -1,20 +1,10 @@
1
- declare const _default: {
2
- title: string;
3
- component: string;
4
- argTypes: {
5
- fontColor: {
6
- control: {
7
- type: string;
8
- options: string[];
9
- };
10
- };
11
- buttonStyle: {
12
- control: {
13
- type: string;
14
- options: string[];
15
- };
16
- };
17
- };
18
- };
19
- export default _default;
20
- export declare const Default: any;
1
+ declare const _default: {
2
+ title: string;
3
+ component: string;
4
+ };
5
+ export default _default;
6
+ export declare const Primary: any;
7
+ export declare const Default: any;
8
+ export declare const Borderless: any;
9
+ export declare const Danger: any;
10
+ export declare const Disabled: any;
@@ -1,14 +1,5 @@
1
- export declare class TttxIcon {
2
- icon: string;
3
- colour: string;
4
- el: HTMLElement;
5
- hasPopoverSlot: boolean;
6
- private referenceElement;
7
- private popperElement;
8
- private popperInstance;
9
- handleDocumentClick(event: MouseEvent): void;
10
- componentWillLoad(): void;
11
- componentDidLoad(): void;
12
- disconnectedCallback(): void;
13
- render(): any;
14
- }
1
+ export declare class TttxIcon {
2
+ icon: string;
3
+ color: string;
4
+ render(): any;
5
+ }