@3t-transform/threeteeui 0.0.24 → 0.1.0

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 (103) hide show
  1. package/dist/cjs/{index-bc080fb4.js → index-451f61dd.js} +51 -60
  2. package/dist/cjs/loader.cjs.js +2 -2
  3. package/dist/cjs/tttx-button.cjs.entry.js +1 -1
  4. package/dist/cjs/tttx-form.cjs.entry.js +377 -0
  5. package/dist/cjs/tttx-icon.cjs.entry.js +2 -2
  6. package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +8 -5
  7. package/dist/cjs/tttx-list.cjs.entry.js +1677 -7
  8. package/dist/cjs/tttx-loading-spinner.cjs.entry.js +1 -1
  9. package/dist/cjs/tttx-standalone-input.cjs.entry.js +7 -3
  10. package/dist/cjs/tttx.cjs.js +2 -2
  11. package/dist/collection/collection-manifest.json +2 -2
  12. package/dist/collection/components/atoms/tttx-icon/tttx-icon.css +4 -0
  13. package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +1 -1
  14. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +7 -4
  15. package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js +35 -0
  16. package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js +58 -0
  17. package/dist/collection/components/molecules/tttx-form/tttx-form.css +336 -0
  18. package/dist/collection/components/molecules/tttx-form/tttx-form.js +364 -0
  19. package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +127 -0
  20. package/dist/collection/components/molecules/tttx-list/tttx-list.css +8 -2
  21. package/dist/collection/components/molecules/tttx-list/tttx-list.js +33 -7
  22. package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +46 -14
  23. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.css +25 -3
  24. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +57 -1
  25. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +14 -1
  26. package/dist/collection/shared/domsanitiser.options.js +14 -0
  27. package/dist/components/index.d.ts +1 -1
  28. package/dist/components/index.js +1 -1
  29. package/dist/components/{tttx-table.d.ts → tttx-form.d.ts} +4 -4
  30. package/dist/components/tttx-form.js +394 -0
  31. package/dist/components/tttx-icon2.js +1 -1
  32. package/dist/components/tttx-keyvalue-block.js +7 -4
  33. package/dist/components/tttx-list.js +1678 -7
  34. package/dist/components/tttx-standalone-input.js +9 -2
  35. package/dist/esm/{index-901bfd55.js → index-0350f122.js} +51 -60
  36. package/dist/esm/loader.js +2 -2
  37. package/dist/esm/tttx-button.entry.js +1 -1
  38. package/dist/esm/tttx-form.entry.js +373 -0
  39. package/dist/esm/tttx-icon.entry.js +2 -2
  40. package/dist/esm/tttx-keyvalue-block.entry.js +8 -5
  41. package/dist/esm/tttx-list.entry.js +1677 -7
  42. package/dist/esm/tttx-loading-spinner.entry.js +1 -1
  43. package/dist/esm/tttx-standalone-input.entry.js +7 -3
  44. package/dist/esm/tttx.js +2 -2
  45. package/dist/tttx/{p-a4077908.entry.js → p-1b015a9d.entry.js} +1 -1
  46. package/dist/tttx/{p-9a382959.entry.js → p-4f3958fa.entry.js} +1 -1
  47. package/dist/tttx/p-62869344.js +2 -0
  48. package/dist/tttx/{p-0ae51ec5.entry.js → p-92465671.entry.js} +1 -1
  49. package/dist/tttx/p-a0179cb1.entry.js +1 -0
  50. package/dist/tttx/p-b0a6b872.entry.js +1 -0
  51. package/dist/tttx/p-cd1565e0.entry.js +3 -0
  52. package/dist/tttx/p-ce015353.entry.js +1 -0
  53. package/dist/tttx/tttx.esm.js +1 -1
  54. package/dist/types/components/molecules/tttx-form/lib/setErrorState.d.ts +13 -0
  55. package/dist/types/components/molecules/tttx-form/lib/validityCheck.d.ts +17 -0
  56. package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +114 -0
  57. package/dist/types/components/molecules/{tttx-table/tttx-table.stories.d.ts → tttx-form/tttx-form.stories.d.ts} +2 -10
  58. package/dist/types/components/molecules/tttx-list/interfaces.d.ts +4 -2
  59. package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +3 -1
  60. package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +7 -0
  61. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +3 -0
  62. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +16 -0
  63. package/dist/types/components.d.ts +32 -28
  64. package/dist/types/shared/domsanitiser.options.d.ts +10 -0
  65. package/package.json +1 -1
  66. package/dist/cjs/tttx-table.cjs.entry.js +0 -60
  67. package/dist/collection/components/atoms/tttx-button/test/tttx-button.e2e.js +0 -9
  68. package/dist/collection/components/atoms/tttx-button/test/tttx-button.spec.js +0 -43
  69. package/dist/collection/components/atoms/tttx-icon/test/tttx-icon.e2e.js +0 -9
  70. package/dist/collection/components/atoms/tttx-icon/test/tttx-icon.spec.js +0 -16
  71. package/dist/collection/components/atoms/tttx-keyvalue-block/test/tttx-keyvalue-block.spec.js +0 -164
  72. package/dist/collection/components/atoms/tttx-loading-spinner/Test/tttx-loading-spinner.spec.js +0 -64
  73. package/dist/collection/components/molecules/tttx-list/test/tttx-list.spec.js +0 -151
  74. package/dist/collection/components/molecules/tttx-standalone-input/test/tttx-standalone-input.e2e.js +0 -9
  75. package/dist/collection/components/molecules/tttx-standalone-input/test/tttx-standalone-input.spec.js +0 -146
  76. package/dist/collection/components/molecules/tttx-table/test/tttx-table.e2e.js +0 -9
  77. package/dist/collection/components/molecules/tttx-table/tttx-table.css +0 -166
  78. package/dist/collection/components/molecules/tttx-table/tttx-table.js +0 -174
  79. package/dist/collection/components/molecules/tttx-table/tttx-table.stories.js +0 -81
  80. package/dist/components/tttx-table.js +0 -85
  81. package/dist/esm/tttx-table.entry.js +0 -56
  82. package/dist/tttx/p-1ec23160.entry.js +0 -1
  83. package/dist/tttx/p-300ff6a8.entry.js +0 -1
  84. package/dist/tttx/p-32ad02d3.entry.js +0 -1
  85. package/dist/tttx/p-80cf5236.entry.js +0 -1
  86. package/dist/tttx/p-a1bd16a1.entry.js +0 -1
  87. package/dist/tttx/p-a6953900.entry.js +0 -1
  88. package/dist/tttx/p-b46e3c59.entry.js +0 -1
  89. package/dist/tttx/p-c290160b.js +0 -2
  90. package/dist/tttx/p-dc179257.entry.js +0 -1
  91. package/dist/tttx/p-e19eb07e.entry.js +0 -1
  92. package/dist/tttx/p-e4341658.entry.js +0 -1
  93. package/dist/types/components/atoms/tttx-button/test/tttx-button.e2e.d.ts +0 -1
  94. package/dist/types/components/atoms/tttx-button/test/tttx-button.spec.d.ts +0 -1
  95. package/dist/types/components/atoms/tttx-icon/test/tttx-icon.e2e.d.ts +0 -1
  96. package/dist/types/components/atoms/tttx-icon/test/tttx-icon.spec.d.ts +0 -1
  97. package/dist/types/components/atoms/tttx-keyvalue-block/test/tttx-keyvalue-block.spec.d.ts +0 -1
  98. package/dist/types/components/atoms/tttx-loading-spinner/Test/tttx-loading-spinner.spec.d.ts +0 -1
  99. package/dist/types/components/molecules/tttx-list/test/tttx-list.spec.d.ts +0 -1
  100. package/dist/types/components/molecules/tttx-standalone-input/test/tttx-standalone-input.e2e.d.ts +0 -1
  101. package/dist/types/components/molecules/tttx-standalone-input/test/tttx-standalone-input.spec.d.ts +0 -1
  102. package/dist/types/components/molecules/tttx-table/test/tttx-table.e2e.d.ts +0 -1
  103. package/dist/types/components/molecules/tttx-table/tttx-table.d.ts +0 -15
@@ -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;margin-right:4px}.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}.focused.sc-tttx-standalone-input{border-color:#1479c6}.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.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}input.invalid.sc-tttx-standalone-input:invalid,input.standalone.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}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}.sc-tttx-standalone-input-h{display:block}";
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}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}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}";
5
5
 
6
6
  const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
7
  constructor() {
@@ -13,9 +13,12 @@ const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
13
13
  this.invalidChanged = createEvent(this, "invalidChanged", 7);
14
14
  this.label = undefined;
15
15
  this.showerrormsg = undefined;
16
+ this.showerrorbubble = true;
16
17
  this.errormsg = undefined;
17
18
  this.iconleft = undefined;
18
19
  this.iconright = undefined;
20
+ this.inputicon = undefined;
21
+ this.inline = undefined;
19
22
  this.inputAutocapitalize = undefined;
20
23
  this.inputAutofocus = undefined;
21
24
  this.inputKeyhint = undefined;
@@ -51,20 +54,24 @@ const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
51
54
  this.blurChanged.emit(target.value);
52
55
  }
53
56
  handleInvalid(event) {
57
+ event.preventDefault();
54
58
  const target = event.target;
55
59
  this.invalidChanged.emit(target.value);
56
60
  }
57
61
  render() {
58
62
  const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
59
- return (h(Host, null, h("label", { class: 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.iconleft, color: "grey" }))), h("input", { class: classNames, autocapitalize: this.inputAutocapitalize, autofocus: this.inputAutofocus, enterkeyhint: this.inputKeyhint, tabindex: this.inputIndex, title: this.inputTitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), this.iconright && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, color: "grey" }))), h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
63
+ return (h(Host, null, h("label", { class: this.inline ? 'inputInline' : 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.iconleft, color: "grey" }))), h("div", { class: "input-container" }, this.inputicon && (h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: "grey" })), h("input", { class: classNames, autocapitalize: this.inputAutocapitalize, autofocus: this.inputAutofocus, enterkeyhint: this.inputKeyhint, tabindex: this.inputIndex, title: this.inputTitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), this.iconright && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, color: "grey" }))), this.showerrorbubble && (h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))))));
60
64
  }
61
65
  static get style() { return tttxStandaloneInputCss; }
62
66
  }, [2, "tttx-standalone-input", {
63
67
  "label": [1],
64
68
  "showerrormsg": [4],
69
+ "showerrorbubble": [4],
65
70
  "errormsg": [1],
66
71
  "iconleft": [1],
67
72
  "iconright": [1],
73
+ "inputicon": [1],
74
+ "inline": [4],
68
75
  "inputAutocapitalize": [1, "input-autocapitalize"],
69
76
  "inputAutofocus": [4, "input-autofocus"],
70
77
  "inputKeyhint": [1, "input-keyhint"],
@@ -146,10 +146,6 @@ const parsePropertyValue = (propValue, propType) => {
146
146
  // but we'll cheat here and say that the string "false" is the boolean false
147
147
  return propValue === 'false' ? false : propValue === '' || !!propValue;
148
148
  }
149
- if (propType & 2 /* MEMBER_FLAGS.Number */) {
150
- // force it to be a number
151
- return parseFloat(propValue);
152
- }
153
149
  if (propType & 1 /* MEMBER_FLAGS.String */) {
154
150
  // could have been passed as a number or boolean
155
151
  // but we still want it as a string
@@ -280,6 +276,12 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
280
276
  classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
281
277
  classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
282
278
  }
279
+ else if (memberName === 'ref') {
280
+ // minifier will clean this up
281
+ if (newValue) {
282
+ newValue(elm);
283
+ }
284
+ }
283
285
  else if ((!isProp ) &&
284
286
  memberName[0] === 'o' &&
285
287
  memberName[1] === 'n') {
@@ -446,6 +448,7 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
446
448
  for (; startIdx <= endIdx; ++startIdx) {
447
449
  if ((vnode = vnodes[startIdx])) {
448
450
  elm = vnode.$elm$;
451
+ callNodeRefs(vnode);
449
452
  // remove the vnode's element from the dom
450
453
  elm.remove();
451
454
  }
@@ -697,6 +700,12 @@ const patch = (oldVNode, newVNode) => {
697
700
  elm.data = text;
698
701
  }
699
702
  };
703
+ const callNodeRefs = (vNode) => {
704
+ {
705
+ vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
706
+ vNode.$children$ && vNode.$children$.map(callNodeRefs);
707
+ }
708
+ };
700
709
  const renderVdom = (hostRef, renderFnResults) => {
701
710
  const hostElm = hostRef.$hostElement$;
702
711
  const oldVNode = hostRef.$vnode$ || newVNode(null, null);
@@ -737,17 +746,13 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
737
746
  const instance = hostRef.$lazyInstance$ ;
738
747
  let promise;
739
748
  if (isInitialLoad) {
740
- {
741
- hostRef.$flags$ |= 256 /* HOST_FLAGS.isListenReady */;
742
- if (hostRef.$queuedListeners$) {
743
- hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
744
- hostRef.$queuedListeners$ = null;
745
- }
746
- }
747
749
  {
748
750
  promise = safeCall(instance, 'componentWillLoad');
749
751
  }
750
752
  }
753
+ {
754
+ promise = then(promise, () => safeCall(instance, 'componentWillRender'));
755
+ }
751
756
  endSchedule();
752
757
  return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
753
758
  };
@@ -815,7 +820,11 @@ const postUpdateComponent = (hostRef) => {
815
820
  const tagName = hostRef.$cmpMeta$.$tagName$;
816
821
  const elm = hostRef.$hostElement$;
817
822
  const endPostUpdate = createTime('postUpdate', tagName);
823
+ const instance = hostRef.$lazyInstance$ ;
818
824
  const ancestorComponent = hostRef.$ancestorComponent$;
825
+ {
826
+ safeCall(instance, 'componentDidRender');
827
+ }
819
828
  if (!(hostRef.$flags$ & 64 /* HOST_FLAGS.hasLoadedComponent */)) {
820
829
  hostRef.$flags$ |= 64 /* HOST_FLAGS.hasLoadedComponent */;
821
830
  {
@@ -877,6 +886,7 @@ const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propNam
877
886
  const setValue = (ref, propName, newVal, cmpMeta) => {
878
887
  // check our new property value against our internal value
879
888
  const hostRef = getHostRef(ref);
889
+ const elm = hostRef.$hostElement$ ;
880
890
  const oldVal = hostRef.$instanceValues$.get(propName);
881
891
  const flags = hostRef.$flags$;
882
892
  const instance = hostRef.$lazyInstance$ ;
@@ -889,6 +899,22 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
889
899
  // set our new value!
890
900
  hostRef.$instanceValues$.set(propName, newVal);
891
901
  if (instance) {
902
+ // get an array of method names of watch functions to call
903
+ if (cmpMeta.$watchers$ && flags & 128 /* HOST_FLAGS.isWatchReady */) {
904
+ const watchMethods = cmpMeta.$watchers$[propName];
905
+ if (watchMethods) {
906
+ // this instance is watching for when this property changed
907
+ watchMethods.map((watchMethodName) => {
908
+ try {
909
+ // fire off each of the watch methods that are watching this property
910
+ instance[watchMethodName](newVal, oldVal, propName);
911
+ }
912
+ catch (e) {
913
+ consoleError(e, elm);
914
+ }
915
+ });
916
+ }
917
+ }
892
918
  if ((flags & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
893
919
  // looks like this value actually changed, so we've got work to do!
894
920
  // but only if we've already rendered, otherwise just chill out
@@ -911,6 +937,9 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
911
937
  */
912
938
  const proxyComponent = (Cstr, cmpMeta, flags) => {
913
939
  if (cmpMeta.$members$) {
940
+ if (Cstr.watchers) {
941
+ cmpMeta.$watchers$ = Cstr.watchers;
942
+ }
914
943
  // It's better to have a const than two Object.entries()
915
944
  const members = Object.entries(cmpMeta.$members$);
916
945
  const prototype = Cstr.prototype;
@@ -1015,6 +1044,12 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
1015
1044
  endLoad();
1016
1045
  }
1017
1046
  if (!Cstr.isProxied) {
1047
+ // we've never proxied this Constructor before
1048
+ // let's add the getters/setters to its prototype before
1049
+ // the first time we create an instance of the implementation
1050
+ {
1051
+ cmpMeta.$watchers$ = Cstr.watchers;
1052
+ }
1018
1053
  proxyComponent(Cstr, cmpMeta, 2 /* PROXY_FLAGS.proxyState */);
1019
1054
  Cstr.isProxied = true;
1020
1055
  }
@@ -1038,6 +1073,9 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
1038
1073
  {
1039
1074
  hostRef.$flags$ &= ~8 /* HOST_FLAGS.isConstructingInstance */;
1040
1075
  }
1076
+ {
1077
+ hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */;
1078
+ }
1041
1079
  endNewInstance();
1042
1080
  }
1043
1081
  if (Cstr.style) {
@@ -1105,24 +1143,12 @@ const connectedCallback = (elm) => {
1105
1143
  initializeComponent(elm, hostRef, cmpMeta);
1106
1144
  }
1107
1145
  }
1108
- else {
1109
- // not the first time this has connected
1110
- // reattach any event listeners to the host
1111
- // since they would have been removed when disconnected
1112
- addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
1113
- }
1114
1146
  endConnected();
1115
1147
  }
1116
1148
  };
1117
1149
  const disconnectedCallback = (elm) => {
1118
1150
  if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
1119
- const hostRef = getHostRef(elm);
1120
- {
1121
- if (hostRef.$rmListeners$) {
1122
- hostRef.$rmListeners$.map((rmListener) => rmListener());
1123
- hostRef.$rmListeners$ = undefined;
1124
- }
1125
- }
1151
+ getHostRef(elm);
1126
1152
  }
1127
1153
  };
1128
1154
  const bootstrapLazy = (lazyBundles, options = {}) => {
@@ -1150,7 +1176,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1150
1176
  cmpMeta.$members$ = compactMeta[2];
1151
1177
  }
1152
1178
  {
1153
- cmpMeta.$listeners$ = compactMeta[3];
1179
+ cmpMeta.$watchers$ = {};
1154
1180
  }
1155
1181
  const tagName = cmpMeta.$tagName$;
1156
1182
  const HostElement = class extends HTMLElement {
@@ -1217,40 +1243,6 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1217
1243
  // Fallback appLoad event
1218
1244
  endBootstrap();
1219
1245
  };
1220
- const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
1221
- if (listeners) {
1222
- listeners.map(([flags, name, method]) => {
1223
- const target = getHostListenerTarget(elm, flags) ;
1224
- const handler = hostListenerProxy(hostRef, method);
1225
- const opts = hostListenerOpts(flags);
1226
- plt.ael(target, name, handler, opts);
1227
- (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
1228
- });
1229
- }
1230
- };
1231
- const hostListenerProxy = (hostRef, methodName) => (ev) => {
1232
- try {
1233
- {
1234
- if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) {
1235
- // instance is ready, let's call it's member method for this event
1236
- hostRef.$lazyInstance$[methodName](ev);
1237
- }
1238
- else {
1239
- (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
1240
- }
1241
- }
1242
- }
1243
- catch (e) {
1244
- consoleError(e);
1245
- }
1246
- };
1247
- const getHostListenerTarget = (elm, flags) => {
1248
- if (flags & 4 /* LISTENER_FLAGS.TargetDocument */)
1249
- return doc;
1250
- return elm;
1251
- };
1252
- // prettier-ignore
1253
- const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
1254
1246
  const hostRefs = /*@__PURE__*/ new WeakMap();
1255
1247
  const getHostRef = (ref) => hostRefs.get(ref);
1256
1248
  const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -1266,7 +1258,6 @@ const registerHost = (elm, cmpMeta) => {
1266
1258
  elm['s-p'] = [];
1267
1259
  elm['s-rc'] = [];
1268
1260
  }
1269
- addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
1270
1261
  return hostRefs.set(elm, hostRef);
1271
1262
  };
1272
1263
  const isMemberInElement = (elm, memberName) => memberName in elm;
@@ -1,4 +1,4 @@
1
- import { p as promiseResolve, b as bootstrapLazy } from './index-901bfd55.js';
1
+ import { p as promiseResolve, b as bootstrapLazy } from './index-0350f122.js';
2
2
 
3
3
  /*
4
4
  Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
@@ -10,7 +10,7 @@ const patchEsm = () => {
10
10
  const defineCustomElements = (win, options) => {
11
11
  if (typeof window === 'undefined') return Promise.resolve();
12
12
  return patchEsm().then(() => {
13
- return bootstrapLazy([["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-list",[[1,"tttx-list",{"data":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"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-table",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]]], options);
13
+ return bootstrapLazy([["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputicon":[1],"inline":[4],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"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-form",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
14
14
  });
15
15
  };
16
16
 
@@ -1,4 +1,4 @@
1
- import { r as registerInstance, h, H as Host } from './index-901bfd55.js';
1
+ import { r as registerInstance, h, H as Host } from './index-0350f122.js';
2
2
 
3
3
  const tttxButtonCss = ".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}";
4
4