@maggioli-design-system/mds-accordion-timer-item 3.9.3 → 3.10.0
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/loader.cjs.js +1 -1
- package/dist/cjs/mds-accordion-timer-item.cjs.entry.js +5 -2
- package/dist/cjs/mds-accordion-timer-item.cjs.js +1 -1
- package/dist/collection/components/mds-accordion-timer-item/mds-accordion-timer-item.css +24 -6
- package/dist/collection/components/mds-accordion-timer-item/mds-accordion-timer-item.js +25 -2
- package/dist/collection/components/mds-accordion-timer-item/test/mds-accordion-timer-item.stories.js +4 -0
- package/dist/components/mds-accordion-timer-item.js +6 -2
- package/dist/documentation.json +61 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mds-accordion-timer-item.entry.js +5 -2
- package/dist/esm/mds-accordion-timer-item.js +1 -1
- 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/p-0ebb48b0.system.js +1 -1
- package/dist/mds-accordion-timer-item/p-90968b6b.entry.js +1 -0
- package/dist/mds-accordion-timer-item/p-b9499805.system.entry.js +1 -0
- package/dist/stats.json +98 -19
- package/dist/types/components/mds-accordion-timer-item/mds-accordion-timer-item.d.ts +10 -2
- package/dist/types/components/mds-accordion-timer-item/test/mds-accordion-timer-item.stories.d.ts +6 -0
- package/dist/types/components.d.ts +8 -0
- package/dist/types/type/language.d.ts +2 -1
- package/documentation.json +78 -6
- package/package.json +1 -1
- package/readme.md +32 -10
- package/src/components/mds-accordion-timer-item/mds-accordion-timer-item.css +26 -7
- package/src/components/mds-accordion-timer-item/mds-accordion-timer-item.tsx +18 -5
- package/src/components/mds-accordion-timer-item/readme.md +21 -10
- package/src/components/mds-accordion-timer-item/test/mds-accordion-timer-item.stories.tsx +4 -0
- package/src/components.d.ts +8 -0
- package/src/fixtures/icons.json +22 -1
- package/src/fixtures/iconsauce.json +19 -1
- package/src/type/language.ts +4 -0
- package/www/build/mds-accordion-timer-item.esm.js +1 -1
- package/www/build/p-0ebb48b0.system.js +1 -1
- package/www/build/p-90968b6b.entry.js +1 -0
- package/www/build/p-b9499805.system.entry.js +1 -0
- package/dist/mds-accordion-timer-item/p-e0fd9a7f.system.entry.js +0 -1
- package/dist/mds-accordion-timer-item/p-fb385548.entry.js +0 -1
- package/www/build/p-e0fd9a7f.system.entry.js +0 -1
- package/www/build/p-fb385548.entry.js +0 -1
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
return index.bootstrapLazy([["mds-accordion-timer-item.cjs",[[1,"mds-accordion-timer-item",{"typography":[1],"selected":[516],"description":[1],"progress":[2],"uuid":[2]}]]]], options);
|
|
11
|
+
return index.bootstrapLazy([["mds-accordion-timer-item.cjs",[[1,"mds-accordion-timer-item",{"typography":[1],"selected":[516],"description":[1],"duration":[514],"progress":[2],"uuid":[2]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -4,7 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-e153727a.js');
|
|
6
6
|
|
|
7
|
-
const
|
|
7
|
+
const miBaselineKeyboardArrowDown = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>`;
|
|
8
|
+
|
|
9
|
+
const mdsAccordionTimerItemCss = "@-webkit-keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n @keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n.focus-bounce {\n -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n animation-duration: var(--magma-outline-animation-duration, 1s);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-name: focus-bounce;\n animation-name: focus-bounce;\n -webkit-animation-play-state: paused;\n animation-play-state: paused;\n -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n outline: var(--magma-outline-blur);\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: ease-in-out;\n transition-timing-function: ease-in-out;\n }\n\n.focus-bounce--focused,\n .focus-bounce:focus-visible {\n\n --magma-outline-blur: var(--magma-outline-focus);\n\n -webkit-animation-play-state: running;\n\n animation-play-state: running;\n }\n\n.svg {\n display: -ms-flexbox;\n display: flex;\n}\n\n.svg svg {\n aspect-ratio: 1/1;\n height: 100%;\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-accordion-timer-item-progress-bar-color: Sets the color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-progress-bar-background: Sets the background-color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-color: Sets the text color of the component\n * @prop --mds-accordion-timer-item-progress-bar-thickness: Sets thickness of the progress bar\n * @prop --mds-accordion-timer-item-duration: Sets the transition duration of open/close animation\n */\n\n:host {\n\n --mds-accordion-timer-item-progress-bar-color: var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));\n --mds-accordion-timer-item-progress-bar-background: var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));\n --mds-accordion-timer-item-progress-bar-thickness: var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);\n --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 500ms);\n padding-top: 1rem;\n padding-bottom: 1rem;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));\n display: grid;\n position: relative;\n -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n transition-duration: var(--mds-accordion-timer-item-duration);\n}\n\n.row {\n gap: 1rem;\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.accordion {\n display: grid;\n}\n\n.progress-bar {\n\n --mds-progress-color: var(--mds-accordion-timer-item-progress-bar-color);\n --mds-progress-background: var(--mds-accordion-timer-item-progress-bar-background);\n --mds-progress-thickness: var(--mds-accordion-timer-item-progress-bar-thickness);\n\n -ms-flex-negative: 0;\n\n flex-shrink: 0;\n}\n\n.action {\n gap: 1rem;\n border-radius: 0.75rem;\n\n background-color: transparent;\n border: 0;\n color: inherit;\n cursor: pointer;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding: 0;\n text-align: left;\n}\n\n:host( [selected] ) .action {\n cursor: auto;\n}\n\n.content {\n gap: 1rem;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n grid-template-rows: 0fr;\n min-height: 0;\n opacity: 0;\n overflow: hidden;\n padding-top: 0;\n -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n transition-duration: var(--mds-accordion-timer-item-duration);\n -webkit-transition-property: grid-template-rows opacity padding;\n transition-property: grid-template-rows opacity padding;\n transition-property: grid-template-rows opacity padding, -ms-grid-rows opacity padding;\n}\n\n.content-expander {\n min-height: 0;\n}\n\n.icon {\n -webkit-transition-property: -webkit-transform;\n transition-property: -webkit-transform;\n transition-property: transform;\n transition-property: transform, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n fill: currentcolor;\n -webkit-transform: rotate(180deg);\n transform: rotate(180deg);\n}\n\n:host( [selected] ) .icon {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n}\n\n:host( [selected] ) .content {\n padding-top: 1rem;\n opacity: 1;\n\n grid-template-rows: 1fr;\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.border {\n border-width: 1px;\n}\n\n.bg-label-amaranth-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04 {\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04 {\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04 {\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04 {\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04 {\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04 {\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04 {\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04 {\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04 {\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04 {\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-accordion-timer-item-duration: 0s;\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: 0s;\n }\n }\n}\n";
|
|
8
10
|
const MdsAccordionTimerItemStyle0 = mdsAccordionTimerItemCss;
|
|
9
11
|
|
|
10
12
|
const MdsAccordionTimerItem = class {
|
|
@@ -37,12 +39,13 @@ const MdsAccordionTimerItem = class {
|
|
|
37
39
|
this.typography = 'h5';
|
|
38
40
|
this.selected = false;
|
|
39
41
|
this.description = undefined;
|
|
42
|
+
this.duration = undefined;
|
|
40
43
|
this.progress = 0;
|
|
41
44
|
this.uuid = 0;
|
|
42
45
|
}
|
|
43
46
|
render() {
|
|
44
47
|
var _a;
|
|
45
|
-
return (index.h(index.Host, { key: '
|
|
48
|
+
return (index.h(index.Host, { key: '3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, index.h("div", { key: '9666c1af6081ba157218583b0c5cd3c819fa9c0a', class: "row" }, index.h("mds-progress", { key: '8a2b2cd58d22206a02ba36c951238ba31eb1dca5', class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), index.h("div", { key: 'dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5', class: "accordion" }, index.h("button", { key: '608a961e3b15dc480a45f1c22ec3c83d83aa590b', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, index.h("mds-text", { key: 'cc91fbab8fa96df59a39680edaf2c5742c5565ea', typography: this.typography, part: "label" }, this.description), index.h("mds-text", { key: '36b97232d257a40ae7f50039009766ccb4b34a81', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, index.h("i", { key: 'b55e4706a60870e6b3d03b5f2d90c04d3e4580e1', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown }))), index.h("div", { key: '4735a20ffc00844e027df1468fd0476b911b7e60', class: "content", id: "content" }, index.h("div", { key: '6ded043b63fca24db7cf974251858d7d794e7fd9', class: "content-expander", part: "content" }, index.h("slot", { key: 'f855b620cd8515fc619e5b4de6f9d683c4677f7e' })))))));
|
|
46
49
|
}
|
|
47
50
|
};
|
|
48
51
|
MdsAccordionTimerItem.style = MdsAccordionTimerItemStyle0;
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["mds-accordion-timer-item.cjs",[[1,"mds-accordion-timer-item",{"typography":[1],"selected":[516],"description":[1],"progress":[2],"uuid":[2]}]]]], options);
|
|
22
|
+
return index.bootstrapLazy([["mds-accordion-timer-item.cjs",[[1,"mds-accordion-timer-item",{"typography":[1],"selected":[516],"description":[1],"duration":[514],"progress":[2],"uuid":[2]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -44,12 +44,12 @@
|
|
|
44
44
|
@tailwind utilities;
|
|
45
45
|
|
|
46
46
|
/**
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
47
|
+
* @prop --mds-accordion-timer-item-progress-bar-color: Sets the color of the progress bar when the item is selected
|
|
48
|
+
* @prop --mds-accordion-timer-item-progress-bar-background: Sets the background-color of the progress bar when the item is selected
|
|
49
|
+
* @prop --mds-accordion-timer-item-color: Sets the text color of the component
|
|
50
|
+
* @prop --mds-accordion-timer-item-progress-bar-thickness: Sets thickness of the progress bar
|
|
51
|
+
* @prop --mds-accordion-timer-item-duration: Sets the transition duration of open/close animation
|
|
52
|
+
*/
|
|
53
53
|
|
|
54
54
|
:host {
|
|
55
55
|
|
|
@@ -90,11 +90,15 @@
|
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
.action {
|
|
93
|
+
gap: 1rem;
|
|
93
94
|
border-radius: 0.75rem;
|
|
94
95
|
|
|
95
96
|
background-color: transparent;
|
|
96
97
|
border: 0;
|
|
98
|
+
color: inherit;
|
|
97
99
|
cursor: pointer;
|
|
100
|
+
display: flex;
|
|
101
|
+
justify-content: space-between;
|
|
98
102
|
padding: 0;
|
|
99
103
|
text-align: left;
|
|
100
104
|
}
|
|
@@ -121,6 +125,20 @@
|
|
|
121
125
|
min-height: 0;
|
|
122
126
|
}
|
|
123
127
|
|
|
128
|
+
.icon {
|
|
129
|
+
transition-property: transform;
|
|
130
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
131
|
+
transition-duration: 500ms;
|
|
132
|
+
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
|
133
|
+
|
|
134
|
+
fill: currentcolor;
|
|
135
|
+
transform: rotate(180deg);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
:host( [selected] ) .icon {
|
|
139
|
+
transform: rotate(0deg);
|
|
140
|
+
}
|
|
141
|
+
|
|
124
142
|
:host( [selected] ) .content {
|
|
125
143
|
padding-top: 1rem;
|
|
126
144
|
opacity: 1;
|
|
@@ -1,6 +1,11 @@
|
|
|
1
|
+
import miBaselineKeyboardArrowDown from "@icon/mi/baseline/keyboard-arrow-down.svg";
|
|
1
2
|
import { Host, h } from "@stencil/core";
|
|
2
3
|
/**
|
|
3
|
-
* @slot default - Add content like `text string`, `HTML elements` or `components` to this slot
|
|
4
|
+
* @slot default - Add content like `text string`, `HTML elements` or `components` to this slot
|
|
5
|
+
* @part content - the content wrapper of the `default` slot
|
|
6
|
+
* @part icon - The arrow icon of the component
|
|
7
|
+
* @part label - The text label of the component
|
|
8
|
+
* @part progress - The progress bar of the component
|
|
4
9
|
*/
|
|
5
10
|
export class MdsAccordionTimerItem {
|
|
6
11
|
constructor() {
|
|
@@ -28,12 +33,13 @@ export class MdsAccordionTimerItem {
|
|
|
28
33
|
this.typography = 'h5';
|
|
29
34
|
this.selected = false;
|
|
30
35
|
this.description = undefined;
|
|
36
|
+
this.duration = undefined;
|
|
31
37
|
this.progress = 0;
|
|
32
38
|
this.uuid = 0;
|
|
33
39
|
}
|
|
34
40
|
render() {
|
|
35
41
|
var _a;
|
|
36
|
-
return (h(Host, { key: '
|
|
42
|
+
return (h(Host, { key: '3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { key: '9666c1af6081ba157218583b0c5cd3c819fa9c0a', class: "row" }, h("mds-progress", { key: '8a2b2cd58d22206a02ba36c951238ba31eb1dca5', class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), h("div", { key: 'dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5', class: "accordion" }, h("button", { key: '608a961e3b15dc480a45f1c22ec3c83d83aa590b', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: 'cc91fbab8fa96df59a39680edaf2c5742c5565ea', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: '36b97232d257a40ae7f50039009766ccb4b34a81', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: 'b55e4706a60870e6b3d03b5f2d90c04d3e4580e1', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown }))), h("div", { key: '4735a20ffc00844e027df1468fd0476b911b7e60', class: "content", id: "content" }, h("div", { key: '6ded043b63fca24db7cf974251858d7d794e7fd9', class: "content-expander", part: "content" }, h("slot", { key: 'f855b620cd8515fc619e5b4de6f9d683c4677f7e' })))))));
|
|
37
43
|
}
|
|
38
44
|
static get is() { return "mds-accordion-timer-item"; }
|
|
39
45
|
static get encapsulation() { return "shadow"; }
|
|
@@ -108,6 +114,23 @@ export class MdsAccordionTimerItem {
|
|
|
108
114
|
"attribute": "description",
|
|
109
115
|
"reflect": false
|
|
110
116
|
},
|
|
117
|
+
"duration": {
|
|
118
|
+
"type": "number",
|
|
119
|
+
"mutable": false,
|
|
120
|
+
"complexType": {
|
|
121
|
+
"original": "number",
|
|
122
|
+
"resolved": "number | undefined",
|
|
123
|
+
"references": {}
|
|
124
|
+
},
|
|
125
|
+
"required": false,
|
|
126
|
+
"optional": true,
|
|
127
|
+
"docs": {
|
|
128
|
+
"tags": [],
|
|
129
|
+
"text": "Specifies the duration of the single component when selected, it overrides the global duration of itself only"
|
|
130
|
+
},
|
|
131
|
+
"attribute": "duration",
|
|
132
|
+
"reflect": true
|
|
133
|
+
},
|
|
111
134
|
"progress": {
|
|
112
135
|
"type": "number",
|
|
113
136
|
"mutable": false,
|
package/dist/collection/components/mds-accordion-timer-item/test/mds-accordion-timer-item.stories.js
CHANGED
|
@@ -12,6 +12,10 @@ export default {
|
|
|
12
12
|
type: { name: 'boolean' },
|
|
13
13
|
description: 'Specifies if the accordion item is selected or not',
|
|
14
14
|
},
|
|
15
|
+
duration: {
|
|
16
|
+
type: { name: 'number' },
|
|
17
|
+
description: 'Specifies the duration of the single component when selected, it overrides the global duration of itself only',
|
|
18
|
+
},
|
|
15
19
|
progress: {
|
|
16
20
|
control: { type: 'range', step: 0.01, min: 0, max: 1 },
|
|
17
21
|
type: { name: 'number' },
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const
|
|
3
|
+
const miBaselineKeyboardArrowDown = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>`;
|
|
4
|
+
|
|
5
|
+
const mdsAccordionTimerItemCss = "@-webkit-keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n @keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n.focus-bounce {\n -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n animation-duration: var(--magma-outline-animation-duration, 1s);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-name: focus-bounce;\n animation-name: focus-bounce;\n -webkit-animation-play-state: paused;\n animation-play-state: paused;\n -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n outline: var(--magma-outline-blur);\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: ease-in-out;\n transition-timing-function: ease-in-out;\n }\n\n.focus-bounce--focused,\n .focus-bounce:focus-visible {\n\n --magma-outline-blur: var(--magma-outline-focus);\n\n -webkit-animation-play-state: running;\n\n animation-play-state: running;\n }\n\n.svg {\n display: -ms-flexbox;\n display: flex;\n}\n\n.svg svg {\n aspect-ratio: 1/1;\n height: 100%;\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-accordion-timer-item-progress-bar-color: Sets the color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-progress-bar-background: Sets the background-color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-color: Sets the text color of the component\n * @prop --mds-accordion-timer-item-progress-bar-thickness: Sets thickness of the progress bar\n * @prop --mds-accordion-timer-item-duration: Sets the transition duration of open/close animation\n */\n\n:host {\n\n --mds-accordion-timer-item-progress-bar-color: var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));\n --mds-accordion-timer-item-progress-bar-background: var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));\n --mds-accordion-timer-item-progress-bar-thickness: var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);\n --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 500ms);\n padding-top: 1rem;\n padding-bottom: 1rem;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));\n display: grid;\n position: relative;\n -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n transition-duration: var(--mds-accordion-timer-item-duration);\n}\n\n.row {\n gap: 1rem;\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.accordion {\n display: grid;\n}\n\n.progress-bar {\n\n --mds-progress-color: var(--mds-accordion-timer-item-progress-bar-color);\n --mds-progress-background: var(--mds-accordion-timer-item-progress-bar-background);\n --mds-progress-thickness: var(--mds-accordion-timer-item-progress-bar-thickness);\n\n -ms-flex-negative: 0;\n\n flex-shrink: 0;\n}\n\n.action {\n gap: 1rem;\n border-radius: 0.75rem;\n\n background-color: transparent;\n border: 0;\n color: inherit;\n cursor: pointer;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding: 0;\n text-align: left;\n}\n\n:host( [selected] ) .action {\n cursor: auto;\n}\n\n.content {\n gap: 1rem;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n grid-template-rows: 0fr;\n min-height: 0;\n opacity: 0;\n overflow: hidden;\n padding-top: 0;\n -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n transition-duration: var(--mds-accordion-timer-item-duration);\n -webkit-transition-property: grid-template-rows opacity padding;\n transition-property: grid-template-rows opacity padding;\n transition-property: grid-template-rows opacity padding, -ms-grid-rows opacity padding;\n}\n\n.content-expander {\n min-height: 0;\n}\n\n.icon {\n -webkit-transition-property: -webkit-transform;\n transition-property: -webkit-transform;\n transition-property: transform;\n transition-property: transform, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n fill: currentcolor;\n -webkit-transform: rotate(180deg);\n transform: rotate(180deg);\n}\n\n:host( [selected] ) .icon {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n}\n\n:host( [selected] ) .content {\n padding-top: 1rem;\n opacity: 1;\n\n grid-template-rows: 1fr;\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.border {\n border-width: 1px;\n}\n\n.bg-label-amaranth-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04 {\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04 {\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04 {\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04 {\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04 {\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04 {\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04 {\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04 {\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04 {\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04 {\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-accordion-timer-item-duration: 0s;\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: 0s;\n }\n }\n}\n";
|
|
4
6
|
const MdsAccordionTimerItemStyle0 = mdsAccordionTimerItemCss;
|
|
5
7
|
|
|
6
8
|
const MdsAccordionTimerItem$1 = /*@__PURE__*/ proxyCustomElement(class MdsAccordionTimerItem extends HTMLElement {
|
|
@@ -35,18 +37,20 @@ const MdsAccordionTimerItem$1 = /*@__PURE__*/ proxyCustomElement(class MdsAccord
|
|
|
35
37
|
this.typography = 'h5';
|
|
36
38
|
this.selected = false;
|
|
37
39
|
this.description = undefined;
|
|
40
|
+
this.duration = undefined;
|
|
38
41
|
this.progress = 0;
|
|
39
42
|
this.uuid = 0;
|
|
40
43
|
}
|
|
41
44
|
render() {
|
|
42
45
|
var _a;
|
|
43
|
-
return (h(Host, { key: '
|
|
46
|
+
return (h(Host, { key: '3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { key: '9666c1af6081ba157218583b0c5cd3c819fa9c0a', class: "row" }, h("mds-progress", { key: '8a2b2cd58d22206a02ba36c951238ba31eb1dca5', class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), h("div", { key: 'dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5', class: "accordion" }, h("button", { key: '608a961e3b15dc480a45f1c22ec3c83d83aa590b', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: 'cc91fbab8fa96df59a39680edaf2c5742c5565ea', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: '36b97232d257a40ae7f50039009766ccb4b34a81', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: 'b55e4706a60870e6b3d03b5f2d90c04d3e4580e1', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown }))), h("div", { key: '4735a20ffc00844e027df1468fd0476b911b7e60', class: "content", id: "content" }, h("div", { key: '6ded043b63fca24db7cf974251858d7d794e7fd9', class: "content-expander", part: "content" }, h("slot", { key: 'f855b620cd8515fc619e5b4de6f9d683c4677f7e' })))))));
|
|
44
47
|
}
|
|
45
48
|
static get style() { return MdsAccordionTimerItemStyle0; }
|
|
46
49
|
}, [1, "mds-accordion-timer-item", {
|
|
47
50
|
"typography": [1],
|
|
48
51
|
"selected": [516],
|
|
49
52
|
"description": [1],
|
|
53
|
+
"duration": [514],
|
|
50
54
|
"progress": [2],
|
|
51
55
|
"uuid": [2]
|
|
52
56
|
}]);
|
package/dist/documentation.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2024-
|
|
2
|
+
"timestamp": "2024-10-17T13:56:09",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.21.0",
|
|
@@ -14,7 +14,23 @@
|
|
|
14
14
|
"docsTags": [
|
|
15
15
|
{
|
|
16
16
|
"name": "slot",
|
|
17
|
-
"text": "default - Add content like `text string`, `HTML elements` or `components` to this slot
|
|
17
|
+
"text": "default - Add content like `text string`, `HTML elements` or `components` to this slot"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"name": "part",
|
|
21
|
+
"text": "content - the content wrapper of the `default` slot"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"name": "part",
|
|
25
|
+
"text": "icon - The arrow icon of the component"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"name": "part",
|
|
29
|
+
"text": "label - The text label of the component"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"name": "part",
|
|
33
|
+
"text": "progress - The progress bar of the component"
|
|
18
34
|
}
|
|
19
35
|
],
|
|
20
36
|
"usage": {},
|
|
@@ -40,6 +56,30 @@
|
|
|
40
56
|
"optional": false,
|
|
41
57
|
"required": true
|
|
42
58
|
},
|
|
59
|
+
{
|
|
60
|
+
"name": "duration",
|
|
61
|
+
"type": "number | undefined",
|
|
62
|
+
"complexType": {
|
|
63
|
+
"original": "number",
|
|
64
|
+
"resolved": "number | undefined",
|
|
65
|
+
"references": {}
|
|
66
|
+
},
|
|
67
|
+
"mutable": false,
|
|
68
|
+
"attr": "duration",
|
|
69
|
+
"reflectToAttr": true,
|
|
70
|
+
"docs": "Specifies the duration of the single component when selected, it overrides the global duration of itself only",
|
|
71
|
+
"docsTags": [],
|
|
72
|
+
"values": [
|
|
73
|
+
{
|
|
74
|
+
"type": "number"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"type": "undefined"
|
|
78
|
+
}
|
|
79
|
+
],
|
|
80
|
+
"optional": true,
|
|
81
|
+
"required": false
|
|
82
|
+
},
|
|
43
83
|
{
|
|
44
84
|
"name": "progress",
|
|
45
85
|
"type": "number",
|
|
@@ -254,10 +294,27 @@
|
|
|
254
294
|
"slots": [
|
|
255
295
|
{
|
|
256
296
|
"name": "default",
|
|
257
|
-
"docs": "Add content like `text string`, `HTML elements` or `components` to this slot
|
|
297
|
+
"docs": "Add content like `text string`, `HTML elements` or `components` to this slot"
|
|
298
|
+
}
|
|
299
|
+
],
|
|
300
|
+
"parts": [
|
|
301
|
+
{
|
|
302
|
+
"name": "content",
|
|
303
|
+
"docs": "the content wrapper of the `default` slot"
|
|
304
|
+
},
|
|
305
|
+
{
|
|
306
|
+
"name": "icon",
|
|
307
|
+
"docs": "The arrow icon of the component"
|
|
308
|
+
},
|
|
309
|
+
{
|
|
310
|
+
"name": "label",
|
|
311
|
+
"docs": "The text label of the component"
|
|
312
|
+
},
|
|
313
|
+
{
|
|
314
|
+
"name": "progress",
|
|
315
|
+
"docs": "The progress bar of the component"
|
|
258
316
|
}
|
|
259
317
|
],
|
|
260
|
-
"parts": [],
|
|
261
318
|
"dependents": [],
|
|
262
319
|
"dependencies": [],
|
|
263
320
|
"dependencyGraph": {}
|
package/dist/esm/loader.js
CHANGED
|
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await globalScripts();
|
|
8
|
-
return bootstrapLazy([["mds-accordion-timer-item",[[1,"mds-accordion-timer-item",{"typography":[1],"selected":[516],"description":[1],"progress":[2],"uuid":[2]}]]]], options);
|
|
8
|
+
return bootstrapLazy([["mds-accordion-timer-item",[[1,"mds-accordion-timer-item",{"typography":[1],"selected":[516],"description":[1],"duration":[514],"progress":[2],"uuid":[2]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host } from './index-b53929ab.js';
|
|
2
2
|
|
|
3
|
-
const
|
|
3
|
+
const miBaselineKeyboardArrowDown = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>`;
|
|
4
|
+
|
|
5
|
+
const mdsAccordionTimerItemCss = "@-webkit-keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n @keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n.focus-bounce {\n -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n animation-duration: var(--magma-outline-animation-duration, 1s);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-name: focus-bounce;\n animation-name: focus-bounce;\n -webkit-animation-play-state: paused;\n animation-play-state: paused;\n -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n outline: var(--magma-outline-blur);\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: ease-in-out;\n transition-timing-function: ease-in-out;\n }\n\n.focus-bounce--focused,\n .focus-bounce:focus-visible {\n\n --magma-outline-blur: var(--magma-outline-focus);\n\n -webkit-animation-play-state: running;\n\n animation-play-state: running;\n }\n\n.svg {\n display: -ms-flexbox;\n display: flex;\n}\n\n.svg svg {\n aspect-ratio: 1/1;\n height: 100%;\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-accordion-timer-item-progress-bar-color: Sets the color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-progress-bar-background: Sets the background-color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-color: Sets the text color of the component\n * @prop --mds-accordion-timer-item-progress-bar-thickness: Sets thickness of the progress bar\n * @prop --mds-accordion-timer-item-duration: Sets the transition duration of open/close animation\n */\n\n:host {\n\n --mds-accordion-timer-item-progress-bar-color: var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));\n --mds-accordion-timer-item-progress-bar-background: var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));\n --mds-accordion-timer-item-progress-bar-thickness: var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);\n --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 500ms);\n padding-top: 1rem;\n padding-bottom: 1rem;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));\n display: grid;\n position: relative;\n -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n transition-duration: var(--mds-accordion-timer-item-duration);\n}\n\n.row {\n gap: 1rem;\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.accordion {\n display: grid;\n}\n\n.progress-bar {\n\n --mds-progress-color: var(--mds-accordion-timer-item-progress-bar-color);\n --mds-progress-background: var(--mds-accordion-timer-item-progress-bar-background);\n --mds-progress-thickness: var(--mds-accordion-timer-item-progress-bar-thickness);\n\n -ms-flex-negative: 0;\n\n flex-shrink: 0;\n}\n\n.action {\n gap: 1rem;\n border-radius: 0.75rem;\n\n background-color: transparent;\n border: 0;\n color: inherit;\n cursor: pointer;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding: 0;\n text-align: left;\n}\n\n:host( [selected] ) .action {\n cursor: auto;\n}\n\n.content {\n gap: 1rem;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n grid-template-rows: 0fr;\n min-height: 0;\n opacity: 0;\n overflow: hidden;\n padding-top: 0;\n -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n transition-duration: var(--mds-accordion-timer-item-duration);\n -webkit-transition-property: grid-template-rows opacity padding;\n transition-property: grid-template-rows opacity padding;\n transition-property: grid-template-rows opacity padding, -ms-grid-rows opacity padding;\n}\n\n.content-expander {\n min-height: 0;\n}\n\n.icon {\n -webkit-transition-property: -webkit-transform;\n transition-property: -webkit-transform;\n transition-property: transform;\n transition-property: transform, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n fill: currentcolor;\n -webkit-transform: rotate(180deg);\n transform: rotate(180deg);\n}\n\n:host( [selected] ) .icon {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n}\n\n:host( [selected] ) .content {\n padding-top: 1rem;\n opacity: 1;\n\n grid-template-rows: 1fr;\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.border {\n border-width: 1px;\n}\n\n.bg-label-amaranth-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04 {\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04 {\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04 {\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04 {\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04 {\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04 {\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04 {\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04 {\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04 {\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04 {\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-accordion-timer-item-duration: 0s;\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: 0s;\n }\n }\n}\n";
|
|
4
6
|
const MdsAccordionTimerItemStyle0 = mdsAccordionTimerItemCss;
|
|
5
7
|
|
|
6
8
|
const MdsAccordionTimerItem = class {
|
|
@@ -33,12 +35,13 @@ const MdsAccordionTimerItem = class {
|
|
|
33
35
|
this.typography = 'h5';
|
|
34
36
|
this.selected = false;
|
|
35
37
|
this.description = undefined;
|
|
38
|
+
this.duration = undefined;
|
|
36
39
|
this.progress = 0;
|
|
37
40
|
this.uuid = 0;
|
|
38
41
|
}
|
|
39
42
|
render() {
|
|
40
43
|
var _a;
|
|
41
|
-
return (h(Host, { key: '
|
|
44
|
+
return (h(Host, { key: '3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { key: '9666c1af6081ba157218583b0c5cd3c819fa9c0a', class: "row" }, h("mds-progress", { key: '8a2b2cd58d22206a02ba36c951238ba31eb1dca5', class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), h("div", { key: 'dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5', class: "accordion" }, h("button", { key: '608a961e3b15dc480a45f1c22ec3c83d83aa590b', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: 'cc91fbab8fa96df59a39680edaf2c5742c5565ea', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: '36b97232d257a40ae7f50039009766ccb4b34a81', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: 'b55e4706a60870e6b3d03b5f2d90c04d3e4580e1', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown }))), h("div", { key: '4735a20ffc00844e027df1468fd0476b911b7e60', class: "content", id: "content" }, h("div", { key: '6ded043b63fca24db7cf974251858d7d794e7fd9', class: "content-expander", part: "content" }, h("slot", { key: 'f855b620cd8515fc619e5b4de6f9d683c4677f7e' })))))));
|
|
42
45
|
}
|
|
43
46
|
};
|
|
44
47
|
MdsAccordionTimerItem.style = MdsAccordionTimerItemStyle0;
|
|
@@ -16,5 +16,5 @@ var patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["mds-accordion-timer-item",[[1,"mds-accordion-timer-item",{"typography":[1],"selected":[516],"description":[1],"progress":[2],"uuid":[2]}]]]], options);
|
|
19
|
+
return bootstrapLazy([["mds-accordion-timer-item",[[1,"mds-accordion-timer-item",{"typography":[1],"selected":[516],"description":[1],"duration":[514],"progress":[2],"uuid":[2]}]]]], options);
|
|
20
20
|
});
|
package/dist/esm-es5/loader.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var __awaiter=this&&this.__awaiter||function(t,e,n,r){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function a(t){try{
|
|
1
|
+
var __awaiter=this&&this.__awaiter||function(t,e,n,r){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function a(t){try{c(r.next(t))}catch(t){o(t)}}function u(t){try{c(r["throw"](t))}catch(t){o(t)}}function c(t){t.done?n(t.value):i(t.value).then(a,u)}c((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,a;return a={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function u(t){return function(e){return c([t,e])}}function c(u){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,u[0]&&(n=0)),n)try{if(r=1,i&&(o=u[0]&2?i["return"]:u[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,u[1])).done)return o;if(i=0,o)u=[u[0]&2,o.value];switch(u[0]){case 0:case 1:o=u;break;case 4:n.label++;return{value:u[1],done:false};case 5:n.label++;i=u[1];u=[0];continue;case 7:u=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(u[0]===6||u[0]===2)){n=0;continue}if(u[0]===3&&(!o||u[1]>o[0]&&u[1]<o[3])){n.label=u[1];break}if(u[0]===6&&n.label<o[1]){n.label=o[1];o=u;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(u);break}if(o[2])n.ops.pop();n.trys.pop();continue}u=e.call(t,n)}catch(t){u=[6,t];i=0}finally{r=o=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};import{b as bootstrapLazy}from"./index-b53929ab.js";export{s as setNonce}from"./index-b53929ab.js";import{g as globalScripts}from"./app-globals-0f993ce5.js";var defineCustomElements=function(t,e){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(typeof window==="undefined")return[2,undefined];return[4,globalScripts()];case 1:t.sent();return[2,bootstrapLazy([["mds-accordion-timer-item",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]}]]]],e)]}}))}))};export{defineCustomElements};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as registerInstance,c as createEvent,h,H as Host}from"./index-b53929ab.js";var mdsAccordionTimerItemCss="@-webkit-keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n @keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n.focus-bounce {\n -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n animation-duration: var(--magma-outline-animation-duration, 1s);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-name: focus-bounce;\n animation-name: focus-bounce;\n -webkit-animation-play-state: paused;\n animation-play-state: paused;\n -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n outline: var(--magma-outline-blur);\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: ease-in-out;\n transition-timing-function: ease-in-out;\n }\n\n.focus-bounce--focused,\n .focus-bounce:focus-visible {\n\n --magma-outline-blur: var(--magma-outline-focus);\n\n -webkit-animation-play-state: running;\n\n animation-play-state: running;\n }\n\n.svg {\n display: -ms-flexbox;\n display: flex;\n}\n\n.svg svg {\n aspect-ratio: 1/1;\n height: 100%;\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-accordion-timer-item-progress-bar-color: Sets the color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-progress-bar-background: Sets the background-color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-color: Sets the text color of the component\n * @prop --mds-accordion-timer-item-progress-bar-thickness: Sets thickness of the progress bar\n * @prop --mds-accordion-timer-item-duration: Sets the transition duration of open/close animation\n */\n\n:host {\n\n --mds-accordion-timer-item-progress-bar-color: var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));\n --mds-accordion-timer-item-progress-bar-background: var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));\n --mds-accordion-timer-item-progress-bar-thickness: var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);\n --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 500ms);\n padding-top: 1rem;\n padding-bottom: 1rem;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));\n display: grid;\n position: relative;\n -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n transition-duration: var(--mds-accordion-timer-item-duration);\n}\n\n.row {\n gap: 1rem;\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.accordion {\n display: grid;\n}\n\n.progress-bar {\n\n --mds-progress-color: var(--mds-accordion-timer-item-progress-bar-color);\n --mds-progress-background: var(--mds-accordion-timer-item-progress-bar-background);\n --mds-progress-thickness: var(--mds-accordion-timer-item-progress-bar-thickness);\n\n -ms-flex-negative: 0;\n\n flex-shrink: 0;\n}\n\n.action {\n border-radius: 0.75rem;\n\n background-color: transparent;\n border: 0;\n cursor: pointer;\n padding: 0;\n text-align: left;\n}\n\n:host( [selected] ) .action {\n cursor: auto;\n}\n\n.content {\n gap: 1rem;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n grid-template-rows: 0fr;\n min-height: 0;\n opacity: 0;\n overflow: hidden;\n padding-top: 0;\n -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n transition-duration: var(--mds-accordion-timer-item-duration);\n -webkit-transition-property: grid-template-rows opacity padding;\n transition-property: grid-template-rows opacity padding;\n transition-property: grid-template-rows opacity padding, -ms-grid-rows opacity padding;\n}\n\n.content-expander {\n min-height: 0;\n}\n\n:host( [selected] ) .content {\n padding-top: 1rem;\n opacity: 1;\n\n grid-template-rows: 1fr;\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.border {\n border-width: 1px;\n}\n\n.bg-label-amaranth-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04 {\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04 {\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04 {\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04 {\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04 {\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04 {\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04 {\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04 {\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04 {\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04 {\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-accordion-timer-item-duration: 0s;\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: 0s;\n }\n }\n}\n";var MdsAccordionTimerItemStyle0=mdsAccordionTimerItemCss;var MdsAccordionTimerItem=function(){function n(n){var t=this;registerInstance(this,n);this.clickSelectEvent=createEvent(this,"mdsAccordionTimerItemClickSelect",7);this.selectedMouseEnterEvent=createEvent(this,"mdsAccordionTimerItemMouseEnterSelect",7);this.selectedMouseLeaveEvent=createEvent(this,"mdsAccordionTimerItemMouseLeaveSelect",7);this.toggle=function(){t.selected=!t.selected;t.progress=0;if(t.selected){t.clickSelectEvent.emit({selected:t.selected,uuid:t.uuid})}};this.mouseEnter=function(){if(t.selected){t.selectedMouseEnterEvent.emit({selected:t.selected,uuid:t.uuid})}};this.mouseLeave=function(){if(t.selected){t.selectedMouseLeaveEvent.emit({selected:t.selected,uuid:t.uuid})}};this.typography="h5";this.selected=false;this.description=undefined;this.progress=0;this.uuid=0}n.prototype.render=function(){var n;return h(Host,{key:"bb37c0c02024d6688450221d71bf5140379269a0",onMouseEnter:this.mouseEnter,onMouseLeave:this.mouseLeave},h("div",{key:"725e1eab75685585adedb61bd999b69dd97060a2",class:"row"},h("mds-progress",{key:"bc10b94b4949816e9d3e8188089461f306d927a1",class:"progress-bar",progress:Number((n=this.progress)===null||n===void 0?void 0:n.toFixed(2)),direction:"vertical"}),h("div",{key:"76440c3af2bb8f83f8bb1cf2a10f843e788a18a5",class:"accordion"},h("button",{key:"1daab26b5d46b9387b66393e41e906db51846bd6","aria-controls":"content","aria-expanded":this.selected?"true":"false",class:"action focus-bounce",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},h("mds-text",{key:"4e73f05c8c1f8802c865cfc3b583e80d7f9727f3",typography:this.typography},this.description)),h("div",{key:"52b9e28d618aae954f9eea06ea8c87274723ce94",class:"content",id:"content"},h("div",{key:"4b2d245bae7bfec32fd8459f14d504ab61f38d0f",class:"content-expander"},h("slot",{key:"06e1a471f30b04d8c8222f18ee621532e75d5916"}))))))};return n}();MdsAccordionTimerItem.style=MdsAccordionTimerItemStyle0;export{MdsAccordionTimerItem as mds_accordion_timer_item};
|
|
1
|
+
import{r as registerInstance,c as createEvent,h,H as Host}from"./index-b53929ab.js";var miBaselineKeyboardArrowDown='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>';var mdsAccordionTimerItemCss="@-webkit-keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n @keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n.focus-bounce {\n -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n animation-duration: var(--magma-outline-animation-duration, 1s);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-name: focus-bounce;\n animation-name: focus-bounce;\n -webkit-animation-play-state: paused;\n animation-play-state: paused;\n -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n outline: var(--magma-outline-blur);\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: ease-in-out;\n transition-timing-function: ease-in-out;\n }\n\n.focus-bounce--focused,\n .focus-bounce:focus-visible {\n\n --magma-outline-blur: var(--magma-outline-focus);\n\n -webkit-animation-play-state: running;\n\n animation-play-state: running;\n }\n\n.svg {\n display: -ms-flexbox;\n display: flex;\n}\n\n.svg svg {\n aspect-ratio: 1/1;\n height: 100%;\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-accordion-timer-item-progress-bar-color: Sets the color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-progress-bar-background: Sets the background-color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-color: Sets the text color of the component\n * @prop --mds-accordion-timer-item-progress-bar-thickness: Sets thickness of the progress bar\n * @prop --mds-accordion-timer-item-duration: Sets the transition duration of open/close animation\n */\n\n:host {\n\n --mds-accordion-timer-item-progress-bar-color: var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));\n --mds-accordion-timer-item-progress-bar-background: var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));\n --mds-accordion-timer-item-progress-bar-thickness: var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);\n --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 500ms);\n padding-top: 1rem;\n padding-bottom: 1rem;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));\n display: grid;\n position: relative;\n -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n transition-duration: var(--mds-accordion-timer-item-duration);\n}\n\n.row {\n gap: 1rem;\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.accordion {\n display: grid;\n}\n\n.progress-bar {\n\n --mds-progress-color: var(--mds-accordion-timer-item-progress-bar-color);\n --mds-progress-background: var(--mds-accordion-timer-item-progress-bar-background);\n --mds-progress-thickness: var(--mds-accordion-timer-item-progress-bar-thickness);\n\n -ms-flex-negative: 0;\n\n flex-shrink: 0;\n}\n\n.action {\n gap: 1rem;\n border-radius: 0.75rem;\n\n background-color: transparent;\n border: 0;\n color: inherit;\n cursor: pointer;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding: 0;\n text-align: left;\n}\n\n:host( [selected] ) .action {\n cursor: auto;\n}\n\n.content {\n gap: 1rem;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n grid-template-rows: 0fr;\n min-height: 0;\n opacity: 0;\n overflow: hidden;\n padding-top: 0;\n -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n transition-duration: var(--mds-accordion-timer-item-duration);\n -webkit-transition-property: grid-template-rows opacity padding;\n transition-property: grid-template-rows opacity padding;\n transition-property: grid-template-rows opacity padding, -ms-grid-rows opacity padding;\n}\n\n.content-expander {\n min-height: 0;\n}\n\n.icon {\n -webkit-transition-property: -webkit-transform;\n transition-property: -webkit-transform;\n transition-property: transform;\n transition-property: transform, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n fill: currentcolor;\n -webkit-transform: rotate(180deg);\n transform: rotate(180deg);\n}\n\n:host( [selected] ) .icon {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n}\n\n:host( [selected] ) .content {\n padding-top: 1rem;\n opacity: 1;\n\n grid-template-rows: 1fr;\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.border {\n border-width: 1px;\n}\n\n.bg-label-amaranth-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04 {\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04 {\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04 {\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04 {\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04 {\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04 {\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04 {\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04 {\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04 {\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04 {\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-accordion-timer-item-duration: 0s;\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: 0s;\n }\n }\n}\n";var MdsAccordionTimerItemStyle0=mdsAccordionTimerItemCss;var MdsAccordionTimerItem=function(){function n(n){var t=this;registerInstance(this,n);this.clickSelectEvent=createEvent(this,"mdsAccordionTimerItemClickSelect",7);this.selectedMouseEnterEvent=createEvent(this,"mdsAccordionTimerItemMouseEnterSelect",7);this.selectedMouseLeaveEvent=createEvent(this,"mdsAccordionTimerItemMouseLeaveSelect",7);this.toggle=function(){t.selected=!t.selected;t.progress=0;if(t.selected){t.clickSelectEvent.emit({selected:t.selected,uuid:t.uuid})}};this.mouseEnter=function(){if(t.selected){t.selectedMouseEnterEvent.emit({selected:t.selected,uuid:t.uuid})}};this.mouseLeave=function(){if(t.selected){t.selectedMouseLeaveEvent.emit({selected:t.selected,uuid:t.uuid})}};this.typography="h5";this.selected=false;this.description=undefined;this.duration=undefined;this.progress=0;this.uuid=0}n.prototype.render=function(){var n;return h(Host,{key:"3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e",onMouseEnter:this.mouseEnter,onMouseLeave:this.mouseLeave},h("div",{key:"9666c1af6081ba157218583b0c5cd3c819fa9c0a",class:"row"},h("mds-progress",{key:"8a2b2cd58d22206a02ba36c951238ba31eb1dca5",class:"progress-bar",progress:Number((n=this.progress)===null||n===void 0?void 0:n.toFixed(2)),direction:"vertical",part:"progress"}),h("div",{key:"dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5",class:"accordion"},h("button",{key:"608a961e3b15dc480a45f1c22ec3c83d83aa590b","aria-controls":"content","aria-expanded":this.selected?"true":"false",class:"action focus-bounce",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},h("mds-text",{key:"cc91fbab8fa96df59a39680edaf2c5742c5565ea",typography:this.typography,part:"label"},this.description),h("mds-text",{key:"36b97232d257a40ae7f50039009766ccb4b34a81","aria-hidden":"true",class:"icon-button",typography:this.typography,part:"icon"},h("i",{key:"b55e4706a60870e6b3d03b5f2d90c04d3e4580e1",class:"svg icon",innerHTML:miBaselineKeyboardArrowDown}))),h("div",{key:"4735a20ffc00844e027df1468fd0476b911b7e60",class:"content",id:"content"},h("div",{key:"6ded043b63fca24db7cf974251858d7d794e7fd9",class:"content-expander",part:"content"},h("slot",{key:"f855b620cd8515fc619e5b4de6f9d683c4677f7e"}))))))};return n}();MdsAccordionTimerItem.style=MdsAccordionTimerItemStyle0;export{MdsAccordionTimerItem as mds_accordion_timer_item};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var __awaiter=this&&this.__awaiter||function(t,r,e,n){function i(t){return t instanceof e?t:new e((function(r){r(t)}))}return new(e||(e=Promise))((function(e,o){function a(t){try{s(n.next(t))}catch(t){o(t)}}function c(t){try{s(n["throw"](t))}catch(t){o(t)}}function s(t){t.done?e(t.value):i(t.value).then(a,c)}s((n=n.apply(t,r||[])).next())}))};var __generator=this&&this.__generator||function(t,r){var e={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},n,i,o,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(t){return function(r){return s([t,r])}}function s(c){if(n)throw new TypeError("Generator is already executing.");while(a&&(a=0,c[0]&&(e=0)),e)try{if(n=1,i&&(o=c[0]&2?i["return"]:c[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,c[1])).done)return o;if(i=0,o)c=[c[0]&2,o.value];switch(c[0]){case 0:case 1:o=c;break;case 4:e.label++;return{value:c[1],done:false};case 5:e.label++;i=c[1];c=[0];continue;case 7:c=e.ops.pop();e.trys.pop();continue;default:if(!(o=e.trys,o=o.length>0&&o[o.length-1])&&(c[0]===6||c[0]===2)){e=0;continue}if(c[0]===3&&(!o||c[1]>o[0]&&c[1]<o[3])){e.label=c[1];break}if(c[0]===6&&e.label<o[1]){e.label=o[1];o=c;break}if(o&&e.label<o[2]){e.label=o[2];e.ops.push(c);break}if(o[2])e.ops.pop();e.trys.pop();continue}c=r.call(t,e)}catch(t){c=[6,t];i=0}finally{n=o=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};import{p as promiseResolve,b as bootstrapLazy}from"./index-b53929ab.js";export{s as setNonce}from"./index-b53929ab.js";import{g as globalScripts}from"./app-globals-0f993ce5.js";var patchBrowser=function(){var t=import.meta.url;var r={};if(t!==""){r.resourcesUrl=new URL(".",t).href}return promiseResolve(r)};patchBrowser().then((function(t){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(r){switch(r.label){case 0:return[4,globalScripts()];case 1:r.sent();return[2,bootstrapLazy([["mds-accordion-timer-item",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],progress:[2],uuid:[2]}]]]],t)]}}))}))}));
|
|
1
|
+
var __awaiter=this&&this.__awaiter||function(t,r,e,n){function i(t){return t instanceof e?t:new e((function(r){r(t)}))}return new(e||(e=Promise))((function(e,o){function a(t){try{s(n.next(t))}catch(t){o(t)}}function c(t){try{s(n["throw"](t))}catch(t){o(t)}}function s(t){t.done?e(t.value):i(t.value).then(a,c)}s((n=n.apply(t,r||[])).next())}))};var __generator=this&&this.__generator||function(t,r){var e={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},n,i,o,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(t){return function(r){return s([t,r])}}function s(c){if(n)throw new TypeError("Generator is already executing.");while(a&&(a=0,c[0]&&(e=0)),e)try{if(n=1,i&&(o=c[0]&2?i["return"]:c[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,c[1])).done)return o;if(i=0,o)c=[c[0]&2,o.value];switch(c[0]){case 0:case 1:o=c;break;case 4:e.label++;return{value:c[1],done:false};case 5:e.label++;i=c[1];c=[0];continue;case 7:c=e.ops.pop();e.trys.pop();continue;default:if(!(o=e.trys,o=o.length>0&&o[o.length-1])&&(c[0]===6||c[0]===2)){e=0;continue}if(c[0]===3&&(!o||c[1]>o[0]&&c[1]<o[3])){e.label=c[1];break}if(c[0]===6&&e.label<o[1]){e.label=o[1];o=c;break}if(o&&e.label<o[2]){e.label=o[2];e.ops.push(c);break}if(o[2])e.ops.pop();e.trys.pop();continue}c=r.call(t,e)}catch(t){c=[6,t];i=0}finally{n=o=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};import{p as promiseResolve,b as bootstrapLazy}from"./index-b53929ab.js";export{s as setNonce}from"./index-b53929ab.js";import{g as globalScripts}from"./app-globals-0f993ce5.js";var patchBrowser=function(){var t=import.meta.url;var r={};if(t!==""){r.resourcesUrl=new URL(".",t).href}return promiseResolve(r)};patchBrowser().then((function(t){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(r){switch(r.label){case 0:return[4,globalScripts()];case 1:r.sent();return[2,bootstrapLazy([["mds-accordion-timer-item",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]}]]]],t)]}}))}))}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as r,b as
|
|
1
|
+
import{p as r,b as o}from"./p-0fba0302.js";export{s as setNonce}from"./p-0fba0302.js";import{g as t}from"./p-e1255160.js";(()=>{const s=import.meta.url,o={};return""!==s&&(o.resourcesUrl=new URL(".",s).href),r(o)})().then((async r=>(await t(),o([["p-90968b6b",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]}]]]],r))));
|