@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.
- package/dist/cjs/{index-a9e961fa.js → index-928add6f.js} +195 -155
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mds-tab.cjs.entry.js +1 -1
- package/dist/cjs/mds-tab.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/common/aria.js +19 -0
- package/dist/collection/components/mds-tab/mds-tab.js +21 -16
- package/dist/collection/components/mds-tab/test/mds-tab.stories.js +1 -4
- package/dist/collection/dictionary/typography.js +16 -5
- package/dist/components/index.d.ts +1 -5
- package/dist/components/index.js +1 -0
- package/dist/esm/{index-ff5db4ec.js → index-18b5f438.js} +195 -155
- package/dist/esm/loader.js +2 -2
- package/dist/esm/mds-tab.entry.js +1 -1
- package/dist/esm/mds-tab.js +2 -2
- package/dist/esm/polyfills/css-shim.js +1 -1
- package/dist/esm-es5/index-18b5f438.js +2 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mds-tab.entry.js +1 -1
- package/dist/esm-es5/mds-tab.js +1 -1
- package/dist/mds-tab/mds-tab.esm.js +1 -1
- package/dist/mds-tab/mds-tab.js +2 -1
- package/dist/mds-tab/p-11ef3340.js +2 -0
- package/dist/mds-tab/p-2555fd7b.system.js +2 -0
- package/{www/build/p-67a450ed.entry.js → dist/mds-tab/p-35f2d92f.entry.js} +1 -1
- package/dist/mds-tab/{p-737c458e.system.entry.js → p-3625579e.system.entry.js} +1 -1
- package/dist/mds-tab/{p-6ecdd4c9.system.js → p-7a6f973a.system.js} +1 -1
- package/dist/stats.json +31 -29
- package/dist/types/common/aria.d.ts +4 -0
- package/dist/types/dictionary/typography.d.ts +5 -3
- package/dist/types/stencil-public-runtime.d.ts +20 -4
- package/dist/types/types/typography.d.ts +6 -4
- package/loader/package.json +1 -0
- package/package.json +4 -4
- package/src/common/aria.ts +27 -0
- package/src/components/mds-tab/.gitlab-ci.yml +2 -2
- package/src/dictionary/typography.ts +21 -6
- package/src/fixtures/icons.json +2 -2
- package/src/types/typography.ts +15 -4
- package/www/build/mds-tab.esm.js +1 -1
- package/www/build/mds-tab.js +2 -1
- package/www/build/p-11ef3340.js +2 -0
- package/www/build/p-2555fd7b.system.js +2 -0
- package/{dist/mds-tab/p-67a450ed.entry.js → www/build/p-35f2d92f.entry.js} +1 -1
- package/www/build/{p-737c458e.system.entry.js → p-3625579e.system.entry.js} +1 -1
- package/www/build/{p-6ecdd4c9.system.js → p-7a6f973a.system.js} +1 -1
- package/dist/esm-es5/index-ff5db4ec.js +0 -2
- package/dist/mds-tab/p-9e2e7a3e.js +0 -2
- package/dist/mds-tab/p-ac3bfea2.system.js +0 -2
- package/www/build/p-9e2e7a3e.js +0 -2
- 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
|
|
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
|
|
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 {
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-928add6f.js');
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
|
-
Stencil Client Patch Esm v2.
|
|
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-
|
|
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
|
|
package/dist/cjs/mds-tab.cjs.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const index = require('./index-
|
|
3
|
+
const index = require('./index-928add6f.js');
|
|
4
4
|
|
|
5
5
|
/*
|
|
6
|
-
Stencil Client Patch Browser v2.
|
|
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));
|
|
@@ -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 {
|
|
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() {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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() {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
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({});
|