@3t-transform/threeteeui 0.0.7 → 0.0.8

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 (89) hide show
  1. package/dist/cjs/{index-253ca97c.js → index-8a4cb9bc.js} +26 -1
  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-checkbox.cjs.entry.js +2 -2
  5. package/dist/cjs/tttx-form.cjs.entry.js +1 -1
  6. package/dist/cjs/tttx-icon.cjs.entry.js +1861 -0
  7. package/dist/cjs/tttx-input.cjs.entry.js +44 -0
  8. package/dist/cjs/tttx-loading-spinner.cjs.entry.js +26 -0
  9. package/dist/cjs/tttx-popover-content.cjs.entry.js +23 -0
  10. package/dist/cjs/tttx.cjs.js +2 -2
  11. package/dist/collection/collection-manifest.json +5 -3
  12. package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +1 -4
  13. package/dist/collection/components/atoms/tttx-icon/tttx-icon.css +101 -0
  14. package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +114 -0
  15. package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +47 -0
  16. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.css +48 -0
  17. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +66 -0
  18. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +15 -0
  19. package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.css +30 -0
  20. package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.js +96 -0
  21. package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.stories.js +23 -0
  22. package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.css +1 -4
  23. package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +18 -22
  24. package/dist/collection/components/{atoms/tttx-text-box/tttx-text-box.css → molecules/tttx-input/tttx-input.css} +11 -4
  25. package/dist/collection/components/{atoms/tttx-single-input/tttx-single-input.js → molecules/tttx-input/tttx-input.js} +5 -5
  26. package/dist/collection/components/molecules/tttx-input/tttx-input.stories.js +106 -0
  27. package/dist/collection/components/palette.stories.js +88 -0
  28. package/dist/components/index.d.ts +4 -2
  29. package/dist/components/index.js +4 -2
  30. package/dist/components/tttx-checkbox.js +1 -1
  31. package/dist/components/{tttx-text-box.d.ts → tttx-icon.d.ts} +4 -4
  32. package/dist/components/tttx-icon.js +6 -0
  33. package/dist/components/tttx-icon2.js +1875 -0
  34. package/dist/components/{tttx-single-input.d.ts → tttx-input.d.ts} +4 -4
  35. package/dist/components/tttx-input.js +77 -0
  36. package/dist/components/tttx-loading-spinner.d.ts +11 -0
  37. package/dist/components/tttx-loading-spinner.js +43 -0
  38. package/dist/components/tttx-popover-content.d.ts +11 -0
  39. package/dist/components/tttx-popover-content.js +42 -0
  40. package/dist/esm/{index-fcca6c58.js → index-9654537d.js} +26 -1
  41. package/dist/esm/loader.js +3 -3
  42. package/dist/esm/tttx-button.entry.js +1 -1
  43. package/dist/esm/tttx-checkbox.entry.js +2 -2
  44. package/dist/esm/tttx-form.entry.js +1 -1
  45. package/dist/esm/tttx-icon.entry.js +1857 -0
  46. package/dist/esm/tttx-input.entry.js +40 -0
  47. package/dist/esm/tttx-loading-spinner.entry.js +22 -0
  48. package/dist/esm/tttx-popover-content.entry.js +19 -0
  49. package/dist/esm/tttx.js +3 -3
  50. package/dist/tttx/p-1884203f.entry.js +1 -0
  51. package/dist/tttx/p-317b13d3.entry.js +1 -0
  52. package/dist/tttx/{p-8d1f2e5c.entry.js → p-3cb692d6.entry.js} +1 -1
  53. package/dist/tttx/p-3cd7ad04.entry.js +1 -0
  54. package/dist/tttx/p-674e2f18.entry.js +1 -0
  55. package/dist/tttx/p-a23389f1.entry.js +1 -0
  56. package/dist/tttx/p-b6cc2780.js +2 -0
  57. package/dist/tttx/{p-40709c59.entry.js → p-f30a0e84.entry.js} +1 -1
  58. package/dist/tttx/tttx.esm.js +1 -1
  59. package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +14 -0
  60. package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +21 -0
  61. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -0
  62. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +5 -0
  63. package/dist/types/components/atoms/tttx-popover-content/tttx-popover-content.d.ts +7 -0
  64. package/dist/types/components/atoms/tttx-popover-content/tttx-popover-content.stories.d.ts +18 -0
  65. package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +12 -5
  66. package/dist/types/components/{atoms/tttx-single-input/tttx-single-input.d.ts → molecules/tttx-input/tttx-input.d.ts} +1 -1
  67. package/dist/types/components/molecules/tttx-input/tttx-input.stories.d.ts +60 -0
  68. package/dist/types/components.d.ts +63 -36
  69. package/package.json +67 -58
  70. package/readme.md +14 -27
  71. package/dist/cjs/tttx-single-input.cjs.entry.js +0 -44
  72. package/dist/cjs/tttx-text-box.cjs.entry.js +0 -38
  73. package/dist/collection/components/atoms/tttx-single-input/tttx-single-input.css +0 -142
  74. package/dist/collection/components/atoms/tttx-single-input/tttx-single-input.stories.js +0 -92
  75. package/dist/collection/components/atoms/tttx-text-box/tttx-text-box.js +0 -150
  76. package/dist/collection/components/atoms/tttx-text-box/tttx-text-box.stories.js +0 -17
  77. package/dist/collection/docs/template.stories.js +0 -10
  78. package/dist/components/tttx-single-input.js +0 -71
  79. package/dist/components/tttx-text-box.js +0 -59
  80. package/dist/esm/tttx-single-input.entry.js +0 -40
  81. package/dist/esm/tttx-text-box.entry.js +0 -34
  82. package/dist/tttx/p-05d7d002.entry.js +0 -1
  83. package/dist/tttx/p-64703252.entry.js +0 -1
  84. package/dist/tttx/p-9bf836ed.entry.js +0 -1
  85. package/dist/tttx/p-a7b95fd2.js +0 -2
  86. package/dist/types/components/atoms/tttx-single-input/tttx-single-input.stories.d.ts +0 -27
  87. package/dist/types/components/atoms/tttx-text-box/tttx-text-box.d.ts +0 -14
  88. package/dist/types/docs/template.stories.d.ts +0 -5
  89. /package/dist/types/components/{atoms/tttx-text-box/tttx-text-box.stories.d.ts → palette.stories.d.ts} +0 -0
@@ -326,6 +326,12 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
326
326
  classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
327
327
  classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
328
328
  }
329
+ else if (memberName === 'ref') {
330
+ // minifier will clean this up
331
+ if (newValue) {
332
+ newValue(elm);
333
+ }
334
+ }
329
335
  else if ((!isProp ) &&
330
336
  memberName[0] === 'o' &&
331
337
  memberName[1] === 'n') {
@@ -520,6 +526,7 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
520
526
  for (; startIdx <= endIdx; ++startIdx) {
521
527
  if ((vnode = vnodes[startIdx])) {
522
528
  elm = vnode.$elm$;
529
+ callNodeRefs(vnode);
523
530
  // remove the vnode's element from the dom
524
531
  elm.remove();
525
532
  }
@@ -772,6 +779,12 @@ const patch = (oldVNode, newVNode) => {
772
779
  elm.data = text;
773
780
  }
774
781
  };
782
+ const callNodeRefs = (vNode) => {
783
+ {
784
+ vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
785
+ vNode.$children$ && vNode.$children$.map(callNodeRefs);
786
+ }
787
+ };
775
788
  /**
776
789
  * The main entry point for Stencil's virtual DOM-based rendering engine
777
790
  *
@@ -831,6 +844,9 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
831
844
  hostRef.$queuedListeners$ = null;
832
845
  }
833
846
  }
847
+ {
848
+ promise = safeCall(instance, 'componentWillLoad');
849
+ }
834
850
  }
835
851
  endSchedule();
836
852
  return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
@@ -1205,12 +1221,16 @@ const connectedCallback = (elm) => {
1205
1221
  const disconnectedCallback = (elm) => {
1206
1222
  if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
1207
1223
  const hostRef = getHostRef(elm);
1224
+ const instance = hostRef.$lazyInstance$ ;
1208
1225
  {
1209
1226
  if (hostRef.$rmListeners$) {
1210
1227
  hostRef.$rmListeners$.map((rmListener) => rmListener());
1211
1228
  hostRef.$rmListeners$ = undefined;
1212
1229
  }
1213
1230
  }
1231
+ {
1232
+ safeCall(instance, 'disconnectedCallback');
1233
+ }
1214
1234
  }
1215
1235
  };
1216
1236
  const bootstrapLazy = (lazyBundles, options = {}) => {
@@ -1314,7 +1334,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1314
1334
  const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
1315
1335
  if (listeners) {
1316
1336
  listeners.map(([flags, name, method]) => {
1317
- const target = elm;
1337
+ const target = getHostListenerTarget(elm, flags) ;
1318
1338
  const handler = hostListenerProxy(hostRef, method);
1319
1339
  const opts = hostListenerOpts(flags);
1320
1340
  plt.ael(target, name, handler, opts);
@@ -1338,6 +1358,11 @@ const hostListenerProxy = (hostRef, methodName) => (ev) => {
1338
1358
  consoleError(e);
1339
1359
  }
1340
1360
  };
1361
+ const getHostListenerTarget = (elm, flags) => {
1362
+ if (flags & 4 /* LISTENER_FLAGS.TargetDocument */)
1363
+ return doc;
1364
+ return elm;
1365
+ };
1341
1366
  // prettier-ignore
1342
1367
  const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
1343
1368
  /**
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-253ca97c.js');
5
+ const index = require('./index-8a4cb9bc.js');
6
6
 
7
7
  /*
8
8
  Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
14
14
  const defineCustomElements = (win, options) => {
15
15
  if (typeof window === 'undefined') return Promise.resolve();
16
16
  return patchEsm().then(() => {
17
- return index.bootstrapLazy([["tttx-button.cjs",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"dataAttribute":[1,"data-attribute"],"functionAttribute":[1,"function-attribute"]}]]],["tttx-single-input.cjs",[[1,"tttx-single-input",{"label":[1],"valid":[4],"showerrormsg":[4],"errormsg":[1],"value":[1025],"type":[1],"placeholder":[1],"pattern":[1],"iconleft":[1],"iconright":[1],"required":[4],"isfocused":[32]}]]],["tttx-text-box.cjs",[[1,"tttx-text-box",{"label":[1],"showerrormsg":[4],"errormsg":[1],"required":[4],"value":[1025],"isfocused":[32]}]]]], options);
17
+ return index.bootstrapLazy([["tttx-input.cjs",[[1,"tttx-input",{"label":[1],"valid":[4],"showerrormsg":[4],"errormsg":[1],"value":[1025],"type":[1],"placeholder":[1],"pattern":[1],"iconleft":[1],"iconright":[1],"required":[4],"isfocused":[32]}]]],["tttx-button.cjs",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"dataAttribute":[1,"data-attribute"],"functionAttribute":[1,"function-attribute"]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"colour":[1]},[[4,"click","handleDocumentClick"]]]]]], options);
18
18
  });
19
19
  };
20
20
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-253ca97c.js');
5
+ const index = require('./index-8a4cb9bc.js');
6
6
 
7
7
  const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.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}.primary-blue:hover{background:#1169ba}.primary-blue:active{background:#0951a8}.secondary-white{background:white;border:1px solid #212121}:host{display:inline-block}.spacingleft{margin-left:8px}.font-white{color:white}.font-black{color:#212121}";
8
8
 
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-253ca97c.js');
5
+ const index = require('./index-8a4cb9bc.js');
6
6
 
7
- const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\";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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.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}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;font-size:16px;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{height:16px;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;color:white;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}:host{display:block}.spacing{margin-bottom:16px}";
7
+ const tttxCheckboxCss = ".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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.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}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.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}:host{display:block}.spacing{margin-bottom:16px}";
8
8
 
9
9
  const TttxCheckbox = class {
10
10
  constructor(hostRef) {
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-253ca97c.js');
5
+ const index = require('./index-8a4cb9bc.js');
6
6
 
7
7
  const TttxForm = class {
8
8
  constructor(hostRef) {