@universal-material/web 3.0.26 → 3.0.28
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/button/button-set.d.ts +1 -1
- package/button/button-set.d.ts.map +1 -1
- package/button/button-set.js +2 -2
- package/button/button-set.js.map +1 -1
- package/button/button-set.styles.js +6 -6
- package/button/button-set.styles.js.map +1 -1
- package/css/universal-material.css +1 -22
- package/css/universal-material.min.css +2 -2
- package/custom-elements.json +401 -401
- package/navigation/side-navigation.d.ts +1 -0
- package/navigation/side-navigation.d.ts.map +1 -1
- package/navigation/side-navigation.js +1 -0
- package/navigation/side-navigation.js.map +1 -1
- package/package.json +1 -1
- package/scss/_common.scss +0 -22
- package/shared/base.styles.d.ts.map +1 -1
- package/shared/base.styles.js +19 -0
- package/shared/base.styles.js.map +1 -1
- package/snackbar/snackbar.d.ts +2 -0
- package/snackbar/snackbar.d.ts.map +1 -1
- package/snackbar/snackbar.js +2 -0
- package/snackbar/snackbar.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../src/navigation/side-navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAQ3D,qBACa,gBAAiB,SAAQ,UAAU;;IAE9C,OAAgB,MAAM,4BAGlB;IAGJ,OAAO,CAAC,qBAAqB,CAAS;IAEtC;;;;;OAKG;IACH,IACI,YAAY,IACe,OAAO,CADW;IACjD,IAAI,YAAY,CAAC,YAAY,EAAE,OAAO,EAMrC;IAG0B,eAAe,EAAG,GAAG,CAAC;IAChC,KAAK,EAAG,WAAW,CAAC;IACT,eAAe,EAAE,WAAW,GAAG,SAAS,CAAC;IAE5D,MAAM,IAAI,kBAAkB;IAMrC,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,uBAAuB;IAS/B,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,sBAAsB;IAiB9B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,UAAU;CAInB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,gBAAgB,CAAC;KACvC;CACF"}
|
|
1
|
+
{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../src/navigation/side-navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAQ3D,OAAO,2BAA2B,CAAC;AAEnC,qBACa,gBAAiB,SAAQ,UAAU;;IAE9C,OAAgB,MAAM,4BAGlB;IAGJ,OAAO,CAAC,qBAAqB,CAAS;IAEtC;;;;;OAKG;IACH,IACI,YAAY,IACe,OAAO,CADW;IACjD,IAAI,YAAY,CAAC,YAAY,EAAE,OAAO,EAMrC;IAG0B,eAAe,EAAG,GAAG,CAAC;IAChC,KAAK,EAAG,WAAW,CAAC;IACT,eAAe,EAAE,WAAW,GAAG,SAAS,CAAC;IAE5D,MAAM,IAAI,kBAAkB;IAMrC,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,uBAAuB;IAS/B,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,sBAAsB;IAiB9B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,UAAU;CAInB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,gBAAgB,CAAC;KACvC;CACF"}
|
|
@@ -22,6 +22,7 @@ import { config } from '../config.js';
|
|
|
22
22
|
import { styles as baseStyles } from '../shared/base.styles.js';
|
|
23
23
|
import { styles as swiperStyles } from './side-navigation-swiper.styles.js';
|
|
24
24
|
import { styles } from './side-navigation.styles.js';
|
|
25
|
+
import '../elevation/elevation.js';
|
|
25
26
|
let UmSideNavigation = class UmSideNavigation extends LitElement {
|
|
26
27
|
constructor() {
|
|
27
28
|
super(...arguments);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../src/navigation/side-navigation.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../src/navigation/side-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport { config } from '../config.js';\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles as swiperStyles } from './side-navigation-swiper.styles.js';\nimport { styles } from './side-navigation.styles.js';\n\nimport '../elevation/elevation.js';\n\n@customElement('u-side-navigation')\nexport class UmSideNavigation extends LitElement {\n\n static override styles = [\n baseStyles,\n config.navigationDrawer.useSwiperJs ? swiperStyles : styles\n ];\n\n #toggleDrawer = false;\n private disableSlideAnimation = false;\n\n /**\n * Toggle the navigation drawer visibility\n *\n * _Modal drawer_: Open if `true`, closed if `false`\n * _Standard drawer_: Collapsed if `true`, visible if `false`\n */\n @property({type: Boolean, attribute: 'toggle-drawer'})\n get toggleDrawer() { return this.#toggleDrawer; }\n set toggleDrawer(toggleDrawer: boolean) {\n this.#toggleDrawer = toggleDrawer;\n\n if (!this.disableSlideAnimation) {\n this.swiperContainer?.swiper?.slideTo(toggleDrawer ? 0 : 1);\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @query('swiper-container') swiperContainer!: any;\n @query('.scrim') scrim!: HTMLElement;\n @query('#scroll-container') scrollContainer: HTMLElement | undefined;\n\n override render(): HTMLTemplateResult {\n return config.navigationDrawer.useSwiperJs\n ? this.renderWithSwipe()\n : this.renderDefault();\n }\n\n private renderDefault() {\n return html`\n <div class=\"grid container\">\n <div>\n <div class=\"navigation\">\n <div class=\"scrim ${this.toggleDrawer ? 'toggle' : ''}\" @click=\"${this.scrimClick}\"></div>\n <div class=\"drawer ${this.toggleDrawer ? 'toggle' : ''}\">\n <u-elevation></u-elevation>\n <div class=\"drawer-container\">\n <slot name=\"drawer\"></slot>\n </div>\n </div>\n <slot name=\"rail\"></slot>\n </div>\n </div>\n <div class=\"content\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n private renderWithSwipe() {\n return html`\n <swiper-container\n class=\"container\"\n initial-slide=\"1\"\n resistance-ratio=\"0\"\n slides-per-view=\"auto\"\n simulate-touch=\"false\"\n @swiperactiveindexchange=\"${this.swiperActiveIndexChange}\"\n @swiperslidermove=\"${this.swiperSliderMove}\"\n @swipertransitionend=\"${this.swiperTransitionEnd}\"\n @swipertransitionstart=\"${this.swiperTransitionStart}\"\n @swiperslidesgridlengthchange=\"${this.slidesGridLengthChange}\">\n <swiper-slide class=\"drawer ${this.toggleDrawer ? 'toggle' : ''}\">\n <u-elevation></u-elevation>\n <div class=\"drawer-container\">\n <slot name=\"drawer\"></slot>\n </div>\n </swiper-slide>\n <swiper-slide class=\"dummy-slide\"></swiper-slide>\n\n <div id=\"scroll-container\" class=\"content\" slot=\"container-end\">\n <slot></slot>\n </div>\n <div class=\"scrim ${this.toggleDrawer ? 'toggle' : ''}\" @click=\"${this.scrimClick}\" slot=\"container-end\"></div>\n </swiper-container>`;\n }\n\n private swiperActiveIndexChange() {\n\n if (!this.swiperContainer?.swiper) {\n return;\n }\n\n this.toggleDrawer = !this.swiperContainer.swiper.activeIndex;\n }\n\n private swiperTransitionStart() {\n this.scrim.classList.add('moving');\n }\n\n private slidesGridLengthChange() {\n if (!this.swiperContainer?.swiper) {\n return;\n }\n\n this.classList.add('disable-transition');\n\n const gridLength = this.swiperContainer.swiper.snapGrid.length;\n this.swiperContainer.swiper.slideTo(gridLength === 1 ? 0 : 1, 0);\n this.disableSlideAnimation = true;\n this.toggleDrawer = true;\n this.toggleDrawer = false;\n this.disableSlideAnimation = false;\n setTimeout(() =>\n this.classList.remove('disable-transition'));\n }\n\n private swiperTransitionEnd() {\n this.scrim.style.removeProperty('--_modal-drawer-open-progress');\n this.scrim.classList.remove('moving');\n }\n\n private swiperSliderMove(e: Event) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const swiper = (<any>e).detail[0];\n this.scrim.style.setProperty('--_modal-drawer-open-progress', `${1 - swiper.progress}`);\n }\n\n private scrimClick() {\n this.toggleDrawer = false;\n this.swiperContainer.swiper.slideTo(1);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-side-navigation': UmSideNavigation;\n }\n}\n"]}
|
package/package.json
CHANGED
package/scss/_common.scss
CHANGED
|
@@ -1,27 +1,5 @@
|
|
|
1
1
|
@use "functions";
|
|
2
2
|
|
|
3
|
-
* {
|
|
4
|
-
outline: 0;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
*:focus-visible {
|
|
8
|
-
animation: u-focus-pulse 400ms ease;
|
|
9
|
-
animation-fill-mode: forwards;
|
|
10
|
-
outline-offset: 2px;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
@keyframes u-focus-pulse {
|
|
14
|
-
0% {
|
|
15
|
-
outline: 2px solid var(--u-color-primary);
|
|
16
|
-
}
|
|
17
|
-
50% {
|
|
18
|
-
outline: 4px solid var(--u-color-primary);
|
|
19
|
-
}
|
|
20
|
-
100% {
|
|
21
|
-
outline: 2px solid var(--u-color-primary);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
3
|
a {
|
|
26
4
|
border-radius: #{functions.get-spacing-var(extra-small)};
|
|
27
5
|
text-decoration: none;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base.styles.d.ts","sourceRoot":"","sources":["../../src/shared/base.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"base.styles.d.ts","sourceRoot":"","sources":["../../src/shared/base.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAyBlB,CAAC"}
|
package/shared/base.styles.js
CHANGED
|
@@ -4,6 +4,25 @@ export const styles = css `
|
|
|
4
4
|
* {
|
|
5
5
|
font-family: var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
|
6
6
|
box-sizing: border-box;
|
|
7
|
+
outline: 0;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
*:focus-visible {
|
|
11
|
+
animation: u-focus-pulse 400ms ease;
|
|
12
|
+
animation-fill-mode: forwards;
|
|
13
|
+
outline-offset: 2px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@keyframes u-focus-pulse {
|
|
17
|
+
0% {
|
|
18
|
+
outline: 2px solid var(--u-color-primary);
|
|
19
|
+
}
|
|
20
|
+
50% {
|
|
21
|
+
outline: 4px solid var(--u-color-primary);
|
|
22
|
+
}
|
|
23
|
+
100% {
|
|
24
|
+
outline: 2px solid var(--u-color-primary);
|
|
25
|
+
}
|
|
7
26
|
}
|
|
8
27
|
`;
|
|
9
28
|
//# sourceMappingURL=base.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base.styles.js","sourceRoot":"","sources":["../../src/shared/base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"base.styles.js","sourceRoot":"","sources":["../../src/shared/base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CAyBzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host,\n * {\n font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n box-sizing: border-box;\n outline: 0;\n }\n\n *:focus-visible {\n animation: u-focus-pulse 400ms ease;\n animation-fill-mode: forwards;\n outline-offset: 2px;\n }\n\n @keyframes u-focus-pulse {\n 0% {\n outline: 2px solid var(--u-color-primary);\n }\n 50% {\n outline: 4px solid var(--u-color-primary);\n }\n 100% {\n outline: 2px solid var(--u-color-primary);\n }\n }\n`;\n"]}
|
package/snackbar/snackbar.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snackbar.d.ts","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAMpE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,oBAAY,gBAAgB;IAC1B,KAAK,OAAO;IACZ,IAAI,OAAO;IACX,QAAQ,KAAK;CACd;AAED,qBACa,UAAW,SAAQ,UAAU;IAExC,OAAgB,MAAM,4BAGpB;IAEyB,KAAK,EAAE,MAAM,CAAM;IACnB,WAAW,EAAE,MAAM,CAAM;IACe,SAAS,UAAS;IAC3C,SAAS,UAAS;IAE5D,OAAO,CAAC,QAAQ,CAAoB;IAChB,OAAO,CAAC,QAAQ,CAAe;IAE1C,MAAM,IAAI,kBAAkB;IASrC,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,IAAI,IAAI;IAiBf,OAAO,CAAC,MAAM,CAAC,MAAM,CAAoB;IACzC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAU;IAEnC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU;IACtC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,cAAc,GAAG,UAAU;IAqB/C,OAAO,CAAC,MAAM,CAAC,YAAY;IAQ3B,OAAO,CAAC,MAAM,CAAC,QAAQ;IAmBvB,OAAO,CAAC,MAAM,CAAC,cAAc;CAS9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,UAAU,CAAC;KAC1B;CACF"}
|
|
1
|
+
{"version":3,"file":"snackbar.d.ts","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAMpE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,0BAA0B,CAAC;AAElC,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,oBAAY,gBAAgB;IAC1B,KAAK,OAAO;IACZ,IAAI,OAAO;IACX,QAAQ,KAAK;CACd;AAED,qBACa,UAAW,SAAQ,UAAU;IAExC,OAAgB,MAAM,4BAGpB;IAEyB,KAAK,EAAE,MAAM,CAAM;IACnB,WAAW,EAAE,MAAM,CAAM;IACe,SAAS,UAAS;IAC3C,SAAS,UAAS;IAE5D,OAAO,CAAC,QAAQ,CAAoB;IAChB,OAAO,CAAC,QAAQ,CAAe;IAE1C,MAAM,IAAI,kBAAkB;IASrC,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,IAAI,IAAI;IAiBf,OAAO,CAAC,MAAM,CAAC,MAAM,CAAoB;IACzC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAU;IAEnC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU;IACtC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,cAAc,GAAG,UAAU;IAqB/C,OAAO,CAAC,MAAM,CAAC,YAAY;IAQ3B,OAAO,CAAC,MAAM,CAAC,QAAQ;IAmBvB,OAAO,CAAC,MAAM,CAAC,cAAc;CAS9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,UAAU,CAAC;KAC1B;CACF"}
|
package/snackbar/snackbar.js
CHANGED
|
@@ -9,6 +9,8 @@ import { html, LitElement, nothing } from 'lit';
|
|
|
9
9
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
10
10
|
import { styles as baseStyles } from '../shared/base.styles.js';
|
|
11
11
|
import { styles } from './snackbar.styles.js';
|
|
12
|
+
import '../button/button';
|
|
13
|
+
import '../button/icon-button.js';
|
|
12
14
|
export var SnackbarDuration;
|
|
13
15
|
(function (SnackbarDuration) {
|
|
14
16
|
SnackbarDuration[SnackbarDuration["short"] = 2500] = "short";
|
package/snackbar/snackbar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './snackbar.styles.js';\n\nimport '../button/button';\nimport '../button/icon-button.js';\n\nexport interface SnackbarConfig {\n label: string;\n duration?: SnackbarDuration;\n buttonLabel?: string;\n showClose?: boolean;\n}\n\nexport enum SnackbarDuration {\n short = 2500,\n long = 5000,\n infinite = -1\n}\n\n@customElement('u-snackbar')\nexport class UmSnackbar extends LitElement {\n\n static override styles = [\n baseStyles,\n styles\n ];\n\n @property({reflect: true}) label: string = '';\n @property({reflect: true}) buttonLabel: string = '';\n @property({type: Boolean, attribute: 'show-close', reflect: true}) showClose = false;\n @property({type: Boolean, reflect: true}) dismissed = false;\n\n private duration!: SnackbarDuration;\n @query('.snackbar') private snackbar!: HTMLElement;\n\n override render(): HTMLTemplateResult {\n return html`\n <div class=\"snackbar ${this.dismissed ? 'dismiss' : ''}\">\n <div class=\"label\">${this.label}</div>\n ${this.renderButton()}\n ${this.renderCloseButton()}\n </div>`;\n }\n\n private renderButton() {\n return this.buttonLabel\n ? html`<u-button variant=\"text\">${this.buttonLabel}</u-button>`\n : nothing;\n }\n\n private renderCloseButton() {\n return this.showClose\n ? html`<u-icon-button><i class=\"mdi mdi-close\">X</i></u-icon-button>`\n : nothing;\n }\n\n dismiss(): void {\n if (this.dismissed) {\n return;\n }\n\n this.dismissed = true;\n\n const onAnimationEnd = () => {\n this.snackbar.removeEventListener('animationend', onAnimationEnd);\n this.remove();\n\n UmSnackbar.showNext();\n };\n\n this.snackbar.addEventListener('animationend', onAnimationEnd);\n }\n\n private static _queue: UmSnackbar[] = [];\n private static _consuming: boolean;\n\n static show(label: string): UmSnackbar;\n static show(config: SnackbarConfig): UmSnackbar;\n static show(configOrLabel: SnackbarConfig | string): UmSnackbar {\n\n if (typeof configOrLabel === 'string') {\n configOrLabel = {\n label: configOrLabel\n }\n }\n\n configOrLabel.duration ??= SnackbarDuration.short;\n\n const snackbar = this.createSnackbar(<SnackbarConfig>configOrLabel);\n UmSnackbar._queue.push(snackbar);\n\n if (!UmSnackbar._consuming) {\n UmSnackbar.consumeQueue();\n }\n\n return snackbar;\n }\n\n private static consumeQueue() {\n\n if (UmSnackbar._queue.length) {\n UmSnackbar._consuming = true;\n UmSnackbar.showNext();\n }\n }\n\n private static showNext() {\n if (!UmSnackbar._queue.length) {\n UmSnackbar._consuming = false;\n return;\n }\n \n const snackbar = UmSnackbar._queue[0];\n\n UmSnackbar._queue = UmSnackbar._queue.slice(1);\n\n document.body.appendChild(snackbar);\n\n if (snackbar.duration === -1) {\n return;\n }\n\n setTimeout(() => snackbar.dismiss(), snackbar.duration);\n }\n\n private static createSnackbar(config: SnackbarConfig): UmSnackbar {\n const snackbar = document.createElement(\"u-snackbar\");\n snackbar.label = config.label;\n snackbar.buttonLabel = config.buttonLabel!;\n snackbar.showClose = config.showClose!;\n snackbar.duration = config.duration!;\n\n return snackbar;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-snackbar': UmSnackbar;\n }\n}\n"]}
|