@maggioli-design-system/mds-accordion-timer-item 3.6.0 → 3.6.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-502e5cdb.js → index-3f08e534.js} +60 -23
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mds-accordion-timer-item.cjs.entry.js +38 -38
- package/dist/cjs/mds-accordion-timer-item.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/common/aria.js +18 -18
- package/dist/collection/common/keyboard-manager.js +38 -38
- package/dist/collection/common/unit.js +7 -7
- package/dist/collection/components/mds-accordion-timer-item/mds-accordion-timer-item.css +3 -0
- package/dist/collection/components/mds-accordion-timer-item/mds-accordion-timer-item.js +205 -205
- package/dist/collection/components/mds-accordion-timer-item/test/mds-accordion-timer-item.e2e.js +7 -7
- package/dist/collection/components/mds-accordion-timer-item/test/mds-accordion-timer-item.stories.js +27 -27
- package/dist/collection/dictionary/autocomplete.js +56 -56
- package/dist/collection/dictionary/button.js +19 -19
- package/dist/collection/dictionary/color.js +14 -14
- package/dist/collection/dictionary/floating-ui.js +14 -14
- package/dist/collection/dictionary/input.js +31 -15
- package/dist/collection/dictionary/loading.js +2 -2
- package/dist/collection/dictionary/typography.js +46 -46
- package/dist/collection/dictionary/variant.js +54 -54
- package/dist/collection/fixtures/cities.js +107 -107
- package/dist/components/mds-accordion-timer-item.d.ts +2 -2
- package/dist/components/mds-accordion-timer-item.js +57 -57
- package/dist/documentation.json +2 -2
- package/dist/esm/{index-b42ce9a6.js → index-f19cd1cd.js} +60 -23
- package/dist/esm/loader.js +2 -2
- package/dist/esm/mds-accordion-timer-item.entry.js +38 -38
- package/dist/esm/mds-accordion-timer-item.js +3 -3
- package/dist/esm-es5/index-f19cd1cd.js +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mds-accordion-timer-item.entry.js +1 -1
- package/dist/esm-es5/mds-accordion-timer-item.js +1 -1
- package/dist/mds-accordion-timer-item/mds-accordion-timer-item.esm.js +1 -1
- package/dist/mds-accordion-timer-item/mds-accordion-timer-item.js +15 -15
- package/dist/mds-accordion-timer-item/p-1e2aba26.entry.js +1 -0
- package/dist/mds-accordion-timer-item/p-45efdd90.system.entry.js +1 -0
- package/dist/mds-accordion-timer-item/p-477aad5a.system.js +2 -0
- package/dist/mds-accordion-timer-item/{p-72dfa3ca.system.js → p-651ad9a5.system.js} +1 -1
- package/dist/mds-accordion-timer-item/p-a71f8ebc.js +2 -0
- package/dist/stats.json +30 -30
- package/dist/types/common/keyboard-manager.d.ts +9 -9
- package/dist/types/components/mds-accordion-timer-item/mds-accordion-timer-item.d.ts +40 -40
- package/dist/types/components/mds-accordion-timer-item/meta/event-detail.d.ts +2 -2
- package/dist/types/components/mds-accordion-timer-item/test/mds-accordion-timer-item.stories.d.ts +36 -36
- package/dist/types/dictionary/input.d.ts +2 -1
- package/dist/types/interface/input-value.d.ts +1 -1
- package/dist/types/stencil-public-runtime.d.ts +8 -0
- package/documentation.json +14 -4
- package/package.json +5 -5
- package/src/components/mds-accordion-timer-item/mds-accordion-timer-item.css +5 -5
- package/src/dictionary/input.ts +18 -0
- package/src/fixtures/icons.json +3 -0
- package/src/fixtures/iconsauce.json +3 -0
- package/www/build/mds-accordion-timer-item.esm.js +1 -1
- package/www/build/mds-accordion-timer-item.js +15 -15
- package/www/build/p-1e2aba26.entry.js +1 -0
- package/www/build/p-45efdd90.system.entry.js +1 -0
- package/www/build/p-477aad5a.system.js +2 -0
- package/www/build/{p-72dfa3ca.system.js → p-651ad9a5.system.js} +1 -1
- package/www/build/p-a71f8ebc.js +2 -0
- package/dist/esm-es5/index-b42ce9a6.js +0 -1
- package/dist/mds-accordion-timer-item/p-5e9bd30c.system.js +0 -2
- package/dist/mds-accordion-timer-item/p-d212a845.entry.js +0 -1
- package/dist/mds-accordion-timer-item/p-e969bc33.js +0 -2
- package/dist/mds-accordion-timer-item/p-f866a0a2.system.entry.js +0 -1
- package/www/build/p-5e9bd30c.system.js +0 -2
- package/www/build/p-d212a845.entry.js +0 -1
- package/www/build/p-e969bc33.js +0 -2
- package/www/build/p-f866a0a2.system.entry.js +0 -1
|
@@ -49,6 +49,13 @@ const uniqueTime = (key, measureText) => {
|
|
|
49
49
|
}
|
|
50
50
|
};
|
|
51
51
|
const HYDRATED_CSS = '{visibility:hidden}[hydrated]{visibility:inherit}';
|
|
52
|
+
/**
|
|
53
|
+
* Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
|
|
54
|
+
*
|
|
55
|
+
* Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
|
|
56
|
+
* support as of Stencil v4.
|
|
57
|
+
*/
|
|
58
|
+
const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';
|
|
52
59
|
/**
|
|
53
60
|
* Default style mode id
|
|
54
61
|
*/
|
|
@@ -286,6 +293,10 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
|
|
|
286
293
|
}
|
|
287
294
|
styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
|
|
288
295
|
}
|
|
296
|
+
// Add styles for `slot-fb` elements if we're using slots outside the Shadow DOM
|
|
297
|
+
if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
|
|
298
|
+
styleElm.innerHTML += SLOT_FB_CSS;
|
|
299
|
+
}
|
|
289
300
|
if (appliedStyles) {
|
|
290
301
|
appliedStyles.add(scopeId);
|
|
291
302
|
}
|
|
@@ -417,7 +428,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
|
|
|
417
428
|
elm[memberName] = newValue;
|
|
418
429
|
}
|
|
419
430
|
}
|
|
420
|
-
catch (e) {
|
|
431
|
+
catch (e) {
|
|
432
|
+
/**
|
|
433
|
+
* in case someone tries to set a read-only property, e.g. "namespaceURI", we just ignore it
|
|
434
|
+
*/
|
|
435
|
+
}
|
|
421
436
|
}
|
|
422
437
|
if (newValue == null || newValue === false) {
|
|
423
438
|
if (newValue !== false || elm.getAttribute(memberName) === '') {
|
|
@@ -436,6 +451,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
|
|
|
436
451
|
}
|
|
437
452
|
};
|
|
438
453
|
const parseClassListRegex = /\s/;
|
|
454
|
+
/**
|
|
455
|
+
* Parsed a string of classnames into an array
|
|
456
|
+
* @param value className string, e.g. "foo bar baz"
|
|
457
|
+
* @returns list of classes, e.g. ["foo", "bar", "baz"]
|
|
458
|
+
*/
|
|
439
459
|
const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
|
|
440
460
|
const CAPTURE_EVENT_SUFFIX = 'Capture';
|
|
441
461
|
const CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + '$');
|
|
@@ -1117,10 +1137,10 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
|
|
|
1117
1137
|
*/
|
|
1118
1138
|
const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
1119
1139
|
var _a;
|
|
1140
|
+
const prototype = Cstr.prototype;
|
|
1120
1141
|
if (cmpMeta.$members$) {
|
|
1121
1142
|
// It's better to have a const than two Object.entries()
|
|
1122
1143
|
const members = Object.entries(cmpMeta.$members$);
|
|
1123
|
-
const prototype = Cstr.prototype;
|
|
1124
1144
|
members.map(([memberName, [memberFlags]]) => {
|
|
1125
1145
|
if ((memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
|
|
1126
1146
|
((flags & 2 /* PROXY_FLAGS.proxyState */) && memberFlags & 32 /* MEMBER_FLAGS.State */))) {
|
|
@@ -1143,6 +1163,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
1143
1163
|
const attrNameToPropName = new Map();
|
|
1144
1164
|
prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
|
|
1145
1165
|
plt.jmp(() => {
|
|
1166
|
+
var _a;
|
|
1146
1167
|
const propName = attrNameToPropName.get(attrName);
|
|
1147
1168
|
// In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
|
|
1148
1169
|
// in the case where an attribute was set inline.
|
|
@@ -1198,11 +1219,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
1198
1219
|
// 1. The instance is ready
|
|
1199
1220
|
// 2. The watchers are ready
|
|
1200
1221
|
// 3. The value has changed
|
|
1201
|
-
if (
|
|
1222
|
+
if (flags &&
|
|
1223
|
+
!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
|
|
1202
1224
|
flags & 128 /* HOST_FLAGS.isWatchReady */ &&
|
|
1203
1225
|
newValue !== oldValue) {
|
|
1204
1226
|
const instance = hostRef.$lazyInstance$ ;
|
|
1205
|
-
const entry = cmpMeta.$watchers$[attrName];
|
|
1227
|
+
const entry = (_a = cmpMeta.$watchers$) === null || _a === void 0 ? void 0 : _a[attrName];
|
|
1206
1228
|
entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
|
|
1207
1229
|
if (instance[callbackName] != null) {
|
|
1208
1230
|
instance[callbackName].call(instance, newValue, oldValue, attrName);
|
|
@@ -1224,10 +1246,11 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
1224
1246
|
...members
|
|
1225
1247
|
.filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
|
|
1226
1248
|
.map(([propName, m]) => {
|
|
1249
|
+
var _a;
|
|
1227
1250
|
const attrName = m[1] || propName;
|
|
1228
1251
|
attrNameToPropName.set(attrName, propName);
|
|
1229
1252
|
if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
|
|
1230
|
-
cmpMeta.$attrsToReflect
|
|
1253
|
+
(_a = cmpMeta.$attrsToReflect$) === null || _a === void 0 ? void 0 : _a.push([propName, attrName]);
|
|
1231
1254
|
}
|
|
1232
1255
|
return attrName;
|
|
1233
1256
|
}),
|
|
@@ -1385,12 +1408,13 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
1385
1408
|
const customElements = win.customElements;
|
|
1386
1409
|
const head = doc.head;
|
|
1387
1410
|
const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
|
|
1388
|
-
const
|
|
1411
|
+
const dataStyles = /*@__PURE__*/ doc.createElement('style');
|
|
1389
1412
|
const deferredConnectedCallbacks = [];
|
|
1390
1413
|
let appLoadFallback;
|
|
1391
1414
|
let isBootstrapping = true;
|
|
1392
1415
|
Object.assign(plt, options);
|
|
1393
1416
|
plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
|
|
1417
|
+
let hasSlotRelocation = false;
|
|
1394
1418
|
lazyBundles.map((lazyBundle) => {
|
|
1395
1419
|
lazyBundle[1].map((compactMeta) => {
|
|
1396
1420
|
const cmpMeta = {
|
|
@@ -1399,6 +1423,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
1399
1423
|
$members$: compactMeta[2],
|
|
1400
1424
|
$listeners$: compactMeta[3],
|
|
1401
1425
|
};
|
|
1426
|
+
// Check if we are using slots outside the shadow DOM in this component.
|
|
1427
|
+
// We'll use this information later to add styles for `slot-fb` elements
|
|
1428
|
+
if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
|
|
1429
|
+
hasSlotRelocation = true;
|
|
1430
|
+
}
|
|
1402
1431
|
{
|
|
1403
1432
|
cmpMeta.$members$ = compactMeta[2];
|
|
1404
1433
|
}
|
|
@@ -1452,15 +1481,23 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
1452
1481
|
}
|
|
1453
1482
|
});
|
|
1454
1483
|
});
|
|
1484
|
+
// Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
|
|
1485
|
+
if (hasSlotRelocation) {
|
|
1486
|
+
dataStyles.innerHTML += SLOT_FB_CSS;
|
|
1487
|
+
}
|
|
1488
|
+
// Add hydration styles
|
|
1455
1489
|
{
|
|
1456
|
-
|
|
1457
|
-
|
|
1490
|
+
dataStyles.innerHTML += cmpTags + HYDRATED_CSS;
|
|
1491
|
+
}
|
|
1492
|
+
// If we have styles, add them to the DOM
|
|
1493
|
+
if (dataStyles.innerHTML.length) {
|
|
1494
|
+
dataStyles.setAttribute('data-styles', '');
|
|
1495
|
+
head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
|
|
1458
1496
|
// Apply CSP nonce to the style tag if it exists
|
|
1459
1497
|
const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
|
|
1460
1498
|
if (nonce != null) {
|
|
1461
|
-
|
|
1499
|
+
dataStyles.setAttribute('nonce', nonce);
|
|
1462
1500
|
}
|
|
1463
|
-
head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
|
|
1464
1501
|
}
|
|
1465
1502
|
// Process deferred connectedCallbacks now all components have been registered
|
|
1466
1503
|
isBootstrapping = false;
|
|
@@ -1538,19 +1575,19 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
1538
1575
|
return module[exportName];
|
|
1539
1576
|
}
|
|
1540
1577
|
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1578
|
+
if (!hmrVersionId || !BUILD.hotModuleReplacement) {
|
|
1579
|
+
const processMod = importedModule => {
|
|
1580
|
+
cmpModules.set(bundleId, importedModule);
|
|
1581
|
+
return importedModule[exportName];
|
|
1582
|
+
}
|
|
1583
|
+
switch(bundleId) {
|
|
1584
|
+
|
|
1585
|
+
case 'mds-accordion-timer-item.cjs':
|
|
1586
|
+
return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
|
|
1587
|
+
/* webpackMode: "lazy" */
|
|
1588
|
+
'./mds-accordion-timer-item.cjs.entry.js')); }).then(processMod, consoleError);
|
|
1589
|
+
}
|
|
1552
1590
|
}
|
|
1553
|
-
}
|
|
1554
1591
|
return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
|
|
1555
1592
|
/* @vite-ignore */
|
|
1556
1593
|
/* webpackInclude: /\.entry\.js$/ */
|
|
@@ -1625,7 +1662,7 @@ const flush = () => {
|
|
|
1625
1662
|
}
|
|
1626
1663
|
}
|
|
1627
1664
|
};
|
|
1628
|
-
const nextTick =
|
|
1665
|
+
const nextTick = (cb) => promiseResolve().then(cb);
|
|
1629
1666
|
const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
|
|
1630
1667
|
|
|
1631
1668
|
exports.Host = Host;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -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-3f08e534.js');
|
|
6
6
|
|
|
7
7
|
const defineCustomElements = (win, options) => {
|
|
8
8
|
if (typeof window === 'undefined') return undefined;
|
|
@@ -2,47 +2,47 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-3f08e534.js');
|
|
6
6
|
|
|
7
|
-
const mdsAccordionTimerItemCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset)}50%{outline-offset:var(--magma-outline-blur-offset)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset)}50%{outline-offset:var(--magma-outline-blur-offset)}}@tailwind components; .focus-bounce{-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.focus-bounce--focused,.focus-bounce:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}.fixed{position:fixed}.absolute{position:absolute}.contents{display:contents}.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{--mds-accordion-timer-item-progress-bar-color:var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));--mds-accordion-timer-item-progress-bar-background:var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));--mds-accordion-timer-item-progress-bar-thickness:var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration, 500ms);padding-top:1rem;padding-bottom:1rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));display:grid;position:relative}.row{gap:1rem;display:-ms-flexbox;display:flex}.accordion{display:grid}.progress-bar{--mds-progress-color:var(--mds-accordion-timer-item-progress-bar-color);--mds-progress-background:var(--mds-accordion-timer-item-progress-bar-background);--mds-progress-thickness:var(--mds-accordion-timer-item-progress-bar-thickness);-ms-flex-negative:0;flex-shrink:0}.action{border-radius:0.75rem;background-color:transparent;border:0;cursor:pointer;padding:0;text-align:left}:host([selected]) .action{cursor:auto}.contents{gap:1rem;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);display:grid;grid-template-rows:0fr;min-height:0;opacity:0;overflow:hidden;padding-top:0;-webkit-transition-duration:var(--mds-accordion-timer-item-duration);transition-duration:var(--mds-accordion-timer-item-duration);-webkit-transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding, -ms-grid-rows opacity padding}.contents-expander{min-height:0}:host([selected]) .contents{padding-top:1rem;opacity:1;grid-template-rows:1fr}";
|
|
7
|
+
const mdsAccordionTimerItemCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset)}50%{outline-offset:var(--magma-outline-blur-offset)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset)}50%{outline-offset:var(--magma-outline-blur-offset)}}@tailwind components; .focus-bounce{-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.focus-bounce--focused,.focus-bounce:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}.fixed{position:fixed}.absolute{position:absolute}.contents{display:contents}.border{border-width:1px}.text{font-size:1rem}.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{--mds-accordion-timer-item-progress-bar-color:var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));--mds-accordion-timer-item-progress-bar-background:var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));--mds-accordion-timer-item-progress-bar-thickness:var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration, 500ms);padding-top:1rem;padding-bottom:1rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));display:grid;position:relative}.row{gap:1rem;display:-ms-flexbox;display:flex}.accordion{display:grid}.progress-bar{--mds-progress-color:var(--mds-accordion-timer-item-progress-bar-color);--mds-progress-background:var(--mds-accordion-timer-item-progress-bar-background);--mds-progress-thickness:var(--mds-accordion-timer-item-progress-bar-thickness);-ms-flex-negative:0;flex-shrink:0}.action{border-radius:0.75rem;background-color:transparent;border:0;cursor:pointer;padding:0;text-align:left}:host([selected]) .action{cursor:auto}.contents{gap:1rem;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);display:grid;grid-template-rows:0fr;min-height:0;opacity:0;overflow:hidden;padding-top:0;-webkit-transition-duration:var(--mds-accordion-timer-item-duration);transition-duration:var(--mds-accordion-timer-item-duration);-webkit-transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding, -ms-grid-rows opacity padding}.contents-expander{min-height:0}:host([selected]) .contents{padding-top:1rem;opacity:1;grid-template-rows:1fr}";
|
|
8
8
|
|
|
9
9
|
const MdsAccordionTimerItem = class {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
10
|
+
constructor(hostRef) {
|
|
11
|
+
index.registerInstance(this, hostRef);
|
|
12
|
+
this.clickSelectEvent = index.createEvent(this, "mdsAccordionTimerItemClickSelect", 7);
|
|
13
|
+
this.selectedMouseEnterEvent = index.createEvent(this, "mdsAccordionTimerItemMouseEnterSelect", 7);
|
|
14
|
+
this.selectedMouseLeaveEvent = index.createEvent(this, "mdsAccordionTimerItemMouseLeaveSelect", 7);
|
|
15
|
+
/**
|
|
16
|
+
* Event throws only once the element is active,
|
|
17
|
+
* to fire it again it need to be a different item
|
|
18
|
+
*/
|
|
19
|
+
this.toggle = () => {
|
|
20
|
+
this.selected = !this.selected;
|
|
21
|
+
this.progress = 0;
|
|
22
|
+
if (this.selected) {
|
|
23
|
+
this.clickSelectEvent.emit({ selected: this.selected, uuid: this.uuid });
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
this.mouseEnter = () => {
|
|
27
|
+
if (this.selected) {
|
|
28
|
+
this.selectedMouseEnterEvent.emit({ selected: this.selected, uuid: this.uuid });
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
this.mouseLeave = () => {
|
|
32
|
+
if (this.selected) {
|
|
33
|
+
this.selectedMouseLeaveEvent.emit({ selected: this.selected, uuid: this.uuid });
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
this.typography = 'h5';
|
|
37
|
+
this.selected = false;
|
|
38
|
+
this.description = undefined;
|
|
39
|
+
this.progress = 0;
|
|
40
|
+
this.uuid = 0;
|
|
41
|
+
}
|
|
42
|
+
render() {
|
|
43
|
+
var _a;
|
|
44
|
+
return (index.h(index.Host, { onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, index.h("div", { class: "row" }, index.h("mds-progress", { class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical" }), index.h("div", { class: "accordion" }, index.h("button", { "aria-controls": "contents", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, index.h("mds-text", { typography: this.typography }, this.description)), index.h("div", { class: "contents", id: "contents" }, index.h("div", { class: "contents-expander" }, index.h("slot", null)))))));
|
|
45
|
+
}
|
|
46
46
|
};
|
|
47
47
|
MdsAccordionTimerItem.style = mdsAccordionTimerItemCss;
|
|
48
48
|
|
|
@@ -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-3f08e534.js');
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
|
-
Stencil Client Patch Browser v4.
|
|
8
|
+
Stencil Client Patch Browser v4.8.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-accordion-timer-item.cjs.js', document.baseURI).href));
|
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
const hash = (s) => {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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
7
|
};
|
|
8
8
|
const randomInt = (max) => Math.floor(Math.random() * max);
|
|
9
9
|
const unslugName = (name) => {
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
var _a, _b, _c;
|
|
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;
|
|
12
12
|
};
|
|
13
13
|
const setAttributeIfEmpty = (element, attribute, value) => {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
14
|
+
var _a;
|
|
15
|
+
if (element.hasAttribute(attribute)) {
|
|
16
|
+
return (_a = element.getAttribute(attribute)) !== null && _a !== void 0 ? _a : '';
|
|
17
|
+
}
|
|
18
|
+
element.setAttribute(attribute, value);
|
|
19
|
+
return value;
|
|
20
20
|
};
|
|
21
21
|
const hashValue = (value) => `${value}-${hash(value)}`;
|
|
22
22
|
const hashRandomValue = (value) => {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
const randomValue = randomInt(1000000);
|
|
24
|
+
if (value) {
|
|
25
|
+
return `${value}-${hash(randomValue.toString())}`;
|
|
26
|
+
}
|
|
27
|
+
return hash(randomValue.toString());
|
|
28
28
|
};
|
|
29
29
|
export { unslugName, setAttributeIfEmpty, hashRandomValue, hashValue, };
|
|
@@ -1,40 +1,40 @@
|
|
|
1
1
|
export class KeyboardManager {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
2
|
+
constructor() {
|
|
3
|
+
this.elements = [];
|
|
4
|
+
this.handleClickBehaviorDispatchEvent = (event) => {
|
|
5
|
+
if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
|
|
6
|
+
event.target.click();
|
|
7
|
+
}
|
|
8
|
+
};
|
|
9
|
+
this.handleEscapeBehaviorDispatchEvent = (event) => {
|
|
10
|
+
if (event.code === 'Escape' && this.escapeCallback) {
|
|
11
|
+
this.escapeCallback();
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
this.addElement = (el, name = 'element') => {
|
|
15
|
+
this.elements[name] = el;
|
|
16
|
+
};
|
|
17
|
+
this.attachClickBehavior = (name = 'element') => {
|
|
18
|
+
if (this.elements[name]) {
|
|
19
|
+
this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
this.detachClickBehavior = (name = 'element') => {
|
|
23
|
+
if (this.elements[name]) {
|
|
24
|
+
this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
this.attachEscapeBehavior = (callBack) => {
|
|
28
|
+
this.escapeCallback = callBack;
|
|
29
|
+
if (window !== undefined) {
|
|
30
|
+
window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
this.detachEscapeBehavior = () => {
|
|
34
|
+
this.escapeCallback = () => { return; };
|
|
35
|
+
if (window !== undefined) {
|
|
36
|
+
window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
40
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
const cssDurationToMilliseconds = (duration, defaultValue = 1000) => {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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
9
|
};
|
|
10
10
|
export { cssDurationToMilliseconds, };
|
|
@@ -42,6 +42,9 @@
|
|
|
42
42
|
.border {
|
|
43
43
|
border-width: 1px;
|
|
44
44
|
}
|
|
45
|
+
.text {
|
|
46
|
+
font-size: 1rem;
|
|
47
|
+
}
|
|
45
48
|
.shadow {
|
|
46
49
|
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
47
50
|
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|