@3t-transform/threeteeui 0.0.23 → 0.0.25

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 (61) hide show
  1. package/dist/cjs/{index-2943e8f8.js → index-451f61dd.js} +54 -88
  2. package/dist/cjs/loader.cjs.js +3 -4
  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 +1 -1
  6. package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +1 -1
  7. package/dist/cjs/tttx-list.cjs.entry.js +1704 -0
  8. package/dist/cjs/tttx-loading-spinner.cjs.entry.js +1 -1
  9. package/dist/cjs/tttx-standalone-input.cjs.entry.js +1 -1
  10. package/dist/cjs/tttx.cjs.js +3 -7
  11. package/dist/collection/collection-manifest.json +5 -3
  12. package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js +35 -0
  13. package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js +58 -0
  14. package/dist/collection/components/molecules/tttx-form/tttx-form.css +314 -0
  15. package/dist/collection/components/molecules/tttx-form/tttx-form.js +364 -0
  16. package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +127 -0
  17. package/dist/collection/components/molecules/tttx-list/tttx-list.css +59 -0
  18. package/dist/collection/components/molecules/tttx-list/tttx-list.js +105 -0
  19. package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +71 -0
  20. package/dist/collection/shared/domsanitiser.options.js +14 -0
  21. package/dist/components/index.d.ts +2 -9
  22. package/dist/components/index.js +3 -1
  23. package/dist/components/tttx-form.d.ts +11 -0
  24. package/dist/components/tttx-form.js +394 -0
  25. package/dist/components/tttx-list.d.ts +11 -0
  26. package/dist/components/tttx-list.js +1727 -0
  27. package/dist/esm/{index-058a3cd0.js → index-0350f122.js} +55 -88
  28. package/dist/esm/loader.js +3 -4
  29. package/dist/esm/polyfills/css-shim.js +1 -1
  30. package/dist/esm/tttx-button.entry.js +1 -1
  31. package/dist/esm/tttx-form.entry.js +373 -0
  32. package/dist/esm/tttx-icon.entry.js +1 -1
  33. package/dist/esm/tttx-keyvalue-block.entry.js +1 -1
  34. package/dist/esm/tttx-list.entry.js +1700 -0
  35. package/dist/esm/tttx-loading-spinner.entry.js +1 -1
  36. package/dist/esm/tttx-standalone-input.entry.js +1 -1
  37. package/dist/esm/tttx.js +3 -4
  38. package/dist/tttx/{p-1adb2b75.entry.js → p-1b015a9d.entry.js} +1 -1
  39. package/dist/tttx/p-4ec3aee3.entry.js +1 -0
  40. package/dist/tttx/p-62869344.js +2 -0
  41. package/dist/tttx/{p-046868d9.entry.js → p-92465671.entry.js} +1 -1
  42. package/dist/tttx/{p-ad637dde.entry.js → p-a0179cb1.entry.js} +1 -1
  43. package/dist/tttx/{p-495cf4b3.entry.js → p-ae71c5ef.entry.js} +1 -1
  44. package/dist/tttx/p-cd1565e0.entry.js +3 -0
  45. package/dist/tttx/{p-a4d9929a.entry.js → p-f36c611b.entry.js} +1 -1
  46. package/dist/tttx/tttx.esm.js +1 -1
  47. package/dist/types/components/molecules/tttx-form/lib/setErrorState.d.ts +13 -0
  48. package/dist/types/components/molecules/tttx-form/lib/validityCheck.d.ts +17 -0
  49. package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +114 -0
  50. package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +13 -0
  51. package/dist/types/components/molecules/tttx-list/interfaces.d.ts +6 -0
  52. package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +11 -0
  53. package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +14 -0
  54. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +6 -6
  55. package/dist/types/components.d.ts +46 -0
  56. package/dist/types/shared/domsanitiser.options.d.ts +10 -0
  57. package/dist/types/stencil-public-runtime.d.ts +3 -59
  58. package/loader/index.d.ts +0 -9
  59. package/package.json +2 -1
  60. package/readme.md +20 -0
  61. package/dist/tttx/p-bbb7dbf7.js +0 -2
@@ -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) {
@@ -329,6 +298,12 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
329
298
  classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
330
299
  classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
331
300
  }
301
+ else if (memberName === 'ref') {
302
+ // minifier will clean this up
303
+ if (newValue) {
304
+ newValue(elm);
305
+ }
306
+ }
332
307
  else if ((!isProp ) &&
333
308
  memberName[0] === 'o' &&
334
309
  memberName[1] === 'n') {
@@ -475,21 +450,6 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
475
450
  }
476
451
  return elm;
477
452
  };
478
- /**
479
- * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
480
- * add them to the DOM in the appropriate place.
481
- *
482
- * @param parentElm the DOM node which should be used as a parent for the new
483
- * DOM nodes
484
- * @param before a child of the `parentElm` which the new children should be
485
- * inserted before (optional)
486
- * @param parentVNode the parent virtual DOM node
487
- * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
488
- * @param startIdx the index in the child virtual DOM nodes at which to start
489
- * creating DOM nodes (inclusive)
490
- * @param endIdx the index in the child virtual DOM nodes at which to stop
491
- * creating DOM nodes (inclusive)
492
- */
493
453
  const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
494
454
  let containerElm = (parentElm);
495
455
  let childNode;
@@ -506,23 +466,11 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
506
466
  }
507
467
  }
508
468
  };
509
- /**
510
- * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
511
- * This can be used to, for instance, clean up after a list of children which
512
- * should no longer be shown.
513
- *
514
- * This function also handles some of Stencil's slot relocation logic.
515
- *
516
- * @param vnodes a list of virtual DOM nodes to remove
517
- * @param startIdx the index at which to start removing nodes (inclusive)
518
- * @param endIdx the index at which to stop removing nodes (inclusive)
519
- * @param vnode a VNode
520
- * @param elm an element
521
- */
522
469
  const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
523
470
  for (; startIdx <= endIdx; ++startIdx) {
524
471
  if ((vnode = vnodes[startIdx])) {
525
472
  elm = vnode.$elm$;
473
+ callNodeRefs(vnode);
526
474
  // remove the vnode's element from the dom
527
475
  elm.remove();
528
476
  }
@@ -710,8 +658,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
710
658
  *
711
659
  * So, in other words, if `key` attrs are not set on VNodes which may be
712
660
  * changing order within a `children` array or something along those lines then
713
- * we could obtain a false negative and then have to do needless re-rendering
714
- * (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.
715
662
  *
716
663
  * @param leftVNode the first VNode to check
717
664
  * @param rightVNode the second VNode to check
@@ -775,18 +722,12 @@ const patch = (oldVNode, newVNode) => {
775
722
  elm.data = text;
776
723
  }
777
724
  };
778
- /**
779
- * The main entry point for Stencil's virtual DOM-based rendering engine
780
- *
781
- * Given a {@link d.HostRef} container and some virtual DOM nodes, this
782
- * function will handle creating a virtual DOM tree with a single root, patching
783
- * the current virtual DOM tree onto an old one (if any), dealing with slot
784
- * relocation, and reflecting attributes.
785
- *
786
- * @param hostRef data needed to root and render the virtual DOM tree, such as
787
- * the DOM node into which it should be rendered.
788
- * @param renderFnResults the virtual DOM nodes to be rendered
789
- */
725
+ const callNodeRefs = (vNode) => {
726
+ {
727
+ vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
728
+ vNode.$children$ && vNode.$children$.map(callNodeRefs);
729
+ }
730
+ };
790
731
  const renderVdom = (hostRef, renderFnResults) => {
791
732
  const hostElm = hostRef.$hostElement$;
792
733
  const oldVNode = hostRef.$vnode$ || newVNode(null, null);
@@ -831,6 +772,9 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
831
772
  promise = safeCall(instance, 'componentWillLoad');
832
773
  }
833
774
  }
775
+ {
776
+ promise = then(promise, () => safeCall(instance, 'componentWillRender'));
777
+ }
834
778
  endSchedule();
835
779
  return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
836
780
  };
@@ -898,7 +842,11 @@ const postUpdateComponent = (hostRef) => {
898
842
  const tagName = hostRef.$cmpMeta$.$tagName$;
899
843
  const elm = hostRef.$hostElement$;
900
844
  const endPostUpdate = createTime('postUpdate', tagName);
845
+ const instance = hostRef.$lazyInstance$ ;
901
846
  const ancestorComponent = hostRef.$ancestorComponent$;
847
+ {
848
+ safeCall(instance, 'componentDidRender');
849
+ }
902
850
  if (!(hostRef.$flags$ & 64 /* HOST_FLAGS.hasLoadedComponent */)) {
903
851
  hostRef.$flags$ |= 64 /* HOST_FLAGS.hasLoadedComponent */;
904
852
  {
@@ -960,6 +908,7 @@ const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propNam
960
908
  const setValue = (ref, propName, newVal, cmpMeta) => {
961
909
  // check our new property value against our internal value
962
910
  const hostRef = getHostRef(ref);
911
+ const elm = hostRef.$hostElement$ ;
963
912
  const oldVal = hostRef.$instanceValues$.get(propName);
964
913
  const flags = hostRef.$flags$;
965
914
  const instance = hostRef.$lazyInstance$ ;
@@ -972,6 +921,22 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
972
921
  // set our new value!
973
922
  hostRef.$instanceValues$.set(propName, newVal);
974
923
  if (instance) {
924
+ // get an array of method names of watch functions to call
925
+ if (cmpMeta.$watchers$ && flags & 128 /* HOST_FLAGS.isWatchReady */) {
926
+ const watchMethods = cmpMeta.$watchers$[propName];
927
+ if (watchMethods) {
928
+ // this instance is watching for when this property changed
929
+ watchMethods.map((watchMethodName) => {
930
+ try {
931
+ // fire off each of the watch methods that are watching this property
932
+ instance[watchMethodName](newVal, oldVal, propName);
933
+ }
934
+ catch (e) {
935
+ consoleError(e, elm);
936
+ }
937
+ });
938
+ }
939
+ }
975
940
  if ((flags & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
976
941
  // looks like this value actually changed, so we've got work to do!
977
942
  // but only if we've already rendered, otherwise just chill out
@@ -994,6 +959,9 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
994
959
  */
995
960
  const proxyComponent = (Cstr, cmpMeta, flags) => {
996
961
  if (cmpMeta.$members$) {
962
+ if (Cstr.watchers) {
963
+ cmpMeta.$watchers$ = Cstr.watchers;
964
+ }
997
965
  // It's better to have a const than two Object.entries()
998
966
  const members = Object.entries(cmpMeta.$members$);
999
967
  const prototype = Cstr.prototype;
@@ -1098,6 +1066,12 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
1098
1066
  endLoad();
1099
1067
  }
1100
1068
  if (!Cstr.isProxied) {
1069
+ // we've never proxied this Constructor before
1070
+ // let's add the getters/setters to its prototype before
1071
+ // the first time we create an instance of the implementation
1072
+ {
1073
+ cmpMeta.$watchers$ = Cstr.watchers;
1074
+ }
1101
1075
  proxyComponent(Cstr, cmpMeta, 2 /* PROXY_FLAGS.proxyState */);
1102
1076
  Cstr.isProxied = true;
1103
1077
  }
@@ -1121,6 +1095,9 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
1121
1095
  {
1122
1096
  hostRef.$flags$ &= ~8 /* HOST_FLAGS.isConstructingInstance */;
1123
1097
  }
1098
+ {
1099
+ hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */;
1100
+ }
1124
1101
  endNewInstance();
1125
1102
  }
1126
1103
  if (Cstr.style) {
@@ -1197,7 +1174,6 @@ const disconnectedCallback = (elm) => {
1197
1174
  }
1198
1175
  };
1199
1176
  const bootstrapLazy = (lazyBundles, options = {}) => {
1200
- var _a;
1201
1177
  const endBootstrap = createTime();
1202
1178
  const cmpTags = [];
1203
1179
  const exclude = options.exclude || [];
@@ -1221,6 +1197,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1221
1197
  {
1222
1198
  cmpMeta.$members$ = compactMeta[2];
1223
1199
  }
1200
+ {
1201
+ cmpMeta.$watchers$ = {};
1202
+ }
1224
1203
  const tagName = cmpMeta.$tagName$;
1225
1204
  const HostElement = class extends HTMLElement {
1226
1205
  // StencilLazyHost
@@ -1271,11 +1250,6 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1271
1250
  {
1272
1251
  visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
1273
1252
  visibilityStyle.setAttribute('data-styles', '');
1274
- // Apply CSP nonce to the style tag if it exists
1275
- const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
1276
- if (nonce != null) {
1277
- visibilityStyle.setAttribute('nonce', nonce);
1278
- }
1279
1253
  head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
1280
1254
  }
1281
1255
  // Process deferred connectedCallbacks now all components have been registered
@@ -1291,13 +1265,6 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1291
1265
  // Fallback appLoad event
1292
1266
  endBootstrap();
1293
1267
  };
1294
- /**
1295
- * Assigns the given value to the nonce property on the runtime platform object.
1296
- * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
1297
- * @param nonce The value to be assigned to the platform nonce property.
1298
- * @returns void
1299
- */
1300
- const setNonce = (nonce) => (plt.$nonce$ = nonce);
1301
1268
  const hostRefs = /*@__PURE__*/ new WeakMap();
1302
1269
  const getHostRef = (ref) => hostRefs.get(ref);
1303
1270
  const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -1410,4 +1377,3 @@ exports.createEvent = createEvent;
1410
1377
  exports.h = h;
1411
1378
  exports.promiseResolve = promiseResolve;
1412
1379
  exports.registerInstance = registerInstance;
1413
- exports.setNonce = setNonce;
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-2943e8f8.js');
5
+ const index = require('./index-451f61dd.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-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[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-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);
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],"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-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,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-2943e8f8.js');
5
+ const index = require('./index-451f61dd.js');
6
6
 
7
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}";
8
8