@maggioli-design-system/mds-tab 2.0.0 → 2.0.2

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 (51) hide show
  1. package/dist/cjs/{index-a9e961fa.js → index-928add6f.js} +195 -155
  2. package/dist/cjs/loader.cjs.js +2 -2
  3. package/dist/cjs/mds-tab.cjs.entry.js +1 -1
  4. package/dist/cjs/mds-tab.cjs.js +2 -2
  5. package/dist/collection/collection-manifest.json +2 -2
  6. package/dist/collection/common/aria.js +19 -0
  7. package/dist/collection/components/mds-tab/mds-tab.js +21 -16
  8. package/dist/collection/components/mds-tab/test/mds-tab.stories.js +1 -4
  9. package/dist/collection/dictionary/typography.js +16 -5
  10. package/dist/components/index.d.ts +1 -5
  11. package/dist/components/index.js +1 -0
  12. package/dist/esm/{index-ff5db4ec.js → index-18b5f438.js} +195 -155
  13. package/dist/esm/loader.js +2 -2
  14. package/dist/esm/mds-tab.entry.js +1 -1
  15. package/dist/esm/mds-tab.js +2 -2
  16. package/dist/esm/polyfills/css-shim.js +1 -1
  17. package/dist/esm-es5/index-18b5f438.js +2 -0
  18. package/dist/esm-es5/loader.js +1 -1
  19. package/dist/esm-es5/mds-tab.entry.js +1 -1
  20. package/dist/esm-es5/mds-tab.js +1 -1
  21. package/dist/mds-tab/mds-tab.esm.js +1 -1
  22. package/dist/mds-tab/mds-tab.js +2 -1
  23. package/dist/mds-tab/p-11ef3340.js +2 -0
  24. package/dist/mds-tab/p-2555fd7b.system.js +2 -0
  25. package/{www/build/p-67a450ed.entry.js → dist/mds-tab/p-35f2d92f.entry.js} +1 -1
  26. package/dist/mds-tab/{p-737c458e.system.entry.js → p-3625579e.system.entry.js} +1 -1
  27. package/dist/mds-tab/{p-6ecdd4c9.system.js → p-7a6f973a.system.js} +1 -1
  28. package/dist/stats.json +31 -29
  29. package/dist/types/common/aria.d.ts +4 -0
  30. package/dist/types/dictionary/typography.d.ts +5 -3
  31. package/dist/types/stencil-public-runtime.d.ts +20 -4
  32. package/dist/types/types/typography.d.ts +6 -4
  33. package/loader/package.json +1 -0
  34. package/package.json +4 -4
  35. package/src/common/aria.ts +27 -0
  36. package/src/components/mds-tab/.gitlab-ci.yml +2 -2
  37. package/src/dictionary/typography.ts +21 -6
  38. package/src/fixtures/icons.json +2 -2
  39. package/src/types/typography.ts +15 -4
  40. package/www/build/mds-tab.esm.js +1 -1
  41. package/www/build/mds-tab.js +2 -1
  42. package/www/build/p-11ef3340.js +2 -0
  43. package/www/build/p-2555fd7b.system.js +2 -0
  44. package/{dist/mds-tab/p-67a450ed.entry.js → www/build/p-35f2d92f.entry.js} +1 -1
  45. package/www/build/{p-737c458e.system.entry.js → p-3625579e.system.entry.js} +1 -1
  46. package/www/build/{p-6ecdd4c9.system.js → p-7a6f973a.system.js} +1 -1
  47. package/dist/esm-es5/index-ff5db4ec.js +0 -2
  48. package/dist/mds-tab/p-9e2e7a3e.js +0 -2
  49. package/dist/mds-tab/p-ac3bfea2.system.js +0 -2
  50. package/www/build/p-9e2e7a3e.js +0 -2
  51. package/www/build/p-ac3bfea2.system.js +0 -2
@@ -22,61 +22,18 @@ function _interopNamespace(e) {
22
22
 
23
23
  const NAMESPACE = 'mds-tab';
24
24
 
25
+ /**
26
+ * Virtual DOM patching algorithm based on Snabbdom by
27
+ * Simon Friis Vindum (@paldepind)
28
+ * Licensed under the MIT License
29
+ * https://github.com/snabbdom/snabbdom/blob/master/LICENSE
30
+ *
31
+ * Modified for Stencil's renderer and slot projection
32
+ */
25
33
  let scopeId;
26
34
  let hostTagName;
27
35
  let isSvgMode = false;
28
36
  let queuePending = false;
29
- const win = typeof window !== 'undefined' ? window : {};
30
- const doc = win.document || { head: {} };
31
- const plt = {
32
- $flags$: 0,
33
- $resourcesUrl$: '',
34
- jmp: (h) => h(),
35
- raf: (h) => requestAnimationFrame(h),
36
- ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
37
- rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
38
- ce: (eventName, opts) => new CustomEvent(eventName, opts),
39
- };
40
- const promiseResolve = (v) => Promise.resolve(v);
41
- const supportsConstructibleStylesheets = /*@__PURE__*/ (() => {
42
- try {
43
- new CSSStyleSheet();
44
- return typeof new CSSStyleSheet().replace === 'function';
45
- }
46
- catch (e) { }
47
- return false;
48
- })()
49
- ;
50
- const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
51
- if (listeners) {
52
- listeners.map(([flags, name, method]) => {
53
- const target = elm;
54
- const handler = hostListenerProxy(hostRef, method);
55
- const opts = hostListenerOpts(flags);
56
- plt.ael(target, name, handler, opts);
57
- (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
58
- });
59
- }
60
- };
61
- const hostListenerProxy = (hostRef, methodName) => (ev) => {
62
- try {
63
- {
64
- if (hostRef.$flags$ & 256 /* isListenReady */) {
65
- // instance is ready, let's call it's member method for this event
66
- hostRef.$lazyInstance$[methodName](ev);
67
- }
68
- else {
69
- (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
70
- }
71
- }
72
- }
73
- catch (e) {
74
- consoleError(e);
75
- }
76
- };
77
- // prettier-ignore
78
- const hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
79
- const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
80
37
  const createTime = (fnName, tagName = '') => {
81
38
  {
82
39
  return () => {
@@ -91,71 +48,7 @@ const uniqueTime = (key, measureText) => {
91
48
  };
92
49
  }
93
50
  };
94
- const rootAppliedStyles = new WeakMap();
95
- const registerStyle = (scopeId, cssText, allowCS) => {
96
- let style = styles.get(scopeId);
97
- if (supportsConstructibleStylesheets && allowCS) {
98
- style = (style || new CSSStyleSheet());
99
- style.replace(cssText);
100
- }
101
- else {
102
- style = cssText;
103
- }
104
- styles.set(scopeId, style);
105
- };
106
- const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
107
- let scopeId = getScopeId(cmpMeta);
108
- const style = styles.get(scopeId);
109
- // if an element is NOT connected then getRootNode() will return the wrong root node
110
- // so the fallback is to always use the document for the root node in those cases
111
- styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
112
- if (style) {
113
- if (typeof style === 'string') {
114
- styleContainerNode = styleContainerNode.head || styleContainerNode;
115
- let appliedStyles = rootAppliedStyles.get(styleContainerNode);
116
- let styleElm;
117
- if (!appliedStyles) {
118
- rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
119
- }
120
- if (!appliedStyles.has(scopeId)) {
121
- {
122
- {
123
- styleElm = doc.createElement('style');
124
- styleElm.innerHTML = style;
125
- }
126
- styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
127
- }
128
- if (appliedStyles) {
129
- appliedStyles.add(scopeId);
130
- }
131
- }
132
- }
133
- else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
134
- styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
135
- }
136
- }
137
- return scopeId;
138
- };
139
- const attachStyles = (hostRef) => {
140
- const cmpMeta = hostRef.$cmpMeta$;
141
- const elm = hostRef.$hostElement$;
142
- const flags = cmpMeta.$flags$;
143
- const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
144
- const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
145
- if (flags & 10 /* needsScopedEncapsulation */) {
146
- // only required when we're NOT using native shadow dom (slot)
147
- // or this browser doesn't support native shadow dom
148
- // and this host element was NOT created with SSR
149
- // let's pick out the inner content for slot projection
150
- // create a node to represent where the original
151
- // content was first placed, which is useful later on
152
- // DOM WRITE!!
153
- elm['s-sc'] = scopeId;
154
- elm.classList.add(scopeId + '-h');
155
- }
156
- endAttachStyles();
157
- };
158
- const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
51
+ const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
159
52
  /**
160
53
  * Default style mode id
161
54
  */
@@ -231,6 +124,89 @@ const newVNode = (tag, text) => {
231
124
  };
232
125
  const Host = {};
233
126
  const isHost = (node) => node && node.$tag$ === Host;
127
+ const getElement = (ref) => (getHostRef(ref).$hostElement$ );
128
+ /**
129
+ * Helper function to create & dispatch a custom Event on a provided target
130
+ * @param elm the target of the Event
131
+ * @param name the name to give the custom Event
132
+ * @param opts options for configuring a custom Event
133
+ * @returns the custom Event
134
+ */
135
+ const emitEvent = (elm, name, opts) => {
136
+ const ev = plt.ce(name, opts);
137
+ elm.dispatchEvent(ev);
138
+ return ev;
139
+ };
140
+ const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
141
+ const registerStyle = (scopeId, cssText, allowCS) => {
142
+ let style = styles.get(scopeId);
143
+ if (supportsConstructableStylesheets && allowCS) {
144
+ style = (style || new CSSStyleSheet());
145
+ if (typeof style === 'string') {
146
+ style = cssText;
147
+ }
148
+ else {
149
+ style.replaceSync(cssText);
150
+ }
151
+ }
152
+ else {
153
+ style = cssText;
154
+ }
155
+ styles.set(scopeId, style);
156
+ };
157
+ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
158
+ let scopeId = getScopeId(cmpMeta);
159
+ const style = styles.get(scopeId);
160
+ // if an element is NOT connected then getRootNode() will return the wrong root node
161
+ // so the fallback is to always use the document for the root node in those cases
162
+ styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc;
163
+ if (style) {
164
+ if (typeof style === 'string') {
165
+ styleContainerNode = styleContainerNode.head || styleContainerNode;
166
+ let appliedStyles = rootAppliedStyles.get(styleContainerNode);
167
+ let styleElm;
168
+ if (!appliedStyles) {
169
+ rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
170
+ }
171
+ if (!appliedStyles.has(scopeId)) {
172
+ {
173
+ {
174
+ styleElm = doc.createElement('style');
175
+ styleElm.innerHTML = style;
176
+ }
177
+ styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
178
+ }
179
+ if (appliedStyles) {
180
+ appliedStyles.add(scopeId);
181
+ }
182
+ }
183
+ }
184
+ else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
185
+ styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
186
+ }
187
+ }
188
+ return scopeId;
189
+ };
190
+ const attachStyles = (hostRef) => {
191
+ const cmpMeta = hostRef.$cmpMeta$;
192
+ const elm = hostRef.$hostElement$;
193
+ const flags = cmpMeta.$flags$;
194
+ const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
195
+ const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
196
+ if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
197
+ // only required when we're NOT using native shadow dom (slot)
198
+ // or this browser doesn't support native shadow dom
199
+ // and this host element was NOT created with SSR
200
+ // let's pick out the inner content for slot projection
201
+ // create a node to represent where the original
202
+ // content was first placed, which is useful later on
203
+ // DOM WRITE!!
204
+ elm['s-sc'] = scopeId;
205
+ elm.classList.add(scopeId + '-h');
206
+ }
207
+ endAttachStyles();
208
+ };
209
+ const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
234
210
  /**
235
211
  * Production setAccessor() function based on Preact by
236
212
  * Jason Miller (@developit)
@@ -271,7 +247,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
271
247
  }
272
248
  }
273
249
  }
274
- else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
250
+ else if ((!isProp || flags & 4 /* VNODE_FLAGS.isHost */ || isSvg) && !isComplex) {
275
251
  newValue = newValue === true ? '' : newValue;
276
252
  {
277
253
  elm.setAttribute(memberName, newValue);
@@ -284,7 +260,7 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
284
260
  // if the element passed in is a shadow root, which is a document fragment
285
261
  // then we want to be adding attrs/props to the shadow root's "host" element
286
262
  // if it's not a shadow root, then we add attrs/props to the same element
287
- const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host
263
+ const elm = newVnode.$elm$.nodeType === 11 /* NODE_TYPE.DocumentFragment */ && newVnode.$elm$.host
288
264
  ? newVnode.$elm$.host
289
265
  : newVnode.$elm$;
290
266
  const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
@@ -294,6 +270,16 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
294
270
  setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
295
271
  }
296
272
  };
273
+ /**
274
+ * Create a DOM Node corresponding to one of the children of a given VNode.
275
+ *
276
+ * @param oldParentVNode the parent VNode from the previous render
277
+ * @param newParentVNode the parent VNode from the current render
278
+ * @param childIndex the index of the VNode, in the _new_ parent node's
279
+ * children, for which we will create a new DOM node
280
+ * @param parentElm the parent DOM node which our new node will be a child of
281
+ * @returns the newly created node
282
+ */
297
283
  const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
298
284
  // tslint:disable-next-line: prefer-const
299
285
  const newVNode = newParentVNode.$children$[childIndex];
@@ -342,12 +328,19 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
342
328
  }
343
329
  }
344
330
  };
331
+ /**
332
+ * Handle reconciling an outdated VNode with a new one which corresponds to
333
+ * it. This function handles flushing updates to the DOM and reconciling the
334
+ * children of the two nodes (if any).
335
+ *
336
+ * @param oldVNode an old VNode whose DOM element and children we want to update
337
+ * @param newVNode a new VNode representing an updated version of the old one
338
+ */
345
339
  const patch = (oldVNode, newVNode) => {
346
340
  const elm = (newVNode.$elm$ = oldVNode.$elm$);
347
341
  const newChildren = newVNode.$children$;
348
342
  const tag = newVNode.$tag$;
349
343
  {
350
- // element node
351
344
  {
352
345
  if (tag === 'slot')
353
346
  ;
@@ -371,7 +364,7 @@ const renderVdom = (hostRef, renderFnResults) => {
371
364
  const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
372
365
  hostTagName = hostElm.tagName;
373
366
  rootVnode.$tag$ = null;
374
- rootVnode.$flags$ |= 4 /* isHost */;
367
+ rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
375
368
  hostRef.$vnode$ = rootVnode;
376
369
  rootVnode.$elm$ = oldVNode.$elm$ = (hostElm.shadowRoot || hostElm );
377
370
  {
@@ -380,27 +373,14 @@ const renderVdom = (hostRef, renderFnResults) => {
380
373
  // synchronous patch
381
374
  patch(oldVNode, rootVnode);
382
375
  };
383
- const getElement = (ref) => (getHostRef(ref).$hostElement$ );
384
- /**
385
- * Helper function to create & dispatch a custom Event on a provided target
386
- * @param elm the target of the Event
387
- * @param name the name to give the custom Event
388
- * @param opts options for configuring a custom Event
389
- * @returns the custom Event
390
- */
391
- const emitEvent = (elm, name, opts) => {
392
- const ev = plt.ce(name, opts);
393
- elm.dispatchEvent(ev);
394
- return ev;
395
- };
396
376
  const attachToAncestor = (hostRef, ancestorComponent) => {
397
377
  if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
398
378
  ancestorComponent['s-p'].push(new Promise((r) => (hostRef.$onRenderResolve$ = r)));
399
379
  }
400
380
  };
401
381
  const scheduleUpdate = (hostRef, isInitialLoad) => {
402
- if (hostRef.$flags$ & 4 /* isWaitingForChildren */) {
403
- hostRef.$flags$ |= 512 /* needsRerender */;
382
+ if (hostRef.$flags$ & 4 /* HOST_FLAGS.isWaitingForChildren */) {
383
+ hostRef.$flags$ |= 512 /* HOST_FLAGS.needsRerender */;
404
384
  return;
405
385
  }
406
386
  attachToAncestor(hostRef, hostRef.$ancestorComponent$);
@@ -416,7 +396,7 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
416
396
  let promise;
417
397
  if (isInitialLoad) {
418
398
  {
419
- hostRef.$flags$ |= 256 /* isListenReady */;
399
+ hostRef.$flags$ |= 256 /* HOST_FLAGS.isListenReady */;
420
400
  if (hostRef.$queuedListeners$) {
421
401
  hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
422
402
  hostRef.$queuedListeners$ = null;
@@ -459,7 +439,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
459
439
  }
460
440
  else {
461
441
  Promise.all(childrenPromises).then(postUpdate);
462
- hostRef.$flags$ |= 4 /* isWaitingForChildren */;
442
+ hostRef.$flags$ |= 4 /* HOST_FLAGS.isWaitingForChildren */;
463
443
  childrenPromises.length = 0;
464
444
  }
465
445
  }
@@ -468,7 +448,7 @@ const callRender = (hostRef, instance, elm) => {
468
448
  try {
469
449
  instance = instance.render() ;
470
450
  {
471
- hostRef.$flags$ |= 2 /* hasRendered */;
451
+ hostRef.$flags$ |= 2 /* HOST_FLAGS.hasRendered */;
472
452
  }
473
453
  {
474
454
  {
@@ -491,8 +471,8 @@ const postUpdateComponent = (hostRef) => {
491
471
  const elm = hostRef.$hostElement$;
492
472
  const endPostUpdate = createTime('postUpdate', tagName);
493
473
  const ancestorComponent = hostRef.$ancestorComponent$;
494
- if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
495
- hostRef.$flags$ |= 64 /* hasLoadedComponent */;
474
+ if (!(hostRef.$flags$ & 64 /* HOST_FLAGS.hasLoadedComponent */)) {
475
+ hostRef.$flags$ |= 64 /* HOST_FLAGS.hasLoadedComponent */;
496
476
  {
497
477
  // DOM WRITE!
498
478
  addHydratedFlag(elm);
@@ -515,10 +495,10 @@ const postUpdateComponent = (hostRef) => {
515
495
  hostRef.$onRenderResolve$();
516
496
  hostRef.$onRenderResolve$ = undefined;
517
497
  }
518
- if (hostRef.$flags$ & 512 /* needsRerender */) {
498
+ if (hostRef.$flags$ & 512 /* HOST_FLAGS.needsRerender */) {
519
499
  nextTick(() => scheduleUpdate(hostRef, false));
520
500
  }
521
- hostRef.$flags$ &= ~(4 /* isWaitingForChildren */ | 512 /* needsRerender */);
501
+ hostRef.$flags$ &= ~(4 /* HOST_FLAGS.isWaitingForChildren */ | 512 /* HOST_FLAGS.needsRerender */);
522
502
  }
523
503
  // ( •_•)
524
504
  // ( •_•)>⌐■-■
@@ -548,6 +528,16 @@ const then = (promise, thenFn) => {
548
528
  };
549
529
  const addHydratedFlag = (elm) => elm.classList.add('hydrated')
550
530
  ;
531
+ /**
532
+ * Attach a series of runtime constructs to a compiled Stencil component
533
+ * constructor, including getters and setters for the `@Prop` and `@State`
534
+ * decorators, callbacks for when attributes change, and so on.
535
+ *
536
+ * @param Cstr the constructor for a component that we need to process
537
+ * @param cmpMeta metadata collected previously about the component
538
+ * @param flags a number used to store a series of bit flags
539
+ * @returns a reference to the same constructor passed in (but now mutated)
540
+ */
551
541
  const proxyComponent = (Cstr, cmpMeta, flags) => {
552
542
  if (cmpMeta.$members$) {
553
543
  // It's better to have a const than two Object.entries()
@@ -559,10 +549,10 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
559
549
  };
560
550
  const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
561
551
  // initializeComponent
562
- if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
552
+ if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
563
553
  {
564
554
  // we haven't initialized this element yet
565
- hostRef.$flags$ |= 32 /* hasInitializedComponent */;
555
+ hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
566
556
  // lazy loaded components
567
557
  // request the component's implementation to be
568
558
  // wired up with the host element
@@ -582,7 +572,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
582
572
  // but let's keep track of when we start and stop
583
573
  // so that the getters/setters don't incorrectly step on data
584
574
  {
585
- hostRef.$flags$ |= 8 /* isConstructingInstance */;
575
+ hostRef.$flags$ |= 8 /* HOST_FLAGS.isConstructingInstance */;
586
576
  }
587
577
  // construct the lazy-loaded component implementation
588
578
  // passing the hostRef is very important during
@@ -595,7 +585,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
595
585
  consoleError(e);
596
586
  }
597
587
  {
598
- hostRef.$flags$ &= ~8 /* isConstructingInstance */;
588
+ hostRef.$flags$ &= ~8 /* HOST_FLAGS.isConstructingInstance */;
599
589
  }
600
590
  endNewInstance();
601
591
  }
@@ -605,7 +595,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
605
595
  const scopeId = getScopeId(cmpMeta);
606
596
  if (!styles.has(scopeId)) {
607
597
  const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
608
- registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
598
+ registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */));
609
599
  endRegisterStyles();
610
600
  }
611
601
  }
@@ -627,13 +617,13 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
627
617
  }
628
618
  };
629
619
  const connectedCallback = (elm) => {
630
- if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
620
+ if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
631
621
  const hostRef = getHostRef(elm);
632
622
  const cmpMeta = hostRef.$cmpMeta$;
633
623
  const endConnected = createTime('connectedCallback', cmpMeta.$tagName$);
634
- if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
624
+ if (!(hostRef.$flags$ & 1 /* HOST_FLAGS.hasConnected */)) {
635
625
  // first time this component has connected
636
- hostRef.$flags$ |= 1 /* hasConnected */;
626
+ hostRef.$flags$ |= 1 /* HOST_FLAGS.hasConnected */;
637
627
  {
638
628
  // find the first ancestor component (if there is one) and register
639
629
  // this component as one of the actively loading child components for its ancestor
@@ -663,7 +653,7 @@ const connectedCallback = (elm) => {
663
653
  }
664
654
  };
665
655
  const disconnectedCallback = (elm) => {
666
- if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
656
+ if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
667
657
  const hostRef = getHostRef(elm);
668
658
  {
669
659
  if (hostRef.$rmListeners$) {
@@ -708,7 +698,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
708
698
  super(self);
709
699
  self = this;
710
700
  registerHost(self, cmpMeta);
711
- if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
701
+ if (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
712
702
  // this component is using shadow dom
713
703
  // and this browser supports shadow dom
714
704
  // add the read-only property "shadowRoot" to the host element
@@ -765,7 +755,36 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
765
755
  // Fallback appLoad event
766
756
  endBootstrap();
767
757
  };
768
- const hostRefs = new WeakMap();
758
+ const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
759
+ if (listeners) {
760
+ listeners.map(([flags, name, method]) => {
761
+ const target = elm;
762
+ const handler = hostListenerProxy(hostRef, method);
763
+ const opts = hostListenerOpts(flags);
764
+ plt.ael(target, name, handler, opts);
765
+ (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
766
+ });
767
+ }
768
+ };
769
+ const hostListenerProxy = (hostRef, methodName) => (ev) => {
770
+ try {
771
+ {
772
+ if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) {
773
+ // instance is ready, let's call it's member method for this event
774
+ hostRef.$lazyInstance$[methodName](ev);
775
+ }
776
+ else {
777
+ (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
778
+ }
779
+ }
780
+ }
781
+ catch (e) {
782
+ consoleError(e);
783
+ }
784
+ };
785
+ // prettier-ignore
786
+ const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
787
+ const hostRefs = /*@__PURE__*/ new WeakMap();
769
788
  const getHostRef = (ref) => hostRefs.get(ref);
770
789
  const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
771
790
  const registerHost = (elm, cmpMeta) => {
@@ -807,14 +826,35 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
807
826
  return importedModule[exportName];
808
827
  }, consoleError);
809
828
  };
810
- const styles = new Map();
829
+ const styles = /*@__PURE__*/ new Map();
830
+ const win = typeof window !== 'undefined' ? window : {};
831
+ const doc = win.document || { head: {} };
832
+ const plt = {
833
+ $flags$: 0,
834
+ $resourcesUrl$: '',
835
+ jmp: (h) => h(),
836
+ raf: (h) => requestAnimationFrame(h),
837
+ ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
838
+ rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
839
+ ce: (eventName, opts) => new CustomEvent(eventName, opts),
840
+ };
841
+ const promiseResolve = (v) => Promise.resolve(v);
842
+ const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
843
+ try {
844
+ new CSSStyleSheet();
845
+ return typeof new CSSStyleSheet().replaceSync === 'function';
846
+ }
847
+ catch (e) { }
848
+ return false;
849
+ })()
850
+ ;
811
851
  const queueDomReads = [];
812
852
  const queueDomWrites = [];
813
853
  const queueTask = (queue, write) => (cb) => {
814
854
  queue.push(cb);
815
855
  if (!queuePending) {
816
856
  queuePending = true;
817
- if (write && plt.$flags$ & 4 /* queueSync */) {
857
+ if (write && plt.$flags$ & 4 /* PLATFORM_FLAGS.queueSync */) {
818
858
  nextTick(flush);
819
859
  }
820
860
  else {
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-a9e961fa.js');
5
+ const index = require('./index-928add6f.js');
6
6
 
7
7
  /*
8
- Stencil Client Patch Esm v2.16.1 | MIT Licensed | https://stenciljs.com
8
+ Stencil Client Patch Esm v2.19.3 | MIT Licensed | https://stenciljs.com
9
9
  */
10
10
  const patchEsm = () => {
11
11
  return index.promiseResolve();
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-a9e961fa.js');
5
+ const index = require('./index-928add6f.js');
6
6
 
7
7
  const mdsTabCss = ".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{--background:rgb(var(--tone-neutral-09));--button-background-hover:transparent;--button-background-selected:rgb(var(--tone-neutral));--button-background:transparent;--button-color-hover:rgb(var(--tone-neutral-02));--button-color-selected:rgb(var(--tone-neutral-02));--button-color:rgb(var(--tone-neutral-04));--button-radius:0.5rem;--button-shadow-selected:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--radius:1rem;display:-ms-flexbox;display:flex;gap:0.5rem;overflow:auto;padding:0.5rem;background-color:var(--background);border-radius:var(--radius);-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none}:host::-webkit-scrollbar{display:none}@media (max-width: 767px){.mobile\\:flex-1{-ms-flex:1 1 0%;flex:1 1 0%}}";
8
8
 
@@ -1,9 +1,9 @@
1
1
  'use strict';
2
2
 
3
- const index = require('./index-a9e961fa.js');
3
+ const index = require('./index-928add6f.js');
4
4
 
5
5
  /*
6
- Stencil Client Patch Browser v2.16.1 | MIT Licensed | https://stenciljs.com
6
+ Stencil Client Patch Browser v2.19.3 | MIT Licensed | https://stenciljs.com
7
7
  */
8
8
  const patchBrowser = () => {
9
9
  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-tab.cjs.js', document.baseURI).href));
@@ -4,8 +4,8 @@
4
4
  ],
5
5
  "compiler": {
6
6
  "name": "@stencil/core",
7
- "version": "2.16.1",
8
- "typescriptVersion": "4.5.4"
7
+ "version": "2.19.3",
8
+ "typescriptVersion": "4.7.4"
9
9
  },
10
10
  "collections": [],
11
11
  "bundles": []
@@ -0,0 +1,19 @@
1
+ const hash = (s) => {
2
+ let i, h;
3
+ for (i = 0, h = 0; i < s.length; i++) {
4
+ h = Math.imul(31, h) + s.charCodeAt(i) | 0;
5
+ }
6
+ return h.toString();
7
+ };
8
+ const unslugName = (name) => {
9
+ return name.split('/').slice(-1).pop().replace(/-/g, ' ');
10
+ };
11
+ const setAttributeIfEmpty = (element, attribute, value) => {
12
+ if (element.hasAttribute(attribute)) {
13
+ return element.getAttribute(attribute);
14
+ }
15
+ element.setAttribute(attribute, value);
16
+ return value;
17
+ };
18
+ const hashValue = (value) => `${value}-${hash(value)}`;
19
+ export { unslugName, setAttributeIfEmpty, hashValue, };
@@ -1,4 +1,4 @@
1
- import { Component, Host, h, Listen, Element } from '@stencil/core';
1
+ import { Host, h } from '@stencil/core';
2
2
  export class MdsTab {
3
3
  constructor() {
4
4
  this.queryItems = () => this.element.querySelectorAll('mds-tab-item');
@@ -26,23 +26,28 @@ export class MdsTab {
26
26
  });
27
27
  }
28
28
  render() {
29
- return (h(Host, null,
30
- h("slot", { name: "tab-item" })));
29
+ return (h(Host, null, h("slot", { name: "tab-item" })));
31
30
  }
32
31
  static get is() { return "mds-tab"; }
33
32
  static get encapsulation() { return "shadow"; }
34
- static get originalStyleUrls() { return {
35
- "$": ["mds-tab.css"]
36
- }; }
37
- static get styleUrls() { return {
38
- "$": ["mds-tab.css"]
39
- }; }
33
+ static get originalStyleUrls() {
34
+ return {
35
+ "$": ["mds-tab.css"]
36
+ };
37
+ }
38
+ static get styleUrls() {
39
+ return {
40
+ "$": ["mds-tab.css"]
41
+ };
42
+ }
40
43
  static get elementRef() { return "element"; }
41
- static get listeners() { return [{
42
- "name": "selectedEvent",
43
- "method": "changeEventHandler",
44
- "target": undefined,
45
- "capture": false,
46
- "passive": false
47
- }]; }
44
+ static get listeners() {
45
+ return [{
46
+ "name": "selectedEvent",
47
+ "method": "changeEventHandler",
48
+ "target": undefined,
49
+ "capture": false,
50
+ "passive": false
51
+ }];
52
+ }
48
53
  }
@@ -2,8 +2,5 @@ import { h } from '@stencil/core';
2
2
  export default {
3
3
  title: 'UI / Tab',
4
4
  };
5
- const Template = args => h("mds-tab", Object.assign({}, args),
6
- h("mds-tab-item", { selected: true, class: "mobile:flex-1" }, "First Blood"),
7
- h("mds-tab-item", { class: "mobile:flex-1" }, "Second Impact"),
8
- h("mds-tab-item", { class: "mobile:flex-1" }, "The Third Reich"));
5
+ const Template = args => h("mds-tab", Object.assign({}, args), h("mds-tab-item", { selected: true, class: "mobile:flex-1" }, "First Blood"), h("mds-tab-item", { class: "mobile:flex-1" }, "Second Impact"), h("mds-tab-item", { class: "mobile:flex-1" }, "The Third Reich"));
9
6
  export const Default = Template.bind({});