@maggioli-design-system/mds-table-row 4.1.0 → 4.2.1

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 (69) hide show
  1. package/dist/cjs/{index-1066e7b9.js → index-35a1d6b8.js} +205 -45
  2. package/dist/cjs/loader.cjs.js +2 -11
  3. package/dist/cjs/mds-table-row.cjs.entry.js +1 -1
  4. package/dist/cjs/mds-table-row.cjs.js +2 -2
  5. package/dist/collection/collection-manifest.json +3 -3
  6. package/dist/collection/common/aria.js +9 -1
  7. package/dist/collection/common/unit.js +10 -0
  8. package/dist/collection/components/mds-table-row/mds-table-row.css +0 -7
  9. package/dist/collection/components/mds-table-row/mds-table-row.js +4 -1
  10. package/dist/collection/dictionary/button.js +5 -1
  11. package/dist/collection/dictionary/icon.js +2 -2
  12. package/dist/collection/dictionary/variant.js +9 -1
  13. package/dist/components/index.d.ts +5 -3
  14. package/dist/components/index.js +1 -2
  15. package/dist/components/mds-table-row.js +1 -1
  16. package/dist/documentation.d.ts +361 -88
  17. package/dist/documentation.json +23 -7
  18. package/dist/esm/{index-be386e76.js → index-c4b331a6.js} +205 -45
  19. package/dist/esm/loader.js +3 -12
  20. package/dist/esm/mds-table-row.entry.js +1 -1
  21. package/dist/esm/mds-table-row.js +3 -3
  22. package/dist/esm-es5/index-c4b331a6.js +2 -0
  23. package/dist/esm-es5/loader.js +1 -1
  24. package/dist/esm-es5/mds-table-row.entry.js +1 -1
  25. package/dist/esm-es5/mds-table-row.js +1 -1
  26. package/dist/mds-table-row/mds-table-row.esm.js +1 -1
  27. package/dist/mds-table-row/mds-table-row.js +2 -6
  28. package/dist/mds-table-row/p-3f3266f0.system.js +2 -0
  29. package/dist/mds-table-row/p-8af6733c.js +2 -0
  30. package/dist/mds-table-row/{p-30a6116a.entry.js → p-a5d8ea64.entry.js} +1 -1
  31. package/dist/mds-table-row/{p-7d3f05d4.system.entry.js → p-c7b7ffd2.system.entry.js} +1 -1
  32. package/dist/mds-table-row/{p-29cf76f2.system.js → p-e9c26e1c.system.js} +1 -1
  33. package/dist/stats.json +41 -33
  34. package/dist/types/common/aria.d.ts +2 -1
  35. package/dist/types/common/unit.d.ts +2 -0
  36. package/dist/types/components/mds-table-row/mds-table-row.d.ts +3 -0
  37. package/dist/types/dictionary/button.d.ts +2 -1
  38. package/dist/types/dictionary/variant.d.ts +2 -1
  39. package/dist/types/stencil-public-runtime.d.ts +32 -17
  40. package/dist/types/type/button.d.ts +1 -0
  41. package/dist/types/type/variant.d.ts +1 -0
  42. package/documentation.json +376 -9
  43. package/loader/index.d.ts +2 -2
  44. package/package.json +5 -5
  45. package/readme.md +10 -1
  46. package/src/common/aria.ts +12 -0
  47. package/src/common/unit.ts +14 -0
  48. package/src/components/mds-table-row/mds-table-row.css +1 -1
  49. package/src/components/mds-table-row/mds-table-row.tsx +5 -0
  50. package/src/components/mds-table-row/readme.md +8 -1
  51. package/src/dictionary/button.ts +7 -1
  52. package/src/dictionary/variant.ts +10 -0
  53. package/src/fixtures/icons.json +41 -0
  54. package/src/fixtures/iconsauce.json +38 -0
  55. package/src/type/button.ts +4 -0
  56. package/src/type/variant.ts +9 -0
  57. package/www/build/mds-table-row.esm.js +1 -1
  58. package/www/build/mds-table-row.js +2 -6
  59. package/www/build/p-3f3266f0.system.js +2 -0
  60. package/www/build/p-8af6733c.js +2 -0
  61. package/www/build/{p-30a6116a.entry.js → p-a5d8ea64.entry.js} +1 -1
  62. package/www/build/{p-7d3f05d4.system.entry.js → p-c7b7ffd2.system.entry.js} +1 -1
  63. package/www/build/{p-29cf76f2.system.js → p-e9c26e1c.system.js} +1 -1
  64. package/dist/esm/polyfills/css-shim.js +0 -1
  65. package/dist/esm-es5/index-be386e76.js +0 -2
  66. package/dist/mds-table-row/p-2647d8bd.system.js +0 -2
  67. package/dist/mds-table-row/p-426bd1f3.js +0 -2
  68. package/www/build/p-2647d8bd.system.js +0 -2
  69. package/www/build/p-426bd1f3.js +0 -2
@@ -58,6 +58,13 @@ const HYDRATED_CSS = '{visibility:hidden}[hydrated]{visibility:inherit}';
58
58
  */
59
59
  const EMPTY_OBJ = {};
60
60
  const isDef = (v) => v != null;
61
+ /**
62
+ * Check whether a value is a 'complex type', defined here as an object or a
63
+ * function.
64
+ *
65
+ * @param o the value to check
66
+ * @returns whether it's a complex type or not
67
+ */
61
68
  const isComplexType = (o) => {
62
69
  // https://jsperf.com/typeof-fn-object/5
63
70
  o = typeof o;
@@ -216,9 +223,9 @@ const registerStyle = (scopeId, cssText, allowCS) => {
216
223
  }
217
224
  styles.set(scopeId, style);
218
225
  };
219
- const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
226
+ const addStyle = (styleContainerNode, cmpMeta, mode) => {
220
227
  var _a;
221
- let scopeId = getScopeId(cmpMeta);
228
+ const scopeId = getScopeId(cmpMeta);
222
229
  const style = styles.get(scopeId);
223
230
  // if an element is NOT connected then getRootNode() will return the wrong root node
224
231
  // so the fallback is to always use the document for the root node in those cases
@@ -233,10 +240,8 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
233
240
  }
234
241
  if (!appliedStyles.has(scopeId)) {
235
242
  {
236
- {
237
- styleElm = doc.createElement('style');
238
- styleElm.innerHTML = style;
239
- }
243
+ styleElm = doc.createElement('style');
244
+ styleElm.innerHTML = style;
240
245
  // Apply CSP nonce to the style tag if it exists
241
246
  const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
242
247
  if (nonce != null) {
@@ -283,6 +288,21 @@ const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
283
288
  *
284
289
  * Modified for Stencil's compiler and vdom
285
290
  */
291
+ /**
292
+ * When running a VDom render set properties present on a VDom node onto the
293
+ * corresponding HTML element.
294
+ *
295
+ * Note that this function has special functionality for the `class`,
296
+ * `style`, `key`, and `ref` attributes, as well as event handlers (like
297
+ * `onClick`, etc). All others are just passed through as-is.
298
+ *
299
+ * @param elm the HTMLElement onto which attributes should be set
300
+ * @param memberName the name of the attribute to set
301
+ * @param oldValue the old value for the attribute
302
+ * @param newValue the new value for the attribute
303
+ * @param isSvg whether we're in an svg context or not
304
+ * @param flags bitflags for Vdom variables
305
+ */
286
306
  const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
287
307
  if (oldValue !== newValue) {
288
308
  let isProp = isMemberInElement(elm, memberName);
@@ -429,15 +449,16 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
429
449
  * @param vnodes a list of virtual DOM nodes to remove
430
450
  * @param startIdx the index at which to start removing nodes (inclusive)
431
451
  * @param endIdx the index at which to stop removing nodes (inclusive)
432
- * @param vnode a VNode
433
- * @param elm an element
434
452
  */
435
- const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
436
- for (; startIdx <= endIdx; ++startIdx) {
437
- if ((vnode = vnodes[startIdx])) {
438
- elm = vnode.$elm$;
439
- // remove the vnode's element from the dom
440
- elm.remove();
453
+ const removeVnodes = (vnodes, startIdx, endIdx) => {
454
+ for (let index = startIdx; index <= endIdx; ++index) {
455
+ const vnode = vnodes[index];
456
+ if (vnode) {
457
+ const elm = vnode.$elm$;
458
+ if (elm) {
459
+ // remove the vnode's element from the dom
460
+ elm.remove();
461
+ }
441
462
  }
442
463
  }
443
464
  };
@@ -688,17 +709,44 @@ const patch = (oldVNode, newVNode) => {
688
709
  * @param hostRef data needed to root and render the virtual DOM tree, such as
689
710
  * the DOM node into which it should be rendered.
690
711
  * @param renderFnResults the virtual DOM nodes to be rendered
712
+ * @param isInitialLoad whether or not this is the first call after page load
691
713
  */
692
- const renderVdom = (hostRef, renderFnResults) => {
714
+ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
693
715
  const hostElm = hostRef.$hostElement$;
694
716
  const cmpMeta = hostRef.$cmpMeta$;
695
717
  const oldVNode = hostRef.$vnode$ || newVNode(null, null);
718
+ // if `renderFnResults` is a Host node then we can use it directly. If not,
719
+ // we need to call `h` again to wrap the children of our component in a
720
+ // 'dummy' Host node (well, an empty vnode) since `renderVdom` assumes
721
+ // implicitly that the top-level vdom node is 1) an only child and 2)
722
+ // contains attrs that need to be set on the host element.
696
723
  const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
697
724
  hostTagName = hostElm.tagName;
698
725
  if (cmpMeta.$attrsToReflect$) {
699
726
  rootVnode.$attrs$ = rootVnode.$attrs$ || {};
700
727
  cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
701
728
  }
729
+ // On the first render and *only* on the first render we want to check for
730
+ // any attributes set on the host element which are also set on the vdom
731
+ // node. If we find them, we override the value on the VDom node attrs with
732
+ // the value from the host element, which allows developers building apps
733
+ // with Stencil components to override e.g. the `role` attribute on a
734
+ // component even if it's already set on the `Host`.
735
+ if (isInitialLoad && rootVnode.$attrs$) {
736
+ for (const key of Object.keys(rootVnode.$attrs$)) {
737
+ // We have a special implementation in `setAccessor` for `style` and
738
+ // `class` which reconciles values coming from the VDom with values
739
+ // already present on the DOM element, so we don't want to override those
740
+ // attributes on the VDom tree with values from the host element if they
741
+ // are present.
742
+ //
743
+ // Likewise, `ref` and `key` are special internal values for the Stencil
744
+ // runtime and we don't want to override those either.
745
+ if (hostElm.hasAttribute(key) && !['key', 'ref', 'style', 'class'].includes(key)) {
746
+ rootVnode.$attrs$[key] = hostElm[key];
747
+ }
748
+ }
749
+ }
702
750
  rootVnode.$tag$ = null;
703
751
  rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
704
752
  hostRef.$vnode$ = rootVnode;
@@ -729,24 +777,85 @@ const scheduleUpdate = (hostRef, isInitialLoad) => {
729
777
  const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
730
778
  return writeTask(dispatch) ;
731
779
  };
780
+ /**
781
+ * Dispatch initial-render and update lifecycle hooks, enqueuing calls to
782
+ * component lifecycle methods like `componentWillLoad` as well as
783
+ * {@link updateComponent}, which will kick off the virtual DOM re-render.
784
+ *
785
+ * @param hostRef a reference to a host DOM node
786
+ * @param isInitialLoad whether we're on the initial load or not
787
+ * @returns an empty Promise which is used to enqueue a series of operations for
788
+ * the component
789
+ */
732
790
  const dispatchHooks = (hostRef, isInitialLoad) => {
733
791
  const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
734
792
  const instance = hostRef.$lazyInstance$ ;
735
- let promise;
793
+ // We're going to use this variable together with `enqueue` to implement a
794
+ // little promise-based queue. We start out with it `undefined`. When we add
795
+ // the first function to the queue we'll set this variable to be that
796
+ // function's return value. When we attempt to add subsequent values to the
797
+ // queue we'll check that value and, if it was a `Promise`, we'll then chain
798
+ // the new function off of that `Promise` using `.then()`. This will give our
799
+ // queue two nice properties:
800
+ //
801
+ // 1. If all functions added to the queue are synchronous they'll be called
802
+ // synchronously right away.
803
+ // 2. If all functions added to the queue are asynchronous they'll all be
804
+ // called in order after `dispatchHooks` exits.
805
+ let maybePromise;
736
806
  if (isInitialLoad) {
737
807
  {
738
808
  hostRef.$flags$ |= 256 /* HOST_FLAGS.isListenReady */;
739
809
  if (hostRef.$queuedListeners$) {
740
810
  hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
741
- hostRef.$queuedListeners$ = null;
811
+ hostRef.$queuedListeners$ = undefined;
742
812
  }
743
813
  }
744
814
  }
745
815
  endSchedule();
746
- return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
816
+ return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
747
817
  };
818
+ /**
819
+ * This function uses a Promise to implement a simple first-in, first-out queue
820
+ * of functions to be called.
821
+ *
822
+ * The queue is ordered on the basis of the first argument. If it's
823
+ * `undefined`, then nothing is on the queue yet, so the provided function can
824
+ * be called synchronously (although note that this function may return a
825
+ * `Promise`). The idea is that then the return value of that enqueueing
826
+ * operation is kept around, so that if it was a `Promise` then subsequent
827
+ * functions can be enqueued by calling this function again with that `Promise`
828
+ * as the first argument.
829
+ *
830
+ * @param maybePromise either a `Promise` which should resolve before the next function is called or an 'empty' sentinel
831
+ * @param fn a function to enqueue
832
+ * @returns either a `Promise` or the return value of the provided function
833
+ */
834
+ const enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn) : fn();
835
+ /**
836
+ * Check that a value is a `Promise`. To check, we first see if the value is an
837
+ * instance of the `Promise` global. In a few circumstances, in particular if
838
+ * the global has been overwritten, this is could be misleading, so we also do
839
+ * a little 'duck typing' check to see if the `.then` property of the value is
840
+ * defined and a function.
841
+ *
842
+ * @param maybePromise it might be a promise!
843
+ * @returns whether it is or not
844
+ */
845
+ const isPromisey = (maybePromise) => maybePromise instanceof Promise ||
846
+ (maybePromise && maybePromise.then && typeof maybePromise.then === 'function');
847
+ /**
848
+ * Update a component given reference to its host elements and so on.
849
+ *
850
+ * @param hostRef an object containing references to the element's host node,
851
+ * VDom nodes, and other metadata
852
+ * @param instance a reference to the underlying host element where it will be
853
+ * rendered
854
+ * @param isInitialLoad whether or not this function is being called as part of
855
+ * the first render cycle
856
+ */
748
857
  const updateComponent = async (hostRef, instance, isInitialLoad) => {
749
- // updateComponent
858
+ var _a;
750
859
  const elm = hostRef.$hostElement$;
751
860
  const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
752
861
  const rc = elm['s-rc'];
@@ -756,7 +865,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
756
865
  }
757
866
  const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
758
867
  {
759
- callRender(hostRef, instance);
868
+ callRender(hostRef, instance, elm, isInitialLoad);
760
869
  }
761
870
  if (rc) {
762
871
  // ok, so turns out there are some child host elements
@@ -768,7 +877,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
768
877
  endRender();
769
878
  endUpdate();
770
879
  {
771
- const childrenPromises = elm['s-p'];
880
+ const childrenPromises = (_a = elm['s-p']) !== null && _a !== void 0 ? _a : [];
772
881
  const postUpdate = () => postUpdateComponent(hostRef);
773
882
  if (childrenPromises.length === 0) {
774
883
  postUpdate();
@@ -780,7 +889,19 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
780
889
  }
781
890
  }
782
891
  };
783
- const callRender = (hostRef, instance, elm) => {
892
+ /**
893
+ * Handle making the call to the VDom renderer with the proper context given
894
+ * various build variables
895
+ *
896
+ * @param hostRef an object containing references to the element's host node,
897
+ * VDom nodes, and other metadata
898
+ * @param instance a reference to the underlying host element where it will be
899
+ * rendered
900
+ * @param elm the Host element for the component
901
+ * @param isInitialLoad whether or not this function is being called as part of
902
+ * @returns an empty promise
903
+ */
904
+ const callRender = (hostRef, instance, elm, isInitialLoad) => {
784
905
  try {
785
906
  instance = instance.render() ;
786
907
  {
@@ -795,7 +916,7 @@ const callRender = (hostRef, instance, elm) => {
795
916
  // or we need to update the css class/attrs on the host element
796
917
  // DOM WRITE!
797
918
  {
798
- renderVdom(hostRef, instance);
919
+ renderVdom(hostRef, instance, isInitialLoad);
799
920
  }
800
921
  }
801
922
  }
@@ -862,9 +983,6 @@ const safeCall = (instance, method, arg) => {
862
983
  }
863
984
  return undefined;
864
985
  };
865
- const then = (promise, thenFn) => {
866
- return promise && promise.then ? promise.then(thenFn) : thenFn();
867
- };
868
986
  const addHydratedFlag = (elm) => elm.setAttribute('hydrated', '')
869
987
  ;
870
988
  const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
@@ -904,6 +1022,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
904
1022
  * @returns a reference to the same constructor passed in (but now mutated)
905
1023
  */
906
1024
  const proxyComponent = (Cstr, cmpMeta, flags) => {
1025
+ var _a;
907
1026
  if (cmpMeta.$members$) {
908
1027
  // It's better to have a const than two Object.entries()
909
1028
  const members = Object.entries(cmpMeta.$members$);
@@ -928,7 +1047,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
928
1047
  });
929
1048
  if ((flags & 1 /* PROXY_FLAGS.isElementConstructor */)) {
930
1049
  const attrNameToPropName = new Map();
931
- prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
1050
+ prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
932
1051
  plt.jmp(() => {
933
1052
  const propName = attrNameToPropName.get(attrName);
934
1053
  // In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
@@ -951,12 +1070,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
951
1070
  // customElements.define('my-component', MyComponent);
952
1071
  // </script>
953
1072
  // ```
954
- // In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
1073
+ // In this case if we do not un-shadow here and use the value of the shadowing property, attributeChangedCallback
955
1074
  // will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
956
1075
  // to the value that was set inline i.e. "some-value" from above example. When
957
- // the connectedCallback attempts to unshadow it will use "some-value" as the initial value rather than "another-value"
1076
+ // the connectedCallback attempts to un-shadow it will use "some-value" as the initial value rather than "another-value"
958
1077
  //
959
- // The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
1078
+ // The case where the attribute was NOT set inline but was not set programmatically shall be handled/un-shadowed
960
1079
  // by connectedCallback as this attributeChangedCallback will not fire.
961
1080
  //
962
1081
  // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
@@ -976,21 +1095,49 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
976
1095
  // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
977
1096
  return;
978
1097
  }
1098
+ else if (propName == null) {
1099
+ // At this point we should know this is not a "member", so we can treat it like watching an attribute
1100
+ // on a vanilla web component
1101
+ const hostRef = getHostRef(this);
1102
+ const flags = hostRef === null || hostRef === void 0 ? void 0 : hostRef.$flags$;
1103
+ // We only want to trigger the callback(s) if:
1104
+ // 1. The instance is ready
1105
+ // 2. The watchers are ready
1106
+ // 3. The value has changed
1107
+ if (!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
1108
+ flags & 128 /* HOST_FLAGS.isWatchReady */ &&
1109
+ newValue !== oldValue) {
1110
+ const instance = hostRef.$lazyInstance$ ;
1111
+ const entry = cmpMeta.$watchers$[attrName];
1112
+ entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
1113
+ if (instance[callbackName] != null) {
1114
+ instance[callbackName].call(instance, newValue, oldValue, attrName);
1115
+ }
1116
+ });
1117
+ }
1118
+ return;
1119
+ }
979
1120
  this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
980
1121
  });
981
1122
  };
982
- // create an array of attributes to observe
983
- // and also create a map of html attribute name to js property name
984
- Cstr.observedAttributes = members
985
- .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */) // filter to only keep props that should match attributes
986
- .map(([propName, m]) => {
987
- const attrName = m[1] || propName;
988
- attrNameToPropName.set(attrName, propName);
989
- if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
990
- cmpMeta.$attrsToReflect$.push([propName, attrName]);
991
- }
992
- return attrName;
993
- });
1123
+ // Create an array of attributes to observe
1124
+ // This list in comprised of all strings used within a `@Watch()` decorator
1125
+ // on a component as well as any Stencil-specific "members" (`@Prop()`s and `@State()`s).
1126
+ // As such, there is no way to guarantee type-safety here that a user hasn't entered
1127
+ // an invalid attribute.
1128
+ Cstr.observedAttributes = Array.from(new Set([
1129
+ ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}),
1130
+ ...members
1131
+ .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
1132
+ .map(([propName, m]) => {
1133
+ const attrName = m[1] || propName;
1134
+ attrNameToPropName.set(attrName, propName);
1135
+ if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
1136
+ cmpMeta.$attrsToReflect$.push([propName, attrName]);
1137
+ }
1138
+ return attrName;
1139
+ }),
1140
+ ]));
994
1141
  }
995
1142
  }
996
1143
  return Cstr;
@@ -998,9 +1145,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
998
1145
  const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
999
1146
  // initializeComponent
1000
1147
  if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
1148
+ // Let the runtime know that the component has been initialized
1149
+ hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
1001
1150
  {
1002
- // we haven't initialized this element yet
1003
- hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
1004
1151
  // lazy loaded components
1005
1152
  // request the component's implementation to be
1006
1153
  // wired up with the host element
@@ -1064,6 +1211,8 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
1064
1211
  schedule();
1065
1212
  }
1066
1213
  };
1214
+ const fireConnectedCallback = (instance) => {
1215
+ };
1067
1216
  const connectedCallback = (elm) => {
1068
1217
  if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
1069
1218
  const hostRef = getHostRef(elm);
@@ -1107,11 +1256,18 @@ const connectedCallback = (elm) => {
1107
1256
  // reattach any event listeners to the host
1108
1257
  // since they would have been removed when disconnected
1109
1258
  addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
1259
+ // fire off connectedCallback() on component instance
1260
+ if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) ;
1261
+ else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
1262
+ hostRef.$onReadyPromise$.then(() => fireConnectedCallback());
1263
+ }
1110
1264
  }
1111
1265
  endConnected();
1112
1266
  }
1113
1267
  };
1114
- const disconnectedCallback = (elm) => {
1268
+ const disconnectInstance = (instance) => {
1269
+ };
1270
+ const disconnectedCallback = async (elm) => {
1115
1271
  if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
1116
1272
  const hostRef = getHostRef(elm);
1117
1273
  {
@@ -1120,6 +1276,10 @@ const disconnectedCallback = (elm) => {
1120
1276
  hostRef.$rmListeners$ = undefined;
1121
1277
  }
1122
1278
  }
1279
+ if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) ;
1280
+ else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
1281
+ hostRef.$onReadyPromise$.then(() => disconnectInstance());
1282
+ }
1123
1283
  }
1124
1284
  };
1125
1285
  const bootstrapLazy = (lazyBundles, options = {}) => {
@@ -2,20 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-1066e7b9.js');
6
-
7
- /*
8
- Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
9
- */
10
- const patchEsm = () => {
11
- return index.promiseResolve();
12
- };
5
+ const index = require('./index-35a1d6b8.js');
13
6
 
14
7
  const defineCustomElements = (win, options) => {
15
- if (typeof window === 'undefined') return Promise.resolve();
16
- return patchEsm().then(() => {
8
+ if (typeof window === 'undefined') return undefined;
17
9
  return index.bootstrapLazy([["mds-table-row.cjs",[[1,"mds-table-row",{"interactive":[1540]},[[4,"mdsTableInteractiveChange","tableInteractiveHandler"]]]]]], options);
18
- });
19
10
  };
20
11
 
21
12
  exports.setNonce = index.setNonce;
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-1066e7b9.js');
5
+ const index = require('./index-35a1d6b8.js');
6
6
 
7
7
  const mdsTableRowCss = ".fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{display:table-row}:host([interactive]:hover){--mds-table-cell-background:var(--mds-table-cell-background-hover, rgb(var(--tone-neutral)))}";
8
8
 
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-1066e7b9.js');
5
+ const index = require('./index-35a1d6b8.js');
6
6
 
7
7
  /*
8
- Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
8
+ Stencil Client Patch Browser v4.3.0 | MIT Licensed | https://stenciljs.com
9
9
  */
10
10
  const patchBrowser = () => {
11
11
  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-table-row.cjs.js', document.baseURI).href));
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "entries": [
3
- "./components/mds-table-row/mds-table-row.js"
3
+ "components/mds-table-row/mds-table-row.js"
4
4
  ],
5
5
  "compiler": {
6
6
  "name": "@stencil/core",
7
- "version": "2.22.3",
8
- "typescriptVersion": "4.9.4"
7
+ "version": "4.3.0",
8
+ "typescriptVersion": "5.1.6"
9
9
  },
10
10
  "collections": [],
11
11
  "bundles": []
@@ -5,6 +5,7 @@ const hash = (s) => {
5
5
  }
6
6
  return h.toString();
7
7
  };
8
+ const randomInt = (max) => Math.floor(Math.random() * max);
8
9
  const unslugName = (name) => {
9
10
  var _a, _b, _c;
10
11
  return (_c = (_b = (_a = name.split('/')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()) === null || _b === void 0 ? void 0 : _b.replace(/-/g, ' ')) !== null && _c !== void 0 ? _c : name;
@@ -18,4 +19,11 @@ const setAttributeIfEmpty = (element, attribute, value) => {
18
19
  return value;
19
20
  };
20
21
  const hashValue = (value) => `${value}-${hash(value)}`;
21
- export { unslugName, setAttributeIfEmpty, hashValue, };
22
+ const hashRandomValue = (value) => {
23
+ const randomValue = randomInt(1000000);
24
+ if (value) {
25
+ return `${value}-${hash(randomValue.toString())}`;
26
+ }
27
+ return hash(randomValue.toString());
28
+ };
29
+ export { unslugName, setAttributeIfEmpty, hashRandomValue, hashValue, };
@@ -0,0 +1,10 @@
1
+ const cssDurationToMilliseconds = (duration, defaultValue = 1000) => {
2
+ if (duration.includes('s')) {
3
+ return Number(duration.replace('s', '')) * 1000;
4
+ }
5
+ if (duration.includes('ms')) {
6
+ return Number(duration.replace('s', ''));
7
+ }
8
+ return defaultValue;
9
+ };
10
+ export { cssDurationToMilliseconds, };
@@ -1,29 +1,22 @@
1
1
  .fixed {
2
-
3
2
  position: fixed;
4
3
  }
5
4
 
6
5
  .absolute {
7
-
8
6
  position: absolute;
9
7
  }
10
8
 
11
9
  .border {
12
-
13
10
  border-width: 1px;
14
11
  }
15
12
 
16
13
  .shadow {
17
-
18
14
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
19
-
20
15
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
21
-
22
16
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
23
17
  }
24
18
 
25
19
  :host {
26
-
27
20
  display: table-row;
28
21
  }
29
22
 
@@ -1,4 +1,7 @@
1
- import { Host, h } from '@stencil/core';
1
+ import { Host, h } from "@stencil/core";
2
+ /**
3
+ * @slot default - Put `mds-table-cell` element/s.
4
+ */
2
5
  export class MdsTableRow {
3
6
  constructor() {
4
7
  this.interactive = undefined;
@@ -13,6 +13,10 @@ const buttonToneVariantDictionary = [
13
13
  'ghost',
14
14
  'quiet',
15
15
  ];
16
+ const buttonTargetDictionary = [
17
+ 'blank',
18
+ 'self',
19
+ ];
16
20
  const buttonSizeDictionary = [
17
21
  'sm',
18
22
  'md',
@@ -23,4 +27,4 @@ const buttonIconPositionDictionary = [
23
27
  'left',
24
28
  'right',
25
29
  ];
26
- export { buttonSizeDictionary, buttonToneVariantDictionary, buttonVariantDictionary, buttonIconPositionDictionary, };
30
+ export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonVariantDictionary, };
@@ -1,5 +1,5 @@
1
- import jsonIconsDictionary from '../fixtures/icons.json';
2
- import jsonMggIconsDictionary from '../fixtures/iconsauce.json';
1
+ import jsonIconsDictionary from "../fixtures/icons.json";
2
+ import jsonMggIconsDictionary from "../fixtures/iconsauce.json";
3
3
  const iconsDictionary = jsonIconsDictionary;
4
4
  const mggIconsDictionary = jsonMggIconsDictionary;
5
5
  export { iconsDictionary, mggIconsDictionary, };
@@ -53,6 +53,14 @@ const toneVariantDictionary = [
53
53
  'ghost',
54
54
  'quiet',
55
55
  ];
56
+ const toneActionVariantDictionary = [
57
+ 'primary',
58
+ 'secondary',
59
+ 'tertiary',
60
+ 'strong',
61
+ 'weak',
62
+ 'quiet',
63
+ ];
56
64
  const toneSimpleVariantDictionary = [
57
65
  'strong',
58
66
  'weak',
@@ -62,4 +70,4 @@ const toneMinimalVariantDictionary = [
62
70
  'strong',
63
71
  'weak',
64
72
  ];
65
- export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };
73
+ export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };
@@ -1,5 +1,8 @@
1
- /* MdsTableRow custom elements */
2
- export { MdsTableRow as MdsTableRow } from '../types/components/mds-table-row/mds-table-row';
1
+ /**
2
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
3
+ * if the path needs to be customized.
4
+ */
5
+ export declare const getAssetPath: (path: string) => string;
3
6
 
4
7
  /**
5
8
  * Used to manually set the base path where assets can be found.
@@ -28,4 +31,3 @@ export interface SetPlatformOptions {
28
31
  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
29
32
  }
30
33
  export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
31
- export * from '../types/components';
@@ -1,2 +1 @@
1
- export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
2
- export { MdsTableRow, defineCustomElement as defineCustomElementMdsTableRow } from './mds-table-row.js';
1
+ export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
2
2
 
3
3
  const mdsTableRowCss = ".fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{display:table-row}:host([interactive]:hover){--mds-table-cell-background:var(--mds-table-cell-background-hover, rgb(var(--tone-neutral)))}";
4
4
 
5
- const MdsTableRow$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
5
+ const MdsTableRow$1 = /*@__PURE__*/ proxyCustomElement(class MdsTableRow extends HTMLElement {
6
6
  constructor() {
7
7
  super();
8
8
  this.__registerHost();