@muibook/components 4.0.0 → 5.1.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/{readme.md → README.md} +2 -0
- package/dist/esm/components/mui-accordion/block/index.js +29 -23
- package/dist/esm/components/mui-accordion/core/index.js +35 -26
- package/dist/esm/components/mui-accordion/group/index.js +7 -7
- package/dist/esm/components/mui-accordion/inline/index.js +12 -6
- package/dist/esm/components/mui-button/index.js +52 -22
- package/dist/esm/components/mui-dialog/index.js +103 -0
- package/dist/esm/components/mui-drawer/index.js +393 -0
- package/dist/esm/components/mui-dropdown/index.js +172 -0
- package/dist/esm/components/mui-icons/add/index.js +3 -3
- package/dist/esm/components/mui-icons/calendar/index.js +55 -0
- package/dist/esm/components/mui-icons/close/index.js +1 -1
- package/dist/esm/components/mui-icons/down-arrow-circle/index.js +1 -1
- package/dist/esm/components/mui-icons/down-chevron/index.js +1 -1
- package/dist/esm/components/mui-icons/ellipsis/index.js +1 -1
- package/dist/esm/components/mui-icons/gear/index.js +8 -8
- package/dist/esm/components/mui-icons/globe/index.js +3 -3
- package/dist/esm/components/mui-icons/grid/index.js +1 -1
- package/dist/esm/components/mui-icons/index.js +1 -0
- package/dist/esm/components/mui-icons/info/index.js +3 -3
- package/dist/esm/components/mui-icons/left-arrow/index.js +1 -1
- package/dist/esm/components/mui-icons/left-chevron/index.js +1 -1
- package/dist/esm/components/mui-icons/left-sidebar/index.js +1 -1
- package/dist/esm/components/mui-icons/moon/index.js +1 -1
- package/dist/esm/components/mui-icons/notification/index.js +1 -1
- package/dist/esm/components/mui-icons/right-chevron/index.js +1 -1
- package/dist/esm/components/mui-icons/stop/index.js +1 -1
- package/dist/esm/components/mui-icons/subtract/index.js +1 -1
- package/dist/esm/components/mui-icons/sun/index.js +1 -1
- package/dist/esm/components/mui-icons/translate/index.js +53 -0
- package/dist/esm/components/mui-icons/up-arrow/index.js +3 -3
- package/dist/esm/components/mui-icons/up-chevron/index.js +1 -1
- package/dist/esm/components/mui-link/index.js +39 -33
- package/dist/esm/components/mui-loader/index.js +99 -0
- package/dist/esm/components/mui-progress/index.js +75 -0
- package/dist/esm/components/mui-stepper/index.js +2 -0
- package/dist/esm/components/mui-stepper/step/index.js +157 -0
- package/dist/esm/components/mui-stepper/stepper/index.js +95 -0
- package/dist/esm/css/mui-tokens.css +47 -2
- package/dist/esm/index.js +13 -4
- package/dist/types/components/mui-dialog/index.d.ts +2 -0
- package/dist/types/components/mui-drawer/index.d.ts +2 -0
- package/dist/types/components/mui-dropdown/index.d.ts +1 -0
- package/dist/types/components/mui-icons/calendar.d.ts +1 -0
- package/dist/types/components/mui-icons/index.d.ts +1 -0
- package/dist/types/components/mui-icons/translate.d.ts +1 -0
- package/dist/types/components/mui-loader/index.d.ts +1 -0
- package/dist/types/components/mui-progress/index.d.ts +1 -0
- package/dist/types/components/mui-stepper/index.d.ts +2 -0
- package/dist/types/components/mui-stepper/step/index.d.ts +1 -0
- package/dist/types/components/mui-stepper/stepper/index.d.ts +1 -0
- package/dist/types/index.d.ts +9 -0
- package/package.json +41 -1
|
@@ -44,7 +44,7 @@ class r extends HTMLElement {
|
|
|
44
44
|
viewBox="0 0 36 36"
|
|
45
45
|
>
|
|
46
46
|
<path
|
|
47
|
-
d="M6.
|
|
47
|
+
d="M6.616 21.5C4.628 21.5 3 19.941 3 18.007S4.628 14.5 6.616 14.5c2.002 0 3.63 1.573 3.63 3.507S8.618 21.5 6.616 21.5M18 21.5c-2.002 0-3.616-1.559-3.616-3.493S15.999 14.5 18 14.5s3.63 1.573 3.63 3.507S20.003 21.5 18 21.5m11.385 0c-2.003 0-3.631-1.559-3.631-3.493s1.628-3.507 3.63-3.507c1.988 0 3.616 1.573 3.616 3.507S31.372 21.5 29.384 21.5"
|
|
48
48
|
></path>
|
|
49
49
|
</svg>
|
|
50
50
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
class
|
|
1
|
+
class o extends HTMLElement {
|
|
2
2
|
static get observedAttributes() {
|
|
3
3
|
return ["size", "color"];
|
|
4
4
|
}
|
|
@@ -12,7 +12,7 @@ class s extends HTMLElement {
|
|
|
12
12
|
(c === "size" || c === "color") && l !== t && this.render();
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
const c = this.getAttribute("size") || "small", l = this.getAttribute("color"),
|
|
15
|
+
const c = this.getAttribute("size") || "small", l = this.getAttribute("color"), i = l && {
|
|
16
16
|
default: "var(--icon-color-default)",
|
|
17
17
|
inverted: "var(--icon-color-inverted)"
|
|
18
18
|
}[l] || l || "var(--icon-color-default)", e = {
|
|
@@ -20,17 +20,17 @@ class s extends HTMLElement {
|
|
|
20
20
|
small: "2.4rem",
|
|
21
21
|
medium: "3.6rem",
|
|
22
22
|
large: "4.8rem"
|
|
23
|
-
},
|
|
23
|
+
}, s = e[c] ?? e.small;
|
|
24
24
|
this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
|
|
25
25
|
`
|
|
26
26
|
<style>
|
|
27
27
|
:host {
|
|
28
|
-
width: ${
|
|
29
|
-
height: ${
|
|
28
|
+
width: ${s};
|
|
29
|
+
height: ${s};
|
|
30
30
|
display: inline-flex;
|
|
31
31
|
align-items: center;
|
|
32
32
|
justify-content: center;
|
|
33
|
-
fill: ${
|
|
33
|
+
fill: ${i};
|
|
34
34
|
}
|
|
35
35
|
svg {
|
|
36
36
|
width: 100%;
|
|
@@ -44,7 +44,7 @@ class s extends HTMLElement {
|
|
|
44
44
|
viewBox="0 0 36 36"
|
|
45
45
|
>
|
|
46
46
|
<path
|
|
47
|
-
d="
|
|
47
|
+
d="M16.648 33c-1.332 0-2.426-.858-2.716-2.124l-.449-1.9-.118-.04-1.662 1.017c-1.12.686-2.466.488-3.415-.449l-1.86-1.86c-.975-.963-1.107-2.335-.435-3.43l1.029-1.636-.04-.106-1.885-.448C3.844 21.72 3 20.612 3 19.293V16.72c0-1.319.83-2.4 2.097-2.717l1.872-.462.04-.106-1.016-1.649c-.685-1.095-.553-2.454.422-3.417l1.873-1.86c.936-.936 2.294-1.134 3.415-.462l1.662 1.016.118-.04.449-1.899C14.222 3.871 15.316 3 16.648 3h2.704c1.331 0 2.426.858 2.716 2.124l.448 1.9.12.04 1.66-1.017c1.122-.686 2.48-.474 3.416.462l1.873 1.86c.975.963 1.107 2.322.422 3.417l-1.016 1.65.04.105 1.872.462C32.17 14.319 33 15.4 33 16.72v2.573c0 1.32-.844 2.427-2.097 2.73l-1.885.45-.04.105 1.029 1.636c.672 1.095.54 2.467-.436 3.43l-1.859 1.86c-.95.937-2.294 1.134-3.415.448l-1.662-1.015-.119.04-.448 1.899C21.778 32.142 20.683 33 19.352 33zm.7-3.47h1.305c.224 0 .303-.105.343-.277l.751-3.18c1.055-.21 1.873-.566 2.783-1.147l2.742 1.689c.159.092.304.105.449-.053l.923-.91c.145-.145.132-.29.04-.436l-1.715-2.77c.54-.844.936-1.808 1.108-2.718l3.191-.752c.172-.04.277-.132.277-.343V17.38c0-.211-.105-.303-.277-.343l-3.191-.752a8.2 8.2 0 0 0-1.095-2.718l1.701-2.77c.093-.145.12-.304-.026-.449l-.936-.91c-.145-.145-.277-.132-.448-.04l-2.756 1.69a7.5 7.5 0 0 0-2.77-1.149l-.751-3.192c-.04-.172-.12-.277-.343-.277h-1.306c-.21 0-.303.105-.343.277l-.751 3.18c-.99.21-2.084.659-2.783 1.147l-2.769-1.702c-.171-.092-.303-.092-.448.053l-.923.897c-.159.158-.132.303-.04.448l1.728 2.797a8.3 8.3 0 0 0-1.108 2.731l-3.165.739c-.185.04-.29.132-.29.343v1.253c0 .211.105.304.29.343l3.178.739c.158.937.554 1.847 1.108 2.73l-1.74 2.798c-.08.145-.106.29.039.435l.923.91c.145.145.29.145.448.04l2.782-1.702c.884.58 1.833.976 2.783 1.148l.738 3.18c.04.17.132.276.343.276m.645-6.61A4.923 4.923 0 0 1 13.062 18a4.923 4.923 0 0 1 4.931-4.92 4.92 4.92 0 0 1 4.92 4.92 4.92 4.92 0 0 1-4.92 4.92m0-2.968c1.082 0 1.952-.87 1.952-1.952s-.87-1.953-1.952-1.953c-1.08 0-1.951.871-1.951 1.953s.87 1.953 1.951 1.953"
|
|
48
48
|
></path>
|
|
49
49
|
</svg>
|
|
50
50
|
|
|
@@ -52,4 +52,4 @@ class s extends HTMLElement {
|
|
|
52
52
|
`);
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
|
-
customElements.get("mui-icon-gear") || customElements.define("mui-icon-gear",
|
|
55
|
+
customElements.get("mui-icon-gear") || customElements.define("mui-icon-gear", o);
|
|
@@ -43,9 +43,9 @@ class a extends HTMLElement {
|
|
|
43
43
|
xmlns="http://www.w3.org/2000/svg"
|
|
44
44
|
viewBox="0 0 36 36"
|
|
45
45
|
>
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
<path
|
|
47
|
+
d="M17.993 33C9.75 33 3 26.25 3 18.007S9.75 3 17.993 3 33 9.764 33 18.007 26.236 33 17.993 33M9.471 10.071c.6.405 1.381.753 2.288 1.046.641-1.743 1.534-3.166 2.566-4.184a11.8 11.8 0 0 0-4.854 3.138m12.19-3.138c1.046 1.018 1.925 2.455 2.58 4.184.907-.279 1.688-.628 2.288-1.032a11.73 11.73 0 0 0-4.868-3.152m-2.496.934v4.06c.948-.043 1.855-.14 2.705-.266-.697-1.8-1.66-3.18-2.705-3.793m-5.05 3.794c.865.126 1.772.223 2.707.265V7.867c-1.033.614-1.995 1.995-2.706 3.794m-7.726 5.16h4.24c.056-1.227.223-2.398.474-3.486-1.213-.39-2.245-.865-3.026-1.437a11.6 11.6 0 0 0-1.688 4.924m18.982 0h4.226a11.56 11.56 0 0 0-1.674-4.923c-.78.572-1.813 1.046-3.026 1.437.237 1.088.404 2.26.474 3.486m-12.371 0h3.822V14.27a26 26 0 0 1-3.39-.376c-.209.934-.362 1.924-.432 2.928m6.165 0h3.821a18 18 0 0 0-.432-2.928c-1.06.195-2.204.32-3.39.376zM6.389 19.166c.181 1.799.781 3.5 1.702 4.979.78-.558 1.813-1.046 3.012-1.423a22 22 0 0 1-.488-3.556zm6.611 0c.07 1.032.223 2.036.446 2.984a28 28 0 0 1 3.376-.362v-2.622zm6.165 2.622c1.185.055 2.329.18 3.389.362.223-.948.376-1.952.432-2.984h-3.821zm5.718.934c1.213.377 2.231.865 3.012 1.423a11.66 11.66 0 0 0 1.716-4.98h-4.24a19 19 0 0 1-.488 3.557m-5.718 1.409v4.016c1.032-.613 1.994-1.98 2.691-3.751-.85-.14-1.757-.223-2.691-.265m-5.035.265c.697 1.785 1.66 3.152 2.691 3.751V24.13a23 23 0 0 0-2.691.265m10.097.544c-.641 1.701-1.52 3.124-2.552 4.128a11.7 11.7 0 0 0 4.826-3.11c-.6-.405-1.367-.74-2.274-1.018M9.485 25.957a11.8 11.8 0 0 0 4.84 3.11c-1.046-1.004-1.91-2.427-2.566-4.128-.893.279-1.674.613-2.274 1.018"
|
|
48
|
+
></path>
|
|
49
49
|
</svg>
|
|
50
50
|
|
|
51
51
|
|
|
@@ -44,7 +44,7 @@ class r extends HTMLElement {
|
|
|
44
44
|
viewBox="0 0 36 36"
|
|
45
45
|
>
|
|
46
46
|
<path
|
|
47
|
-
d="M7.372
|
|
47
|
+
d="M7.372 12.712C5.905 12.712 5 11.778 5 10.235V7.477C5 5.935 5.905 5 7.372 5h2.819c1.467 0 2.372.935 2.372 2.477v2.758c0 1.543-.905 2.477-2.372 2.477zm9.213 0c-1.467 0-2.372-.934-2.372-2.477V7.477c0-1.542.905-2.477 2.372-2.477h2.819c1.466 0 2.372.935 2.372 2.477v2.758c0 1.543-.906 2.477-2.372 2.477zm9.224 0c-1.467 0-2.372-.934-2.372-2.477V7.477c0-1.542.905-2.477 2.372-2.477h2.819C30.095 5 31 5.935 31 7.477v2.758c0 1.543-.905 2.477-2.372 2.477zm-18.437 9.15C5.905 21.862 5 20.916 5 19.385v-2.77c0-1.53.905-2.477 2.372-2.477h2.819c1.467 0 2.372.947 2.372 2.477v2.77c0 1.53-.905 2.477-2.372 2.477zm9.213 0c-1.467 0-2.372-.946-2.372-2.477v-2.77c0-1.53.905-2.477 2.372-2.477h2.819c1.466 0 2.372.947 2.372 2.477v2.77c0 1.53-.906 2.477-2.372 2.477zm9.224 0c-1.467 0-2.372-.946-2.372-2.477v-2.77c0-1.53.905-2.477 2.372-2.477h2.819c1.467 0 2.372.947 2.372 2.477v2.77c0 1.53-.905 2.477-2.372 2.477zM7.372 31C5.905 31 5 30.053 5 28.523v-2.758c0-1.543.905-2.489 2.372-2.489h2.819c1.467 0 2.372.947 2.372 2.489v2.758c0 1.53-.905 2.477-2.372 2.477zm9.213 0c-1.467 0-2.372-.947-2.372-2.477v-2.758c0-1.543.905-2.489 2.372-2.489h2.819c1.466 0 2.372.947 2.372 2.489v2.758c0 1.53-.906 2.477-2.372 2.477zm9.224 0c-1.467 0-2.372-.947-2.372-2.477v-2.758c0-1.543.905-2.489 2.372-2.489h2.819c1.467 0 2.372.947 2.372 2.489v2.758c0 1.53-.905 2.477-2.372 2.477z"
|
|
48
48
|
></path>
|
|
49
49
|
</svg>
|
|
50
50
|
|
|
@@ -43,9 +43,9 @@ class c extends HTMLElement {
|
|
|
43
43
|
xmlns="http://www.w3.org/2000/svg"
|
|
44
44
|
viewBox="0 0 36 36"
|
|
45
45
|
>
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
<path
|
|
47
|
+
d="M17.993 33C9.75 33 3 26.25 3 18.007S9.75 3 17.993 3 33 9.764 33 18.007 26.236 33 17.993 33m.042-19.177c1.269 0 2.315-1.074 2.315-2.33 0-1.324-1.046-2.356-2.315-2.356a2.35 2.35 0 0 0-2.343 2.357c0 1.255 1.074 2.329 2.343 2.329m-2.748 12.064h5.97c.85 0 1.52-.6 1.52-1.492 0-.823-.67-1.479-1.52-1.479h-1.074v-5.37c0-1.185-.558-1.924-1.674-1.924H15.58c-.864 0-1.52.642-1.52 1.465 0 .892.656 1.492 1.52 1.492h1.255v4.337h-1.548c-.85 0-1.52.656-1.52 1.479 0 .892.67 1.492 1.52 1.492"
|
|
48
|
+
></path>
|
|
49
49
|
</svg>
|
|
50
50
|
|
|
51
51
|
|
|
@@ -44,7 +44,7 @@ class r extends HTMLElement {
|
|
|
44
44
|
viewBox="0 0 36 36"
|
|
45
45
|
>
|
|
46
46
|
<path
|
|
47
|
-
d="M5
|
|
47
|
+
d="M5 18c0-.683.288-1.41.748-1.86l9.266-9.355C15.532 6.26 16.151 6 16.755 6c1.482 0 2.475 1.031 2.475 2.383 0 .784-.346 1.365-.82 1.816l-3.223 3.254-2.331 2.179 2.978-.16h12.533C29.95 15.472 31 16.49 31 18c0 1.525-1.05 2.542-2.633 2.542H15.834l-2.978-.16 2.33 2.18 3.224 3.24c.474.45.82 1.03.82 1.815 0 1.351-.993 2.383-2.475 2.383-.604 0-1.223-.276-1.74-.785l-9.267-9.34C5.288 19.423 5 18.682 5 18"
|
|
48
48
|
></path>
|
|
49
49
|
</svg>
|
|
50
50
|
|
|
@@ -44,7 +44,7 @@ class r extends HTMLElement {
|
|
|
44
44
|
viewBox="0 0 36 36"
|
|
45
45
|
>
|
|
46
46
|
<path
|
|
47
|
-
d="M10.5
|
|
47
|
+
d="M10.5 18c.013-.803.289-1.441.983-2.091L21.147 6.7C21.632 6.23 22.209 6 22.904 6 24.333 6 25.5 7.135 25.5 8.487c0 .676-.288 1.326-.852 1.849l-8.169 7.651 8.169 7.677c.55.523.852 1.16.852 1.85 0 1.364-1.167 2.486-2.596 2.486-.682 0-1.272-.217-1.757-.701l-9.664-9.208c-.694-.65-.983-1.3-.983-2.091"
|
|
48
48
|
></path>
|
|
49
49
|
</svg>
|
|
50
50
|
|
|
@@ -44,7 +44,7 @@ class l extends HTMLElement {
|
|
|
44
44
|
viewBox="0 0 36 36"
|
|
45
45
|
>
|
|
46
46
|
<path
|
|
47
|
-
d="M7.671
|
|
47
|
+
d="M7.671 30C4.7 30 3 28.338 3 25.41V10.59C3 7.663 4.699 6 7.671 6H28.33C31.314 6 33 7.662 33 10.59v14.82c0 2.928-1.686 4.59-4.671 4.59zm.525-3.803h6.057V9.815H8.196c-.887 0-1.337.394-1.337 1.317V24.88c0 .923.45 1.317 1.337 1.317m19.62-16.382H17.764v16.382h10.054c.874 0 1.324-.394 1.324-1.317V11.132c0-.923-.45-1.317-1.324-1.317m-16.148 4.32H9.47c-.65 0-1.174-.504-1.174-1.095 0-.578.524-1.083 1.174-1.083h2.198c.65 0 1.161.504 1.161 1.083 0 .59-.512 1.095-1.161 1.095m0 3.644H9.47c-.65 0-1.174-.505-1.174-1.084 0-.59.524-1.083 1.174-1.083h2.198c.65 0 1.161.493 1.161 1.083 0 .579-.512 1.084-1.161 1.084m0 3.655H9.47c-.65 0-1.174-.505-1.174-1.096 0-.59.524-1.083 1.174-1.083h2.198c.65 0 1.161.493 1.161 1.084 0 .59-.512 1.095-1.161 1.095"
|
|
48
48
|
></path>
|
|
49
49
|
</svg>
|
|
50
50
|
|
|
@@ -44,7 +44,7 @@ class n extends HTMLElement {
|
|
|
44
44
|
viewBox="0 0 36 36"
|
|
45
45
|
>
|
|
46
46
|
<path
|
|
47
|
-
d="
|
|
47
|
+
d="M25.982 22.513c1.697 0 3.455-.32 4.465-.776.55-.274 1.024-.411 1.467-.411.643 0 1.086.456 1.086 1.157 0 .365-.107.867-.352 1.43C30.34 29.301 24.79 33 18.52 33 9.62 33 3 26.531 3 17.657c0-6.27 3.807-12.054 9.572-14.368.49-.198.933-.289 1.284-.289.765 0 1.223.518 1.223 1.187 0 .396-.137.853-.397 1.37-.596 1.142-.963 3.227-.963 5.069 0 7.351 4.724 11.887 12.263 11.887"
|
|
48
48
|
></path>
|
|
49
49
|
</svg>
|
|
50
50
|
|
|
@@ -44,7 +44,7 @@ class n extends HTMLElement {
|
|
|
44
44
|
viewBox="0 0 36 36"
|
|
45
45
|
>
|
|
46
46
|
<path
|
|
47
|
-
d="M4
|
|
47
|
+
d="M4 24.741c0-1.665 1.126-2.921 2.478-4.005 1.126-.899 1.312-2.55 1.696-5.34.437-4.362 2.226-7.653 5.486-8.816.69-1.864 2.306-3.08 4.347-3.08 2.027 0 3.644 1.216 4.333 3.08 3.26 1.163 5.049 4.454 5.486 8.816.384 2.79.57 4.441 1.696 5.34C30.874 21.82 32 23.076 32 24.741c0 1.626-1.14 2.71-2.902 2.71h-5.009c-.106 2.498-2.412 5.049-6.082 5.049-3.684 0-5.99-2.551-6.096-5.05H6.902C5.14 27.45 4 26.368 4 24.742m5.075-1.084h17.73v-.132a5.1 5.1 0 0 1-1.762-1.507c-.768-.978-1.153-3.529-1.352-5.816-.291-4.044-1.709-5.67-3.418-6.12-.305-.079-.49-.211-.544-.647-.132-1.23-.755-1.943-1.722-1.943-.981 0-1.604.714-1.736 1.943-.053.436-.239.568-.544.647-1.709.45-3.127 2.076-3.418 6.12-.2 2.287-.57 4.838-1.352 5.816-.517.674-1.206 1.163-1.882 1.507zm6.732 3.794c.093 1.242.994 2.101 2.2 2.101 1.192 0 2.093-.859 2.186-2.101z"
|
|
48
48
|
></path>
|
|
49
49
|
</svg>
|
|
50
50
|
|
|
@@ -44,7 +44,7 @@ class l extends HTMLElement {
|
|
|
44
44
|
viewBox="0 0 36 36"
|
|
45
45
|
>
|
|
46
46
|
<path
|
|
47
|
-
d="M25.5
|
|
47
|
+
d="M25.5 18c0 .79-.288 1.441-.983 2.091L14.853 29.3c-.498.484-1.075.701-1.77.701-1.416 0-2.583-1.122-2.583-2.487 0-.688.302-1.326.84-1.849l8.168-7.677-8.169-7.651c-.55-.523-.839-1.173-.839-1.85C10.5 7.136 11.667 6 13.083 6c.708 0 1.272.23 1.77.701l9.664 9.208c.681.65.97 1.288.983 2.091"
|
|
48
48
|
></path>
|
|
49
49
|
</svg>
|
|
50
50
|
|
|
@@ -44,7 +44,7 @@ class c extends HTMLElement {
|
|
|
44
44
|
viewBox="0 0 36 36"
|
|
45
45
|
>
|
|
46
46
|
<path
|
|
47
|
-
d="M17.992
|
|
47
|
+
d="M17.992 35C8.65 35 1 27.35 1 18.008S8.65 1 17.992 1 35 8.666 35 18.008 27.334 35 17.992 35m0-4.932c6.686 0 12.06-5.39 12.06-12.06 0-6.686-5.39-12.06-12.06-12.06s-12.06 5.374-12.06 12.06c0 6.67 5.39 12.06 12.06 12.06m-3.92-6.37c-1.09 0-1.802-.648-1.802-1.675v-8.077c0-1.012.711-1.66 1.802-1.66h7.824c1.091 0 1.802.648 1.802 1.66v8.077c0 1.027-.711 1.675-1.802 1.675z"
|
|
48
48
|
></path>
|
|
49
49
|
</svg>
|
|
50
50
|
|
|
@@ -44,7 +44,7 @@ class l extends HTMLElement {
|
|
|
44
44
|
viewBox="0 0 36 36"
|
|
45
45
|
>
|
|
46
46
|
<path
|
|
47
|
-
d="M7.698
|
|
47
|
+
d="M7.698 20.5C6.327 20.5 5 19.359 5 18s1.327-2.5 2.698-2.5h20.604C29.732 15.5 31 16.641 31 18s-1.267 2.5-2.698 2.5z"
|
|
48
48
|
></path>
|
|
49
49
|
</svg>
|
|
50
50
|
|
|
@@ -44,7 +44,7 @@ class l extends HTMLElement {
|
|
|
44
44
|
viewBox="0 0 36 36"
|
|
45
45
|
>
|
|
46
46
|
<path
|
|
47
|
-
d="
|
|
47
|
+
d="M17.993 7.606c-1.081 0-1.994-.914-1.994-1.996V3.024c0-1.096.913-2.024 1.994-2.024 1.095 0 2.008.928 2.008 2.024V5.61c0 1.082-.913 1.996-2.008 1.996m7.373 3.12c-.772-.773-.787-2.094-.042-2.839l1.84-1.841c.758-.76 2.064-.787 2.808-.042.773.773.787 2.08.043 2.839l-1.826 1.841c-.773.773-2.079.787-2.823.042m-14.746 0c-.744.745-2.05.731-2.809-.042L5.986 8.83c-.745-.745-.73-2.052.042-2.825.744-.745 2.05-.717 2.808.042l1.826 1.841c.744.745.73 2.066-.042 2.84m7.373 15.377c-4.424 0-8.075-3.655-8.075-8.096s3.651-8.096 8.075-8.096c4.438 0 8.09 3.655 8.09 8.096s-3.652 8.096-8.09 8.096m10.42-8.096c0-1.082.913-1.996 1.995-1.996h2.584c1.095 0 2.008.914 2.008 1.996s-.913 1.996-2.008 1.996h-2.584c-1.082 0-1.995-.914-1.995-1.996m-20.812 0c0 1.082-.927 1.996-2.023 1.996H2.994C1.913 20.003 1 19.089 1 18.007s.913-1.996 1.994-1.996h2.584c1.096 0 2.023.914 2.023 1.996m17.723 7.337c.772-.773 2.078-.787 2.837-.042L30 27.143c.772.759.786 2.066.041 2.811-.772.773-2.078.787-2.836.042l-1.84-1.827c-.772-.773-.787-2.08-.042-2.825m-14.662 0c.744.745.73 2.052-.042 2.825l-1.84 1.827c-.744.745-2.05.731-2.837-.042-.73-.745-.73-2.066.043-2.825l1.853-1.827c.745-.745 2.05-.731 2.823.042m7.331 3.05c1.095 0 2.008.914 2.008 2.01v2.586c0 1.082-.913 2.01-2.008 2.01-1.081 0-1.994-.928-1.994-2.01v-2.586c0-1.096.913-2.01 1.994-2.01"
|
|
48
48
|
></path>
|
|
49
49
|
</svg>
|
|
50
50
|
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
class r extends HTMLElement {
|
|
2
|
+
static get observedAttributes() {
|
|
3
|
+
return ["size", "color", "flip"];
|
|
4
|
+
}
|
|
5
|
+
constructor() {
|
|
6
|
+
super(), this.attachShadow({ mode: "open" });
|
|
7
|
+
}
|
|
8
|
+
connectedCallback() {
|
|
9
|
+
this.render();
|
|
10
|
+
}
|
|
11
|
+
attributeChangedCallback(c, t, l) {
|
|
12
|
+
(c === "size" || c === "color" || c === "flip") && t !== l && this.render();
|
|
13
|
+
}
|
|
14
|
+
render() {
|
|
15
|
+
const c = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = this.hasAttribute("flip"), i = t && {
|
|
16
|
+
default: "var(--icon-color-default)",
|
|
17
|
+
inverted: "var(--icon-color-inverted)"
|
|
18
|
+
}[t] || t || "var(--icon-color-default)", e = {
|
|
19
|
+
"x-small": "1.6rem",
|
|
20
|
+
small: "2.4rem",
|
|
21
|
+
medium: "3.6rem",
|
|
22
|
+
large: "4.8rem"
|
|
23
|
+
}, a = e[c] ?? e.small, s = "M31.727 14.897c2.36 0 4.273 1.888 4.273 4.217v8.771l-.006.219c-.111 2.155-1.863 3.883-4.047 3.993l-.22.007-4.19-.001c-1.416 1.214-3.194 2.634-4.596 3.462-.246.145-.67.374-1.138.422-1.328.133-2.067-.772-2.067-1.937v-1.953h-.787c-2.257-.113-4.052-1.956-4.053-4.212v-8.77c0-2.33 1.914-4.218 4.273-4.218zm-6.279 4.158c-1.032 0-1.692.527-2.054 1.647l-1.747 5.163c-.253.747.044 1.802 1.186 1.802.68 0 1.088-.385 1.264-1.164l.197-.571h2.361l.197.571c.176.78.584 1.164 1.276 1.164 1.142 0 1.427-1.066 1.186-1.802l-1.758-5.163c-.352-1.097-1.043-1.647-2.108-1.647m.746 4.977h-1.438l.692-2.692h.055zM19.056.006c2.523.127 4.53 2.186 4.53 4.707v8.942h-2.98V4.714c0-.92-.767-1.733-1.796-1.733H4.775c-1.028 0-1.795.812-1.796 1.733v9.803l.008.166c.082.812.756 1.5 1.657 1.562h.764a2.98 2.98 0 0 1 2.98 2.98v.724c1.18-.81 2.57-1.924 3.802-2.98l.208-.163a3 3 0 0 1 1.73-.554h.038a4.64 4.64 0 0 0-.51 2.117v1.263c-1.493 1.258-3.25 2.634-4.665 3.469l-.241.135c-.274.143-.638.297-1.03.337l-.272.014c-1.313.007-2.04-.959-2.04-2.18v-2.181H4.53l-.235-.019c-2.334-.23-4.173-2.119-4.29-4.455L0 14.517V4.713C0 2.11 2.138.001 4.775 0H18.81zm-3.45 7.436c.593 0 1.031.406 1.032.955 0 .56-.45.988-1.032.988h-.737a7.4 7.4 0 0 1-1.494 2.746 7.9 7.9 0 0 0 2.373.957c.637.121.956.626.791 1.252-.143.549-.725.813-1.428.66a9 9 0 0 1-3.208-1.473 9.2 9.2 0 0 1-3.361 1.482c-.604.165-1.165-.13-1.32-.679a1.03 1.03 0 0 1 .804-1.242c.945-.241 1.724-.561 2.372-.957a8.2 8.2 0 0 1-1.493-2.746H8.17c-.582 0-1.033-.428-1.033-.988 0-.55.44-.955 1.033-.955zm-4.625 1.943c.22.527.538 1.044.922 1.505.384-.472.682-.978.89-1.505zm-.374-5.24c.495-.263 1.077-.054 1.352.506l.516 1.076c.241.505.043 1.088-.506 1.363-.494.219-1.065 0-1.318-.527l-.505-1.067a.99.99 0 0 1 .461-1.351", o = "M31.727 14.897c2.36 0 4.273 1.888 4.273 4.217v8.771l-.006.218c-.111 2.156-1.863 3.884-4.047 3.994l-.22.007-4.19-.001c-1.416 1.214-3.194 2.634-4.596 3.462-.246.145-.67.375-1.138.422-1.328.134-2.067-.773-2.067-1.937v-1.953h-.787c-2.257-.114-4.052-1.956-4.053-4.212v-8.77c0-2.33 1.913-4.218 4.273-4.218zm-9.84 5.891c-.592 0-1.032.407-1.032.956 0 .56.45.989 1.033.989h.736a8.2 8.2 0 0 0 1.493 2.746c-.648.395-1.428.715-2.372.956a1.03 1.03 0 0 0-.803 1.242c.154.549.715.844 1.32.68a9.2 9.2 0 0 0 3.36-1.483 9 9 0 0 0 3.209 1.472c.703.154 1.285-.11 1.428-.659.164-.626-.155-1.13-.792-1.252a7.9 7.9 0 0 1-2.372-.956 7.4 7.4 0 0 0 1.493-2.746h.737c.582 0 1.032-.43 1.032-.99 0-.548-.439-.954-1.032-.955zm4.626 1.945a5.7 5.7 0 0 1-.89 1.504 6 6 0 0 1-.923-1.504zM19.056.006c2.523.127 4.53 2.186 4.53 4.707v8.942h-2.98V4.713c0-.92-.767-1.733-1.796-1.733H4.775c-1.028 0-1.795.813-1.795 1.733v9.803l.007.166c.082.812.756 1.5 1.656 1.563h.765a2.98 2.98 0 0 1 2.98 2.98v.722c1.18-.809 2.57-1.922 3.802-2.979l.208-.163a2.98 2.98 0 0 1 1.731-.554h.037a4.64 4.64 0 0 0-.51 2.118v1.262c-1.494 1.258-3.25 2.634-4.665 3.47l-.24.134c-.275.143-.639.297-1.031.337l-.272.014c-1.314.007-2.04-.959-2.04-2.18v-2.181H4.53l-.235-.019c-2.334-.23-4.173-2.119-4.29-4.455L0 14.517V4.713C0 2.11 2.138 0 4.775 0H18.81zm6.621 17.992c-.274-.56-.857-.77-1.351-.506a.99.99 0 0 0-.46 1.352l.505 1.066c.252.526.823.746 1.317.527.55-.275.748-.857.506-1.363zM11.831 5.338c1.065 0 1.756.55 2.108 1.647l1.758 5.163c.241.736-.044 1.801-1.186 1.802-.692 0-1.1-.384-1.275-1.164l-.198-.57h-2.361l-.198.57c-.176.78-.583 1.164-1.263 1.164-1.143 0-1.44-1.055-1.187-1.802l1.747-5.163c.362-1.12 1.022-1.647 2.055-1.647m-.693 4.976h1.44l-.693-2.691h-.054z";
|
|
24
|
+
this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
|
|
25
|
+
`
|
|
26
|
+
<style>
|
|
27
|
+
:host {
|
|
28
|
+
width: ${a};
|
|
29
|
+
height: ${a};
|
|
30
|
+
display: inline-flex;
|
|
31
|
+
align-items: center;
|
|
32
|
+
justify-content: center;
|
|
33
|
+
fill: ${i};
|
|
34
|
+
}
|
|
35
|
+
svg {
|
|
36
|
+
width: 100%;
|
|
37
|
+
display: block;
|
|
38
|
+
fill: inherit;
|
|
39
|
+
}
|
|
40
|
+
</style>
|
|
41
|
+
|
|
42
|
+
<svg
|
|
43
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
44
|
+
viewBox="0 0 36 36"
|
|
45
|
+
>
|
|
46
|
+
<path d="${l ? o : s}"></path>
|
|
47
|
+
</svg>
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
`);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
customElements.get("mui-icon-translate") || customElements.define("mui-icon-translate", r);
|
|
@@ -43,9 +43,9 @@ class l extends HTMLElement {
|
|
|
43
43
|
xmlns="http://www.w3.org/2000/svg"
|
|
44
44
|
viewBox="0 0 36 36"
|
|
45
45
|
>
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
<path
|
|
47
|
+
d="M18 5c.683 0 1.41.288 1.86.748l9.356 9.266c.522.518.784 1.137.784 1.741 0 1.482-1.032 2.475-2.383 2.475-.784 0-1.365-.346-1.815-.82l-3.255-3.223-2.179-2.331.16 2.978v12.533C20.528 29.95 19.51 31 18 31c-1.525 0-2.542-1.05-2.542-2.633V15.834l.16-2.978-2.18 2.33-3.24 3.224c-.45.474-1.03.82-1.815.82C7.03 19.23 6 18.237 6 16.755c0-.604.276-1.223.785-1.74l9.34-9.267C16.577 5.288 17.318 5 18 5"
|
|
48
|
+
></path>
|
|
49
49
|
</svg>
|
|
50
50
|
|
|
51
51
|
|
|
@@ -44,7 +44,7 @@ class r extends HTMLElement {
|
|
|
44
44
|
viewBox="0 0 36 36"
|
|
45
45
|
>
|
|
46
46
|
<path
|
|
47
|
-
d="m6.701
|
|
47
|
+
d="m6.701 20.94 9.208-9.01c.663-.649 1.3-.93 2.091-.93.816.012 1.441.293 2.104.93l9.195 9.01c.484.465.701.991.701 1.651C30 23.911 28.878 25 27.513 25a2.52 2.52 0 0 1-1.836-.782L18.026 16.6l-7.69 7.618c-.523.513-1.16.782-1.85.782C7.123 25 6 23.912 6 22.591c0-.648.23-1.186.701-1.65"
|
|
48
48
|
></path>
|
|
49
49
|
</svg>
|
|
50
50
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { getPartMap as n } from "../../utils/part-map/index.js";
|
|
2
2
|
class u extends HTMLElement {
|
|
3
3
|
static get observedAttributes() {
|
|
4
|
-
return ["target", "href", "variant", "weight", "size"];
|
|
4
|
+
return ["target", "href", "variant", "weight", "size", "download"];
|
|
5
5
|
}
|
|
6
6
|
constructor() {
|
|
7
7
|
super(), this.attachShadow({ mode: "open" });
|
|
@@ -9,30 +9,35 @@ class u extends HTMLElement {
|
|
|
9
9
|
async connectedCallback() {
|
|
10
10
|
this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("weight") || this.setAttribute("weight", "regular"), this.hasAttribute("variant") || this.setAttribute("variant", "default"), await this.waitForPartMap(), this.render(), requestAnimationFrame(() => this.updateSlotState());
|
|
11
11
|
}
|
|
12
|
-
attributeChangedCallback(t,
|
|
12
|
+
attributeChangedCallback(t, a, r) {
|
|
13
13
|
if (this.shadowRoot) {
|
|
14
14
|
if (t === "href") {
|
|
15
|
-
const
|
|
16
|
-
|
|
15
|
+
const o = this.shadowRoot.querySelector("a");
|
|
16
|
+
o && o.setAttribute("href", r || "#");
|
|
17
17
|
}
|
|
18
18
|
if (t === "target") {
|
|
19
|
-
const
|
|
20
|
-
|
|
19
|
+
const o = this.shadowRoot.querySelector("a");
|
|
20
|
+
o && o.setAttribute("target", r || "_self");
|
|
21
|
+
}
|
|
22
|
+
if (t === "download") {
|
|
23
|
+
const o = this.shadowRoot.querySelector("a");
|
|
24
|
+
if (!o) return;
|
|
25
|
+
r !== null ? o.setAttribute("download", r === "" ? "" : r) : o.removeAttribute("download");
|
|
21
26
|
}
|
|
22
27
|
}
|
|
23
28
|
}
|
|
24
29
|
updateSlotState() {
|
|
25
|
-
const t = this.shadowRoot,
|
|
26
|
-
(
|
|
30
|
+
const t = this.shadowRoot, a = t.querySelector("slot:not([name])"), r = t.querySelector('slot[name="before"]'), o = t.querySelector('slot[name="after"]'), s = (e) => !!e && e.assignedNodes({ flatten: !0 }).some(
|
|
31
|
+
(i) => {
|
|
27
32
|
var l;
|
|
28
|
-
return
|
|
33
|
+
return i.nodeType === Node.ELEMENT_NODE || i.nodeType === Node.TEXT_NODE && !!((l = i.textContent) != null && l.trim());
|
|
29
34
|
}
|
|
30
|
-
), d = s(
|
|
35
|
+
), d = s(r), h = s(o);
|
|
31
36
|
this.classList.toggle("has-before", d), this.classList.toggle("has-after", h);
|
|
32
|
-
const c = (
|
|
33
|
-
(
|
|
34
|
-
var
|
|
35
|
-
return
|
|
37
|
+
const c = (a == null ? void 0 : a.assignedNodes({ flatten: !0 })) ?? [], v = c.length > 0 && c.every(
|
|
38
|
+
(e) => {
|
|
39
|
+
var i;
|
|
40
|
+
return e.nodeType === Node.ELEMENT_NODE ? e.classList.contains("mui-icon") || e.tagName.toLowerCase() === "svg" : !((i = e.textContent) != null && i.trim());
|
|
36
41
|
}
|
|
37
42
|
);
|
|
38
43
|
this.toggleAttribute("icon-only", v);
|
|
@@ -145,10 +150,10 @@ class u extends HTMLElement {
|
|
|
145
150
|
cursor: not-allowed;
|
|
146
151
|
}
|
|
147
152
|
|
|
148
|
-
:host([variant="primary"]) ::slotted(.mui-icon) { fill: var(--action-primary-text-color); }
|
|
149
|
-
:host([variant="primary"]):hover ::slotted(.mui-icon) { fill: var(--action-primary-text-color-hover); }
|
|
150
|
-
:host([variant="primary"]):focus ::slotted(.mui-icon) { fill: var(--action-primary-text-color-focus); }
|
|
151
|
-
:host([variant="primary"]):disabled ::slotted(.mui-icon) { fill: var(--action-primary-text-color-disabled); }
|
|
153
|
+
:host([variant="primary"]) a ::slotted(.mui-icon) { fill: var(--action-primary-text-color); }
|
|
154
|
+
:host([variant="primary"]) a:hover ::slotted(.mui-icon) { fill: var(--action-primary-text-color-hover); }
|
|
155
|
+
:host([variant="primary"]) a:focus ::slotted(.mui-icon) { fill: var(--action-primary-text-color-focus); }
|
|
156
|
+
:host([variant="primary"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-primary-text-color-disabled); }
|
|
152
157
|
|
|
153
158
|
/* Button Secondary
|
|
154
159
|
========================================= */
|
|
@@ -177,10 +182,10 @@ class u extends HTMLElement {
|
|
|
177
182
|
cursor: not-allowed;
|
|
178
183
|
}
|
|
179
184
|
|
|
180
|
-
:host([variant="secondary"]) ::slotted(.mui-icon) { fill: var(--action-secondary-text-color); }
|
|
181
|
-
:host([variant="secondary"]):hover ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-hover); }
|
|
182
|
-
:host([variant="secondary"]):focus ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-focus); }
|
|
183
|
-
:host([variant="secondary"]):disabled ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-disabled); }
|
|
185
|
+
:host([variant="secondary"]) a ::slotted(.mui-icon) { fill: var(--action-secondary-text-color); }
|
|
186
|
+
:host([variant="secondary"]) a:hover ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-hover); }
|
|
187
|
+
:host([variant="secondary"]) a:focus ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-focus); }
|
|
188
|
+
:host([variant="secondary"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-disabled); }
|
|
184
189
|
|
|
185
190
|
/* Button Tertiary
|
|
186
191
|
========================================= */
|
|
@@ -209,10 +214,10 @@ class u extends HTMLElement {
|
|
|
209
214
|
cursor: not-allowed;
|
|
210
215
|
}
|
|
211
216
|
|
|
212
|
-
:host([variant="tertiary"]) ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color); }
|
|
213
|
-
:host([variant="tertiary"]):hover ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-hover); }
|
|
214
|
-
:host([variant="tertiary"]):focus ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-focus); }
|
|
215
|
-
:host([variant="tertiary"]):disabled ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-disabled); }
|
|
217
|
+
:host([variant="tertiary"]) a ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color); }
|
|
218
|
+
:host([variant="tertiary"]) a:hover ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-hover); }
|
|
219
|
+
:host([variant="tertiary"]) a:focus ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-focus); }
|
|
220
|
+
:host([variant="tertiary"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-disabled); }
|
|
216
221
|
|
|
217
222
|
/* Button Attention
|
|
218
223
|
========================================= */
|
|
@@ -241,10 +246,10 @@ class u extends HTMLElement {
|
|
|
241
246
|
cursor: not-allowed;
|
|
242
247
|
}
|
|
243
248
|
|
|
244
|
-
:host([variant="attention"]) ::slotted(.mui-icon) { fill: var(--action-attention-text-color); }
|
|
245
|
-
:host([variant="attention"]):hover ::slotted(.mui-icon) { fill: var(--action-attention-text-color-hover); }
|
|
246
|
-
:host([variant="attention"]):focus ::slotted(.mui-icon) { fill: var(--action-attention-text-color-focus); }
|
|
247
|
-
:host([variant="attention"]):disabled ::slotted(.mui-icon) { fill: var(--action-attention-text-color-disabled); }
|
|
249
|
+
:host([variant="attention"]) a ::slotted(.mui-icon) { fill: var(--action-attention-text-color); }
|
|
250
|
+
:host([variant="attention"]) a:hover ::slotted(.mui-icon) { fill: var(--action-attention-text-color-hover); }
|
|
251
|
+
:host([variant="attention"]) a:focus ::slotted(.mui-icon) { fill: var(--action-attention-text-color-focus); }
|
|
252
|
+
:host([variant="attention"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-attention-text-color-disabled); }
|
|
248
253
|
|
|
249
254
|
/* Icon only
|
|
250
255
|
========================================= */
|
|
@@ -340,6 +345,7 @@ class u extends HTMLElement {
|
|
|
340
345
|
part="${t}"
|
|
341
346
|
target="${this.getAttribute("target") || "_self"}"
|
|
342
347
|
href="${this.getAttribute("href") || "#"}"
|
|
348
|
+
${this.hasAttribute("download") ? `download="${this.getAttribute("download") || ""}"` : ""}
|
|
343
349
|
>
|
|
344
350
|
<slot name="before"></slot>
|
|
345
351
|
<slot></slot>
|
|
@@ -350,10 +356,10 @@ class u extends HTMLElement {
|
|
|
350
356
|
waitForPartMap() {
|
|
351
357
|
return new Promise((t) => {
|
|
352
358
|
if (typeof n == "function") return t();
|
|
353
|
-
const
|
|
354
|
-
typeof n == "function" ? t() : requestAnimationFrame(
|
|
359
|
+
const a = () => {
|
|
360
|
+
typeof n == "function" ? t() : requestAnimationFrame(a);
|
|
355
361
|
};
|
|
356
|
-
|
|
362
|
+
a();
|
|
357
363
|
});
|
|
358
364
|
}
|
|
359
365
|
}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
class o extends HTMLElement {
|
|
2
|
+
static get observedAttributes() {
|
|
3
|
+
return ["loading", "animation", "direction", "duration"];
|
|
4
|
+
}
|
|
5
|
+
constructor() {
|
|
6
|
+
super(), this.attachShadow({ mode: "open" });
|
|
7
|
+
}
|
|
8
|
+
connectedCallback() {
|
|
9
|
+
this.render();
|
|
10
|
+
}
|
|
11
|
+
attributeChangedCallback(e, a, n) {
|
|
12
|
+
a !== n && this.render();
|
|
13
|
+
}
|
|
14
|
+
render() {
|
|
15
|
+
const e = this.hasAttribute("loading"), a = this.getAttribute("animation") || "fade-in", n = this.getAttribute("direction") || "up", t = this.getAttribute("duration") || "1s";
|
|
16
|
+
let r = "";
|
|
17
|
+
a === "translate" ? r = `translate-${n}` : r = a, this.shadowRoot.innerHTML = /*html*/
|
|
18
|
+
`
|
|
19
|
+
<style>
|
|
20
|
+
:host {
|
|
21
|
+
display: block;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@keyframes fadeIn {
|
|
25
|
+
from { opacity: 0; }
|
|
26
|
+
to { opacity: 1; }
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@keyframes pulsate {
|
|
30
|
+
0% { opacity: 0.1; }
|
|
31
|
+
50% { opacity: 1; }
|
|
32
|
+
100% { opacity: 0.1; }
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@keyframes translate-up {
|
|
36
|
+
from { transform: translateY(20px); opacity: 0; }
|
|
37
|
+
to { transform: translateY(0); opacity: 1; }
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@keyframes translate-down {
|
|
41
|
+
from { transform: translateY(-20px); opacity: 0; }
|
|
42
|
+
to { transform: translateY(0); opacity: 1; }
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@keyframes translate-left {
|
|
46
|
+
from { transform: translateX(20px); opacity: 0; }
|
|
47
|
+
to { transform: translateX(0); opacity: 1; }
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@keyframes translate-right {
|
|
51
|
+
from { transform: translateX(-20px); opacity: 0; }
|
|
52
|
+
to { transform: translateX(0); opacity: 1; }
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.fade-in {
|
|
56
|
+
animation: fadeIn var(--fade-duration, ${t}) ease-in-out;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.pulsate {
|
|
60
|
+
animation: pulsate var(--pulsate-duration, ${t}) ease-in-out infinite;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.translate-up {
|
|
64
|
+
animation: translate-up var(--translate-duration, ${t}) ease-out forwards;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.translate-down {
|
|
68
|
+
animation: translate-down var(--translate-duration, ${t}) ease-out forwards;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.translate-left {
|
|
72
|
+
animation: translate-left var(--translate-duration, ${t}) ease-out forwards;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.translate-right {
|
|
76
|
+
animation: translate-right var(--translate-duration, ${t}) ease-out forwards;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.loadingFullHeight {
|
|
80
|
+
height: 100vh;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@media (prefers-reduced-motion: reduce) {
|
|
84
|
+
.fade-in, .pulsate, .translate-up, .translate-down, .translate-left, .translate-right {
|
|
85
|
+
animation: none !important;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
</style>
|
|
89
|
+
|
|
90
|
+
<div class="${e ? r : ""}" role="status" aria-busy="${e}">
|
|
91
|
+
<span style="position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;">
|
|
92
|
+
Loading...
|
|
93
|
+
</span>
|
|
94
|
+
<slot></slot>
|
|
95
|
+
</div>
|
|
96
|
+
`;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
customElements.get("mui-loader") || customElements.define("mui-loader", o);
|