@3t-transform/threeteeui 0.1.24 → 0.1.26

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 (65) hide show
  1. package/dist/cjs/{index-dc6cc829.js → index-b8a62ede.js} +88 -2
  2. package/dist/cjs/loader.cjs.js +4 -3
  3. package/dist/cjs/tttx-button.cjs.entry.js +1 -1
  4. package/dist/cjs/tttx-filter.cjs.entry.js +2 -2
  5. package/dist/cjs/tttx-form.cjs.entry.js +2 -2
  6. package/dist/cjs/tttx-icon.cjs.entry.js +1 -1
  7. package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +1 -1
  8. package/dist/cjs/tttx-list.cjs.entry.js +1 -1
  9. package/dist/cjs/tttx-loading-spinner.cjs.entry.js +1 -1
  10. package/dist/cjs/tttx-sorter.cjs.entry.js +2 -2
  11. package/dist/cjs/tttx-standalone-input.cjs.entry.js +9 -8
  12. package/dist/cjs/tttx-toolbar.cjs.entry.js +2 -2
  13. package/dist/cjs/tttx.cjs.js +7 -3
  14. package/dist/collection/collection-manifest.json +2 -2
  15. package/dist/collection/components/molecules/tttx-filter/tttx-filter.css +1 -0
  16. package/dist/collection/components/molecules/tttx-form/tttx-form.css +20 -4
  17. package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.css +1 -0
  18. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.css +20 -4
  19. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +35 -17
  20. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +12 -5
  21. package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.css +6 -3
  22. package/dist/components/index.d.ts +9 -0
  23. package/dist/components/index.js +1 -1
  24. package/dist/components/tttx-filter.js +1 -1
  25. package/dist/components/tttx-form.js +1 -1
  26. package/dist/components/tttx-sorter.js +1 -1
  27. package/dist/components/tttx-standalone-input.js +14 -12
  28. package/dist/components/tttx-toolbar.js +1 -1
  29. package/dist/esm/{index-86faeaab.js → index-e888a5f4.js} +88 -3
  30. package/dist/esm/loader.js +4 -3
  31. package/dist/esm/polyfills/css-shim.js +1 -1
  32. package/dist/esm/tttx-button.entry.js +1 -1
  33. package/dist/esm/tttx-filter.entry.js +2 -2
  34. package/dist/esm/tttx-form.entry.js +2 -2
  35. package/dist/esm/tttx-icon.entry.js +1 -1
  36. package/dist/esm/tttx-keyvalue-block.entry.js +1 -1
  37. package/dist/esm/tttx-list.entry.js +1 -1
  38. package/dist/esm/tttx-loading-spinner.entry.js +1 -1
  39. package/dist/esm/tttx-sorter.entry.js +2 -2
  40. package/dist/esm/tttx-standalone-input.entry.js +9 -8
  41. package/dist/esm/tttx-toolbar.entry.js +2 -2
  42. package/dist/esm/tttx.js +4 -3
  43. package/dist/tttx/{p-8f3badad.entry.js → p-043f9b8a.entry.js} +1 -1
  44. package/dist/tttx/{p-f19194f8.entry.js → p-39485e15.entry.js} +1 -1
  45. package/dist/tttx/p-6dff6b5a.entry.js +3 -0
  46. package/dist/tttx/p-82bb3136.entry.js +1 -0
  47. package/dist/tttx/p-92bc0a38.entry.js +1 -0
  48. package/dist/tttx/{p-e25d5fe2.entry.js → p-96bbf1ed.entry.js} +1 -1
  49. package/dist/tttx/p-afd21f67.entry.js +1 -0
  50. package/dist/tttx/{p-f1d7eb35.entry.js → p-b3a03986.entry.js} +1 -1
  51. package/dist/tttx/{p-91515bd4.entry.js → p-ccd0065e.entry.js} +1 -1
  52. package/dist/tttx/{p-c72d1a03.entry.js → p-dc5c356b.entry.js} +1 -1
  53. package/dist/tttx/p-f764ffc4.js +2 -0
  54. package/dist/tttx/tttx.esm.js +1 -1
  55. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +16 -12
  56. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +6 -1
  57. package/dist/types/components.d.ts +22 -14
  58. package/dist/types/stencil-public-runtime.d.ts +59 -3
  59. package/loader/index.d.ts +9 -0
  60. package/package.json +1 -1
  61. package/dist/tttx/p-12fc0b16.entry.js +0 -3
  62. package/dist/tttx/p-52a47b7c.js +0 -2
  63. package/dist/tttx/p-72b4c98a.entry.js +0 -1
  64. package/dist/tttx/p-ae48fe5a.entry.js +0 -1
  65. package/dist/tttx/p-bdb054b2.entry.js +0 -1
package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.css CHANGED
@@ -2,6 +2,10 @@
2
2
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
3
3
  }
4
4
 
5
+ .material-symbols-rounded {
6
+ font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
7
+ }
8
+
5
9
  .material-symbols-rounded {
6
10
  font-family: "Material Symbols Rounded", sans-serif;
7
11
  font-weight: 400;
@@ -76,6 +80,7 @@
76
80
  background-color: transparent;
77
81
  height: 26px;
78
82
  font-size: 14px;
83
+ line-height: 16px;
79
84
  border-radius: none;
80
85
  z-index: 2;
81
86
  color: #dc0000;
@@ -85,6 +90,7 @@
85
90
  width: 16px;
86
91
  height: 16px;
87
92
  font-size: 16px;
93
+ line-height: 19px;
88
94
  margin-right: 4px;
89
95
  vertical-align: middle;
90
96
  color: #dc0000;
@@ -122,6 +128,8 @@ label.inputInline .input-container {
122
128
  label {
123
129
  font-weight: 500;
124
130
  font-size: 16px;
131
+ line-height: 19px;
132
+ margin-bottom: 16px;
125
133
  }
126
134
 
127
135
  input:not([type=submit]) {
@@ -131,6 +139,7 @@ input:not([type=submit]) {
131
139
  height: 36px;
132
140
  padding: 0 16px;
133
141
  font-size: 16px;
142
+ line-height: 19px;
134
143
  border: 1px solid #d5d5d5;
135
144
  border-radius: 4px;
136
145
  margin-top: 4px;
@@ -159,9 +168,9 @@ input.invalid:invalid, input.standalone.invalid {
159
168
  }
160
169
 
161
170
  input ~ .errorBubble {
162
- min-height: 27px;
163
171
  position: relative;
164
172
  font-size: 14px;
173
+ line-height: 16px;
165
174
  font-weight: normal;
166
175
  width: 100%;
167
176
  font-family: "Roboto", sans-serif;
@@ -170,17 +179,17 @@ input ~ .errorBubble {
170
179
  align-content: center;
171
180
  align-items: center;
172
181
  justify-items: center;
182
+ margin-top: 4px;
173
183
  }
174
184
 
175
185
  input ~ .errorBubble:not(.visible) {
176
- visibility: hidden;
186
+ display: none;
177
187
  }
178
188
 
179
189
  input ~ .errorBubble span {
180
190
  color: #dc0000;
181
191
  font-size: 16px;
182
192
  margin-right: 4px;
183
- height: 16px;
184
193
  }
185
194
 
186
195
  input.invalid:invalid ~ .errorBubble {
@@ -190,7 +199,6 @@ input.invalid:invalid ~ .errorBubble {
190
199
  width: 100%;
191
200
  font-family: "Roboto", sans-serif;
192
201
  color: #dc0000;
193
- visibility: visible;
194
202
  }
195
203
 
196
204
  input:focus {
@@ -201,6 +209,14 @@ input:focus-visible {
201
209
  outline: none;
202
210
  }
203
211
 
212
+ .secondarylabel {
213
+ color: #757575;
214
+ font-size: 14px;
215
+ line-height: 16px;
216
+ display: flex;
217
+ margin-top: 4px;
218
+ }
219
+
204
220
  :host {
205
221
  display: block;
206
222
  }
package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js CHANGED
@@ -3,6 +3,7 @@ import { Host, h } from '@stencil/core';
3
3
  export class TttxInput {
4
4
  constructor() {
5
5
  this.label = undefined;
6
+ this.secondarylabel = undefined;
6
7
  this.showerrormsg = undefined;
7
8
  this.showerrorbubble = true;
8
9
  this.errormsg = undefined;
@@ -10,11 +11,11 @@ export class TttxInput {
10
11
  this.iconright = undefined;
11
12
  this.inputicon = undefined;
12
13
  this.inline = undefined;
13
- this.inputAutocapitalize = undefined;
14
- this.inputAutofocus = undefined;
15
- this.inputKeyhint = undefined;
16
- this.inputIndex = undefined;
17
- this.inputTitle = undefined;
14
+ this.inputautocapitalize = undefined;
15
+ this.inputautofocus = undefined;
16
+ this.inputkeyhint = undefined;
17
+ this.inputindex = undefined;
18
+ this.inputtitle = undefined;
18
19
  this.autocomplete = undefined;
19
20
  this.checked = undefined;
20
21
  this.disabled = undefined;
@@ -51,7 +52,7 @@ export class TttxInput {
51
52
  }
52
53
  render() {
53
54
  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)") : '', h("div", { class: "input-container" }, this.inputicon && (h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: "grey" })), this.iconleft && (h("tttx-icon", { id: "icon-left", icon: this.iconleft, color: "grey" })), this.iconright && (h("tttx-icon", { id: "icon-right", icon: this.iconright, 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.showerrorbubble && (h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))))));
55
+ return (h(Host, null, h("label", { class: this.inline ? 'inputInline' : 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', h("div", { class: "input-container" }, this.inputicon && h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: "grey" }), this.iconleft && h("tttx-icon", { id: "icon-left", icon: this.iconleft, color: "grey" }), this.iconright && h("tttx-icon", { id: "icon-right", icon: this.iconright, 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.secondarylabel && h("span", { class: "secondarylabel" }, this.secondarylabel), this.showerrorbubble && (h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))))));
55
56
  }
56
57
  static get is() { return "tttx-standalone-input"; }
57
58
  static get encapsulation() { return "scoped"; }
@@ -84,6 +85,23 @@ export class TttxInput {
84
85
  "attribute": "label",
85
86
  "reflect": false
86
87
  },
88
+ "secondarylabel": {
89
+ "type": "string",
90
+ "mutable": false,
91
+ "complexType": {
92
+ "original": "string",
93
+ "resolved": "string",
94
+ "references": {}
95
+ },
96
+ "required": false,
97
+ "optional": false,
98
+ "docs": {
99
+ "tags": [],
100
+ "text": "Footnote under the input field"
101
+ },
102
+ "attribute": "secondarylabel",
103
+ "reflect": false
104
+ },
87
105
  "showerrormsg": {
88
106
  "type": "boolean",
89
107
  "mutable": false,
@@ -204,7 +222,7 @@ export class TttxInput {
204
222
  "attribute": "inline",
205
223
  "reflect": false
206
224
  },
207
- "inputAutocapitalize": {
225
+ "inputautocapitalize": {
208
226
  "type": "string",
209
227
  "mutable": false,
210
228
  "complexType": {
@@ -218,10 +236,10 @@ export class TttxInput {
218
236
  "tags": [],
219
237
  "text": ""
220
238
  },
221
- "attribute": "input-autocapitalize",
239
+ "attribute": "inputautocapitalize",
222
240
  "reflect": false
223
241
  },
224
- "inputAutofocus": {
242
+ "inputautofocus": {
225
243
  "type": "boolean",
226
244
  "mutable": false,
227
245
  "complexType": {
@@ -235,10 +253,10 @@ export class TttxInput {
235
253
  "tags": [],
236
254
  "text": ""
237
255
  },
238
- "attribute": "input-autofocus",
256
+ "attribute": "inputautofocus",
239
257
  "reflect": false
240
258
  },
241
- "inputKeyhint": {
259
+ "inputkeyhint": {
242
260
  "type": "string",
243
261
  "mutable": false,
244
262
  "complexType": {
@@ -252,10 +270,10 @@ export class TttxInput {
252
270
  "tags": [],
253
271
  "text": "Defines what action to present for the enter key on virtual keyboards"
254
272
  },
255
- "attribute": "input-keyhint",
273
+ "attribute": "inputkeyhint",
256
274
  "reflect": false
257
275
  },
258
- "inputIndex": {
276
+ "inputindex": {
259
277
  "type": "any",
260
278
  "mutable": false,
261
279
  "complexType": {
@@ -271,14 +289,14 @@ export class TttxInput {
271
289
  "text": "<caption>In HTML (like `index.html`)</caption>\n<tttx-standalone-input input-index=\"1\" />"
272
290
  }, {
273
291
  "name": "example",
274
- "text": "<caption>In TSX files</caption>\n<tttx-standalone-input inputIndex={1} />"
292
+ "text": "<caption>In TSX files</caption>\n<tttx-standalone-input inputindex={1} />"
275
293
  }],
276
294
  "text": "tabindex - Allows the HTML elements to be focusable"
277
295
  },
278
- "attribute": "input-index",
296
+ "attribute": "inputindex",
279
297
  "reflect": false
280
298
  },
281
- "inputTitle": {
299
+ "inputtitle": {
282
300
  "type": "string",
283
301
  "mutable": false,
284
302
  "complexType": {
@@ -292,7 +310,7 @@ export class TttxInput {
292
310
  "tags": [],
293
311
  "text": ""
294
312
  },
295
- "attribute": "input-title",
313
+ "attribute": "inputtitle",
296
314
  "reflect": false
297
315
  },
298
316
  "autocomplete": {
package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js CHANGED
@@ -11,13 +11,16 @@ export default {
11
11
  options: icons,
12
12
  control: { type: 'select' },
13
13
  },
14
- inputIcon: {
14
+ inputicon: {
15
15
  options: icons,
16
16
  control: { type: 'select' },
17
17
  },
18
18
  label: {
19
19
  control: { type: 'text' },
20
20
  },
21
+ secondarylabel: {
22
+ control: { type: 'text' },
23
+ },
21
24
  errormsg: {
22
25
  control: { type: 'text' },
23
26
  },
@@ -75,12 +78,13 @@ export default {
75
78
  },
76
79
  },
77
80
  };
78
- const TemplateTextInput = ({ iconleft, iconright, inputIcon, label, errormsg, showerrorbubble, showerrormsg, inline, checked, disabled, max, maxlength, min, minlength, name, pattern, placeholder, readonly, required, step, type, value, }) => `
81
+ const TemplateTextInput = ({ iconleft, iconright, inputicon, label, secondarylabel, errormsg, showerrorbubble, showerrormsg, inline, checked, disabled, max, maxlength, min, minlength, name, pattern, placeholder, readonly, required, step, type, value, }) => `
79
82
  <tttx-standalone-input
80
83
  iconleft="${iconleft || ''}"
81
84
  iconright="${iconright || ''}"
82
- inputicon="${inputIcon || ''}"
85
+ inputicon="${inputicon || ''}"
83
86
  label="${label}"
87
+ ${secondarylabel ? `secondarylabel="${secondarylabel}"` : ''}
84
88
  errormsg="${errormsg}"
85
89
  showerrorbubble="${showerrorbubble === false ? 'false' : 'true'}"
86
90
  ${showerrormsg ? 'showerrormsg' : ''}
@@ -105,6 +109,8 @@ export const InputField = TemplateTextInput.bind({});
105
109
  InputField.args = {
106
110
  value: '',
107
111
  label: 'First name',
112
+ secondarylabel: 'First name can be up to 100 characters long',
113
+ maxlength: '100',
108
114
  type: 'text',
109
115
  errormsg: 'Please enter your first name',
110
116
  required: false,
@@ -121,8 +127,9 @@ searchField.args = {
121
127
  showerrormsg: false,
122
128
  showerrorbubble: false,
123
129
  placeholder: 'Search',
124
- inline: true,
125
- inputIcon: 'search'
130
+ inline: false,
131
+ inputicon: 'search',
132
+ iconright: 'cancel'
126
133
  };
127
134
  // export const TextInputIconLeft = TemplateTextInput.bind({});
128
135
  // TextInputIconLeft.args = {
package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.css CHANGED
@@ -9,22 +9,25 @@
9
9
  border-bottom: 1px solid #d5d5d5;
10
10
  }
11
11
 
12
- slot[name=before] {
12
+ ::slotted([slot=before]) {
13
13
  display: flex;
14
+ align-items: center;
14
15
  flex: 1 1 0px;
15
16
  gap: 8px;
16
17
  }
17
18
 
18
- slot[name=center] {
19
+ ::slotted([slot=center]) {
19
20
  display: flex;
20
21
  justify-content: center;
22
+ align-items: center;
21
23
  flex: 1 1 0px;
22
24
  gap: 8px;
23
25
  }
24
26
 
25
- slot[name=after] {
27
+ ::slotted([slot=after]) {
26
28
  display: flex;
27
29
  justify-content: end;
30
+ align-items: center;
28
31
  flex: 1 1 0px;
29
32
  gap: 8px;
30
33
  }
package/dist/components/index.d.ts CHANGED
@@ -22,6 +22,15 @@ export { TttxToolbar as TttxToolbar } from '../types/components/molecules/tttx-t
22
22
  */
23
23
  export declare const setAssetPath: (path: string) => void;
24
24
 
25
+ /**
26
+ * Used to specify a nonce value that corresponds with an application's CSP.
27
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
28
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
29
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
30
+ * will result in the same behavior.
31
+ */
32
+ export declare const setNonce: (nonce: string) => void
33
+
25
34
  export interface SetPlatformOptions {
26
35
  raf?: (c: FrameRequestCallback) => number;
27
36
  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
package/dist/components/index.js CHANGED
@@ -1,4 +1,4 @@
1
- export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
1
+ export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
2
2
  export { TttxButton, defineCustomElement as defineCustomElementTttxButton } from './tttx-button.js';
3
3
  export { TttxFilter, defineCustomElement as defineCustomElementTttxFilter } from './tttx-filter.js';
4
4
  export { TttxForm, defineCustomElement as defineCustomElementTttxForm } from './tttx-form.js';
package/dist/components/tttx-filter.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
2
2
  import { d as defineCustomElement$2 } from './tttx-icon2.js';
3
3
 
4
- const tttxFilterCss = ".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}.filter-container{position:relative}.filter-container .filter-button{display:inline-flex;justify-content:center;align-items:center;font-size:14px;font-weight:400;font-family:\"Roboto\", serif;text-transform:uppercase;color:#212121;border:1px solid #d5d5d5;border-radius:4px;background:transparent;height:36px;width:95px;margin:0;padding-right:16px}.filter-container .filter-button .filter-icon{padding-left:8px;padding-right:4px}.filter-container .filter-button.--list-icon{font-size:0;width:36px;height:36px;padding:0}.filter-container .filter-button.--list-icon .filter-icon{padding:0}.filter-container .filter-button.--list-icon:hover{background:#e3e3e3}.filter-container .filter-button.--table-icon{font-size:0;width:36px;height:36px;padding:0;border:none}.filter-container .filter-button.--table-icon .filter-icon{padding:0;width:24px;height:24px}.filter-container .filter-button.--table-icon:hover{background:#e3e3e3;border-radius:50%;width:36px;height:36px}.filter-container .filter-button:hover{background:#e3e3e3}.filter-container .filter-popover-container{display:flex;flex-direction:column;gap:8px;border-radius:4px;box-shadow:0px 1px 5px #1111114D;position:absolute;top:36px;left:0px;background-color:white;padding:0 16px}.filter-container .filter-popover-container .filter-header{color:#757575;text-transform:uppercase;font-size:14px;font-weight:500;font-family:\"Roboto\", serif;padding:12px 0}.filter-container .filter-popover-container .filter-options-container{display:flex;flex-direction:column;gap:4px;border-top:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5}.filter-container .filter-popover-container .filter-option{display:flex;flex-direction:row;align-items:center;min-height:36px;padding-left:8px}.filter-container .filter-popover-container .filter-option .select-all-icon{padding-right:6px}.filter-container .filter-popover-container .filter-option .checkbox-icon{padding-right:8px}.filter-container .filter-popover-container .filter-option .filter-label{padding-left:8px;padding-bottom:3px;font-size:16px;font-weight:500;font-family:\"Roboto\", serif}.filter-container .filter-popover-container .filter-option:first-child{padding-top:8px}.filter-container .filter-popover-container .filter-popover-button-container{display:flex;justify-content:flex-end;align-items:center;padding-bottom:8px}.filter-container .filter-popover-container .filter-popover-button-container .close-button{height:36px;width:74px;background-color:white;border:1px solid #d5d5d5;border-radius:4px;text-transform:uppercase;margin-right:8px;font-size:14px;font-weight:400;font-family:\"Roboto\", serif}.filter-container .filter-popover-container .filter-popover-button-container .apply-button{height:36px;width:73px;background-color:#1479c6;color:white;border-radius:4px;border:none;text-transform:uppercase;font-size:14px;font-weight:400;font-family:\"Roboto\", serif}.filter-container .filter-popover-container.--with-search-field .filter-header{border-bottom:1px solid #d5d5d5}.filter-container .filter-popover-container.--with-search-field .search-field-container{position:relative;color:#d5d5d5;height:36px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-icon{position:absolute;top:6px;left:8px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input{padding-left:36px;border:1px solid #d5d5d5;border-radius:4px;height:36px;font-size:16px;font-family:\"Roboto\", serif;font-weight:500;box-sizing:border-box}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus-visible,.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus{outline:none;border:1px solid #1479c6}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input::placeholder{color:#9e9e9e;font-size:16px;font-family:\"Roboto\", serif;font-weight:500}";
4
+ const tttxFilterCss = ".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}.filter-container{background-color:white;position:relative}.filter-container .filter-button{display:inline-flex;justify-content:center;align-items:center;font-size:14px;font-weight:400;font-family:\"Roboto\", serif;text-transform:uppercase;color:#212121;border:1px solid #d5d5d5;border-radius:4px;background:transparent;height:36px;width:95px;margin:0;padding-right:16px}.filter-container .filter-button .filter-icon{padding-left:8px;padding-right:4px}.filter-container .filter-button.--list-icon{font-size:0;width:36px;height:36px;padding:0}.filter-container .filter-button.--list-icon .filter-icon{padding:0}.filter-container .filter-button.--list-icon:hover{background:#e3e3e3}.filter-container .filter-button.--table-icon{font-size:0;width:36px;height:36px;padding:0;border:none}.filter-container .filter-button.--table-icon .filter-icon{padding:0;width:24px;height:24px}.filter-container .filter-button.--table-icon:hover{background:#e3e3e3;border-radius:50%;width:36px;height:36px}.filter-container .filter-button:hover{background:#e3e3e3}.filter-container .filter-popover-container{display:flex;flex-direction:column;gap:8px;border-radius:4px;box-shadow:0px 1px 5px #1111114D;position:absolute;top:36px;left:0px;background-color:white;padding:0 16px}.filter-container .filter-popover-container .filter-header{color:#757575;text-transform:uppercase;font-size:14px;font-weight:500;font-family:\"Roboto\", serif;padding:12px 0}.filter-container .filter-popover-container .filter-options-container{display:flex;flex-direction:column;gap:4px;border-top:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5}.filter-container .filter-popover-container .filter-option{display:flex;flex-direction:row;align-items:center;min-height:36px;padding-left:8px}.filter-container .filter-popover-container .filter-option .select-all-icon{padding-right:6px}.filter-container .filter-popover-container .filter-option .checkbox-icon{padding-right:8px}.filter-container .filter-popover-container .filter-option .filter-label{padding-left:8px;padding-bottom:3px;font-size:16px;font-weight:500;font-family:\"Roboto\", serif}.filter-container .filter-popover-container .filter-option:first-child{padding-top:8px}.filter-container .filter-popover-container .filter-popover-button-container{display:flex;justify-content:flex-end;align-items:center;padding-bottom:8px}.filter-container .filter-popover-container .filter-popover-button-container .close-button{height:36px;width:74px;background-color:white;border:1px solid #d5d5d5;border-radius:4px;text-transform:uppercase;margin-right:8px;font-size:14px;font-weight:400;font-family:\"Roboto\", serif}.filter-container .filter-popover-container .filter-popover-button-container .apply-button{height:36px;width:73px;background-color:#1479c6;color:white;border-radius:4px;border:none;text-transform:uppercase;font-size:14px;font-weight:400;font-family:\"Roboto\", serif}.filter-container .filter-popover-container.--with-search-field .filter-header{border-bottom:1px solid #d5d5d5}.filter-container .filter-popover-container.--with-search-field .search-field-container{position:relative;color:#d5d5d5;height:36px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-icon{position:absolute;top:6px;left:8px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input{padding-left:36px;border:1px solid #d5d5d5;border-radius:4px;height:36px;font-size:16px;font-family:\"Roboto\", serif;font-weight:500;box-sizing:border-box}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus-visible,.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus{outline:none;border:1px solid #1479c6}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input::placeholder{color:#9e9e9e;font-size:16px;font-family:\"Roboto\", serif;font-weight:500}";
5
5
 
6
6
  const TttxFilter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
7
  constructor() {
package/dist/components/tttx-form.js CHANGED
@@ -93,7 +93,7 @@ function setErrorState(target, hasError, errorMessage) {
93
93
  }
94
94
  }
95
95
 
96
- const tttxFormCss = ".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}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.input-icon{position:absolute;margin-top:9px;margin-left:4px}.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.inputInline{display:flex;white-space:nowrap;align-items:center}label.inputInline .input-container{margin:0 4px;width:100%;display:flex;align-items:center;gap:4px;position:relative}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}@media (max-width: 600px){input[type=date]{padding-top:6px}}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}.input-icon~input{padding:0 32px}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}input:focus-visible{outline:none}.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}";
96
+ const tttxFormCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.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}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.input-icon{position:absolute;margin-top:9px;margin-left:4px}.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;line-height:16px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;line-height:19px;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.inputInline{display:flex;white-space:nowrap;align-items:center}label.inputInline .input-container{margin:0 4px;width:100%;display:flex;align-items:center;gap:4px;position:relative}label{font-weight:500;font-size:16px;line-height:19px;margin-bottom:16px}input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;line-height:19px;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}@media (max-width: 600px){input[type=date]{padding-top:6px}}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}.input-icon~input{padding:0 32px}input~.errorBubble{position:relative;font-size:14px;line-height:16px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}input~.errorBubble:not(.visible){display:none}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000}input:focus{border-color:#1479c6}input:focus-visible{outline:none}.secondarylabel{color:#757575;font-size:14px;line-height:16px;display:flex;margin-top:4px}.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}";
97
97
 
98
98
  const TttxForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
99
99
  constructor() {
package/dist/components/tttx-sorter.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
2
2
  import { d as defineCustomElement$2 } from './tttx-icon2.js';
3
3
 
4
- const tttxSorterCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sorter-container{display:flex;flex-direction:row;position:relative;border:1px solid #d5d5d5;border-radius:4px;font-weight:400}@media (max-width: 475px){.sorter-container{width:68px}}.sorter-container .arrow-toggle-button{display:inline-flex;justify-content:center;align-items:center;flex-direction:column;background-color:white;border:none;border-bottom-left-radius:4px;border-top-left-radius:4px}.sorter-container .arrow-toggle-button .hydrated{display:flex;justify-content:center;align-items:center}.sorter-container .arrow-toggle-button span{display:block;margin:auto;line-height:16px}.sorter-container .arrow-toggle-button .material-symbols-rounded{color:#212121}.sorter-container .dropdown-selector{display:inline-flex;position:relative;flex-grow:1}.sorter-container .dropdown-selector .dropdown-selector-button{display:inline-flex;flex-direction:row;gap:4px;padding-right:4px;align-items:center;color:#212121;box-sizing:border-box;width:100%}@media (max-width: 475px){.sorter-container .dropdown-selector .dropdown-selector-button .dropdown-selector-text{display:none}}.sorter-container .dropdown-selector .dropdown-selector-chevron{display:inline-flex;margin-left:auto;right:0;top:0;flex-direction:row;align-items:center;height:36px}.sorter-container .dropdown-selector .dropdown-selector-chevron .hydrated{height:24px}.sorter-container .dropdown-options-list{position:absolute;top:36px;left:0;z-index:1;width:100%;line-height:21px;font-size:16px;border-radius:4px;padding-top:8px;padding-bottom:7px;box-shadow:0px 1px 5px #1111114D;box-sizing:border-box}@media (max-width: 475px){.sorter-container .dropdown-options-list{width:220px;padding-top:8px}}.sorter-container .dropdown-options-list .dropdown-option{padding:8px 16px;font-size:16px;line-height:21px}.sorter-container .dropdown-options-list .dropdown-option:hover,.sorter-container .dropdown-options-list .dropdown-option:focus{background-color:#e7f1f9}.sorter-container.--expanded{border-color:#1579c6}@media (max-width: 475px){.sorter-container.--expanded{border:none}}";
4
+ const tttxSorterCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sorter-container{display:flex;flex-direction:row;position:relative;border:1px solid #d5d5d5;border-radius:4px;font-weight:400}@media (max-width: 475px){.sorter-container{width:68px}}.sorter-container .arrow-toggle-button{display:inline-flex;justify-content:center;align-items:center;flex-direction:column;background-color:white;border:none;border-bottom-left-radius:4px;border-top-left-radius:4px}.sorter-container .arrow-toggle-button .hydrated{display:flex;justify-content:center;align-items:center}.sorter-container .arrow-toggle-button span{display:block;margin:auto;line-height:16px}.sorter-container .arrow-toggle-button .material-symbols-rounded{color:#212121}.sorter-container .dropdown-selector{display:inline-flex;position:relative;flex-grow:1}.sorter-container .dropdown-selector .dropdown-selector-button{display:inline-flex;flex-direction:row;gap:4px;padding-right:4px;align-items:center;color:#212121;box-sizing:border-box;width:100%}@media (max-width: 475px){.sorter-container .dropdown-selector .dropdown-selector-button .dropdown-selector-text{display:none}}.sorter-container .dropdown-selector .dropdown-selector-chevron{display:inline-flex;margin-left:auto;right:0;top:0;flex-direction:row;align-items:center;height:36px}.sorter-container .dropdown-selector .dropdown-selector-chevron .hydrated{height:24px}.sorter-container .dropdown-options-list{position:absolute;top:36px;left:0;z-index:1;width:100%;line-height:21px;font-size:16px;border-radius:4px;padding-top:8px;padding-bottom:7px;box-shadow:0px 1px 5px #1111114D;box-sizing:border-box;background-color:white}@media (max-width: 475px){.sorter-container .dropdown-options-list{width:220px;padding-top:8px}}.sorter-container .dropdown-options-list .dropdown-option{padding:8px 16px;font-size:16px;line-height:21px}.sorter-container .dropdown-options-list .dropdown-option:hover,.sorter-container .dropdown-options-list .dropdown-option:focus{background-color:#e7f1f9}.sorter-container.--expanded{border-color:#1579c6}@media (max-width: 475px){.sorter-container.--expanded{border:none}}";
5
5
 
6
6
  const TttxSorter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
7
  constructor() {
package/dist/components/tttx-standalone-input.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
2
2
  import { d as defineCustomElement$2 } from './tttx-icon2.js';
3
3
 
4
- const tttxStandaloneInputCss = ".material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input{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.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input{flex-basis:24px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-left:4px}.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-right:4px}.icon-right.sc-tttx-standalone-input{margin-top:5px}.icon-left.sc-tttx-standalone-input{margin-top:5px;margin-left:4px}.iconleft.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-left:4px}.iconright.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-right:4px}.input-icon.sc-tttx-standalone-input{position:absolute;margin-top:9px;margin-left:4px}.errormsg.sc-tttx-standalone-input{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.sc-tttx-standalone-input .validationicon.sc-tttx-standalone-input{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger.sc-tttx-standalone-input{color:#dc0000}.optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.inputBlock.sc-tttx-standalone-input{display:block;position:relative;line-height:21px}label.inputInline.sc-tttx-standalone-input{display:flex;white-space:nowrap;align-items:center}label.inputInline.sc-tttx-standalone-input .input-container.sc-tttx-standalone-input{margin:0 4px;width:100%;display:flex;align-items:center;gap:4px;position:relative}label.sc-tttx-standalone-input{font-weight:500;font-size:16px}input.sc-tttx-standalone-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].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}@media (max-width: 600px){input[type=date].sc-tttx-standalone-input{padding-top:6px}}input.invalid.sc-tttx-standalone-input:invalid,input.standalone.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}.input-icon.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding:0 32px}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input{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.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input:not(.visible){visibility:hidden}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid.sc-tttx-standalone-input:invalid~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input.sc-tttx-standalone-input:focus{border-color:#1479c6}input.sc-tttx-standalone-input:focus-visible{outline:none}.sc-tttx-standalone-input-h{display:block}.input-container.sc-tttx-standalone-input{position:relative}#icon-left.sc-tttx-standalone-input{position:absolute;left:8px;top:10px}#icon-left.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding-left:36px}#icon-right.sc-tttx-standalone-input{position:absolute;right:8px;top:10px}#icon-right.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding-right:36px}";
4
+ const tttxStandaloneInputCss = ".material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input{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.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input{flex-basis:24px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-left:4px}.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-right:4px}.icon-right.sc-tttx-standalone-input{margin-top:5px}.icon-left.sc-tttx-standalone-input{margin-top:5px;margin-left:4px}.iconleft.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-left:4px}.iconright.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-right:4px}.input-icon.sc-tttx-standalone-input{position:absolute;margin-top:9px;margin-left:4px}.errormsg.sc-tttx-standalone-input{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;line-height:16px;border-radius:none;z-index:2;color:#dc0000}.errormsg.sc-tttx-standalone-input .validationicon.sc-tttx-standalone-input{width:16px;height:16px;font-size:16px;line-height:19px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger.sc-tttx-standalone-input{color:#dc0000}.optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.inputBlock.sc-tttx-standalone-input{display:block;position:relative;line-height:21px}label.inputInline.sc-tttx-standalone-input{display:flex;white-space:nowrap;align-items:center}label.inputInline.sc-tttx-standalone-input .input-container.sc-tttx-standalone-input{margin:0 4px;width:100%;display:flex;align-items:center;gap:4px;position:relative}label.sc-tttx-standalone-input{font-weight:500;font-size:16px;line-height:19px;margin-bottom:16px}input.sc-tttx-standalone-input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;line-height:19px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}@media (max-width: 600px){input[type=date].sc-tttx-standalone-input{padding-top:6px}}input.invalid.sc-tttx-standalone-input:invalid,input.standalone.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}.input-icon.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding:0 32px}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;line-height:16px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input:not(.visible){display:none}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px}input.invalid.sc-tttx-standalone-input:invalid~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000}input.sc-tttx-standalone-input:focus{border-color:#1479c6}input.sc-tttx-standalone-input:focus-visible{outline:none}.secondarylabel.sc-tttx-standalone-input{color:#757575;font-size:14px;line-height:16px;display:flex;margin-top:4px}.sc-tttx-standalone-input-h{display:block}.input-container.sc-tttx-standalone-input{position:relative}#icon-left.sc-tttx-standalone-input{position:absolute;left:8px;top:10px}#icon-left.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding-left:36px}#icon-right.sc-tttx-standalone-input{position:absolute;right:8px;top:10px}#icon-right.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding-right:36px}";
5
5
 
6
6
  const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
7
  constructor() {
@@ -12,6 +12,7 @@ const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
12
12
  this.blurChanged = createEvent(this, "blurChanged", 7);
13
13
  this.invalidChanged = createEvent(this, "invalidChanged", 7);
14
14
  this.label = undefined;
15
+ this.secondarylabel = undefined;
15
16
  this.showerrormsg = undefined;
16
17
  this.showerrorbubble = true;
17
18
  this.errormsg = undefined;
@@ -19,11 +20,11 @@ const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
19
20
  this.iconright = undefined;
20
21
  this.inputicon = undefined;
21
22
  this.inline = undefined;
22
- this.inputAutocapitalize = undefined;
23
- this.inputAutofocus = undefined;
24
- this.inputKeyhint = undefined;
25
- this.inputIndex = undefined;
26
- this.inputTitle = undefined;
23
+ this.inputautocapitalize = undefined;
24
+ this.inputautofocus = undefined;
25
+ this.inputkeyhint = undefined;
26
+ this.inputindex = undefined;
27
+ this.inputtitle = undefined;
27
28
  this.autocomplete = undefined;
28
29
  this.checked = undefined;
29
30
  this.disabled = undefined;
@@ -60,11 +61,12 @@ const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
60
61
  }
61
62
  render() {
62
63
  const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
63
- return (h(Host, null, h("label", { class: this.inline ? 'inputInline' : 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', h("div", { class: "input-container" }, this.inputicon && (h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: "grey" })), this.iconleft && (h("tttx-icon", { id: "icon-left", icon: this.iconleft, color: "grey" })), this.iconright && (h("tttx-icon", { id: "icon-right", icon: this.iconright, 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.showerrorbubble && (h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))))));
64
+ return (h(Host, null, h("label", { class: this.inline ? 'inputInline' : 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', h("div", { class: "input-container" }, this.inputicon && h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: "grey" }), this.iconleft && h("tttx-icon", { id: "icon-left", icon: this.iconleft, color: "grey" }), this.iconright && h("tttx-icon", { id: "icon-right", icon: this.iconright, 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.secondarylabel && h("span", { class: "secondarylabel" }, this.secondarylabel), this.showerrorbubble && (h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))))));
64
65
  }
65
66
  static get style() { return tttxStandaloneInputCss; }
66
67
  }, [2, "tttx-standalone-input", {
67
68
  "label": [1],
69
+ "secondarylabel": [1],
68
70
  "showerrormsg": [4],
69
71
  "showerrorbubble": [4],
70
72
  "errormsg": [1],
@@ -72,11 +74,11 @@ const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
72
74
  "iconright": [1],
73
75
  "inputicon": [1],
74
76
  "inline": [4],
75
- "inputAutocapitalize": [1, "input-autocapitalize"],
76
- "inputAutofocus": [4, "input-autofocus"],
77
- "inputKeyhint": [1, "input-keyhint"],
78
- "inputIndex": [8, "input-index"],
79
- "inputTitle": [1, "input-title"],
77
+ "inputautocapitalize": [1],
78
+ "inputautofocus": [4],
79
+ "inputkeyhint": [1],
80
+ "inputindex": [8],
81
+ "inputtitle": [1],
80
82
  "autocomplete": [1],
81
83
  "checked": [4],
82
84
  "disabled": [4],
package/dist/components/tttx-toolbar.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
2
 
3
- const tttxToolbarCss = ":host{height:36px;display:flex;padding:8px 0;gap:8px}:host(.bordered){border-bottom:1px solid #d5d5d5}slot[name=before]{display:flex;flex:1 1 0px;gap:8px}slot[name=center]{display:flex;justify-content:center;flex:1 1 0px;gap:8px}slot[name=after]{display:flex;justify-content:end;flex:1 1 0px;gap:8px}";
3
+ const tttxToolbarCss = ":host{height:36px;display:flex;padding:8px 0;gap:8px}:host(.bordered){border-bottom:1px solid #d5d5d5}::slotted([slot=before]){display:flex;align-items:center;flex:1 1 0px;gap:8px}::slotted([slot=center]){display:flex;justify-content:center;align-items:center;flex:1 1 0px;gap:8px}::slotted([slot=after]){display:flex;justify-content:end;align-items:center;flex:1 1 0px;gap:8px}";
4
4
 
5
5
  const TttxToolbar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
6
  constructor() {