@maggioli-design-system/mds-accordion-timer 3.10.4 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-dba9169e.js → index-0853bd56.js} +14 -3
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mds-accordion-timer.cjs.entry.js +18 -14
- package/dist/cjs/mds-accordion-timer.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/common/aria.js +17 -1
- package/dist/collection/common/device.js +6 -0
- package/dist/collection/common/keyboard-manager.js +2 -2
- package/dist/collection/common/locale.js +17 -5
- package/dist/collection/components/mds-accordion-timer/mds-accordion-timer.css +0 -219
- package/dist/collection/components/mds-accordion-timer/mds-accordion-timer.js +16 -12
- package/dist/collection/dictionary/button.js +1 -0
- package/dist/collection/dictionary/file-extensions.js +114 -56
- package/dist/collection/dictionary/text.js +60 -1
- package/dist/collection/dictionary/variant.js +10 -1
- package/dist/collection/type/variant-file-format.js +0 -34
- package/dist/components/mds-accordion-timer.js +17 -13
- package/dist/documentation.json +3 -3
- package/dist/esm/{index-20fd282d.js → index-af411208.js} +14 -3
- package/dist/esm/loader.js +2 -2
- package/dist/esm/mds-accordion-timer.entry.js +18 -14
- package/dist/esm/mds-accordion-timer.js +3 -3
- package/dist/esm-es5/index-af411208.js +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mds-accordion-timer.entry.js +1 -1
- package/dist/esm-es5/mds-accordion-timer.js +1 -1
- package/dist/mds-accordion-timer/mds-accordion-timer.esm.js +1 -1
- package/dist/mds-accordion-timer/mds-accordion-timer.js +1 -1
- package/dist/mds-accordion-timer/{p-dd7ad5d9.system.js → p-25856ee2.system.js} +1 -1
- package/dist/mds-accordion-timer/p-4eb3ec08.system.entry.js +1 -0
- package/dist/mds-accordion-timer/p-62c48ff3.system.js +2 -0
- package/dist/mds-accordion-timer/p-86e0d6b4.entry.js +1 -0
- package/dist/mds-accordion-timer/p-8dd37a13.js +2 -0
- package/dist/stats.json +35 -35
- package/dist/types/common/aria.d.ts +3 -1
- package/dist/types/common/date.d.ts +1 -1
- package/dist/types/common/device.d.ts +2 -0
- package/dist/types/common/file.d.ts +3 -4
- package/dist/types/common/locale.d.ts +3 -1
- package/dist/types/dictionary/file-extensions.d.ts +2 -1
- package/dist/types/dictionary/text.d.ts +3 -1
- package/dist/types/dictionary/variant.d.ts +2 -1
- package/dist/types/stencil-public-runtime.d.ts +6 -0
- package/dist/types/type/autocomplete.d.ts +1 -1
- package/dist/types/type/button.d.ts +1 -1
- package/dist/types/type/header-bar.d.ts +2 -0
- package/dist/types/type/input.d.ts +3 -0
- package/dist/types/type/text.d.ts +2 -0
- package/dist/types/type/variant-file-format.d.ts +4 -4
- package/dist/types/type/variant.d.ts +2 -1
- package/documentation.json +39 -34
- package/package.json +5 -5
- package/readme.md +12 -1
- package/src/common/aria.ts +22 -2
- package/src/common/device.ts +9 -0
- package/src/common/file.ts +2 -3
- package/src/common/keyboard-manager.ts +2 -2
- package/src/common/locale.ts +20 -6
- package/src/common/unit.ts +1 -1
- package/src/components/mds-accordion-timer/.gitlab-ci.yml +5 -10
- package/src/components/mds-accordion-timer/mds-accordion-timer.tsx +15 -11
- package/src/dictionary/button.ts +1 -0
- package/src/dictionary/file-extensions.ts +118 -57
- package/src/dictionary/text.ts +64 -0
- package/src/dictionary/variant.ts +11 -0
- package/src/fixtures/icons.json +15 -2
- package/src/fixtures/iconsauce.json +7 -0
- package/src/meta/file-format/locale.el.json +39 -0
- package/src/meta/file-format/locale.en.json +39 -0
- package/src/meta/file-format/locale.es.json +39 -0
- package/src/meta/file-format/locale.it.json +39 -0
- package/src/tailwind/components.css +1 -1
- package/src/type/autocomplete.ts +0 -1
- package/src/type/button.ts +1 -0
- package/src/type/header-bar.ts +11 -0
- package/src/type/input.ts +4 -0
- package/src/type/text.ts +59 -0
- package/src/type/variant-file-format.ts +20 -37
- package/src/type/variant.ts +9 -1
- package/www/build/mds-accordion-timer.esm.js +1 -1
- package/www/build/mds-accordion-timer.js +1 -1
- package/www/build/{p-dd7ad5d9.system.js → p-25856ee2.system.js} +1 -1
- package/www/build/p-4eb3ec08.system.entry.js +1 -0
- package/www/build/p-62c48ff3.system.js +2 -0
- package/www/build/p-86e0d6b4.entry.js +1 -0
- package/www/build/p-8dd37a13.js +2 -0
- package/dist/collection/type/language.js +0 -1
- package/dist/esm-es5/index-20fd282d.js +0 -1
- package/dist/mds-accordion-timer/p-6d230e24.js +0 -2
- package/dist/mds-accordion-timer/p-9d12b7bb.entry.js +0 -1
- package/dist/mds-accordion-timer/p-b63ea901.system.entry.js +0 -1
- package/dist/mds-accordion-timer/p-fe7bbbcf.system.js +0 -2
- package/dist/types/interface/input-value.d.ts +0 -4
- package/dist/types/type/language.d.ts +0 -2
- package/src/interface/input-value.ts +0 -5
- package/src/type/language.ts +0 -8
- package/www/build/p-6d230e24.js +0 -2
- package/www/build/p-9d12b7bb.entry.js +0 -1
- package/www/build/p-b63ea901.system.entry.js +0 -1
- package/www/build/p-fe7bbbcf.system.js +0 -2
- /package/dist/collection/{interface/input-value.js → type/header-bar.js} +0 -0
|
@@ -24,7 +24,7 @@ const NAMESPACE = 'mds-accordion-timer';
|
|
|
24
24
|
const BUILD = /* mds-accordion-timer */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: false, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: false, vdomFunctional: false, vdomKey: true, vdomListener: false, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: false, vdomText: false, vdomXlink: false, watchCallback: true };
|
|
25
25
|
|
|
26
26
|
/*
|
|
27
|
-
Stencil Client Platform v4.
|
|
27
|
+
Stencil Client Platform v4.22.2 | MIT Licensed | https://stenciljs.com
|
|
28
28
|
*/
|
|
29
29
|
var __defProp = Object.defineProperty;
|
|
30
30
|
var __export = (target, all) => {
|
|
@@ -375,10 +375,21 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
|
|
|
375
375
|
if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
|
|
376
376
|
if (styleContainerNode.nodeName === "HEAD") {
|
|
377
377
|
const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
|
|
378
|
-
const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling :
|
|
378
|
+
const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
|
|
379
379
|
styleContainerNode.insertBefore(styleElm, referenceNode2);
|
|
380
380
|
} else if ("host" in styleContainerNode) {
|
|
381
|
-
|
|
381
|
+
if (supportsConstructableStylesheets) {
|
|
382
|
+
const stylesheet = new CSSStyleSheet();
|
|
383
|
+
stylesheet.replaceSync(style);
|
|
384
|
+
styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
|
|
385
|
+
} else {
|
|
386
|
+
const existingStyleContainer = styleContainerNode.querySelector("style");
|
|
387
|
+
if (existingStyleContainer) {
|
|
388
|
+
existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML;
|
|
389
|
+
} else {
|
|
390
|
+
styleContainerNode.prepend(styleElm);
|
|
391
|
+
}
|
|
392
|
+
}
|
|
382
393
|
} else {
|
|
383
394
|
styleContainerNode.append(styleElm);
|
|
384
395
|
}
|
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-0853bd56.js');
|
|
6
6
|
const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
7
7
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-0853bd56.js');
|
|
6
6
|
|
|
7
|
-
const mdsAccordionTimerCss = "@tailwind utilities;\n\n/**\n * @prop --mds-accordion-timer-progress-bar-color: Sets the color of the progress bar when the mds-accordion-timer-item is selected\n * @prop --mds-accordion-timer-progress-bar-background: Sets the background-color of the progress bar when the mds-accordion-timer-item is selected\n * @prop --mds-accordion-timer-color: Sets the text color of the component mds-accordion-timer-item\n * @prop --mds-accordion-timer-progress-bar-thickness: Sets thickness of the progress bar of the mds-accordion-timer-item\n * @prop --mds-accordion-timer-duration: Sets the transition duration of open/close animation of the mds-accordion-timer-item\n */\n\n:host {\n\n --mds-accordion-timer-progress-bar-color: rgb(var(--tone-neutral-03));\n --mds-accordion-timer-progress-bar-background: rgb(var(--tone-neutral-08));\n --mds-accordion-timer-progress-bar-thickness: 0.25rem;\n --mds-accordion-timer-duration: 500ms;\n\n /* comment */\n display: block;\n}\n\n
|
|
7
|
+
const mdsAccordionTimerCss = "@tailwind utilities;\n\n/**\n * @prop --mds-accordion-timer-progress-bar-color: Sets the color of the progress bar when the mds-accordion-timer-item is selected\n * @prop --mds-accordion-timer-progress-bar-background: Sets the background-color of the progress bar when the mds-accordion-timer-item is selected\n * @prop --mds-accordion-timer-color: Sets the text color of the component mds-accordion-timer-item\n * @prop --mds-accordion-timer-progress-bar-thickness: Sets thickness of the progress bar of the mds-accordion-timer-item\n * @prop --mds-accordion-timer-duration: Sets the transition duration of open/close animation of the mds-accordion-timer-item\n */\n\n:host {\n\n --mds-accordion-timer-progress-bar-color: rgb(var(--tone-neutral-03));\n --mds-accordion-timer-progress-bar-background: rgb(var(--tone-neutral-08));\n --mds-accordion-timer-progress-bar-thickness: 0.25rem;\n --mds-accordion-timer-duration: 500ms;\n\n /* comment */\n display: block;\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 0s);\n\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 0s);\n\n }\n }\n}\n";
|
|
8
8
|
const MdsAccordionTimerStyle0 = mdsAccordionTimerCss;
|
|
9
9
|
|
|
10
10
|
const MdsAccordionTimer = class {
|
|
@@ -13,7 +13,9 @@ const MdsAccordionTimer = class {
|
|
|
13
13
|
this.changeEvent = index.createEvent(this, "mdsAccordionTimerChange", 7);
|
|
14
14
|
this.currentDuration = 0;
|
|
15
15
|
this.clearIntervals = () => {
|
|
16
|
-
window
|
|
16
|
+
if (typeof window !== 'undefined') {
|
|
17
|
+
window.clearInterval(this.timeChecker);
|
|
18
|
+
}
|
|
17
19
|
this.timeChecker = 0;
|
|
18
20
|
};
|
|
19
21
|
this.remainingTime = () => {
|
|
@@ -24,16 +26,18 @@ const MdsAccordionTimer = class {
|
|
|
24
26
|
return Math.abs(this.remainingTime() / this.currentDuration - 1);
|
|
25
27
|
};
|
|
26
28
|
this.addTimeListener = () => {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
this.selectedItem
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
29
|
+
if (typeof window !== 'undefined') {
|
|
30
|
+
this.timeChecker = window.setInterval(() => {
|
|
31
|
+
const progress = this.progress();
|
|
32
|
+
if (this.selectedItem !== undefined) {
|
|
33
|
+
this.selectedItem.progress = progress;
|
|
34
|
+
}
|
|
35
|
+
if (progress === 1) {
|
|
36
|
+
this.selectedItem.progress = 0;
|
|
37
|
+
this.startNext();
|
|
38
|
+
}
|
|
39
|
+
}, 100);
|
|
40
|
+
}
|
|
37
41
|
};
|
|
38
42
|
this.beginningTime = () => {
|
|
39
43
|
this.timeStarted = (new Date()).getTime();
|
|
@@ -138,7 +142,7 @@ const MdsAccordionTimer = class {
|
|
|
138
142
|
this.playTimer();
|
|
139
143
|
}
|
|
140
144
|
render() {
|
|
141
|
-
return (index.h(index.Host, { key: '
|
|
145
|
+
return (index.h(index.Host, { key: '9816683b4c8bacb97302685b1f1b45ff8ab1a209' }, index.h("slot", { key: 'b411a4cdbb6f133f871979df4eccd70433567b56' })));
|
|
142
146
|
}
|
|
143
147
|
get element() { return index.getElement(this); }
|
|
144
148
|
static get watchers() { return {
|
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-0853bd56.js');
|
|
6
6
|
const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
7
7
|
|
|
8
8
|
/*
|
|
9
|
-
Stencil Client Patch Browser v4.
|
|
9
|
+
Stencil Client Patch Browser v4.22.2 | MIT Licensed | https://stenciljs.com
|
|
10
10
|
*/
|
|
11
11
|
var patchBrowser = () => {
|
|
12
12
|
const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-accordion-timer.cjs.js', document.baseURI).href));
|
|
@@ -18,6 +18,22 @@ const setAttributeIfEmpty = (element, attribute, value) => {
|
|
|
18
18
|
element.setAttribute(attribute, value);
|
|
19
19
|
return value;
|
|
20
20
|
};
|
|
21
|
+
const removeAttributesIf = (element, attribute, valueCheck = 'true', cleanAttributes) => {
|
|
22
|
+
if (ifAttribute(element, attribute, valueCheck)) {
|
|
23
|
+
const attributesList = Array.isArray(cleanAttributes) ? cleanAttributes : [cleanAttributes];
|
|
24
|
+
attributesList.forEach(attributeToRemove => {
|
|
25
|
+
element.removeAttribute(attributeToRemove);
|
|
26
|
+
});
|
|
27
|
+
return true;
|
|
28
|
+
}
|
|
29
|
+
return false;
|
|
30
|
+
};
|
|
31
|
+
const ifAttribute = (element, attribute, valueCheck = 'true') => {
|
|
32
|
+
if (element.hasAttribute(attribute) && element.getAttribute(attribute) === valueCheck) {
|
|
33
|
+
return true;
|
|
34
|
+
}
|
|
35
|
+
return false;
|
|
36
|
+
};
|
|
21
37
|
const hashValue = (value) => `${value}-${hash(value)}`;
|
|
22
38
|
const hashRandomValue = (value) => {
|
|
23
39
|
const randomValue = randomInt(1000000);
|
|
@@ -26,4 +42,4 @@ const hashRandomValue = (value) => {
|
|
|
26
42
|
}
|
|
27
43
|
return hash(randomValue.toString());
|
|
28
44
|
};
|
|
29
|
-
export {
|
|
45
|
+
export { hashRandomValue, hashValue, removeAttributesIf, setAttributeIfEmpty, ifAttribute, unslugName, };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
const isMobileDevice = () => {
|
|
2
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
3
|
+
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
|
|
4
|
+
return /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
|
|
5
|
+
};
|
|
6
|
+
export { isMobileDevice, };
|
|
@@ -31,13 +31,13 @@ export class KeyboardManager {
|
|
|
31
31
|
};
|
|
32
32
|
this.attachEscapeBehavior = (callback) => {
|
|
33
33
|
this.escapeCallback = callback;
|
|
34
|
-
if (window !== undefined) {
|
|
34
|
+
if (typeof window !== 'undefined') {
|
|
35
35
|
window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
|
|
36
36
|
}
|
|
37
37
|
};
|
|
38
38
|
this.detachEscapeBehavior = () => {
|
|
39
39
|
this.escapeCallback = () => { return; };
|
|
40
|
-
if (window !== undefined) {
|
|
40
|
+
if (typeof window !== 'undefined') {
|
|
41
41
|
window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
|
|
42
42
|
}
|
|
43
43
|
};
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { render } from "mustache";
|
|
2
2
|
export class Locale {
|
|
3
3
|
constructor(configData) {
|
|
4
4
|
this.rollbackLanguage = 'en';
|
|
5
5
|
this.set = (configData) => {
|
|
6
6
|
this.config = configData;
|
|
7
7
|
};
|
|
8
|
-
this.lang = (
|
|
9
|
-
this.
|
|
8
|
+
this.lang = (el) => {
|
|
9
|
+
this.element = el;
|
|
10
|
+
this.closestElement = this.element.closest('[lang]');
|
|
10
11
|
if (this.closestElement) {
|
|
11
12
|
if (this.closestElement.lang) {
|
|
12
13
|
this.language = this.closestElement.lang;
|
|
@@ -16,6 +17,18 @@ export class Locale {
|
|
|
16
17
|
this.language = this.rollbackLanguage;
|
|
17
18
|
return this.language;
|
|
18
19
|
};
|
|
20
|
+
this.update = (doc) => {
|
|
21
|
+
const context = doc !== null && doc !== void 0 ? doc : this.element.shadowRoot;
|
|
22
|
+
context && context.querySelectorAll('*').forEach(el => {
|
|
23
|
+
if (el.tagName.toLowerCase().startsWith('mds-')) {
|
|
24
|
+
// eslint-disable-next-line no-restricted-syntax
|
|
25
|
+
if (el && 'updateLang' in el) {
|
|
26
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
27
|
+
el.updateLang();
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
};
|
|
19
32
|
this.pluralize = (tag, context) => {
|
|
20
33
|
const languagePhrase = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
|
|
21
34
|
const phrases = [];
|
|
@@ -38,8 +51,7 @@ export class Locale {
|
|
|
38
51
|
}
|
|
39
52
|
}
|
|
40
53
|
}
|
|
41
|
-
|
|
42
|
-
return template(context);
|
|
54
|
+
return render(translatePhrase, context);
|
|
43
55
|
};
|
|
44
56
|
this.get = (tag, context) => {
|
|
45
57
|
if (context) {
|
|
@@ -19,225 +19,6 @@
|
|
|
19
19
|
display: block;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
.static{
|
|
23
|
-
|
|
24
|
-
position: static;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.fixed{
|
|
28
|
-
|
|
29
|
-
position: fixed;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.absolute{
|
|
33
|
-
|
|
34
|
-
position: absolute;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.border{
|
|
38
|
-
|
|
39
|
-
border-width: 1px;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.bg-label-amaranth-10{
|
|
43
|
-
|
|
44
|
-
--tw-bg-opacity: 1;
|
|
45
|
-
|
|
46
|
-
background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.bg-label-aqua-10{
|
|
50
|
-
|
|
51
|
-
--tw-bg-opacity: 1;
|
|
52
|
-
|
|
53
|
-
background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.bg-label-blue-10{
|
|
57
|
-
|
|
58
|
-
--tw-bg-opacity: 1;
|
|
59
|
-
|
|
60
|
-
background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.bg-label-green-10{
|
|
64
|
-
|
|
65
|
-
--tw-bg-opacity: 1;
|
|
66
|
-
|
|
67
|
-
background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.bg-label-lime-10{
|
|
71
|
-
|
|
72
|
-
--tw-bg-opacity: 1;
|
|
73
|
-
|
|
74
|
-
background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.bg-label-orange-10{
|
|
78
|
-
|
|
79
|
-
--tw-bg-opacity: 1;
|
|
80
|
-
|
|
81
|
-
background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.bg-label-orchid-10{
|
|
85
|
-
|
|
86
|
-
--tw-bg-opacity: 1;
|
|
87
|
-
|
|
88
|
-
background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.bg-label-violet-10{
|
|
92
|
-
|
|
93
|
-
--tw-bg-opacity: 1;
|
|
94
|
-
|
|
95
|
-
background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.bg-label-yellow-10{
|
|
99
|
-
|
|
100
|
-
--tw-bg-opacity: 1;
|
|
101
|
-
|
|
102
|
-
background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
.bg-tone-neutral-10{
|
|
106
|
-
|
|
107
|
-
--tw-bg-opacity: 1;
|
|
108
|
-
|
|
109
|
-
background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.fill-label-amaranth-04{
|
|
113
|
-
|
|
114
|
-
fill: rgb(var(--label-amaranth-04));
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.fill-label-aqua-04{
|
|
118
|
-
|
|
119
|
-
fill: rgb(var(--label-aqua-04));
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.fill-label-blue-04{
|
|
123
|
-
|
|
124
|
-
fill: rgb(var(--label-blue-04));
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.fill-label-green-04{
|
|
128
|
-
|
|
129
|
-
fill: rgb(var(--label-green-04));
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.fill-label-lime-04{
|
|
133
|
-
|
|
134
|
-
fill: rgb(var(--label-lime-04));
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
.fill-label-orange-04{
|
|
138
|
-
|
|
139
|
-
fill: rgb(var(--label-orange-04));
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.fill-label-orchid-04{
|
|
143
|
-
|
|
144
|
-
fill: rgb(var(--label-orchid-04));
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.fill-label-violet-04{
|
|
148
|
-
|
|
149
|
-
fill: rgb(var(--label-violet-04));
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.fill-label-yellow-04{
|
|
153
|
-
|
|
154
|
-
fill: rgb(var(--label-yellow-04));
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.fill-tone-neutral-04{
|
|
158
|
-
|
|
159
|
-
fill: rgb(var(--tone-neutral-04));
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
.text-label-amaranth-04{
|
|
163
|
-
|
|
164
|
-
--tw-text-opacity: 1;
|
|
165
|
-
|
|
166
|
-
color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
.text-label-aqua-04{
|
|
170
|
-
|
|
171
|
-
--tw-text-opacity: 1;
|
|
172
|
-
|
|
173
|
-
color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.text-label-blue-04{
|
|
177
|
-
|
|
178
|
-
--tw-text-opacity: 1;
|
|
179
|
-
|
|
180
|
-
color: rgb(var(--label-blue-04) / var(--tw-text-opacity));
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
.text-label-green-04{
|
|
184
|
-
|
|
185
|
-
--tw-text-opacity: 1;
|
|
186
|
-
|
|
187
|
-
color: rgb(var(--label-green-04) / var(--tw-text-opacity));
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
.text-label-lime-04{
|
|
191
|
-
|
|
192
|
-
--tw-text-opacity: 1;
|
|
193
|
-
|
|
194
|
-
color: rgb(var(--label-lime-04) / var(--tw-text-opacity));
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
.text-label-orange-04{
|
|
198
|
-
|
|
199
|
-
--tw-text-opacity: 1;
|
|
200
|
-
|
|
201
|
-
color: rgb(var(--label-orange-04) / var(--tw-text-opacity));
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
.text-label-orchid-04{
|
|
205
|
-
|
|
206
|
-
--tw-text-opacity: 1;
|
|
207
|
-
|
|
208
|
-
color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
.text-label-violet-04{
|
|
212
|
-
|
|
213
|
-
--tw-text-opacity: 1;
|
|
214
|
-
|
|
215
|
-
color: rgb(var(--label-violet-04) / var(--tw-text-opacity));
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
.text-label-yellow-04{
|
|
219
|
-
|
|
220
|
-
--tw-text-opacity: 1;
|
|
221
|
-
|
|
222
|
-
color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
.text-tone-neutral-04{
|
|
226
|
-
|
|
227
|
-
--tw-text-opacity: 1;
|
|
228
|
-
|
|
229
|
-
color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
.shadow{
|
|
233
|
-
|
|
234
|
-
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
235
|
-
|
|
236
|
-
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
|
237
|
-
|
|
238
|
-
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
239
|
-
}
|
|
240
|
-
|
|
241
22
|
@container style(--magma-pref-animation: reduce) {
|
|
242
23
|
:host {
|
|
243
24
|
|
|
@@ -6,7 +6,9 @@ export class MdsAccordionTimer {
|
|
|
6
6
|
constructor() {
|
|
7
7
|
this.currentDuration = 0;
|
|
8
8
|
this.clearIntervals = () => {
|
|
9
|
-
window
|
|
9
|
+
if (typeof window !== 'undefined') {
|
|
10
|
+
window.clearInterval(this.timeChecker);
|
|
11
|
+
}
|
|
10
12
|
this.timeChecker = 0;
|
|
11
13
|
};
|
|
12
14
|
this.remainingTime = () => {
|
|
@@ -17,16 +19,18 @@ export class MdsAccordionTimer {
|
|
|
17
19
|
return Math.abs(this.remainingTime() / this.currentDuration - 1);
|
|
18
20
|
};
|
|
19
21
|
this.addTimeListener = () => {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
this.selectedItem
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
22
|
+
if (typeof window !== 'undefined') {
|
|
23
|
+
this.timeChecker = window.setInterval(() => {
|
|
24
|
+
const progress = this.progress();
|
|
25
|
+
if (this.selectedItem !== undefined) {
|
|
26
|
+
this.selectedItem.progress = progress;
|
|
27
|
+
}
|
|
28
|
+
if (progress === 1) {
|
|
29
|
+
this.selectedItem.progress = 0;
|
|
30
|
+
this.startNext();
|
|
31
|
+
}
|
|
32
|
+
}, 100);
|
|
33
|
+
}
|
|
30
34
|
};
|
|
31
35
|
this.beginningTime = () => {
|
|
32
36
|
this.timeStarted = (new Date()).getTime();
|
|
@@ -131,7 +135,7 @@ export class MdsAccordionTimer {
|
|
|
131
135
|
this.playTimer();
|
|
132
136
|
}
|
|
133
137
|
render() {
|
|
134
|
-
return (h(Host, { key: '
|
|
138
|
+
return (h(Host, { key: '9816683b4c8bacb97302685b1f1b45ff8ab1a209' }, h("slot", { key: 'b411a4cdbb6f133f871979df4eccd70433567b56' })));
|
|
135
139
|
}
|
|
136
140
|
static get is() { return "mds-accordion-timer"; }
|
|
137
141
|
static get encapsulation() { return "shadow"; }
|