@3t-transform/threeteeui 0.1.5 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (101) hide show
  1. package/dist/cjs/{index-906c2757.js → index-b3010e55.js} +2 -99
  2. package/dist/cjs/loader.cjs.js +3 -4
  3. package/dist/cjs/{tttx-button_2.cjs.entry.js → tttx-button.cjs.entry.js} +24 -50
  4. package/dist/cjs/tttx-form.cjs.entry.js +364 -364
  5. package/dist/cjs/tttx-icon.cjs.entry.js +21 -0
  6. package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +57 -57
  7. package/dist/cjs/tttx-list.cjs.entry.js +43 -43
  8. package/dist/cjs/tttx-loading-spinner.cjs.entry.js +16 -16
  9. package/dist/cjs/tttx-standalone-input.cjs.entry.js +61 -58
  10. package/dist/cjs/tttx.cjs.js +3 -7
  11. package/dist/collection/collection-manifest.json +2 -2
  12. package/dist/collection/components/atoms/tttx-button/tttx-button.js +110 -116
  13. package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +14 -14
  14. package/dist/collection/components/atoms/tttx-icon/tttx-icon.css +4 -0
  15. package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +62 -62
  16. package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +22 -22
  17. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +107 -107
  18. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +38 -38
  19. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +67 -67
  20. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +17 -17
  21. package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js +35 -35
  22. package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js +58 -58
  23. package/dist/collection/components/molecules/tttx-form/tttx-form.css +32 -3
  24. package/dist/collection/components/molecules/tttx-form/tttx-form.js +364 -364
  25. package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +127 -127
  26. package/dist/collection/components/molecules/tttx-list/tttx-list.js +105 -105
  27. package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +43 -43
  28. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.css +32 -3
  29. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +627 -572
  30. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +148 -135
  31. package/dist/collection/components/palette.stories.js +7 -7
  32. package/dist/collection/docs/gettingstarted-developer.stories.js +5 -5
  33. package/dist/collection/icons.js +2838 -2838
  34. package/dist/collection/index.js +1 -1
  35. package/dist/collection/shared/domsanitiser.options.js +14 -14
  36. package/dist/components/index.d.ts +0 -9
  37. package/dist/components/index.js +1 -1
  38. package/dist/components/tttx-button.js +48 -59
  39. package/dist/components/tttx-form.js +381 -381
  40. package/dist/components/tttx-icon2.js +29 -29
  41. package/dist/components/tttx-keyvalue-block.js +74 -74
  42. package/dist/components/tttx-list.js +65 -65
  43. package/dist/components/tttx-loading-spinner.js +33 -33
  44. package/dist/components/tttx-standalone-input.js +108 -102
  45. package/dist/esm/{index-4010ad69.js → index-31631990.js} +3 -98
  46. package/dist/esm/loader.js +3 -4
  47. package/dist/esm/polyfills/core-js.js +0 -0
  48. package/dist/esm/polyfills/css-shim.js +1 -1
  49. package/dist/esm/polyfills/dom.js +0 -0
  50. package/dist/esm/polyfills/es5-html-element.js +0 -0
  51. package/dist/esm/polyfills/index.js +0 -0
  52. package/dist/esm/polyfills/system.js +0 -0
  53. package/dist/esm/{tttx-button_2.entry.js → tttx-button.entry.js} +25 -50
  54. package/dist/esm/tttx-form.entry.js +364 -364
  55. package/dist/esm/tttx-icon.entry.js +17 -0
  56. package/dist/esm/tttx-keyvalue-block.entry.js +57 -57
  57. package/dist/esm/tttx-list.entry.js +43 -43
  58. package/dist/esm/tttx-loading-spinner.entry.js +16 -16
  59. package/dist/esm/tttx-standalone-input.entry.js +61 -58
  60. package/dist/esm/tttx.js +3 -4
  61. package/dist/tttx/p-0c6a665d.js +2 -0
  62. package/dist/tttx/p-14270585.entry.js +1 -0
  63. package/dist/tttx/{p-3281444a.entry.js → p-1f3d39fc.entry.js} +1 -1
  64. package/dist/tttx/p-263d093c.entry.js +1 -0
  65. package/dist/tttx/p-2e7f486e.entry.js +1 -0
  66. package/dist/tttx/p-39f991c3.entry.js +3 -0
  67. package/dist/tttx/{p-dab7ee1b.entry.js → p-84d90779.entry.js} +1 -1
  68. package/dist/tttx/p-979ebe65.entry.js +1 -0
  69. package/dist/tttx/tttx.esm.js +1 -1
  70. package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +10 -13
  71. package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +10 -10
  72. package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +5 -5
  73. package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +20 -20
  74. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +7 -7
  75. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +9 -9
  76. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -6
  77. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +17 -17
  78. package/dist/types/components/molecules/tttx-form/lib/setErrorState.d.ts +13 -13
  79. package/dist/types/components/molecules/tttx-form/lib/validityCheck.d.ts +17 -17
  80. package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +114 -114
  81. package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +13 -13
  82. package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +11 -11
  83. package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +14 -14
  84. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +56 -53
  85. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +122 -106
  86. package/dist/types/components/palette.stories.d.ts +6 -6
  87. package/dist/types/components.d.ts +6 -0
  88. package/dist/types/docs/gettingstarted-developer.stories.d.ts +5 -5
  89. package/dist/types/icons.d.ts +2 -2
  90. package/dist/types/index.d.ts +1 -1
  91. package/dist/types/shared/domsanitiser.options.d.ts +10 -10
  92. package/dist/types/stencil-public-runtime.d.ts +3 -59
  93. package/loader/index.d.ts +0 -9
  94. package/package.json +1 -1
  95. package/dist/collection/transform-tag-name.js +0 -5
  96. package/dist/tttx/p-083eeedc.entry.js +0 -1
  97. package/dist/tttx/p-5687f4ad.js +0 -2
  98. package/dist/tttx/p-5c9a1626.entry.js +0 -3
  99. package/dist/tttx/p-931e42c9.entry.js +0 -1
  100. package/dist/tttx/p-b5c1dd86.entry.js +0 -1
  101. package/dist/types/transform-tag-name.d.ts +0 -1
@@ -63,18 +63,6 @@ const isComplexType = (o) => {
63
63
  o = typeof o;
64
64
  return o === 'object' || o === 'function';
65
65
  };
66
- /**
67
- * Helper method for querying a `meta` tag that contains a nonce value
68
- * out of a DOM's head.
69
- *
70
- * @param doc The DOM containing the `head` to query against
71
- * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag
72
- * exists or the tag has no content.
73
- */
74
- function queryNonceMetaTagContent(doc) {
75
- var _a, _b, _c;
76
- return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;
77
- }
78
66
  /**
79
67
  * Production h() function based on Preact by
80
68
  * Jason Miller (@developit)
@@ -83,6 +71,7 @@ function queryNonceMetaTagContent(doc) {
83
71
  *
84
72
  * Modified for Stencil's compiler and vdom
85
73
  */
74
+ // const stack: any[] = [];
86
75
  // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
87
76
  // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
88
77
  const h = (nodeName, vnodeData, ...children) => {
@@ -133,14 +122,6 @@ const h = (nodeName, vnodeData, ...children) => {
133
122
  }
134
123
  return vnode;
135
124
  };
136
- /**
137
- * A utility function for creating a virtual DOM node from a tag and some
138
- * possible text content.
139
- *
140
- * @param tag the tag for this element
141
- * @param text possible text content for the node
142
- * @returns a newly-minted virtual DOM node
143
- */
144
125
  const newVNode = (tag, text) => {
145
126
  const vnode = {
146
127
  $flags$: 0,
@@ -155,12 +136,6 @@ const newVNode = (tag, text) => {
155
136
  return vnode;
156
137
  };
157
138
  const Host = {};
158
- /**
159
- * Check whether a given node is a Host node or not
160
- *
161
- * @param node the virtual DOM node to check
162
- * @returns whether it's a Host node or not
163
- */
164
139
  const isHost = (node) => node && node.$tag$ === Host;
165
140
  /**
166
141
  * Parse a new property value for a given property type.
@@ -249,7 +224,6 @@ const registerStyle = (scopeId, cssText, allowCS) => {
249
224
  styles.set(scopeId, style);
250
225
  };
251
226
  const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
252
- var _a;
253
227
  let scopeId = getScopeId(cmpMeta);
254
228
  const style = styles.get(scopeId);
255
229
  // if an element is NOT connected then getRootNode() will return the wrong root node
@@ -269,11 +243,6 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
269
243
  styleElm = doc.createElement('style');
270
244
  styleElm.innerHTML = style;
271
245
  }
272
- // Apply CSP nonce to the style tag if it exists
273
- const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
274
- if (nonce != null) {
275
- styleElm.setAttribute('nonce', nonce);
276
- }
277
246
  styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
278
247
  }
279
248
  if (appliedStyles) {
@@ -481,21 +450,6 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
481
450
  }
482
451
  return elm;
483
452
  };
484
- /**
485
- * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
486
- * add them to the DOM in the appropriate place.
487
- *
488
- * @param parentElm the DOM node which should be used as a parent for the new
489
- * DOM nodes
490
- * @param before a child of the `parentElm` which the new children should be
491
- * inserted before (optional)
492
- * @param parentVNode the parent virtual DOM node
493
- * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
494
- * @param startIdx the index in the child virtual DOM nodes at which to start
495
- * creating DOM nodes (inclusive)
496
- * @param endIdx the index in the child virtual DOM nodes at which to stop
497
- * creating DOM nodes (inclusive)
498
- */
499
453
  const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
500
454
  let containerElm = (parentElm);
501
455
  let childNode;
@@ -512,19 +466,6 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
512
466
  }
513
467
  }
514
468
  };
515
- /**
516
- * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
517
- * This can be used to, for instance, clean up after a list of children which
518
- * should no longer be shown.
519
- *
520
- * This function also handles some of Stencil's slot relocation logic.
521
- *
522
- * @param vnodes a list of virtual DOM nodes to remove
523
- * @param startIdx the index at which to start removing nodes (inclusive)
524
- * @param endIdx the index at which to stop removing nodes (inclusive)
525
- * @param vnode a VNode
526
- * @param elm an element
527
- */
528
469
  const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
529
470
  for (; startIdx <= endIdx; ++startIdx) {
530
471
  if ((vnode = vnodes[startIdx])) {
@@ -717,8 +658,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
717
658
  *
718
659
  * So, in other words, if `key` attrs are not set on VNodes which may be
719
660
  * changing order within a `children` array or something along those lines then
720
- * we could obtain a false negative and then have to do needless re-rendering
721
- * (i.e. we'd say two VNodes aren't equal when in fact they should be).
661
+ * we could obtain a false positive and then have to do needless re-rendering.
722
662
  *
723
663
  * @param leftVNode the first VNode to check
724
664
  * @param rightVNode the second VNode to check
@@ -788,18 +728,6 @@ const callNodeRefs = (vNode) => {
788
728
  vNode.$children$ && vNode.$children$.map(callNodeRefs);
789
729
  }
790
730
  };
791
- /**
792
- * The main entry point for Stencil's virtual DOM-based rendering engine
793
- *
794
- * Given a {@link d.HostRef} container and some virtual DOM nodes, this
795
- * function will handle creating a virtual DOM tree with a single root, patching
796
- * the current virtual DOM tree onto an old one (if any), dealing with slot
797
- * relocation, and reflecting attributes.
798
- *
799
- * @param hostRef data needed to root and render the virtual DOM tree, such as
800
- * the DOM node into which it should be rendered.
801
- * @param renderFnResults the virtual DOM nodes to be rendered
802
- */
803
731
  const renderVdom = (hostRef, renderFnResults) => {
804
732
  const hostElm = hostRef.$hostElement$;
805
733
  const oldVNode = hostRef.$vnode$ || newVNode(null, null);
@@ -1171,7 +1099,6 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
1171
1099
  hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */;
1172
1100
  }
1173
1101
  endNewInstance();
1174
- fireConnectedCallback(hostRef.$lazyInstance$);
1175
1102
  }
1176
1103
  if (Cstr.style) {
1177
1104
  // this component has styles but we haven't registered them yet
@@ -1200,11 +1127,6 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
1200
1127
  schedule();
1201
1128
  }
1202
1129
  };
1203
- const fireConnectedCallback = (instance) => {
1204
- {
1205
- safeCall(instance, 'connectedCallback');
1206
- }
1207
- };
1208
1130
  const connectedCallback = (elm) => {
1209
1131
  if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
1210
1132
  const hostRef = getHostRef(elm);
@@ -1243,10 +1165,6 @@ const connectedCallback = (elm) => {
1243
1165
  initializeComponent(elm, hostRef, cmpMeta);
1244
1166
  }
1245
1167
  }
1246
- else {
1247
- // fire off connectedCallback() on component instance
1248
- fireConnectedCallback(hostRef.$lazyInstance$);
1249
- }
1250
1168
  endConnected();
1251
1169
  }
1252
1170
  };
@@ -1256,7 +1174,6 @@ const disconnectedCallback = (elm) => {
1256
1174
  }
1257
1175
  };
1258
1176
  const bootstrapLazy = (lazyBundles, options = {}) => {
1259
- var _a;
1260
1177
  const endBootstrap = createTime();
1261
1178
  const cmpTags = [];
1262
1179
  const exclude = options.exclude || [];
@@ -1335,11 +1252,6 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1335
1252
  {
1336
1253
  visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
1337
1254
  visibilityStyle.setAttribute('data-styles', '');
1338
- // Apply CSP nonce to the style tag if it exists
1339
- const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
1340
- if (nonce != null) {
1341
- visibilityStyle.setAttribute('nonce', nonce);
1342
- }
1343
1255
  head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
1344
1256
  }
1345
1257
  // Process deferred connectedCallbacks now all components have been registered
@@ -1355,13 +1267,6 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1355
1267
  // Fallback appLoad event
1356
1268
  endBootstrap();
1357
1269
  };
1358
- /**
1359
- * Assigns the given value to the nonce property on the runtime platform object.
1360
- * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
1361
- * @param nonce The value to be assigned to the platform nonce property.
1362
- * @returns void
1363
- */
1364
- const setNonce = (nonce) => (plt.$nonce$ = nonce);
1365
1270
  const hostRefs = /*@__PURE__*/ new WeakMap();
1366
1271
  const getHostRef = (ref) => hostRefs.get(ref);
1367
1272
  const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -1471,8 +1376,6 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
1471
1376
  exports.Host = Host;
1472
1377
  exports.bootstrapLazy = bootstrapLazy;
1473
1378
  exports.createEvent = createEvent;
1474
- exports.getElement = getElement;
1475
1379
  exports.h = h;
1476
1380
  exports.promiseResolve = promiseResolve;
1477
1381
  exports.registerInstance = registerInstance;
1478
- exports.setNonce = setNonce;
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-906c2757.js');
5
+ const index = require('./index-b3010e55.js');
6
6
 
7
7
  /*
8
- Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
8
+ Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
9
9
  */
10
10
  const patchEsm = () => {
11
11
  return index.promiseResolve();
@@ -14,9 +14,8 @@ 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-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-standalone-input.cjs",[[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-form.cjs",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-button_2.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}],[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
17
+ return index.bootstrapLazy([["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-standalone-input.cjs",[[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.cjs",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
18
18
  });
19
19
  };
20
20
 
21
- exports.setNonce = index.setNonce;
22
21
  exports.defineCustomElements = defineCustomElements;
@@ -2,59 +2,33 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-906c2757.js');
6
-
7
- const transformTagName = (tagNameToBeTransformed, knownUntransformedTagName, knownUntransformedTagNameElementReference) => {
8
- const actualCurrentTag = knownUntransformedTagNameElementReference.tagName.toLowerCase();
9
- const [prefix, suffix] = actualCurrentTag.split(knownUntransformedTagName);
10
- return prefix + tagNameToBeTransformed + suffix;
11
- };
5
+ const index = require('./index-b3010e55.js');
12
6
 
13
7
  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}";
14
8
 
15
- const TttxButton = class {
16
- constructor(hostRef) {
17
- index.registerInstance(this, hostRef);
18
- this._iconcolor = 'black';
19
- this.notext = undefined;
20
- this.icon = undefined;
21
- this.iconposition = 'left';
22
- this.design = 'default';
23
- }
24
- connectedCallback() {
25
- const TttxButton = transformTagName('tttx-button', 'tttx-button', this.el);
26
- this.buttonEl = this.el.closest(TttxButton);
27
- }
28
- componentWillLoad() {
29
- this._design = this.design;
30
- const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
31
- if (!designs.includes(this.design)) {
32
- this._design = 'default';
33
- }
34
- if (this._design === 'primary' || this._design === 'danger') {
35
- this._iconcolor = 'white';
36
- }
37
- }
38
- render() {
39
- return (index.h(index.Host, null, index.h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''} ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (index.h("div", { class: "icon-left" }, index.h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && index.h("div", { class: "button-content" }, index.h("slot", null)), this.icon && this.iconposition === 'right' && (index.h("div", { class: "icon-right" }, index.h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
40
- }
41
- get el() { return index.getElement(this); }
42
- };
9
+ const TttxButton = class {
10
+ constructor(hostRef) {
11
+ index.registerInstance(this, hostRef);
12
+ this._iconcolor = 'black';
13
+ this.notext = undefined;
14
+ this.icon = undefined;
15
+ this.iconposition = 'left';
16
+ this.design = 'default';
17
+ }
18
+ componentWillLoad() {
19
+ this._design = this.design;
20
+ const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
21
+ if (!designs.includes(this.design)) {
22
+ this._design = 'default';
23
+ }
24
+ if (this._design === 'primary' || this._design === 'danger') {
25
+ this._iconcolor = 'white';
26
+ }
27
+ }
28
+ render() {
29
+ return (index.h(index.Host, null, index.h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''} ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (index.h("div", { class: "icon-left" }, index.h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && index.h("div", { class: "button-content" }, index.h("slot", null)), this.icon && this.iconposition === 'right' && (index.h("div", { class: "icon-right" }, index.h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
30
+ }
31
+ };
43
32
  TttxButton.style = tttxButtonCss;
44
33
 
45
- const tttxIconCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}:host{display:inline-block;cursor:default;user-select:none}.icon-size{width:24px;height:24px}.tooltip{background:#ffffff;color:#343434;font-weight:bold;padding:8px 16px;font-size:13px;border-radius:4px;box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.3);display:none}.tooltip[data-show]{display:block}.arrow,.arrow::before{position:absolute;width:8px;height:8px;background:inherit}.arrow{visibility:hidden}.arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}.tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}.tooltip[data-popper-placement^=left]>.arrow{right:-4px}.tooltip[data-popper-placement^=right]>.arrow{left:-4px}.red{color:#dc0000}.orange{color:#f59500}.blue{color:#1479c6}.green{color:#a2bb31}.gray{color:#757575}.black{color:#212121}.white{color:white}";
46
-
47
- const TttxIcon = class {
48
- constructor(hostRef) {
49
- index.registerInstance(this, hostRef);
50
- this.icon = undefined;
51
- this.color = 'grey';
52
- }
53
- render() {
54
- return (index.h(index.Host, null, index.h("span", { class: `material-symbols-rounded ${this.color ? this.color : ''}` }, this.icon)));
55
- }
56
- };
57
- TttxIcon.style = tttxIconCss;
58
-
59
34
  exports.tttx_button = TttxButton;
60
- exports.tttx_icon = TttxIcon;