diff --git a/dist/css/materialize.css b/dist/css/materialize.css new file mode 100644 index 0000000000..8bc9c1bc6d --- /dev/null +++ b/dist/css/materialize.css @@ -0,0 +1,8711 @@ +/*! +* Materialize v2.1.1 (https://materializeweb.com) +* Copyright 2014-2024 Materialize +* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE) +*/ +@charset "UTF-8"; +:root { + --md-source: #006495; + /* primary */ + --md-ref-palette-primary0: #000000; + --md-ref-palette-primary10: #001e30; + --md-ref-palette-primary20: #003450; + --md-ref-palette-primary25: #003f60; + --md-ref-palette-primary30: #004b71; + --md-ref-palette-primary35: #005783; + --md-ref-palette-primary40: #006495; + --md-ref-palette-primary50: #0f7eb8; + --md-ref-palette-primary60: #3d98d4; + --md-ref-palette-primary70: #5db3f0; + --md-ref-palette-primary80: #8fcdff; + --md-ref-palette-primary90: #cbe6ff; + --md-ref-palette-primary95: #e6f2ff; + --md-ref-palette-primary98: #f7f9ff; + --md-ref-palette-primary99: #fcfcff; + --md-ref-palette-primary100: #ffffff; + /* secondary */ + --md-ref-palette-secondary0: #000000; + --md-ref-palette-secondary10: #0d1d29; + --md-ref-palette-secondary20: #22323f; + --md-ref-palette-secondary25: #2d3d4b; + --md-ref-palette-secondary30: #394856; + --md-ref-palette-secondary35: #445462; + --md-ref-palette-secondary40: #50606f; + --md-ref-palette-secondary50: #697988; + --md-ref-palette-secondary60: #8293a2; + --md-ref-palette-secondary70: #9dadbd; + --md-ref-palette-secondary80: #b8c8d9; + --md-ref-palette-secondary90: #d4e4f6; + --md-ref-palette-secondary95: #e6f2ff; + --md-ref-palette-secondary98: #f7f9ff; + --md-ref-palette-secondary99: #fcfcff; + --md-ref-palette-secondary100: #ffffff; + /* tertiary */ + --md-ref-palette-tertiary0: #000000; + --md-ref-palette-tertiary10: #211634; + --md-ref-palette-tertiary20: #362b4a; + --md-ref-palette-tertiary25: #423656; + --md-ref-palette-tertiary30: #4d4162; + --md-ref-palette-tertiary35: #594c6e; + --md-ref-palette-tertiary40: #66587b; + --md-ref-palette-tertiary50: #7f7195; + --md-ref-palette-tertiary60: #998ab0; + --md-ref-palette-tertiary70: #b4a4cb; + --md-ref-palette-tertiary80: #d0bfe7; + --md-ref-palette-tertiary90: #ecdcff; + --md-ref-palette-tertiary95: #f7edff; + --md-ref-palette-tertiary98: #fef7ff; + --md-ref-palette-tertiary99: #fffbff; + --md-ref-palette-tertiary100: #ffffff; + /* neutral */ + --md-ref-palette-neutral0: #000000; + --md-ref-palette-neutral10: #1a1c1e; + --md-ref-palette-neutral20: #2e3133; + --md-ref-palette-neutral25: #3a3c3e; + --md-ref-palette-neutral30: #454749; + --md-ref-palette-neutral35: #515255; + --md-ref-palette-neutral40: #5d5e61; + --md-ref-palette-neutral50: #76777a; + --md-ref-palette-neutral60: #8f9194; + --md-ref-palette-neutral70: #aaabae; + --md-ref-palette-neutral80: #c6c6c9; + --md-ref-palette-neutral90: #e2e2e5; + --md-ref-palette-neutral95: #f0f0f3; + --md-ref-palette-neutral98: #f9f9fc; + --md-ref-palette-neutral99: #fcfcff; + --md-ref-palette-neutral100: #ffffff; + /* neutral-variant */ + --md-ref-palette-neutral-variant0: #000000; + --md-ref-palette-neutral-variant10: #161c22; + --md-ref-palette-neutral-variant20: #2b3137; + --md-ref-palette-neutral-variant25: #363c42; + --md-ref-palette-neutral-variant30: #41474d; + --md-ref-palette-neutral-variant35: #4d5359; + --md-ref-palette-neutral-variant40: #595f65; + --md-ref-palette-neutral-variant50: #72787e; + --md-ref-palette-neutral-variant60: #8b9198; + --md-ref-palette-neutral-variant70: #a6acb3; + --md-ref-palette-neutral-variant80: #c1c7ce; + --md-ref-palette-neutral-variant90: #dee3ea; + --md-ref-palette-neutral-variant95: #ecf1f9; + --md-ref-palette-neutral-variant98: #f7f9ff; + --md-ref-palette-neutral-variant99: #fcfcff; + --md-ref-palette-neutral-variant100: #ffffff; + /* error */ + --md-ref-palette-error0: #000000; + --md-ref-palette-error10: #410002; + --md-ref-palette-error20: #690005; + --md-ref-palette-error25: #7e0007; + --md-ref-palette-error30: #93000a; + --md-ref-palette-error35: #a80710; + --md-ref-palette-error40: #ba1a1a; + --md-ref-palette-error50: #de3730; + --md-ref-palette-error60: #ff5449; + --md-ref-palette-error70: #ff897d; + --md-ref-palette-error80: #ffb4ab; + --md-ref-palette-error90: #ffdad6; + --md-ref-palette-error95: #ffedea; + --md-ref-palette-error98: #fff8f7; + --md-ref-palette-error99: #fffbff; + --md-ref-palette-error100: #ffffff; + /* light */ + --md-sys-color-primary-light: #006495; + --md-sys-color-on-primary-light: #ffffff; + --md-sys-color-primary-container-light: #cbe6ff; + --md-sys-color-on-primary-container-light: #001e30; + --md-sys-color-secondary-light: #50606f; + --md-sys-color-on-secondary-light: #ffffff; + --md-sys-color-secondary-container-light: #d4e4f6; + --md-sys-color-on-secondary-container-light: #0d1d29; + --md-sys-color-tertiary-light: #66587b; + --md-sys-color-on-tertiary-light: #ffffff; + --md-sys-color-tertiary-container-light: #ecdcff; + --md-sys-color-on-tertiary-container-light: #211634; + --md-sys-color-error-light: #ba1a1a; + --md-sys-color-error-container-light: #ffdad6; + --md-sys-color-on-error-light: #ffffff; + --md-sys-color-on-error-container-light: #410002; + --md-sys-color-background-light: #fcfcff; + --md-sys-color-on-background-light: #1a1c1e; + --md-sys-color-surface-light: #fcfcff; + --md-sys-color-on-surface-light: #1a1c1e; + --md-sys-color-surface-variant-light: #dee3ea; + --md-sys-color-on-surface-variant-light: #41474d; + --md-sys-color-outline-light: #72787e; + --md-sys-color-inverse-on-surface-light: #f0f0f3; + --md-sys-color-inverse-surface-light: #2e3133; + --md-sys-color-inverse-primary-light: #8fcdff; + --md-sys-color-shadow-light: #000000; + --md-sys-color-surface-tint-light: #006495; + --md-sys-color-outline-variant-light: #c1c7ce; + --md-sys-color-scrim-light: #000000; + /* dark */ + --md-sys-color-primary-dark: #8fcdff; + --md-sys-color-on-primary-dark: #003450; + --md-sys-color-primary-container-dark: #004b71; + --md-sys-color-on-primary-container-dark: #cbe6ff; + --md-sys-color-secondary-dark: #b8c8d9; + --md-sys-color-on-secondary-dark: #22323f; + --md-sys-color-secondary-container-dark: #394856; + --md-sys-color-on-secondary-container-dark: #d4e4f6; + --md-sys-color-tertiary-dark: #d0bfe7; + --md-sys-color-on-tertiary-dark: #362b4a; + --md-sys-color-tertiary-container-dark: #4d4162; + --md-sys-color-on-tertiary-container-dark: #ecdcff; + --md-sys-color-error-dark: #ffb4ab; + --md-sys-color-error-container-dark: #93000a; + --md-sys-color-on-error-dark: #690005; + --md-sys-color-on-error-container-dark: #ffdad6; + --md-sys-color-background-dark: #1a1c1e; + --md-sys-color-on-background-dark: #e2e2e5; + --md-sys-color-surface-dark: #1a1c1e; + --md-sys-color-on-surface-dark: #e2e2e5; + --md-sys-color-surface-variant-dark: #41474d; + --md-sys-color-on-surface-variant-dark: #c1c7ce; + --md-sys-color-outline-dark: #8b9198; + --md-sys-color-inverse-on-surface-dark: #1a1c1e; + --md-sys-color-inverse-surface-dark: #e2e2e5; + --md-sys-color-inverse-primary-dark: #006495; + --md-sys-color-shadow-dark: #000000; + --md-sys-color-surface-tint-dark: #8fcdff; + --md-sys-color-outline-variant-dark: #41474d; + --md-sys-color-scrim-dark: #000000; + /* display - large */ + --md-sys-typescale-display-large-font-family-name: Roboto; + --md-sys-typescale-display-large-font-family-style: Regular; + --md-sys-typescale-display-large-font-weight: 400px; + --md-sys-typescale-display-large-font-size: 57px; + --md-sys-typescale-display-large-line-height: 64px; + --md-sys-typescale-display-large-letter-spacing: -0.25px; + /* display - medium */ + --md-sys-typescale-display-medium-font-family-name: Roboto; + --md-sys-typescale-display-medium-font-family-style: Regular; + --md-sys-typescale-display-medium-font-weight: 400px; + --md-sys-typescale-display-medium-font-size: 45px; + --md-sys-typescale-display-medium-line-height: 52px; + --md-sys-typescale-display-medium-letter-spacing: 0px; + /* display - small */ + --md-sys-typescale-display-small-font-family-name: Roboto; + --md-sys-typescale-display-small-font-family-style: Regular; + --md-sys-typescale-display-small-font-weight: 400px; + --md-sys-typescale-display-small-font-size: 36px; + --md-sys-typescale-display-small-line-height: 44px; + --md-sys-typescale-display-small-letter-spacing: 0px; + /* headline - large */ + --md-sys-typescale-headline-large-font-family-name: Roboto; + --md-sys-typescale-headline-large-font-family-style: Regular; + --md-sys-typescale-headline-large-font-weight: 400px; + --md-sys-typescale-headline-large-font-size: 32px; + --md-sys-typescale-headline-large-line-height: 40px; + --md-sys-typescale-headline-large-letter-spacing: 0px; + /* headline - medium */ + --md-sys-typescale-headline-medium-font-family-name: Roboto; + --md-sys-typescale-headline-medium-font-family-style: Regular; + --md-sys-typescale-headline-medium-font-weight: 400px; + --md-sys-typescale-headline-medium-font-size: 28px; + --md-sys-typescale-headline-medium-line-height: 36px; + --md-sys-typescale-headline-medium-letter-spacing: 0px; + /* headline - small */ + --md-sys-typescale-headline-small-font-family-name: Roboto; + --md-sys-typescale-headline-small-font-family-style: Regular; + --md-sys-typescale-headline-small-font-weight: 400px; + --md-sys-typescale-headline-small-font-size: 24px; + --md-sys-typescale-headline-small-line-height: 32px; + --md-sys-typescale-headline-small-letter-spacing: 0px; + /* body - large */ + --md-sys-typescale-body-large-font-family-name: Roboto; + --md-sys-typescale-body-large-font-family-style: Regular; + --md-sys-typescale-body-large-font-weight: 400px; + --md-sys-typescale-body-large-font-size: 16px; + --md-sys-typescale-body-large-line-height: 24px; + --md-sys-typescale-body-large-letter-spacing: 0.50px; + /* body - medium */ + --md-sys-typescale-body-medium-font-family-name: Roboto; + --md-sys-typescale-body-medium-font-family-style: Regular; + --md-sys-typescale-body-medium-font-weight: 400px; + --md-sys-typescale-body-medium-font-size: 14px; + --md-sys-typescale-body-medium-line-height: 20px; + --md-sys-typescale-body-medium-letter-spacing: 0.25px; + /* body - small */ + --md-sys-typescale-body-small-font-family-name: Roboto; + --md-sys-typescale-body-small-font-family-style: Regular; + --md-sys-typescale-body-small-font-weight: 400px; + --md-sys-typescale-body-small-font-size: 12px; + --md-sys-typescale-body-small-line-height: 16px; + --md-sys-typescale-body-small-letter-spacing: 0.40px; + /* label - large */ + --md-sys-typescale-label-large-font-family-name: Roboto; + --md-sys-typescale-label-large-font-family-style: Medium; + --md-sys-typescale-label-large-font-weight: 500px; + --md-sys-typescale-label-large-font-size: 14px; + --md-sys-typescale-label-large-line-height: 20px; + --md-sys-typescale-label-large-letter-spacing: 0.10px; + /* label - medium */ + --md-sys-typescale-label-medium-font-family-name: Roboto; + --md-sys-typescale-label-medium-font-family-style: Medium; + --md-sys-typescale-label-medium-font-weight: 500px; + --md-sys-typescale-label-medium-font-size: 12px; + --md-sys-typescale-label-medium-line-height: 16px; + --md-sys-typescale-label-medium-letter-spacing: 0.50px; + /* label - small */ + --md-sys-typescale-label-small-font-family-name: Roboto; + --md-sys-typescale-label-small-font-family-style: Medium; + --md-sys-typescale-label-small-font-weight: 500px; + --md-sys-typescale-label-small-font-size: 11px; + --md-sys-typescale-label-small-line-height: 16px; + --md-sys-typescale-label-small-letter-spacing: 0.50px; + /* title - large */ + --md-sys-typescale-title-large-font-family-name: Roboto; + --md-sys-typescale-title-large-font-family-style: Regular; + --md-sys-typescale-title-large-font-weight: 400px; + --md-sys-typescale-title-large-font-size: 22px; + --md-sys-typescale-title-large-line-height: 28px; + --md-sys-typescale-title-large-letter-spacing: 0px; + /* title - medium */ + --md-sys-typescale-title-medium-font-family-name: Roboto; + --md-sys-typescale-title-medium-font-family-style: Medium; + --md-sys-typescale-title-medium-font-weight: 500px; + --md-sys-typescale-title-medium-font-size: 16px; + --md-sys-typescale-title-medium-line-height: 24px; + --md-sys-typescale-title-medium-letter-spacing: 0.15px; + /* title - small */ + --md-sys-typescale-title-small-font-family-name: Roboto; + --md-sys-typescale-title-small-font-family-style: Medium; + --md-sys-typescale-title-small-font-weight: 500px; + --md-sys-typescale-title-small-font-size: 14px; + --md-sys-typescale-title-small-line-height: 20px; + --md-sys-typescale-title-small-letter-spacing: 0.10px; +} + +/* System Defaults */ +:root, :host { + color-scheme: light; + --md-sys-color-primary: var(--md-sys-color-primary-light); + --md-sys-color-on-primary: var(--md-sys-color-on-primary-light); + --md-sys-color-primary-container: var(--md-sys-color-primary-container-light); + --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light); + --md-sys-color-secondary: var(--md-sys-color-secondary-light); + --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light); + --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light); + --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light); + --md-sys-color-tertiary: var(--md-sys-color-tertiary-light); + --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light); + --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light); + --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light); + --md-sys-color-error: var(--md-sys-color-error-light); + --md-sys-color-on-error: var(--md-sys-color-on-error-light); + --md-sys-color-error-container: var(--md-sys-color-error-container-light); + --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light); + --md-sys-color-outline: var(--md-sys-color-outline-light); + --md-sys-color-background: var(--md-sys-color-background-light); + --md-sys-color-on-background: var(--md-sys-color-on-background-light); + --md-sys-color-surface: var(--md-sys-color-surface-light); + --md-sys-color-on-surface: var(--md-sys-color-on-surface-light); + --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light); + --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light); + --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light); + --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light); + --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light); + --md-sys-color-shadow: var(--md-sys-color-shadow-light); + --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light); + --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light); + --md-sys-color-scrim: var(--md-sys-color-scrim-light); +} + +@media (prefers-color-scheme: dark) { + :root, :host { + color-scheme: dark; + --md-sys-color-primary: var(--md-sys-color-primary-dark); + --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark); + --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark); + --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark); + --md-sys-color-secondary: var(--md-sys-color-secondary-dark); + --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark); + --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark); + --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark); + --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark); + --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark); + --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark); + --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark); + --md-sys-color-error: var(--md-sys-color-error-dark); + --md-sys-color-on-error: var(--md-sys-color-on-error-dark); + --md-sys-color-error-container: var(--md-sys-color-error-container-dark); + --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark); + --md-sys-color-outline: var(--md-sys-color-outline-dark); + --md-sys-color-background: var(--md-sys-color-background-dark); + --md-sys-color-on-background: var(--md-sys-color-on-background-dark); + --md-sys-color-surface: var(--md-sys-color-surface-dark); + --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark); + --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark); + --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark); + --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark); + --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark); + --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark); + --md-sys-color-shadow: var(--md-sys-color-shadow-dark); + --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark); + --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark); + --md-sys-color-scrim: var(--md-sys-color-scrim-dark); + } +} +/* ===================================================================== Themes */ +:root[theme=light] { + color-scheme: light; + --md-sys-color-primary: var(--md-sys-color-primary-light); + --md-sys-color-on-primary: var(--md-sys-color-on-primary-light); + --md-sys-color-primary-container: var(--md-sys-color-primary-container-light); + --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light); + --md-sys-color-secondary: var(--md-sys-color-secondary-light); + --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light); + --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light); + --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light); + --md-sys-color-tertiary: var(--md-sys-color-tertiary-light); + --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light); + --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light); + --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light); + --md-sys-color-error: var(--md-sys-color-error-light); + --md-sys-color-on-error: var(--md-sys-color-on-error-light); + --md-sys-color-error-container: var(--md-sys-color-error-container-light); + --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light); + --md-sys-color-outline: var(--md-sys-color-outline-light); + --md-sys-color-background: var(--md-sys-color-background-light); + --md-sys-color-on-background: var(--md-sys-color-on-background-light); + --md-sys-color-surface: var(--md-sys-color-surface-light); + --md-sys-color-on-surface: var(--md-sys-color-on-surface-light); + --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light); + --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light); + --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light); + --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light); + --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light); + --md-sys-color-shadow: var(--md-sys-color-shadow-light); + --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light); + --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light); + --md-sys-color-scrim: var(--md-sys-color-scrim-light); +} + +:root[theme=dark] { + color-scheme: dark; + --md-sys-color-primary: var(--md-sys-color-primary-dark); + --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark); + --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark); + --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark); + --md-sys-color-secondary: var(--md-sys-color-secondary-dark); + --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark); + --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark); + --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark); + --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark); + --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark); + --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark); + --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark); + --md-sys-color-error: var(--md-sys-color-error-dark); + --md-sys-color-on-error: var(--md-sys-color-on-error-dark); + --md-sys-color-error-container: var(--md-sys-color-error-container-dark); + --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark); + --md-sys-color-outline: var(--md-sys-color-outline-dark); + --md-sys-color-background: var(--md-sys-color-background-dark); + --md-sys-color-on-background: var(--md-sys-color-on-background-dark); + --md-sys-color-surface: var(--md-sys-color-surface-dark); + --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark); + --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark); + --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark); + --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark); + --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark); + --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark); + --md-sys-color-shadow: var(--md-sys-color-shadow-dark); + --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark); + --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark); + --md-sys-color-scrim: var(--md-sys-color-scrim-dark); +} + +.primary { + background-color: var(--md-sys-color-primary); +} + +.primary-text { + color: var(--md-sys-color-primary); +} + +.on-primary { + background-color: var(--md-sys-color-on-primary); +} + +.on-primary-text { + color: var(--md-sys-color-on-primary); +} + +.primary-container { + background-color: var(--md-sys-color-primary-container); +} + +.primary-container-text { + color: var(--md-sys-color-primary-container); +} + +.on-primary-container { + background-color: var(--md-sys-color-on-primary-container); +} + +.on-primary-container-text { + color: var(--md-sys-color-on-primary-container); +} + +.secondary { + background-color: var(--md-sys-color-secondary); +} + +.secondary-text { + color: var(--md-sys-color-secondary); +} + +.on-secondary { + background-color: var(--md-sys-color-on-secondary); +} + +.on-secondary-text { + color: var(--md-sys-color-on-secondary); +} + +.secondary-container { + background-color: var(--md-sys-color-secondary-container); +} + +.secondary-container-text { + color: var(--md-sys-color-secondary-container); +} + +.on-secondary-container { + background-color: var(--md-sys-color-on-secondary-container); +} + +.on-secondary-container-text { + color: var(--md-sys-color-on-secondary-container); +} + +.tertiary { + background-color: var(--md-sys-color-tertiary); +} + +.tertiary-text { + color: var(--md-sys-color-tertiary); +} + +.on-tertiary { + background-color: var(--md-sys-color-on-tertiary); +} + +.on-tertiary-text { + color: var(--md-sys-color-on-tertiary); +} + +.tertiary-container { + background-color: var(--md-sys-color-tertiary-container); +} + +.tertiary-container-text { + color: var(--md-sys-color-tertiary-container); +} + +.on-tertiary-container { + background-color: var(--md-sys-color-on-tertiary-container); +} + +.on-tertiary-container-text { + color: var(--md-sys-color-on-tertiary-container); +} + +.error { + background-color: var(--md-sys-color-error); +} + +.error-text { + color: var(--md-sys-color-error); +} + +.on-error { + background-color: var(--md-sys-color-on-error); +} + +.on-error-text { + color: var(--md-sys-color-on-error); +} + +.error-container { + background-color: var(--md-sys-color-error-container); +} + +.error-container-text { + color: var(--md-sys-color-error-container); +} + +.on-error-container { + background-color: var(--md-sys-color-on-error-container); +} + +.on-error-container-text { + color: var(--md-sys-color-on-error-container); +} + +.background { + background-color: var(--md-sys-color-background); +} + +.background-text { + color: var(--md-sys-color-background); +} + +.on-background { + background-color: var(--md-sys-color-on-background); +} + +.on-background-text { + color: var(--md-sys-color-on-background); +} + +.surface, .switch label input[type=checkbox]:checked + .lever:after { + background-color: var(--md-sys-color-surface); +} + +.surface-text { + color: var(--md-sys-color-surface); +} + +.on-surface { + background-color: var(--md-sys-color-on-surface); +} + +.on-surface-text { + color: var(--md-sys-color-on-surface); +} + +.surface-variant, .progress, input[type=range]::-moz-range-track, input[type=range]::-webkit-slider-runnable-track { + background-color: var(--md-sys-color-surface-variant); +} + +.surface-variant-text { + color: var(--md-sys-color-surface-variant); +} + +.on-surface-variant { + background-color: var(--md-sys-color-on-surface-variant); +} + +.on-surface-variant-text, .chip > .material-icons { + color: var(--md-sys-color-on-surface-variant); +} + +.outline, .switch label .lever:after { + background-color: var(--md-sys-color-outline); +} + +.outline-text { + color: var(--md-sys-color-outline); +} + +.inverse-on-surface { + background-color: var(--md-sys-color-inverse-on-surface); +} + +.inverse-on-surface-text { + color: var(--md-sys-color-inverse-on-surface); +} + +.inverse-surface { + background-color: var(--md-sys-color-inverse-surface); +} + +.inverse-surface-text { + color: var(--md-sys-color-inverse-surface); +} + +.inverse-primary { + background-color: var(--md-sys-color-inverse-primary); +} + +.inverse-primary-text { + color: var(--md-sys-color-inverse-primary); +} + +.shadow { + background-color: var(--md-sys-color-shadow); +} + +.shadow-text { + color: var(--md-sys-color-shadow); +} + +.surface-tint { + background-color: var(--md-sys-color-surface-tint); +} + +.surface-tint-text { + color: var(--md-sys-color-surface-tint); +} + +.outline-variant { + background-color: var(--md-sys-color-outline-variant); +} + +.outline-variant-text { + color: var(--md-sys-color-outline-variant); +} + +.scrim { + background-color: var(--md-sys-color-scrim); +} + +.scrim-text { + color: var(--md-sys-color-scrim); +} + +.display-large { + font-family: var(--md-sys-typescale-display-large-font-family-name); + font-style: var(--md-sys-typescale-display-large-font-family-style); + font-weight: var(--md-sys-typescale-display-large-font-weight); + font-size: var(--md-sys-typescale-display-large-font-size); + letter-spacing: var(--md-sys-typescale-display-large-tracking); + line-height: var(--md-sys-typescale-display-large-height); + text-transform: var(--md-sys-typescale-display-large-text-transform); + text-decoration: var(--md-sys-typescale-display-large-text-decoration); +} + +.display-medium { + font-family: var(--md-sys-typescale-display-medium-font-family-name); + font-style: var(--md-sys-typescale-display-medium-font-family-style); + font-weight: var(--md-sys-typescale-display-medium-font-weight); + font-size: var(--md-sys-typescale-display-medium-font-size); + letter-spacing: var(--md-sys-typescale-display-medium-tracking); + line-height: var(--md-sys-typescale-display-medium-height); + text-transform: var(--md-sys-typescale-display-medium-text-transform); + text-decoration: var(--md-sys-typescale-display-medium-text-decoration); +} + +.display-small { + font-family: var(--md-sys-typescale-display-small-font-family-name); + font-style: var(--md-sys-typescale-display-small-font-family-style); + font-weight: var(--md-sys-typescale-display-small-font-weight); + font-size: var(--md-sys-typescale-display-small-font-size); + letter-spacing: var(--md-sys-typescale-display-small-tracking); + line-height: var(--md-sys-typescale-display-small-height); + text-transform: var(--md-sys-typescale-display-small-text-transform); + text-decoration: var(--md-sys-typescale-display-small-text-decoration); +} + +.headline-large { + font-family: var(--md-sys-typescale-headline-large-font-family-name); + font-style: var(--md-sys-typescale-headline-large-font-family-style); + font-weight: var(--md-sys-typescale-headline-large-font-weight); + font-size: var(--md-sys-typescale-headline-large-font-size); + letter-spacing: var(--md-sys-typescale-headline-large-tracking); + line-height: var(--md-sys-typescale-headline-large-height); + text-transform: var(--md-sys-typescale-headline-large-text-transform); + text-decoration: var(--md-sys-typescale-headline-large-text-decoration); +} + +.headline-medium { + font-family: var(--md-sys-typescale-headline-medium-font-family-name); + font-style: var(--md-sys-typescale-headline-medium-font-family-style); + font-weight: var(--md-sys-typescale-headline-medium-font-weight); + font-size: var(--md-sys-typescale-headline-medium-font-size); + letter-spacing: var(--md-sys-typescale-headline-medium-tracking); + line-height: var(--md-sys-typescale-headline-medium-height); + text-transform: var(--md-sys-typescale-headline-medium-text-transform); + text-decoration: var(--md-sys-typescale-headline-medium-text-decoration); +} + +.headline-small { + font-family: var(--md-sys-typescale-headline-small-font-family-name); + font-style: var(--md-sys-typescale-headline-small-font-family-style); + font-weight: var(--md-sys-typescale-headline-small-font-weight); + font-size: var(--md-sys-typescale-headline-small-font-size); + letter-spacing: var(--md-sys-typescale-headline-small-tracking); + line-height: var(--md-sys-typescale-headline-small-height); + text-transform: var(--md-sys-typescale-headline-small-text-transform); + text-decoration: var(--md-sys-typescale-headline-small-text-decoration); +} + +.body-large { + font-family: var(--md-sys-typescale-body-large-font-family-name); + font-style: var(--md-sys-typescale-body-large-font-family-style); + font-weight: var(--md-sys-typescale-body-large-font-weight); + font-size: var(--md-sys-typescale-body-large-font-size); + letter-spacing: var(--md-sys-typescale-body-large-tracking); + line-height: var(--md-sys-typescale-body-large-height); + text-transform: var(--md-sys-typescale-body-large-text-transform); + text-decoration: var(--md-sys-typescale-body-large-text-decoration); +} + +.body-medium { + font-family: var(--md-sys-typescale-body-medium-font-family-name); + font-style: var(--md-sys-typescale-body-medium-font-family-style); + font-weight: var(--md-sys-typescale-body-medium-font-weight); + font-size: var(--md-sys-typescale-body-medium-font-size); + letter-spacing: var(--md-sys-typescale-body-medium-tracking); + line-height: var(--md-sys-typescale-body-medium-height); + text-transform: var(--md-sys-typescale-body-medium-text-transform); + text-decoration: var(--md-sys-typescale-body-medium-text-decoration); +} + +.body-small { + font-family: var(--md-sys-typescale-body-small-font-family-name); + font-style: var(--md-sys-typescale-body-small-font-family-style); + font-weight: var(--md-sys-typescale-body-small-font-weight); + font-size: var(--md-sys-typescale-body-small-font-size); + letter-spacing: var(--md-sys-typescale-body-small-tracking); + line-height: var(--md-sys-typescale-body-small-height); + text-transform: var(--md-sys-typescale-body-small-text-transform); + text-decoration: var(--md-sys-typescale-body-small-text-decoration); +} + +.label-large { + font-family: var(--md-sys-typescale-label-large-font-family-name); + font-style: var(--md-sys-typescale-label-large-font-family-style); + font-weight: var(--md-sys-typescale-label-large-font-weight); + font-size: var(--md-sys-typescale-label-large-font-size); + letter-spacing: var(--md-sys-typescale-label-large-tracking); + line-height: var(--md-sys-typescale-label-large-height); + text-transform: var(--md-sys-typescale-label-large-text-transform); + text-decoration: var(--md-sys-typescale-label-large-text-decoration); +} + +.label-medium { + font-family: var(--md-sys-typescale-label-medium-font-family-name); + font-style: var(--md-sys-typescale-label-medium-font-family-style); + font-weight: var(--md-sys-typescale-label-medium-font-weight); + font-size: var(--md-sys-typescale-label-medium-font-size); + letter-spacing: var(--md-sys-typescale-label-medium-tracking); + line-height: var(--md-sys-typescale-label-medium-height); + text-transform: var(--md-sys-typescale-label-medium-text-transform); + text-decoration: var(--md-sys-typescale-label-medium-text-decoration); +} + +.label-small { + font-family: var(--md-sys-typescale-label-small-font-family-name); + font-style: var(--md-sys-typescale-label-small-font-family-style); + font-weight: var(--md-sys-typescale-label-small-font-weight); + font-size: var(--md-sys-typescale-label-small-font-size); + letter-spacing: var(--md-sys-typescale-label-small-tracking); + line-height: var(--md-sys-typescale-label-small-height); + text-transform: var(--md-sys-typescale-label-small-text-transform); + text-decoration: var(--md-sys-typescale-label-small-text-decoration); +} + +.title-large { + font-family: var(--md-sys-typescale-title-large-font-family-name); + font-style: var(--md-sys-typescale-title-large-font-family-style); + font-weight: var(--md-sys-typescale-title-large-font-weight); + font-size: var(--md-sys-typescale-title-large-font-size); + letter-spacing: var(--md-sys-typescale-title-large-tracking); + line-height: var(--md-sys-typescale-title-large-height); + text-transform: var(--md-sys-typescale-title-large-text-transform); + text-decoration: var(--md-sys-typescale-title-large-text-decoration); +} + +.title-medium { + font-family: var(--md-sys-typescale-title-medium-font-family-name); + font-style: var(--md-sys-typescale-title-medium-font-family-style); + font-weight: var(--md-sys-typescale-title-medium-font-weight); + font-size: var(--md-sys-typescale-title-medium-font-size); + letter-spacing: var(--md-sys-typescale-title-medium-tracking); + line-height: var(--md-sys-typescale-title-medium-height); + text-transform: var(--md-sys-typescale-title-medium-text-transform); + text-decoration: var(--md-sys-typescale-title-medium-text-decoration); +} + +.title-small { + font-family: var(--md-sys-typescale-title-small-font-family-name); + font-style: var(--md-sys-typescale-title-small-font-family-style); + font-weight: var(--md-sys-typescale-title-small-font-weight); + font-size: var(--md-sys-typescale-title-small-font-size); + letter-spacing: var(--md-sys-typescale-title-small-tracking); + line-height: var(--md-sys-typescale-title-small-height); + text-transform: var(--md-sys-typescale-title-small-text-transform); + text-decoration: var(--md-sys-typescale-title-small-text-decoration); +} + +.materialize-red { + background-color: #e51c23 !important; +} + +.materialize-red-text { + color: #e51c23 !important; +} + +.materialize-red.lighten-5 { + background-color: #fdeaeb !important; +} + +.materialize-red-text.text-lighten-5 { + color: #fdeaeb !important; +} + +.materialize-red.lighten-4 { + background-color: #f8c1c3 !important; +} + +.materialize-red-text.text-lighten-4 { + color: #f8c1c3 !important; +} + +.materialize-red.lighten-3 { + background-color: #f3989b !important; +} + +.materialize-red-text.text-lighten-3 { + color: #f3989b !important; +} + +.materialize-red.lighten-2 { + background-color: #ee6e73 !important; +} + +.materialize-red-text.text-lighten-2 { + color: #ee6e73 !important; +} + +.materialize-red.lighten-1 { + background-color: #ea454b !important; +} + +.materialize-red-text.text-lighten-1 { + color: #ea454b !important; +} + +.materialize-red.darken-1 { + background-color: #d0181e !important; +} + +.materialize-red-text.text-darken-1 { + color: #d0181e !important; +} + +.materialize-red.darken-2 { + background-color: #b9151b !important; +} + +.materialize-red-text.text-darken-2 { + color: #b9151b !important; +} + +.materialize-red.darken-3 { + background-color: #a21318 !important; +} + +.materialize-red-text.text-darken-3 { + color: #a21318 !important; +} + +.materialize-red.darken-4 { + background-color: #8b1014 !important; +} + +.materialize-red-text.text-darken-4 { + color: #8b1014 !important; +} + +.red { + background-color: #F44336 !important; +} + +.red-text { + color: #F44336 !important; +} + +.red.lighten-5 { + background-color: #FFEBEE !important; +} + +.red-text.text-lighten-5 { + color: #FFEBEE !important; +} + +.red.lighten-4 { + background-color: #FFCDD2 !important; +} + +.red-text.text-lighten-4 { + color: #FFCDD2 !important; +} + +.red.lighten-3 { + background-color: #EF9A9A !important; +} + +.red-text.text-lighten-3 { + color: #EF9A9A !important; +} + +.red.lighten-2 { + background-color: #E57373 !important; +} + +.red-text.text-lighten-2 { + color: #E57373 !important; +} + +.red.lighten-1 { + background-color: #EF5350 !important; +} + +.red-text.text-lighten-1 { + color: #EF5350 !important; +} + +.red.darken-1 { + background-color: #E53935 !important; +} + +.red-text.text-darken-1 { + color: #E53935 !important; +} + +.red.darken-2 { + background-color: #D32F2F !important; +} + +.red-text.text-darken-2 { + color: #D32F2F !important; +} + +.red.darken-3 { + background-color: #C62828 !important; +} + +.red-text.text-darken-3 { + color: #C62828 !important; +} + +.red.darken-4 { + background-color: #B71C1C !important; +} + +.red-text.text-darken-4 { + color: #B71C1C !important; +} + +.red.accent-1 { + background-color: #FF8A80 !important; +} + +.red-text.text-accent-1 { + color: #FF8A80 !important; +} + +.red.accent-2 { + background-color: #FF5252 !important; +} + +.red-text.text-accent-2 { + color: #FF5252 !important; +} + +.red.accent-3 { + background-color: #FF1744 !important; +} + +.red-text.text-accent-3 { + color: #FF1744 !important; +} + +.red.accent-4 { + background-color: #D50000 !important; +} + +.red-text.text-accent-4 { + color: #D50000 !important; +} + +.pink { + background-color: #e91e63 !important; +} + +.pink-text { + color: #e91e63 !important; +} + +.pink.lighten-5 { + background-color: #fce4ec !important; +} + +.pink-text.text-lighten-5 { + color: #fce4ec !important; +} + +.pink.lighten-4 { + background-color: #f8bbd0 !important; +} + +.pink-text.text-lighten-4 { + color: #f8bbd0 !important; +} + +.pink.lighten-3 { + background-color: #f48fb1 !important; +} + +.pink-text.text-lighten-3 { + color: #f48fb1 !important; +} + +.pink.lighten-2 { + background-color: #f06292 !important; +} + +.pink-text.text-lighten-2 { + color: #f06292 !important; +} + +.pink.lighten-1 { + background-color: #ec407a !important; +} + +.pink-text.text-lighten-1 { + color: #ec407a !important; +} + +.pink.darken-1 { + background-color: #d81b60 !important; +} + +.pink-text.text-darken-1 { + color: #d81b60 !important; +} + +.pink.darken-2 { + background-color: #c2185b !important; +} + +.pink-text.text-darken-2 { + color: #c2185b !important; +} + +.pink.darken-3 { + background-color: #ad1457 !important; +} + +.pink-text.text-darken-3 { + color: #ad1457 !important; +} + +.pink.darken-4 { + background-color: #880e4f !important; +} + +.pink-text.text-darken-4 { + color: #880e4f !important; +} + +.pink.accent-1 { + background-color: #ff80ab !important; +} + +.pink-text.text-accent-1 { + color: #ff80ab !important; +} + +.pink.accent-2 { + background-color: #ff4081 !important; +} + +.pink-text.text-accent-2 { + color: #ff4081 !important; +} + +.pink.accent-3 { + background-color: #f50057 !important; +} + +.pink-text.text-accent-3 { + color: #f50057 !important; +} + +.pink.accent-4 { + background-color: #c51162 !important; +} + +.pink-text.text-accent-4 { + color: #c51162 !important; +} + +.purple { + background-color: #9c27b0 !important; +} + +.purple-text { + color: #9c27b0 !important; +} + +.purple.lighten-5 { + background-color: #f3e5f5 !important; +} + +.purple-text.text-lighten-5 { + color: #f3e5f5 !important; +} + +.purple.lighten-4 { + background-color: #e1bee7 !important; +} + +.purple-text.text-lighten-4 { + color: #e1bee7 !important; +} + +.purple.lighten-3 { + background-color: #ce93d8 !important; +} + +.purple-text.text-lighten-3 { + color: #ce93d8 !important; +} + +.purple.lighten-2 { + background-color: #ba68c8 !important; +} + +.purple-text.text-lighten-2 { + color: #ba68c8 !important; +} + +.purple.lighten-1 { + background-color: #ab47bc !important; +} + +.purple-text.text-lighten-1 { + color: #ab47bc !important; +} + +.purple.darken-1 { + background-color: #8e24aa !important; +} + +.purple-text.text-darken-1 { + color: #8e24aa !important; +} + +.purple.darken-2 { + background-color: #7b1fa2 !important; +} + +.purple-text.text-darken-2 { + color: #7b1fa2 !important; +} + +.purple.darken-3 { + background-color: #6a1b9a !important; +} + +.purple-text.text-darken-3 { + color: #6a1b9a !important; +} + +.purple.darken-4 { + background-color: #4a148c !important; +} + +.purple-text.text-darken-4 { + color: #4a148c !important; +} + +.purple.accent-1 { + background-color: #ea80fc !important; +} + +.purple-text.text-accent-1 { + color: #ea80fc !important; +} + +.purple.accent-2 { + background-color: #e040fb !important; +} + +.purple-text.text-accent-2 { + color: #e040fb !important; +} + +.purple.accent-3 { + background-color: #d500f9 !important; +} + +.purple-text.text-accent-3 { + color: #d500f9 !important; +} + +.purple.accent-4 { + background-color: #aa00ff !important; +} + +.purple-text.text-accent-4 { + color: #aa00ff !important; +} + +.deep-purple { + background-color: #673ab7 !important; +} + +.deep-purple-text { + color: #673ab7 !important; +} + +.deep-purple.lighten-5 { + background-color: #ede7f6 !important; +} + +.deep-purple-text.text-lighten-5 { + color: #ede7f6 !important; +} + +.deep-purple.lighten-4 { + background-color: #d1c4e9 !important; +} + +.deep-purple-text.text-lighten-4 { + color: #d1c4e9 !important; +} + +.deep-purple.lighten-3 { + background-color: #b39ddb !important; +} + +.deep-purple-text.text-lighten-3 { + color: #b39ddb !important; +} + +.deep-purple.lighten-2 { + background-color: #9575cd !important; +} + +.deep-purple-text.text-lighten-2 { + color: #9575cd !important; +} + +.deep-purple.lighten-1 { + background-color: #7e57c2 !important; +} + +.deep-purple-text.text-lighten-1 { + color: #7e57c2 !important; +} + +.deep-purple.darken-1 { + background-color: #5e35b1 !important; +} + +.deep-purple-text.text-darken-1 { + color: #5e35b1 !important; +} + +.deep-purple.darken-2 { + background-color: #512da8 !important; +} + +.deep-purple-text.text-darken-2 { + color: #512da8 !important; +} + +.deep-purple.darken-3 { + background-color: #4527a0 !important; +} + +.deep-purple-text.text-darken-3 { + color: #4527a0 !important; +} + +.deep-purple.darken-4 { + background-color: #311b92 !important; +} + +.deep-purple-text.text-darken-4 { + color: #311b92 !important; +} + +.deep-purple.accent-1 { + background-color: #b388ff !important; +} + +.deep-purple-text.text-accent-1 { + color: #b388ff !important; +} + +.deep-purple.accent-2 { + background-color: #7c4dff !important; +} + +.deep-purple-text.text-accent-2 { + color: #7c4dff !important; +} + +.deep-purple.accent-3 { + background-color: #651fff !important; +} + +.deep-purple-text.text-accent-3 { + color: #651fff !important; +} + +.deep-purple.accent-4 { + background-color: #6200ea !important; +} + +.deep-purple-text.text-accent-4 { + color: #6200ea !important; +} + +.indigo { + background-color: #3f51b5 !important; +} + +.indigo-text { + color: #3f51b5 !important; +} + +.indigo.lighten-5 { + background-color: #e8eaf6 !important; +} + +.indigo-text.text-lighten-5 { + color: #e8eaf6 !important; +} + +.indigo.lighten-4 { + background-color: #c5cae9 !important; +} + +.indigo-text.text-lighten-4 { + color: #c5cae9 !important; +} + +.indigo.lighten-3 { + background-color: #9fa8da !important; +} + +.indigo-text.text-lighten-3 { + color: #9fa8da !important; +} + +.indigo.lighten-2 { + background-color: #7986cb !important; +} + +.indigo-text.text-lighten-2 { + color: #7986cb !important; +} + +.indigo.lighten-1 { + background-color: #5c6bc0 !important; +} + +.indigo-text.text-lighten-1 { + color: #5c6bc0 !important; +} + +.indigo.darken-1 { + background-color: #3949ab !important; +} + +.indigo-text.text-darken-1 { + color: #3949ab !important; +} + +.indigo.darken-2 { + background-color: #303f9f !important; +} + +.indigo-text.text-darken-2 { + color: #303f9f !important; +} + +.indigo.darken-3 { + background-color: #283593 !important; +} + +.indigo-text.text-darken-3 { + color: #283593 !important; +} + +.indigo.darken-4 { + background-color: #1a237e !important; +} + +.indigo-text.text-darken-4 { + color: #1a237e !important; +} + +.indigo.accent-1 { + background-color: #8c9eff !important; +} + +.indigo-text.text-accent-1 { + color: #8c9eff !important; +} + +.indigo.accent-2 { + background-color: #536dfe !important; +} + +.indigo-text.text-accent-2 { + color: #536dfe !important; +} + +.indigo.accent-3 { + background-color: #3d5afe !important; +} + +.indigo-text.text-accent-3 { + color: #3d5afe !important; +} + +.indigo.accent-4 { + background-color: #304ffe !important; +} + +.indigo-text.text-accent-4 { + color: #304ffe !important; +} + +.blue { + background-color: #2196F3 !important; +} + +.blue-text { + color: #2196F3 !important; +} + +.blue.lighten-5 { + background-color: #E3F2FD !important; +} + +.blue-text.text-lighten-5 { + color: #E3F2FD !important; +} + +.blue.lighten-4 { + background-color: #BBDEFB !important; +} + +.blue-text.text-lighten-4 { + color: #BBDEFB !important; +} + +.blue.lighten-3 { + background-color: #90CAF9 !important; +} + +.blue-text.text-lighten-3 { + color: #90CAF9 !important; +} + +.blue.lighten-2 { + background-color: #64B5F6 !important; +} + +.blue-text.text-lighten-2 { + color: #64B5F6 !important; +} + +.blue.lighten-1 { + background-color: #42A5F5 !important; +} + +.blue-text.text-lighten-1 { + color: #42A5F5 !important; +} + +.blue.darken-1 { + background-color: #1E88E5 !important; +} + +.blue-text.text-darken-1 { + color: #1E88E5 !important; +} + +.blue.darken-2 { + background-color: #1976D2 !important; +} + +.blue-text.text-darken-2 { + color: #1976D2 !important; +} + +.blue.darken-3 { + background-color: #1565C0 !important; +} + +.blue-text.text-darken-3 { + color: #1565C0 !important; +} + +.blue.darken-4 { + background-color: #0D47A1 !important; +} + +.blue-text.text-darken-4 { + color: #0D47A1 !important; +} + +.blue.accent-1 { + background-color: #82B1FF !important; +} + +.blue-text.text-accent-1 { + color: #82B1FF !important; +} + +.blue.accent-2 { + background-color: #448AFF !important; +} + +.blue-text.text-accent-2 { + color: #448AFF !important; +} + +.blue.accent-3 { + background-color: #2979FF !important; +} + +.blue-text.text-accent-3 { + color: #2979FF !important; +} + +.blue.accent-4 { + background-color: #2962FF !important; +} + +.blue-text.text-accent-4 { + color: #2962FF !important; +} + +.light-blue { + background-color: #03a9f4 !important; +} + +.light-blue-text { + color: #03a9f4 !important; +} + +.light-blue.lighten-5 { + background-color: #e1f5fe !important; +} + +.light-blue-text.text-lighten-5 { + color: #e1f5fe !important; +} + +.light-blue.lighten-4 { + background-color: #b3e5fc !important; +} + +.light-blue-text.text-lighten-4 { + color: #b3e5fc !important; +} + +.light-blue.lighten-3 { + background-color: #81d4fa !important; +} + +.light-blue-text.text-lighten-3 { + color: #81d4fa !important; +} + +.light-blue.lighten-2 { + background-color: #4fc3f7 !important; +} + +.light-blue-text.text-lighten-2 { + color: #4fc3f7 !important; +} + +.light-blue.lighten-1 { + background-color: #29b6f6 !important; +} + +.light-blue-text.text-lighten-1 { + color: #29b6f6 !important; +} + +.light-blue.darken-1 { + background-color: #039be5 !important; +} + +.light-blue-text.text-darken-1 { + color: #039be5 !important; +} + +.light-blue.darken-2 { + background-color: #0288d1 !important; +} + +.light-blue-text.text-darken-2 { + color: #0288d1 !important; +} + +.light-blue.darken-3 { + background-color: #0277bd !important; +} + +.light-blue-text.text-darken-3 { + color: #0277bd !important; +} + +.light-blue.darken-4 { + background-color: #01579b !important; +} + +.light-blue-text.text-darken-4 { + color: #01579b !important; +} + +.light-blue.accent-1 { + background-color: #80d8ff !important; +} + +.light-blue-text.text-accent-1 { + color: #80d8ff !important; +} + +.light-blue.accent-2 { + background-color: #40c4ff !important; +} + +.light-blue-text.text-accent-2 { + color: #40c4ff !important; +} + +.light-blue.accent-3 { + background-color: #00b0ff !important; +} + +.light-blue-text.text-accent-3 { + color: #00b0ff !important; +} + +.light-blue.accent-4 { + background-color: #0091ea !important; +} + +.light-blue-text.text-accent-4 { + color: #0091ea !important; +} + +.cyan { + background-color: #00bcd4 !important; +} + +.cyan-text { + color: #00bcd4 !important; +} + +.cyan.lighten-5 { + background-color: #e0f7fa !important; +} + +.cyan-text.text-lighten-5 { + color: #e0f7fa !important; +} + +.cyan.lighten-4 { + background-color: #b2ebf2 !important; +} + +.cyan-text.text-lighten-4 { + color: #b2ebf2 !important; +} + +.cyan.lighten-3 { + background-color: #80deea !important; +} + +.cyan-text.text-lighten-3 { + color: #80deea !important; +} + +.cyan.lighten-2 { + background-color: #4dd0e1 !important; +} + +.cyan-text.text-lighten-2 { + color: #4dd0e1 !important; +} + +.cyan.lighten-1 { + background-color: #26c6da !important; +} + +.cyan-text.text-lighten-1 { + color: #26c6da !important; +} + +.cyan.darken-1 { + background-color: #00acc1 !important; +} + +.cyan-text.text-darken-1 { + color: #00acc1 !important; +} + +.cyan.darken-2 { + background-color: #0097a7 !important; +} + +.cyan-text.text-darken-2 { + color: #0097a7 !important; +} + +.cyan.darken-3 { + background-color: #00838f !important; +} + +.cyan-text.text-darken-3 { + color: #00838f !important; +} + +.cyan.darken-4 { + background-color: #006064 !important; +} + +.cyan-text.text-darken-4 { + color: #006064 !important; +} + +.cyan.accent-1 { + background-color: #84ffff !important; +} + +.cyan-text.text-accent-1 { + color: #84ffff !important; +} + +.cyan.accent-2 { + background-color: #18ffff !important; +} + +.cyan-text.text-accent-2 { + color: #18ffff !important; +} + +.cyan.accent-3 { + background-color: #00e5ff !important; +} + +.cyan-text.text-accent-3 { + color: #00e5ff !important; +} + +.cyan.accent-4 { + background-color: #00b8d4 !important; +} + +.cyan-text.text-accent-4 { + color: #00b8d4 !important; +} + +.teal { + background-color: #009688 !important; +} + +.teal-text { + color: #009688 !important; +} + +.teal.lighten-5 { + background-color: #e0f2f1 !important; +} + +.teal-text.text-lighten-5 { + color: #e0f2f1 !important; +} + +.teal.lighten-4 { + background-color: #b2dfdb !important; +} + +.teal-text.text-lighten-4 { + color: #b2dfdb !important; +} + +.teal.lighten-3 { + background-color: #80cbc4 !important; +} + +.teal-text.text-lighten-3 { + color: #80cbc4 !important; +} + +.teal.lighten-2 { + background-color: #4db6ac !important; +} + +.teal-text.text-lighten-2 { + color: #4db6ac !important; +} + +.teal.lighten-1 { + background-color: #26a69a !important; +} + +.teal-text.text-lighten-1 { + color: #26a69a !important; +} + +.teal.darken-1 { + background-color: #00897b !important; +} + +.teal-text.text-darken-1 { + color: #00897b !important; +} + +.teal.darken-2 { + background-color: #00796b !important; +} + +.teal-text.text-darken-2 { + color: #00796b !important; +} + +.teal.darken-3 { + background-color: #00695c !important; +} + +.teal-text.text-darken-3 { + color: #00695c !important; +} + +.teal.darken-4 { + background-color: #004d40 !important; +} + +.teal-text.text-darken-4 { + color: #004d40 !important; +} + +.teal.accent-1 { + background-color: #a7ffeb !important; +} + +.teal-text.text-accent-1 { + color: #a7ffeb !important; +} + +.teal.accent-2 { + background-color: #64ffda !important; +} + +.teal-text.text-accent-2 { + color: #64ffda !important; +} + +.teal.accent-3 { + background-color: #1de9b6 !important; +} + +.teal-text.text-accent-3 { + color: #1de9b6 !important; +} + +.teal.accent-4 { + background-color: #00bfa5 !important; +} + +.teal-text.text-accent-4 { + color: #00bfa5 !important; +} + +.green { + background-color: #4CAF50 !important; +} + +.green-text { + color: #4CAF50 !important; +} + +.green.lighten-5 { + background-color: #E8F5E9 !important; +} + +.green-text.text-lighten-5 { + color: #E8F5E9 !important; +} + +.green.lighten-4 { + background-color: #C8E6C9 !important; +} + +.green-text.text-lighten-4 { + color: #C8E6C9 !important; +} + +.green.lighten-3 { + background-color: #A5D6A7 !important; +} + +.green-text.text-lighten-3 { + color: #A5D6A7 !important; +} + +.green.lighten-2 { + background-color: #81C784 !important; +} + +.green-text.text-lighten-2 { + color: #81C784 !important; +} + +.green.lighten-1 { + background-color: #66BB6A !important; +} + +.green-text.text-lighten-1 { + color: #66BB6A !important; +} + +.green.darken-1 { + background-color: #43A047 !important; +} + +.green-text.text-darken-1 { + color: #43A047 !important; +} + +.green.darken-2 { + background-color: #388E3C !important; +} + +.green-text.text-darken-2 { + color: #388E3C !important; +} + +.green.darken-3 { + background-color: #2E7D32 !important; +} + +.green-text.text-darken-3 { + color: #2E7D32 !important; +} + +.green.darken-4 { + background-color: #1B5E20 !important; +} + +.green-text.text-darken-4 { + color: #1B5E20 !important; +} + +.green.accent-1 { + background-color: #B9F6CA !important; +} + +.green-text.text-accent-1 { + color: #B9F6CA !important; +} + +.green.accent-2 { + background-color: #69F0AE !important; +} + +.green-text.text-accent-2 { + color: #69F0AE !important; +} + +.green.accent-3 { + background-color: #00E676 !important; +} + +.green-text.text-accent-3 { + color: #00E676 !important; +} + +.green.accent-4 { + background-color: #00C853 !important; +} + +.green-text.text-accent-4 { + color: #00C853 !important; +} + +.light-green { + background-color: #8bc34a !important; +} + +.light-green-text { + color: #8bc34a !important; +} + +.light-green.lighten-5 { + background-color: #f1f8e9 !important; +} + +.light-green-text.text-lighten-5 { + color: #f1f8e9 !important; +} + +.light-green.lighten-4 { + background-color: #dcedc8 !important; +} + +.light-green-text.text-lighten-4 { + color: #dcedc8 !important; +} + +.light-green.lighten-3 { + background-color: #c5e1a5 !important; +} + +.light-green-text.text-lighten-3 { + color: #c5e1a5 !important; +} + +.light-green.lighten-2 { + background-color: #aed581 !important; +} + +.light-green-text.text-lighten-2 { + color: #aed581 !important; +} + +.light-green.lighten-1 { + background-color: #9ccc65 !important; +} + +.light-green-text.text-lighten-1 { + color: #9ccc65 !important; +} + +.light-green.darken-1 { + background-color: #7cb342 !important; +} + +.light-green-text.text-darken-1 { + color: #7cb342 !important; +} + +.light-green.darken-2 { + background-color: #689f38 !important; +} + +.light-green-text.text-darken-2 { + color: #689f38 !important; +} + +.light-green.darken-3 { + background-color: #558b2f !important; +} + +.light-green-text.text-darken-3 { + color: #558b2f !important; +} + +.light-green.darken-4 { + background-color: #33691e !important; +} + +.light-green-text.text-darken-4 { + color: #33691e !important; +} + +.light-green.accent-1 { + background-color: #ccff90 !important; +} + +.light-green-text.text-accent-1 { + color: #ccff90 !important; +} + +.light-green.accent-2 { + background-color: #b2ff59 !important; +} + +.light-green-text.text-accent-2 { + color: #b2ff59 !important; +} + +.light-green.accent-3 { + background-color: #76ff03 !important; +} + +.light-green-text.text-accent-3 { + color: #76ff03 !important; +} + +.light-green.accent-4 { + background-color: #64dd17 !important; +} + +.light-green-text.text-accent-4 { + color: #64dd17 !important; +} + +.lime { + background-color: #cddc39 !important; +} + +.lime-text { + color: #cddc39 !important; +} + +.lime.lighten-5 { + background-color: #f9fbe7 !important; +} + +.lime-text.text-lighten-5 { + color: #f9fbe7 !important; +} + +.lime.lighten-4 { + background-color: #f0f4c3 !important; +} + +.lime-text.text-lighten-4 { + color: #f0f4c3 !important; +} + +.lime.lighten-3 { + background-color: #e6ee9c !important; +} + +.lime-text.text-lighten-3 { + color: #e6ee9c !important; +} + +.lime.lighten-2 { + background-color: #dce775 !important; +} + +.lime-text.text-lighten-2 { + color: #dce775 !important; +} + +.lime.lighten-1 { + background-color: #d4e157 !important; +} + +.lime-text.text-lighten-1 { + color: #d4e157 !important; +} + +.lime.darken-1 { + background-color: #c0ca33 !important; +} + +.lime-text.text-darken-1 { + color: #c0ca33 !important; +} + +.lime.darken-2 { + background-color: #afb42b !important; +} + +.lime-text.text-darken-2 { + color: #afb42b !important; +} + +.lime.darken-3 { + background-color: #9e9d24 !important; +} + +.lime-text.text-darken-3 { + color: #9e9d24 !important; +} + +.lime.darken-4 { + background-color: #827717 !important; +} + +.lime-text.text-darken-4 { + color: #827717 !important; +} + +.lime.accent-1 { + background-color: #f4ff81 !important; +} + +.lime-text.text-accent-1 { + color: #f4ff81 !important; +} + +.lime.accent-2 { + background-color: #eeff41 !important; +} + +.lime-text.text-accent-2 { + color: #eeff41 !important; +} + +.lime.accent-3 { + background-color: #c6ff00 !important; +} + +.lime-text.text-accent-3 { + color: #c6ff00 !important; +} + +.lime.accent-4 { + background-color: #aeea00 !important; +} + +.lime-text.text-accent-4 { + color: #aeea00 !important; +} + +.yellow { + background-color: #ffeb3b !important; +} + +.yellow-text { + color: #ffeb3b !important; +} + +.yellow.lighten-5 { + background-color: #fffde7 !important; +} + +.yellow-text.text-lighten-5 { + color: #fffde7 !important; +} + +.yellow.lighten-4 { + background-color: #fff9c4 !important; +} + +.yellow-text.text-lighten-4 { + color: #fff9c4 !important; +} + +.yellow.lighten-3 { + background-color: #fff59d !important; +} + +.yellow-text.text-lighten-3 { + color: #fff59d !important; +} + +.yellow.lighten-2 { + background-color: #fff176 !important; +} + +.yellow-text.text-lighten-2 { + color: #fff176 !important; +} + +.yellow.lighten-1 { + background-color: #ffee58 !important; +} + +.yellow-text.text-lighten-1 { + color: #ffee58 !important; +} + +.yellow.darken-1 { + background-color: #fdd835 !important; +} + +.yellow-text.text-darken-1 { + color: #fdd835 !important; +} + +.yellow.darken-2 { + background-color: #fbc02d !important; +} + +.yellow-text.text-darken-2 { + color: #fbc02d !important; +} + +.yellow.darken-3 { + background-color: #f9a825 !important; +} + +.yellow-text.text-darken-3 { + color: #f9a825 !important; +} + +.yellow.darken-4 { + background-color: #f57f17 !important; +} + +.yellow-text.text-darken-4 { + color: #f57f17 !important; +} + +.yellow.accent-1 { + background-color: #ffff8d !important; +} + +.yellow-text.text-accent-1 { + color: #ffff8d !important; +} + +.yellow.accent-2 { + background-color: #ffff00 !important; +} + +.yellow-text.text-accent-2 { + color: #ffff00 !important; +} + +.yellow.accent-3 { + background-color: #ffea00 !important; +} + +.yellow-text.text-accent-3 { + color: #ffea00 !important; +} + +.yellow.accent-4 { + background-color: #ffd600 !important; +} + +.yellow-text.text-accent-4 { + color: #ffd600 !important; +} + +.amber { + background-color: #ffc107 !important; +} + +.amber-text { + color: #ffc107 !important; +} + +.amber.lighten-5 { + background-color: #fff8e1 !important; +} + +.amber-text.text-lighten-5 { + color: #fff8e1 !important; +} + +.amber.lighten-4 { + background-color: #ffecb3 !important; +} + +.amber-text.text-lighten-4 { + color: #ffecb3 !important; +} + +.amber.lighten-3 { + background-color: #ffe082 !important; +} + +.amber-text.text-lighten-3 { + color: #ffe082 !important; +} + +.amber.lighten-2 { + background-color: #ffd54f !important; +} + +.amber-text.text-lighten-2 { + color: #ffd54f !important; +} + +.amber.lighten-1 { + background-color: #ffca28 !important; +} + +.amber-text.text-lighten-1 { + color: #ffca28 !important; +} + +.amber.darken-1 { + background-color: #ffb300 !important; +} + +.amber-text.text-darken-1 { + color: #ffb300 !important; +} + +.amber.darken-2 { + background-color: #ffa000 !important; +} + +.amber-text.text-darken-2 { + color: #ffa000 !important; +} + +.amber.darken-3 { + background-color: #ff8f00 !important; +} + +.amber-text.text-darken-3 { + color: #ff8f00 !important; +} + +.amber.darken-4 { + background-color: #ff6f00 !important; +} + +.amber-text.text-darken-4 { + color: #ff6f00 !important; +} + +.amber.accent-1 { + background-color: #ffe57f !important; +} + +.amber-text.text-accent-1 { + color: #ffe57f !important; +} + +.amber.accent-2 { + background-color: #ffd740 !important; +} + +.amber-text.text-accent-2 { + color: #ffd740 !important; +} + +.amber.accent-3 { + background-color: #ffc400 !important; +} + +.amber-text.text-accent-3 { + color: #ffc400 !important; +} + +.amber.accent-4 { + background-color: #ffab00 !important; +} + +.amber-text.text-accent-4 { + color: #ffab00 !important; +} + +.orange { + background-color: #ff9800 !important; +} + +.orange-text { + color: #ff9800 !important; +} + +.orange.lighten-5 { + background-color: #fff3e0 !important; +} + +.orange-text.text-lighten-5 { + color: #fff3e0 !important; +} + +.orange.lighten-4 { + background-color: #ffe0b2 !important; +} + +.orange-text.text-lighten-4 { + color: #ffe0b2 !important; +} + +.orange.lighten-3 { + background-color: #ffcc80 !important; +} + +.orange-text.text-lighten-3 { + color: #ffcc80 !important; +} + +.orange.lighten-2 { + background-color: #ffb74d !important; +} + +.orange-text.text-lighten-2 { + color: #ffb74d !important; +} + +.orange.lighten-1 { + background-color: #ffa726 !important; +} + +.orange-text.text-lighten-1 { + color: #ffa726 !important; +} + +.orange.darken-1 { + background-color: #fb8c00 !important; +} + +.orange-text.text-darken-1 { + color: #fb8c00 !important; +} + +.orange.darken-2 { + background-color: #f57c00 !important; +} + +.orange-text.text-darken-2 { + color: #f57c00 !important; +} + +.orange.darken-3 { + background-color: #ef6c00 !important; +} + +.orange-text.text-darken-3 { + color: #ef6c00 !important; +} + +.orange.darken-4 { + background-color: #e65100 !important; +} + +.orange-text.text-darken-4 { + color: #e65100 !important; +} + +.orange.accent-1 { + background-color: #ffd180 !important; +} + +.orange-text.text-accent-1 { + color: #ffd180 !important; +} + +.orange.accent-2 { + background-color: #ffab40 !important; +} + +.orange-text.text-accent-2 { + color: #ffab40 !important; +} + +.orange.accent-3 { + background-color: #ff9100 !important; +} + +.orange-text.text-accent-3 { + color: #ff9100 !important; +} + +.orange.accent-4 { + background-color: #ff6d00 !important; +} + +.orange-text.text-accent-4 { + color: #ff6d00 !important; +} + +.deep-orange { + background-color: #ff5722 !important; +} + +.deep-orange-text { + color: #ff5722 !important; +} + +.deep-orange.lighten-5 { + background-color: #fbe9e7 !important; +} + +.deep-orange-text.text-lighten-5 { + color: #fbe9e7 !important; +} + +.deep-orange.lighten-4 { + background-color: #ffccbc !important; +} + +.deep-orange-text.text-lighten-4 { + color: #ffccbc !important; +} + +.deep-orange.lighten-3 { + background-color: #ffab91 !important; +} + +.deep-orange-text.text-lighten-3 { + color: #ffab91 !important; +} + +.deep-orange.lighten-2 { + background-color: #ff8a65 !important; +} + +.deep-orange-text.text-lighten-2 { + color: #ff8a65 !important; +} + +.deep-orange.lighten-1 { + background-color: #ff7043 !important; +} + +.deep-orange-text.text-lighten-1 { + color: #ff7043 !important; +} + +.deep-orange.darken-1 { + background-color: #f4511e !important; +} + +.deep-orange-text.text-darken-1 { + color: #f4511e !important; +} + +.deep-orange.darken-2 { + background-color: #e64a19 !important; +} + +.deep-orange-text.text-darken-2 { + color: #e64a19 !important; +} + +.deep-orange.darken-3 { + background-color: #d84315 !important; +} + +.deep-orange-text.text-darken-3 { + color: #d84315 !important; +} + +.deep-orange.darken-4 { + background-color: #bf360c !important; +} + +.deep-orange-text.text-darken-4 { + color: #bf360c !important; +} + +.deep-orange.accent-1 { + background-color: #ff9e80 !important; +} + +.deep-orange-text.text-accent-1 { + color: #ff9e80 !important; +} + +.deep-orange.accent-2 { + background-color: #ff6e40 !important; +} + +.deep-orange-text.text-accent-2 { + color: #ff6e40 !important; +} + +.deep-orange.accent-3 { + background-color: #ff3d00 !important; +} + +.deep-orange-text.text-accent-3 { + color: #ff3d00 !important; +} + +.deep-orange.accent-4 { + background-color: #dd2c00 !important; +} + +.deep-orange-text.text-accent-4 { + color: #dd2c00 !important; +} + +.brown { + background-color: #795548 !important; +} + +.brown-text { + color: #795548 !important; +} + +.brown.lighten-5 { + background-color: #efebe9 !important; +} + +.brown-text.text-lighten-5 { + color: #efebe9 !important; +} + +.brown.lighten-4 { + background-color: #d7ccc8 !important; +} + +.brown-text.text-lighten-4 { + color: #d7ccc8 !important; +} + +.brown.lighten-3 { + background-color: #bcaaa4 !important; +} + +.brown-text.text-lighten-3 { + color: #bcaaa4 !important; +} + +.brown.lighten-2 { + background-color: #a1887f !important; +} + +.brown-text.text-lighten-2 { + color: #a1887f !important; +} + +.brown.lighten-1 { + background-color: #8d6e63 !important; +} + +.brown-text.text-lighten-1 { + color: #8d6e63 !important; +} + +.brown.darken-1 { + background-color: #6d4c41 !important; +} + +.brown-text.text-darken-1 { + color: #6d4c41 !important; +} + +.brown.darken-2 { + background-color: #5d4037 !important; +} + +.brown-text.text-darken-2 { + color: #5d4037 !important; +} + +.brown.darken-3 { + background-color: #4e342e !important; +} + +.brown-text.text-darken-3 { + color: #4e342e !important; +} + +.brown.darken-4 { + background-color: #3e2723 !important; +} + +.brown-text.text-darken-4 { + color: #3e2723 !important; +} + +.blue-grey { + background-color: #607d8b !important; +} + +.blue-grey-text { + color: #607d8b !important; +} + +.blue-grey.lighten-5 { + background-color: #eceff1 !important; +} + +.blue-grey-text.text-lighten-5 { + color: #eceff1 !important; +} + +.blue-grey.lighten-4 { + background-color: #cfd8dc !important; +} + +.blue-grey-text.text-lighten-4 { + color: #cfd8dc !important; +} + +.blue-grey.lighten-3 { + background-color: #b0bec5 !important; +} + +.blue-grey-text.text-lighten-3 { + color: #b0bec5 !important; +} + +.blue-grey.lighten-2 { + background-color: #90a4ae !important; +} + +.blue-grey-text.text-lighten-2 { + color: #90a4ae !important; +} + +.blue-grey.lighten-1 { + background-color: #78909c !important; +} + +.blue-grey-text.text-lighten-1 { + color: #78909c !important; +} + +.blue-grey.darken-1 { + background-color: #546e7a !important; +} + +.blue-grey-text.text-darken-1 { + color: #546e7a !important; +} + +.blue-grey.darken-2 { + background-color: #455a64 !important; +} + +.blue-grey-text.text-darken-2 { + color: #455a64 !important; +} + +.blue-grey.darken-3 { + background-color: #37474f !important; +} + +.blue-grey-text.text-darken-3 { + color: #37474f !important; +} + +.blue-grey.darken-4 { + background-color: #263238 !important; +} + +.blue-grey-text.text-darken-4 { + color: #263238 !important; +} + +.grey { + background-color: #9e9e9e !important; +} + +.grey-text { + color: #9e9e9e !important; +} + +.grey.lighten-5 { + background-color: #fafafa !important; +} + +.grey-text.text-lighten-5 { + color: #fafafa !important; +} + +.grey.lighten-4 { + background-color: #f5f5f5 !important; +} + +.grey-text.text-lighten-4 { + color: #f5f5f5 !important; +} + +.grey.lighten-3 { + background-color: #eeeeee !important; +} + +.grey-text.text-lighten-3 { + color: #eeeeee !important; +} + +.grey.lighten-2 { + background-color: #e0e0e0 !important; +} + +.grey-text.text-lighten-2 { + color: #e0e0e0 !important; +} + +.grey.lighten-1 { + background-color: #bdbdbd !important; +} + +.grey-text.text-lighten-1 { + color: #bdbdbd !important; +} + +.grey.darken-1 { + background-color: #757575 !important; +} + +.grey-text.text-darken-1 { + color: #757575 !important; +} + +.grey.darken-2 { + background-color: #616161 !important; +} + +.grey-text.text-darken-2 { + color: #616161 !important; +} + +.grey.darken-3 { + background-color: #424242 !important; +} + +.grey-text.text-darken-3 { + color: #424242 !important; +} + +.grey.darken-4 { + background-color: #212121 !important; +} + +.grey-text.text-darken-4 { + color: #212121 !important; +} + +.black { + background-color: #000000 !important; +} + +.black-text { + color: #000000 !important; +} + +.white { + background-color: #FFFFFF !important; +} + +.white-text { + color: #FFFFFF !important; +} + +.transparent { + background-color: transparent !important; +} + +.transparent-text { + color: transparent !important; +} + +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +/* Document + ========================================================================== */ +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ +/** + * Remove the margin in all browsers. + */ +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ +/** + * Remove the gray background on active links in IE 10. + */ +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ +/** + * Remove the border on images inside links in IE 10. + */ +img { + border-style: none; +} + +/* Forms + ========================================================================== */ +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ +button, +[type=button], +[type=reset], +[type=submit] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type=button]::-moz-focus-inner, +[type=reset]::-moz-focus-inner, +[type=submit]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type=button]:-moz-focusring, +[type=reset]:-moz-focusring, +[type=submit]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ +[type=checkbox], +[type=radio] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type=number]::-webkit-inner-spin-button, +[type=number]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type=search] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ +[type=search]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ +/** + * Add the correct display in IE 10+. + */ +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ +[hidden] { + display: none; +} + +html { + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +body { + background-color: var(--md-sys-color-background); + color: var(--md-sys-color-on-background); +} + +button, +input, +optgroup, +select, +textarea { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +} + +a { + color: #039be5; + text-decoration: none; + -webkit-tap-highlight-color: transparent; +} + +.valign-wrapper { + display: flex; + align-items: center; +} + +.clearfix { + clear: both; +} + +.z-depth-0, .btn:focus.tonal, .btn-small:focus.tonal, .btn-large:focus.tonal, .btn:focus.filled, .btn-small:focus.filled, .btn-large:focus.filled, .btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled, +.btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled, +.btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled], .btn.text, .text.btn-small, .text.btn-large, .btn-flat { + box-shadow: none !important; +} + +/* 2dp elevation modified*/ +.z-depth-1, .sidenav, .collapsible, .dropdown-content, .btn-floating, .btn:focus.elevated, .btn-small:focus.elevated, .btn-large:focus.elevated, .btn.tonal:hover, .tonal.btn-small:hover, .tonal.btn-large:hover, .btn.filled:hover, .filled.btn-small:hover, .filled.btn-large:hover, .btn.elevated, .elevated.btn-small, .elevated.btn-large, .card, .card-panel, nav { + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); +} + +.z-depth-1-half, .btn-floating:focus, .btn-floating:hover { + box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2); +} + +/* 6dp elevation modified*/ +.z-depth-2, .btn.elevated:hover, .elevated.btn-small:hover, .elevated.btn-large:hover { + box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); +} + +/* 12dp elevation modified*/ +.z-depth-3, .toast { + box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); +} + +/* 16dp elevation */ +.z-depth-4 { + box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2); +} + +/* 24dp elevation */ +.z-depth-5, .modal { + box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2); +} + +.hoverable { + transition: box-shadow 0.25s; +} +.hoverable:hover { + box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.divider { + height: 1px; + overflow: hidden; + background-color: var(--md-sys-color-outline-variant); +} + +blockquote { + margin: 20px 0; + padding-left: 1.5rem; + border-left: 5px solid var(--md-sys-color-primary); +} + +i { + line-height: inherit; +} +i.left { + float: left; + margin-left: -8px; +} +i.right { + float: right; +} +i.tiny { + font-size: 1rem; +} +i.small { + font-size: 2rem; +} +i.medium { + font-size: 4rem; +} +i.large { + font-size: 6rem; +} + +html.noscroll { + position: fixed; + overflow-y: scroll; + width: 100%; +} + +img.responsive-img, +video.responsive-video { + max-width: 100%; + height: auto; +} + +.pagination li { + display: inline-block; + border-radius: 2px; + text-align: center; + vertical-align: top; + height: 30px; +} +.pagination li a { + color: var(--md-sys-color-on-surface-variant); + display: inline-block; + font-size: 1.2rem; + padding: 0 10px; + line-height: 30px; +} +.pagination li:hover:not(.disabled) { + background-color: rgba(var(--md-sys-color-primary-numeric), 0.06); +} +.pagination li.active a { + color: var(--md-sys-color-on-primary); +} +.pagination li.active, .pagination li.active:hover { + background-color: var(--md-sys-color-primary); +} +.pagination li.disabled a { + cursor: default; + color: var(--md-sys-color-on-surface); +} +.pagination li i { + font-size: 2rem; +} +.pagination li.pages ul li { + display: inline-block; + float: none; +} + +@media only screen and (max-width : 992.99px) { + .pagination { + width: 100%; + } + .pagination li.prev, + .pagination li.next { + width: 10%; + } + .pagination li.pages { + width: 80%; + overflow: hidden; + white-space: nowrap; + } +} +.breadcrumb { + display: inline-block; + font-size: 18px; + color: var(--font-on-primary-color-medium); +} +.breadcrumb i, +.breadcrumb [class^=mdi-], .breadcrumb [class*=mdi-], +.breadcrumb i.material-icons, .breadcrumb i.material-symbols-outlined, +.breadcrumb i.material-symbols-rounded, .breadcrumb i.material-symbols-sharp { + display: block; + float: left; + font-size: 24px; +} +.breadcrumb:before { + content: "\e5cc"; + color: var(--font-on-primary-color-medium); + vertical-align: top; + display: inline-block; + font-family: "Material Symbols Outlined", "Material Symbols Rounded", "Material Symbols Sharp", "Material Icons"; + font-weight: normal; + font-style: normal; + font-size: 25px; + margin: 0 10px 0 8px; + -webkit-font-smoothing: antialiased; + float: left; +} +.breadcrumb:first-child:before { + display: none; +} +.breadcrumb:last-child { + color: var(--md-sys-color-on-primary); +} + +.parallax-container { + position: relative; + overflow: hidden; + height: 500px; +} +.parallax-container .parallax { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; +} +.parallax-container .parallax img { + opacity: 0; + position: absolute; + left: 50%; + bottom: 0; + min-width: 100%; + min-height: 100%; + transform: translate3d(0, 0, 0); + transform: translateX(-50%); +} + +.pin-top, .pin-bottom { + position: relative; +} + +.pinned { + position: fixed !important; +} + +/********************* + Transition Classes +**********************/ +ul.staggered-list li { + opacity: 0; +} + +.fade-in { + opacity: 0; + transform-origin: 0 50%; +} + +/********************* + Media Query Classes +**********************/ +@media only screen and (max-width : 600.99px) { + .hide-on-small-only, .hide-on-small-and-down { + display: none !important; + } +} + +@media only screen and (max-width : 992.99px) { + .hide-on-med-and-down { + display: none !important; + } +} + +@media only screen and (min-width : 601px) { + .hide-on-med-and-up { + display: none !important; + } +} + +@media only screen and (min-width: 601px) and (max-width: 992.99px) { + .hide-on-med-only { + display: none !important; + } +} + +@media only screen and (min-width : 993px) { + .hide-on-large-only { + display: none !important; + } +} + +@media only screen and (min-width : 1201px) { + .hide-on-extra-large-only { + display: none !important; + } +} + +@media only screen and (min-width : 1201px) { + .show-on-extra-large { + display: block !important; + } +} + +@media only screen and (min-width : 993px) { + .show-on-large { + display: block !important; + } +} + +@media only screen and (min-width: 601px) and (max-width: 992.99px) { + .show-on-medium { + display: block !important; + } +} + +@media only screen and (max-width : 600.99px) { + .show-on-small { + display: block !important; + } +} + +@media only screen and (min-width : 601px) { + .show-on-medium-and-up { + display: block !important; + } +} + +@media only screen and (max-width : 992.99px) { + .show-on-medium-and-down { + display: block !important; + } +} + +@media only screen and (max-width : 600.99px) { + .center-on-small-only { + text-align: center; + } +} + +.page-footer { + margin-top: 5rem; + padding-top: 3rem; + border-top: 1px dashed var(--md-sys-color-outline-variant); +} +.page-footer p { + color: var(--md-sys-color-outline-light); +} +.page-footer a { + color: var(--md-sys-color-primary); +} +.page-footer .footer-copyright, +.page-footer .footer-copyright a { + overflow: hidden; + min-height: 50px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 0px; +} + +.page-footer ul { + padding-left: 0; + list-style-type: none; +} + +table, th, td { + border: none; +} + +table { + width: 100%; + display: table; + border-collapse: collapse; + border-spacing: 0; +} +table.striped tr { + border-bottom: none; +} +table.striped tbody > tr:nth-child(odd) { + background-color: rgba(0, 0, 0, 0.08); +} +table.highlight > tbody > tr { + transition: background-color 0.25s ease; +} +table.highlight > tbody > tr:hover { + background-color: rgba(0, 0, 0, 0.04); +} +table thead { + color: var(--md-sys-color-on-surface-variant); +} +table.centered thead tr th, table.centered tbody tr td { + text-align: center; +} + +tr { + border-bottom: 1px solid var(--md-sys-color-outline-variant); +} + +td, th { + padding: 15px 5px; + display: table-cell; + text-align: left; + vertical-align: middle; + border-radius: 0; +} + +@media only screen and (max-width : 992.99px) { + table.responsive-table { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + display: block; + position: relative; + /* sort out borders */ + } + table.responsive-table td:empty:before { + content: " "; + } + table.responsive-table th, + table.responsive-table td { + margin: 0; + vertical-align: top; + } + table.responsive-table th { + text-align: left; + } + table.responsive-table thead { + display: block; + float: left; + } + table.responsive-table thead tr { + display: block; + padding: 0 10px 0 0; + } + table.responsive-table thead tr th::before { + content: " "; + } + table.responsive-table tbody { + display: block; + width: auto; + position: relative; + overflow-x: auto; + white-space: nowrap; + } + table.responsive-table tbody tr { + display: inline-block; + vertical-align: top; + } + table.responsive-table th { + display: block; + text-align: right; + } + table.responsive-table td { + display: block; + min-height: 1.25em; + text-align: left; + } + table.responsive-table tr { + border-bottom: none; + padding: 0 10px; + } + table.responsive-table thead { + border: 0; + border-right: 1px solid var(--md-sys-color-outline-variant); + } +} +.video-container { + position: relative; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; +} +.video-container iframe, .video-container object, .video-container embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +/******************* + Utility Classes +*******************/ +.hide { + display: none !important; +} + +.left-align { + text-align: left; +} + +.right-align { + text-align: right; +} + +.center, .center-align { + text-align: center; +} + +.left { + float: left !important; +} + +.right { + float: right !important; +} + +.no-select, input[type=range], +input[type=range] + .thumb { + user-select: none; +} + +.circle { + border-radius: 50%; +} + +.center-block { + display: block; + margin-left: auto; + margin-right: auto; +} + +.truncate { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.no-padding { + padding: 0 !important; +} + +/************************** + Utility Spacing Classes +**************************/ +.m-0 { + margin: 0 !important; +} + +.mt-0 { + margin-top: 0 !important; +} + +.mr-0 { + margin-right: 0 !important; +} + +.mb-0 { + margin-bottom: 0 !important; +} + +.ml-0 { + margin-left: 0 !important; +} + +.mx-0 { + margin-left: 0 !important; + margin-right: 0 !important; +} + +.my-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.m-1 { + margin: 0.25rem !important; +} + +.mt-1 { + margin-top: 0.25rem !important; +} + +.mr-1 { + margin-right: 0.25rem !important; +} + +.mb-1 { + margin-bottom: 0.25rem !important; +} + +.ml-1 { + margin-left: 0.25rem !important; +} + +.mx-1 { + margin-left: 0.25rem !important; + margin-right: 0.25rem !important; +} + +.my-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; +} + +.m-2 { + margin: 0.5rem !important; +} + +.mt-2 { + margin-top: 0.5rem !important; +} + +.mr-2 { + margin-right: 0.5rem !important; +} + +.mb-2 { + margin-bottom: 0.5rem !important; +} + +.ml-2 { + margin-left: 0.5rem !important; +} + +.mx-2 { + margin-left: 0.5rem !important; + margin-right: 0.5rem !important; +} + +.my-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; +} + +.m-3 { + margin: 0.75rem !important; +} + +.mt-3 { + margin-top: 0.75rem !important; +} + +.mr-3 { + margin-right: 0.75rem !important; +} + +.mb-3 { + margin-bottom: 0.75rem !important; +} + +.ml-3 { + margin-left: 0.75rem !important; +} + +.mx-3 { + margin-left: 0.75rem !important; + margin-right: 0.75rem !important; +} + +.my-3 { + margin-top: 0.75rem !important; + margin-bottom: 0.75rem !important; +} + +.m-4 { + margin: 1rem !important; +} + +.mt-4 { + margin-top: 1rem !important; +} + +.mr-4 { + margin-right: 1rem !important; +} + +.mb-4 { + margin-bottom: 1rem !important; +} + +.ml-4 { + margin-left: 1rem !important; +} + +.mx-4 { + margin-left: 1rem !important; + margin-right: 1rem !important; +} + +.my-4 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; +} + +.m-5 { + margin: 1.5rem !important; +} + +.mt-5 { + margin-top: 1.5rem !important; +} + +.mr-5 { + margin-right: 1.5rem !important; +} + +.mb-5 { + margin-bottom: 1.5rem !important; +} + +.ml-5 { + margin-left: 1.5rem !important; +} + +.mx-5 { + margin-left: 1.5rem !important; + margin-right: 1.5rem !important; +} + +.my-5 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; +} + +.m-6 { + margin: 3rem !important; +} + +.mt-6 { + margin-top: 3rem !important; +} + +.mr-6 { + margin-right: 3rem !important; +} + +.mb-6 { + margin-bottom: 3rem !important; +} + +.ml-6 { + margin-left: 3rem !important; +} + +.mx-6 { + margin-left: 3rem !important; + margin-right: 3rem !important; +} + +.my-6 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; +} + +.m-auto { + margin: auto !important; +} + +.mt-auto { + margin-top: auto !important; +} + +.mr-auto { + margin-right: auto !important; +} + +.mb-auto { + margin-bottom: auto !important; +} + +.ml-auto { + margin-left: auto !important; +} + +.mx-auto { + margin-left: auto !important; + margin-right: auto !important; +} + +.my-auto { + margin-top: auto !important; + margin-bottom: auto !important; +} + +.p-0 { + padding: 0 !important; +} + +.pt-0 { + padding-top: 0 !important; +} + +.pr-0 { + padding-right: 0 !important; +} + +.pb-0 { + padding-bottom: 0 !important; +} + +.pl-0 { + padding-left: 0 !important; +} + +.px-0 { + padding-left: 0 !important; + padding-right: 0 !important; +} + +.py-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.p-1 { + padding: 0.25rem !important; +} + +.pt-1 { + padding-top: 0.25rem !important; +} + +.pr-1 { + padding-right: 0.25rem !important; +} + +.pb-1 { + padding-bottom: 0.25rem !important; +} + +.pl-1 { + padding-left: 0.25rem !important; +} + +.px-1 { + padding-left: 0.25rem !important; + padding-right: 0.25rem !important; +} + +.py-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; +} + +.p-2 { + padding: 0.5rem !important; +} + +.pt-2 { + padding-top: 0.5rem !important; +} + +.pr-2 { + padding-right: 0.5rem !important; +} + +.pb-2 { + padding-bottom: 0.5rem !important; +} + +.pl-2 { + padding-left: 0.5rem !important; +} + +.px-2 { + padding-left: 0.5rem !important; + padding-right: 0.5rem !important; +} + +.py-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; +} + +.p-3 { + padding: 0.75rem !important; +} + +.pt-3 { + padding-top: 0.75rem !important; +} + +.pr-3 { + padding-right: 0.75rem !important; +} + +.pb-3 { + padding-bottom: 0.75rem !important; +} + +.pl-3 { + padding-left: 0.75rem !important; +} + +.px-3 { + padding-left: 0.75rem !important; + padding-right: 0.75rem !important; +} + +.py-3 { + padding-top: 0.75rem !important; + padding-bottom: 0.75rem !important; +} + +.p-4 { + padding: 1rem !important; +} + +.pt-4 { + padding-top: 1rem !important; +} + +.pr-4 { + padding-right: 1rem !important; +} + +.pb-4 { + padding-bottom: 1rem !important; +} + +.pl-4 { + padding-left: 1rem !important; +} + +.px-4 { + padding-left: 1rem !important; + padding-right: 1rem !important; +} + +.py-4 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; +} + +.p-5 { + padding: 1.5rem !important; +} + +.pt-5 { + padding-top: 1.5rem !important; +} + +.pr-5 { + padding-right: 1.5rem !important; +} + +.pb-5 { + padding-bottom: 1.5rem !important; +} + +.pl-5 { + padding-left: 1.5rem !important; +} + +.px-5 { + padding-left: 1.5rem !important; + padding-right: 1.5rem !important; +} + +.py-5 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; +} + +.p-6 { + padding: 3rem !important; +} + +.pt-6 { + padding-top: 3rem !important; +} + +.pr-6 { + padding-right: 3rem !important; +} + +.pb-6 { + padding-bottom: 3rem !important; +} + +.pl-6 { + padding-left: 3rem !important; +} + +.px-6 { + padding-left: 3rem !important; + padding-right: 3rem !important; +} + +.py-6 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; +} + +.p-auto { + padding: auto !important; +} + +.pt-auto { + padding-top: auto !important; +} + +.pr-auto { + padding-right: auto !important; +} + +.pb-auto { + padding-bottom: auto !important; +} + +.pl-auto { + padding-left: auto !important; +} + +.px-auto { + padding-left: auto !important; + padding-right: auto !important; +} + +.py-auto { + padding-top: auto !important; + padding-bottom: auto !important; +} + +.collection { + padding-left: 0; + list-style-type: none; + margin: 0.5rem 0 1rem 0; + border: 1px solid var(--md-sys-color-outline-variant); + border-radius: 2px; + overflow: hidden; + position: relative; +} +.collection .collection-item { + background-color: transparent; + line-height: 1.5rem; + padding: 10px 20px; + margin: 0; + border-bottom: 1px solid var(--md-sys-color-outline-variant); +} +.collection .collection-item.avatar { + min-height: 84px; + padding-left: 72px; + position: relative; +} +.collection .collection-item.avatar:not(.circle-clipper) > .circle, +.collection .collection-item.avatar :not(.circle-clipper) > .circle { + position: absolute; + width: 42px; + height: 42px; + overflow: hidden; + left: 15px; + display: inline-block; + vertical-align: middle; +} +.collection .collection-item.avatar i.circle { + font-size: 18px; + line-height: 42px; + color: #fff; + background-color: var(--md-sys-color-shadow-light); + text-align: center; +} +.collection .collection-item.avatar .title { + font-size: 16px; +} +.collection .collection-item.avatar p { + margin: 0; +} +.collection .collection-item.avatar .secondary-content { + position: absolute; + top: 16px; + right: 16px; +} +.collection .collection-item:last-child { + border-bottom: none; +} +.collection .collection-item.active { + background-color: var(--md-sys-color-primary); + color: var(--md-sys-color-on-primary); +} +.collection .collection-item.active .secondary-content { + color: var(--md-sys-color-on-primary); +} +.collection a.collection-item { + display: block; + transition: 0.25s; + color: var(--md-sys-color-primary); +} +.collection a.collection-item:not(.active):hover { + background-color: rgba(0, 0, 0, 0.04); +} +.collection.with-header .collection-header { + background-color: transparent; + border-bottom: 1px solid var(--md-sys-color-outline-variant); + padding: 10px 20px; +} +.collection.with-header .collection-item { + padding-left: 30px; +} +.collection.with-header .collection-item.avatar { + padding-left: 72px; +} + +.secondary-content { + float: right; + color: var(--md-sys-color-primary); +} + +.collapsible .collection { + margin: 0; + border: none; +} + +:root { + --bagde-height: 22px; +} + +span.badge { + min-width: 3rem; + padding: 0 6px; + margin-left: 14px; + text-align: center; + font-size: 1rem; + line-height: var(--bagde-height); + height: var(--bagde-height); + color: var(--md-sys-color-on-surface-variant); + float: right; + box-sizing: border-box; +} +span.badge.new { + font-weight: 300; + font-size: 0.8rem; + color: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-primary); + border-radius: 2px; +} +span.badge.new:after { + content: " new"; +} +span.badge[data-badge-caption]::after { + content: " " attr(data-badge-caption); +} + +.active span.badge { + color: var(--md-sys-color-on-primary); +} + +nav ul a span.badge { + display: inline-block; + float: none; + margin-left: 4px; + line-height: var(--bagde-height); + height: var(--bagde-height); + -webkit-font-smoothing: auto; +} + +.collection-item span.badge { + margin-top: calc(0.75rem - var(--bagde-height) * 0.5); +} + +.collapsible span.badge { + margin-left: auto; +} + +.collapsible .active span.badge:not(.new) { + color: var(--md-sys-color-on-surface-variant); +} + +.sidenav span.badge { + margin-top: calc(var(--sidenav-line-height) * 0.5 - 11px); +} + +table span.badge { + display: inline-block; + float: none; + margin-left: auto; +} + +/* This is needed for some mobile phones to display the Google Icon font properly */ +.material-icons, .material-symbols-outlined, +.material-symbols-rounded, .material-symbols-sharp { + text-rendering: optimizeLegibility; + font-feature-settings: "liga"; +} + +.container { + margin: 0 auto; + max-width: 1280px; + width: 90%; +} + +@media only screen and (min-width : 601px) { + .container { + width: 85%; + } +} +@media only screen and (min-width : 993px) { + .container { + width: 70%; + } +} +.section { + padding: 1rem 0; +} + +body { + --gap-size: 1.5rem; +} + +.row { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: var(--gap-size); +} +.row .s1 { + grid-column: auto/span 1; +} +.row .s2 { + grid-column: auto/span 2; +} +.row .s3 { + grid-column: auto/span 3; +} +.row .s4 { + grid-column: auto/span 4; +} +.row .s5 { + grid-column: auto/span 5; +} +.row .s6 { + grid-column: auto/span 6; +} +.row .s7 { + grid-column: auto/span 7; +} +.row .s8 { + grid-column: auto/span 8; +} +.row .s9 { + grid-column: auto/span 9; +} +.row .s10 { + grid-column: auto/span 10; +} +.row .s11 { + grid-column: auto/span 11; +} +.row .s12 { + grid-column: auto/span 12; +} +.row .offset-s1 { + grid-column-start: 3; +} +.row .offset-s2 { + grid-column-start: 2; +} +.row .offset-s3 { + grid-column-start: 4; +} +.row .offset-s4 { + grid-column-start: 5; +} +.row .offset-s5 { + grid-column-start: 6; +} +.row .offset-s6 { + grid-column-start: 7; +} +.row .offset-s7 { + grid-column-start: 8; +} +.row .offset-s8 { + grid-column-start: 9; +} +.row .offset-s9 { + grid-column-start: 10; +} +.row .offset-s10 { + grid-column-start: 11; +} +.row .offset-s11 { + grid-column-start: 12; +} +@media only screen and (min-width : 601px) { + .row .m1 { + grid-column: auto/span 1; + } + .row .m2 { + grid-column: auto/span 2; + } + .row .m3 { + grid-column: auto/span 3; + } + .row .m4 { + grid-column: auto/span 4; + } + .row .m5 { + grid-column: auto/span 5; + } + .row .m6 { + grid-column: auto/span 6; + } + .row .m7 { + grid-column: auto/span 7; + } + .row .m8 { + grid-column: auto/span 8; + } + .row .m9 { + grid-column: auto/span 9; + } + .row .m10 { + grid-column: auto/span 10; + } + .row .m11 { + grid-column: auto/span 11; + } + .row .m12 { + grid-column: auto/span 12; + } + .row .offset-m1 { + grid-column-start: 2; + } + .row .offset-m2 { + grid-column-start: 3; + } + .row .offset-m3 { + grid-column-start: 4; + } + .row .offset-m4 { + grid-column-start: 5; + } + .row .offset-m5 { + grid-column-start: 6; + } + .row .offset-m6 { + grid-column-start: 7; + } + .row .offset-m7 { + grid-column-start: 8; + } + .row .offset-m8 { + grid-column-start: 9; + } + .row .offset-m9 { + grid-column-start: 10; + } + .row .offset-m10 { + grid-column-start: 11; + } + .row .offset-m11 { + grid-column-start: 12; + } +} +@media only screen and (min-width : 993px) { + .row .l1 { + grid-column: auto/span 1; + } + .row .l2 { + grid-column: auto/span 2; + } + .row .l3 { + grid-column: auto/span 3; + } + .row .l4 { + grid-column: auto/span 4; + } + .row .l5 { + grid-column: auto/span 5; + } + .row .l6 { + grid-column: auto/span 6; + } + .row .l7 { + grid-column: auto/span 7; + } + .row .l8 { + grid-column: auto/span 8; + } + .row .l9 { + grid-column: auto/span 9; + } + .row .l10 { + grid-column: auto/span 10; + } + .row .l11 { + grid-column: auto/span 11; + } + .row .l12 { + grid-column: auto/span 12; + } + .row .offset-l1 { + grid-column-start: 2; + } + .row .offset-l2 { + grid-column-start: 3; + } + .row .offset-l3 { + grid-column-start: 4; + } + .row .offset-l4 { + grid-column-start: 5; + } + .row .offset-l5 { + grid-column-start: 6; + } + .row .offset-l6 { + grid-column-start: 7; + } + .row .offset-l7 { + grid-column-start: 8; + } + .row .offset-l8 { + grid-column-start: 9; + } + .row .offset-l9 { + grid-column-start: 10; + } + .row .offset-l10 { + grid-column-start: 11; + } + .row .offset-l11 { + grid-column-start: 12; + } +} +@media only screen and (min-width : 1201px) { + .row .xl1 { + grid-column: auto/span 1; + } + .row .xl2 { + grid-column: auto/span 2; + } + .row .xl3 { + grid-column: auto/span 3; + } + .row .xl4 { + grid-column: auto/span 4; + } + .row .xl5 { + grid-column: auto/span 5; + } + .row .xl6 { + grid-column: auto/span 6; + } + .row .xl7 { + grid-column: auto/span 7; + } + .row .xl8 { + grid-column: auto/span 8; + } + .row .xl9 { + grid-column: auto/span 9; + } + .row .xl10 { + grid-column: auto/span 10; + } + .row .xl11 { + grid-column: auto/span 11; + } + .row .xl12 { + grid-column: auto/span 12; + } + .row .offset-xl1 { + grid-column-start: 2; + } + .row .offset-xl2 { + grid-column-start: 3; + } + .row .offset-xl3 { + grid-column-start: 4; + } + .row .offset-xl4 { + grid-column-start: 5; + } + .row .offset-xl5 { + grid-column-start: 6; + } + .row .offset-xl6 { + grid-column-start: 7; + } + .row .offset-xl7 { + grid-column-start: 8; + } + .row .offset-xl8 { + grid-column-start: 9; + } + .row .offset-xl9 { + grid-column-start: 10; + } + .row .offset-xl10 { + grid-column-start: 11; + } + .row .offset-xl11 { + grid-column-start: 12; + } +} + +.g-0 { + gap: 0; +} + +.g-1 { + gap: calc(0.25 * var(--gap-size)); +} + +.g-2 { + gap: calc(0.5 * var(--gap-size)); +} + +.g-3 { + gap: calc(1 * var(--gap-size)); +} + +.g-4 { + gap: calc(1.5 * var(--gap-size)); +} + +.g-5 { + gap: calc(3 * var(--gap-size)); +} + +:root { + --navbar-height: 64px; + --navbar-height-mobile: 56px; +} + +nav { + color: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-secondary-container); + width: 100%; + height: var(--navbar-height-mobile); + line-height: var(--navbar-height-mobile); +} +nav.nav-extended { + height: auto; +} +nav.nav-extended .nav-wrapper { + min-height: var(--navbar-height-mobile); + height: auto; +} +nav.nav-extended .nav-content { + position: relative; + line-height: normal; +} +nav a { + color: var(--md-sys-color-on-primary); +} +nav i, +nav [class^=mdi-], nav [class*=mdi-], +nav i.material-icons, nav i.material-symbols-outlined, +nav i.material-symbols-rounded, nav i.material-symbols-sharp { + display: block; + font-size: 24px; + height: var(--navbar-height-mobile); + line-height: var(--navbar-height-mobile); +} +nav .nav-wrapper { + position: relative; + height: 100%; +} +@media only screen and (min-width : 993px) { + nav a.sidenav-trigger { + display: none; + } +} +nav .sidenav-trigger { + float: left; + position: relative; + z-index: 1; + height: var(--navbar-height-mobile); + margin: 0 18px; +} +nav .sidenav-trigger i { + height: var(--navbar-height-mobile); + line-height: var(--navbar-height-mobile); +} +nav .brand-logo { + position: absolute; + color: var(--md-sys-color-on-primary); + display: inline-block; + font-size: 2.1rem; + padding: 0; +} +nav .brand-logo.center { + left: 50%; + transform: translateX(-50%); +} +@media only screen and (max-width : 992.99px) { + nav .brand-logo { + left: 50%; + transform: translateX(-50%); + } + nav .brand-logo.left, nav .brand-logo.right { + padding: 0; + transform: none; + } + nav .brand-logo.left { + left: 0.5rem; + } + nav .brand-logo.right { + right: 0.5rem; + left: auto; + } +} +nav .brand-logo.right { + right: 0.5rem; + padding: 0; +} +nav .brand-logo i, +nav .brand-logo [class^=mdi-], nav .brand-logo [class*=mdi-], +nav .brand-logo i.material-icons, nav .brand-logo i.material-symbols-outlined, +nav .brand-logo i.material-symbols-rounded, nav .brand-logo i.material-symbols-sharp { + float: left; + margin-right: 15px; +} +nav .nav-title { + display: inline-block; + font-size: 32px; + padding: 28px 0; +} +nav ul:not(.dropdown-content) { + list-style-type: none; + margin: 0; +} +nav ul:not(.dropdown-content) > li { + transition: background-color 0.3s; + float: left; + padding: 0; +} +nav ul:not(.dropdown-content) > li > a { + transition: background-color 0.3s; + font-size: 1rem; + color: var(--md-sys-color-on-primary); + display: block; + padding: 0 15px; + cursor: pointer; +} +nav ul:not(.dropdown-content) > li > a.active { + background-color: var(--md-ref-palette-primary80); +} +nav ul:not(.dropdown-content) > li > a:hover:not(.active) { + background-color: var(--md-ref-palette-primary70); +} +nav ul:not(.dropdown-content) > li > a.btn, nav ul:not(.dropdown-content) > li > a.btn-small, nav ul:not(.dropdown-content) > li > a.btn-large, nav ul:not(.dropdown-content) > li > a.btn-flat, nav ul:not(.dropdown-content) > li > a.btn-floating { + margin-top: -2px; + margin-left: 15px; + margin-right: 15px; + display: inline-block; +} +nav ul:not(.dropdown-content) > li > a.btn > .material-icons, nav ul:not(.dropdown-content) > li > a.btn-small > .material-icons, nav ul:not(.dropdown-content) > li > a.btn > .material-symbols-outlined, nav ul:not(.dropdown-content) > li > a.btn-small > .material-symbols-outlined, nav ul:not(.dropdown-content) > li > a.btn > .material-symbols-rounded, nav ul:not(.dropdown-content) > li > a.btn-small > .material-symbols-rounded, nav ul:not(.dropdown-content) > li > a.btn > .material-symbols-sharp, nav ul:not(.dropdown-content) > li > a.btn-small > .material-symbols-sharp, nav ul:not(.dropdown-content) > li > a.btn-large > .material-icons, nav ul:not(.dropdown-content) > li > a.btn-large > .material-symbols-outlined, nav ul:not(.dropdown-content) > li > a.btn-large > .material-symbols-rounded, nav ul:not(.dropdown-content) > li > a.btn-large > .material-symbols-sharp, nav ul:not(.dropdown-content) > li > a.btn-flat > .material-icons, nav ul:not(.dropdown-content) > li > a.btn-flat > .material-symbols-outlined, nav ul:not(.dropdown-content) > li > a.btn-flat > .material-symbols-rounded, nav ul:not(.dropdown-content) > li > a.btn-flat > .material-symbols-sharp, nav ul:not(.dropdown-content) > li > a.btn-floating > .material-icons, nav ul:not(.dropdown-content) > li > a.btn-floating > .material-symbols-outlined, nav ul:not(.dropdown-content) > li > a.btn-floating > .material-symbols-rounded, nav ul:not(.dropdown-content) > li > a.btn-floating > .material-symbols-sharp { + height: inherit; + line-height: inherit; +} +nav ul:not(.dropdown-content).left { + float: left; +} +nav form { + height: 100%; +} +nav .input-field { + margin: 0; + height: 100%; +} +nav .input-field input[type=search] { + height: 100%; + font-size: 1.2rem; + border: none; + padding-left: 2rem; + color: var(--md-sys-color-on-primary); +} +nav .input-field input[type=search]:focus, nav .input-field input[type=search][type=text]:valid, nav .input-field input[type=search][type=password]:valid, nav .input-field input[type=search][type=email]:valid, nav .input-field input[type=search][type=url]:valid, nav .input-field input[type=search][type=date]:valid { + border: none; + box-shadow: none; +} +nav .input-field label { + top: 0; + left: 0; +} +nav .input-field label i { + color: var(--font-on-primary-color-medium); + transition: color 0.3s; +} +nav .input-field label.active i { + color: var(--md-sys-color-on-primary); +} + +.navbar-fixed { + position: relative; + height: var(--navbar-height-mobile); + z-index: 997; +} +.navbar-fixed nav { + position: fixed; + right: 0; +} + +@media only screen and (min-width : 601px) { + nav.nav-extended .nav-wrapper { + min-height: var(--navbar-height-mobile); + } + nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i { + height: var(--navbar-height); + line-height: var(--navbar-height); + } + .navbar-fixed { + height: var(--navbar-height); + } +} +a { + text-decoration: none; +} + +html { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-weight: normal; + color: var(--md-sys-color-on-background); +} +@media only screen and (min-width: 0) { + html { + font-size: 14px; + } +} +@media only screen and (min-width: 993px) { + html { + font-size: 14.5px; + } +} +@media only screen and (min-width: 1201px) { + html { + font-size: 15px; + } +} + +h1, h2, h3, h4, h5, h6 { + font-weight: 400; + line-height: 1.3; +} + +h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + font-weight: inherit; +} + +h1 { + font-size: 4.2rem; + line-height: 110%; + margin: 2.8rem 0 1.68rem 0; +} + +h2 { + font-size: 3.56rem; + line-height: 110%; + margin: 2.3733333333rem 0 1.424rem 0; +} + +h3 { + font-size: 2.92rem; + line-height: 110%; + margin: 1.9466666667rem 0 1.168rem 0; +} + +h4 { + font-size: 2.28rem; + line-height: 110%; + margin: 1.52rem 0 0.912rem 0; +} + +h5 { + font-size: 1.64rem; + line-height: 110%; + margin: 1.0933333333rem 0 0.656rem 0; +} + +h6 { + font-size: 1.15rem; + line-height: 110%; + margin: 0.7666666667rem 0 0.46rem 0; +} + +em { + font-style: italic; +} + +strong { + font-weight: 500; +} + +small { + font-size: 75%; +} + +.light { + font-weight: 300; +} + +.thin { + font-weight: 200; +} + +@media only screen and (min-width: 360px) { + .flow-text { + font-size: 1.2rem; + } +} +@media only screen and (min-width: 390px) { + .flow-text { + font-size: 1.224rem; + } +} +@media only screen and (min-width: 420px) { + .flow-text { + font-size: 1.248rem; + } +} +@media only screen and (min-width: 450px) { + .flow-text { + font-size: 1.272rem; + } +} +@media only screen and (min-width: 480px) { + .flow-text { + font-size: 1.296rem; + } +} +@media only screen and (min-width: 510px) { + .flow-text { + font-size: 1.32rem; + } +} +@media only screen and (min-width: 540px) { + .flow-text { + font-size: 1.344rem; + } +} +@media only screen and (min-width: 570px) { + .flow-text { + font-size: 1.368rem; + } +} +@media only screen and (min-width: 600px) { + .flow-text { + font-size: 1.392rem; + } +} +@media only screen and (min-width: 630px) { + .flow-text { + font-size: 1.416rem; + } +} +@media only screen and (min-width: 660px) { + .flow-text { + font-size: 1.44rem; + } +} +@media only screen and (min-width: 690px) { + .flow-text { + font-size: 1.464rem; + } +} +@media only screen and (min-width: 720px) { + .flow-text { + font-size: 1.488rem; + } +} +@media only screen and (min-width: 750px) { + .flow-text { + font-size: 1.512rem; + } +} +@media only screen and (min-width: 780px) { + .flow-text { + font-size: 1.536rem; + } +} +@media only screen and (min-width: 810px) { + .flow-text { + font-size: 1.56rem; + } +} +@media only screen and (min-width: 840px) { + .flow-text { + font-size: 1.584rem; + } +} +@media only screen and (min-width: 870px) { + .flow-text { + font-size: 1.608rem; + } +} +@media only screen and (min-width: 900px) { + .flow-text { + font-size: 1.632rem; + } +} +@media only screen and (min-width: 930px) { + .flow-text { + font-size: 1.656rem; + } +} +@media only screen and (min-width: 960px) { + .flow-text { + font-size: 1.68rem; + } +} +@media only screen and (max-width: 360px) { + .flow-text { + font-size: 1.2rem; + } +} + +.scale-transition { + transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important; +} +.scale-transition.scale-out { + transform: scale(0); + transition: transform 0.2s !important; +} +.scale-transition.scale-in { + transform: scale(1); +} + +.card-panel { + transition: box-shadow 0.25s; + padding: 24px; + margin: 0.5rem 0 1rem 0; + border-radius: 12px; + background-color: var(--md-sys-color-surface); +} + +.card { + overflow: hidden; + position: relative; + background-color: var(--md-sys-color-surface); + transition: box-shadow 0.25s; + border-radius: 12px; +} +.card .card-title { + font-size: 24px; + font-weight: 300; +} +.card .card-title.activator { + cursor: pointer; +} +.card.small, .card.medium, .card.large { + position: relative; +} +.card.small .card-image, .card.medium .card-image, .card.large .card-image { + max-height: 60%; + overflow: hidden; +} +.card.small .card-image + .card-content, .card.medium .card-image + .card-content, .card.large .card-image + .card-content { + max-height: 40%; +} +.card.small .card-content, .card.medium .card-content, .card.large .card-content { + max-height: 100%; + overflow: hidden; +} +.card.small .card-action, .card.medium .card-action, .card.large .card-action { + position: absolute; + bottom: 0; + left: 0; + right: 0; +} +.card.small { + height: 300px; +} +.card.medium { + height: 400px; +} +.card.large { + height: 500px; +} +.card.horizontal { + display: flex; +} +.card.horizontal.small .card-image, .card.horizontal.medium .card-image, .card.horizontal.large .card-image { + height: 100%; + max-height: none; + overflow: visible; +} +.card.horizontal.small .card-image img, .card.horizontal.medium .card-image img, .card.horizontal.large .card-image img { + height: 100%; +} +.card.horizontal .card-image { + max-width: 50%; +} +.card.horizontal .card-image img { + border-radius: 2px 0 0 2px; + max-width: 100%; + width: auto; +} +.card.horizontal .card-stacked { + display: flex; + flex-direction: column; + flex: 1; + position: relative; +} +.card.horizontal .card-stacked .card-content { + flex-grow: 1; +} +.card.sticky-action .card-action { + z-index: 2; +} +.card.sticky-action .card-reveal { + z-index: 1; + padding-bottom: 64px; +} +.card .card-image { + position: relative; +} +.card .card-image img { + display: block; + border-radius: 2px 2px 0 0; + position: relative; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; +} +.card .card-image .card-title { + color: var(--md-sys-color-surface); + position: absolute; + bottom: 0; + left: 0; + max-width: 100%; + padding: 24px; +} +.card .card-content { + padding: 24px; + border-radius: 0 0 2px 2px; +} +.card .card-content p { + margin: 0; +} +.card .card-content .card-title { + display: block; + line-height: 32px; + margin-bottom: 8px; +} +.card .card-content .card-title i { + line-height: 32px; +} +.card .card-action { + border-top: 1px solid var(--md-sys-color-outline-variant); + position: relative; + background-color: inherit; +} +.card .card-action:last-child { + border-radius: 0 0 2px 2px; +} +.card .card-action a { + padding: 16px 24px; + display: inline-block; +} +.card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating) { + color: var(--md-sys-color-primary); + transition: color 0.3s ease; +} +.card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating):hover { + background-color: rgba(var(--md-sys-color-primary-numeric), 0.06); +} +.card .card-reveal { + padding: 24px; + position: absolute; + background-color: var(--md-sys-color-surface); + width: 100%; + overflow-y: auto; + left: 0; + top: 100%; + height: 100%; + z-index: 3; + display: none; +} +.card .card-reveal .card-title { + cursor: pointer; + display: block; +} + +#toast-container { + display: block; + position: fixed; + z-index: 10000; +} +@media only screen and (max-width : 600.99px) { + #toast-container { + min-width: 100%; + bottom: 0%; + } +} +@media only screen and (min-width : 601px) and (max-width : 992.99px) { + #toast-container { + left: 5%; + bottom: 7%; + max-width: 90%; + } +} +@media only screen and (min-width : 993px) { + #toast-container { + top: 10%; + right: 7%; + max-width: 86%; + } +} + +.toast { + border-radius: 4px; + top: 35px; + width: auto; + margin-top: 10px; + position: relative; + max-width: 100%; + height: auto; + min-height: 48px; + padding-left: 16px; + padding-right: 12px; + font-size: 14px; + font-weight: 500; + line-height: 20px; + color: var(--md-sys-color-inverse-on-surface); + background-color: var(--md-sys-color-inverse-surface); + display: flex; + align-items: center; + justify-content: space-between; + cursor: default; +} +.toast .toast-action { + color: var(--md-sys-color-inverse-primary); + font-weight: 500; + margin-right: -25px; + margin-left: 3rem; +} +.toast.rounded { + border-radius: 24px; +} +@media only screen and (max-width : 600.99px) { + .toast { + width: 100%; + border-radius: 0; + } +} + +.tabs { + padding-left: 0; + list-style-type: none; + position: relative; + overflow-x: auto; + overflow-y: hidden; + height: 48px; + width: 100%; + background-color: var(--md-sys-color-surface); + margin: 0 auto; + white-space: nowrap; +} +.tabs.tabs-transparent { + background-color: transparent; +} +.tabs.tabs-transparent .tab a { + color: var(--font-on-primary-color-medium); +} +.tabs.tabs-transparent .tab.disabled a, +.tabs.tabs-transparent .tab.disabled a:hover, +.tabs.tabs-transparent .tab.disabled a:focus { + color: rgba(255, 255, 255, 0.38); +} +.tabs.tabs-transparent .tab a:hover { + background-color: rgba(0, 0, 0, 0.04); +} +.tabs.tabs-transparent .tab a.active, +.tabs.tabs-transparent .tab a:focus { + background-color: transparent; +} +.tabs.tabs-transparent .tab a:hover, +.tabs.tabs-transparent .tab a.active, +.tabs.tabs-transparent .tab a:focus { + color: var(--md-sys-color-on-primary); +} +.tabs.tabs-transparent .indicator { + background-color: var(--md-sys-color-on-primary); +} +.tabs.tabs-fixed-width { + display: flex; +} +.tabs.tabs-fixed-width .tab { + flex-grow: 1; +} +.tabs .tab { + padding-left: 0; + list-style-type: none; + display: inline-block; + text-align: center; + line-height: 48px; + height: 48px; + padding: 0; + margin: 0; +} +.tabs .tab a { + color: var(--md-sys-color-on-surface-variant); + display: block; + width: 100%; + height: 100%; + padding: 0 24px; + font-size: 14px; + text-overflow: ellipsis; + overflow: hidden; + transition: color 0.28s ease, background-color 0.28s ease; +} +.tabs .tab a.active { + background-color: transparent; +} +.tabs .tab a.active, .tabs .tab a:focus, .tabs .tab a:hover { + color: var(--md-sys-color-primary); +} +.tabs .tab a:hover { + background-color: rgba(var(--md-sys-color-primary-numeric), 0.06); +} +.tabs .tab a:focus, .tabs .tab a.active { + background-color: rgba(var(--md-sys-color-primary-numeric), 0.18); + outline: none; +} +.tabs .tab.disabled a, .tabs .tab.disabled a:hover { + color: var(--md-sys-color-on-surface); + cursor: default; + background-color: transparent; +} +.tabs .tab.disabled a:not(:focus), .tabs .tab.disabled a:hover:not(:focus) { + background-color: transparent; +} +.tabs .indicator { + position: absolute; + bottom: 0; + height: 3px; + background-color: var(--md-sys-color-primary); + will-change: left, right; + border-radius: 3px 3px 0 0; +} + +/* Fixed Sidenav hide on smaller */ +@media only screen and (max-width : 992.99px) { + .tabs { + display: flex; + } + .tabs .tab { + flex-grow: 1; + } + .tabs .tab a { + padding: 0 12px; + } +} +.material-tooltip { + padding: 0 8px; + border-radius: 4px; + color: var(--md-sys-color-inverse-on-surface); + background-color: var(--md-sys-color-inverse-surface); + font-family: var(--md-sys-typescale-body-small-font-family-name); + font-size: var(--md-sys-typescale-body-small-font-size); + line-height: var(--md-sys-typescale-body-small-line-height); + font-weight: var(--md-sys-typescale-body-small-font-weight); + min-height: 24px; + opacity: 0; + padding-top: 6px; + padding-bottom: 6px; + font-size: 12px; + line-height: 16px; + font-weight: 400; + letter-spacing: 0.4px; + position: absolute; + max-width: 300px; + overflow: hidden; + left: 0; + top: 0; + pointer-events: none; + display: flex; + align-items: center; + visibility: hidden; + z-index: 2000; +} + +.backdrop { + position: absolute; + opacity: 0; + height: 7px; + width: 14px; + border-radius: 0 0 50% 50%; + background-color: var(--md-sys-color-inverse-surface); + z-index: -1; + transform-origin: 50% 0; + visibility: hidden; +} + +.btn, .btn-small, .btn-large, .btn-floating, .btn-flat { + --btn-height: 40px; + --btn-font-size-icon: 16px; + --btn-padding: 24px; + --btn-padding-icon: 16px; + --btn-gap-icon: 8px; + --btn-border-radius: 4px; + --btn-font-size: 14px; + height: var(--btn-height); + border: none; + border-radius: var(--btn-border-radius); + padding-left: var(--btn-padding); + padding-right: var(--btn-padding); + font-size: ver(--btn-font-size); + font-weight: 500; + text-decoration: none; + display: inline-flex; + align-items: center; + cursor: pointer; + -webkit-tap-highlight-color: transparent; + white-space: nowrap; + outline: 0; + user-select: none; + transition: background-color 0.2s ease-out; +} + +.btn.icon-left, .icon-left.btn-small, .icon-left.btn-large, .btn.icon-right, .icon-right.btn-small, .icon-right.btn-large { + position: relative; +} + +.btn.icon-left, .icon-left.btn-small, .icon-left.btn-large { + padding-left: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon)); +} + +.btn.icon-right, .icon-right.btn-small, .icon-right.btn-large { + padding-right: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon)); +} + +.btn.icon-left i, .icon-left.btn-small i, .icon-left.btn-large i, .btn.icon-right i, .icon-right.btn-small i, .icon-right.btn-large i { + position: absolute; + font-size: var(--btn-font-size-icon); +} + +.btn.icon-left i, .icon-left.btn-small i, .icon-left.btn-large i { + left: var(--btn-padding-icon); +} + +.btn.icon-right i, .icon-right.btn-small i, .icon-right.btn-large i { + right: var(--btn-padding-icon); +} + +.btn.filled, .filled.btn-small, .filled.btn-large { + color: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-primary); +} + +.btn.tonal, .tonal.btn-small, .tonal.btn-large { + color: var(--md-sys-color-on-secondary-container); + background-color: var(--md-sys-color-secondary-container); +} + +.btn.elevated, .elevated.btn-small, .elevated.btn-large { + color: var(--md-sys-color-on-secondary-container); + background-color: var(--md-sys-color-secondary-container); +} + +.btn.outlined, .outlined.btn-small, .outlined.btn-large { + background-color: transparent; + color: var(--md-sys-color-primary); + border: 1px solid var(--md-sys-color-outline); +} + +.btn.text, .text.btn-small, .text.btn-large, .btn-flat { + color: var(--md-sys-color-primary); + background-color: transparent; +} + +.btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled, +.btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled, +.btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] { + color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%); + background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%); + pointer-events: none; + box-shadow: none; + cursor: default; +} + +.btn.elevated:hover, .elevated.btn-small:hover, .elevated.btn-large:hover { + color: var(--md-sys-color-primary); + background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%); +} + +.btn.filled:hover, .filled.btn-small:hover, .filled.btn-large:hover { + color: var(--md-sys-color-on-primary); + background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%); +} + +.btn.tonal:hover, .tonal.btn-small:hover, .tonal.btn-large:hover { + color: var(--md-sys-color-on-secondary-container); + background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%); +} + +.btn.outlined:hover, .outlined.btn-small:hover, .outlined.btn-large:hover { + color: var(--md-sys-color-primary); + background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%); +} + +.btn.text:hover, .text.btn-small:hover, .text.btn-large:hover { + color: var(--md-sys-color-primary); + background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent); +} + +.btn:focus.elevated, .btn-small:focus.elevated, .btn-large:focus.elevated { + color: var(--md-sys-color-primary); + background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%); +} + +.btn:focus.filled, .btn-small:focus.filled, .btn-large:focus.filled { + color: var(--md-sys-color-on-primary); + background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%); +} + +.btn:focus.tonal, .btn-small:focus.tonal, .btn-large:focus.tonal { + color: var(--md-sys-color-on-secondary-container); + background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%); +} + +.btn:focus.outlined, .btn-small:focus.outlined, .btn-large:focus.outlined { + color: var(--md-sys-color-primary); + background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%); + border: 1px solid var(--md-sys-color-primary); +} + +.btn:focus.text, .btn-small:focus.text, .btn-large:focus.text { + color: var(--md-sys-color-primary); + background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%); +} + +.btn:focus-visible.filled, .btn-small:focus-visible.filled, .btn-large:focus-visible.filled, .btn:focus-visible.elevated, .btn-small:focus-visible.elevated, .btn-large:focus-visible.elevated, .btn:focus-visible.tonal, .btn-small:focus-visible.tonal, .btn-large:focus-visible.tonal, .btn:focus-visible.outlined, .btn-small:focus-visible.outlined, .btn-large:focus-visible.outlined, .btn:focus-visible.text, .btn-small:focus-visible.text, .btn-large:focus-visible.text { + outline: 3px solid var(--md-sys-color-secondary); + outline-offset: 2px; +} + +.btn-floating { + width: 40px; + height: 40px; + color: var(--md-sys-color-on-primary-container); + background-color: var(--md-sys-color-primary-container); + border-radius: 16px; + padding: 0; + display: grid; + grid-auto-flow: column; + align-items: center; + position: relative; + overflow: hidden; + z-index: 1; + transition: background-color 0.3s; + cursor: pointer; + vertical-align: middle; +} +.btn-floating:hover { + background-color: color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 16%); +} +.btn-floating:focus { + background-color: var(--md-ref-palette-secondary80); +} +.btn-floating:before { + border-radius: 0; +} +.btn-floating.btn-large { + width: 56px; + height: 56px; + padding: 0; +} +.btn-floating.btn-large.halfway-fab { + bottom: -28px; +} +.btn-floating.btn-small { + --btn-small-height: calc(0.75 * var(--btn-height)); + width: var(--btn-small-height) e; + height: var(--btn-small-height); +} +.btn-floating.btn-small.halfway-fab { + bottom: calc(var(--btn-small-height) * -0.5); +} +.btn-floating.halfway-fab { + position: absolute; + right: 24px; + bottom: -20px; +} +.btn-floating.halfway-fab.left { + right: auto; + left: 24px; +} +.btn-floating i { + color: var(--md-sys-color-on-secondary); + font-size: 1.6rem; + width: inherit; + display: inline-block; + text-align: center; +} + +button.btn-floating { + border: none; +} + +.fixed-action-btn { + position: fixed; + right: 23px; + bottom: 23px; + padding-top: 15px; + margin-bottom: 0; + z-index: 997; +} +.fixed-action-btn.active ul { + visibility: visible; + padding-left: 0; + list-style-type: none; +} +.fixed-action-btn.direction-left, .fixed-action-btn.direction-right { + padding: 0 0 0 15px; +} +.fixed-action-btn.direction-left ul, .fixed-action-btn.direction-right ul { + text-align: right; + right: 64px; + top: 50%; + transform: translateY(-50%); + height: 100%; + left: auto; + /*width 100% only goes to width of button container */ + width: 500px; +} +.fixed-action-btn.direction-left ul li, .fixed-action-btn.direction-right ul li { + display: inline-block; + margin: 7.5px 15px 0 0; +} +.fixed-action-btn.direction-right { + padding: 0 15px 0 0; +} +.fixed-action-btn.direction-right ul { + text-align: left; + direction: rtl; + left: 64px; + right: auto; +} +.fixed-action-btn.direction-right ul li { + margin: 7.5px 0 0 15px; +} +.fixed-action-btn.direction-bottom { + padding: 0 0 15px 0; +} +.fixed-action-btn.direction-bottom ul { + top: 64px; + bottom: auto; + display: flex; + flex-direction: column-reverse; +} +.fixed-action-btn.direction-bottom ul li { + margin: 15px 0 0 0; +} +.fixed-action-btn.toolbar { + padding: 0; + height: 56px; +} +.fixed-action-btn.toolbar.active > a i { + opacity: 0; +} +.fixed-action-btn.toolbar ul { + display: flex; + top: 0; + bottom: 0; + z-index: 1; +} +.fixed-action-btn.toolbar ul li { + flex: 1; + display: inline-block; + margin: 0; + height: 100%; + transition: none; +} +.fixed-action-btn.toolbar ul li a { + display: block; + overflow: hidden; + position: relative; + width: 100%; + height: 100%; + background-color: transparent; + box-shadow: none; + color: var(--md-sys-color-on-secondary); + line-height: 56px; + z-index: 1; +} +.fixed-action-btn.toolbar ul li a i { + line-height: inherit; +} +.fixed-action-btn ul { + left: 0; + right: 0; + text-align: center; + position: absolute; + bottom: 64px; + margin: 0; + visibility: hidden; +} +.fixed-action-btn ul li { + margin-bottom: 15px; +} +.fixed-action-btn ul a.btn-floating { + opacity: 0; +} +.fixed-action-btn .fab-backdrop { + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 40px; + height: 40px; + background-color: var(--md-sys-color-secondary); + border-radius: 16px; + transform: scale(0); +} + +.btn-large { + height: calc(1.5 * var(--btn-height)); + font-size: 18px; + padding: 0 28px; +} +.btn-large i { + font-size: 1.6rem; +} + +.btn-small { + height: calc(0.75 * var(--btn-height)); + font-size: 13px; +} +.btn-small i { + font-size: 1.2rem; +} + +.btn-block { + display: block; +} + +.btn.rounded, .rounded.btn-large, .rounded.btn-small { + border-radius: 99999px; +} + +[popover] { + outline: none; + padding: 0; + border: none; +} + +.dropdown-content { + padding-left: 0; + list-style-type: none; + background-color: var(--md-sys-color-surface); + margin: 0; + display: none; + min-width: 100px; + overflow-y: auto; + opacity: 0; + position: absolute; + left: 0; + top: 0; + z-index: 9999; + transform-origin: 0 0; + user-select: none; +} +.dropdown-content li { + clear: both; + color: var(--md-sys-color-on-background); + cursor: pointer; + min-height: 50px; + line-height: 1.5rem; + width: 100%; + text-align: left; +} +.dropdown-content li.divider { + min-height: 0; + height: 1px; +} +.dropdown-content li > a, .dropdown-content li > span { + font-size: 16px; + color: var(--md-sys-color-primary); + display: block; + line-height: 22px; + padding: 14px 16px; +} +.dropdown-content li > span > label { + top: 1px; + left: 0; + height: 18px; +} +.dropdown-content li > a > i { + height: inherit; + line-height: inherit; + float: left; + margin: 0 24px 0 0; + width: 24px; +} +.dropdown-content li:not(.disabled):hover, .dropdown-content li.active { + background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%); +} + +body.keyboard-focused .dropdown-content li:focus { + background-color: rgba(0, 0, 0, 0.12); +} + +.input-field.col .dropdown-content [type=checkbox] + label { + top: 1px; + left: 0; + height: 18px; + transform: none; +} + +.dropdown-trigger { + cursor: pointer; +} + +.modal { + --modal-footer-height: 56px; + --modal-footer-divider-height: 1px; + --modal-border-radius: 28px; + --modal-padding: 24px; + display: none; + position: fixed; + left: 0; + right: 0; + background-color: var(--md-sys-color-surface); + padding: 0; + max-height: 70%; + width: 55%; + margin: auto; + overflow-y: auto; + border-radius: var(--modal-border-radius); + will-change: top, opacity; +} +.modal:focus { + outline: none; +} +@media only screen and (max-width : 992.99px) { + .modal { + width: 80%; + } +} +.modal h1, .modal h2, .modal h3, .modal h4 { + margin-top: 0; +} +.modal .modal-content { + padding: var(--modal-padding); + overflow-y: hidden; +} +.modal .modal-close { + cursor: pointer; +} +.modal .modal-footer { + border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius); + background-color: var(--md-sys-color-surface); + padding: 4px 6px; + height: var(--modal-footer-height); + width: 100%; + text-align: right; +} +.modal .modal-footer .btn, .modal .modal-footer .btn-large, .modal .modal-footer .btn-small, .modal .modal-footer .btn-flat { + margin: 6px 0; +} + +.modal-overlay { + position: fixed; + z-index: 999; + top: -25%; + left: 0; + bottom: 0; + right: 0; + height: 125%; + width: 100%; + background: #000; + display: none; + will-change: opacity; +} + +.modal.modal-fixed-footer { + padding: 0; + height: 70%; +} +.modal.modal-fixed-footer .modal-content { + position: absolute; + height: calc(100% - var(--modal-footer-height)); + max-height: 100%; + width: 100%; + overflow-y: auto; +} +.modal.modal-fixed-footer .modal-footer { + border-top: var(--modal-footer-divider-height) solid var(--md-sys-color-outline-variant); + position: absolute; + bottom: var(--modal-footer-divider-height); +} + +.modal.bottom-sheet { + top: auto; + bottom: -100%; + margin: 0; + width: 100%; + max-height: 45%; + border-radius: 0; + will-change: bottom, opacity; +} + +.collapsible { + padding-left: 0; + list-style-type: none; + border-top: 1px solid var(--md-sys-color-outline-variant); + border-right: 1px solid var(--md-sys-color-outline-variant); + border-left: 1px solid var(--md-sys-color-outline-variant); + margin: 0.5rem 0 1rem 0; +} + +.collapsible-header { + display: flex; + cursor: pointer; + -webkit-tap-highlight-color: transparent; + line-height: 1.5; + padding: 1rem; + border-bottom: 1px solid var(--md-sys-color-outline-variant); +} +.collapsible-header:focus { + outline: 0; +} +.collapsible-header i { + width: 2rem; + font-size: 1.6rem; + display: inline-block; + text-align: center; + margin-right: 1rem; +} + +.collapsible-header::after { + content: "▾"; + text-align: right; + margin-right: 0.25rem; + width: 100%; +} + +.active .collapsible-header::after { + content: "▴"; +} + +.keyboard-focused .collapsible-header:focus { + background-color: rgba(0, 0, 0, 0.12); +} + +.collapsible-body { + max-height: 0; + border-bottom: 1px solid var(--md-sys-color-outline-variant); + box-sizing: border-box; + padding: 0 2rem; + overflow: hidden; +} + +.collapsible.popout { + border: none; + box-shadow: none; +} +.collapsible.popout > li { + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); + margin: 0 24px; + transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} +.collapsible.popout > li.active { + box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); + margin: 16px 0; +} + +.chip { + --font-size: 14px; + --font-size-icon: 18px; + --padding: 8px; + color: var(--md-sys-color-on-surface-variant); + background-color: rgba(0, 0, 0, 0.09); + display: inline-flex; + white-space: nowrap; + gap: 8px; + margin: 0; + height: 32px; + padding-left: var(--padding); + padding-right: var(--padding); + font-size: var(--font-size); + font-weight: 500; + border-radius: 8px; + align-items: center; + user-select: none; + vertical-align: top; +} +.chip:focus { + outline: none; + background-color: var(--md-sys-color-primary); + color: var(--md-sys-color-on-primary); +} + +.chip.outlined { + background-color: transparent; + border-color: var(--md-sys-color-outline); + border-width: 1px; + border-style: solid; +} + +.chip > img { + margin: 0; + width: 24px; + height: 24px; + object-fit: cover; + border-radius: 12px; +} + +.chip > .material-icons { + font-size: var(--font-size-icon); +} + +.chip .close { + border-radius: 50%; + height: 24px; + width: 24px; + padding: 0; + display: grid; + justify-content: center; + align-content: center; + cursor: pointer; +} + +.chip .close:hover { + background-color: rgba(136, 136, 136, 0.5333333333); +} + +.chips { + display: flex; + gap: 4px; + flex-wrap: wrap; + border: none; + border-bottom: 1px solid var(--md-sys-color-on-surface-variant); + box-shadow: none; + margin: 0 0 8px 0; + padding: 4px; + outline: none; + transition: all 0.3s; +} +.chips.focus { + border-bottom: 1px solid var(--md-sys-color-primary); + box-shadow: 0 1px 0 0 var(--md-sys-color-primary); +} +.chips:hover { + cursor: text; +} +.chips input:not([type]):not(.browser-default).input { + background: none; + border: 0; + color: var(--md-sys-color-on-background); + display: inline-block; + font-size: 16px; + height: 32px; + outline: 0; + margin: 0; + padding: 0; + width: 120px; +} +.chips input:not([type]):not(.browser-default).input:focus { + border: 0; + box-shadow: none; +} +.chips .autocomplete-content { + margin-top: 0; + margin-bottom: 0; +} + +.prefix ~ .chips { + margin-left: 3rem; + width: 92%; + width: calc(100% - 3rem); +} + +.suffix ~ .chips { + margin-right: 3rem; + width: 92%; + width: calc(100% - 3rem); +} + +.chips:empty ~ label { + font-size: 0.8rem; + transform: translateY(-140%); +} + +.materialboxed { + display: block; + cursor: zoom-in; + position: relative; + transition: opacity 0.4s; + -webkit-backface-visibility: hidden; +} +.materialboxed:hover:not(.active) { + opacity: 0.8; +} +.materialboxed.active { + cursor: zoom-out; +} + +#materialbox-overlay { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: var(--md-sys-color-background); + z-index: 1000; + will-change: opacity; +} + +.materialbox-caption { + position: fixed; + display: none; + color: var(--md-sys-color-on-background); + line-height: 50px; + bottom: 0; + left: 0; + width: 100%; + text-align: center; + padding: 0% 15%; + height: 50px; + z-index: 1000; + -webkit-font-smoothing: antialiased; +} + +select:focus { + outline: 1px solid var(--md-ref-palette-primary80); +} + +/* +button:focus { + outline: none; + background-color: $button-background-focus; +} +*/ +label { + font-size: 0.8rem; + color: var(--md-sys-color-on-surface-variant); +} + +/* Style Placeholders */ +::placeholder { + color: var(--md-sys-color-on-surface-variant); +} + +/* Text inputs */ +input:not([type]):not(.browser-default), +input[type=text]:not(.browser-default), +input[type=password]:not(.browser-default), +input[type=email]:not(.browser-default), +input[type=url]:not(.browser-default), +input[type=time]:not(.browser-default), +input[type=date]:not(.browser-default), +input[type=datetime]:not(.browser-default), +input[type=datetime-local]:not(.browser-default), +input[type=month]:not(.browser-default), +input[type=tel]:not(.browser-default), +input[type=number]:not(.browser-default), +input[type=search]:not(.browser-default), +textarea.materialize-textarea { + outline: none; + color: var(--md-sys-color-on-background); + width: 100%; + font-size: 16px; + height: 56px; +} + +/* Validation Sass Placeholders */ +/* +%custom-success-message { + content: attr(data-success); + color: $success-color; +} +%custom-error-message { + content: attr(data-error); + color: var(--md-sys-color-error); +} +*/ +.input-field { + --input-color: var(--md-sys-color-primary); + position: relative; + clear: both; +} +.input-field input, .input-field textarea { + box-sizing: border-box; /* https://stackoverflow.com/questions/1377719/padding-within-inputs-breaks-width-100*/ + padding: 0 16px; + padding-top: 20px; + background-color: var(--md-sys-color-surface); + border: none; + border-radius: 4px; + border-bottom: 1px solid var(--md-sys-color-on-surface-variant); + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.input-field input:focus:not([readonly]), .input-field textarea:focus:not([readonly]) { + border-bottom: 2px solid var(--input-color); + padding-top: 21px; +} +.input-field input:disabled, .input-field input[readonly=readonly], .input-field textarea:disabled, .input-field textarea[readonly=readonly] { + color: rgba(var(--md_sys_color_on-surface), 0.38); + border-color: rgba(var(--md_sys_color_on-surface), 0.12); + background-color: rgba(var(--md_sys_color_on-surface), 0.04); +} +.input-field input:focus:not([readonly]) + label, .input-field textarea:focus:not([readonly]) + label { + color: var(--input-color); +} +.input-field input:focus:not([readonly]) + label, .input-field input:not([placeholder=" "]) + label, .input-field input:not(:placeholder-shown) + label, .input-field textarea:focus:not([readonly]) + label, .input-field textarea:not([placeholder=" "]) + label, .input-field textarea:not(:placeholder-shown) + label { + transform: scale(0.75); + top: 8px; +} +.input-field input:disabled + label, .input-field input[readonly=readonly] + label, .input-field textarea:disabled + label, .input-field textarea[readonly=readonly] + label { + color: rgba(var(--md_sys_color_on-surface), 0.38); +} +.input-field input::placeholder { + user-select: none; +} +.input-field > label { + color: var(--md-sys-color-on-surface-variant); + user-select: none; + font-size: 16px; + position: absolute; + left: 16px; + top: 16px; + cursor: text; + transform-origin: top left; + transition: left 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out; +} +.input-field .supporting-text { + color: var(--md-sys-color-on-surface-variant); + font-size: 12px; + padding: 0 16px; + margin-top: 4px; +} +.input-field .character-counter { + color: var(--md-sys-color-on-surface-variant); + font-size: 12px; + float: right; + padding: 0 16px; + margin-top: 4px; +} +.input-field .prefix { + position: absolute; + left: 12px; + top: 16px; + user-select: none; + display: flex; + align-self: center; +} +.input-field .suffix { + position: absolute; + right: 12px; + top: 16px; + user-select: none; +} +.input-field .prefix ~ input, .input-field .prefix ~ textarea { + padding-left: 52px; +} +.input-field .suffix ~ input, .input-field .suffix ~ textarea { + padding-right: 52px; +} +.input-field .prefix ~ label { + left: 52px; +} +.input-field.outlined input, .input-field.outlined textarea { + padding-top: 0; + background-color: var(--md-sys-color-background); + border: 1px solid var(--md-sys-color-on-surface-variant); + border-radius: 4px; +} +.input-field.outlined input:focus:not([readonly]), .input-field.outlined textarea:focus:not([readonly]) { + border: 2px solid var(--input-color); + padding-top: 0; + margin-left: -1px; +} +.input-field.outlined input:focus:not([readonly]) + label, .input-field.outlined textarea:focus:not([readonly]) + label { + color: var(--input-color); +} +.input-field.outlined input:focus:not([readonly]) + label, .input-field.outlined input:not([placeholder=" "]) + label, .input-field.outlined input:not(:placeholder-shown) + label, .input-field.outlined textarea:focus:not([readonly]) + label, .input-field.outlined textarea:not([placeholder=" "]) + label, .input-field.outlined textarea:not(:placeholder-shown) + label { + top: -8px; + left: 16px; + margin-left: -4px; + padding: 0 4px; + background-color: var(--md-sys-color-background); +} +.input-field.outlined input:disabled, .input-field.outlined input[readonly=readonly], .input-field.outlined textarea:disabled, .input-field.outlined textarea[readonly=readonly] { + color: rgba(var(--md_sys_color_on-surface), 0.38); + border-color: rgba(var(--md_sys_color_on-surface), 0.12); +} +.input-field.error input, .input-field.error textarea { + border-color: var(--md-sys-color-error); +} +.input-field.error input:focus:not([readonly]), .input-field.error textarea:focus:not([readonly]) { + border-color: var(--md-sys-color-error); +} +.input-field.error input:focus:not([readonly]) + label, .input-field.error textarea:focus:not([readonly]) + label { + color: var(--md-sys-color-error); +} +.input-field.error label { + color: var(--md-sys-color-error); +} +.input-field.error .supporting-text { + color: var(--md-sys-color-error); +} +.input-field.error .suffix { + color: var(--md-sys-color-error); +} + +/* Search Field */ +.searchbar .prefix { + position: absolute; + padding-left: 1rem; + top: 0; + user-select: none; + display: flex; + align-self: center; +} +.searchbar > input { + border-width: 0; + background-color: transparent; + padding-left: 3rem; +} + +.searchbar.has-sidebar { + margin-left: 0; +} +@media only screen and (min-width : 993px) { + .searchbar.has-sidebar { + margin-left: 300px; + } +} + +/* +.input-field input[type=search] { + display: block; + line-height: inherit; + + .nav-wrapper & { + height: inherit; + padding-left: 4rem; + width: calc(100% - 4rem); + border: 0; + box-shadow: none; + } + &:focus:not(.browser-default) { + border: 0; + box-shadow: none; + } + & + .label-icon { + transform: none; + left: 1rem; + } +} +*/ +/* Textarea */ +textarea { + width: 100%; + height: 3rem; + background-color: transparent; +} +textarea.materialize-textarea { + padding-top: 26px !important; + padding-bottom: 4px !important; + line-height: normal; + overflow-y: hidden; /* prevents scroll bar flash */ + resize: none; + min-height: 3rem; + box-sizing: border-box; +} + +.hiddendiv { + visibility: hidden; + white-space: pre-wrap; + word-wrap: break-word; + overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */ + padding-top: 1.2rem; /* prevents text jump on Enter keypress */ + position: absolute; + top: 0; + z-index: -1; +} + +/* Autocomplete Items */ +.autocomplete-content li .highlight { + color: var(--md-sys-color-on-background); +} +.autocomplete-content li img { + height: 40px; + width: 40px; + margin: 5px 15px; +} + +[type=radio]:not(:checked), +[type=radio]:checked { + position: absolute; + opacity: 0; + pointer-events: none; +} + +[type=radio]:not(:checked) + span, +[type=radio]:checked + span { + position: relative; + padding-left: 35px; + cursor: pointer; + display: inline-block; + height: 25px; + line-height: 25px; + font-size: 1rem; + transition: 0.28s ease; + user-select: none; +} + +[type=radio] + span:before, +[type=radio] + span:after { + content: ""; + position: absolute; + left: 0; + top: 0; + margin: 4px; + width: 16px; + height: 16px; + z-index: 0; + transition: 0.28s ease; +} + +/* Unchecked styles */ +[type=radio]:not(:checked) + span:before, +[type=radio]:not(:checked) + span:after, +[type=radio]:checked + span:before, +[type=radio]:checked + span:after, +[type=radio].with-gap:checked + span:before, +[type=radio].with-gap:checked + span:after { + border-radius: 50%; +} + +[type=radio]:not(:checked) + span:before, +[type=radio]:not(:checked) + span:after { + border: 2px solid var(--md-sys-color-on-surface-variant); +} + +[type=radio]:not(:checked) + span:after { + transform: scale(0); +} + +/* Checked styles */ +[type=radio]:checked + span:before { + border: 2px solid transparent; +} + +[type=radio]:checked + span:after, +[type=radio].with-gap:checked + span:before, +[type=radio].with-gap:checked + span:after { + border: 2px solid var(--md-sys-color-primary); +} + +[type=radio]:checked + span:after, +[type=radio].with-gap:checked + span:after { + background-color: var(--md-sys-color-primary); +} + +[type=radio]:checked + span:after { + transform: scale(1.02); +} + +/* Radio With gap */ +[type=radio].with-gap:checked + span:after { + transform: scale(0.5); +} + +/* Focused styles */ +[type=radio].tabbed:focus + span:before { + box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18); +} + +/* Disabled Radio With gap */ +[type=radio].with-gap:disabled:checked + span:before { + border: 2px solid var(--md-sys-color-on-surface); +} + +[type=radio].with-gap:disabled:checked + span:after { + border: none; + background-color: var(--md-sys-color-on-surface); +} + +/* Disabled style */ +[type=radio]:disabled:not(:checked) + span:before, +[type=radio]:disabled:checked + span:before { + background-color: transparent; + border-color: var(--md-sys-color-on-surface); +} + +[type=radio]:disabled + span { + color: var(--md-sys-color-on-surface); +} + +[type=radio]:disabled:not(:checked) + span:before { + border-color: var(--md-sys-color-on-surface); +} + +[type=radio]:disabled:checked + span:after { + background-color: var(--md-sys-color-on-surface); + border-color: var(--md-sys-color-on-surface); +} + +/* Checkboxes + ========================================================================== */ +/* Remove default checkbox */ +[type=checkbox]:not(:checked), +[type=checkbox]:checked { + position: absolute; + opacity: 0; + pointer-events: none; +} + +[type=checkbox] { + /* checkbox aspect */ +} +[type=checkbox] + span:not(.lever) { + position: relative; + padding-left: 35px; + cursor: pointer; + display: inline-block; + height: 25px; + line-height: 25px; + font-size: 1rem; + user-select: none; +} +[type=checkbox] + span:not(.lever):before, [type=checkbox]:not(.filled-in) + span:not(.lever):after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 18px; + height: 18px; + z-index: 0; + border: 2px solid var(--md-sys-color-on-surface-variant); + border-radius: 1px; + margin-top: 3px; + transition: 0.2s; +} +[type=checkbox]:not(.filled-in) + span:not(.lever):after { + border: 0; + transform: scale(0); +} +[type=checkbox]:not(:checked):disabled + span:not(.lever):before { + border: none; + background-color: var(--md-sys-color-on-surface); +} +[type=checkbox].tabbed:focus + span:not(.lever):after { + transform: scale(1); + border: 0; + border-radius: 50%; + box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.12); + background-color: rgba(0, 0, 0, 0.12); +} + +[type=checkbox]:checked + span:not(.lever):before { + top: -4px; + left: -5px; + width: 12px; + height: 22px; + border-top: 2px solid transparent; + border-left: 2px solid transparent; + border-right: 2px solid var(--md-sys-color-primary); + border-bottom: 2px solid var(--md-sys-color-primary); + transform: rotate(40deg); + backface-visibility: hidden; + transform-origin: 100% 100%; +} +[type=checkbox]:checked:disabled + span:before { + border-right: 2px solid var(--md-sys-color-on-surface); + border-bottom: 2px solid var(--md-sys-color-on-surface); +} + +/* Indeterminate checkbox */ +[type=checkbox]:indeterminate + span:not(.lever):before { + top: -11px; + left: -12px; + width: 10px; + height: 22px; + border-top: none; + border-left: none; + border-right: 2px solid var(--md-sys-color-primary); + border-bottom: none; + transform: rotate(90deg); + backface-visibility: hidden; + transform-origin: 100% 100%; +} +[type=checkbox]:indeterminate:disabled + span:not(.lever):before { + border-right: 2px solid var(--md-sys-color-on-surface); + background-color: transparent; +} + +[type=checkbox].filled-in + span:not(.lever):after { + border-radius: 2px; +} +[type=checkbox].filled-in + span:not(.lever):before, +[type=checkbox].filled-in + span:not(.lever):after { + content: ""; + left: 0; + position: absolute; + /* .1s delay is for check animation */ + transition: border 0.25s, background-color 0.25s, width 0.2s 0.1s, height 0.2s 0.1s, top 0.2s 0.1s, left 0.2s 0.1s; + z-index: 1; +} +[type=checkbox].filled-in:not(:checked) + span:not(.lever):before { + width: 0; + height: 0; + border: 3px solid transparent; + left: 6px; + top: 10px; + transform: rotateZ(37deg); + transform-origin: 100% 100%; +} +[type=checkbox].filled-in:not(:checked) + span:not(.lever):after { + height: 20px; + width: 20px; + background-color: transparent; + border: 2px solid var(--md-sys-color-on-surface-variant); + top: 0px; + z-index: 0; +} +[type=checkbox].filled-in:checked + span:not(.lever):before { + top: 0; + left: 1px; + width: 8px; + height: 13px; + border-top: 2px solid transparent; + border-left: 2px solid transparent; + border-right: 2px solid var(--md-sys-color-on-primary); + border-bottom: 2px solid var(--md-sys-color-on-primary); + transform: rotateZ(37deg); + transform-origin: 100% 100%; +} +[type=checkbox].filled-in:checked + span:not(.lever):after { + top: 0; + width: 20px; + height: 20px; + border: 2px solid var(--md-sys-color-primary); + background-color: var(--md-sys-color-primary); + z-index: 0; +} +[type=checkbox].filled-in.tabbed:focus + span:not(.lever):after { + border-radius: 2px; + border-color: var(--md-sys-color-on-surface-variant) r; + background-color: rgba(0, 0, 0, 0.12); +} +[type=checkbox].filled-in.tabbed:checked:focus + span:not(.lever):after { + border-radius: 2px; + background-color: var(--md-sys-color-primary); + border-color: var(--md-sys-color-primary); +} +[type=checkbox].filled-in:disabled:not(:checked) + span:not(.lever):before { + background-color: transparent; + border: 2px solid transparent; +} +[type=checkbox].filled-in:disabled:not(:checked) + span:not(.lever):after { + border-color: transparent; + background-color: var(--md-sys-color-on-surface); +} +[type=checkbox].filled-in:disabled:checked + span:not(.lever):before { + background-color: transparent; +} +[type=checkbox].filled-in:disabled:checked + span:not(.lever):after { + background-color: var(--md-sys-color-on-surface); + border-color: var(--md-sys-color-on-surface); +} + +.switch { + --track-height: 32px; + --track-width: 52px; + --border-width: 2px; + --size-off: 16px; + --size-on: 24px; + --icon-size: 16px; + --gap-on: calc(((var(--track-height) - var(--size-on)) / 2) - var(--border-width)); + --gap-off: calc(((var(--track-height) - var(--size-off)) / 2) - var(--border-width)); +} + +.switch, +.switch * { + -webkit-tap-highlight-color: transparent; + user-select: none; +} + +.switch label { + cursor: pointer; +} + +.switch label input[type=checkbox] { + opacity: 0; + width: 0; + height: 0; +} +.switch label input[type=checkbox]:checked + .lever { + background-color: var(--md-sys-color-primary); + border-color: var(--md-sys-color-primary); +} +.switch label input[type=checkbox]:checked + .lever:before, .switch label input[type=checkbox]:checked + .lever:after { + top: var(--gap-on); + left: calc(var(--track-width) - var(--size-on) - var(--gap-on) - 2 * var(--border-width)); + width: var(--size-on); + height: var(--size-on); +} +.switch label .lever { + content: ""; + display: inline-block; + position: relative; + width: var(--track-width); + height: var(--track-height); + border-style: solid; + border-width: 2px; + border-color: var(--md-sys-color-outline); + background-color: var(--md-sys-color-surface-variant); + border-radius: 15px; + margin-right: 10px; + transition: background 0.3s ease; + vertical-align: middle; + margin: 0 16px; +} +.switch label .lever:before, .switch label .lever:after { + content: ""; + position: absolute; + display: inline-block; + width: var(--size-off); + height: var(--size-off); + border-radius: 50%; + left: var(--gap-off); + top: var(--gap-off); + transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease, transform 0.1s ease; +} +.switch label .lever:after { + height: var(--size-off); + width: var(--size-off); +} + +input[type=checkbox]:not(:disabled) ~ .lever:active:before, +input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before, +input[type=checkbox]:not(:disabled) ~ .lever:hover::before { + transform: scale(2.4); +} + +input[type=checkbox]:checked:not(:disabled) ~ .lever:hover::before { + background-color: rgba(var(--md-sys-color-primary-numeric), 0.06); +} + +input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before, +input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before { + background-color: rgba(var(--md-sys-color-primary-numeric), 0.18); +} + +input[type=checkbox]:not(:disabled) ~ .lever:hover::before { + background-color: rgba(0, 0, 0, 0.04); +} + +input[type=checkbox]:not(:disabled) ~ .lever:active:before, +input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before { + background-color: rgba(0, 0, 0, 0.12); +} + +.switch input[type=checkbox][disabled] + .lever { + cursor: default; + opacity: 0.5; +} + +select.browser-default { + opacity: 1; + color: var(--md-sys-color-on-background); +} + +select { + opacity: 0; + background-color: var(--md-sys-color-surface); + width: 100%; + padding: 5px; + border: 1px solid var(--md-sys-color-outline-variant); + border-radius: 2px; + height: 3rem; +} + +.select-wrapper { + /* + &.valid .helper-text[data-success], + &.invalid ~ .helper-text[data-error] { + @extend %hidden-text; + } + + &.valid { + & > input.select-dropdown { + @extend %valid-input-style; + } + & ~ .helper-text:after { + //@extend %custom-success-message; + } + } + + &.invalid { + & > input.select-dropdown, + & > input.select-dropdown:focus { + @extend %invalid-input-style; + } + & ~ .helper-text:after { + //@extend %custom-error-message; + } + } + + &.valid + label, + &.invalid + label { + width: 100%; + pointer-events: none; + } + & + label:after { + //@extend %input-after-style; + } + */ + position: relative; + /* + input.select-dropdown { + &:focus { + border-bottom: 1px solid var(--md-sys-color-primary); + } + position: relative; + cursor: pointer; + background-color: transparent; + border: none; + border-bottom: 2px solid var(--md-sys-color-on-surface-variant); + outline: none; + height: 3rem; + line-height: 3rem; + width: 100%; + font-size: 16px; + margin: 0 0 8px 0; + padding: 0; + display: block; + user-select:none; + z-index: 1; + color: var(--md-sys-color-on-background); + } + */ +} +.select-wrapper .caret { + position: absolute; + right: 0; + top: 0; + bottom: 0; + margin: auto 0; + z-index: 0; + fill: var(--md-sys-color-on-background); +} +.select-wrapper .hide-select { + width: 0; + height: 0; + overflow: hidden; + position: absolute; + top: 0; + z-index: -1; +} + +select:disabled { + color: var(--md-sys-color-on-surface); +} + +.select-wrapper.disabled + label { + color: var(--md-sys-color-on-surface); +} +.select-wrapper.disabled .caret { + fill: var(--md-sys-color-on-surface); +} + +.select-wrapper input.select-dropdown:disabled { + color: var(--md-sys-color-on-surface); + cursor: default; + user-select: none; +} + +.select-wrapper i { + color: var(--md-sys-color-on-surface); +} + +.select-dropdown li.disabled, +.select-dropdown li.disabled > span, +.select-dropdown li.optgroup { + color: var(--md-sys-color-on-surface); +} + +/* +body.keyboard-focused { + .select-dropdown.dropdown-content li:focus { + //background-color: $select-option-focus; + } +} + +.select-dropdown.dropdown-content { + li { + &:hover:not(.disabled) { + //background-color: $select-option-hover; + } + + &.selected:not(.disabled) { + //background-color: $select-option-selected; + } + } +} +*/ +/* +// Prefix Icons +.prefix ~ .select-wrapper { + margin-left: 3rem; + width: 92%; + width: calc(100% - 3rem); +} +.prefix ~ label { margin-left: 3rem; } +// Suffix Icons +.suffix ~ .select-wrapper { + margin-right: 3rem; + width: 92%; + width: calc(100% - 3rem); +} +.suffix ~ label { margin-right: 3rem; } +*/ +.select-dropdown li img { + height: 40px; + width: 40px; + margin: 5px 15px; + float: right; +} + +.select-dropdown li.optgroup { + border-top: 1px solid rgba(0, 0, 0, 0.04); +} +.select-dropdown li.optgroup.selected > span { + color: var(--md-sys-color-on-background); +} +.select-dropdown li.optgroup > span { + color: var(--md-sys-color-on-surface-variant); +} +.select-dropdown li.optgroup ~ li.optgroup-option { + padding-left: 1rem; +} + +/* +.select-dropdown .selected { + color: red; +} +*/ +.file-field { + display: grid; + grid-template-columns: min-content auto; + gap: 10px; +} +.file-field .file-path-wrapper { + overflow: hidden; +} +.file-field input.file-path { + width: 100%; +} +.file-field .btn, .file-field .btn-large, .file-field .btn-small { + height: 3rem; + line-height: 3rem; +} +.file-field span { + cursor: pointer; +} +.file-field input[type=file] { + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + cursor: pointer; + width: 100%; + margin: 0; + padding: 0; + opacity: 0; + font-size: 20px; + filter: alpha(opacity=0); +} +.file-field input[type=file]::-webkit-file-upload-button { + display: none; +} + +.range-field { + position: relative; +} + +input[type=range], +input[type=range] + .thumb { + cursor: pointer; +} + +input[type=range] { + position: relative; + background-color: transparent; + border: none; + outline: none; + width: 100%; + margin: 15px 0; + padding: 0; +} +input[type=range]:focus { + outline: none; +} + +input[type=range] + .thumb { + position: absolute; + top: 10px; + left: 0; + border: none; + height: 0; + width: 0; + border-radius: 50%; + background-color: var(--md-sys-color-primary); + margin-left: 7px; + transform-origin: 50% 50%; + transform: rotate(-45deg); +} +input[type=range] + .thumb .value { + display: block; + width: 30px; + text-align: center; + color: var(--md-sys-color-primary); + font-size: 0; + transform: rotate(45deg); +} +input[type=range] + .thumb.active { + border-radius: 50% 50% 50% 0; +} +input[type=range] + .thumb.active .value { + color: var(--md-sys-color-on-primary); + margin-left: -1px; + margin-top: 8px; + font-size: 10px; +} + +input[type=range] { + -webkit-appearance: none; +} + +input[type=range]::-webkit-slider-runnable-track { + height: 3px; + border: none; +} + +input[type=range]::-webkit-slider-thumb { + border: none; + height: 14px; + width: 14px; + border-radius: 50%; + background: var(--md-sys-color-primary); + transition: box-shadow 0.3s; + -webkit-appearance: none; + background-color: var(--md-sys-color-primary); + transform-origin: 50% 50%; + margin: -5px 0 0 0; +} + +.keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb { + box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18); +} + +input[type=range] { + /*required for proper track sizing in FF*/ +} + +input[type=range]::-moz-range-track { + height: 3px; + border: none; +} + +input[type=range]::-moz-focus-inner { + border: 0; +} + +input[type=range]::-moz-range-thumb { + border: none; + height: 14px; + width: 14px; + border-radius: 50%; + background: var(--md-sys-color-primary); + transition: box-shadow 0.3s; + margin-top: -5px; +} + +input[type=range]:-moz-focusring { + outline: 1px solid #fff; + outline-offset: -1px; +} + +.keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb { + box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18); +} + +input[type=range]::-ms-track { + height: 3px; + background: transparent; + border-color: transparent; + border-width: 6px 0; + /*remove default tick marks*/ + color: transparent; +} + +input[type=range]::-ms-fill-lower, +input[type=range]::-moz-range-progress { + background: var(--md-sys-color-primary); +} + +input[type=range]::-ms-fill-upper, +input[type=range]::-moz-range-track { + background: var(--md-sys-color-shadow-light); +} + +input[type=range]::-ms-thumb { + border: none; + height: 14px; + width: 14px; + border-radius: 50%; + background: var(--md-sys-color-primary); + transition: box-shadow 0.3s; +} + +.keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb { + box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18); +} + +.table-of-contents { + list-style: none; +} +.table-of-contents.fixed { + position: fixed; +} +.table-of-contents li { + padding: 0; +} +.table-of-contents a { + display: inline-block; + font-weight: 400; + color: var(--md-sys-color-secondary); + padding-left: 16px; + height: 2rem; + line-height: 2rem; + border-left: 1px solid var(--md-sys-color-outline-variant); +} +.table-of-contents a:hover { + color: var(--md-sys-color-on-background); + padding-left: 15px; +} +.table-of-contents a.active { + color: var(--md-sys-color-primary); + font-weight: 500; + padding-left: 14px; + border-left: 2px solid var(--md-sys-color-primary); +} + +/* This should be an UL-Element*/ +.sidenav { + --sidenav-width: 300px; + --sidenav-font-size: 14px; + --sidenav-padding: 16px; + --sidenav-item-height: 48px; + --sidenav-line-height: var(--sidenav-item-height); + position: fixed; + width: var(--sidenav-width); + left: 0; + top: 0; + margin: 0; + transform: translateX(-100%); + height: 100vh; + padding: 0; + z-index: 999; + overflow-y: auto; + will-change: transform; + backface-visibility: hidden; + transform: translateX(-105%); + user-select: none; + color: var(--md-sys-color-on-secondary-container); + background-color: var(--md-sys-color-surface); + /* Hover only on top row */ + /*a:hover { + //color: red; + //background-color: var(--md-sys-color-on-secondary-container); + //md.sys.color.on-secondary-container + }*/ +} +.sidenav.right-aligned { + right: 0; + transform: translateX(105%); + left: auto; + transform: translateX(100%); +} +.sidenav .collapsible { + margin: 0; +} +.sidenav a:focus { + background-color: rgba(0, 0, 0, 0.12); +} +.sidenav li.active > a:not(.collapsible-header):not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating) { + background-color: color-mix(in srgb, var(--md-sys-color-secondary) 10%, transparent); +} +.sidenav .collapsible-body > ul { + padding-left: 10px; +} +.sidenav li { + list-style: none; + display: grid; + align-content: center; +} +.sidenav li > a { + /* https://stackoverflow.com/questions/5848090/full-width-hover-background-for-nested-lists */ + margin: 0 12px; + padding: 0 var(--sidenav-padding); + /* + min-width: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + */ + display: flex; + height: var(--sidenav-item-height); + font-size: var(--sidenav-font-size); + font-weight: 500; + align-items: center; + overflow: hidden; + border-radius: 100px; + /* TODO: Use special class in future like "mw-icon" */ +} +.sidenav li > a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating) { + color: var(--md-sys-color-on-secondary-container); +} +.sidenav li > a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating):hover { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); +} +.sidenav li > a.btn, .sidenav li > a.btn-small, .sidenav li > a.btn-large, .sidenav li > a.btn-flat, .sidenav li > a.btn-floating { + margin: 10px 15px; +} +.sidenav li > a > .material-icons, .sidenav li > a > .material-symbols-outlined, .sidenav li > a > .material-symbols-rounded, .sidenav li > a > .material-symbols-sharp { + display: inline-flex; + vertical-align: middle; + margin-right: 12px; +} +.sidenav .divider { + margin: calc(var(--sidenav-padding) * 0.5) 0 0 0; +} +.sidenav .subheader { + cursor: initial; + pointer-events: none; + color: red; + font-size: var(--sidenav-font-size); + font-weight: 500; + line-height: var(--sidenav-line-height); +} +.sidenav .user-view { + position: relative; + padding: calc(var(--sidenav-padding) * 2) calc(var(--sidenav-padding) * 2) 0; + margin-bottom: calc(var(--sidenav-padding) * 0.5); +} +.sidenav .user-view > a { + height: auto; + padding: 0; +} +.sidenav .user-view > a:hover { + background-color: transparent; +} +.sidenav .user-view .background { + overflow: hidden; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; +} +.sidenav .user-view .circle, .sidenav .user-view .name, .sidenav .user-view .email { + display: block; +} +.sidenav .user-view .circle { + height: 64px; + width: 64px; +} +.sidenav .user-view .name, +.sidenav .user-view .email { + font-size: var(--sidenav-font-size); + line-height: calc(var(--sidenav-line-height) * 0.5); +} +.sidenav .user-view .name { + margin-top: 16px; + font-weight: 500; +} +.sidenav .user-view .email { + padding-bottom: 16px; + font-weight: 400; +} + +.drag-target { + height: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 998; +} +.drag-target.right-aligned { + right: 0; +} + +.sidenav.sidenav-fixed { + left: 0; + transform: translateX(0); + position: fixed; +} +.sidenav.sidenav-fixed.right-aligned { + right: 0; + left: auto; +} + +@media only screen and (max-width : 992.99px) { + .sidenav.sidenav-fixed { + transform: translateX(-105%); + } + .sidenav.sidenav-fixed.right-aligned { + transform: translateX(105%); + } + .sidenav > a { + padding: 0 var(--sidenav-padding); + } + .sidenav .user-view { + padding: var(--sidenav-padding) var(--sidenav-padding) 0; + } +} +.sidenav .collapsible-body { + padding: 0; +} + +.sidenav-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + opacity: 0; + height: 120vh; + background-color: rgba(0, 0, 0, 0.5); + z-index: 997; + display: none; +} + +.sidenav .collapsible, +.sidenav.sidenav-fixed .collapsible { + border: none; + box-shadow: none; +} +.sidenav .collapsible-header, +.sidenav.sidenav-fixed .collapsible-header { + border: none; +} +.sidenav .collapsible-body, +.sidenav.sidenav-fixed .collapsible-body { + border: none; +} + +.progress { + position: relative; + height: 4px; + display: block; + width: 100%; + border-radius: 4px; + margin: 0.5rem 0 1rem 0; + overflow: hidden; + background-color: var(--md-sys-color-secondary-container); +} +.progress .determinate { + position: absolute; + top: 0; + left: 0; + bottom: 0; + background-color: var(--md-sys-color-primary); + transition: width 0.3s linear; +} +.progress .indeterminate { + background-color: var(--md-sys-color-primary); +} +.progress .indeterminate:before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; +} +.progress .indeterminate:after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation-delay: 1.15s; +} + +@keyframes indeterminate { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } +} +@keyframes indeterminate-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } +} +/* + @license + Copyright (c) 2014 The Polymer Project Authors. All rights reserved. + This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt + The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt + The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt + Code distributed by Google as part of the polymer project is also + subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt + */ +/**************************/ +/* STYLES FOR THE SPINNER */ +/**************************/ +/* + * Constants: + * STROKEWIDTH = 3px + * ARCSIZE = 270 degrees (amount of circle the arc takes up) + * ARCTIME = 1333ms (time it takes to expand and contract arc) + * ARCSTARTROT = 216 degrees (how much the start location of the arc + * should rotate each time, 216 gives us a + * 5 pointed star shape (it's 360/5 * 3). + * For a 7 pointed star, we might do + * 360/7 * 3 = 154.286) + * CONTAINERWIDTH = 28px + * SHRINK_TIME = 400ms + */ +.preloader-wrapper { + display: inline-block; + position: relative; + width: 50px; + height: 50px; +} +.preloader-wrapper.small { + width: 36px; + height: 36px; +} +.preloader-wrapper.big { + width: 64px; + height: 64px; +} +.preloader-wrapper.active { + /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */ + -webkit-animation: container-rotate 1568ms linear infinite; + animation: container-rotate 1568ms linear infinite; +} + +@-webkit-keyframes container-rotate { + to { + -webkit-transform: rotate(360deg); + } +} +@keyframes container-rotate { + to { + transform: rotate(360deg); + } +} +.spinner-layer { + position: absolute; + width: 100%; + height: 100%; + opacity: 0; + border-color: var(--md-sys-color-primary); +} + +.spinner-blue, +.spinner-blue-only { + border-color: #4285f4; +} + +.spinner-red, +.spinner-red-only { + border-color: #db4437; +} + +.spinner-yellow, +.spinner-yellow-only { + border-color: #f4b400; +} + +.spinner-green, +.spinner-green-only { + border-color: #0f9d58; +} + +/** + * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): + * + * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't + * guarantee that the animation will start _exactly_ after that value. So we avoid using + * animation-delay and instead set custom keyframes for each color (as redundant as it + * seems). + * + * We write out each animation in full (instead of separating animation-name, + * animation-duration, etc.) because under the polyfill, Safari does not recognize those + * specific properties properly, treats them as -webkit-animation, and overrides the + * other animation rules. See https://github.com/Polymer/platform/issues/53. + */ +.active .spinner-layer.spinner-blue { + /* durations: 4 * ARCTIME */ + -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; + animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; +} + +.active .spinner-layer.spinner-red { + /* durations: 4 * ARCTIME */ + -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; + animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; +} + +.active .spinner-layer.spinner-yellow { + /* durations: 4 * ARCTIME */ + -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; + animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; +} + +.active .spinner-layer.spinner-green { + /* durations: 4 * ARCTIME */ + -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; + animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; +} + +.active .spinner-layer, +.active .spinner-layer.spinner-blue-only, +.active .spinner-layer.spinner-red-only, +.active .spinner-layer.spinner-yellow-only, +.active .spinner-layer.spinner-green-only { + /* durations: 4 * ARCTIME */ + opacity: 1; + -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; + animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; +} + +@-webkit-keyframes fill-unfill-rotate { + 12.5% { + -webkit-transform: rotate(135deg); + } /* 0.5 * ARCSIZE */ + 25% { + -webkit-transform: rotate(270deg); + } /* 1 * ARCSIZE */ + 37.5% { + -webkit-transform: rotate(405deg); + } /* 1.5 * ARCSIZE */ + 50% { + -webkit-transform: rotate(540deg); + } /* 2 * ARCSIZE */ + 62.5% { + -webkit-transform: rotate(675deg); + } /* 2.5 * ARCSIZE */ + 75% { + -webkit-transform: rotate(810deg); + } /* 3 * ARCSIZE */ + 87.5% { + -webkit-transform: rotate(945deg); + } /* 3.5 * ARCSIZE */ + to { + -webkit-transform: rotate(1080deg); + } /* 4 * ARCSIZE */ +} +@keyframes fill-unfill-rotate { + 12.5% { + transform: rotate(135deg); + } /* 0.5 * ARCSIZE */ + 25% { + transform: rotate(270deg); + } /* 1 * ARCSIZE */ + 37.5% { + transform: rotate(405deg); + } /* 1.5 * ARCSIZE */ + 50% { + transform: rotate(540deg); + } /* 2 * ARCSIZE */ + 62.5% { + transform: rotate(675deg); + } /* 2.5 * ARCSIZE */ + 75% { + transform: rotate(810deg); + } /* 3 * ARCSIZE */ + 87.5% { + transform: rotate(945deg); + } /* 3.5 * ARCSIZE */ + to { + transform: rotate(1080deg); + } /* 4 * ARCSIZE */ +} +@-webkit-keyframes blue-fade-in-out { + from { + opacity: 1; + } + 25% { + opacity: 1; + } + 26% { + opacity: 0; + } + 89% { + opacity: 0; + } + 90% { + opacity: 1; + } + 100% { + opacity: 1; + } +} +@keyframes blue-fade-in-out { + from { + opacity: 1; + } + 25% { + opacity: 1; + } + 26% { + opacity: 0; + } + 89% { + opacity: 0; + } + 90% { + opacity: 1; + } + 100% { + opacity: 1; + } +} +@-webkit-keyframes red-fade-in-out { + from { + opacity: 0; + } + 15% { + opacity: 0; + } + 25% { + opacity: 1; + } + 50% { + opacity: 1; + } + 51% { + opacity: 0; + } +} +@keyframes red-fade-in-out { + from { + opacity: 0; + } + 15% { + opacity: 0; + } + 25% { + opacity: 1; + } + 50% { + opacity: 1; + } + 51% { + opacity: 0; + } +} +@-webkit-keyframes yellow-fade-in-out { + from { + opacity: 0; + } + 40% { + opacity: 0; + } + 50% { + opacity: 1; + } + 75% { + opacity: 1; + } + 76% { + opacity: 0; + } +} +@keyframes yellow-fade-in-out { + from { + opacity: 0; + } + 40% { + opacity: 0; + } + 50% { + opacity: 1; + } + 75% { + opacity: 1; + } + 76% { + opacity: 0; + } +} +@-webkit-keyframes green-fade-in-out { + from { + opacity: 0; + } + 65% { + opacity: 0; + } + 75% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes green-fade-in-out { + from { + opacity: 0; + } + 65% { + opacity: 0; + } + 75% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +/** + * Patch the gap that appear between the two adjacent div.circle-clipper while the + * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11). + */ +.gap-patch { + position: absolute; + top: 0; + left: 45%; + width: 10%; + height: 100%; + overflow: hidden; + border-color: inherit; +} + +.gap-patch .circle { + width: 1000%; + left: -450%; +} + +.circle-clipper { + display: inline-block; + position: relative; + width: 50%; + height: 100%; + overflow: hidden; + border-color: inherit; +} +.circle-clipper .circle { + width: 200%; + height: 100%; + border-width: 3px; /* STROKEWIDTH */ + border-style: solid; + border-color: inherit; + border-bottom-color: transparent !important; + border-radius: 50%; + -webkit-animation: none; + animation: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; +} +.circle-clipper.left .circle { + left: 0; + border-right-color: transparent !important; + -webkit-transform: rotate(129deg); + transform: rotate(129deg); +} +.circle-clipper.right .circle { + left: -100%; + border-left-color: transparent !important; + -webkit-transform: rotate(-129deg); + transform: rotate(-129deg); +} + +.active .circle-clipper.left .circle { + /* duration: ARCTIME */ + -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; + animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; +} + +.active .circle-clipper.right .circle { + /* duration: ARCTIME */ + -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; + animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; +} + +@-webkit-keyframes left-spin { + from { + -webkit-transform: rotate(130deg); + } + 50% { + -webkit-transform: rotate(-5deg); + } + to { + -webkit-transform: rotate(130deg); + } +} +@keyframes left-spin { + from { + transform: rotate(130deg); + } + 50% { + transform: rotate(-5deg); + } + to { + transform: rotate(130deg); + } +} +@-webkit-keyframes right-spin { + from { + -webkit-transform: rotate(-130deg); + } + 50% { + -webkit-transform: rotate(5deg); + } + to { + -webkit-transform: rotate(-130deg); + } +} +@keyframes right-spin { + from { + transform: rotate(-130deg); + } + 50% { + transform: rotate(5deg); + } + to { + transform: rotate(-130deg); + } +} +#spinnerContainer.cooldown { + /* duration: SHRINK_TIME */ + -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1); + animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1); +} + +@-webkit-keyframes fade-out { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +@keyframes fade-out { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +.slider { + position: relative; + height: 400px; + width: 100%; +} +.slider.fullscreen { + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} +.slider.fullscreen ul.slides { + padding-left: 0; + list-style-type: none; + height: 100%; +} +.slider.fullscreen ul.indicators { + padding-left: 0; + list-style-type: none; + z-index: 2; + bottom: 30px; +} +.slider.fullscreen ul.indicators .indicator-item { + background-color: rgba(255, 255, 255, 0.45); +} +.slider.fullscreen ul.indicators .indicator-item.active { + background-color: var(--md-ref-palette-primary100); +} +.slider .slides { + background-color: var(--md-sys-color-surface); + margin: 0; + height: 400px; + padding-left: 0; + list-style-type: none; +} +.slider .slides li { + padding-left: 0; + list-style-type: none; + opacity: 0; + position: absolute; + top: 0; + left: 0; + z-index: 1; + width: 100%; + height: inherit; + overflow: hidden; +} +.slider .slides li img { + height: 100%; + width: 100%; + background-size: cover; + background-position: center; +} +.slider .slides li .caption { + color: #fff; + position: absolute; + top: 15%; + left: 15%; + width: 70%; + opacity: 0; +} +.slider .slides li .caption p { + color: rgba(255, 255, 255, 0.75); +} +.slider .slides li.active { + z-index: 2; +} +.slider .indicators { + padding-left: 0; + list-style-type: none; + position: absolute; + text-align: center; + left: 0; + right: 0; + bottom: 0; + margin: 0; +} +.slider .indicators .indicator-item { + display: inline-block; + position: relative; + height: 16px; + width: 16px; + margin: 0 12px; +} +.slider .indicators .indicator-item-btn { + position: absolute; + top: 0; + left: 0; + cursor: pointer; + background-color: var(--md-sys-color-shadow-light); + transition: background-color 0.3s; + border-radius: 50%; + border-width: 0; + width: 100%; + height: 100%; +} +.slider .indicators .indicator-item-btn.active { + background-color: var(--md-sys-color-primary); +} + +.carousel { + --carousel-height: 400px; + overflow: hidden; + position: relative; + width: 100%; + height: var(--carousel-height); + perspective: 500px; + transform-style: preserve-3d; + transform-origin: 0% 50%; +} +.carousel.carousel-slider { + top: 0; + left: 0; +} +.carousel.carousel-slider .carousel-fixed-item { + position: absolute; + left: 0; + right: 0; + bottom: 20px; + z-index: 1; +} +.carousel.carousel-slider .carousel-fixed-item.with-indicators { + bottom: 68px; +} +.carousel.carousel-slider .carousel-item { + width: 100%; + height: 100%; + min-height: var(--carousel-height); + position: absolute; + top: 0; + left: 0; +} +.carousel.carousel-slider .carousel-item h2 { + font-size: 24px; + font-weight: 500; + line-height: 32px; +} +.carousel.carousel-slider .carousel-item p { + font-size: 15px; +} +.carousel .carousel-item { + visibility: hidden; + width: calc(var(--carousel-height) * 0.5); + height: calc(var(--carousel-height) * 0.5); + position: absolute; + top: 0; + left: 0; +} +.carousel .carousel-item > img { + width: 100%; +} +.carousel .indicators { + padding-left: 0; + list-style-type: none; + position: absolute; + text-align: center; + left: 0; + right: 0; + bottom: 0; + margin: 0; +} +.carousel .indicators .indicator-item { + display: inline-block; + position: relative; + cursor: pointer; + height: 8px; + width: 8px; + margin: 24px 4px; + background-color: rgba(255, 255, 255, 0.45); + transition: background-color 0.3s; + border-radius: 50%; +} +.carousel .indicators .indicator-item.active { + background-color: var(--md-ref-palette-primary100); +} +.carousel.scrolling .carousel-item .materialboxed, +.carousel .carousel-item:not(.active) .materialboxed { + pointer-events: none; +} + +.tap-target-wrapper { + width: 800px; + height: 800px; + position: fixed; + z-index: 1000; + visibility: hidden; + transition: visibility 0s 0.3s; +} + +.tap-target-wrapper.open { + visibility: visible; + transition: visibility 0s; +} +.tap-target-wrapper.open .tap-target { + transform: scale(1); + opacity: 0.95; + transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1); +} +.tap-target-wrapper.open .tap-target-wave::before { + transform: scale(1); +} +.tap-target-wrapper.open .tap-target-wave::after { + visibility: visible; + animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; + transition: opacity 0.3s, transform 0.3s, visibility 0s 1s; +} + +.tap-target { + position: absolute; + font-size: 1rem; + border-radius: 50%; + background-color: var(--md-sys-color-primary-container); + color: var(--md-sys-color-primary); + box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2); + width: 100%; + height: 100%; + opacity: 0; + transform: scale(0); + transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1); +} + +.tap-target-content { + position: relative; + display: table-cell; +} + +.tap-target-wave { + position: absolute; + border-radius: 50%; + z-index: 10001; +} +.tap-target-wave::before, .tap-target-wave::after { + content: ""; + display: block; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + background-color: var(--md-sys-color-surface); +} +.tap-target-wave::before { + transform: scale(0); + transition: transform 0.3s; +} +.tap-target-wave::after { + visibility: hidden; + transition: opacity 0.3s, transform 0.3s, visibility 0s; + z-index: -1; +} + +.tap-target-origin { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10002; + position: absolute !important; +} +.tap-target-origin:not(.btn):not(.btn-large):not(.btn-small), .tap-target-origin:not(.btn):not(.btn-large):not(.btn-small):hover { + background: none; +} + +@media only screen and (max-width: 600px) { + .tap-target, .tap-target-wrapper { + width: 600px; + height: 600px; + } +} +.pulse { + overflow: visible; + position: relative; +} +.pulse::before { + content: ""; + display: block; + position: absolute; + pointer-events: none; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: inherit; + border-radius: inherit; + transition: opacity 0.3s, transform 0.3s; + animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; + z-index: -1; +} + +@keyframes pulse-animation { + 0% { + opacity: 1; + transform: scale(1); + } + 50% { + opacity: 0; + transform: scale(1.5); + } + 100% { + opacity: 0; + transform: scale(1.5); + } +} +/* Modal */ +.datepicker-modal { + max-width: 325px; + min-width: 300px; + max-height: none; +} + +.datepicker-container.modal-content { + display: flex; + flex-direction: column; + padding: 0; + background-color: var(--md-sys-color-surface); +} + +.datepicker-controls { + display: flex; + justify-content: space-between; + width: 280px; + margin: 0 auto; +} +.datepicker-controls .selects-container { + display: flex; +} +.datepicker-controls .select-wrapper input { + border-bottom: none; + text-align: center; + margin: 0; +} +.datepicker-controls .select-wrapper input:focus { + border-bottom: none; +} +.datepicker-controls .select-wrapper .caret { + display: none; +} +.datepicker-controls .select-year input { + width: 50px; +} +.datepicker-controls .select-month input { + width: 80px; +} +.datepicker-controls .month-prev, +.datepicker-controls .month-next { + display: inline-flex; + align-items: center; +} +.datepicker-controls .month-prev > svg, +.datepicker-controls .month-next > svg { + fill: var(--md-sys-color-on-surface-variant); +} + +.month-prev, .month-next { + margin-top: 4px; + cursor: pointer; + background-color: transparent; + border: none; +} + +/* Date Display */ +.datepicker-date-display { + flex: 1 auto; + background-color: var(--md-sys-color-primary); + color: var(--md-sys-color-on-primary); + padding: 20px 22px; + font-weight: 500; +} +.datepicker-date-display .year-text { + display: block; + font-size: 1.5rem; + line-height: 25px; + color: var(--md-sys-color-on-primary); +} +.datepicker-date-display .date-text { + display: block; + font-size: 2.8rem; + line-height: 47px; + font-weight: 500; +} + +/* Calendar */ +.datepicker-calendar-container { + flex: 2.5 auto; +} + +.datepicker-table { + width: 280px; + font-size: 1rem; + margin: 0 auto; +} +.datepicker-table thead { + border-bottom: none; +} +.datepicker-table th { + padding: 10px 5px; + text-align: center; +} +.datepicker-table tr { + border: none; +} +.datepicker-table abbr { + text-decoration: none; + color: var(--md-sys-color-on-surface-variant); +} +.datepicker-table td { + color: var(--md-sys-color-on-background); + border-radius: 50%; + padding: 0; +} +.datepicker-table td.is-today { + color: var(--md-sys-color-primary); +} +.datepicker-table td.is-selected { + background-color: var(--md-sys-color-primary); + color: var(--md-sys-color-on-primary); +} +.datepicker-table td.is-outside-current-month, .datepicker-table td.is-disabled { + color: var(--md-sys-color-on-surface); + pointer-events: none; +} + +.datepicker-day-button { + background-color: transparent; + border: none; + line-height: 38px; + display: block; + width: 100%; + border-radius: 50%; + padding: 0 5px; + cursor: pointer; + color: inherit; +} +.datepicker-day-button:hover { + background-color: rgba(var(--md-sys-color-primary-numeric), 0.06); +} +.datepicker-day-button:focus { + background-color: rgba(var(--md-sys-color-primary-numeric), 0.18); +} + +/* Footer */ +.datepicker-footer { + width: 280px; + margin: 0 auto; + padding-bottom: 5px; + display: flex; + justify-content: space-between; +} + +.datepicker-cancel, +.datepicker-clear, +.datepicker-today, +.datepicker-done { + color: var(--md-sys-color-primary); + padding: 0 1rem; +} + +.datepicker-clear { + color: var(--md-sys-color-error); +} + +/* Media Queries */ +@media only screen and (min-width : 601px) { + .datepicker-modal { + max-width: 625px; + } + .datepicker-container.modal-content { + flex-direction: row; + } + .datepicker-date-display { + flex: 0 1 270px; + } + .datepicker-controls, + .datepicker-table, + .datepicker-footer { + width: 320px; + } + .datepicker-day-button { + line-height: 44px; + } +} +/* Timepicker Containers */ +.timepicker-modal { + max-width: 325px; + max-height: none; +} + +.timepicker-container.modal-content { + display: flex; + flex-direction: column; + padding: 0; +} + +.text-primary { + color: var(--md-sys-color-on-primary); +} + +/* Clock Digital Display */ +.timepicker-digital-display { + width: 200px; + flex: 1 auto; + background-color: var(--md-sys-color-primary); + padding: 10px; + font-weight: 300; +} + +.timepicker-text-container { + font-size: 4rem; + font-weight: bold; + text-align: center; + color: var(--font-on-primary-color-medium); + font-weight: 400; + position: relative; + user-select: none; +} +.timepicker-text-container input[type=text] { + height: 4rem; + color: rgba(255, 255, 255, 0.6); + border-bottom: 0px; + font-size: 4rem; + direction: ltr; +} + +.timepicker-input-hours, +.timepicker-input-minutes, +.timepicker-span-am-pm div { + cursor: pointer; +} + +input[type=text].timepicker-input-hours { + text-align: right; + width: 28%; + margin-right: 3px; +} + +input[type=text].timepicker-input-minutes { + width: 33%; + margin-left: 3px; +} + +input[type=text].text-primary { + color: rgb(255, 255, 255); +} + +.timepicker-display-am-pm { + font-size: 1.3rem; + position: absolute; + right: 1rem; + bottom: 1rem; + font-weight: 400; +} + +/* Analog Clock Display */ +.timepicker-analog-display { + flex: 2.5 auto; + background-color: var(--md-sys-color-surface); +} + +.timepicker-plate { + background-color: rgba(0, 0, 0, 0.09); + border-radius: 50%; + width: 270px; + height: 270px; + overflow: visible; + position: relative; + margin: auto; + margin-top: 25px; + margin-bottom: 5px; + user-select: none; +} + +.timepicker-canvas, +.timepicker-dial { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} + +.timepicker-minutes { + visibility: hidden; +} + +.timepicker-tick { + border-radius: 50%; + color: var(--md-sys-color-on-background); + line-height: 40px; + text-align: center; + width: 40px; + height: 40px; + position: absolute; + cursor: pointer; + font-size: 15px; +} + +.timepicker-tick.active, +.timepicker-tick:hover { + background-color: rgba(var(--md-sys-color-primary-numeric), 0.06); +} + +.timepicker-dial { + transition: transform 350ms, opacity 350ms; +} + +.timepicker-dial-out { + opacity: 0; +} +.timepicker-dial-out.timepicker-hours { + transform: scale(1.1, 1.1); +} +.timepicker-dial-out.timepicker-minutes { + transform: scale(0.8, 0.8); +} + +.timepicker-canvas { + transition: opacity 175ms; +} +.timepicker-canvas line { + stroke: var(--md-sys-color-primary); + stroke-width: 4; + stroke-linecap: round; +} + +.timepicker-canvas-out { + opacity: 0.25; +} + +.timepicker-canvas-bearing { + stroke: none; + fill: var(--md-sys-color-primary); +} + +.timepicker-canvas-bg { + stroke: none; + fill: var(--md-sys-color-primary); +} + +/* Footer */ +.timepicker-footer { + margin: 0 auto; + padding: 5px 1rem; + display: flex; + justify-content: space-between; +} + +.timepicker-clear { + color: var(--md-sys-color-error); +} + +.timepicker-close { + color: var(--md-sys-color-primary); +} + +.timepicker-clear, +.timepicker-close { + padding: 0 20px; +} + +/* Media Queries */ +@media only screen and (min-width : 601px) { + .timepicker-modal { + max-width: 600px; + } + .timepicker-container.modal-content { + flex-direction: row; + } + .timepicker-text-container { + top: 32%; + } + .timepicker-display-am-pm { + position: relative; + right: auto; + bottom: auto; + text-align: center; + margin-top: 1.2rem; + } +} \ No newline at end of file diff --git a/dist/css/materialize.min.css b/dist/css/materialize.min.css new file mode 100644 index 0000000000..3707ba1b78 --- /dev/null +++ b/dist/css/materialize.min.css @@ -0,0 +1,8 @@ +/*! +* Materialize v2.1.1 (https://materializeweb.com) +* Copyright 2014-2024 Materialize +* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE) +*/ +:root{--md-source: #006495;--md-ref-palette-primary0: #000000;--md-ref-palette-primary10: #001e30;--md-ref-palette-primary20: #003450;--md-ref-palette-primary25: #003f60;--md-ref-palette-primary30: #004b71;--md-ref-palette-primary35: #005783;--md-ref-palette-primary40: #006495;--md-ref-palette-primary50: #0f7eb8;--md-ref-palette-primary60: #3d98d4;--md-ref-palette-primary70: #5db3f0;--md-ref-palette-primary80: #8fcdff;--md-ref-palette-primary90: #cbe6ff;--md-ref-palette-primary95: #e6f2ff;--md-ref-palette-primary98: #f7f9ff;--md-ref-palette-primary99: #fcfcff;--md-ref-palette-primary100: #ffffff;--md-ref-palette-secondary0: #000000;--md-ref-palette-secondary10: #0d1d29;--md-ref-palette-secondary20: #22323f;--md-ref-palette-secondary25: #2d3d4b;--md-ref-palette-secondary30: #394856;--md-ref-palette-secondary35: #445462;--md-ref-palette-secondary40: #50606f;--md-ref-palette-secondary50: #697988;--md-ref-palette-secondary60: #8293a2;--md-ref-palette-secondary70: #9dadbd;--md-ref-palette-secondary80: #b8c8d9;--md-ref-palette-secondary90: #d4e4f6;--md-ref-palette-secondary95: #e6f2ff;--md-ref-palette-secondary98: #f7f9ff;--md-ref-palette-secondary99: #fcfcff;--md-ref-palette-secondary100: #ffffff;--md-ref-palette-tertiary0: #000000;--md-ref-palette-tertiary10: #211634;--md-ref-palette-tertiary20: #362b4a;--md-ref-palette-tertiary25: #423656;--md-ref-palette-tertiary30: #4d4162;--md-ref-palette-tertiary35: #594c6e;--md-ref-palette-tertiary40: #66587b;--md-ref-palette-tertiary50: #7f7195;--md-ref-palette-tertiary60: #998ab0;--md-ref-palette-tertiary70: #b4a4cb;--md-ref-palette-tertiary80: #d0bfe7;--md-ref-palette-tertiary90: #ecdcff;--md-ref-palette-tertiary95: #f7edff;--md-ref-palette-tertiary98: #fef7ff;--md-ref-palette-tertiary99: #fffbff;--md-ref-palette-tertiary100: #ffffff;--md-ref-palette-neutral0: #000000;--md-ref-palette-neutral10: #1a1c1e;--md-ref-palette-neutral20: #2e3133;--md-ref-palette-neutral25: #3a3c3e;--md-ref-palette-neutral30: #454749;--md-ref-palette-neutral35: #515255;--md-ref-palette-neutral40: #5d5e61;--md-ref-palette-neutral50: #76777a;--md-ref-palette-neutral60: #8f9194;--md-ref-palette-neutral70: #aaabae;--md-ref-palette-neutral80: #c6c6c9;--md-ref-palette-neutral90: #e2e2e5;--md-ref-palette-neutral95: #f0f0f3;--md-ref-palette-neutral98: #f9f9fc;--md-ref-palette-neutral99: #fcfcff;--md-ref-palette-neutral100: #ffffff;--md-ref-palette-neutral-variant0: #000000;--md-ref-palette-neutral-variant10: #161c22;--md-ref-palette-neutral-variant20: #2b3137;--md-ref-palette-neutral-variant25: #363c42;--md-ref-palette-neutral-variant30: #41474d;--md-ref-palette-neutral-variant35: #4d5359;--md-ref-palette-neutral-variant40: #595f65;--md-ref-palette-neutral-variant50: #72787e;--md-ref-palette-neutral-variant60: #8b9198;--md-ref-palette-neutral-variant70: #a6acb3;--md-ref-palette-neutral-variant80: #c1c7ce;--md-ref-palette-neutral-variant90: #dee3ea;--md-ref-palette-neutral-variant95: #ecf1f9;--md-ref-palette-neutral-variant98: #f7f9ff;--md-ref-palette-neutral-variant99: #fcfcff;--md-ref-palette-neutral-variant100: #ffffff;--md-ref-palette-error0: #000000;--md-ref-palette-error10: #410002;--md-ref-palette-error20: #690005;--md-ref-palette-error25: #7e0007;--md-ref-palette-error30: #93000a;--md-ref-palette-error35: #a80710;--md-ref-palette-error40: #ba1a1a;--md-ref-palette-error50: #de3730;--md-ref-palette-error60: #ff5449;--md-ref-palette-error70: #ff897d;--md-ref-palette-error80: #ffb4ab;--md-ref-palette-error90: #ffdad6;--md-ref-palette-error95: #ffedea;--md-ref-palette-error98: #fff8f7;--md-ref-palette-error99: #fffbff;--md-ref-palette-error100: #ffffff;--md-sys-color-primary-light: #006495;--md-sys-color-on-primary-light: #ffffff;--md-sys-color-primary-container-light: #cbe6ff;--md-sys-color-on-primary-container-light: #001e30;--md-sys-color-secondary-light: #50606f;--md-sys-color-on-secondary-light: #ffffff;--md-sys-color-secondary-container-light: #d4e4f6;--md-sys-color-on-secondary-container-light: #0d1d29;--md-sys-color-tertiary-light: #66587b;--md-sys-color-on-tertiary-light: #ffffff;--md-sys-color-tertiary-container-light: #ecdcff;--md-sys-color-on-tertiary-container-light: #211634;--md-sys-color-error-light: #ba1a1a;--md-sys-color-error-container-light: #ffdad6;--md-sys-color-on-error-light: #ffffff;--md-sys-color-on-error-container-light: #410002;--md-sys-color-background-light: #fcfcff;--md-sys-color-on-background-light: #1a1c1e;--md-sys-color-surface-light: #fcfcff;--md-sys-color-on-surface-light: #1a1c1e;--md-sys-color-surface-variant-light: #dee3ea;--md-sys-color-on-surface-variant-light: #41474d;--md-sys-color-outline-light: #72787e;--md-sys-color-inverse-on-surface-light: #f0f0f3;--md-sys-color-inverse-surface-light: #2e3133;--md-sys-color-inverse-primary-light: #8fcdff;--md-sys-color-shadow-light: #000000;--md-sys-color-surface-tint-light: #006495;--md-sys-color-outline-variant-light: #c1c7ce;--md-sys-color-scrim-light: #000000;--md-sys-color-primary-dark: #8fcdff;--md-sys-color-on-primary-dark: #003450;--md-sys-color-primary-container-dark: #004b71;--md-sys-color-on-primary-container-dark: #cbe6ff;--md-sys-color-secondary-dark: #b8c8d9;--md-sys-color-on-secondary-dark: #22323f;--md-sys-color-secondary-container-dark: #394856;--md-sys-color-on-secondary-container-dark: #d4e4f6;--md-sys-color-tertiary-dark: #d0bfe7;--md-sys-color-on-tertiary-dark: #362b4a;--md-sys-color-tertiary-container-dark: #4d4162;--md-sys-color-on-tertiary-container-dark: #ecdcff;--md-sys-color-error-dark: #ffb4ab;--md-sys-color-error-container-dark: #93000a;--md-sys-color-on-error-dark: #690005;--md-sys-color-on-error-container-dark: #ffdad6;--md-sys-color-background-dark: #1a1c1e;--md-sys-color-on-background-dark: #e2e2e5;--md-sys-color-surface-dark: #1a1c1e;--md-sys-color-on-surface-dark: #e2e2e5;--md-sys-color-surface-variant-dark: #41474d;--md-sys-color-on-surface-variant-dark: #c1c7ce;--md-sys-color-outline-dark: #8b9198;--md-sys-color-inverse-on-surface-dark: #1a1c1e;--md-sys-color-inverse-surface-dark: #e2e2e5;--md-sys-color-inverse-primary-dark: #006495;--md-sys-color-shadow-dark: #000000;--md-sys-color-surface-tint-dark: #8fcdff;--md-sys-color-outline-variant-dark: #41474d;--md-sys-color-scrim-dark: #000000;--md-sys-typescale-display-large-font-family-name: Roboto;--md-sys-typescale-display-large-font-family-style: Regular;--md-sys-typescale-display-large-font-weight: 400px;--md-sys-typescale-display-large-font-size: 57px;--md-sys-typescale-display-large-line-height: 64px;--md-sys-typescale-display-large-letter-spacing: -0.25px;--md-sys-typescale-display-medium-font-family-name: Roboto;--md-sys-typescale-display-medium-font-family-style: Regular;--md-sys-typescale-display-medium-font-weight: 400px;--md-sys-typescale-display-medium-font-size: 45px;--md-sys-typescale-display-medium-line-height: 52px;--md-sys-typescale-display-medium-letter-spacing: 0px;--md-sys-typescale-display-small-font-family-name: Roboto;--md-sys-typescale-display-small-font-family-style: Regular;--md-sys-typescale-display-small-font-weight: 400px;--md-sys-typescale-display-small-font-size: 36px;--md-sys-typescale-display-small-line-height: 44px;--md-sys-typescale-display-small-letter-spacing: 0px;--md-sys-typescale-headline-large-font-family-name: Roboto;--md-sys-typescale-headline-large-font-family-style: Regular;--md-sys-typescale-headline-large-font-weight: 400px;--md-sys-typescale-headline-large-font-size: 32px;--md-sys-typescale-headline-large-line-height: 40px;--md-sys-typescale-headline-large-letter-spacing: 0px;--md-sys-typescale-headline-medium-font-family-name: Roboto;--md-sys-typescale-headline-medium-font-family-style: Regular;--md-sys-typescale-headline-medium-font-weight: 400px;--md-sys-typescale-headline-medium-font-size: 28px;--md-sys-typescale-headline-medium-line-height: 36px;--md-sys-typescale-headline-medium-letter-spacing: 0px;--md-sys-typescale-headline-small-font-family-name: Roboto;--md-sys-typescale-headline-small-font-family-style: Regular;--md-sys-typescale-headline-small-font-weight: 400px;--md-sys-typescale-headline-small-font-size: 24px;--md-sys-typescale-headline-small-line-height: 32px;--md-sys-typescale-headline-small-letter-spacing: 0px;--md-sys-typescale-body-large-font-family-name: Roboto;--md-sys-typescale-body-large-font-family-style: Regular;--md-sys-typescale-body-large-font-weight: 400px;--md-sys-typescale-body-large-font-size: 16px;--md-sys-typescale-body-large-line-height: 24px;--md-sys-typescale-body-large-letter-spacing: 0.50px;--md-sys-typescale-body-medium-font-family-name: Roboto;--md-sys-typescale-body-medium-font-family-style: Regular;--md-sys-typescale-body-medium-font-weight: 400px;--md-sys-typescale-body-medium-font-size: 14px;--md-sys-typescale-body-medium-line-height: 20px;--md-sys-typescale-body-medium-letter-spacing: 0.25px;--md-sys-typescale-body-small-font-family-name: Roboto;--md-sys-typescale-body-small-font-family-style: Regular;--md-sys-typescale-body-small-font-weight: 400px;--md-sys-typescale-body-small-font-size: 12px;--md-sys-typescale-body-small-line-height: 16px;--md-sys-typescale-body-small-letter-spacing: 0.40px;--md-sys-typescale-label-large-font-family-name: Roboto;--md-sys-typescale-label-large-font-family-style: Medium;--md-sys-typescale-label-large-font-weight: 500px;--md-sys-typescale-label-large-font-size: 14px;--md-sys-typescale-label-large-line-height: 20px;--md-sys-typescale-label-large-letter-spacing: 0.10px;--md-sys-typescale-label-medium-font-family-name: Roboto;--md-sys-typescale-label-medium-font-family-style: Medium;--md-sys-typescale-label-medium-font-weight: 500px;--md-sys-typescale-label-medium-font-size: 12px;--md-sys-typescale-label-medium-line-height: 16px;--md-sys-typescale-label-medium-letter-spacing: 0.50px;--md-sys-typescale-label-small-font-family-name: Roboto;--md-sys-typescale-label-small-font-family-style: Medium;--md-sys-typescale-label-small-font-weight: 500px;--md-sys-typescale-label-small-font-size: 11px;--md-sys-typescale-label-small-line-height: 16px;--md-sys-typescale-label-small-letter-spacing: 0.50px;--md-sys-typescale-title-large-font-family-name: Roboto;--md-sys-typescale-title-large-font-family-style: Regular;--md-sys-typescale-title-large-font-weight: 400px;--md-sys-typescale-title-large-font-size: 22px;--md-sys-typescale-title-large-line-height: 28px;--md-sys-typescale-title-large-letter-spacing: 0px;--md-sys-typescale-title-medium-font-family-name: Roboto;--md-sys-typescale-title-medium-font-family-style: Medium;--md-sys-typescale-title-medium-font-weight: 500px;--md-sys-typescale-title-medium-font-size: 16px;--md-sys-typescale-title-medium-line-height: 24px;--md-sys-typescale-title-medium-letter-spacing: 0.15px;--md-sys-typescale-title-small-font-family-name: Roboto;--md-sys-typescale-title-small-font-family-style: Medium;--md-sys-typescale-title-small-font-weight: 500px;--md-sys-typescale-title-small-font-size: 14px;--md-sys-typescale-title-small-line-height: 20px;--md-sys-typescale-title-small-letter-spacing: 0.10px}:root,:host{color-scheme:light;--md-sys-color-primary: var(--md-sys-color-primary-light);--md-sys-color-on-primary: var(--md-sys-color-on-primary-light);--md-sys-color-primary-container: var(--md-sys-color-primary-container-light);--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);--md-sys-color-secondary: var(--md-sys-color-secondary-light);--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);--md-sys-color-tertiary: var(--md-sys-color-tertiary-light);--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);--md-sys-color-error: var(--md-sys-color-error-light);--md-sys-color-on-error: var(--md-sys-color-on-error-light);--md-sys-color-error-container: var(--md-sys-color-error-container-light);--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);--md-sys-color-outline: var(--md-sys-color-outline-light);--md-sys-color-background: var(--md-sys-color-background-light);--md-sys-color-on-background: var(--md-sys-color-on-background-light);--md-sys-color-surface: var(--md-sys-color-surface-light);--md-sys-color-on-surface: var(--md-sys-color-on-surface-light);--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);--md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);--md-sys-color-shadow: var(--md-sys-color-shadow-light);--md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);--md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);--md-sys-color-scrim: var(--md-sys-color-scrim-light)}@media(prefers-color-scheme: dark){:root,:host{color-scheme:dark;--md-sys-color-primary: var(--md-sys-color-primary-dark);--md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);--md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);--md-sys-color-secondary: var(--md-sys-color-secondary-dark);--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);--md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);--md-sys-color-error: var(--md-sys-color-error-dark);--md-sys-color-on-error: var(--md-sys-color-on-error-dark);--md-sys-color-error-container: var(--md-sys-color-error-container-dark);--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);--md-sys-color-outline: var(--md-sys-color-outline-dark);--md-sys-color-background: var(--md-sys-color-background-dark);--md-sys-color-on-background: var(--md-sys-color-on-background-dark);--md-sys-color-surface: var(--md-sys-color-surface-dark);--md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);--md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);--md-sys-color-shadow: var(--md-sys-color-shadow-dark);--md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);--md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);--md-sys-color-scrim: var(--md-sys-color-scrim-dark)}}:root[theme=light]{color-scheme:light;--md-sys-color-primary: var(--md-sys-color-primary-light);--md-sys-color-on-primary: var(--md-sys-color-on-primary-light);--md-sys-color-primary-container: var(--md-sys-color-primary-container-light);--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);--md-sys-color-secondary: var(--md-sys-color-secondary-light);--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);--md-sys-color-tertiary: var(--md-sys-color-tertiary-light);--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);--md-sys-color-error: var(--md-sys-color-error-light);--md-sys-color-on-error: var(--md-sys-color-on-error-light);--md-sys-color-error-container: var(--md-sys-color-error-container-light);--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);--md-sys-color-outline: var(--md-sys-color-outline-light);--md-sys-color-background: var(--md-sys-color-background-light);--md-sys-color-on-background: var(--md-sys-color-on-background-light);--md-sys-color-surface: var(--md-sys-color-surface-light);--md-sys-color-on-surface: var(--md-sys-color-on-surface-light);--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);--md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);--md-sys-color-shadow: var(--md-sys-color-shadow-light);--md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);--md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);--md-sys-color-scrim: var(--md-sys-color-scrim-light)}:root[theme=dark]{color-scheme:dark;--md-sys-color-primary: var(--md-sys-color-primary-dark);--md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);--md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);--md-sys-color-secondary: var(--md-sys-color-secondary-dark);--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);--md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);--md-sys-color-error: var(--md-sys-color-error-dark);--md-sys-color-on-error: var(--md-sys-color-on-error-dark);--md-sys-color-error-container: var(--md-sys-color-error-container-dark);--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);--md-sys-color-outline: var(--md-sys-color-outline-dark);--md-sys-color-background: var(--md-sys-color-background-dark);--md-sys-color-on-background: var(--md-sys-color-on-background-dark);--md-sys-color-surface: var(--md-sys-color-surface-dark);--md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);--md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);--md-sys-color-shadow: var(--md-sys-color-shadow-dark);--md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);--md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);--md-sys-color-scrim: var(--md-sys-color-scrim-dark)}.primary{background-color:var(--md-sys-color-primary)}.primary-text{color:var(--md-sys-color-primary)}.on-primary{background-color:var(--md-sys-color-on-primary)}.on-primary-text{color:var(--md-sys-color-on-primary)}.primary-container{background-color:var(--md-sys-color-primary-container)}.primary-container-text{color:var(--md-sys-color-primary-container)}.on-primary-container{background-color:var(--md-sys-color-on-primary-container)}.on-primary-container-text{color:var(--md-sys-color-on-primary-container)}.secondary{background-color:var(--md-sys-color-secondary)}.secondary-text{color:var(--md-sys-color-secondary)}.on-secondary{background-color:var(--md-sys-color-on-secondary)}.on-secondary-text{color:var(--md-sys-color-on-secondary)}.secondary-container{background-color:var(--md-sys-color-secondary-container)}.secondary-container-text{color:var(--md-sys-color-secondary-container)}.on-secondary-container{background-color:var(--md-sys-color-on-secondary-container)}.on-secondary-container-text{color:var(--md-sys-color-on-secondary-container)}.tertiary{background-color:var(--md-sys-color-tertiary)}.tertiary-text{color:var(--md-sys-color-tertiary)}.on-tertiary{background-color:var(--md-sys-color-on-tertiary)}.on-tertiary-text{color:var(--md-sys-color-on-tertiary)}.tertiary-container{background-color:var(--md-sys-color-tertiary-container)}.tertiary-container-text{color:var(--md-sys-color-tertiary-container)}.on-tertiary-container{background-color:var(--md-sys-color-on-tertiary-container)}.on-tertiary-container-text{color:var(--md-sys-color-on-tertiary-container)}.error{background-color:var(--md-sys-color-error)}.error-text{color:var(--md-sys-color-error)}.on-error{background-color:var(--md-sys-color-on-error)}.on-error-text{color:var(--md-sys-color-on-error)}.error-container{background-color:var(--md-sys-color-error-container)}.error-container-text{color:var(--md-sys-color-error-container)}.on-error-container{background-color:var(--md-sys-color-on-error-container)}.on-error-container-text{color:var(--md-sys-color-on-error-container)}.background{background-color:var(--md-sys-color-background)}.background-text{color:var(--md-sys-color-background)}.on-background{background-color:var(--md-sys-color-on-background)}.on-background-text{color:var(--md-sys-color-on-background)}.surface,.switch label input[type=checkbox]:checked+.lever:after{background-color:var(--md-sys-color-surface)}.surface-text{color:var(--md-sys-color-surface)}.on-surface{background-color:var(--md-sys-color-on-surface)}.on-surface-text{color:var(--md-sys-color-on-surface)}.surface-variant,.progress,input[type=range]::-moz-range-track,input[type=range]::-webkit-slider-runnable-track{background-color:var(--md-sys-color-surface-variant)}.surface-variant-text{color:var(--md-sys-color-surface-variant)}.on-surface-variant{background-color:var(--md-sys-color-on-surface-variant)}.on-surface-variant-text,.chip>.material-icons{color:var(--md-sys-color-on-surface-variant)}.outline,.switch label .lever:after{background-color:var(--md-sys-color-outline)}.outline-text{color:var(--md-sys-color-outline)}.inverse-on-surface{background-color:var(--md-sys-color-inverse-on-surface)}.inverse-on-surface-text{color:var(--md-sys-color-inverse-on-surface)}.inverse-surface{background-color:var(--md-sys-color-inverse-surface)}.inverse-surface-text{color:var(--md-sys-color-inverse-surface)}.inverse-primary{background-color:var(--md-sys-color-inverse-primary)}.inverse-primary-text{color:var(--md-sys-color-inverse-primary)}.shadow{background-color:var(--md-sys-color-shadow)}.shadow-text{color:var(--md-sys-color-shadow)}.surface-tint{background-color:var(--md-sys-color-surface-tint)}.surface-tint-text{color:var(--md-sys-color-surface-tint)}.outline-variant{background-color:var(--md-sys-color-outline-variant)}.outline-variant-text{color:var(--md-sys-color-outline-variant)}.scrim{background-color:var(--md-sys-color-scrim)}.scrim-text{color:var(--md-sys-color-scrim)}.display-large{font-family:var(--md-sys-typescale-display-large-font-family-name);font-style:var(--md-sys-typescale-display-large-font-family-style);font-weight:var(--md-sys-typescale-display-large-font-weight);font-size:var(--md-sys-typescale-display-large-font-size);letter-spacing:var(--md-sys-typescale-display-large-tracking);line-height:var(--md-sys-typescale-display-large-height);text-transform:var(--md-sys-typescale-display-large-text-transform);text-decoration:var(--md-sys-typescale-display-large-text-decoration)}.display-medium{font-family:var(--md-sys-typescale-display-medium-font-family-name);font-style:var(--md-sys-typescale-display-medium-font-family-style);font-weight:var(--md-sys-typescale-display-medium-font-weight);font-size:var(--md-sys-typescale-display-medium-font-size);letter-spacing:var(--md-sys-typescale-display-medium-tracking);line-height:var(--md-sys-typescale-display-medium-height);text-transform:var(--md-sys-typescale-display-medium-text-transform);text-decoration:var(--md-sys-typescale-display-medium-text-decoration)}.display-small{font-family:var(--md-sys-typescale-display-small-font-family-name);font-style:var(--md-sys-typescale-display-small-font-family-style);font-weight:var(--md-sys-typescale-display-small-font-weight);font-size:var(--md-sys-typescale-display-small-font-size);letter-spacing:var(--md-sys-typescale-display-small-tracking);line-height:var(--md-sys-typescale-display-small-height);text-transform:var(--md-sys-typescale-display-small-text-transform);text-decoration:var(--md-sys-typescale-display-small-text-decoration)}.headline-large{font-family:var(--md-sys-typescale-headline-large-font-family-name);font-style:var(--md-sys-typescale-headline-large-font-family-style);font-weight:var(--md-sys-typescale-headline-large-font-weight);font-size:var(--md-sys-typescale-headline-large-font-size);letter-spacing:var(--md-sys-typescale-headline-large-tracking);line-height:var(--md-sys-typescale-headline-large-height);text-transform:var(--md-sys-typescale-headline-large-text-transform);text-decoration:var(--md-sys-typescale-headline-large-text-decoration)}.headline-medium{font-family:var(--md-sys-typescale-headline-medium-font-family-name);font-style:var(--md-sys-typescale-headline-medium-font-family-style);font-weight:var(--md-sys-typescale-headline-medium-font-weight);font-size:var(--md-sys-typescale-headline-medium-font-size);letter-spacing:var(--md-sys-typescale-headline-medium-tracking);line-height:var(--md-sys-typescale-headline-medium-height);text-transform:var(--md-sys-typescale-headline-medium-text-transform);text-decoration:var(--md-sys-typescale-headline-medium-text-decoration)}.headline-small{font-family:var(--md-sys-typescale-headline-small-font-family-name);font-style:var(--md-sys-typescale-headline-small-font-family-style);font-weight:var(--md-sys-typescale-headline-small-font-weight);font-size:var(--md-sys-typescale-headline-small-font-size);letter-spacing:var(--md-sys-typescale-headline-small-tracking);line-height:var(--md-sys-typescale-headline-small-height);text-transform:var(--md-sys-typescale-headline-small-text-transform);text-decoration:var(--md-sys-typescale-headline-small-text-decoration)}.body-large{font-family:var(--md-sys-typescale-body-large-font-family-name);font-style:var(--md-sys-typescale-body-large-font-family-style);font-weight:var(--md-sys-typescale-body-large-font-weight);font-size:var(--md-sys-typescale-body-large-font-size);letter-spacing:var(--md-sys-typescale-body-large-tracking);line-height:var(--md-sys-typescale-body-large-height);text-transform:var(--md-sys-typescale-body-large-text-transform);text-decoration:var(--md-sys-typescale-body-large-text-decoration)}.body-medium{font-family:var(--md-sys-typescale-body-medium-font-family-name);font-style:var(--md-sys-typescale-body-medium-font-family-style);font-weight:var(--md-sys-typescale-body-medium-font-weight);font-size:var(--md-sys-typescale-body-medium-font-size);letter-spacing:var(--md-sys-typescale-body-medium-tracking);line-height:var(--md-sys-typescale-body-medium-height);text-transform:var(--md-sys-typescale-body-medium-text-transform);text-decoration:var(--md-sys-typescale-body-medium-text-decoration)}.body-small{font-family:var(--md-sys-typescale-body-small-font-family-name);font-style:var(--md-sys-typescale-body-small-font-family-style);font-weight:var(--md-sys-typescale-body-small-font-weight);font-size:var(--md-sys-typescale-body-small-font-size);letter-spacing:var(--md-sys-typescale-body-small-tracking);line-height:var(--md-sys-typescale-body-small-height);text-transform:var(--md-sys-typescale-body-small-text-transform);text-decoration:var(--md-sys-typescale-body-small-text-decoration)}.label-large{font-family:var(--md-sys-typescale-label-large-font-family-name);font-style:var(--md-sys-typescale-label-large-font-family-style);font-weight:var(--md-sys-typescale-label-large-font-weight);font-size:var(--md-sys-typescale-label-large-font-size);letter-spacing:var(--md-sys-typescale-label-large-tracking);line-height:var(--md-sys-typescale-label-large-height);text-transform:var(--md-sys-typescale-label-large-text-transform);text-decoration:var(--md-sys-typescale-label-large-text-decoration)}.label-medium{font-family:var(--md-sys-typescale-label-medium-font-family-name);font-style:var(--md-sys-typescale-label-medium-font-family-style);font-weight:var(--md-sys-typescale-label-medium-font-weight);font-size:var(--md-sys-typescale-label-medium-font-size);letter-spacing:var(--md-sys-typescale-label-medium-tracking);line-height:var(--md-sys-typescale-label-medium-height);text-transform:var(--md-sys-typescale-label-medium-text-transform);text-decoration:var(--md-sys-typescale-label-medium-text-decoration)}.label-small{font-family:var(--md-sys-typescale-label-small-font-family-name);font-style:var(--md-sys-typescale-label-small-font-family-style);font-weight:var(--md-sys-typescale-label-small-font-weight);font-size:var(--md-sys-typescale-label-small-font-size);letter-spacing:var(--md-sys-typescale-label-small-tracking);line-height:var(--md-sys-typescale-label-small-height);text-transform:var(--md-sys-typescale-label-small-text-transform);text-decoration:var(--md-sys-typescale-label-small-text-decoration)}.title-large{font-family:var(--md-sys-typescale-title-large-font-family-name);font-style:var(--md-sys-typescale-title-large-font-family-style);font-weight:var(--md-sys-typescale-title-large-font-weight);font-size:var(--md-sys-typescale-title-large-font-size);letter-spacing:var(--md-sys-typescale-title-large-tracking);line-height:var(--md-sys-typescale-title-large-height);text-transform:var(--md-sys-typescale-title-large-text-transform);text-decoration:var(--md-sys-typescale-title-large-text-decoration)}.title-medium{font-family:var(--md-sys-typescale-title-medium-font-family-name);font-style:var(--md-sys-typescale-title-medium-font-family-style);font-weight:var(--md-sys-typescale-title-medium-font-weight);font-size:var(--md-sys-typescale-title-medium-font-size);letter-spacing:var(--md-sys-typescale-title-medium-tracking);line-height:var(--md-sys-typescale-title-medium-height);text-transform:var(--md-sys-typescale-title-medium-text-transform);text-decoration:var(--md-sys-typescale-title-medium-text-decoration)}.title-small{font-family:var(--md-sys-typescale-title-small-font-family-name);font-style:var(--md-sys-typescale-title-small-font-family-style);font-weight:var(--md-sys-typescale-title-small-font-weight);font-size:var(--md-sys-typescale-title-small-font-size);letter-spacing:var(--md-sys-typescale-title-small-tracking);line-height:var(--md-sys-typescale-title-small-height);text-transform:var(--md-sys-typescale-title-small-text-transform);text-decoration:var(--md-sys-typescale-title-small-text-decoration)}.materialize-red{background-color:#e51c23 !important}.materialize-red-text{color:#e51c23 !important}.materialize-red.lighten-5{background-color:#fdeaeb !important}.materialize-red-text.text-lighten-5{color:#fdeaeb !important}.materialize-red.lighten-4{background-color:#f8c1c3 !important}.materialize-red-text.text-lighten-4{color:#f8c1c3 !important}.materialize-red.lighten-3{background-color:#f3989b !important}.materialize-red-text.text-lighten-3{color:#f3989b !important}.materialize-red.lighten-2{background-color:#ee6e73 !important}.materialize-red-text.text-lighten-2{color:#ee6e73 !important}.materialize-red.lighten-1{background-color:#ea454b !important}.materialize-red-text.text-lighten-1{color:#ea454b !important}.materialize-red.darken-1{background-color:#d0181e !important}.materialize-red-text.text-darken-1{color:#d0181e !important}.materialize-red.darken-2{background-color:#b9151b !important}.materialize-red-text.text-darken-2{color:#b9151b !important}.materialize-red.darken-3{background-color:#a21318 !important}.materialize-red-text.text-darken-3{color:#a21318 !important}.materialize-red.darken-4{background-color:#8b1014 !important}.materialize-red-text.text-darken-4{color:#8b1014 !important}.red{background-color:#f44336 !important}.red-text{color:#f44336 !important}.red.lighten-5{background-color:#ffebee !important}.red-text.text-lighten-5{color:#ffebee !important}.red.lighten-4{background-color:#ffcdd2 !important}.red-text.text-lighten-4{color:#ffcdd2 !important}.red.lighten-3{background-color:#ef9a9a !important}.red-text.text-lighten-3{color:#ef9a9a !important}.red.lighten-2{background-color:#e57373 !important}.red-text.text-lighten-2{color:#e57373 !important}.red.lighten-1{background-color:#ef5350 !important}.red-text.text-lighten-1{color:#ef5350 !important}.red.darken-1{background-color:#e53935 !important}.red-text.text-darken-1{color:#e53935 !important}.red.darken-2{background-color:#d32f2f !important}.red-text.text-darken-2{color:#d32f2f !important}.red.darken-3{background-color:#c62828 !important}.red-text.text-darken-3{color:#c62828 !important}.red.darken-4{background-color:#b71c1c !important}.red-text.text-darken-4{color:#b71c1c !important}.red.accent-1{background-color:#ff8a80 !important}.red-text.text-accent-1{color:#ff8a80 !important}.red.accent-2{background-color:#ff5252 !important}.red-text.text-accent-2{color:#ff5252 !important}.red.accent-3{background-color:#ff1744 !important}.red-text.text-accent-3{color:#ff1744 !important}.red.accent-4{background-color:#d50000 !important}.red-text.text-accent-4{color:#d50000 !important}.pink{background-color:#e91e63 !important}.pink-text{color:#e91e63 !important}.pink.lighten-5{background-color:#fce4ec !important}.pink-text.text-lighten-5{color:#fce4ec !important}.pink.lighten-4{background-color:#f8bbd0 !important}.pink-text.text-lighten-4{color:#f8bbd0 !important}.pink.lighten-3{background-color:#f48fb1 !important}.pink-text.text-lighten-3{color:#f48fb1 !important}.pink.lighten-2{background-color:#f06292 !important}.pink-text.text-lighten-2{color:#f06292 !important}.pink.lighten-1{background-color:#ec407a !important}.pink-text.text-lighten-1{color:#ec407a !important}.pink.darken-1{background-color:#d81b60 !important}.pink-text.text-darken-1{color:#d81b60 !important}.pink.darken-2{background-color:#c2185b !important}.pink-text.text-darken-2{color:#c2185b !important}.pink.darken-3{background-color:#ad1457 !important}.pink-text.text-darken-3{color:#ad1457 !important}.pink.darken-4{background-color:#880e4f !important}.pink-text.text-darken-4{color:#880e4f !important}.pink.accent-1{background-color:#ff80ab !important}.pink-text.text-accent-1{color:#ff80ab !important}.pink.accent-2{background-color:#ff4081 !important}.pink-text.text-accent-2{color:#ff4081 !important}.pink.accent-3{background-color:#f50057 !important}.pink-text.text-accent-3{color:#f50057 !important}.pink.accent-4{background-color:#c51162 !important}.pink-text.text-accent-4{color:#c51162 !important}.purple{background-color:#9c27b0 !important}.purple-text{color:#9c27b0 !important}.purple.lighten-5{background-color:#f3e5f5 !important}.purple-text.text-lighten-5{color:#f3e5f5 !important}.purple.lighten-4{background-color:#e1bee7 !important}.purple-text.text-lighten-4{color:#e1bee7 !important}.purple.lighten-3{background-color:#ce93d8 !important}.purple-text.text-lighten-3{color:#ce93d8 !important}.purple.lighten-2{background-color:#ba68c8 !important}.purple-text.text-lighten-2{color:#ba68c8 !important}.purple.lighten-1{background-color:#ab47bc !important}.purple-text.text-lighten-1{color:#ab47bc !important}.purple.darken-1{background-color:#8e24aa !important}.purple-text.text-darken-1{color:#8e24aa !important}.purple.darken-2{background-color:#7b1fa2 !important}.purple-text.text-darken-2{color:#7b1fa2 !important}.purple.darken-3{background-color:#6a1b9a !important}.purple-text.text-darken-3{color:#6a1b9a !important}.purple.darken-4{background-color:#4a148c !important}.purple-text.text-darken-4{color:#4a148c !important}.purple.accent-1{background-color:#ea80fc !important}.purple-text.text-accent-1{color:#ea80fc !important}.purple.accent-2{background-color:#e040fb !important}.purple-text.text-accent-2{color:#e040fb !important}.purple.accent-3{background-color:#d500f9 !important}.purple-text.text-accent-3{color:#d500f9 !important}.purple.accent-4{background-color:#a0f !important}.purple-text.text-accent-4{color:#a0f !important}.deep-purple{background-color:#673ab7 !important}.deep-purple-text{color:#673ab7 !important}.deep-purple.lighten-5{background-color:#ede7f6 !important}.deep-purple-text.text-lighten-5{color:#ede7f6 !important}.deep-purple.lighten-4{background-color:#d1c4e9 !important}.deep-purple-text.text-lighten-4{color:#d1c4e9 !important}.deep-purple.lighten-3{background-color:#b39ddb !important}.deep-purple-text.text-lighten-3{color:#b39ddb !important}.deep-purple.lighten-2{background-color:#9575cd !important}.deep-purple-text.text-lighten-2{color:#9575cd !important}.deep-purple.lighten-1{background-color:#7e57c2 !important}.deep-purple-text.text-lighten-1{color:#7e57c2 !important}.deep-purple.darken-1{background-color:#5e35b1 !important}.deep-purple-text.text-darken-1{color:#5e35b1 !important}.deep-purple.darken-2{background-color:#512da8 !important}.deep-purple-text.text-darken-2{color:#512da8 !important}.deep-purple.darken-3{background-color:#4527a0 !important}.deep-purple-text.text-darken-3{color:#4527a0 !important}.deep-purple.darken-4{background-color:#311b92 !important}.deep-purple-text.text-darken-4{color:#311b92 !important}.deep-purple.accent-1{background-color:#b388ff !important}.deep-purple-text.text-accent-1{color:#b388ff !important}.deep-purple.accent-2{background-color:#7c4dff !important}.deep-purple-text.text-accent-2{color:#7c4dff !important}.deep-purple.accent-3{background-color:#651fff !important}.deep-purple-text.text-accent-3{color:#651fff !important}.deep-purple.accent-4{background-color:#6200ea !important}.deep-purple-text.text-accent-4{color:#6200ea !important}.indigo{background-color:#3f51b5 !important}.indigo-text{color:#3f51b5 !important}.indigo.lighten-5{background-color:#e8eaf6 !important}.indigo-text.text-lighten-5{color:#e8eaf6 !important}.indigo.lighten-4{background-color:#c5cae9 !important}.indigo-text.text-lighten-4{color:#c5cae9 !important}.indigo.lighten-3{background-color:#9fa8da !important}.indigo-text.text-lighten-3{color:#9fa8da !important}.indigo.lighten-2{background-color:#7986cb !important}.indigo-text.text-lighten-2{color:#7986cb !important}.indigo.lighten-1{background-color:#5c6bc0 !important}.indigo-text.text-lighten-1{color:#5c6bc0 !important}.indigo.darken-1{background-color:#3949ab !important}.indigo-text.text-darken-1{color:#3949ab !important}.indigo.darken-2{background-color:#303f9f !important}.indigo-text.text-darken-2{color:#303f9f !important}.indigo.darken-3{background-color:#283593 !important}.indigo-text.text-darken-3{color:#283593 !important}.indigo.darken-4{background-color:#1a237e !important}.indigo-text.text-darken-4{color:#1a237e !important}.indigo.accent-1{background-color:#8c9eff !important}.indigo-text.text-accent-1{color:#8c9eff !important}.indigo.accent-2{background-color:#536dfe !important}.indigo-text.text-accent-2{color:#536dfe !important}.indigo.accent-3{background-color:#3d5afe !important}.indigo-text.text-accent-3{color:#3d5afe !important}.indigo.accent-4{background-color:#304ffe !important}.indigo-text.text-accent-4{color:#304ffe !important}.blue{background-color:#2196f3 !important}.blue-text{color:#2196f3 !important}.blue.lighten-5{background-color:#e3f2fd !important}.blue-text.text-lighten-5{color:#e3f2fd !important}.blue.lighten-4{background-color:#bbdefb !important}.blue-text.text-lighten-4{color:#bbdefb !important}.blue.lighten-3{background-color:#90caf9 !important}.blue-text.text-lighten-3{color:#90caf9 !important}.blue.lighten-2{background-color:#64b5f6 !important}.blue-text.text-lighten-2{color:#64b5f6 !important}.blue.lighten-1{background-color:#42a5f5 !important}.blue-text.text-lighten-1{color:#42a5f5 !important}.blue.darken-1{background-color:#1e88e5 !important}.blue-text.text-darken-1{color:#1e88e5 !important}.blue.darken-2{background-color:#1976d2 !important}.blue-text.text-darken-2{color:#1976d2 !important}.blue.darken-3{background-color:#1565c0 !important}.blue-text.text-darken-3{color:#1565c0 !important}.blue.darken-4{background-color:#0d47a1 !important}.blue-text.text-darken-4{color:#0d47a1 !important}.blue.accent-1{background-color:#82b1ff !important}.blue-text.text-accent-1{color:#82b1ff !important}.blue.accent-2{background-color:#448aff !important}.blue-text.text-accent-2{color:#448aff !important}.blue.accent-3{background-color:#2979ff !important}.blue-text.text-accent-3{color:#2979ff !important}.blue.accent-4{background-color:#2962ff !important}.blue-text.text-accent-4{color:#2962ff !important}.light-blue{background-color:#03a9f4 !important}.light-blue-text{color:#03a9f4 !important}.light-blue.lighten-5{background-color:#e1f5fe !important}.light-blue-text.text-lighten-5{color:#e1f5fe !important}.light-blue.lighten-4{background-color:#b3e5fc !important}.light-blue-text.text-lighten-4{color:#b3e5fc !important}.light-blue.lighten-3{background-color:#81d4fa !important}.light-blue-text.text-lighten-3{color:#81d4fa !important}.light-blue.lighten-2{background-color:#4fc3f7 !important}.light-blue-text.text-lighten-2{color:#4fc3f7 !important}.light-blue.lighten-1{background-color:#29b6f6 !important}.light-blue-text.text-lighten-1{color:#29b6f6 !important}.light-blue.darken-1{background-color:#039be5 !important}.light-blue-text.text-darken-1{color:#039be5 !important}.light-blue.darken-2{background-color:#0288d1 !important}.light-blue-text.text-darken-2{color:#0288d1 !important}.light-blue.darken-3{background-color:#0277bd !important}.light-blue-text.text-darken-3{color:#0277bd !important}.light-blue.darken-4{background-color:#01579b !important}.light-blue-text.text-darken-4{color:#01579b !important}.light-blue.accent-1{background-color:#80d8ff !important}.light-blue-text.text-accent-1{color:#80d8ff !important}.light-blue.accent-2{background-color:#40c4ff !important}.light-blue-text.text-accent-2{color:#40c4ff !important}.light-blue.accent-3{background-color:#00b0ff !important}.light-blue-text.text-accent-3{color:#00b0ff !important}.light-blue.accent-4{background-color:#0091ea !important}.light-blue-text.text-accent-4{color:#0091ea !important}.cyan{background-color:#00bcd4 !important}.cyan-text{color:#00bcd4 !important}.cyan.lighten-5{background-color:#e0f7fa !important}.cyan-text.text-lighten-5{color:#e0f7fa !important}.cyan.lighten-4{background-color:#b2ebf2 !important}.cyan-text.text-lighten-4{color:#b2ebf2 !important}.cyan.lighten-3{background-color:#80deea !important}.cyan-text.text-lighten-3{color:#80deea !important}.cyan.lighten-2{background-color:#4dd0e1 !important}.cyan-text.text-lighten-2{color:#4dd0e1 !important}.cyan.lighten-1{background-color:#26c6da !important}.cyan-text.text-lighten-1{color:#26c6da !important}.cyan.darken-1{background-color:#00acc1 !important}.cyan-text.text-darken-1{color:#00acc1 !important}.cyan.darken-2{background-color:#0097a7 !important}.cyan-text.text-darken-2{color:#0097a7 !important}.cyan.darken-3{background-color:#00838f !important}.cyan-text.text-darken-3{color:#00838f !important}.cyan.darken-4{background-color:#006064 !important}.cyan-text.text-darken-4{color:#006064 !important}.cyan.accent-1{background-color:#84ffff !important}.cyan-text.text-accent-1{color:#84ffff !important}.cyan.accent-2{background-color:#18ffff !important}.cyan-text.text-accent-2{color:#18ffff !important}.cyan.accent-3{background-color:#00e5ff !important}.cyan-text.text-accent-3{color:#00e5ff !important}.cyan.accent-4{background-color:#00b8d4 !important}.cyan-text.text-accent-4{color:#00b8d4 !important}.teal{background-color:#009688 !important}.teal-text{color:#009688 !important}.teal.lighten-5{background-color:#e0f2f1 !important}.teal-text.text-lighten-5{color:#e0f2f1 !important}.teal.lighten-4{background-color:#b2dfdb !important}.teal-text.text-lighten-4{color:#b2dfdb !important}.teal.lighten-3{background-color:#80cbc4 !important}.teal-text.text-lighten-3{color:#80cbc4 !important}.teal.lighten-2{background-color:#4db6ac !important}.teal-text.text-lighten-2{color:#4db6ac !important}.teal.lighten-1{background-color:#26a69a !important}.teal-text.text-lighten-1{color:#26a69a !important}.teal.darken-1{background-color:#00897b !important}.teal-text.text-darken-1{color:#00897b !important}.teal.darken-2{background-color:#00796b !important}.teal-text.text-darken-2{color:#00796b !important}.teal.darken-3{background-color:#00695c !important}.teal-text.text-darken-3{color:#00695c !important}.teal.darken-4{background-color:#004d40 !important}.teal-text.text-darken-4{color:#004d40 !important}.teal.accent-1{background-color:#a7ffeb !important}.teal-text.text-accent-1{color:#a7ffeb !important}.teal.accent-2{background-color:#64ffda !important}.teal-text.text-accent-2{color:#64ffda !important}.teal.accent-3{background-color:#1de9b6 !important}.teal-text.text-accent-3{color:#1de9b6 !important}.teal.accent-4{background-color:#00bfa5 !important}.teal-text.text-accent-4{color:#00bfa5 !important}.green{background-color:#4caf50 !important}.green-text{color:#4caf50 !important}.green.lighten-5{background-color:#e8f5e9 !important}.green-text.text-lighten-5{color:#e8f5e9 !important}.green.lighten-4{background-color:#c8e6c9 !important}.green-text.text-lighten-4{color:#c8e6c9 !important}.green.lighten-3{background-color:#a5d6a7 !important}.green-text.text-lighten-3{color:#a5d6a7 !important}.green.lighten-2{background-color:#81c784 !important}.green-text.text-lighten-2{color:#81c784 !important}.green.lighten-1{background-color:#66bb6a !important}.green-text.text-lighten-1{color:#66bb6a !important}.green.darken-1{background-color:#43a047 !important}.green-text.text-darken-1{color:#43a047 !important}.green.darken-2{background-color:#388e3c !important}.green-text.text-darken-2{color:#388e3c !important}.green.darken-3{background-color:#2e7d32 !important}.green-text.text-darken-3{color:#2e7d32 !important}.green.darken-4{background-color:#1b5e20 !important}.green-text.text-darken-4{color:#1b5e20 !important}.green.accent-1{background-color:#b9f6ca !important}.green-text.text-accent-1{color:#b9f6ca !important}.green.accent-2{background-color:#69f0ae !important}.green-text.text-accent-2{color:#69f0ae !important}.green.accent-3{background-color:#00e676 !important}.green-text.text-accent-3{color:#00e676 !important}.green.accent-4{background-color:#00c853 !important}.green-text.text-accent-4{color:#00c853 !important}.light-green{background-color:#8bc34a !important}.light-green-text{color:#8bc34a !important}.light-green.lighten-5{background-color:#f1f8e9 !important}.light-green-text.text-lighten-5{color:#f1f8e9 !important}.light-green.lighten-4{background-color:#dcedc8 !important}.light-green-text.text-lighten-4{color:#dcedc8 !important}.light-green.lighten-3{background-color:#c5e1a5 !important}.light-green-text.text-lighten-3{color:#c5e1a5 !important}.light-green.lighten-2{background-color:#aed581 !important}.light-green-text.text-lighten-2{color:#aed581 !important}.light-green.lighten-1{background-color:#9ccc65 !important}.light-green-text.text-lighten-1{color:#9ccc65 !important}.light-green.darken-1{background-color:#7cb342 !important}.light-green-text.text-darken-1{color:#7cb342 !important}.light-green.darken-2{background-color:#689f38 !important}.light-green-text.text-darken-2{color:#689f38 !important}.light-green.darken-3{background-color:#558b2f !important}.light-green-text.text-darken-3{color:#558b2f !important}.light-green.darken-4{background-color:#33691e !important}.light-green-text.text-darken-4{color:#33691e !important}.light-green.accent-1{background-color:#ccff90 !important}.light-green-text.text-accent-1{color:#ccff90 !important}.light-green.accent-2{background-color:#b2ff59 !important}.light-green-text.text-accent-2{color:#b2ff59 !important}.light-green.accent-3{background-color:#76ff03 !important}.light-green-text.text-accent-3{color:#76ff03 !important}.light-green.accent-4{background-color:#64dd17 !important}.light-green-text.text-accent-4{color:#64dd17 !important}.lime{background-color:#cddc39 !important}.lime-text{color:#cddc39 !important}.lime.lighten-5{background-color:#f9fbe7 !important}.lime-text.text-lighten-5{color:#f9fbe7 !important}.lime.lighten-4{background-color:#f0f4c3 !important}.lime-text.text-lighten-4{color:#f0f4c3 !important}.lime.lighten-3{background-color:#e6ee9c !important}.lime-text.text-lighten-3{color:#e6ee9c !important}.lime.lighten-2{background-color:#dce775 !important}.lime-text.text-lighten-2{color:#dce775 !important}.lime.lighten-1{background-color:#d4e157 !important}.lime-text.text-lighten-1{color:#d4e157 !important}.lime.darken-1{background-color:#c0ca33 !important}.lime-text.text-darken-1{color:#c0ca33 !important}.lime.darken-2{background-color:#afb42b !important}.lime-text.text-darken-2{color:#afb42b !important}.lime.darken-3{background-color:#9e9d24 !important}.lime-text.text-darken-3{color:#9e9d24 !important}.lime.darken-4{background-color:#827717 !important}.lime-text.text-darken-4{color:#827717 !important}.lime.accent-1{background-color:#f4ff81 !important}.lime-text.text-accent-1{color:#f4ff81 !important}.lime.accent-2{background-color:#eeff41 !important}.lime-text.text-accent-2{color:#eeff41 !important}.lime.accent-3{background-color:#c6ff00 !important}.lime-text.text-accent-3{color:#c6ff00 !important}.lime.accent-4{background-color:#aeea00 !important}.lime-text.text-accent-4{color:#aeea00 !important}.yellow{background-color:#ffeb3b !important}.yellow-text{color:#ffeb3b !important}.yellow.lighten-5{background-color:#fffde7 !important}.yellow-text.text-lighten-5{color:#fffde7 !important}.yellow.lighten-4{background-color:#fff9c4 !important}.yellow-text.text-lighten-4{color:#fff9c4 !important}.yellow.lighten-3{background-color:#fff59d !important}.yellow-text.text-lighten-3{color:#fff59d !important}.yellow.lighten-2{background-color:#fff176 !important}.yellow-text.text-lighten-2{color:#fff176 !important}.yellow.lighten-1{background-color:#ffee58 !important}.yellow-text.text-lighten-1{color:#ffee58 !important}.yellow.darken-1{background-color:#fdd835 !important}.yellow-text.text-darken-1{color:#fdd835 !important}.yellow.darken-2{background-color:#fbc02d !important}.yellow-text.text-darken-2{color:#fbc02d !important}.yellow.darken-3{background-color:#f9a825 !important}.yellow-text.text-darken-3{color:#f9a825 !important}.yellow.darken-4{background-color:#f57f17 !important}.yellow-text.text-darken-4{color:#f57f17 !important}.yellow.accent-1{background-color:#ffff8d !important}.yellow-text.text-accent-1{color:#ffff8d !important}.yellow.accent-2{background-color:#ff0 !important}.yellow-text.text-accent-2{color:#ff0 !important}.yellow.accent-3{background-color:#ffea00 !important}.yellow-text.text-accent-3{color:#ffea00 !important}.yellow.accent-4{background-color:#ffd600 !important}.yellow-text.text-accent-4{color:#ffd600 !important}.amber{background-color:#ffc107 !important}.amber-text{color:#ffc107 !important}.amber.lighten-5{background-color:#fff8e1 !important}.amber-text.text-lighten-5{color:#fff8e1 !important}.amber.lighten-4{background-color:#ffecb3 !important}.amber-text.text-lighten-4{color:#ffecb3 !important}.amber.lighten-3{background-color:#ffe082 !important}.amber-text.text-lighten-3{color:#ffe082 !important}.amber.lighten-2{background-color:#ffd54f !important}.amber-text.text-lighten-2{color:#ffd54f !important}.amber.lighten-1{background-color:#ffca28 !important}.amber-text.text-lighten-1{color:#ffca28 !important}.amber.darken-1{background-color:#ffb300 !important}.amber-text.text-darken-1{color:#ffb300 !important}.amber.darken-2{background-color:#ffa000 !important}.amber-text.text-darken-2{color:#ffa000 !important}.amber.darken-3{background-color:#ff8f00 !important}.amber-text.text-darken-3{color:#ff8f00 !important}.amber.darken-4{background-color:#ff6f00 !important}.amber-text.text-darken-4{color:#ff6f00 !important}.amber.accent-1{background-color:#ffe57f !important}.amber-text.text-accent-1{color:#ffe57f !important}.amber.accent-2{background-color:#ffd740 !important}.amber-text.text-accent-2{color:#ffd740 !important}.amber.accent-3{background-color:#ffc400 !important}.amber-text.text-accent-3{color:#ffc400 !important}.amber.accent-4{background-color:#ffab00 !important}.amber-text.text-accent-4{color:#ffab00 !important}.orange{background-color:#ff9800 !important}.orange-text{color:#ff9800 !important}.orange.lighten-5{background-color:#fff3e0 !important}.orange-text.text-lighten-5{color:#fff3e0 !important}.orange.lighten-4{background-color:#ffe0b2 !important}.orange-text.text-lighten-4{color:#ffe0b2 !important}.orange.lighten-3{background-color:#ffcc80 !important}.orange-text.text-lighten-3{color:#ffcc80 !important}.orange.lighten-2{background-color:#ffb74d !important}.orange-text.text-lighten-2{color:#ffb74d !important}.orange.lighten-1{background-color:#ffa726 !important}.orange-text.text-lighten-1{color:#ffa726 !important}.orange.darken-1{background-color:#fb8c00 !important}.orange-text.text-darken-1{color:#fb8c00 !important}.orange.darken-2{background-color:#f57c00 !important}.orange-text.text-darken-2{color:#f57c00 !important}.orange.darken-3{background-color:#ef6c00 !important}.orange-text.text-darken-3{color:#ef6c00 !important}.orange.darken-4{background-color:#e65100 !important}.orange-text.text-darken-4{color:#e65100 !important}.orange.accent-1{background-color:#ffd180 !important}.orange-text.text-accent-1{color:#ffd180 !important}.orange.accent-2{background-color:#ffab40 !important}.orange-text.text-accent-2{color:#ffab40 !important}.orange.accent-3{background-color:#ff9100 !important}.orange-text.text-accent-3{color:#ff9100 !important}.orange.accent-4{background-color:#ff6d00 !important}.orange-text.text-accent-4{color:#ff6d00 !important}.deep-orange{background-color:#ff5722 !important}.deep-orange-text{color:#ff5722 !important}.deep-orange.lighten-5{background-color:#fbe9e7 !important}.deep-orange-text.text-lighten-5{color:#fbe9e7 !important}.deep-orange.lighten-4{background-color:#ffccbc !important}.deep-orange-text.text-lighten-4{color:#ffccbc !important}.deep-orange.lighten-3{background-color:#ffab91 !important}.deep-orange-text.text-lighten-3{color:#ffab91 !important}.deep-orange.lighten-2{background-color:#ff8a65 !important}.deep-orange-text.text-lighten-2{color:#ff8a65 !important}.deep-orange.lighten-1{background-color:#ff7043 !important}.deep-orange-text.text-lighten-1{color:#ff7043 !important}.deep-orange.darken-1{background-color:#f4511e !important}.deep-orange-text.text-darken-1{color:#f4511e !important}.deep-orange.darken-2{background-color:#e64a19 !important}.deep-orange-text.text-darken-2{color:#e64a19 !important}.deep-orange.darken-3{background-color:#d84315 !important}.deep-orange-text.text-darken-3{color:#d84315 !important}.deep-orange.darken-4{background-color:#bf360c !important}.deep-orange-text.text-darken-4{color:#bf360c !important}.deep-orange.accent-1{background-color:#ff9e80 !important}.deep-orange-text.text-accent-1{color:#ff9e80 !important}.deep-orange.accent-2{background-color:#ff6e40 !important}.deep-orange-text.text-accent-2{color:#ff6e40 !important}.deep-orange.accent-3{background-color:#ff3d00 !important}.deep-orange-text.text-accent-3{color:#ff3d00 !important}.deep-orange.accent-4{background-color:#dd2c00 !important}.deep-orange-text.text-accent-4{color:#dd2c00 !important}.brown{background-color:#795548 !important}.brown-text{color:#795548 !important}.brown.lighten-5{background-color:#efebe9 !important}.brown-text.text-lighten-5{color:#efebe9 !important}.brown.lighten-4{background-color:#d7ccc8 !important}.brown-text.text-lighten-4{color:#d7ccc8 !important}.brown.lighten-3{background-color:#bcaaa4 !important}.brown-text.text-lighten-3{color:#bcaaa4 !important}.brown.lighten-2{background-color:#a1887f !important}.brown-text.text-lighten-2{color:#a1887f !important}.brown.lighten-1{background-color:#8d6e63 !important}.brown-text.text-lighten-1{color:#8d6e63 !important}.brown.darken-1{background-color:#6d4c41 !important}.brown-text.text-darken-1{color:#6d4c41 !important}.brown.darken-2{background-color:#5d4037 !important}.brown-text.text-darken-2{color:#5d4037 !important}.brown.darken-3{background-color:#4e342e !important}.brown-text.text-darken-3{color:#4e342e !important}.brown.darken-4{background-color:#3e2723 !important}.brown-text.text-darken-4{color:#3e2723 !important}.blue-grey{background-color:#607d8b !important}.blue-grey-text{color:#607d8b !important}.blue-grey.lighten-5{background-color:#eceff1 !important}.blue-grey-text.text-lighten-5{color:#eceff1 !important}.blue-grey.lighten-4{background-color:#cfd8dc !important}.blue-grey-text.text-lighten-4{color:#cfd8dc !important}.blue-grey.lighten-3{background-color:#b0bec5 !important}.blue-grey-text.text-lighten-3{color:#b0bec5 !important}.blue-grey.lighten-2{background-color:#90a4ae !important}.blue-grey-text.text-lighten-2{color:#90a4ae !important}.blue-grey.lighten-1{background-color:#78909c !important}.blue-grey-text.text-lighten-1{color:#78909c !important}.blue-grey.darken-1{background-color:#546e7a !important}.blue-grey-text.text-darken-1{color:#546e7a !important}.blue-grey.darken-2{background-color:#455a64 !important}.blue-grey-text.text-darken-2{color:#455a64 !important}.blue-grey.darken-3{background-color:#37474f !important}.blue-grey-text.text-darken-3{color:#37474f !important}.blue-grey.darken-4{background-color:#263238 !important}.blue-grey-text.text-darken-4{color:#263238 !important}.grey{background-color:#9e9e9e !important}.grey-text{color:#9e9e9e !important}.grey.lighten-5{background-color:#fafafa !important}.grey-text.text-lighten-5{color:#fafafa !important}.grey.lighten-4{background-color:#f5f5f5 !important}.grey-text.text-lighten-4{color:#f5f5f5 !important}.grey.lighten-3{background-color:#eee !important}.grey-text.text-lighten-3{color:#eee !important}.grey.lighten-2{background-color:#e0e0e0 !important}.grey-text.text-lighten-2{color:#e0e0e0 !important}.grey.lighten-1{background-color:#bdbdbd !important}.grey-text.text-lighten-1{color:#bdbdbd !important}.grey.darken-1{background-color:#757575 !important}.grey-text.text-darken-1{color:#757575 !important}.grey.darken-2{background-color:#616161 !important}.grey-text.text-darken-2{color:#616161 !important}.grey.darken-3{background-color:#424242 !important}.grey-text.text-darken-3{color:#424242 !important}.grey.darken-4{background-color:#212121 !important}.grey-text.text-darken-4{color:#212121 !important}.black{background-color:#000 !important}.black-text{color:#000 !important}.white{background-color:#fff !important}.white-text{color:#fff !important}.transparent{background-color:rgba(0,0,0,0) !important}.transparent-text{color:rgba(0,0,0,0) !important}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{background-color:var(--md-sys-color-background);color:var(--md-sys-color-on-background)}button,input,optgroup,select,textarea{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}a{color:#039be5;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.valign-wrapper{display:flex;align-items:center}.clearfix{clear:both}.z-depth-0,.btn:focus.tonal,.btn-small:focus.tonal,.btn-large:focus.tonal,.btn:focus.filled,.btn-small:focus.filled,.btn-large:focus.filled,.btn.disabled,.btn-floating.disabled,.btn-large.disabled,.btn-small.disabled,.btn-flat.disabled,.btn:disabled,.btn-floating:disabled,.btn-large:disabled,.btn-small:disabled,.btn-flat:disabled,.btn[disabled],.btn-floating[disabled],.btn-large[disabled],.btn-small[disabled],.btn-flat[disabled],.btn.text,.text.btn-small,.text.btn-large,.btn-flat{box-shadow:none !important}.z-depth-1,.sidenav,.collapsible,.dropdown-content,.btn-floating,.btn:focus.elevated,.btn-small:focus.elevated,.btn-large:focus.elevated,.btn.tonal:hover,.tonal.btn-small:hover,.tonal.btn-large:hover,.btn.filled:hover,.filled.btn-small:hover,.filled.btn-large:hover,.btn.elevated,.elevated.btn-small,.elevated.btn-large,.card,.card-panel,nav{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2)}.z-depth-1-half,.btn-floating:focus,.btn-floating:hover{box-shadow:0 3px 3px 0 rgba(0,0,0,.14),0 1px 7px 0 rgba(0,0,0,.12),0 3px 1px -1px rgba(0,0,0,.2)}.z-depth-2,.btn.elevated:hover,.elevated.btn-small:hover,.elevated.btn-large:hover{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.3)}.z-depth-3,.toast{box-shadow:0 8px 17px 2px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2)}.z-depth-4{box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -7px rgba(0,0,0,.2)}.z-depth-5,.modal{box-shadow:0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12),0 11px 15px -7px rgba(0,0,0,.2)}.hoverable{transition:box-shadow .25s}.hoverable:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.divider{height:1px;overflow:hidden;background-color:var(--md-sys-color-outline-variant)}blockquote{margin:20px 0;padding-left:1.5rem;border-left:5px solid var(--md-sys-color-primary)}i{line-height:inherit}i.left{float:left;margin-left:-8px}i.right{float:right}i.tiny{font-size:1rem}i.small{font-size:2rem}i.medium{font-size:4rem}i.large{font-size:6rem}html.noscroll{position:fixed;overflow-y:scroll;width:100%}img.responsive-img,video.responsive-video{max-width:100%;height:auto}.pagination li{display:inline-block;border-radius:2px;text-align:center;vertical-align:top;height:30px}.pagination li a{color:var(--md-sys-color-on-surface-variant);display:inline-block;font-size:1.2rem;padding:0 10px;line-height:30px}.pagination li:hover:not(.disabled){background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.pagination li.active a{color:var(--md-sys-color-on-primary)}.pagination li.active,.pagination li.active:hover{background-color:var(--md-sys-color-primary)}.pagination li.disabled a{cursor:default;color:var(--md-sys-color-on-surface)}.pagination li i{font-size:2rem}.pagination li.pages ul li{display:inline-block;float:none}@media only screen and (max-width : 992.99px){.pagination{width:100%}.pagination li.prev,.pagination li.next{width:10%}.pagination li.pages{width:80%;overflow:hidden;white-space:nowrap}}.breadcrumb{display:inline-block;font-size:18px;color:var(--font-on-primary-color-medium)}.breadcrumb i,.breadcrumb [class^=mdi-],.breadcrumb [class*=mdi-],.breadcrumb i.material-icons,.breadcrumb i.material-symbols-outlined,.breadcrumb i.material-symbols-rounded,.breadcrumb i.material-symbols-sharp{display:block;float:left;font-size:24px}.breadcrumb:before{content:"";color:var(--font-on-primary-color-medium);vertical-align:top;display:inline-block;font-family:"Material Symbols Outlined","Material Symbols Rounded","Material Symbols Sharp","Material Icons";font-weight:normal;font-style:normal;font-size:25px;margin:0 10px 0 8px;-webkit-font-smoothing:antialiased;float:left}.breadcrumb:first-child:before{display:none}.breadcrumb:last-child{color:var(--md-sys-color-on-primary)}.parallax-container{position:relative;overflow:hidden;height:500px}.parallax-container .parallax{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1}.parallax-container .parallax img{opacity:0;position:absolute;left:50%;bottom:0;min-width:100%;min-height:100%;transform:translate3d(0, 0, 0);transform:translateX(-50%)}.pin-top,.pin-bottom{position:relative}.pinned{position:fixed !important}ul.staggered-list li{opacity:0}.fade-in{opacity:0;transform-origin:0 50%}@media only screen and (max-width : 600.99px){.hide-on-small-only,.hide-on-small-and-down{display:none !important}}@media only screen and (max-width : 992.99px){.hide-on-med-and-down{display:none !important}}@media only screen and (min-width : 601px){.hide-on-med-and-up{display:none !important}}@media only screen and (min-width: 601px)and (max-width: 992.99px){.hide-on-med-only{display:none !important}}@media only screen and (min-width : 993px){.hide-on-large-only{display:none !important}}@media only screen and (min-width : 1201px){.hide-on-extra-large-only{display:none !important}}@media only screen and (min-width : 1201px){.show-on-extra-large{display:block !important}}@media only screen and (min-width : 993px){.show-on-large{display:block !important}}@media only screen and (min-width: 601px)and (max-width: 992.99px){.show-on-medium{display:block !important}}@media only screen and (max-width : 600.99px){.show-on-small{display:block !important}}@media only screen and (min-width : 601px){.show-on-medium-and-up{display:block !important}}@media only screen and (max-width : 992.99px){.show-on-medium-and-down{display:block !important}}@media only screen and (max-width : 600.99px){.center-on-small-only{text-align:center}}.page-footer{margin-top:5rem;padding-top:3rem;border-top:1px dashed var(--md-sys-color-outline-variant)}.page-footer p{color:var(--md-sys-color-outline-light)}.page-footer a{color:var(--md-sys-color-primary)}.page-footer .footer-copyright,.page-footer .footer-copyright a{overflow:hidden;min-height:50px;display:flex;align-items:center;justify-content:space-between;padding:10px 0px}.page-footer ul{padding-left:0;list-style-type:none}table,th,td{border:none}table{width:100%;display:table;border-collapse:collapse;border-spacing:0}table.striped tr{border-bottom:none}table.striped tbody>tr:nth-child(odd){background-color:rgba(0,0,0,.08)}table.highlight>tbody>tr{transition:background-color .25s ease}table.highlight>tbody>tr:hover{background-color:rgba(0,0,0,.04)}table thead{color:var(--md-sys-color-on-surface-variant)}table.centered thead tr th,table.centered tbody tr td{text-align:center}tr{border-bottom:1px solid var(--md-sys-color-outline-variant)}td,th{padding:15px 5px;display:table-cell;text-align:left;vertical-align:middle;border-radius:0}@media only screen and (max-width : 992.99px){table.responsive-table{width:100%;border-collapse:collapse;border-spacing:0;display:block;position:relative}table.responsive-table td:empty:before{content:" "}table.responsive-table th,table.responsive-table td{margin:0;vertical-align:top}table.responsive-table th{text-align:left}table.responsive-table thead{display:block;float:left}table.responsive-table thead tr{display:block;padding:0 10px 0 0}table.responsive-table thead tr th::before{content:" "}table.responsive-table tbody{display:block;width:auto;position:relative;overflow-x:auto;white-space:nowrap}table.responsive-table tbody tr{display:inline-block;vertical-align:top}table.responsive-table th{display:block;text-align:right}table.responsive-table td{display:block;min-height:1.25em;text-align:left}table.responsive-table tr{border-bottom:none;padding:0 10px}table.responsive-table thead{border:0;border-right:1px solid var(--md-sys-color-outline-variant)}}.video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%}.hide{display:none !important}.left-align{text-align:left}.right-align{text-align:right}.center,.center-align{text-align:center}.left{float:left !important}.right{float:right !important}.no-select,input[type=range],input[type=range]+.thumb{user-select:none}.circle{border-radius:50%}.center-block{display:block;margin-left:auto;margin-right:auto}.truncate{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-padding{padding:0 !important}.m-0{margin:0 !important}.mt-0{margin-top:0 !important}.mr-0{margin-right:0 !important}.mb-0{margin-bottom:0 !important}.ml-0{margin-left:0 !important}.mx-0{margin-left:0 !important;margin-right:0 !important}.my-0{margin-top:0 !important;margin-bottom:0 !important}.m-1{margin:.25rem !important}.mt-1{margin-top:.25rem !important}.mr-1{margin-right:.25rem !important}.mb-1{margin-bottom:.25rem !important}.ml-1{margin-left:.25rem !important}.mx-1{margin-left:.25rem !important;margin-right:.25rem !important}.my-1{margin-top:.25rem !important;margin-bottom:.25rem !important}.m-2{margin:.5rem !important}.mt-2{margin-top:.5rem !important}.mr-2{margin-right:.5rem !important}.mb-2{margin-bottom:.5rem !important}.ml-2{margin-left:.5rem !important}.mx-2{margin-left:.5rem !important;margin-right:.5rem !important}.my-2{margin-top:.5rem !important;margin-bottom:.5rem !important}.m-3{margin:.75rem !important}.mt-3{margin-top:.75rem !important}.mr-3{margin-right:.75rem !important}.mb-3{margin-bottom:.75rem !important}.ml-3{margin-left:.75rem !important}.mx-3{margin-left:.75rem !important;margin-right:.75rem !important}.my-3{margin-top:.75rem !important;margin-bottom:.75rem !important}.m-4{margin:1rem !important}.mt-4{margin-top:1rem !important}.mr-4{margin-right:1rem !important}.mb-4{margin-bottom:1rem !important}.ml-4{margin-left:1rem !important}.mx-4{margin-left:1rem !important;margin-right:1rem !important}.my-4{margin-top:1rem !important;margin-bottom:1rem !important}.m-5{margin:1.5rem !important}.mt-5{margin-top:1.5rem !important}.mr-5{margin-right:1.5rem !important}.mb-5{margin-bottom:1.5rem !important}.ml-5{margin-left:1.5rem !important}.mx-5{margin-left:1.5rem !important;margin-right:1.5rem !important}.my-5{margin-top:1.5rem !important;margin-bottom:1.5rem !important}.m-6{margin:3rem !important}.mt-6{margin-top:3rem !important}.mr-6{margin-right:3rem !important}.mb-6{margin-bottom:3rem !important}.ml-6{margin-left:3rem !important}.mx-6{margin-left:3rem !important;margin-right:3rem !important}.my-6{margin-top:3rem !important;margin-bottom:3rem !important}.m-auto{margin:auto !important}.mt-auto{margin-top:auto !important}.mr-auto{margin-right:auto !important}.mb-auto{margin-bottom:auto !important}.ml-auto{margin-left:auto !important}.mx-auto{margin-left:auto !important;margin-right:auto !important}.my-auto{margin-top:auto !important;margin-bottom:auto !important}.p-0{padding:0 !important}.pt-0{padding-top:0 !important}.pr-0{padding-right:0 !important}.pb-0{padding-bottom:0 !important}.pl-0{padding-left:0 !important}.px-0{padding-left:0 !important;padding-right:0 !important}.py-0{padding-top:0 !important;padding-bottom:0 !important}.p-1{padding:.25rem !important}.pt-1{padding-top:.25rem !important}.pr-1{padding-right:.25rem !important}.pb-1{padding-bottom:.25rem !important}.pl-1{padding-left:.25rem !important}.px-1{padding-left:.25rem !important;padding-right:.25rem !important}.py-1{padding-top:.25rem !important;padding-bottom:.25rem !important}.p-2{padding:.5rem !important}.pt-2{padding-top:.5rem !important}.pr-2{padding-right:.5rem !important}.pb-2{padding-bottom:.5rem !important}.pl-2{padding-left:.5rem !important}.px-2{padding-left:.5rem !important;padding-right:.5rem !important}.py-2{padding-top:.5rem !important;padding-bottom:.5rem !important}.p-3{padding:.75rem !important}.pt-3{padding-top:.75rem !important}.pr-3{padding-right:.75rem !important}.pb-3{padding-bottom:.75rem !important}.pl-3{padding-left:.75rem !important}.px-3{padding-left:.75rem !important;padding-right:.75rem !important}.py-3{padding-top:.75rem !important;padding-bottom:.75rem !important}.p-4{padding:1rem !important}.pt-4{padding-top:1rem !important}.pr-4{padding-right:1rem !important}.pb-4{padding-bottom:1rem !important}.pl-4{padding-left:1rem !important}.px-4{padding-left:1rem !important;padding-right:1rem !important}.py-4{padding-top:1rem !important;padding-bottom:1rem !important}.p-5{padding:1.5rem !important}.pt-5{padding-top:1.5rem !important}.pr-5{padding-right:1.5rem !important}.pb-5{padding-bottom:1.5rem !important}.pl-5{padding-left:1.5rem !important}.px-5{padding-left:1.5rem !important;padding-right:1.5rem !important}.py-5{padding-top:1.5rem !important;padding-bottom:1.5rem !important}.p-6{padding:3rem !important}.pt-6{padding-top:3rem !important}.pr-6{padding-right:3rem !important}.pb-6{padding-bottom:3rem !important}.pl-6{padding-left:3rem !important}.px-6{padding-left:3rem !important;padding-right:3rem !important}.py-6{padding-top:3rem !important;padding-bottom:3rem !important}.p-auto{padding:auto !important}.pt-auto{padding-top:auto !important}.pr-auto{padding-right:auto !important}.pb-auto{padding-bottom:auto !important}.pl-auto{padding-left:auto !important}.px-auto{padding-left:auto !important;padding-right:auto !important}.py-auto{padding-top:auto !important;padding-bottom:auto !important}.collection{padding-left:0;list-style-type:none;margin:.5rem 0 1rem 0;border:1px solid var(--md-sys-color-outline-variant);border-radius:2px;overflow:hidden;position:relative}.collection .collection-item{background-color:rgba(0,0,0,0);line-height:1.5rem;padding:10px 20px;margin:0;border-bottom:1px solid var(--md-sys-color-outline-variant)}.collection .collection-item.avatar{min-height:84px;padding-left:72px;position:relative}.collection .collection-item.avatar:not(.circle-clipper)>.circle,.collection .collection-item.avatar :not(.circle-clipper)>.circle{position:absolute;width:42px;height:42px;overflow:hidden;left:15px;display:inline-block;vertical-align:middle}.collection .collection-item.avatar i.circle{font-size:18px;line-height:42px;color:#fff;background-color:var(--md-sys-color-shadow-light);text-align:center}.collection .collection-item.avatar .title{font-size:16px}.collection .collection-item.avatar p{margin:0}.collection .collection-item.avatar .secondary-content{position:absolute;top:16px;right:16px}.collection .collection-item:last-child{border-bottom:none}.collection .collection-item.active{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.collection .collection-item.active .secondary-content{color:var(--md-sys-color-on-primary)}.collection a.collection-item{display:block;transition:.25s;color:var(--md-sys-color-primary)}.collection a.collection-item:not(.active):hover{background-color:rgba(0,0,0,.04)}.collection.with-header .collection-header{background-color:rgba(0,0,0,0);border-bottom:1px solid var(--md-sys-color-outline-variant);padding:10px 20px}.collection.with-header .collection-item{padding-left:30px}.collection.with-header .collection-item.avatar{padding-left:72px}.secondary-content{float:right;color:var(--md-sys-color-primary)}.collapsible .collection{margin:0;border:none}:root{--bagde-height: 22px}span.badge{min-width:3rem;padding:0 6px;margin-left:14px;text-align:center;font-size:1rem;line-height:var(--bagde-height);height:var(--bagde-height);color:var(--md-sys-color-on-surface-variant);float:right;box-sizing:border-box}span.badge.new{font-weight:300;font-size:.8rem;color:var(--md-sys-color-on-primary);background-color:var(--md-sys-color-primary);border-radius:2px}span.badge.new:after{content:" new"}span.badge[data-badge-caption]::after{content:" " attr(data-badge-caption)}.active span.badge{color:var(--md-sys-color-on-primary)}nav ul a span.badge{display:inline-block;float:none;margin-left:4px;line-height:var(--bagde-height);height:var(--bagde-height);-webkit-font-smoothing:auto}.collection-item span.badge{margin-top:calc(.75rem - var(--bagde-height)*.5)}.collapsible span.badge{margin-left:auto}.collapsible .active span.badge:not(.new){color:var(--md-sys-color-on-surface-variant)}.sidenav span.badge{margin-top:calc(var(--sidenav-line-height)*.5 - 11px)}table span.badge{display:inline-block;float:none;margin-left:auto}.material-icons,.material-symbols-outlined,.material-symbols-rounded,.material-symbols-sharp{text-rendering:optimizeLegibility;font-feature-settings:"liga"}.container{margin:0 auto;max-width:1280px;width:90%}@media only screen and (min-width : 601px){.container{width:85%}}@media only screen and (min-width : 993px){.container{width:70%}}.section{padding:1rem 0}body{--gap-size: 1.5rem}.row{display:grid;grid-template-columns:repeat(12, 1fr);gap:var(--gap-size)}.row .s1{grid-column:auto/span 1}.row .s2{grid-column:auto/span 2}.row .s3{grid-column:auto/span 3}.row .s4{grid-column:auto/span 4}.row .s5{grid-column:auto/span 5}.row .s6{grid-column:auto/span 6}.row .s7{grid-column:auto/span 7}.row .s8{grid-column:auto/span 8}.row .s9{grid-column:auto/span 9}.row .s10{grid-column:auto/span 10}.row .s11{grid-column:auto/span 11}.row .s12{grid-column:auto/span 12}.row .offset-s1{grid-column-start:3}.row .offset-s2{grid-column-start:2}.row .offset-s3{grid-column-start:4}.row .offset-s4{grid-column-start:5}.row .offset-s5{grid-column-start:6}.row .offset-s6{grid-column-start:7}.row .offset-s7{grid-column-start:8}.row .offset-s8{grid-column-start:9}.row .offset-s9{grid-column-start:10}.row .offset-s10{grid-column-start:11}.row .offset-s11{grid-column-start:12}@media only screen and (min-width : 601px){.row .m1{grid-column:auto/span 1}.row .m2{grid-column:auto/span 2}.row .m3{grid-column:auto/span 3}.row .m4{grid-column:auto/span 4}.row .m5{grid-column:auto/span 5}.row .m6{grid-column:auto/span 6}.row .m7{grid-column:auto/span 7}.row .m8{grid-column:auto/span 8}.row .m9{grid-column:auto/span 9}.row .m10{grid-column:auto/span 10}.row .m11{grid-column:auto/span 11}.row .m12{grid-column:auto/span 12}.row .offset-m1{grid-column-start:2}.row .offset-m2{grid-column-start:3}.row .offset-m3{grid-column-start:4}.row .offset-m4{grid-column-start:5}.row .offset-m5{grid-column-start:6}.row .offset-m6{grid-column-start:7}.row .offset-m7{grid-column-start:8}.row .offset-m8{grid-column-start:9}.row .offset-m9{grid-column-start:10}.row .offset-m10{grid-column-start:11}.row .offset-m11{grid-column-start:12}}@media only screen and (min-width : 993px){.row .l1{grid-column:auto/span 1}.row .l2{grid-column:auto/span 2}.row .l3{grid-column:auto/span 3}.row .l4{grid-column:auto/span 4}.row .l5{grid-column:auto/span 5}.row .l6{grid-column:auto/span 6}.row .l7{grid-column:auto/span 7}.row .l8{grid-column:auto/span 8}.row .l9{grid-column:auto/span 9}.row .l10{grid-column:auto/span 10}.row .l11{grid-column:auto/span 11}.row .l12{grid-column:auto/span 12}.row .offset-l1{grid-column-start:2}.row .offset-l2{grid-column-start:3}.row .offset-l3{grid-column-start:4}.row .offset-l4{grid-column-start:5}.row .offset-l5{grid-column-start:6}.row .offset-l6{grid-column-start:7}.row .offset-l7{grid-column-start:8}.row .offset-l8{grid-column-start:9}.row .offset-l9{grid-column-start:10}.row .offset-l10{grid-column-start:11}.row .offset-l11{grid-column-start:12}}@media only screen and (min-width : 1201px){.row .xl1{grid-column:auto/span 1}.row .xl2{grid-column:auto/span 2}.row .xl3{grid-column:auto/span 3}.row .xl4{grid-column:auto/span 4}.row .xl5{grid-column:auto/span 5}.row .xl6{grid-column:auto/span 6}.row .xl7{grid-column:auto/span 7}.row .xl8{grid-column:auto/span 8}.row .xl9{grid-column:auto/span 9}.row .xl10{grid-column:auto/span 10}.row .xl11{grid-column:auto/span 11}.row .xl12{grid-column:auto/span 12}.row .offset-xl1{grid-column-start:2}.row .offset-xl2{grid-column-start:3}.row .offset-xl3{grid-column-start:4}.row .offset-xl4{grid-column-start:5}.row .offset-xl5{grid-column-start:6}.row .offset-xl6{grid-column-start:7}.row .offset-xl7{grid-column-start:8}.row .offset-xl8{grid-column-start:9}.row .offset-xl9{grid-column-start:10}.row .offset-xl10{grid-column-start:11}.row .offset-xl11{grid-column-start:12}}.g-0{gap:0}.g-1{gap:calc(.25*var(--gap-size))}.g-2{gap:calc(.5*var(--gap-size))}.g-3{gap:calc(1*var(--gap-size))}.g-4{gap:calc(1.5*var(--gap-size))}.g-5{gap:calc(3*var(--gap-size))}:root{--navbar-height: 64px;--navbar-height-mobile: 56px}nav{color:var(--md-sys-color-on-primary);background-color:var(--md-sys-color-secondary-container);width:100%;height:var(--navbar-height-mobile);line-height:var(--navbar-height-mobile)}nav.nav-extended{height:auto}nav.nav-extended .nav-wrapper{min-height:var(--navbar-height-mobile);height:auto}nav.nav-extended .nav-content{position:relative;line-height:normal}nav a{color:var(--md-sys-color-on-primary)}nav i,nav [class^=mdi-],nav [class*=mdi-],nav i.material-icons,nav i.material-symbols-outlined,nav i.material-symbols-rounded,nav i.material-symbols-sharp{display:block;font-size:24px;height:var(--navbar-height-mobile);line-height:var(--navbar-height-mobile)}nav .nav-wrapper{position:relative;height:100%}@media only screen and (min-width : 993px){nav a.sidenav-trigger{display:none}}nav .sidenav-trigger{float:left;position:relative;z-index:1;height:var(--navbar-height-mobile);margin:0 18px}nav .sidenav-trigger i{height:var(--navbar-height-mobile);line-height:var(--navbar-height-mobile)}nav .brand-logo{position:absolute;color:var(--md-sys-color-on-primary);display:inline-block;font-size:2.1rem;padding:0}nav .brand-logo.center{left:50%;transform:translateX(-50%)}@media only screen and (max-width : 992.99px){nav .brand-logo{left:50%;transform:translateX(-50%)}nav .brand-logo.left,nav .brand-logo.right{padding:0;transform:none}nav .brand-logo.left{left:.5rem}nav .brand-logo.right{right:.5rem;left:auto}}nav .brand-logo.right{right:.5rem;padding:0}nav .brand-logo i,nav .brand-logo [class^=mdi-],nav .brand-logo [class*=mdi-],nav .brand-logo i.material-icons,nav .brand-logo i.material-symbols-outlined,nav .brand-logo i.material-symbols-rounded,nav .brand-logo i.material-symbols-sharp{float:left;margin-right:15px}nav .nav-title{display:inline-block;font-size:32px;padding:28px 0}nav ul:not(.dropdown-content){list-style-type:none;margin:0}nav ul:not(.dropdown-content)>li{transition:background-color .3s;float:left;padding:0}nav ul:not(.dropdown-content)>li>a{transition:background-color .3s;font-size:1rem;color:var(--md-sys-color-on-primary);display:block;padding:0 15px;cursor:pointer}nav ul:not(.dropdown-content)>li>a.active{background-color:var(--md-ref-palette-primary80)}nav ul:not(.dropdown-content)>li>a:hover:not(.active){background-color:var(--md-ref-palette-primary70)}nav ul:not(.dropdown-content)>li>a.btn,nav ul:not(.dropdown-content)>li>a.btn-small,nav ul:not(.dropdown-content)>li>a.btn-large,nav ul:not(.dropdown-content)>li>a.btn-flat,nav ul:not(.dropdown-content)>li>a.btn-floating{margin-top:-2px;margin-left:15px;margin-right:15px;display:inline-block}nav ul:not(.dropdown-content)>li>a.btn>.material-icons,nav ul:not(.dropdown-content)>li>a.btn-small>.material-icons,nav ul:not(.dropdown-content)>li>a.btn>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn-small>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn-small>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn>.material-symbols-sharp,nav ul:not(.dropdown-content)>li>a.btn-small>.material-symbols-sharp,nav ul:not(.dropdown-content)>li>a.btn-large>.material-icons,nav ul:not(.dropdown-content)>li>a.btn-large>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn-large>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn-large>.material-symbols-sharp,nav ul:not(.dropdown-content)>li>a.btn-flat>.material-icons,nav ul:not(.dropdown-content)>li>a.btn-flat>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn-flat>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn-flat>.material-symbols-sharp,nav ul:not(.dropdown-content)>li>a.btn-floating>.material-icons,nav ul:not(.dropdown-content)>li>a.btn-floating>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn-floating>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn-floating>.material-symbols-sharp{height:inherit;line-height:inherit}nav ul:not(.dropdown-content).left{float:left}nav form{height:100%}nav .input-field{margin:0;height:100%}nav .input-field input[type=search]{height:100%;font-size:1.2rem;border:none;padding-left:2rem;color:var(--md-sys-color-on-primary)}nav .input-field input[type=search]:focus,nav .input-field input[type=search][type=text]:valid,nav .input-field input[type=search][type=password]:valid,nav .input-field input[type=search][type=email]:valid,nav .input-field input[type=search][type=url]:valid,nav .input-field input[type=search][type=date]:valid{border:none;box-shadow:none}nav .input-field label{top:0;left:0}nav .input-field label i{color:var(--font-on-primary-color-medium);transition:color .3s}nav .input-field label.active i{color:var(--md-sys-color-on-primary)}.navbar-fixed{position:relative;height:var(--navbar-height-mobile);z-index:997}.navbar-fixed nav{position:fixed;right:0}@media only screen and (min-width : 601px){nav.nav-extended .nav-wrapper{min-height:var(--navbar-height-mobile)}nav,nav .nav-wrapper i,nav a.sidenav-trigger,nav a.sidenav-trigger i{height:var(--navbar-height);line-height:var(--navbar-height)}.navbar-fixed{height:var(--navbar-height)}}a{text-decoration:none}html{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-weight:normal;color:var(--md-sys-color-on-background)}@media only screen and (min-width: 0){html{font-size:14px}}@media only screen and (min-width: 993px){html{font-size:14.5px}}@media only screen and (min-width: 1201px){html{font-size:15px}}h1,h2,h3,h4,h5,h6{font-weight:400;line-height:1.3}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}h1{font-size:4.2rem;line-height:110%;margin:2.8rem 0 1.68rem 0}h2{font-size:3.56rem;line-height:110%;margin:2.3733333333rem 0 1.424rem 0}h3{font-size:2.92rem;line-height:110%;margin:1.9466666667rem 0 1.168rem 0}h4{font-size:2.28rem;line-height:110%;margin:1.52rem 0 .912rem 0}h5{font-size:1.64rem;line-height:110%;margin:1.0933333333rem 0 .656rem 0}h6{font-size:1.15rem;line-height:110%;margin:.7666666667rem 0 .46rem 0}em{font-style:italic}strong{font-weight:500}small{font-size:75%}.light{font-weight:300}.thin{font-weight:200}@media only screen and (min-width: 360px){.flow-text{font-size:1.2rem}}@media only screen and (min-width: 390px){.flow-text{font-size:1.224rem}}@media only screen and (min-width: 420px){.flow-text{font-size:1.248rem}}@media only screen and (min-width: 450px){.flow-text{font-size:1.272rem}}@media only screen and (min-width: 480px){.flow-text{font-size:1.296rem}}@media only screen and (min-width: 510px){.flow-text{font-size:1.32rem}}@media only screen and (min-width: 540px){.flow-text{font-size:1.344rem}}@media only screen and (min-width: 570px){.flow-text{font-size:1.368rem}}@media only screen and (min-width: 600px){.flow-text{font-size:1.392rem}}@media only screen and (min-width: 630px){.flow-text{font-size:1.416rem}}@media only screen and (min-width: 660px){.flow-text{font-size:1.44rem}}@media only screen and (min-width: 690px){.flow-text{font-size:1.464rem}}@media only screen and (min-width: 720px){.flow-text{font-size:1.488rem}}@media only screen and (min-width: 750px){.flow-text{font-size:1.512rem}}@media only screen and (min-width: 780px){.flow-text{font-size:1.536rem}}@media only screen and (min-width: 810px){.flow-text{font-size:1.56rem}}@media only screen and (min-width: 840px){.flow-text{font-size:1.584rem}}@media only screen and (min-width: 870px){.flow-text{font-size:1.608rem}}@media only screen and (min-width: 900px){.flow-text{font-size:1.632rem}}@media only screen and (min-width: 930px){.flow-text{font-size:1.656rem}}@media only screen and (min-width: 960px){.flow-text{font-size:1.68rem}}@media only screen and (max-width: 360px){.flow-text{font-size:1.2rem}}.scale-transition{transition:transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important}.scale-transition.scale-out{transform:scale(0);transition:transform .2s !important}.scale-transition.scale-in{transform:scale(1)}.card-panel{transition:box-shadow .25s;padding:24px;margin:.5rem 0 1rem 0;border-radius:12px;background-color:var(--md-sys-color-surface)}.card{overflow:hidden;position:relative;background-color:var(--md-sys-color-surface);transition:box-shadow .25s;border-radius:12px}.card .card-title{font-size:24px;font-weight:300}.card .card-title.activator{cursor:pointer}.card.small,.card.medium,.card.large{position:relative}.card.small .card-image,.card.medium .card-image,.card.large .card-image{max-height:60%;overflow:hidden}.card.small .card-image+.card-content,.card.medium .card-image+.card-content,.card.large .card-image+.card-content{max-height:40%}.card.small .card-content,.card.medium .card-content,.card.large .card-content{max-height:100%;overflow:hidden}.card.small .card-action,.card.medium .card-action,.card.large .card-action{position:absolute;bottom:0;left:0;right:0}.card.small{height:300px}.card.medium{height:400px}.card.large{height:500px}.card.horizontal{display:flex}.card.horizontal.small .card-image,.card.horizontal.medium .card-image,.card.horizontal.large .card-image{height:100%;max-height:none;overflow:visible}.card.horizontal.small .card-image img,.card.horizontal.medium .card-image img,.card.horizontal.large .card-image img{height:100%}.card.horizontal .card-image{max-width:50%}.card.horizontal .card-image img{border-radius:2px 0 0 2px;max-width:100%;width:auto}.card.horizontal .card-stacked{display:flex;flex-direction:column;flex:1;position:relative}.card.horizontal .card-stacked .card-content{flex-grow:1}.card.sticky-action .card-action{z-index:2}.card.sticky-action .card-reveal{z-index:1;padding-bottom:64px}.card .card-image{position:relative}.card .card-image img{display:block;border-radius:2px 2px 0 0;position:relative;left:0;right:0;top:0;bottom:0;width:100%}.card .card-image .card-title{color:var(--md-sys-color-surface);position:absolute;bottom:0;left:0;max-width:100%;padding:24px}.card .card-content{padding:24px;border-radius:0 0 2px 2px}.card .card-content p{margin:0}.card .card-content .card-title{display:block;line-height:32px;margin-bottom:8px}.card .card-content .card-title i{line-height:32px}.card .card-action{border-top:1px solid var(--md-sys-color-outline-variant);position:relative;background-color:inherit}.card .card-action:last-child{border-radius:0 0 2px 2px}.card .card-action a{padding:16px 24px;display:inline-block}.card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating){color:var(--md-sys-color-primary);transition:color .3s ease}.card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating):hover{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.card .card-reveal{padding:24px;position:absolute;background-color:var(--md-sys-color-surface);width:100%;overflow-y:auto;left:0;top:100%;height:100%;z-index:3;display:none}.card .card-reveal .card-title{cursor:pointer;display:block}#toast-container{display:block;position:fixed;z-index:10000}@media only screen and (max-width : 600.99px){#toast-container{min-width:100%;bottom:0%}}@media only screen and (min-width : 601px)and (max-width : 992.99px){#toast-container{left:5%;bottom:7%;max-width:90%}}@media only screen and (min-width : 993px){#toast-container{top:10%;right:7%;max-width:86%}}.toast{border-radius:4px;top:35px;width:auto;margin-top:10px;position:relative;max-width:100%;height:auto;min-height:48px;padding-left:16px;padding-right:12px;font-size:14px;font-weight:500;line-height:20px;color:var(--md-sys-color-inverse-on-surface);background-color:var(--md-sys-color-inverse-surface);display:flex;align-items:center;justify-content:space-between;cursor:default}.toast .toast-action{color:var(--md-sys-color-inverse-primary);font-weight:500;margin-right:-25px;margin-left:3rem}.toast.rounded{border-radius:24px}@media only screen and (max-width : 600.99px){.toast{width:100%;border-radius:0}}.tabs{padding-left:0;list-style-type:none;position:relative;overflow-x:auto;overflow-y:hidden;height:48px;width:100%;background-color:var(--md-sys-color-surface);margin:0 auto;white-space:nowrap}.tabs.tabs-transparent{background-color:rgba(0,0,0,0)}.tabs.tabs-transparent .tab a{color:var(--font-on-primary-color-medium)}.tabs.tabs-transparent .tab.disabled a,.tabs.tabs-transparent .tab.disabled a:hover,.tabs.tabs-transparent .tab.disabled a:focus{color:rgba(255,255,255,.38)}.tabs.tabs-transparent .tab a:hover{background-color:rgba(0,0,0,.04)}.tabs.tabs-transparent .tab a.active,.tabs.tabs-transparent .tab a:focus{background-color:rgba(0,0,0,0)}.tabs.tabs-transparent .tab a:hover,.tabs.tabs-transparent .tab a.active,.tabs.tabs-transparent .tab a:focus{color:var(--md-sys-color-on-primary)}.tabs.tabs-transparent .indicator{background-color:var(--md-sys-color-on-primary)}.tabs.tabs-fixed-width{display:flex}.tabs.tabs-fixed-width .tab{flex-grow:1}.tabs .tab{padding-left:0;list-style-type:none;display:inline-block;text-align:center;line-height:48px;height:48px;padding:0;margin:0}.tabs .tab a{color:var(--md-sys-color-on-surface-variant);display:block;width:100%;height:100%;padding:0 24px;font-size:14px;text-overflow:ellipsis;overflow:hidden;transition:color .28s ease,background-color .28s ease}.tabs .tab a.active{background-color:rgba(0,0,0,0)}.tabs .tab a.active,.tabs .tab a:focus,.tabs .tab a:hover{color:var(--md-sys-color-primary)}.tabs .tab a:hover{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.tabs .tab a:focus,.tabs .tab a.active{background-color:rgba(var(--md-sys-color-primary-numeric), 0.18);outline:none}.tabs .tab.disabled a,.tabs .tab.disabled a:hover{color:var(--md-sys-color-on-surface);cursor:default;background-color:rgba(0,0,0,0)}.tabs .tab.disabled a:not(:focus),.tabs .tab.disabled a:hover:not(:focus){background-color:rgba(0,0,0,0)}.tabs .indicator{position:absolute;bottom:0;height:3px;background-color:var(--md-sys-color-primary);will-change:left,right;border-radius:3px 3px 0 0}@media only screen and (max-width : 992.99px){.tabs{display:flex}.tabs .tab{flex-grow:1}.tabs .tab a{padding:0 12px}}.material-tooltip{padding:0 8px;border-radius:4px;color:var(--md-sys-color-inverse-on-surface);background-color:var(--md-sys-color-inverse-surface);font-family:var(--md-sys-typescale-body-small-font-family-name);font-size:var(--md-sys-typescale-body-small-font-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-font-weight);min-height:24px;opacity:0;padding-top:6px;padding-bottom:6px;font-size:12px;line-height:16px;font-weight:400;letter-spacing:.4px;position:absolute;max-width:300px;overflow:hidden;left:0;top:0;pointer-events:none;display:flex;align-items:center;visibility:hidden;z-index:2000}.backdrop{position:absolute;opacity:0;height:7px;width:14px;border-radius:0 0 50% 50%;background-color:var(--md-sys-color-inverse-surface);z-index:-1;transform-origin:50% 0;visibility:hidden}.btn,.btn-small,.btn-large,.btn-floating,.btn-flat{--btn-height: 40px;--btn-font-size-icon: 16px;--btn-padding: 24px;--btn-padding-icon: 16px;--btn-gap-icon: 8px;--btn-border-radius: 4px;--btn-font-size: 14px;height:var(--btn-height);border:none;border-radius:var(--btn-border-radius);padding-left:var(--btn-padding);padding-right:var(--btn-padding);font-size:ver(--btn-font-size);font-weight:500;text-decoration:none;display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);white-space:nowrap;outline:0;user-select:none;transition:background-color .2s ease-out}.btn.icon-left,.icon-left.btn-small,.icon-left.btn-large,.btn.icon-right,.icon-right.btn-small,.icon-right.btn-large{position:relative}.btn.icon-left,.icon-left.btn-small,.icon-left.btn-large{padding-left:calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon))}.btn.icon-right,.icon-right.btn-small,.icon-right.btn-large{padding-right:calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon))}.btn.icon-left i,.icon-left.btn-small i,.icon-left.btn-large i,.btn.icon-right i,.icon-right.btn-small i,.icon-right.btn-large i{position:absolute;font-size:var(--btn-font-size-icon)}.btn.icon-left i,.icon-left.btn-small i,.icon-left.btn-large i{left:var(--btn-padding-icon)}.btn.icon-right i,.icon-right.btn-small i,.icon-right.btn-large i{right:var(--btn-padding-icon)}.btn.filled,.filled.btn-small,.filled.btn-large{color:var(--md-sys-color-on-primary);background-color:var(--md-sys-color-primary)}.btn.tonal,.tonal.btn-small,.tonal.btn-large{color:var(--md-sys-color-on-secondary-container);background-color:var(--md-sys-color-secondary-container)}.btn.elevated,.elevated.btn-small,.elevated.btn-large{color:var(--md-sys-color-on-secondary-container);background-color:var(--md-sys-color-secondary-container)}.btn.outlined,.outlined.btn-small,.outlined.btn-large{background-color:rgba(0,0,0,0);color:var(--md-sys-color-primary);border:1px solid var(--md-sys-color-outline)}.btn.text,.text.btn-small,.text.btn-large,.btn-flat{color:var(--md-sys-color-primary);background-color:rgba(0,0,0,0)}.btn.disabled,.btn-floating.disabled,.btn-large.disabled,.btn-small.disabled,.btn-flat.disabled,.btn:disabled,.btn-floating:disabled,.btn-large:disabled,.btn-small:disabled,.btn-flat:disabled,.btn[disabled],.btn-floating[disabled],.btn-large[disabled],.btn-small[disabled],.btn-flat[disabled]{color:color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);background-color:color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);pointer-events:none;box-shadow:none;cursor:default}.btn.elevated:hover,.elevated.btn-small:hover,.elevated.btn-large:hover{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%)}.btn.filled:hover,.filled.btn-small:hover,.filled.btn-large:hover{color:var(--md-sys-color-on-primary);background-color:color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%)}.btn.tonal:hover,.tonal.btn-small:hover,.tonal.btn-large:hover{color:var(--md-sys-color-on-secondary-container);background-color:color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%)}.btn.outlined:hover,.outlined.btn-small:hover,.outlined.btn-large:hover{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%)}.btn.text:hover,.text.btn-small:hover,.text.btn-large:hover{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent)}.btn:focus.elevated,.btn-small:focus.elevated,.btn-large:focus.elevated{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%)}.btn:focus.filled,.btn-small:focus.filled,.btn-large:focus.filled{color:var(--md-sys-color-on-primary);background-color:color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%)}.btn:focus.tonal,.btn-small:focus.tonal,.btn-large:focus.tonal{color:var(--md-sys-color-on-secondary-container);background-color:color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%)}.btn:focus.outlined,.btn-small:focus.outlined,.btn-large:focus.outlined{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);border:1px solid var(--md-sys-color-primary)}.btn:focus.text,.btn-small:focus.text,.btn-large:focus.text{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%)}.btn:focus-visible.filled,.btn-small:focus-visible.filled,.btn-large:focus-visible.filled,.btn:focus-visible.elevated,.btn-small:focus-visible.elevated,.btn-large:focus-visible.elevated,.btn:focus-visible.tonal,.btn-small:focus-visible.tonal,.btn-large:focus-visible.tonal,.btn:focus-visible.outlined,.btn-small:focus-visible.outlined,.btn-large:focus-visible.outlined,.btn:focus-visible.text,.btn-small:focus-visible.text,.btn-large:focus-visible.text{outline:3px solid var(--md-sys-color-secondary);outline-offset:2px}.btn-floating{width:40px;height:40px;color:var(--md-sys-color-on-primary-container);background-color:var(--md-sys-color-primary-container);border-radius:16px;padding:0;display:grid;grid-auto-flow:column;align-items:center;position:relative;overflow:hidden;z-index:1;transition:background-color .3s;cursor:pointer;vertical-align:middle}.btn-floating:hover{background-color:color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 16%)}.btn-floating:focus{background-color:var(--md-ref-palette-secondary80)}.btn-floating:before{border-radius:0}.btn-floating.btn-large{width:56px;height:56px;padding:0}.btn-floating.btn-large.halfway-fab{bottom:-28px}.btn-floating.btn-small{--btn-small-height: calc(0.75 * var(--btn-height));width:var(--btn-small-height) e;height:var(--btn-small-height)}.btn-floating.btn-small.halfway-fab{bottom:calc(var(--btn-small-height)*-0.5)}.btn-floating.halfway-fab{position:absolute;right:24px;bottom:-20px}.btn-floating.halfway-fab.left{right:auto;left:24px}.btn-floating i{color:var(--md-sys-color-on-secondary);font-size:1.6rem;width:inherit;display:inline-block;text-align:center}button.btn-floating{border:none}.fixed-action-btn{position:fixed;right:23px;bottom:23px;padding-top:15px;margin-bottom:0;z-index:997}.fixed-action-btn.active ul{visibility:visible;padding-left:0;list-style-type:none}.fixed-action-btn.direction-left,.fixed-action-btn.direction-right{padding:0 0 0 15px}.fixed-action-btn.direction-left ul,.fixed-action-btn.direction-right ul{text-align:right;right:64px;top:50%;transform:translateY(-50%);height:100%;left:auto;width:500px}.fixed-action-btn.direction-left ul li,.fixed-action-btn.direction-right ul li{display:inline-block;margin:7.5px 15px 0 0}.fixed-action-btn.direction-right{padding:0 15px 0 0}.fixed-action-btn.direction-right ul{text-align:left;direction:rtl;left:64px;right:auto}.fixed-action-btn.direction-right ul li{margin:7.5px 0 0 15px}.fixed-action-btn.direction-bottom{padding:0 0 15px 0}.fixed-action-btn.direction-bottom ul{top:64px;bottom:auto;display:flex;flex-direction:column-reverse}.fixed-action-btn.direction-bottom ul li{margin:15px 0 0 0}.fixed-action-btn.toolbar{padding:0;height:56px}.fixed-action-btn.toolbar.active>a i{opacity:0}.fixed-action-btn.toolbar ul{display:flex;top:0;bottom:0;z-index:1}.fixed-action-btn.toolbar ul li{flex:1;display:inline-block;margin:0;height:100%;transition:none}.fixed-action-btn.toolbar ul li a{display:block;overflow:hidden;position:relative;width:100%;height:100%;background-color:rgba(0,0,0,0);box-shadow:none;color:var(--md-sys-color-on-secondary);line-height:56px;z-index:1}.fixed-action-btn.toolbar ul li a i{line-height:inherit}.fixed-action-btn ul{left:0;right:0;text-align:center;position:absolute;bottom:64px;margin:0;visibility:hidden}.fixed-action-btn ul li{margin-bottom:15px}.fixed-action-btn ul a.btn-floating{opacity:0}.fixed-action-btn .fab-backdrop{position:absolute;top:0;left:0;z-index:-1;width:40px;height:40px;background-color:var(--md-sys-color-secondary);border-radius:16px;transform:scale(0)}.btn-large{height:calc(1.5*var(--btn-height));font-size:18px;padding:0 28px}.btn-large i{font-size:1.6rem}.btn-small{height:calc(.75*var(--btn-height));font-size:13px}.btn-small i{font-size:1.2rem}.btn-block{display:block}.btn.rounded,.rounded.btn-large,.rounded.btn-small{border-radius:99999px}[popover]{outline:none;padding:0;border:none}.dropdown-content{padding-left:0;list-style-type:none;background-color:var(--md-sys-color-surface);margin:0;display:none;min-width:100px;overflow-y:auto;opacity:0;position:absolute;left:0;top:0;z-index:9999;transform-origin:0 0;user-select:none}.dropdown-content li{clear:both;color:var(--md-sys-color-on-background);cursor:pointer;min-height:50px;line-height:1.5rem;width:100%;text-align:left}.dropdown-content li.divider{min-height:0;height:1px}.dropdown-content li>a,.dropdown-content li>span{font-size:16px;color:var(--md-sys-color-primary);display:block;line-height:22px;padding:14px 16px}.dropdown-content li>span>label{top:1px;left:0;height:18px}.dropdown-content li>a>i{height:inherit;line-height:inherit;float:left;margin:0 24px 0 0;width:24px}.dropdown-content li:not(.disabled):hover,.dropdown-content li.active{background-color:color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%)}body.keyboard-focused .dropdown-content li:focus{background-color:rgba(0,0,0,.12)}.input-field.col .dropdown-content [type=checkbox]+label{top:1px;left:0;height:18px;transform:none}.dropdown-trigger{cursor:pointer}.modal{--modal-footer-height: 56px;--modal-footer-divider-height: 1px;--modal-border-radius: 28px;--modal-padding: 24px;display:none;position:fixed;left:0;right:0;background-color:var(--md-sys-color-surface);padding:0;max-height:70%;width:55%;margin:auto;overflow-y:auto;border-radius:var(--modal-border-radius);will-change:top,opacity}.modal:focus{outline:none}@media only screen and (max-width : 992.99px){.modal{width:80%}}.modal h1,.modal h2,.modal h3,.modal h4{margin-top:0}.modal .modal-content{padding:var(--modal-padding);overflow-y:hidden}.modal .modal-close{cursor:pointer}.modal .modal-footer{border-radius:0 0 var(--modal-border-radius) var(--modal-border-radius);background-color:var(--md-sys-color-surface);padding:4px 6px;height:var(--modal-footer-height);width:100%;text-align:right}.modal .modal-footer .btn,.modal .modal-footer .btn-large,.modal .modal-footer .btn-small,.modal .modal-footer .btn-flat{margin:6px 0}.modal-overlay{position:fixed;z-index:999;top:-25%;left:0;bottom:0;right:0;height:125%;width:100%;background:#000;display:none;will-change:opacity}.modal.modal-fixed-footer{padding:0;height:70%}.modal.modal-fixed-footer .modal-content{position:absolute;height:calc(100% - var(--modal-footer-height));max-height:100%;width:100%;overflow-y:auto}.modal.modal-fixed-footer .modal-footer{border-top:var(--modal-footer-divider-height) solid var(--md-sys-color-outline-variant);position:absolute;bottom:var(--modal-footer-divider-height)}.modal.bottom-sheet{top:auto;bottom:-100%;margin:0;width:100%;max-height:45%;border-radius:0;will-change:bottom,opacity}.collapsible{padding-left:0;list-style-type:none;border-top:1px solid var(--md-sys-color-outline-variant);border-right:1px solid var(--md-sys-color-outline-variant);border-left:1px solid var(--md-sys-color-outline-variant);margin:.5rem 0 1rem 0}.collapsible-header{display:flex;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);line-height:1.5;padding:1rem;border-bottom:1px solid var(--md-sys-color-outline-variant)}.collapsible-header:focus{outline:0}.collapsible-header i{width:2rem;font-size:1.6rem;display:inline-block;text-align:center;margin-right:1rem}.collapsible-header::after{content:"▾";text-align:right;margin-right:.25rem;width:100%}.active .collapsible-header::after{content:"▴"}.keyboard-focused .collapsible-header:focus{background-color:rgba(0,0,0,.12)}.collapsible-body{max-height:0;border-bottom:1px solid var(--md-sys-color-outline-variant);box-sizing:border-box;padding:0 2rem;overflow:hidden}.collapsible.popout{border:none;box-shadow:none}.collapsible.popout>li{box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);margin:0 24px;transition:margin .35s cubic-bezier(0.25, 0.46, 0.45, 0.94)}.collapsible.popout>li.active{box-shadow:0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);margin:16px 0}.chip{--font-size: 14px;--font-size-icon: 18px;--padding: 8px;color:var(--md-sys-color-on-surface-variant);background-color:rgba(0,0,0,.09);display:inline-flex;white-space:nowrap;gap:8px;margin:0;height:32px;padding-left:var(--padding);padding-right:var(--padding);font-size:var(--font-size);font-weight:500;border-radius:8px;align-items:center;user-select:none;vertical-align:top}.chip:focus{outline:none;background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.chip.outlined{background-color:rgba(0,0,0,0);border-color:var(--md-sys-color-outline);border-width:1px;border-style:solid}.chip>img{margin:0;width:24px;height:24px;object-fit:cover;border-radius:12px}.chip>.material-icons{font-size:var(--font-size-icon)}.chip .close{border-radius:50%;height:24px;width:24px;padding:0;display:grid;justify-content:center;align-content:center;cursor:pointer}.chip .close:hover{background-color:rgba(136,136,136,.5333333333)}.chips{display:flex;gap:4px;flex-wrap:wrap;border:none;border-bottom:1px solid var(--md-sys-color-on-surface-variant);box-shadow:none;margin:0 0 8px 0;padding:4px;outline:none;transition:all .3s}.chips.focus{border-bottom:1px solid var(--md-sys-color-primary);box-shadow:0 1px 0 0 var(--md-sys-color-primary)}.chips:hover{cursor:text}.chips input:not([type]):not(.browser-default).input{background:none;border:0;color:var(--md-sys-color-on-background);display:inline-block;font-size:16px;height:32px;outline:0;margin:0;padding:0;width:120px}.chips input:not([type]):not(.browser-default).input:focus{border:0;box-shadow:none}.chips .autocomplete-content{margin-top:0;margin-bottom:0}.prefix~.chips{margin-left:3rem;width:92%;width:calc(100% - 3rem)}.suffix~.chips{margin-right:3rem;width:92%;width:calc(100% - 3rem)}.chips:empty~label{font-size:.8rem;transform:translateY(-140%)}.materialboxed{display:block;cursor:zoom-in;position:relative;transition:opacity .4s;-webkit-backface-visibility:hidden}.materialboxed:hover:not(.active){opacity:.8}.materialboxed.active{cursor:zoom-out}#materialbox-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--md-sys-color-background);z-index:1000;will-change:opacity}.materialbox-caption{position:fixed;display:none;color:var(--md-sys-color-on-background);line-height:50px;bottom:0;left:0;width:100%;text-align:center;padding:0% 15%;height:50px;z-index:1000;-webkit-font-smoothing:antialiased}select:focus{outline:1px solid var(--md-ref-palette-primary80)}label{font-size:.8rem;color:var(--md-sys-color-on-surface-variant)}::placeholder{color:var(--md-sys-color-on-surface-variant)}input:not([type]):not(.browser-default),input[type=text]:not(.browser-default),input[type=password]:not(.browser-default),input[type=email]:not(.browser-default),input[type=url]:not(.browser-default),input[type=time]:not(.browser-default),input[type=date]:not(.browser-default),input[type=datetime]:not(.browser-default),input[type=datetime-local]:not(.browser-default),input[type=month]:not(.browser-default),input[type=tel]:not(.browser-default),input[type=number]:not(.browser-default),input[type=search]:not(.browser-default),textarea.materialize-textarea{outline:none;color:var(--md-sys-color-on-background);width:100%;font-size:16px;height:56px}.input-field{--input-color: var(--md-sys-color-primary);position:relative;clear:both}.input-field input,.input-field textarea{box-sizing:border-box;padding:0 16px;padding-top:20px;background-color:var(--md-sys-color-surface);border:none;border-radius:4px;border-bottom:1px solid var(--md-sys-color-on-surface-variant);border-bottom-left-radius:0;border-bottom-right-radius:0}.input-field input:focus:not([readonly]),.input-field textarea:focus:not([readonly]){border-bottom:2px solid var(--input-color);padding-top:21px}.input-field input:disabled,.input-field input[readonly=readonly],.input-field textarea:disabled,.input-field textarea[readonly=readonly]{color:rgba(var(--md_sys_color_on-surface), 0.38);border-color:rgba(var(--md_sys_color_on-surface), 0.12);background-color:rgba(var(--md_sys_color_on-surface), 0.04)}.input-field input:focus:not([readonly])+label,.input-field textarea:focus:not([readonly])+label{color:var(--input-color)}.input-field input:focus:not([readonly])+label,.input-field input:not([placeholder=" "])+label,.input-field input:not(:placeholder-shown)+label,.input-field textarea:focus:not([readonly])+label,.input-field textarea:not([placeholder=" "])+label,.input-field textarea:not(:placeholder-shown)+label{transform:scale(0.75);top:8px}.input-field input:disabled+label,.input-field input[readonly=readonly]+label,.input-field textarea:disabled+label,.input-field textarea[readonly=readonly]+label{color:rgba(var(--md_sys_color_on-surface), 0.38)}.input-field input::placeholder{user-select:none}.input-field>label{color:var(--md-sys-color-on-surface-variant);user-select:none;font-size:16px;position:absolute;left:16px;top:16px;cursor:text;transform-origin:top left;transition:left .2s ease-out,top .2s ease-out,transform .2s ease-out}.input-field .supporting-text{color:var(--md-sys-color-on-surface-variant);font-size:12px;padding:0 16px;margin-top:4px}.input-field .character-counter{color:var(--md-sys-color-on-surface-variant);font-size:12px;float:right;padding:0 16px;margin-top:4px}.input-field .prefix{position:absolute;left:12px;top:16px;user-select:none;display:flex;align-self:center}.input-field .suffix{position:absolute;right:12px;top:16px;user-select:none}.input-field .prefix~input,.input-field .prefix~textarea{padding-left:52px}.input-field .suffix~input,.input-field .suffix~textarea{padding-right:52px}.input-field .prefix~label{left:52px}.input-field.outlined input,.input-field.outlined textarea{padding-top:0;background-color:var(--md-sys-color-background);border:1px solid var(--md-sys-color-on-surface-variant);border-radius:4px}.input-field.outlined input:focus:not([readonly]),.input-field.outlined textarea:focus:not([readonly]){border:2px solid var(--input-color);padding-top:0;margin-left:-1px}.input-field.outlined input:focus:not([readonly])+label,.input-field.outlined textarea:focus:not([readonly])+label{color:var(--input-color)}.input-field.outlined input:focus:not([readonly])+label,.input-field.outlined input:not([placeholder=" "])+label,.input-field.outlined input:not(:placeholder-shown)+label,.input-field.outlined textarea:focus:not([readonly])+label,.input-field.outlined textarea:not([placeholder=" "])+label,.input-field.outlined textarea:not(:placeholder-shown)+label{top:-8px;left:16px;margin-left:-4px;padding:0 4px;background-color:var(--md-sys-color-background)}.input-field.outlined input:disabled,.input-field.outlined input[readonly=readonly],.input-field.outlined textarea:disabled,.input-field.outlined textarea[readonly=readonly]{color:rgba(var(--md_sys_color_on-surface), 0.38);border-color:rgba(var(--md_sys_color_on-surface), 0.12)}.input-field.error input,.input-field.error textarea{border-color:var(--md-sys-color-error)}.input-field.error input:focus:not([readonly]),.input-field.error textarea:focus:not([readonly]){border-color:var(--md-sys-color-error)}.input-field.error input:focus:not([readonly])+label,.input-field.error textarea:focus:not([readonly])+label{color:var(--md-sys-color-error)}.input-field.error label{color:var(--md-sys-color-error)}.input-field.error .supporting-text{color:var(--md-sys-color-error)}.input-field.error .suffix{color:var(--md-sys-color-error)}.searchbar .prefix{position:absolute;padding-left:1rem;top:0;user-select:none;display:flex;align-self:center}.searchbar>input{border-width:0;background-color:rgba(0,0,0,0);padding-left:3rem}.searchbar.has-sidebar{margin-left:0}@media only screen and (min-width : 993px){.searchbar.has-sidebar{margin-left:300px}}textarea{width:100%;height:3rem;background-color:rgba(0,0,0,0)}textarea.materialize-textarea{padding-top:26px !important;padding-bottom:4px !important;line-height:normal;overflow-y:hidden;resize:none;min-height:3rem;box-sizing:border-box}.hiddendiv{visibility:hidden;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;padding-top:1.2rem;position:absolute;top:0;z-index:-1}.autocomplete-content li .highlight{color:var(--md-sys-color-on-background)}.autocomplete-content li img{height:40px;width:40px;margin:5px 15px}[type=radio]:not(:checked),[type=radio]:checked{position:absolute;opacity:0;pointer-events:none}[type=radio]:not(:checked)+span,[type=radio]:checked+span{position:relative;padding-left:35px;cursor:pointer;display:inline-block;height:25px;line-height:25px;font-size:1rem;transition:.28s ease;user-select:none}[type=radio]+span:before,[type=radio]+span:after{content:"";position:absolute;left:0;top:0;margin:4px;width:16px;height:16px;z-index:0;transition:.28s ease}[type=radio]:not(:checked)+span:before,[type=radio]:not(:checked)+span:after,[type=radio]:checked+span:before,[type=radio]:checked+span:after,[type=radio].with-gap:checked+span:before,[type=radio].with-gap:checked+span:after{border-radius:50%}[type=radio]:not(:checked)+span:before,[type=radio]:not(:checked)+span:after{border:2px solid var(--md-sys-color-on-surface-variant)}[type=radio]:not(:checked)+span:after{transform:scale(0)}[type=radio]:checked+span:before{border:2px solid rgba(0,0,0,0)}[type=radio]:checked+span:after,[type=radio].with-gap:checked+span:before,[type=radio].with-gap:checked+span:after{border:2px solid var(--md-sys-color-primary)}[type=radio]:checked+span:after,[type=radio].with-gap:checked+span:after{background-color:var(--md-sys-color-primary)}[type=radio]:checked+span:after{transform:scale(1.02)}[type=radio].with-gap:checked+span:after{transform:scale(0.5)}[type=radio].tabbed:focus+span:before{box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18)}[type=radio].with-gap:disabled:checked+span:before{border:2px solid var(--md-sys-color-on-surface)}[type=radio].with-gap:disabled:checked+span:after{border:none;background-color:var(--md-sys-color-on-surface)}[type=radio]:disabled:not(:checked)+span:before,[type=radio]:disabled:checked+span:before{background-color:rgba(0,0,0,0);border-color:var(--md-sys-color-on-surface)}[type=radio]:disabled+span{color:var(--md-sys-color-on-surface)}[type=radio]:disabled:not(:checked)+span:before{border-color:var(--md-sys-color-on-surface)}[type=radio]:disabled:checked+span:after{background-color:var(--md-sys-color-on-surface);border-color:var(--md-sys-color-on-surface)}[type=checkbox]:not(:checked),[type=checkbox]:checked{position:absolute;opacity:0;pointer-events:none}[type=checkbox]+span:not(.lever){position:relative;padding-left:35px;cursor:pointer;display:inline-block;height:25px;line-height:25px;font-size:1rem;user-select:none}[type=checkbox]+span:not(.lever):before,[type=checkbox]:not(.filled-in)+span:not(.lever):after{content:"";position:absolute;top:0;left:0;width:18px;height:18px;z-index:0;border:2px solid var(--md-sys-color-on-surface-variant);border-radius:1px;margin-top:3px;transition:.2s}[type=checkbox]:not(.filled-in)+span:not(.lever):after{border:0;transform:scale(0)}[type=checkbox]:not(:checked):disabled+span:not(.lever):before{border:none;background-color:var(--md-sys-color-on-surface)}[type=checkbox].tabbed:focus+span:not(.lever):after{transform:scale(1);border:0;border-radius:50%;box-shadow:0 0 0 10px rgba(0,0,0,.12);background-color:rgba(0,0,0,.12)}[type=checkbox]:checked+span:not(.lever):before{top:-4px;left:-5px;width:12px;height:22px;border-top:2px solid rgba(0,0,0,0);border-left:2px solid rgba(0,0,0,0);border-right:2px solid var(--md-sys-color-primary);border-bottom:2px solid var(--md-sys-color-primary);transform:rotate(40deg);backface-visibility:hidden;transform-origin:100% 100%}[type=checkbox]:checked:disabled+span:before{border-right:2px solid var(--md-sys-color-on-surface);border-bottom:2px solid var(--md-sys-color-on-surface)}[type=checkbox]:indeterminate+span:not(.lever):before{top:-11px;left:-12px;width:10px;height:22px;border-top:none;border-left:none;border-right:2px solid var(--md-sys-color-primary);border-bottom:none;transform:rotate(90deg);backface-visibility:hidden;transform-origin:100% 100%}[type=checkbox]:indeterminate:disabled+span:not(.lever):before{border-right:2px solid var(--md-sys-color-on-surface);background-color:rgba(0,0,0,0)}[type=checkbox].filled-in+span:not(.lever):after{border-radius:2px}[type=checkbox].filled-in+span:not(.lever):before,[type=checkbox].filled-in+span:not(.lever):after{content:"";left:0;position:absolute;transition:border .25s,background-color .25s,width .2s .1s,height .2s .1s,top .2s .1s,left .2s .1s;z-index:1}[type=checkbox].filled-in:not(:checked)+span:not(.lever):before{width:0;height:0;border:3px solid rgba(0,0,0,0);left:6px;top:10px;transform:rotateZ(37deg);transform-origin:100% 100%}[type=checkbox].filled-in:not(:checked)+span:not(.lever):after{height:20px;width:20px;background-color:rgba(0,0,0,0);border:2px solid var(--md-sys-color-on-surface-variant);top:0px;z-index:0}[type=checkbox].filled-in:checked+span:not(.lever):before{top:0;left:1px;width:8px;height:13px;border-top:2px solid rgba(0,0,0,0);border-left:2px solid rgba(0,0,0,0);border-right:2px solid var(--md-sys-color-on-primary);border-bottom:2px solid var(--md-sys-color-on-primary);transform:rotateZ(37deg);transform-origin:100% 100%}[type=checkbox].filled-in:checked+span:not(.lever):after{top:0;width:20px;height:20px;border:2px solid var(--md-sys-color-primary);background-color:var(--md-sys-color-primary);z-index:0}[type=checkbox].filled-in.tabbed:focus+span:not(.lever):after{border-radius:2px;border-color:var(--md-sys-color-on-surface-variant) r;background-color:rgba(0,0,0,.12)}[type=checkbox].filled-in.tabbed:checked:focus+span:not(.lever):after{border-radius:2px;background-color:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary)}[type=checkbox].filled-in:disabled:not(:checked)+span:not(.lever):before{background-color:rgba(0,0,0,0);border:2px solid rgba(0,0,0,0)}[type=checkbox].filled-in:disabled:not(:checked)+span:not(.lever):after{border-color:rgba(0,0,0,0);background-color:var(--md-sys-color-on-surface)}[type=checkbox].filled-in:disabled:checked+span:not(.lever):before{background-color:rgba(0,0,0,0)}[type=checkbox].filled-in:disabled:checked+span:not(.lever):after{background-color:var(--md-sys-color-on-surface);border-color:var(--md-sys-color-on-surface)}.switch{--track-height: 32px;--track-width: 52px;--border-width: 2px;--size-off: 16px;--size-on: 24px;--icon-size: 16px;--gap-on: calc(((var(--track-height) - var(--size-on)) / 2) - var(--border-width));--gap-off: calc(((var(--track-height) - var(--size-off)) / 2) - var(--border-width))}.switch,.switch *{-webkit-tap-highlight-color:rgba(0,0,0,0);user-select:none}.switch label{cursor:pointer}.switch label input[type=checkbox]{opacity:0;width:0;height:0}.switch label input[type=checkbox]:checked+.lever{background-color:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary)}.switch label input[type=checkbox]:checked+.lever:before,.switch label input[type=checkbox]:checked+.lever:after{top:var(--gap-on);left:calc(var(--track-width) - var(--size-on) - var(--gap-on) - 2*var(--border-width));width:var(--size-on);height:var(--size-on)}.switch label .lever{content:"";display:inline-block;position:relative;width:var(--track-width);height:var(--track-height);border-style:solid;border-width:2px;border-color:var(--md-sys-color-outline);background-color:var(--md-sys-color-surface-variant);border-radius:15px;margin-right:10px;transition:background .3s ease;vertical-align:middle;margin:0 16px}.switch label .lever:before,.switch label .lever:after{content:"";position:absolute;display:inline-block;width:var(--size-off);height:var(--size-off);border-radius:50%;left:var(--gap-off);top:var(--gap-off);transition:left .3s ease,background .3s ease,box-shadow .1s ease,transform .1s ease}.switch label .lever:after{height:var(--size-off);width:var(--size-off)}input[type=checkbox]:not(:disabled)~.lever:active:before,input[type=checkbox]:not(:disabled).tabbed:focus~.lever::before,input[type=checkbox]:not(:disabled)~.lever:hover::before{transform:scale(2.4)}input[type=checkbox]:checked:not(:disabled)~.lever:hover::before{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}input[type=checkbox]:checked:not(:disabled)~.lever:active::before,input[type=checkbox]:checked:not(:disabled).tabbed:focus~.lever::before{background-color:rgba(var(--md-sys-color-primary-numeric), 0.18)}input[type=checkbox]:not(:disabled)~.lever:hover::before{background-color:rgba(0,0,0,.04)}input[type=checkbox]:not(:disabled)~.lever:active:before,input[type=checkbox]:not(:disabled).tabbed:focus~.lever::before{background-color:rgba(0,0,0,.12)}.switch input[type=checkbox][disabled]+.lever{cursor:default;opacity:.5}select.browser-default{opacity:1;color:var(--md-sys-color-on-background)}select{opacity:0;background-color:var(--md-sys-color-surface);width:100%;padding:5px;border:1px solid var(--md-sys-color-outline-variant);border-radius:2px;height:3rem}.select-wrapper{position:relative}.select-wrapper .caret{position:absolute;right:0;top:0;bottom:0;margin:auto 0;z-index:0;fill:var(--md-sys-color-on-background)}.select-wrapper .hide-select{width:0;height:0;overflow:hidden;position:absolute;top:0;z-index:-1}select:disabled{color:var(--md-sys-color-on-surface)}.select-wrapper.disabled+label{color:var(--md-sys-color-on-surface)}.select-wrapper.disabled .caret{fill:var(--md-sys-color-on-surface)}.select-wrapper input.select-dropdown:disabled{color:var(--md-sys-color-on-surface);cursor:default;user-select:none}.select-wrapper i{color:var(--md-sys-color-on-surface)}.select-dropdown li.disabled,.select-dropdown li.disabled>span,.select-dropdown li.optgroup{color:var(--md-sys-color-on-surface)}.select-dropdown li img{height:40px;width:40px;margin:5px 15px;float:right}.select-dropdown li.optgroup{border-top:1px solid rgba(0,0,0,.04)}.select-dropdown li.optgroup.selected>span{color:var(--md-sys-color-on-background)}.select-dropdown li.optgroup>span{color:var(--md-sys-color-on-surface-variant)}.select-dropdown li.optgroup~li.optgroup-option{padding-left:1rem}.file-field{display:grid;grid-template-columns:min-content auto;gap:10px}.file-field .file-path-wrapper{overflow:hidden}.file-field input.file-path{width:100%}.file-field .btn,.file-field .btn-large,.file-field .btn-small{height:3rem;line-height:3rem}.file-field span{cursor:pointer}.file-field input[type=file]{position:absolute;top:0;right:0;left:0;bottom:0;cursor:pointer;width:100%;margin:0;padding:0;opacity:0;font-size:20px;filter:alpha(opacity=0)}.file-field input[type=file]::-webkit-file-upload-button{display:none}.range-field{position:relative}input[type=range],input[type=range]+.thumb{cursor:pointer}input[type=range]{position:relative;background-color:rgba(0,0,0,0);border:none;outline:none;width:100%;margin:15px 0;padding:0}input[type=range]:focus{outline:none}input[type=range]+.thumb{position:absolute;top:10px;left:0;border:none;height:0;width:0;border-radius:50%;background-color:var(--md-sys-color-primary);margin-left:7px;transform-origin:50% 50%;transform:rotate(-45deg)}input[type=range]+.thumb .value{display:block;width:30px;text-align:center;color:var(--md-sys-color-primary);font-size:0;transform:rotate(45deg)}input[type=range]+.thumb.active{border-radius:50% 50% 50% 0}input[type=range]+.thumb.active .value{color:var(--md-sys-color-on-primary);margin-left:-1px;margin-top:8px;font-size:10px}input[type=range]{-webkit-appearance:none}input[type=range]::-webkit-slider-runnable-track{height:3px;border:none}input[type=range]::-webkit-slider-thumb{border:none;height:14px;width:14px;border-radius:50%;background:var(--md-sys-color-primary);transition:box-shadow .3s;-webkit-appearance:none;background-color:var(--md-sys-color-primary);transform-origin:50% 50%;margin:-5px 0 0 0}.keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18)}input[type=range]::-moz-range-track{height:3px;border:none}input[type=range]::-moz-focus-inner{border:0}input[type=range]::-moz-range-thumb{border:none;height:14px;width:14px;border-radius:50%;background:var(--md-sys-color-primary);transition:box-shadow .3s;margin-top:-5px}input[type=range]:-moz-focusring{outline:1px solid #fff;outline-offset:-1px}.keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb{box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18)}input[type=range]::-ms-track{height:3px;background:rgba(0,0,0,0);border-color:rgba(0,0,0,0);border-width:6px 0;color:rgba(0,0,0,0)}input[type=range]::-ms-fill-lower,input[type=range]::-moz-range-progress{background:var(--md-sys-color-primary)}input[type=range]::-ms-fill-upper,input[type=range]::-moz-range-track{background:var(--md-sys-color-shadow-light)}input[type=range]::-ms-thumb{border:none;height:14px;width:14px;border-radius:50%;background:var(--md-sys-color-primary);transition:box-shadow .3s}.keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb{box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18)}.table-of-contents{list-style:none}.table-of-contents.fixed{position:fixed}.table-of-contents li{padding:0}.table-of-contents a{display:inline-block;font-weight:400;color:var(--md-sys-color-secondary);padding-left:16px;height:2rem;line-height:2rem;border-left:1px solid var(--md-sys-color-outline-variant)}.table-of-contents a:hover{color:var(--md-sys-color-on-background);padding-left:15px}.table-of-contents a.active{color:var(--md-sys-color-primary);font-weight:500;padding-left:14px;border-left:2px solid var(--md-sys-color-primary)}.sidenav{--sidenav-width: 300px;--sidenav-font-size: 14px;--sidenav-padding: 16px;--sidenav-item-height: 48px;--sidenav-line-height: var(--sidenav-item-height);position:fixed;width:var(--sidenav-width);left:0;top:0;margin:0;transform:translateX(-100%);height:100vh;padding:0;z-index:999;overflow-y:auto;will-change:transform;backface-visibility:hidden;transform:translateX(-105%);user-select:none;color:var(--md-sys-color-on-secondary-container);background-color:var(--md-sys-color-surface)}.sidenav.right-aligned{right:0;transform:translateX(105%);left:auto;transform:translateX(100%)}.sidenav .collapsible{margin:0}.sidenav a:focus{background-color:rgba(0,0,0,.12)}.sidenav li.active>a:not(.collapsible-header):not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating){background-color:color-mix(in srgb, var(--md-sys-color-secondary) 10%, transparent)}.sidenav .collapsible-body>ul{padding-left:10px}.sidenav li{list-style:none;display:grid;align-content:center}.sidenav li>a{margin:0 12px;padding:0 var(--sidenav-padding);display:flex;height:var(--sidenav-item-height);font-size:var(--sidenav-font-size);font-weight:500;align-items:center;overflow:hidden;border-radius:100px}.sidenav li>a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating){color:var(--md-sys-color-on-secondary-container)}.sidenav li>a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating):hover{background-color:color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)}.sidenav li>a.btn,.sidenav li>a.btn-small,.sidenav li>a.btn-large,.sidenav li>a.btn-flat,.sidenav li>a.btn-floating{margin:10px 15px}.sidenav li>a>.material-icons,.sidenav li>a>.material-symbols-outlined,.sidenav li>a>.material-symbols-rounded,.sidenav li>a>.material-symbols-sharp{display:inline-flex;vertical-align:middle;margin-right:12px}.sidenav .divider{margin:calc(var(--sidenav-padding)*.5) 0 0 0}.sidenav .subheader{cursor:initial;pointer-events:none;color:red;font-size:var(--sidenav-font-size);font-weight:500;line-height:var(--sidenav-line-height)}.sidenav .user-view{position:relative;padding:calc(var(--sidenav-padding)*2) calc(var(--sidenav-padding)*2) 0;margin-bottom:calc(var(--sidenav-padding)*.5)}.sidenav .user-view>a{height:auto;padding:0}.sidenav .user-view>a:hover{background-color:rgba(0,0,0,0)}.sidenav .user-view .background{overflow:hidden;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}.sidenav .user-view .circle,.sidenav .user-view .name,.sidenav .user-view .email{display:block}.sidenav .user-view .circle{height:64px;width:64px}.sidenav .user-view .name,.sidenav .user-view .email{font-size:var(--sidenav-font-size);line-height:calc(var(--sidenav-line-height)*.5)}.sidenav .user-view .name{margin-top:16px;font-weight:500}.sidenav .user-view .email{padding-bottom:16px;font-weight:400}.drag-target{height:100%;position:fixed;top:0;left:0;z-index:998}.drag-target.right-aligned{right:0}.sidenav.sidenav-fixed{left:0;transform:translateX(0);position:fixed}.sidenav.sidenav-fixed.right-aligned{right:0;left:auto}@media only screen and (max-width : 992.99px){.sidenav.sidenav-fixed{transform:translateX(-105%)}.sidenav.sidenav-fixed.right-aligned{transform:translateX(105%)}.sidenav>a{padding:0 var(--sidenav-padding)}.sidenav .user-view{padding:var(--sidenav-padding) var(--sidenav-padding) 0}}.sidenav .collapsible-body{padding:0}.sidenav-overlay{position:fixed;top:0;left:0;right:0;opacity:0;height:120vh;background-color:rgba(0,0,0,.5);z-index:997;display:none}.sidenav .collapsible,.sidenav.sidenav-fixed .collapsible{border:none;box-shadow:none}.sidenav .collapsible-header,.sidenav.sidenav-fixed .collapsible-header{border:none}.sidenav .collapsible-body,.sidenav.sidenav-fixed .collapsible-body{border:none}.progress{position:relative;height:4px;display:block;width:100%;border-radius:4px;margin:.5rem 0 1rem 0;overflow:hidden;background-color:var(--md-sys-color-secondary-container)}.progress .determinate{position:absolute;top:0;left:0;bottom:0;background-color:var(--md-sys-color-primary);transition:width .3s linear}.progress .indeterminate{background-color:var(--md-sys-color-primary)}.progress .indeterminate:before{content:"";position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left,right;animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite}.progress .indeterminate:after{content:"";position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left,right;animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;animation-delay:1.15s}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}.preloader-wrapper{display:inline-block;position:relative;width:50px;height:50px}.preloader-wrapper.small{width:36px;height:36px}.preloader-wrapper.big{width:64px;height:64px}.preloader-wrapper.active{-webkit-animation:container-rotate 1568ms linear infinite;animation:container-rotate 1568ms linear infinite}@-webkit-keyframes container-rotate{to{-webkit-transform:rotate(360deg)}}@keyframes container-rotate{to{transform:rotate(360deg)}}.spinner-layer{position:absolute;width:100%;height:100%;opacity:0;border-color:var(--md-sys-color-primary)}.spinner-blue,.spinner-blue-only{border-color:#4285f4}.spinner-red,.spinner-red-only{border-color:#db4437}.spinner-yellow,.spinner-yellow-only{border-color:#f4b400}.spinner-green,.spinner-green-only{border-color:#0f9d58}.active .spinner-layer.spinner-blue{-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer.spinner-red{-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer.spinner-yellow{-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer.spinner-green{-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer,.active .spinner-layer.spinner-blue-only,.active .spinner-layer.spinner-red-only,.active .spinner-layer.spinner-yellow-only,.active .spinner-layer.spinner-green-only{opacity:1;-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}@-webkit-keyframes fill-unfill-rotate{12.5%{-webkit-transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg)}to{-webkit-transform:rotate(1080deg)}}@keyframes fill-unfill-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@-webkit-keyframes blue-fade-in-out{from{opacity:1}25%{opacity:1}26%{opacity:0}89%{opacity:0}90%{opacity:1}100%{opacity:1}}@keyframes blue-fade-in-out{from{opacity:1}25%{opacity:1}26%{opacity:0}89%{opacity:0}90%{opacity:1}100%{opacity:1}}@-webkit-keyframes red-fade-in-out{from{opacity:0}15%{opacity:0}25%{opacity:1}50%{opacity:1}51%{opacity:0}}@keyframes red-fade-in-out{from{opacity:0}15%{opacity:0}25%{opacity:1}50%{opacity:1}51%{opacity:0}}@-webkit-keyframes yellow-fade-in-out{from{opacity:0}40%{opacity:0}50%{opacity:1}75%{opacity:1}76%{opacity:0}}@keyframes yellow-fade-in-out{from{opacity:0}40%{opacity:0}50%{opacity:1}75%{opacity:1}76%{opacity:0}}@-webkit-keyframes green-fade-in-out{from{opacity:0}65%{opacity:0}75%{opacity:1}90%{opacity:1}100%{opacity:0}}@keyframes green-fade-in-out{from{opacity:0}65%{opacity:0}75%{opacity:1}90%{opacity:1}100%{opacity:0}}.gap-patch{position:absolute;top:0;left:45%;width:10%;height:100%;overflow:hidden;border-color:inherit}.gap-patch .circle{width:1000%;left:-450%}.circle-clipper{display:inline-block;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit}.circle-clipper .circle{width:200%;height:100%;border-width:3px;border-style:solid;border-color:inherit;border-bottom-color:rgba(0,0,0,0) !important;border-radius:50%;-webkit-animation:none;animation:none;position:absolute;top:0;right:0;bottom:0}.circle-clipper.left .circle{left:0;border-right-color:rgba(0,0,0,0) !important;-webkit-transform:rotate(129deg);transform:rotate(129deg)}.circle-clipper.right .circle{left:-100%;border-left-color:rgba(0,0,0,0) !important;-webkit-transform:rotate(-129deg);transform:rotate(-129deg)}.active .circle-clipper.left .circle{-webkit-animation:left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .circle-clipper.right .circle{-webkit-animation:right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}@-webkit-keyframes left-spin{from{-webkit-transform:rotate(130deg)}50%{-webkit-transform:rotate(-5deg)}to{-webkit-transform:rotate(130deg)}}@keyframes left-spin{from{transform:rotate(130deg)}50%{transform:rotate(-5deg)}to{transform:rotate(130deg)}}@-webkit-keyframes right-spin{from{-webkit-transform:rotate(-130deg)}50%{-webkit-transform:rotate(5deg)}to{-webkit-transform:rotate(-130deg)}}@keyframes right-spin{from{transform:rotate(-130deg)}50%{transform:rotate(5deg)}to{transform:rotate(-130deg)}}#spinnerContainer.cooldown{-webkit-animation:container-rotate 1568ms linear infinite,fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);animation:container-rotate 1568ms linear infinite,fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1)}@-webkit-keyframes fade-out{from{opacity:1}to{opacity:0}}@keyframes fade-out{from{opacity:1}to{opacity:0}}.slider{position:relative;height:400px;width:100%}.slider.fullscreen{height:100%;width:100%;position:absolute;top:0;left:0;right:0;bottom:0}.slider.fullscreen ul.slides{padding-left:0;list-style-type:none;height:100%}.slider.fullscreen ul.indicators{padding-left:0;list-style-type:none;z-index:2;bottom:30px}.slider.fullscreen ul.indicators .indicator-item{background-color:rgba(255,255,255,.45)}.slider.fullscreen ul.indicators .indicator-item.active{background-color:var(--md-ref-palette-primary100)}.slider .slides{background-color:var(--md-sys-color-surface);margin:0;height:400px;padding-left:0;list-style-type:none}.slider .slides li{padding-left:0;list-style-type:none;opacity:0;position:absolute;top:0;left:0;z-index:1;width:100%;height:inherit;overflow:hidden}.slider .slides li img{height:100%;width:100%;background-size:cover;background-position:center}.slider .slides li .caption{color:#fff;position:absolute;top:15%;left:15%;width:70%;opacity:0}.slider .slides li .caption p{color:rgba(255,255,255,.75)}.slider .slides li.active{z-index:2}.slider .indicators{padding-left:0;list-style-type:none;position:absolute;text-align:center;left:0;right:0;bottom:0;margin:0}.slider .indicators .indicator-item{display:inline-block;position:relative;height:16px;width:16px;margin:0 12px}.slider .indicators .indicator-item-btn{position:absolute;top:0;left:0;cursor:pointer;background-color:var(--md-sys-color-shadow-light);transition:background-color .3s;border-radius:50%;border-width:0;width:100%;height:100%}.slider .indicators .indicator-item-btn.active{background-color:var(--md-sys-color-primary)}.carousel{--carousel-height: 400px;overflow:hidden;position:relative;width:100%;height:var(--carousel-height);perspective:500px;transform-style:preserve-3d;transform-origin:0% 50%}.carousel.carousel-slider{top:0;left:0}.carousel.carousel-slider .carousel-fixed-item{position:absolute;left:0;right:0;bottom:20px;z-index:1}.carousel.carousel-slider .carousel-fixed-item.with-indicators{bottom:68px}.carousel.carousel-slider .carousel-item{width:100%;height:100%;min-height:var(--carousel-height);position:absolute;top:0;left:0}.carousel.carousel-slider .carousel-item h2{font-size:24px;font-weight:500;line-height:32px}.carousel.carousel-slider .carousel-item p{font-size:15px}.carousel .carousel-item{visibility:hidden;width:calc(var(--carousel-height)*.5);height:calc(var(--carousel-height)*.5);position:absolute;top:0;left:0}.carousel .carousel-item>img{width:100%}.carousel .indicators{padding-left:0;list-style-type:none;position:absolute;text-align:center;left:0;right:0;bottom:0;margin:0}.carousel .indicators .indicator-item{display:inline-block;position:relative;cursor:pointer;height:8px;width:8px;margin:24px 4px;background-color:rgba(255,255,255,.45);transition:background-color .3s;border-radius:50%}.carousel .indicators .indicator-item.active{background-color:var(--md-ref-palette-primary100)}.carousel.scrolling .carousel-item .materialboxed,.carousel .carousel-item:not(.active) .materialboxed{pointer-events:none}.tap-target-wrapper{width:800px;height:800px;position:fixed;z-index:1000;visibility:hidden;transition:visibility 0s .3s}.tap-target-wrapper.open{visibility:visible;transition:visibility 0s}.tap-target-wrapper.open .tap-target{transform:scale(1);opacity:.95;transition:transform .3s cubic-bezier(0.42, 0, 0.58, 1),opacity .3s cubic-bezier(0.42, 0, 0.58, 1)}.tap-target-wrapper.open .tap-target-wave::before{transform:scale(1)}.tap-target-wrapper.open .tap-target-wave::after{visibility:visible;animation:pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;transition:opacity .3s,transform .3s,visibility 0s 1s}.tap-target{position:absolute;font-size:1rem;border-radius:50%;background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);box-shadow:0 20px 20px 0 rgba(0,0,0,.14),0 10px 50px 0 rgba(0,0,0,.12),0 30px 10px -20px rgba(0,0,0,.2);width:100%;height:100%;opacity:0;transform:scale(0);transition:transform .3s cubic-bezier(0.42, 0, 0.58, 1),opacity .3s cubic-bezier(0.42, 0, 0.58, 1)}.tap-target-content{position:relative;display:table-cell}.tap-target-wave{position:absolute;border-radius:50%;z-index:10001}.tap-target-wave::before,.tap-target-wave::after{content:"";display:block;position:absolute;width:100%;height:100%;border-radius:50%;background-color:var(--md-sys-color-surface)}.tap-target-wave::before{transform:scale(0);transition:transform .3s}.tap-target-wave::after{visibility:hidden;transition:opacity .3s,transform .3s,visibility 0s;z-index:-1}.tap-target-origin{top:50%;left:50%;transform:translate(-50%, -50%);z-index:10002;position:absolute !important}.tap-target-origin:not(.btn):not(.btn-large):not(.btn-small),.tap-target-origin:not(.btn):not(.btn-large):not(.btn-small):hover{background:none}@media only screen and (max-width: 600px){.tap-target,.tap-target-wrapper{width:600px;height:600px}}.pulse{overflow:visible;position:relative}.pulse::before{content:"";display:block;position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;background-color:inherit;border-radius:inherit;transition:opacity .3s,transform .3s;animation:pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;z-index:-1}@keyframes pulse-animation{0%{opacity:1;transform:scale(1)}50%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}.datepicker-modal{max-width:325px;min-width:300px;max-height:none}.datepicker-container.modal-content{display:flex;flex-direction:column;padding:0;background-color:var(--md-sys-color-surface)}.datepicker-controls{display:flex;justify-content:space-between;width:280px;margin:0 auto}.datepicker-controls .selects-container{display:flex}.datepicker-controls .select-wrapper input{border-bottom:none;text-align:center;margin:0}.datepicker-controls .select-wrapper input:focus{border-bottom:none}.datepicker-controls .select-wrapper .caret{display:none}.datepicker-controls .select-year input{width:50px}.datepicker-controls .select-month input{width:80px}.datepicker-controls .month-prev,.datepicker-controls .month-next{display:inline-flex;align-items:center}.datepicker-controls .month-prev>svg,.datepicker-controls .month-next>svg{fill:var(--md-sys-color-on-surface-variant)}.month-prev,.month-next{margin-top:4px;cursor:pointer;background-color:rgba(0,0,0,0);border:none}.datepicker-date-display{flex:1 auto;background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);padding:20px 22px;font-weight:500}.datepicker-date-display .year-text{display:block;font-size:1.5rem;line-height:25px;color:var(--md-sys-color-on-primary)}.datepicker-date-display .date-text{display:block;font-size:2.8rem;line-height:47px;font-weight:500}.datepicker-calendar-container{flex:2.5 auto}.datepicker-table{width:280px;font-size:1rem;margin:0 auto}.datepicker-table thead{border-bottom:none}.datepicker-table th{padding:10px 5px;text-align:center}.datepicker-table tr{border:none}.datepicker-table abbr{text-decoration:none;color:var(--md-sys-color-on-surface-variant)}.datepicker-table td{color:var(--md-sys-color-on-background);border-radius:50%;padding:0}.datepicker-table td.is-today{color:var(--md-sys-color-primary)}.datepicker-table td.is-selected{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.datepicker-table td.is-outside-current-month,.datepicker-table td.is-disabled{color:var(--md-sys-color-on-surface);pointer-events:none}.datepicker-day-button{background-color:rgba(0,0,0,0);border:none;line-height:38px;display:block;width:100%;border-radius:50%;padding:0 5px;cursor:pointer;color:inherit}.datepicker-day-button:hover{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.datepicker-day-button:focus{background-color:rgba(var(--md-sys-color-primary-numeric), 0.18)}.datepicker-footer{width:280px;margin:0 auto;padding-bottom:5px;display:flex;justify-content:space-between}.datepicker-cancel,.datepicker-clear,.datepicker-today,.datepicker-done{color:var(--md-sys-color-primary);padding:0 1rem}.datepicker-clear{color:var(--md-sys-color-error)}@media only screen and (min-width : 601px){.datepicker-modal{max-width:625px}.datepicker-container.modal-content{flex-direction:row}.datepicker-date-display{flex:0 1 270px}.datepicker-controls,.datepicker-table,.datepicker-footer{width:320px}.datepicker-day-button{line-height:44px}}.timepicker-modal{max-width:325px;max-height:none}.timepicker-container.modal-content{display:flex;flex-direction:column;padding:0}.text-primary{color:var(--md-sys-color-on-primary)}.timepicker-digital-display{width:200px;flex:1 auto;background-color:var(--md-sys-color-primary);padding:10px;font-weight:300}.timepicker-text-container{font-size:4rem;font-weight:bold;text-align:center;color:var(--font-on-primary-color-medium);font-weight:400;position:relative;user-select:none}.timepicker-text-container input[type=text]{height:4rem;color:rgba(255,255,255,.6);border-bottom:0px;font-size:4rem;direction:ltr}.timepicker-input-hours,.timepicker-input-minutes,.timepicker-span-am-pm div{cursor:pointer}input[type=text].timepicker-input-hours{text-align:right;width:28%;margin-right:3px}input[type=text].timepicker-input-minutes{width:33%;margin-left:3px}input[type=text].text-primary{color:#fff}.timepicker-display-am-pm{font-size:1.3rem;position:absolute;right:1rem;bottom:1rem;font-weight:400}.timepicker-analog-display{flex:2.5 auto;background-color:var(--md-sys-color-surface)}.timepicker-plate{background-color:rgba(0,0,0,.09);border-radius:50%;width:270px;height:270px;overflow:visible;position:relative;margin:auto;margin-top:25px;margin-bottom:5px;user-select:none}.timepicker-canvas,.timepicker-dial{position:absolute;left:0;right:0;top:0;bottom:0}.timepicker-minutes{visibility:hidden}.timepicker-tick{border-radius:50%;color:var(--md-sys-color-on-background);line-height:40px;text-align:center;width:40px;height:40px;position:absolute;cursor:pointer;font-size:15px}.timepicker-tick.active,.timepicker-tick:hover{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.timepicker-dial{transition:transform 350ms,opacity 350ms}.timepicker-dial-out{opacity:0}.timepicker-dial-out.timepicker-hours{transform:scale(1.1, 1.1)}.timepicker-dial-out.timepicker-minutes{transform:scale(0.8, 0.8)}.timepicker-canvas{transition:opacity 175ms}.timepicker-canvas line{stroke:var(--md-sys-color-primary);stroke-width:4;stroke-linecap:round}.timepicker-canvas-out{opacity:.25}.timepicker-canvas-bearing{stroke:none;fill:var(--md-sys-color-primary)}.timepicker-canvas-bg{stroke:none;fill:var(--md-sys-color-primary)}.timepicker-footer{margin:0 auto;padding:5px 1rem;display:flex;justify-content:space-between}.timepicker-clear{color:var(--md-sys-color-error)}.timepicker-close{color:var(--md-sys-color-primary)}.timepicker-clear,.timepicker-close{padding:0 20px}@media only screen and (min-width : 601px){.timepicker-modal{max-width:600px}.timepicker-container.modal-content{flex-direction:row}.timepicker-text-container{top:32%}.timepicker-display-am-pm{position:relative;right:auto;bottom:auto;text-align:center;margin-top:1.2rem}} + +/*# sourceMappingURL=materialize.min.css.map */ \ No newline at end of file diff --git a/dist/css/materialize.min.css.map b/dist/css/materialize.min.css.map new file mode 100644 index 0000000000..512eb1c495 --- /dev/null +++ b/dist/css/materialize.min.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["file:///Users/wuda/Projects/materialize/sass/components/tokens.module.scss","file:///Users/wuda/Projects/materialize/sass/components/theme.module.scss","file:///Users/wuda/Projects/materialize/sass/components/colors.module.scss","file:///Users/wuda/Projects/materialize/sass/components/typography.module.scss","file:///Users/wuda/Projects/materialize/sass/components/_color-classes.scss","file:///Users/wuda/Projects/materialize/sass/components/_normalize.scss","file:///Users/wuda/Projects/materialize/sass/components/_global.scss","file:///Users/wuda/Projects/materialize/sass/components/_variables.scss","file:///Users/wuda/Projects/materialize/sass/components/_collection.scss","file:///Users/wuda/Projects/materialize/sass/components/_badges.scss","file:///Users/wuda/Projects/materialize/sass/components/_icons-material-design.scss","file:///Users/wuda/Projects/materialize/sass/components/_grid.scss","file:///Users/wuda/Projects/materialize/sass/components/_navbar.scss","file:///Users/wuda/Projects/materialize/sass/components/_typography.scss","file:///Users/wuda/Projects/materialize/sass/components/_transitions.scss","file:///Users/wuda/Projects/materialize/sass/components/_cards.scss","file:///Users/wuda/Projects/materialize/sass/components/_toast.scss","file:///Users/wuda/Projects/materialize/sass/components/_tabs.scss","file:///Users/wuda/Projects/materialize/sass/components/_tooltip.scss","file:///Users/wuda/Projects/materialize/sass/components/_buttons.scss","file:///Users/wuda/Projects/materialize/sass/components/_dropdown.scss","file:///Users/wuda/Projects/materialize/sass/components/_modal.scss","file:///Users/wuda/Projects/materialize/sass/components/_collapsible.scss","file:///Users/wuda/Projects/materialize/sass/components/_chips.scss","file:///Users/wuda/Projects/materialize/sass/components/_materialbox.scss","file:///Users/wuda/Projects/materialize/sass/components/forms/_forms.scss","file:///Users/wuda/Projects/materialize/sass/components/forms/_input-fields.scss","file:///Users/wuda/Projects/materialize/sass/components/forms/_radio-buttons.scss","file:///Users/wuda/Projects/materialize/sass/components/forms/_checkboxes.scss","file:///Users/wuda/Projects/materialize/sass/components/forms/_switches.scss","file:///Users/wuda/Projects/materialize/sass/components/forms/_select.scss","file:///Users/wuda/Projects/materialize/sass/components/forms/_file-input.scss","file:///Users/wuda/Projects/materialize/sass/components/forms/_range.scss","file:///Users/wuda/Projects/materialize/sass/components/_table_of_contents.scss","file:///Users/wuda/Projects/materialize/sass/components/_sidenav.scss","file:///Users/wuda/Projects/materialize/sass/components/_preloader.scss","file:///Users/wuda/Projects/materialize/sass/components/_slider.scss","file:///Users/wuda/Projects/materialize/sass/components/_carousel.scss","file:///Users/wuda/Projects/materialize/sass/components/_tapTarget.scss","file:///Users/wuda/Projects/materialize/sass/components/_pulse.scss","file:///Users/wuda/Projects/materialize/sass/components/_datepicker.scss","file:///Users/wuda/Projects/materialize/sass/components/_timepicker.scss"],"names":[],"mappings":"CAAA,MACE,qBAEA,mCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,qCAEA,qCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,uCAEA,oCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,sCAEA,mCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,qCAEA,2CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,6CAEA,iCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,mCAEA,sCACA,yCACA,gDACA,mDACA,wCACA,2CACA,kDACA,qDACA,uCACA,0CACA,iDACA,oDACA,oCACA,8CACA,uCACA,iDACA,yCACA,4CACA,sCACA,yCACA,8CACA,iDACA,sCACA,iDACA,8CACA,8CACA,qCACA,2CACA,8CACA,oCAEA,qCACA,wCACA,+CACA,kDACA,uCACA,0CACA,iDACA,oDACA,sCACA,yCACA,gDACA,mDACA,mCACA,6CACA,sCACA,gDACA,wCACA,2CACA,qCACA,wCACA,6CACA,gDACA,qCACA,gDACA,6CACA,6CACA,oCACA,0CACA,6CACA,mCAEA,0DACA,4DACA,oDACA,iDACA,mDACA,yDAEA,2DACA,6DACA,qDACA,kDACA,oDACA,sDAEA,0DACA,4DACA,oDACA,iDACA,mDACA,qDAEA,2DACA,6DACA,qDACA,kDACA,oDACA,sDAEA,4DACA,8DACA,sDACA,mDACA,qDACA,uDAEA,2DACA,6DACA,qDACA,kDACA,oDACA,sDAEA,uDACA,yDACA,iDACA,8CACA,gDACA,qDAEA,wDACA,0DACA,kDACA,+CACA,iDACA,sDAEA,uDACA,yDACA,iDACA,8CACA,gDACA,qDAEA,wDACA,yDACA,kDACA,+CACA,iDACA,sDAEA,yDACA,0DACA,mDACA,gDACA,kDACA,uDAEA,wDACA,yDACA,kDACA,+CACA,iDACA,sDAEA,wDACA,0DACA,kDACA,+CACA,iDACA,mDAEA,yDACA,0DACA,mDACA,gDACA,kDACA,uDAEA,wDACA,yDACA,kDACA,+CACA,iDACA,sDC7QF,YACE,mBACA,0DACA,gEACA,8EACA,oFACA,8DACA,oEACA,kFACA,wFACA,4DACA,kEACA,gFACA,sFACA,sDACA,4DACA,0EACA,gFACA,0DACA,gEACA,sEACA,0DACA,gEACA,0EACA,gFACA,0EACA,gFACA,0EACA,wDACA,oEACA,0EACA,sDAGF,mCACE,YACE,kBACA,yDACA,+DACA,6EACA,mFACA,6DACA,mEACA,iFACA,uFACA,2DACA,iEACA,+EACA,qFACA,qDACA,2DACA,yEACA,+EACA,yDACA,+DACA,qEACA,yDACA,+DACA,yEACA,+EACA,yEACA,+EACA,yEACA,uDACA,mEACA,yEACA,sDAMJ,mBACE,mBACA,0DACA,gEACA,8EACA,oFACA,8DACA,oEACA,kFACA,wFACA,4DACA,kEACA,gFACA,sFACA,sDACA,4DACA,0EACA,gFACA,0DACA,gEACA,sEACA,0DACA,gEACA,0EACA,gFACA,0EACA,gFACA,0EACA,wDACA,oEACA,0EACA,sDAGF,kBACE,kBACA,yDACA,+DACA,6EACA,mFACA,6DACA,mEACA,iFACA,uFACA,2DACA,iEACA,+EACA,qFACA,qDACA,2DACA,yEACA,+EACA,yDACA,+DACA,qEACA,yDACA,+DACA,yEACA,+EACA,yEACA,+EACA,yEACA,uDACA,mEACA,yEACA,qDC1IF,sDACA,gDACA,4DACA,sDACA,0EACA,oEACA,gFACA,0EAEA,0DACA,oDACA,gEACA,0DACA,8EACA,wEACA,oFACA,8EAEA,wDACA,kDACA,8DACA,wDACA,4EACA,sEACA,kFACA,4EAEA,kDACA,4CACA,wDACA,kDACA,sEACA,gEACA,4EACA,sEAEA,4DACA,sDACA,kEACA,4DAEA,8GACA,gDACA,4DACA,sDAEA,qKACA,gEACA,4EACA,4FAEA,iFACA,gDAEA,4EACA,sEAEA,sEACA,gEAEA,sEACA,gEAEA,oDACA,8CAEA,gEACA,0DAEA,sEACA,gEAEA,kDACA,4CCzEA,eACE,mEACA,mEACA,8DACA,0DACA,8DACA,yDACA,oEACA,sEAEF,gBACE,oEACA,oEACA,+DACA,2DACA,+DACA,0DACA,qEACA,uEAEF,eACE,mEACA,mEACA,8DACA,0DACA,8DACA,yDACA,oEACA,sEAEF,gBACE,oEACA,oEACA,+DACA,2DACA,+DACA,0DACA,qEACA,uEAEF,iBACE,qEACA,qEACA,gEACA,4DACA,gEACA,2DACA,sEACA,wEAEF,gBACE,oEACA,oEACA,+DACA,2DACA,+DACA,0DACA,qEACA,uEAEF,YACE,gEACA,gEACA,2DACA,uDACA,2DACA,sDACA,iEACA,mEAEF,aACE,iEACA,iEACA,4DACA,wDACA,4DACA,uDACA,kEACA,oEAEF,YACE,gEACA,gEACA,2DACA,uDACA,2DACA,sDACA,iEACA,mEAEF,aACE,iEACA,iEACA,4DACA,wDACA,4DACA,uDACA,kEACA,oEAEF,cACE,kEACA,kEACA,6DACA,yDACA,6DACA,wDACA,mEACA,qEAEF,aACE,iEACA,iEACA,4DACA,wDACA,4DACA,uDACA,kEACA,oEAEF,aACE,iEACA,iEACA,4DACA,wDACA,4DACA,uDACA,kEACA,oEAEF,cACE,kEACA,kEACA,6DACA,yDACA,6DACA,wDACA,mEACA,qEAEF,aACE,iEACA,iEACA,4DACA,wDACA,4DACA,uDACA,kEACA,oEC/II,iBACE,oCAEF,sBACE,yBAIF,2BACE,oCAEF,qCACE,yBAJF,2BACE,oCAEF,qCACE,yBAJF,2BACE,oCAEF,qCACE,yBAJF,2BACE,oCAEF,qCACE,yBAJF,2BACE,oCAEF,qCACE,yBAJF,0BACE,oCAEF,oCACE,yBAJF,0BACE,oCAEF,oCACE,yBAJF,0BACE,oCAEF,oCACE,yBAJF,0BACE,oCAEF,oCACE,yBAZF,KACE,oCAEF,UACE,yBAIF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAZF,MACE,oCAEF,WACE,yBAIF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAZF,QACE,oCAEF,aACE,yBAIF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,iCAEF,2BACE,sBAZF,aACE,oCAEF,kBACE,yBAIF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAZF,QACE,oCAEF,aACE,yBAIF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAZF,MACE,oCAEF,WACE,yBAIF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAZF,YACE,oCAEF,iBACE,yBAIF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAZF,MACE,oCAEF,WACE,yBAIF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAZF,MACE,oCAEF,WACE,yBAIF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAZF,OACE,oCAEF,YACE,yBAIF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAZF,aACE,oCAEF,kBACE,yBAIF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAZF,MACE,oCAEF,WACE,yBAIF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAZF,QACE,oCAEF,aACE,yBAIF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,iCAEF,2BACE,sBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAZF,OACE,oCAEF,YACE,yBAIF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAZF,QACE,oCAEF,aACE,yBAIF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAZF,aACE,oCAEF,kBACE,yBAIF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAZF,OACE,oCAEF,YACE,yBAIF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAZF,WACE,oCAEF,gBACE,yBAIF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,oBACE,oCAEF,8BACE,yBAJF,oBACE,oCAEF,8BACE,yBAJF,oBACE,oCAEF,8BACE,yBAJF,oBACE,oCAEF,8BACE,yBAZF,MACE,oCAEF,WACE,yBAIF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,iCAEF,0BACE,sBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAQN,OACE,iCAEF,YACE,sBAJF,OACE,iCAEF,YACE,sBAJF,aACE,0CAEF,kBACE,+BC7BJ,4EAUA,KACE,iBACA,8BAUF,KACE,SAOF,KACE,cAQF,GACE,cACA,eAWF,GACE,uBACA,SACA,iBAQF,IACE,gCACA,cAUF,EACE,+BAQF,YACE,mBACA,0BACA,iCAOF,SAEE,mBAQF,cAGE,gCACA,cAOF,MACE,cAQF,QAEE,cACA,cACA,kBACA,wBAGF,IACE,eAGF,IACE,WAUF,IACE,kBAWF,sCAKE,oBACA,eACA,iBACA,SAQF,aAEE,iBAQF,cAEE,oBAOF,gDAIE,0BAOF,wHAIE,kBACA,UAOF,4GAIE,8BAOF,SACE,2BAUF,OACE,sBACA,cACA,cACA,eACA,UACA,mBAOF,SACE,wBAOF,SACE,cAQF,6BAEE,sBACA,UAOF,kFAEE,YAQF,cACE,6BACA,oBAOF,yCACE,wBAQF,6BACE,0BACA,aAUF,QACE,cAOF,QACE,kBAUF,SACE,aAOF,SACE,aC3VF,KACE,sBAGF,mBACE,mBAGF,KACE,gDACA,wCAGF,sCAKE,YCwBW,4GDrBb,QCda,QDcW,qBACrB,0CAIH,gDAEA,qBAGA,qeACE,2BAIF,sVACE,iGAKF,wDACE,iGAIF,mFACE,kGAMF,kBACE,uGAMF,WACE,yGAMF,kBACE,0GAKF,WACE,2BACA,iBACE,oEAKJ,SACE,WACA,gBACA,qDAIF,+FAGA,EACE,oBACA,OACE,WACA,iBAGF,QACE,YAGF,OACE,eAEF,QACE,eAEF,SACE,eAEF,QACE,eAKJ,cACE,eACA,kBACA,WAIF,0CAEE,eACA,YAMA,eACE,qBACA,kBACA,kBACA,mBACA,YAEA,iBACE,6CACA,qBACA,iBACA,eACA,iBAGF,oCACE,iEAGF,wBACE,qCAGF,kDAEE,6CAGF,0BACE,eACA,qCAGF,iBACE,eAKJ,2BACE,qBACA,WAIJ,8CACE,YACE,WAEA,wCAEE,UAGF,qBACE,UACA,gBACA,oBAMN,YACE,qBACA,eACA,0CAEA,mNAIE,cACA,WACA,eAGF,mBACE,YACA,0CACA,mBACA,qBACA,6GACA,mBACA,kBACA,eACA,oBACA,mCACA,WAGF,+BACE,aAGF,uBACE,qCAKJ,oBACE,kBACA,gBACA,aAEA,8BACE,kBACA,MACA,OACA,QACA,SACA,WAEA,kCACE,UACA,kBACA,SACA,SACA,eACA,gBACA,+BACA,2BAMN,qBACE,kBAGF,QACE,0BAOF,+BACA,0CAME,8CADF,4CAC8B,yBAI5B,8CADF,sBAC+B,yBAI7B,2CADF,oBAC6B,yBAI3B,mEADF,kBAEI,yBAKF,2CADF,oBAC4B,yBAI1B,4CADF,0BACkC,yBAIhC,4CADF,qBACkC,0BAIhC,2CADF,eAC4B,0BAI1B,mEADF,gBAEI,0BAKF,8CADF,eAC8B,0BAI5B,2CADF,uBAC6B,0BAI3B,8CADF,yBAC+B,0BAM7B,8CADF,sBAC8B,mBAI9B,aACE,gBACA,iBACA,0DACA,eACE,wCAEF,eACE,kCAEF,gEAEE,gBACA,gBACA,aACA,mBACA,8BACA,iBAGJ,gBACE,eACA,qBAIF,YACE,YAGF,MACE,WACA,cACA,yBACA,iBAGE,iBACE,mBAEF,sCACE,iCAIJ,yBACE,sCAEA,+BACE,iCAIJ,YACE,6CAIA,sDACE,kBAKN,GACE,4DAGF,MACE,iBACA,mBACA,gBACA,sBACA,gBAIF,8CAEE,uBACE,WACA,yBACA,iBACA,cACA,kBAEA,uCACE,YAEF,oDAEE,SACA,mBAEF,0BACE,gBAEF,6BACE,cACA,WAEA,gCACE,cACA,mBAEA,2CACE,YAIN,6BACE,cACA,WACA,kBACA,gBACA,mBAEA,gCACE,qBACA,mBAGJ,0BACE,cACA,iBAEF,0BACE,cACA,kBACA,gBAEF,0BACE,mBACA,eAGF,6BACE,SACA,4DAMN,iBACE,kBACA,sBACA,SACA,gBAEA,uEACE,kBACA,MACA,OACA,WACA,YAQJ,8BAGA,4BACA,8BACA,wCAGA,4BACA,8BAGA,uEACA,0BACA,+DACA,kFACA,iCAeI,KACE,oBAIA,MACE,wBADF,MACE,0BADF,MACE,2BADF,MACE,yBAKD,MACE,yBACA,0BAKH,MACE,wBACA,2BApBJ,KACE,yBAIA,MACE,6BADF,MACE,+BADF,MACE,gCADF,MACE,8BAKD,MACE,8BACA,+BAKH,MACE,6BACA,gCApBJ,KACE,wBAIA,MACE,4BADF,MACE,8BADF,MACE,+BADF,MACE,6BAKD,MACE,6BACA,8BAKH,MACE,4BACA,+BApBJ,KACE,yBAIA,MACE,6BADF,MACE,+BADF,MACE,gCADF,MACE,8BAKD,MACE,8BACA,+BAKH,MACE,6BACA,gCApBJ,KACE,uBAIA,MACE,2BADF,MACE,6BADF,MACE,8BADF,MACE,4BAKD,MACE,4BACA,6BAKH,MACE,2BACA,8BApBJ,KACE,yBAIA,MACE,6BADF,MACE,+BADF,MACE,gCADF,MACE,8BAKD,MACE,8BACA,+BAKH,MACE,6BACA,gCApBJ,KACE,uBAIA,MACE,2BADF,MACE,6BADF,MACE,8BADF,MACE,4BAKD,MACE,4BACA,6BAKH,MACE,2BACA,8BApBJ,QACE,uBAIA,SACE,2BADF,SACE,6BADF,SACE,8BADF,SACE,4BAKD,SACE,4BACA,6BAKH,SACE,2BACA,8BApBJ,KACE,qBAIA,MACE,yBADF,MACE,2BADF,MACE,4BADF,MACE,0BAKD,MACE,0BACA,2BAKH,MACE,yBACA,4BApBJ,KACE,0BAIA,MACE,8BADF,MACE,gCADF,MACE,iCADF,MACE,+BAKD,MACE,+BACA,gCAKH,MACE,8BACA,iCApBJ,KACE,yBAIA,MACE,6BADF,MACE,+BADF,MACE,gCADF,MACE,8BAKD,MACE,8BACA,+BAKH,MACE,6BACA,gCApBJ,KACE,0BAIA,MACE,8BADF,MACE,gCADF,MACE,iCADF,MACE,+BAKD,MACE,+BACA,gCAKH,MACE,8BACA,iCApBJ,KACE,wBAIA,MACE,4BADF,MACE,8BADF,MACE,+BADF,MACE,6BAKD,MACE,6BACA,8BAKH,MACE,4BACA,+BApBJ,KACE,0BAIA,MACE,8BADF,MACE,gCADF,MACE,iCADF,MACE,+BAKD,MACE,+BACA,gCAKH,MACE,8BACA,iCApBJ,KACE,wBAIA,MACE,4BADF,MACE,8BADF,MACE,+BADF,MACE,6BAKD,MACE,6BACA,8BAKH,MACE,4BACA,+BApBJ,QACE,wBAIA,SACE,4BADF,SACE,8BADF,SACE,+BADF,SACE,6BAKD,SACE,6BACA,8BAKH,SACE,4BACA,+BExiBR,YACE,eACA,qBACA,sBACA,qDACA,kBACA,gBACA,kBAEA,6BACE,+BACA,mBACA,kBACA,SACA,4DAGA,oCACE,gBACA,kBACA,kBAGA,mIAEE,kBACA,WACA,YACA,gBACA,UACA,qBACA,sBAGF,6CACE,eACA,iBACA,WACA,kDACA,kBAIF,2CACE,eAGF,sCACE,SAGF,uDACE,kBACA,SACA,WAMJ,wCACE,mBAGF,oCACE,6CACA,qCAEA,uDACE,qCAKN,8BACE,cACA,gBACA,kCAGE,iDACE,iCAMJ,2CACE,+BACA,4DACA,kBAGF,yCACE,kBAGF,gDACE,kBAON,mBACE,YACA,kCAGF,yBACE,SACA,YChHF,MACE,qBAGF,WACE,eACA,cACA,iBACA,kBACA,eACA,gCACA,2BACA,6CACA,YACA,sBAEA,eACE,gBACA,gBACA,qCACA,6CACA,kBAEF,qBACE,eAGF,sCACE,qCAIJ,mBACE,qCAKF,oBACE,qBACA,WACA,gBACA,gCACA,2BACA,4BAIF,4BACE,iDAGF,wBACE,iBAGF,0CACE,6CAGF,oBACE,sDAGF,iBACE,qBACA,WACA,iBCnEF,6FAEE,kCACA,6BCDF,WACE,cACA,iBACA,UAEF,2CACE,WACE,WAGJ,2CACE,WACE,WAIJ,SACE,eAsBF,KACE,mBAGF,KACE,aACA,sCACA,oBAGA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,mCACA,mCACA,mCAEA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,qCACA,sCACA,sCAGA,2CACE,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,mCACA,mCACA,mCAEA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,qCACA,sCACA,uCAIF,2CACE,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,mCACA,mCACA,mCAEA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,qCACA,sCACA,uCAIF,4CACE,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,oCACA,oCACA,oCAEA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,sCACA,uCACA,wCAMJ,WACA,mCACA,kCACA,iCACA,mCACA,iCCxKA,MACE,sBACA,6BAGF,IAeE,qCAEA,yDAEA,WACA,mCACA,wCApBA,iBACE,YAEA,8BACE,uCACA,YAGF,8BACE,kBACA,mBAYJ,MACE,qCAGF,2JAIE,cACA,eACA,mCACA,wCAGF,iBACE,kBACA,YAGF,2CACE,sBACE,cAKJ,qBACE,WACA,kBACA,UACA,mCACA,cAEA,uBACE,mCACA,wCAKJ,gBACE,kBACA,qCACA,qBACA,iBACA,UAEA,uBACE,SACA,2BAGF,8CAZF,gBAaI,SACA,2BAEA,2CACE,UACA,eAGF,qBACE,WAEF,sBACE,YACA,WAIJ,sBACE,YACA,UAGF,+OAIE,WACA,kBAMJ,eACE,qBACA,eACA,eAKF,8BACE,qBACA,SAEA,iCACE,gCACA,WACA,UAEA,mCACE,gCACA,eACA,qCACA,cACA,eACA,eAEA,0CACE,iDAGF,sDACE,iDAGF,6NACE,gBACA,iBACA,kBACA,qBAEA,q0CAEE,eACA,oBAMR,mCACE,WAKJ,SACE,YAGF,iBACE,SACA,YAEA,oCACE,YACA,iBACA,YACA,kBACA,qCAEA,uTAEE,YACA,gBAIJ,uBACE,MACA,OAEA,yBACE,0CACA,qBAGF,gCACE,qCAOR,cACE,kBACA,mCACA,YAEA,kBACE,eACA,QAIJ,2CACE,8BACE,uCAEF,qEACE,4BACA,iCAEF,cACE,6BCjOJ,EACE,qBAGF,KAeE,YNoBW,4GMnBX,mBACA,MNmBW,kCMjCX,sCAHF,KAII,gBAGF,0CAPF,KAQI,kBAGF,2CAXF,KAYI,gBAQJ,kBACC,gBACA,gBAID,kDACA,aNYc,OMZgB,2CAC9B,aNYc,QMZgB,qDAC9B,aNYc,QMZgB,qDAC9B,aNYc,QMZgB,4CAC9B,aNYc,QMZgB,oDAC9B,aNYc,QMZgB,kDAG9B,qBACA,uBACA,oBACA,uBACA,sBAKI,0CAHJ,WAIM,kBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,mBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,mBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,mBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,mBAMJ,0CAVF,WAWI,kBC1DJ,kBAUE,yEATA,4BACE,mBACA,oCAGF,2BACE,mBCRJ,YACE,2BACA,aACA,sBACA,mBAEA,6CAGF,MACE,gBACA,kBAEA,6CACA,2BACA,mBAGA,kBACE,eACA,gBACA,4BACE,eAKJ,qCACE,kBAEA,yEACE,eACA,gBAEF,mHACE,eAEF,+EACE,gBACA,gBAEF,4EACE,kBACA,SACA,OACA,QAIJ,YACE,aAGF,aACE,aAGF,YACE,aAIF,iBAaE,aAXE,0GACE,YACA,gBACA,iBAEA,sHACE,YAON,6BACE,cACA,iCACE,0BACA,eACA,WAIJ,+BACE,aACA,sBACA,OACA,kBAEA,6CACE,YAOJ,iCACE,UAGF,iCACE,UACA,oBAOJ,kBACE,kBAGA,sBACE,cACA,0BACA,kBACA,OACA,QACA,MACA,SACA,WAGF,8BACE,kCACA,kBACA,SACA,OACA,eACA,aAIJ,oBACE,aACA,0BAEA,sBACE,SAEF,gCACE,cACA,iBACA,kBAEA,kCACE,iBAKN,mBAKE,yDACA,kBACA,yBANA,8BACE,0BAOF,qBACE,kBACA,qBAGF,kGACE,kCACA,0BAEA,wGACE,iEAKN,mBACE,aACA,kBACA,6CACA,WACA,gBACA,OACA,SACA,YACA,UACA,aAEA,+BACE,eACA,cClMN,iBACE,cACA,eACA,cAEA,8CALF,iBAMI,eACA,WAEF,qEATF,iBAUI,QACA,UACA,eAEF,2CAdF,iBAeI,QACA,SACA,eAIJ,OAEE,kBACA,SACA,WACA,gBACA,kBACA,eACA,YACA,gBAIA,kBACA,mBAEA,eACA,gBACA,iBAEA,6CACA,qDAEA,aACA,mBACA,8BACA,eAEA,qBACE,0CACA,gBACA,mBACA,iBAGF,eACE,mBAGF,8CAvCF,OAwCI,WACA,iBC9DJ,MACE,eACA,qBA0CA,kBACA,gBACA,kBACA,YACA,WACA,6CACA,cACA,mBA/CA,uBACE,+BAEA,8BACE,0CAGF,iIAGE,4BAGF,oCACE,iCAGF,yEAEE,+BAGF,6GAGE,qCAGF,kCACE,gDAIJ,uBACE,aACA,4BACE,YAaJ,WACE,eACA,qBACA,qBACA,kBACA,iBACA,YACA,UACA,SAEA,aAqBE,6CACA,cACA,WACA,YACA,eACA,eACA,uBACA,gBACA,sDA5BA,oBACE,+BAGF,0DAGE,kCAGF,mBACE,iEAGF,uCAEE,iEACA,aAcJ,kDAKE,qCACA,eACA,+BALA,0EACE,+BAQN,iBACE,kBACA,SACA,WACA,6CACA,uBACA,0BAMJ,8CACE,MACE,aACA,WACE,YACA,aACE,gBC5HR,kBACE,cACA,kBAEA,6CACA,qDAEA,gEACA,uDACA,2DACA,2DAEA,gBACA,UAEA,gBACA,mBAEA,eACA,iBACA,gBACA,oBAEA,kBACA,gBACA,gBACA,OACA,MACA,oBAEA,aACA,mBAEA,kBACA,aAGF,UACE,kBACA,UACA,WACA,WACA,0BACA,qDACA,WACA,uBACA,kBC9CF,mDACE,mBACA,2BACA,oBACA,yBACA,oBACA,yBACA,sBAEA,yBACA,YACA,uCACA,gCACA,iCACA,+BACA,gBACA,qBACA,oBACA,mBACA,eACA,0CACA,mBACA,UACA,iBACA,yCAIF,qHACE,kBAEF,yDACE,6FAEF,4DACE,8FAEF,iIACE,kBACA,oCAEF,+DACE,6BAEF,kEACE,8BAKF,gDACE,qCACA,6CAGF,6CACE,iDACA,yDAGF,sDACE,iDACA,yDAIF,sDACE,+BACA,kCACA,6CAGF,oDAEE,kCACA,+BAKF,qSAKE,0EACA,qFAEA,oBACA,gBACA,eAKF,wEAEE,kCACA,6HAGF,kEAEE,qCACA,qGAGF,+DAEE,iDACA,6HAGF,wEACE,kCACA,kFAGF,4DACE,kCACA,kFAKF,wEAEE,kCACA,8GAGF,kEAEE,qCACA,qGAGF,+DAEE,iDACA,6HAGF,wEACE,kCACA,kFACA,6CAGF,4DACE,kCACA,kFAKA,qcAME,gDACA,mBAwBJ,cAoDE,MZjOqB,KYkOrB,OZlOqB,KYmOrB,+CACA,uDACA,cZpOuB,KYqOvB,UACA,aACA,sBACA,mBACA,kBACA,gBACA,UAEA,gCACA,eACA,sBAlEA,oBAEE,yHAEF,oBACE,iBZrL+B,kCYwLjC,qBACE,gBAGF,wBAIE,WACA,YACA,UALA,oCACE,aAWJ,wBACE,mDAIA,gCACA,+BAJA,oCACE,0CASJ,0BAKE,kBACA,WACA,aANA,+BACE,WACA,UA4BJ,gBACE,MZpPoB,iCYqPpB,iBACA,cACA,qBACA,kBAIJ,oBACE,YAGF,kBAyFE,eACA,WACA,YACA,iBACA,gBACA,YA5FE,4BACE,mBACA,eACA,qBAKJ,mEAEE,mBACA,yEACE,iBACA,WACA,QACA,2BACA,YACA,UAEA,YACA,+EACE,qBACA,sBAIN,kCACE,mBACA,qCACE,gBACA,cACA,UACA,WACA,wCACE,sBAIN,mCACE,mBACA,sCACE,SACA,YACA,aACA,8BACA,yCACE,kBAIN,0BAME,UACA,YALE,qCACE,UAKJ,6BACE,aACA,MACA,SACA,UACA,gCACE,OACA,qBACA,SACA,YACA,gBACA,kCACE,cACA,gBACA,kBACA,WACA,YACA,+BACA,gBACA,MZ/Uc,iCYgVd,iBACA,UACA,oCACE,oBAYV,qBACE,OACA,QACA,kBACA,kBACA,YACA,SACA,kBACA,wBACE,mBAEF,oCACE,UAGJ,gCACE,kBACA,MACA,OACA,WACA,MZlXmB,KYmXnB,OZnXmB,KYoXnB,iBZxXyB,8BYyXzB,cZpXqB,KYqXrB,mBAOJ,WAEE,mCACA,eACA,eACA,aACE,iBAKJ,WAEE,mCACA,eACA,aACE,iBAKJ,WACE,cAGF,mDACE,sBCraF,UACE,aACA,UACA,YAGF,kBACE,eACA,qBAEA,6CACA,SACA,aACA,gBACA,gBACA,UACA,kBACA,OACA,MACA,aACA,qBACA,iBAEA,qBAyBE,WACA,wCACA,eACA,WbjCmB,KakCnB,mBACA,WACA,gBA9BA,6BACE,aACA,WAEF,iDACE,eACA,kCACA,cACA,iBACA,kBAEF,gCACE,QACA,OACA,YAGF,yBACE,eACA,oBACA,WACA,kBACA,WAUJ,sEACE,oGAKF,iDACE,iCAKJ,yDACE,QACA,OACA,YACA,eAGF,kBACE,eC5EF,OACE,4BACA,mCACA,4BACA,sBAQA,aACA,eACA,OACA,QACA,6CACA,UACA,eACA,UACA,YACA,gBAEA,yCACA,wBAlBA,aACE,aAmBF,8CA1BF,OA2BI,WAGF,wCACE,aAGF,sBACE,6BACA,kBAGF,oBACE,eAGF,qBACE,wEACA,6CACA,gBACA,kCACA,WACA,iBAEA,yHACE,aAKN,eACE,eACA,YACA,SACA,OACA,SACA,QACA,YACA,WACA,gBACA,aACA,oBAIF,0BACE,UACA,WAEA,yCACE,kBACA,+CACA,gBACA,WACA,gBAGF,wCACE,wFACA,kBACA,0CAKJ,oBACE,SACA,aACA,SACA,WACA,eACA,gBACA,2BCnGF,aACE,eACA,qBAEA,yDACA,2DACA,0DACA,sBAIF,oBAKE,aACA,eACA,0CACA,gBACA,aACA,4DATA,0BACE,UAUF,sBACE,WACA,iBACA,qBACA,kBACA,kBAIJ,2BACE,YACA,iBACA,oBACA,WAEF,mCACE,YAIF,4CACE,iCAGF,kBACE,aACA,4DACA,sBACA,eACA,gBAKF,oBACE,YACA,gBAEA,uBACE,oEAEA,cACA,4DAGF,8BACE,qEACA,cCtEJ,MACE,kBACA,uBACA,eAEA,6CACA,iCAEA,oBACA,mBACA,QAEA,SACA,YAEA,4BACA,6BAEA,2BACA,gBAEA,kBAEA,mBACA,iBACA,mBAEA,YACE,aACA,6CACA,qCAIJ,eACE,+BACA,yCACA,iBACA,mBAGF,UACE,SACA,WACA,YACA,iBACA,mBAGF,sBACE,gCAIF,aACE,kBACA,YACA,WACA,UACA,aACA,uBACA,qBACA,eAGF,mBACE,+CAKF,OACE,aACA,QACA,eAEA,YACA,+DACA,gBACA,iBAEA,YAGA,aACA,mBAEA,aACE,oDACA,iDAGF,aACE,YAGF,qDACE,gBACA,SACA,wCACA,qBACA,eAIA,YAEA,UACA,SACA,UACA,YAGA,2DACE,SACA,gBAKJ,6BACE,aACA,gBAKJ,eACE,iBACA,UACA,wBAGF,eACE,kBACA,UACA,wBAEF,mBACE,gBACA,4BC5IF,eAOE,cACA,eACA,kBACA,uBACA,mCATE,kCACE,WAUJ,sBACE,gBAIJ,qBACE,eACA,MACA,QACA,SACA,OACA,gDACA,aACA,oBAGF,qBACE,eACA,aACA,wCACA,iBACA,SACA,OACA,WACA,kBACA,eACA,YACA,aACA,mCCxCF,aACE,kDAUF,MACE,gBACA,6CCbF,cACE,6CAIF,gjBAcE,aACA,wCACA,WACA,UnBtBiC,KmBuBjC,YA4BF,aACE,2CAEA,kBACA,WAIA,yCACE,sBAEA,eACA,iBAEA,6CAEA,YACA,kBACA,+DACA,4BACA,6BAEA,qFACE,2CACA,iBAGF,0IACE,iDACA,wDACA,4DAIF,iGACE,yBAEF,ySAKE,sBACA,QAGF,kKACE,iDAIJ,gCACE,iBAGF,mBACE,6CACA,iBACA,eACA,kBACA,UACA,SACA,YACA,0BACA,WACE,0DAQJ,8BACE,6CACA,eACA,eACA,eAGF,gCACE,6CACA,eACA,YACA,eACA,eAGF,qBACE,kBACA,UACA,SACA,iBACA,aACA,kBAGF,qBACE,kBACA,WACA,SACA,iBAGF,yDACE,kBAEF,yDACE,mBAEF,2BACE,UAOA,2DACE,cAEA,gDAEA,wDACA,kBAEA,uGACE,oCACA,cACA,iBAIF,mHACE,yBAEF,+VAGE,SACA,UACA,iBACA,cACA,gDAGF,8KACE,iDACA,wDAQJ,qDACE,uCAEF,iGACE,uCAEF,6GACE,gCAEF,yBACE,gCAEF,oCACE,gCAEF,2BACE,gCAOJ,mBACE,kBAEA,kBACA,MACA,iBACA,aACA,kBAGF,iBACE,eACA,+BACA,kBAGJ,uBACE,cACA,2CAFF,uBAGI,mBA6BJ,SACE,WACA,YACA,+BAEA,8BACE,4BACA,8BACA,mBACA,kBACA,YACA,gBACA,sBAKJ,WACE,kBACA,qBACA,qBACA,yBACA,mBAGA,kBACA,MACA,WAME,4EACA,6BACE,YACA,WACA,gBC3TN,gDAEE,kBACA,UACA,oBAGF,0DAEE,kBACA,kBACA,eACA,qBACA,YACA,iBACA,eACA,qBACA,iBAGF,iDAEE,WACA,kBACA,OACA,MACA,WACA,WACA,YACA,UACA,qBAIF,iOAME,kBAGF,6EAEE,wDAGF,sCACE,mBAIF,iCACE,+BAGF,mHAGE,6CAGF,yEAEE,6CAGF,gCACE,sBAIF,yCACE,qBAIF,sCACE,sEAIF,mDACE,gDAGF,kDACE,YACA,gDAIF,0FAEE,+BACA,4CAGF,2BACE,qCAGF,gDACE,4CAGF,yCACE,gDACA,4CC1GF,sDAEE,kBACA,UACA,oBAMA,iCACE,kBACA,kBACA,eACA,qBACA,YACA,iBACA,eACA,iBAIF,+FAEE,WACA,kBACA,MACA,OACA,WACA,YACA,UACA,wDACA,kBACA,eACA,eAGF,uDACE,SACA,mBAGF,+DACE,YACA,gDAIF,oDACE,mBACA,SACA,kBACA,sCACA,iCAKF,gDACE,SACA,UACA,WACA,YACA,mCACA,oCACA,mDACA,oDACA,wBACA,2BACA,2BAGF,6CACE,sDACA,uDAMF,sDACE,UACA,WACA,WACA,YACA,gBACA,iBACA,mDACA,mBACA,wBACA,2BACA,2BAIF,+DACE,sDACA,+BAOF,iDACE,kBAGF,mGAEE,WACA,OACA,kBAEA,mGACA,UAIF,gEACE,QACA,SACA,+BACA,SACA,SACA,yBACA,2BAGF,+DACE,YACA,WACA,+BACA,wDACA,QACA,UAKA,0DACE,MACA,SACA,UACA,YACA,mCACA,oCACA,sDACA,uDACA,yBACA,2BAGF,yDACE,MACA,WACA,YACA,6CACA,6CACA,UAKJ,8DACE,kBACA,sDACA,iCAGF,sEACE,kBACA,6CACA,yCAIF,yEACE,+BACA,+BAGF,wEACE,2BACA,gDAGF,mEACE,+BAGF,kEACE,gDACA,4CCrMJ,QACE,qBACA,oBACA,oBACA,iBACA,gBACA,kBACA,mFACA,qFAGF,kBAEE,0CACA,iBAGF,cACE,eAGF,mCACE,UACA,QACA,SAIA,kDACE,6CACA,yCAIA,iHACE,kBACA,uFACA,qBACA,sBAQN,qBACE,WACA,qBACA,kBACA,yBACA,2BACA,mBACA,iBACA,yCAGA,qDAEA,mBACA,kBACA,+BACA,sBACA,cAGA,uDACE,WACA,kBACA,qBACA,sBACA,uBACA,kBAEA,oBACA,mBAEA,oFAIF,2BAEE,uBACA,sBAOJ,kLAGI,qBAGJ,iEACE,iEAIF,0IAEE,iEAGF,yDACE,iCAGF,yHAEE,iCAIF,8CACE,eACA,WCvHF,uBACE,UACA,wCAGF,OACE,UACA,6CACA,WACA,YACA,qDACA,kBACA,YAGF,gBAoCE,kBA0BA,uBACE,kBACA,QACA,MACA,SACA,cACA,UACA,uCAKF,6BACE,QACA,SACA,gBACA,kBACA,MACA,WAIJ,gBACE,qCAIA,+BACE,qCAEF,gCACE,oCAIJ,+CACE,qCACA,eACA,iBAGF,kBACE,qCAGF,4FAGE,qCA2CA,wBACE,YACA,WACA,gBACA,YAKJ,6BACE,qCACA,2CACE,wCAEF,kCACE,6CAEF,gDACE,kBC1LJ,YAEE,aACA,uCACA,SAGA,+BACE,gBAGF,uCAEA,+DACE,YACA,iBAGF,iBACE,eAGF,6BAME,kBACA,MACA,QACA,OACA,SAEA,eACA,WACA,SACA,UACA,UACA,eACA,wBAhBA,yDACE,aCzBN,aACE,kBAGF,2CAGE,eAGF,kBACE,kBACA,+BACA,YACA,aACA,WACA,cACA,UAEA,wBACE,aAIJ,yBACE,kBACA,SACA,OACA,YACA,SACA,QACA,kBACA,6CACA,gBAEA,yBACA,yBAEA,gCACE,cACA,WACA,kBACA,kCACA,YACA,wBAGF,gCACE,4BAEA,uCACE,qCACA,iBACA,eACA,eAsBN,kBACE,wBAGF,iDAnBE,WAEA,YAqBF,wCAjBE,YACA,YACA,WACA,kBACA,uCACA,0BAcA,wBACA,6CACA,yBACA,kBAIF,6EACE,sEAQF,oCAzCE,WAEA,YA2CF,oCACE,SAGF,oCA3CE,YACA,YACA,WACA,kBACA,uCACA,0BAwCA,gBAIF,iCACE,uBACA,oBAGF,yEACE,sEAKF,6BACE,WAEA,yBAEA,2BACA,mBAEA,oBAEF,yEAEE,uCAEF,sEAEE,4CAEF,6BA9EE,YACA,YACA,WACA,kBACA,uCACA,0BA8EF,kEACE,sECvJF,mBACE,gBAEA,yBACE,eAGF,sBACE,UAGF,qBACE,qBACA,gBACA,oCACA,kBACA,YACA,iBACA,0DAEA,2BACE,wCACA,kBAEF,4BACE,kCACA,gBACA,kBACA,kDC3BN,SACE,uBACA,0BACA,wBACA,4BACA,kDAEA,eACA,2BACA,OACA,MACA,SACA,4BACA,aACA,UACA,YACA,gBACA,sBACA,2BACA,4BACA,iBAEA,iDACA,6CAIA,uBACE,QACA,2BACA,UACA,2BAGF,sBACE,SASF,iBACE,iCAGF,0KAGE,oFAGF,gDAEA,YACE,gBACA,aACA,qBAEF,cAIE,cACA,iCAWA,aACA,kCACA,mCACA,gBACA,mBACA,gBACA,oBAEA,0GACE,iDAEA,gHAGE,oFAIJ,oHACE,iBAIF,qJAEE,oBACA,sBAEA,kBAIJ,kBACE,6CAGF,oBACE,eACA,oBACA,UACA,mCACA,gBACA,uCAIF,oBACE,kBACA,wEACA,8CAEA,sBAKE,YACA,UALA,4BACE,+BAOJ,gCACE,gBACA,kBACA,MACA,QACA,SACA,OACA,WAGF,iFACE,cAGF,4BACE,YACA,WAGF,qDAEE,mCACA,gDAGF,0BACE,gBACA,gBAGF,2BACE,oBACA,gBAMN,aAKE,YACA,eACA,MACA,OACA,YAPA,2BACE,QAUJ,uBAME,OACA,wBACA,eANA,qCACE,QACA,UAQJ,8CAEI,uBACE,4BAEA,qCACE,2BAGJ,WACE,iCAEF,oBACE,yDAKN,2BACE,UAGF,iBACE,eACA,MACA,OACA,QACA,UACA,aACA,gCACA,YACA,aAMA,0DACE,YACA,gBAEF,wEACE,YAEF,oEACE,YCrPJ,UACE,kBACA,WACA,cACA,WAEA,kBACA,sBACA,gBACA,yDAEA,uBACE,kBACA,MACA,OACA,SACA,6CACA,4BAGF,yBACE,6CAEA,gCACE,WACA,kBACA,yBACA,MACA,OACA,SACA,uBAEA,8EAIF,+BACE,WACA,kBACA,yBACA,MACA,OACA,SACA,uBAEA,+EACA,sBAKN,yBACE,GACE,UACA,WAEF,IACE,UACA,WAEF,KACE,UACA,YAIJ,+BACE,GACE,WACA,WAEF,IACE,UACA,UAEF,KACE,UACA,WAmCJ,mBACE,qBACA,kBACA,WACA,YAEA,yBACE,WACA,YAGF,uBACE,WACA,YAGF,0BAEE,0DACA,kDAIJ,oCACE,qCAGF,4BACE,6BAGF,eACE,kBACA,WACA,YACA,UACA,yCAGF,iCAEE,qBAGF,+BAEE,qBAGF,qCAEE,qBAGF,mCAEE,qBAgBF,oCAEE,0JACA,kJAGF,mCAEE,yJACA,iJAGF,sCAEE,4JACA,oJAGF,qCAEE,2JACA,mJAGF,6LAME,UACA,uFACA,+EAGF,sCACE,uCACA,qCACA,uCACA,qCACA,uCACA,qCACA,uCACA,sCAGF,8BACE,+BACA,6BACA,+BACA,6BACA,+BACA,6BACA,+BACA,8BAGF,oCACE,eACA,cACA,cACA,cACA,cACA,gBAGF,4BACE,eACA,cACA,cACA,cACA,cACA,gBAGF,mCACE,eACA,cACA,cACA,cACA,eAGF,2BACE,eACA,cACA,cACA,cACA,eAGF,sCACE,eACA,cACA,cACA,cACA,eAGF,8BACE,eACA,cACA,cACA,cACA,eAGF,qCACE,eACA,cACA,cACA,cACA,gBAGF,6BACE,eACA,cACA,cACA,cACA,gBAOF,WACE,kBACA,MACA,SACA,UACA,YACA,gBACA,qBAGF,mBACE,YACA,WAGF,gBACE,qBACA,kBACA,UACA,YACA,gBACA,qBAEA,wBACE,WACA,YACA,iBACA,mBACA,qBACA,6CACA,kBACA,uBACA,eACA,kBACA,MACA,QACA,SAGF,6BACE,OACA,4CACA,iCACA,yBAEF,8BACE,WACA,2CACA,kCACA,0BAMJ,qCAEE,8EACA,sEAGF,sCAEE,+EACA,uEAGF,6BACE,sCACA,oCACA,qCAGF,qBACE,8BACA,4BACA,6BAGF,8BACE,uCACA,mCACA,sCAGF,sBACE,+BACA,2BACA,8BAGF,2BAEE,sGACA,8FAGF,4BACE,eACA,cAGF,oBACE,eACA,cChaF,QACE,kBACA,aACA,WAGA,mBACE,YACA,WACA,kBACA,MACA,OACA,QACA,SAEA,6BACE,eACA,qBACA,YAGF,iCACE,eACA,qBACA,UACA,YAEA,iDACE,uCAEA,wDACE,kDAOR,gBACE,6CACA,SACA,aACA,eACA,qBAEA,mBACE,eACA,qBACA,UACA,kBACA,MACA,OACA,UACA,WACA,eACA,gBAEA,uBACE,YACA,WACA,sBACA,2BAGF,4BACE,WACA,kBACA,QACA,SACA,UACA,UAEA,8BACE,4BAIJ,0BACE,UAKN,oBACE,eACA,qBACA,kBACA,kBACA,OACA,QACA,SACA,SAEA,oCACE,qBACA,kBACA,YACA,WACA,cAGF,wCACE,kBACA,MACA,OACA,eACA,kDAEA,gCACA,kBACA,eAMA,WACA,YALA,+CACE,6CCjHR,UACE,yBAsCA,gBACA,kBACA,WACA,8BACA,kBACA,4BACA,wBA1CA,0BACE,MACA,OAEA,+CAKE,kBACA,OACA,QACA,YACA,UARA,+DACE,YAUJ,yCACE,WACA,YACA,kCACA,kBACA,MACA,OAEA,4CACE,eACA,gBACA,iBAGF,2CACE,eAaN,yBACE,kBACA,sCACA,uCACA,kBACA,MACA,OAEA,6BACE,WAIJ,sBACE,eACA,qBAEA,kBACA,kBACA,OACA,QACA,SACA,SAEA,sCAKE,qBACA,kBACA,eACA,WACA,UACA,gBACA,uCAEA,gCACA,kBAbA,6CACE,kDAiBN,uGAEE,oBC5FJ,oBACE,YACA,aACA,eACA,aACA,kBACA,6BAGF,yBACE,mBACA,yBAEA,qCACE,mBACA,YACA,WACE,wFAIJ,kDACE,mBAEF,iDACE,mBACA,qEACA,WACE,2CAMN,YACE,kBACA,eACA,kBACA,uDACA,kCACA,wGACA,WACA,YACA,UACA,mBACA,mGAIF,oBACE,kBACA,mBAGF,iBAwBE,kBACA,kBACA,cAzBA,iDAEE,WACA,cACA,kBACA,WACA,YACA,kBACA,6CAEF,yBACE,mBACA,yBAEF,wBACE,kBACA,WACE,wCAGF,WAQJ,mBAME,QACA,SACA,gCAEA,cACA,6BAVA,gIAEE,gBAWJ,0CACE,gCACE,YACA,cCpGJ,OAiBE,iBACA,kBAjBA,eACE,WACA,cACA,kBACA,oBACA,WACA,YACA,MACA,OACA,yBACA,sBACA,qCACA,qEACA,WAOJ,2BACE,GACE,UACA,mBAEF,IACE,UACA,qBAEF,KACE,UACA,sBC/BJ,kBACE,gBACA,gBACA,gBAGF,oCACE,aACA,sBACA,UACA,6CAGF,qBACE,aACA,8BACA,YACA,cAEA,wCACE,aAIA,2CAKE,mBACA,kBACA,SANA,iDACE,mBAQJ,4CACE,aAIJ,wCACE,WAGF,yCACE,WAGF,kEAEE,oBACA,mBAGF,0EAEE,4CAIJ,wBACE,eACA,eACA,+BACA,YAKF,yBACE,YACA,6CACA,qCACA,kBACA,gBAEA,oCACE,cACA,iBACA,iBACA,qCAGF,oCACE,cACA,iBACA,iBACA,gBAMJ,+BACE,cAGF,kBACE,YACA,eACA,cAEA,wBACE,mBAGF,qBACE,iBACA,kBAGF,qBACE,YAGF,uBACE,qBACA,6CAGF,qBACE,wCAiBA,kBACA,UAhBA,8BACE,kCAGF,iCACE,6CACA,qCAGF,+EAEE,qCACA,oBAQN,uBACE,+BACA,YACA,iBACA,cACA,WACA,kBACA,cACA,eACA,cAEA,6BACE,iEAGF,6BACE,iEAMJ,mBACE,YACA,cACA,mBACA,aACA,8BAGF,wEAIE,kCACA,eAGF,kBACE,gCAKF,2CACE,kBACE,gBAGF,oCACE,mBAGF,yBACE,eAGF,0DAGE,YAGF,uBACE,kBC9MJ,kBACE,gBACA,gBAGF,oCACE,aACA,sBACA,UAGF,cACE,qCAKF,4BACE,YACA,YACA,6CACA,aACA,gBAGF,2BACE,eACA,iBACA,kBACA,0CACA,gBACA,kBACA,iBAEA,4CACE,YACA,2BACA,kBACA,eACA,cAIJ,6EAGE,eAGF,wCACE,iBACA,UACA,iBAGF,0CACE,UACA,gBAGF,8BACE,WAGF,0BACE,iBACA,kBACA,WACA,YACA,gBAKF,2BACE,cACA,6CAGF,kBACE,iCACA,kBACA,YACA,aACA,iBACA,kBACA,YACA,gBACA,kBACA,iBAGF,oCAEE,kBACA,OACA,QACA,MACA,SAGF,oBACE,kBAGF,iBACE,kBACA,wCACA,iBACA,kBACA,WACA,YACA,kBACA,eACA,eAGF,+CAEE,iEAGF,iBACE,yCAGF,qBASE,UARA,sCACE,0BAGF,wCACE,0BAMJ,mBACE,yBAEA,wBACE,mCACA,eACA,qBAIJ,uBACE,YAGF,2BACE,YACA,iCAGF,sBACE,YACA,iCAKF,mBACE,cACA,iBACA,aACA,8BAGF,kBACE,gCAGF,kBACE,kCAGF,oCAEE,eAIF,2CACE,kBACE,gBAGF,oCACE,mBAGF,2BACE,QAGF,0BACE,kBACA,WACA,YACA,kBACA","file":"materialize.min.css"} \ No newline at end of file diff --git a/dist/js/materialize.cjs.js b/dist/js/materialize.cjs.js new file mode 100644 index 0000000000..39e26a5890 --- /dev/null +++ b/dist/js/materialize.cjs.js @@ -0,0 +1,7593 @@ +/*! +* Materialize v2.1.1 (https://materializeweb.com) +* Copyright 2014-2024 Materialize +* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE) +*/ +'use strict'; + +/** + * Class with utilitary functions for global usage. + */ +class Utils { + /** Specifies wether tab is pressed or not. */ + static tabPressed = false; + /** Specifies wether there is a key pressed. */ + static keyDown = false; + /** + * Key maps. + */ + static keys = { + TAB: ['Tab'], + ENTER: ['Enter'], + ESC: ['Escape', 'Esc'], + BACKSPACE: ['Backspace'], + ARROW_UP: ['ArrowUp', 'Up'], + ARROW_DOWN: ['ArrowDown', 'Down'], + ARROW_LEFT: ['ArrowLeft', 'Left'], + ARROW_RIGHT: ['ArrowRight', 'Right'], + DELETE: ['Delete', 'Del'], + }; + /** + * Detects when a key is pressed. + * @param e Event instance. + */ + static docHandleKeydown(e) { + Utils.keyDown = true; + if ([...Utils.keys.TAB, ...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP].includes(e.key)) { + Utils.tabPressed = true; + } + } + /** + * Detects when a key is released. + * @param e Event instance. + */ + static docHandleKeyup(e) { + Utils.keyDown = false; + if ([...Utils.keys.TAB, ...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP].includes(e.key)) { + Utils.tabPressed = false; + } + } + /** + * Detects when document is focused. + * @param e Event instance. + */ + static docHandleFocus(e) { + if (Utils.keyDown) { + document.body.classList.add('keyboard-focused'); + } + } + /** + * Detects when document is not focused. + * @param e Event instance. + */ + static docHandleBlur(e) { + document.body.classList.remove('keyboard-focused'); + } + /** + * Generates a unique string identifier. + */ + static guid() { + const s4 = () => { + return Math.floor((1 + Math.random()) * 0x10000) + .toString(16) + .substring(1); + }; + return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); + } + /** + * Checks for exceeded edges + * @param container Container element. + * @param bounding Bounding rect. + * @param offset Element offset. + */ + static checkWithinContainer(container, bounding, offset) { + let edges = { + top: false, + right: false, + bottom: false, + left: false + }; + let containerRect = container.getBoundingClientRect(); + // If body element is smaller than viewport, use viewport height instead. + let containerBottom = container === document.body + ? Math.max(containerRect.bottom, window.innerHeight) + : containerRect.bottom; + let scrollLeft = container.scrollLeft; + let scrollTop = container.scrollTop; + let scrolledX = bounding.left - scrollLeft; + let scrolledY = bounding.top - scrollTop; + // Check for container and viewport for each edge + if (scrolledX < containerRect.left + offset || scrolledX < offset) { + edges.left = true; + } + if (scrolledX + bounding.width > containerRect.right - offset || + scrolledX + bounding.width > window.innerWidth - offset) { + edges.right = true; + } + if (scrolledY < containerRect.top + offset || scrolledY < offset) { + edges.top = true; + } + if (scrolledY + bounding.height > containerBottom - offset || + scrolledY + bounding.height > window.innerHeight - offset) { + edges.bottom = true; + } + return edges; + } + /** + * Checks if element can be aligned in multiple directions. + * @param el Element to be inspected. + * @param container Container element. + * @param bounding Bounding rect. + * @param offset Element offset. + */ + static checkPossibleAlignments(el, container, bounding, offset) { + let canAlign = { + top: true, + right: true, + bottom: true, + left: true, + spaceOnTop: null, + spaceOnRight: null, + spaceOnBottom: null, + spaceOnLeft: null + }; + let containerAllowsOverflow = getComputedStyle(container).overflow === 'visible'; + let containerRect = container.getBoundingClientRect(); + let containerHeight = Math.min(containerRect.height, window.innerHeight); + let containerWidth = Math.min(containerRect.width, window.innerWidth); + let elOffsetRect = el.getBoundingClientRect(); + let scrollLeft = container.scrollLeft; + let scrollTop = container.scrollTop; + let scrolledX = bounding.left - scrollLeft; + let scrolledYTopEdge = bounding.top - scrollTop; + let scrolledYBottomEdge = bounding.top + elOffsetRect.height - scrollTop; + // Check for container and viewport for left + canAlign.spaceOnRight = !containerAllowsOverflow + ? containerWidth - (scrolledX + bounding.width) + : window.innerWidth - (elOffsetRect.left + bounding.width); + if (canAlign.spaceOnRight < 0) { + canAlign.left = false; + } + // Check for container and viewport for Right + canAlign.spaceOnLeft = !containerAllowsOverflow + ? scrolledX - bounding.width + elOffsetRect.width + : elOffsetRect.right - bounding.width; + if (canAlign.spaceOnLeft < 0) { + canAlign.right = false; + } + // Check for container and viewport for Top + canAlign.spaceOnBottom = !containerAllowsOverflow + ? containerHeight - (scrolledYTopEdge + bounding.height + offset) + : window.innerHeight - (elOffsetRect.top + bounding.height + offset); + if (canAlign.spaceOnBottom < 0) { + canAlign.top = false; + } + // Check for container and viewport for Bottom + canAlign.spaceOnTop = !containerAllowsOverflow + ? scrolledYBottomEdge - (bounding.height - offset) + : elOffsetRect.bottom - (bounding.height + offset); + if (canAlign.spaceOnTop < 0) { + canAlign.bottom = false; + } + return canAlign; + } + /** + * Retrieves target element id from trigger. + * @param trigger Trigger element. + */ + static getIdFromTrigger(trigger) { + let id = trigger.dataset.target; + if (!id) { + id = trigger.getAttribute('href'); + return id ? id.slice(1) : ''; + } + return id; + } + /** + * Retrieves document scroll postion from top. + */ + static getDocumentScrollTop() { + return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0; + } + ; + /** + * Retrieves document scroll postion from left. + */ + static getDocumentScrollLeft() { + return window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft || 0; + } + /** + * Fires the given function after a certain ammount of time. + * @param func Function to be fired. + * @param wait Wait time. + * @param options Additional options. + */ + static throttle(func, wait, options = null) { + let context, args, result; + let timeout = null; + let previous = 0; + options || (options = {}); + let later = function () { + previous = options.leading === false ? 0 : new Date().getTime(); + timeout = null; + result = func.apply(context, args); + context = args = null; + }; + return function () { + let now = new Date().getTime(); + if (!previous && options.leading === false) + previous = now; + let remaining = wait - (now - previous); + context = this; + args = arguments; + if (remaining <= 0) { + clearTimeout(timeout); + timeout = null; + previous = now; + result = func.apply(context, args); + context = args = null; + } + else if (!timeout && options.trailing !== false) { + timeout = setTimeout(later, remaining); + } + return result; + }; + } +} + +/** + * Base class implementation for Materialize components. + */ +class Component { + /** + * The DOM element the plugin was initialized with. + */ + el; + /** + * The options the instance was initialized with. + */ + options; + /** + * Constructs component instance and set everything up. + */ + constructor(el, options, classDef) { + // Display error if el is not a valid HTML Element + if (!(el instanceof HTMLElement)) { + console.error(Error(el + ' is not an HTML Element')); + } + // If exists, destroy and reinitialize in child + let ins = classDef.getInstance(el); + if (!!ins) { + ins.destroy(); + } + this.el = el; + } + /** + * Initializes component instances. + * @param els HTML elements. + * @param options Component options. + * @param classDef Class definition. + */ + static init(els, options, classDef) { + let instances = null; + if (els instanceof Element) { + instances = new classDef(els, options); + } + else if (!!els && els.length) { + instances = []; + for (let i = 0; i < els.length; i++) { + instances.push(new classDef(els[i], options)); + } + } + return instances; + } + /** + * @returns default options for component instance. + */ + static get defaults() { return {}; } + /** + * Retrieves component instance for the given element. + * @param el Associated HTML Element. + */ + static getInstance(el) { + throw new Error("This method must be implemented."); + } + /** + * Destroy plugin instance and teardown. + */ + destroy() { throw new Error("This method must be implemented."); } +} + +const _defaults$l = { + alignment: 'left', + autoFocus: true, + constrainWidth: true, + container: null, + coverTrigger: true, + closeOnClick: true, + hover: false, + inDuration: 150, + outDuration: 250, + onOpenStart: null, + onOpenEnd: null, + onCloseStart: null, + onCloseEnd: null, + onItemClick: null +}; +class Dropdown extends Component { + static _dropdowns = []; + /** ID of the dropdown element. */ + id; + /** The DOM element of the dropdown. */ + dropdownEl; + /** If the dropdown is open. */ + isOpen; + /** If the dropdown content is scrollable. */ + isScrollable; + isTouchMoving; + /** The index of the item focused. */ + focusedIndex; + filterQuery; + filterTimeout; + constructor(el, options) { + super(el, options, Dropdown); + this.el.M_Dropdown = this; + Dropdown._dropdowns.push(this); + this.id = Utils.getIdFromTrigger(el); + this.dropdownEl = document.getElementById(this.id); + this.options = { + ...Dropdown.defaults, + ...options + }; + this.isOpen = false; + this.isScrollable = false; + this.isTouchMoving = false; + this.focusedIndex = -1; + this.filterQuery = []; + // Move dropdown-content after dropdown-trigger + this._moveDropdown(); + this._makeDropdownFocusable(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$l; + } + /** + * Initializes instances of Dropdown. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Dropdown); + } + static getInstance(el) { + return el.M_Dropdown; + } + destroy() { + this._resetDropdownStyles(); + this._removeEventHandlers(); + Dropdown._dropdowns.splice(Dropdown._dropdowns.indexOf(this), 1); + this.el.M_Dropdown = undefined; + } + _setupEventHandlers() { + // Trigger keydown handler + this.el.addEventListener('keydown', this._handleTriggerKeydown); + // Item click handler + this.dropdownEl?.addEventListener('click', this._handleDropdownClick); + // Hover event handlers + if (this.options.hover) { + this.el.addEventListener('mouseenter', this._handleMouseEnter); + this.el.addEventListener('mouseleave', this._handleMouseLeave); + this.dropdownEl.addEventListener('mouseleave', this._handleMouseLeave); + // Click event handlers + } + else { + this.el.addEventListener('click', this._handleClick); + } + } + _removeEventHandlers() { + this.el.removeEventListener('keydown', this._handleTriggerKeydown); + this.dropdownEl.removeEventListener('click', this._handleDropdownClick); + if (this.options.hover) { + this.el.removeEventListener('mouseenter', this._handleMouseEnter); + this.el.removeEventListener('mouseleave', this._handleMouseLeave); + this.dropdownEl.removeEventListener('mouseleave', this._handleMouseLeave); + } + else { + this.el.removeEventListener('click', this._handleClick); + } + } + _setupTemporaryEventHandlers() { + document.body.addEventListener('click', this._handleDocumentClick); + document.body.addEventListener('touchmove', this._handleDocumentTouchmove); + this.dropdownEl.addEventListener('keydown', this._handleDropdownKeydown); + window.addEventListener('resize', this._handleWindowResize); + } + _removeTemporaryEventHandlers() { + document.body.removeEventListener('click', this._handleDocumentClick); + document.body.removeEventListener('touchmove', this._handleDocumentTouchmove); + this.dropdownEl.removeEventListener('keydown', this._handleDropdownKeydown); + window.removeEventListener('resize', this._handleWindowResize); + } + _handleClick = (e) => { + e.preventDefault(); + if (this.isOpen) { + this.close(); + } + else { + this.open(); + } + }; + _handleMouseEnter = () => { + this.open(); + }; + _handleMouseLeave = (e) => { + const toEl = e.relatedTarget; + const leaveToDropdownContent = !!toEl.closest('.dropdown-content'); + let leaveToActiveDropdownTrigger = false; + const closestTrigger = toEl.closest('.dropdown-trigger'); + if (closestTrigger && + !!closestTrigger.M_Dropdown && + closestTrigger.M_Dropdown.isOpen) { + leaveToActiveDropdownTrigger = true; + } + // Close hover dropdown if mouse did not leave to either active dropdown-trigger or dropdown-content + if (!leaveToActiveDropdownTrigger && !leaveToDropdownContent) { + this.close(); + } + }; + _handleDocumentClick = (e) => { + const target = e.target; + if (this.options.closeOnClick && + target.closest('.dropdown-content') && + !this.isTouchMoving) { + // isTouchMoving to check if scrolling on mobile. + this.close(); + } + else if (!target.closest('.dropdown-content')) { + // Do this one frame later so that if the element clicked also triggers _handleClick + // For example, if a label for a select was clicked, that we don't close/open the dropdown + setTimeout(() => { + if (this.isOpen) { + this.close(); + } + }, 0); + } + this.isTouchMoving = false; + }; + _handleTriggerKeydown = (e) => { + // ARROW DOWN OR ENTER WHEN SELECT IS CLOSED - open Dropdown + const arrowDownOrEnter = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ENTER.includes(e.key); + if (arrowDownOrEnter && !this.isOpen) { + e.preventDefault(); + this.open(); + } + }; + _handleDocumentTouchmove = (e) => { + const target = e.target; + if (target.closest('.dropdown-content')) { + this.isTouchMoving = true; + } + }; + _handleDropdownClick = (e) => { + // onItemClick callback + if (typeof this.options.onItemClick === 'function') { + const itemEl = e.target.closest('li'); + this.options.onItemClick.call(this, itemEl); + } + }; + _handleDropdownKeydown = (e) => { + const arrowUpOrDown = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ARROW_UP.includes(e.key); + if (Utils.keys.TAB.includes(e.key)) { + e.preventDefault(); + this.close(); + } + // Navigate down dropdown list + else if (arrowUpOrDown && this.isOpen) { + e.preventDefault(); + const direction = Utils.keys.ARROW_DOWN.includes(e.key) ? 1 : -1; + let newFocusedIndex = this.focusedIndex; + let hasFoundNewIndex = false; + do { + newFocusedIndex = newFocusedIndex + direction; + if (!!this.dropdownEl.children[newFocusedIndex] && + this.dropdownEl.children[newFocusedIndex].tabIndex !== -1) { + hasFoundNewIndex = true; + break; + } + } while (newFocusedIndex < this.dropdownEl.children.length && newFocusedIndex >= 0); + if (hasFoundNewIndex) { + // Remove active class from old element + if (this.focusedIndex >= 0) + this.dropdownEl.children[this.focusedIndex].classList.remove('active'); + this.focusedIndex = newFocusedIndex; + this._focusFocusedItem(); + } + } + // ENTER selects choice on focused item + else if (Utils.keys.ENTER.includes(e.key) && this.isOpen) { + // Search for and ` + + ''); + } + renderRow(days, isRTL, isRowSelected) { + return ('' + + (isRTL ? days.reverse() : days).join('') + + ''); + } + renderTable(opts, data, randId) { + return ('
' + + this.renderHead(opts) + + this.renderBody(data) + + '
'); + } + renderHead(opts) { + let i, arr = []; + for (i = 0; i < 7; i++) { + arr.push(`${this.renderDayName(opts, i, true)}`); + } + return '' + (opts.isRTL ? arr.reverse() : arr).join('') + ''; + } + renderBody(rows) { + return '' + rows.join('') + ''; + } + renderTitle(instance, c, year, month, refYear, randId) { + let i, j, arr, opts = this.options, isMinYear = year === opts.minYear, isMaxYear = year === opts.maxYear, html = '
', monthHtml, yearHtml, prev = true, next = true; + for (arr = [], i = 0; i < 12; i++) { + arr.push(''); + } + monthHtml = ''; + if (Array.isArray(opts.yearRange)) { + i = opts.yearRange[0]; + j = opts.yearRange[1] + 1; + } + else { + i = year - opts.yearRange; + j = 1 + year + opts.yearRange; + } + for (arr = []; i < j && i <= opts.maxYear; i++) { + if (i >= opts.minYear) { + arr.push(``); + } + } + if (opts.yearRangeReverse) + arr.reverse(); + yearHtml = ``; + let leftArrow = ''; + html += ``; + html += '
'; + if (opts.showMonthAfterYear) { + html += yearHtml + monthHtml; + } + else { + html += monthHtml + yearHtml; + } + html += '
'; + if (isMinYear && (month === 0 || opts.minMonth >= month)) { + prev = false; + } + if (isMaxYear && (month === 11 || opts.maxMonth <= month)) { + next = false; + } + let rightArrow = ''; + html += ``; + return (html += '
'); + } + // refresh HTML + draw(force = false) { + if (!this.isOpen && !force) + return; + let opts = this.options, minYear = opts.minYear, maxYear = opts.maxYear, minMonth = opts.minMonth, maxMonth = opts.maxMonth, html = '', randId; + if (this._y <= minYear) { + this._y = minYear; + if (!isNaN(minMonth) && this._m < minMonth) { + this._m = minMonth; + } + } + if (this._y >= maxYear) { + this._y = maxYear; + if (!isNaN(maxMonth) && this._m > maxMonth) { + this._m = maxMonth; + } + } + randId = + 'datepicker-title-' + + Math.random() + .toString(36) + .replace(/[^a-z]+/g, '') + .substr(0, 2); + for (let c = 0; c < 1; c++) { + this._renderDateDisplay(); + html += + this.renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year, randId) + this.render(this.calendars[c].year, this.calendars[c].month, randId); + } + this.destroySelects(); + this.calendarEl.innerHTML = html; + // Init Materialize Select + let yearSelect = this.calendarEl.querySelector('.orig-select-year'); + let monthSelect = this.calendarEl.querySelector('.orig-select-month'); + FormSelect.init(yearSelect, { + classes: 'select-year', + dropdownOptions: { container: document.body, constrainWidth: false } + }); + FormSelect.init(monthSelect, { + classes: 'select-month', + dropdownOptions: { container: document.body, constrainWidth: false } + }); + // Add change handlers for select + yearSelect.addEventListener('change', this._handleYearChange); + monthSelect.addEventListener('change', this._handleMonthChange); + if (typeof this.options.onDraw === 'function') { + this.options.onDraw.call(this); + } + } + _setupEventHandlers() { + this.el.addEventListener('click', this._handleInputClick); + this.el.addEventListener('keydown', this._handleInputKeydown); + this.el.addEventListener('change', this._handleInputChange); + this.calendarEl.addEventListener('click', this._handleCalendarClick); + this.doneBtn.addEventListener('click', this._finishSelection); + this.cancelBtn.addEventListener('click', this.close); + if (this.options.showClearBtn) { + this.clearBtn.addEventListener('click', this._handleClearClick); + } + } + _setupVariables() { + const template = document.createElement('template'); + template.innerHTML = Datepicker._template.trim(); + this.modalEl = template.content.firstChild; + this.calendarEl = this.modalEl.querySelector('.datepicker-calendar'); + this.yearTextEl = this.modalEl.querySelector('.year-text'); + this.dateTextEl = this.modalEl.querySelector('.date-text'); + if (this.options.showClearBtn) { + this.clearBtn = this.modalEl.querySelector('.datepicker-clear'); + } + this.doneBtn = this.modalEl.querySelector('.datepicker-done'); + this.cancelBtn = this.modalEl.querySelector('.datepicker-cancel'); + this.formats = { + d: () => { + return this.date.getDate(); + }, + dd: () => { + let d = this.date.getDate(); + return (d < 10 ? '0' : '') + d; + }, + ddd: () => { + return this.options.i18n.weekdaysShort[this.date.getDay()]; + }, + dddd: () => { + return this.options.i18n.weekdays[this.date.getDay()]; + }, + m: () => { + return this.date.getMonth() + 1; + }, + mm: () => { + let m = this.date.getMonth() + 1; + return (m < 10 ? '0' : '') + m; + }, + mmm: () => { + return this.options.i18n.monthsShort[this.date.getMonth()]; + }, + mmmm: () => { + return this.options.i18n.months[this.date.getMonth()]; + }, + yy: () => { + return ('' + this.date.getFullYear()).slice(2); + }, + yyyy: () => { + return this.date.getFullYear(); + } + }; + } + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleInputClick); + this.el.removeEventListener('keydown', this._handleInputKeydown); + this.el.removeEventListener('change', this._handleInputChange); + this.calendarEl.removeEventListener('click', this._handleCalendarClick); + } + _handleInputClick = () => { + this.open(); + }; + _handleInputKeydown = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + e.preventDefault(); + this.open(); + } + }; + _handleCalendarClick = (e) => { + if (!this.isOpen) + return; + const target = (e.target); + if (!target.classList.contains('is-disabled')) { + if (target.classList.contains('datepicker-day-button') && + !target.classList.contains('is-empty') && + !target.parentElement.classList.contains('is-disabled')) { + this.setDate(new Date(e.target.getAttribute('data-year'), e.target.getAttribute('data-month'), e.target.getAttribute('data-day'))); + if (this.options.autoClose) { + this._finishSelection(); + } + } + else if (target.closest('.month-prev')) { + this.prevMonth(); + } + else if (target.closest('.month-next')) { + this.nextMonth(); + } + } + }; + _handleClearClick = () => { + this.date = null; + this.setInputValue(); + this.close(); + }; + _handleMonthChange = (e) => { + this.gotoMonth(e.target.value); + }; + _handleYearChange = (e) => { + this.gotoYear(e.target.value); + }; + // change view to a specific month (zero-index, e.g. 0: January) + gotoMonth(month) { + if (!isNaN(month)) { + this.calendars[0].month = parseInt(month, 10); + this.adjustCalendars(); + } + } + // change view to a specific full year (e.g. "2012") + gotoYear(year) { + if (!isNaN(year)) { + this.calendars[0].year = parseInt(year, 10); + this.adjustCalendars(); + } + } + _handleInputChange = (e) => { + let date; + // Prevent change event from being fired when triggered by the plugin + if (e['detail']?.firedBy === this) + return; + if (this.options.parse) { + date = this.options.parse(this.el.value, typeof this.options.format === "function" + ? this.options.format(new Date(this.el.value)) + : this.options.format); + } + else { + date = new Date(Date.parse(this.el.value)); + } + if (Datepicker._isDate(date)) + this.setDate(date); + }; + renderDayName(opts, day, abbr = false) { + day += opts.firstDay; + while (day >= 7) { + day -= 7; + } + return abbr ? opts.i18n.weekdaysAbbrev[day] : opts.i18n.weekdays[day]; + } + // Set input value to the selected date and close Datepicker + _finishSelection = () => { + this.setInputValue(); + this.close(); + }; + /** + * Open datepicker. + */ + open = () => { + if (this.isOpen) + return; + this.isOpen = true; + if (typeof this.options.onOpen === 'function') { + this.options.onOpen.call(this); + } + this.draw(); + this.modal.open(undefined); + return this; + }; + /** + * Close datepicker. + */ + close = () => { + if (!this.isOpen) + return; + this.isOpen = false; + if (typeof this.options.onClose === 'function') { + this.options.onClose.call(this); + } + this.modal.close(); + return this; + }; + static { + Datepicker._template = ` +
+
+
+ + +
+
+
+
+ +
+ + +
+
+
+
+
`; + } +} + +class Forms { + /** + * Resizes the given TextArea after updating the + * value content dynamically. + * @param textarea TextArea to be resized + */ + static textareaAutoResize(textarea) { + if (!textarea) { + console.error('No textarea element found'); + return; + } + // Textarea Auto Resize + let hiddenDiv = document.querySelector('.hiddendiv'); + if (!hiddenDiv) { + hiddenDiv = document.createElement('div'); + hiddenDiv.classList.add('hiddendiv', 'common'); + document.body.append(hiddenDiv); + } + const style = getComputedStyle(textarea); + // Set font properties of hiddenDiv + const fontFamily = style.fontFamily; //textarea.css('font-family'); + const fontSize = style.fontSize; //textarea.css('font-size'); + const lineHeight = style.lineHeight; //textarea.css('line-height'); + // Firefox can't handle padding shorthand. + const paddingTop = style.paddingTop; //getComputedStyle(textarea).css('padding-top'); + const paddingRight = style.paddingRight; //textarea.css('padding-right'); + const paddingBottom = style.paddingBottom; //textarea.css('padding-bottom'); + const paddingLeft = style.paddingLeft; //textarea.css('padding-left'); + if (fontSize) + hiddenDiv.style.fontSize = fontSize; //('font-size', fontSize); + if (fontFamily) + hiddenDiv.style.fontFamily = fontFamily; //css('font-family', fontFamily); + if (lineHeight) + hiddenDiv.style.lineHeight = lineHeight; //css('line-height', lineHeight); + if (paddingTop) + hiddenDiv.style.paddingTop = paddingTop; //ss('padding-top', paddingTop); + if (paddingRight) + hiddenDiv.style.paddingRight = paddingRight; //css('padding-right', paddingRight); + if (paddingBottom) + hiddenDiv.style.paddingBottom = paddingBottom; //css('padding-bottom', paddingBottom); + if (paddingLeft) + hiddenDiv.style.paddingLeft = paddingLeft; //css('padding-left', paddingLeft); + // Set original-height, if none + if (!textarea.hasAttribute('original-height')) + textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString()); + if (textarea.getAttribute('wrap') === 'off') { + hiddenDiv.style.overflowWrap = 'normal'; // ('overflow-wrap', 'normal') + hiddenDiv.style.whiteSpace = 'pre'; //.css('white-space', 'pre'); + } + hiddenDiv.innerText = textarea.value + '\n'; + const content = hiddenDiv.innerHTML.replace(/\n/g, '
'); + hiddenDiv.innerHTML = content; + // When textarea is hidden, width goes crazy. + // Approximate with half of window size + if (textarea.offsetWidth > 0 && textarea.offsetHeight > 0) { + hiddenDiv.style.width = textarea.getBoundingClientRect().width + 'px'; // ('width', textarea.width() + 'px'); + } + else { + hiddenDiv.style.width = (window.innerWidth / 2) + 'px'; //css('width', window.innerWidth / 2 + 'px'); + } + // Resize if the new height is greater than the + // original height of the textarea + const originalHeight = parseInt(textarea.getAttribute('original-height')); + const prevLength = parseInt(textarea.getAttribute('previous-length')); + if (isNaN(originalHeight)) + return; + if (originalHeight <= hiddenDiv.clientHeight) { + textarea.style.height = hiddenDiv.clientHeight + 'px'; //css('height', hiddenDiv.innerHeight() + 'px'); + } + else if (textarea.value.length < prevLength) { + // In case the new height is less than original height, it + // means the textarea has less text than before + // So we set the height to the original one + textarea.style.height = originalHeight + 'px'; + } + textarea.setAttribute('previous-length', textarea.value.length.toString()); + } + ; + static Init() { + if (typeof document !== 'undefined') + document?.addEventListener("DOMContentLoaded", () => { + document.addEventListener('keyup', (e) => { + const target = e.target; + // Radio and Checkbox focus class + if (target instanceof HTMLInputElement && ['radio', 'checkbox'].includes(target.type)) { + // TAB, check if tabbing to radio or checkbox. + if (Utils.keys.TAB.includes(e.key)) { + target.classList.add('tabbed'); + target.addEventListener('blur', e => target.classList.remove('tabbed'), { once: true }); + } + } + }); + document.querySelectorAll('.materialize-textarea').forEach((textArea) => { + Forms.InitTextarea(textArea); + }); + // File Input Path + document.querySelectorAll('.file-field input[type="file"]').forEach((fileInput) => { + Forms.InitFileInputPath(fileInput); + }); + }); + } + static InitTextarea(textarea) { + // Save Data in Element + textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString()); + textarea.setAttribute('previous-length', textarea.value.length.toString()); + Forms.textareaAutoResize(textarea); + textarea.addEventListener('keyup', e => Forms.textareaAutoResize(textarea)); + textarea.addEventListener('keydown', e => Forms.textareaAutoResize(textarea)); + } + static InitFileInputPath(fileInput) { + fileInput.addEventListener('change', e => { + const fileField = fileInput.closest('.file-field'); + const pathInput = fileField.querySelector('input.file-path'); + const files = fileInput.files; + const filenames = []; + for (let i = 0; i < files.length; i++) { + filenames.push(files[i].name); + } + pathInput.value = filenames.join(', '); + pathInput.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true })); + }); + } +} + +const _defaults$c = { + inDuration: 275, + outDuration: 200, + onOpenStart: null, + onOpenEnd: null, + onCloseStart: null, + onCloseEnd: null +}; +class Materialbox extends Component { + /** If the materialbox overlay is showing. */ + overlayActive; + /** If the materialbox is no longer being animated. */ + doneAnimating; + /** Caption, if specified. */ + caption; + /** Original width of image. */ + originalWidth; + /** Original height of image. */ + originalHeight; + originInlineStyles; + placeholder; + _changedAncestorList; + newHeight; + newWidth; + windowWidth; + windowHeight; + attrWidth; + attrHeight; + _overlay; + _photoCaption; + constructor(el, options) { + super(el, options, Materialbox); + this.el.M_Materialbox = this; + this.options = { + ...Materialbox.defaults, + ...options + }; + this.overlayActive = false; + this.doneAnimating = true; + this.placeholder = document.createElement('div'); + this.placeholder.classList.add('material-placeholder'); + this.originalWidth = 0; + this.originalHeight = 0; + this.originInlineStyles = this.el.getAttribute('style'); + this.caption = this.el.getAttribute('data-caption') || ''; + // Wrap + this.el.before(this.placeholder); + this.placeholder.append(this.el); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$c; + } + /** + * Initializes instances of MaterialBox. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Materialbox); + } + static getInstance(el) { + return el.M_Materialbox; + } + destroy() { + this._removeEventHandlers(); + this.el.M_Materialbox = undefined; + // Unwrap image + //this.placeholder.after(this.el).remove(); + this.placeholder.remove(); + this.el.removeAttribute('style'); + } + _setupEventHandlers() { + this.el.addEventListener('click', this._handleMaterialboxClick); + } + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleMaterialboxClick); + } + _handleMaterialboxClick = () => { + // If already modal, return to original + if (this.doneAnimating === false || (this.overlayActive && this.doneAnimating)) + this.close(); + else + this.open(); + }; + _handleWindowScroll = () => { + if (this.overlayActive) + this.close(); + }; + _handleWindowResize = () => { + if (this.overlayActive) + this.close(); + }; + _handleWindowEscape = (e) => { + if (Utils.keys.ESC.includes(e.key) && this.doneAnimating && this.overlayActive) + this.close(); + }; + _makeAncestorsOverflowVisible() { + this._changedAncestorList = []; + let ancestor = this.placeholder.parentNode; + while (ancestor !== null && ancestor !== document) { + const curr = ancestor; + if (curr.style.overflow !== 'visible') { + curr.style.overflow = 'visible'; + this._changedAncestorList.push(curr); + } + ancestor = ancestor.parentNode; + } + } + _offset(el) { + const box = el.getBoundingClientRect(); + const docElem = document.documentElement; + return { + top: box.top + window.pageYOffset - docElem.clientTop, + left: box.left + window.pageXOffset - docElem.clientLeft + }; + } + _updateVars() { + this.windowWidth = window.innerWidth; + this.windowHeight = window.innerHeight; + this.caption = this.el.getAttribute('data-caption') || ''; + } + // Image + _animateImageIn() { + this.el.style.maxHeight = this.newHeight.toString() + 'px'; + this.el.style.maxWidth = this.newWidth.toString() + 'px'; + const duration = this.options.inDuration; + // from + this.el.style.transition = 'none'; + this.el.style.height = this.originalHeight + 'px'; + this.el.style.width = this.originalWidth + 'px'; + setTimeout(() => { + // easeOutQuad + this.el.style.transition = `height ${duration}ms ease, + width ${duration}ms ease, + left ${duration}ms ease, + top ${duration}ms ease + `; + // to + this.el.style.height = this.newHeight + 'px'; + this.el.style.width = this.newWidth + 'px'; + this.el.style.left = (Utils.getDocumentScrollLeft() + + this.windowWidth / 2 - + this._offset(this.placeholder).left - + this.newWidth / 2) + 'px'; + this.el.style.top = (Utils.getDocumentScrollTop() + + this.windowHeight / 2 - + this._offset(this.placeholder).top - + this.newHeight / 2) + 'px'; + }, 1); + setTimeout(() => { + this.doneAnimating = true; + if (typeof this.options.onOpenEnd === 'function') + this.options.onOpenEnd.call(this, this.el); + }, duration); + /* + anim({ + targets: this.el, // image + height: [this.originalHeight, this.newHeight], + width: [this.originalWidth, this.newWidth], + left: + Utils.getDocumentScrollLeft() + + this.windowWidth / 2 - + this._offset(this.placeholder).left - + this.newWidth / 2, + top: + Utils.getDocumentScrollTop() + + this.windowHeight / 2 - + this._offset(this.placeholder).top - + this.newHeight / 2, + + duration: this.options.inDuration, + easing: 'easeOutQuad', + complete: () => { + this.doneAnimating = true; + if (typeof this.options.onOpenEnd === 'function') this.options.onOpenEnd.call(this, this.el); + } + }); + */ + } + _animateImageOut() { + const duration = this.options.outDuration; + // easeOutQuad + this.el.style.transition = `height ${duration}ms ease, + width ${duration}ms ease, + left ${duration}ms ease, + top ${duration}ms ease + `; + // to + this.el.style.height = this.originalWidth + 'px'; + this.el.style.width = this.originalWidth + 'px'; + this.el.style.left = '0'; + this.el.style.top = '0'; + setTimeout(() => { + this.placeholder.style.height = ''; + this.placeholder.style.width = ''; + this.placeholder.style.position = ''; + this.placeholder.style.top = ''; + this.placeholder.style.left = ''; + // Revert to width or height attribute + if (this.attrWidth) + this.el.setAttribute('width', this.attrWidth.toString()); + if (this.attrHeight) + this.el.setAttribute('height', this.attrHeight.toString()); + this.el.removeAttribute('style'); + this.originInlineStyles && this.el.setAttribute('style', this.originInlineStyles); + // Remove class + this.el.classList.remove('active'); + this.doneAnimating = true; + // Remove overflow overrides on ancestors + this._changedAncestorList.forEach(anchestor => anchestor.style.overflow = ''); + // onCloseEnd callback + if (typeof this.options.onCloseEnd === 'function') + this.options.onCloseEnd.call(this, this.el); + }, duration); + } + // Caption + _addCaption() { + this._photoCaption = document.createElement('div'); + this._photoCaption.classList.add('materialbox-caption'); + this._photoCaption.innerText = this.caption; + document.body.append(this._photoCaption); + this._photoCaption.style.display = 'inline'; + // Animate + this._photoCaption.style.transition = 'none'; + this._photoCaption.style.opacity = '0'; + const duration = this.options.inDuration; + setTimeout(() => { + this._photoCaption.style.transition = `opacity ${duration}ms ease`; + this._photoCaption.style.opacity = '1'; + }, 1); + } + _removeCaption() { + const duration = this.options.outDuration; + this._photoCaption.style.transition = `opacity ${duration}ms ease`; + this._photoCaption.style.opacity = '0'; + setTimeout(() => { + this._photoCaption.remove(); + }, duration); + } + // Overlay + _addOverlay() { + this._overlay = document.createElement('div'); + this._overlay.id = 'materialbox-overlay'; + this._overlay.addEventListener('click', e => { + if (this.doneAnimating) + this.close(); + }, { once: true }); + // Put before in origin image to preserve z-index layering. + this.el.before(this._overlay); + // Set dimensions if needed + const overlayOffset = this._overlay.getBoundingClientRect(); + this._overlay.style.width = this.windowWidth + 'px'; + this._overlay.style.height = this.windowHeight + 'px'; + this._overlay.style.left = -1 * overlayOffset.left + 'px'; + this._overlay.style.top = -1 * overlayOffset.top + 'px'; + // Animate + this._overlay.style.transition = 'none'; + this._overlay.style.opacity = '0'; + const duration = this.options.inDuration; + setTimeout(() => { + this._overlay.style.transition = `opacity ${duration}ms ease`; + this._overlay.style.opacity = '1'; + }, 1); + } + _removeOverlay() { + const duration = this.options.outDuration; + this._overlay.style.transition = `opacity ${duration}ms ease`; + this._overlay.style.opacity = '0'; + setTimeout(() => { + this.overlayActive = false; + this._overlay.remove(); + }, duration); + } + /** + * Open materialbox. + */ + open = () => { + this._updateVars(); + this.originalWidth = this.el.getBoundingClientRect().width; + this.originalHeight = this.el.getBoundingClientRect().height; + // Set states + this.doneAnimating = false; + this.el.classList.add('active'); + this.overlayActive = true; + // onOpenStart callback + if (typeof this.options.onOpenStart === 'function') + this.options.onOpenStart.call(this, this.el); + // Set positioning for placeholder + this.placeholder.style.width = this.placeholder.getBoundingClientRect().width + 'px'; + this.placeholder.style.height = this.placeholder.getBoundingClientRect().height + 'px'; + this.placeholder.style.position = 'relative'; + this.placeholder.style.top = '0'; + this.placeholder.style.left = '0'; + this._makeAncestorsOverflowVisible(); + // Set css on origin + this.el.style.position = 'absolute'; + this.el.style.zIndex = '1000'; + this.el.style.willChange = 'left, top, width, height'; + // Change from width or height attribute to css + this.attrWidth = this.el.getAttribute('width'); + this.attrHeight = this.el.getAttribute('height'); + if (this.attrWidth) { + this.el.style.width = this.attrWidth + 'px'; + this.el.removeAttribute('width'); + } + if (this.attrHeight) { + this.el.style.width = this.attrHeight + 'px'; + this.el.removeAttribute('height'); + } + this._addOverlay(); + // Add and animate caption if it exists + if (this.caption !== '') + this._addCaption(); + // Resize Image + const widthPercent = this.originalWidth / this.windowWidth; + const heightPercent = this.originalHeight / this.windowHeight; + this.newWidth = 0; + this.newHeight = 0; + if (widthPercent > heightPercent) { + // Width first + const ratio = this.originalHeight / this.originalWidth; + this.newWidth = this.windowWidth * 0.9; + this.newHeight = this.windowWidth * 0.9 * ratio; + } + else { + // Height first + const ratio = this.originalWidth / this.originalHeight; + this.newWidth = this.windowHeight * 0.9 * ratio; + this.newHeight = this.windowHeight * 0.9; + } + this._animateImageIn(); + // Handle Exit triggers + window.addEventListener('scroll', this._handleWindowScroll); + window.addEventListener('resize', this._handleWindowResize); + window.addEventListener('keyup', this._handleWindowEscape); + }; + /** + * Close materialbox. + */ + close = () => { + this._updateVars(); + this.doneAnimating = false; + // onCloseStart callback + if (typeof this.options.onCloseStart === 'function') + this.options.onCloseStart.call(this, this.el); + //anim.remove(this.el); + //anim.remove(this._overlay); + //if (this.caption !== '') anim.remove(this._photoCaption); + // disable exit handlers + window.removeEventListener('scroll', this._handleWindowScroll); + window.removeEventListener('resize', this._handleWindowResize); + window.removeEventListener('keyup', this._handleWindowEscape); + this._removeOverlay(); + this._animateImageOut(); + if (this.caption !== '') + this._removeCaption(); + }; +} + +let _defaults$b = { + responsiveThreshold: 0 // breakpoint for swipeable +}; +class Parallax extends Component { + _enabled; + _img; + static _parallaxes = []; + static _handleScrollThrottled; + static _handleWindowResizeThrottled; + constructor(el, options) { + super(el, options, Parallax); + this.el.M_Parallax = this; + this.options = { + ...Parallax.defaults, + ...options + }; + this._enabled = window.innerWidth > this.options.responsiveThreshold; + this._img = this.el.querySelector('img'); + this._updateParallax(); + this._setupEventHandlers(); + this._setupStyles(); + Parallax._parallaxes.push(this); + } + static get defaults() { + return _defaults$b; + } + /** + * Initializes instances of Parallax. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Parallax); + } + static getInstance(el) { + return el.M_Parallax; + } + destroy() { + Parallax._parallaxes.splice(Parallax._parallaxes.indexOf(this), 1); + this._img.style.transform = ''; + this._removeEventHandlers(); + this.el.M_Parallax = undefined; + } + static _handleScroll() { + for (let i = 0; i < Parallax._parallaxes.length; i++) { + let parallaxInstance = Parallax._parallaxes[i]; + parallaxInstance._updateParallax.call(parallaxInstance); + } + } + static _handleWindowResize() { + for (let i = 0; i < Parallax._parallaxes.length; i++) { + let parallaxInstance = Parallax._parallaxes[i]; + parallaxInstance._enabled = + window.innerWidth > parallaxInstance.options.responsiveThreshold; + } + } + _setupEventHandlers() { + this._img.addEventListener('load', this._handleImageLoad); + if (Parallax._parallaxes.length === 0) { + if (!Parallax._handleScrollThrottled) { + Parallax._handleScrollThrottled = Utils.throttle(Parallax._handleScroll, 5); + } + if (!Parallax._handleWindowResizeThrottled) { + Parallax._handleWindowResizeThrottled = Utils.throttle(Parallax._handleWindowResize, 5); + } + window.addEventListener('scroll', Parallax._handleScrollThrottled); + window.addEventListener('resize', Parallax._handleWindowResizeThrottled); + } + } + _removeEventHandlers() { + this._img.removeEventListener('load', this._handleImageLoad); + if (Parallax._parallaxes.length === 0) { + window.removeEventListener('scroll', Parallax._handleScrollThrottled); + window.removeEventListener('resize', Parallax._handleWindowResizeThrottled); + } + } + _setupStyles() { + this._img.style.opacity = '1'; + } + _handleImageLoad = () => { + this._updateParallax(); + }; + _offset(el) { + const box = el.getBoundingClientRect(); + const docElem = document.documentElement; + return { + top: box.top + window.pageYOffset - docElem.clientTop, + left: box.left + window.pageXOffset - docElem.clientLeft + }; + } + _updateParallax() { + const containerHeight = this.el.getBoundingClientRect().height > 0 ? this.el.parentNode.offsetHeight : 500; + const imgHeight = this._img.offsetHeight; + const parallaxDist = imgHeight - containerHeight; + const bottom = this._offset(this.el).top + containerHeight; + const top = this._offset(this.el).top; + const scrollTop = Utils.getDocumentScrollTop(); + const windowHeight = window.innerHeight; + const windowBottom = scrollTop + windowHeight; + const percentScrolled = (windowBottom - top) / (containerHeight + windowHeight); + const parallax = parallaxDist * percentScrolled; + if (!this._enabled) { + this._img.style.transform = ''; + } + else if (bottom > scrollTop && top < scrollTop + windowHeight) { + this._img.style.transform = `translate3D(-50%, ${parallax}px, 0)`; + } + } +} + +let _defaults$a = { + top: 0, + bottom: Infinity, + offset: 0, + onPositionChange: null +}; +class Pushpin extends Component { + static _pushpins; + originalOffset; + constructor(el, options) { + super(el, options, Pushpin); + this.el.M_Pushpin = this; + this.options = { + ...Pushpin.defaults, + ...options + }; + this.originalOffset = this.el.offsetTop; + Pushpin._pushpins.push(this); + this._setupEventHandlers(); + this._updatePosition(); + } + static get defaults() { + return _defaults$a; + } + /** + * Initializes instances of Pushpin. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Pushpin); + } + static getInstance(el) { + return el.M_Pushpin; + } + destroy() { + this.el.style.top = null; + this._removePinClasses(); + // Remove pushpin Inst + let index = Pushpin._pushpins.indexOf(this); + Pushpin._pushpins.splice(index, 1); + if (Pushpin._pushpins.length === 0) { + this._removeEventHandlers(); + } + this.el.M_Pushpin = undefined; + } + static _updateElements() { + for (let elIndex in Pushpin._pushpins) { + let pInstance = Pushpin._pushpins[elIndex]; + pInstance._updatePosition(); + } + } + _setupEventHandlers() { + document.addEventListener('scroll', Pushpin._updateElements); + } + _removeEventHandlers() { + document.removeEventListener('scroll', Pushpin._updateElements); + } + _updatePosition() { + let scrolled = Utils.getDocumentScrollTop() + this.options.offset; + if (this.options.top <= scrolled && + this.options.bottom >= scrolled && + !this.el.classList.contains('pinned')) { + this._removePinClasses(); + this.el.style.top = `${this.options.offset}px`; + this.el.classList.add('pinned'); + // onPositionChange callback + if (typeof this.options.onPositionChange === 'function') { + this.options.onPositionChange.call(this, 'pinned'); + } + } + // Add pin-top (when scrolled position is above top) + if (scrolled < this.options.top && !this.el.classList.contains('pin-top')) { + this._removePinClasses(); + this.el.style.top = '0'; + this.el.classList.add('pin-top'); + // onPositionChange callback + if (typeof this.options.onPositionChange === 'function') { + this.options.onPositionChange.call(this, 'pin-top'); + } + } + // Add pin-bottom (when scrolled position is below bottom) + if (scrolled > this.options.bottom && !this.el.classList.contains('pin-bottom')) { + this._removePinClasses(); + this.el.classList.add('pin-bottom'); + this.el.style.top = `${this.options.bottom - this.originalOffset}px`; + // onPositionChange callback + if (typeof this.options.onPositionChange === 'function') { + this.options.onPositionChange.call(this, 'pin-bottom'); + } + } + } + _removePinClasses() { + // IE 11 bug (can't remove multiple classes in one line) + this.el.classList.remove('pin-top'); + this.el.classList.remove('pinned'); + this.el.classList.remove('pin-bottom'); + } + static { + Pushpin._pushpins = []; + } +} + +let _defaults$9 = { + throttle: 100, + scrollOffset: 200, // offset - 200 allows elements near bottom of page to scroll + activeClass: 'active', + getActiveElement: (id) => { return 'a[href="#' + id + '"]'; } +}; +class ScrollSpy extends Component { + static _elements; + static _count; + static _increment; + tickId; + id; + static _elementsInView; + static _visibleElements; + static _ticks; + constructor(el, options) { + super(el, options, ScrollSpy); + this.el.M_ScrollSpy = this; + this.options = { + ...ScrollSpy.defaults, + ...options + }; + ScrollSpy._elements.push(this); + ScrollSpy._count++; + ScrollSpy._increment++; + this.tickId = -1; + this.id = ScrollSpy._increment; + this._setupEventHandlers(); + this._handleWindowScroll(); + } + static get defaults() { + return _defaults$9; + } + /** + * Initializes instances of ScrollSpy. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, ScrollSpy); + } + static getInstance(el) { + return el.M_ScrollSpy; + } + destroy() { + ScrollSpy._elements.splice(ScrollSpy._elements.indexOf(this), 1); + ScrollSpy._elementsInView.splice(ScrollSpy._elementsInView.indexOf(this), 1); + ScrollSpy._visibleElements.splice(ScrollSpy._visibleElements.indexOf(this.el), 1); + ScrollSpy._count--; + this._removeEventHandlers(); + const actElem = document.querySelector(this.options.getActiveElement(this.el.id)); + actElem.classList.remove(this.options.activeClass); + this.el.M_ScrollSpy = undefined; + } + _setupEventHandlers() { + if (ScrollSpy._count === 1) { + window.addEventListener('scroll', this._handleWindowScroll); + window.addEventListener('resize', this._handleThrottledResize); + document.body.addEventListener('click', this._handleTriggerClick); + } + } + _removeEventHandlers() { + if (ScrollSpy._count === 0) { + window.removeEventListener('scroll', this._handleWindowScroll); + window.removeEventListener('resize', this._handleThrottledResize); + document.body.removeEventListener('click', this._handleTriggerClick); + } + } + _handleThrottledResize = Utils.throttle(function () { this._handleWindowScroll(); }, 200).bind(this); + _handleTriggerClick = (e) => { + const trigger = e.target; + for (let i = ScrollSpy._elements.length - 1; i >= 0; i--) { + const scrollspy = ScrollSpy._elements[i]; + const x = document.querySelector('a[href="#' + scrollspy.el.id + '"]'); + if (trigger === x) { + e.preventDefault(); + scrollspy.el.scrollIntoView({ behavior: 'smooth' }); + break; + } + } + }; + _handleWindowScroll = () => { + // unique tick id + ScrollSpy._ticks++; + // viewport rectangle + let top = Utils.getDocumentScrollTop(), left = Utils.getDocumentScrollLeft(), right = left + window.innerWidth, bottom = top + window.innerHeight; + // determine which elements are in view + let intersections = ScrollSpy._findElements(top, right, bottom, left); + for (let i = 0; i < intersections.length; i++) { + let scrollspy = intersections[i]; + let lastTick = scrollspy.tickId; + if (lastTick < 0) { + // entered into view + scrollspy._enter(); + } + // update tick id + scrollspy.tickId = ScrollSpy._ticks; + } + for (let i = 0; i < ScrollSpy._elementsInView.length; i++) { + let scrollspy = ScrollSpy._elementsInView[i]; + let lastTick = scrollspy.tickId; + if (lastTick >= 0 && lastTick !== ScrollSpy._ticks) { + // exited from view + scrollspy._exit(); + scrollspy.tickId = -1; + } + } + // remember elements in view for next tick + ScrollSpy._elementsInView = intersections; + }; + static _offset(el) { + const box = el.getBoundingClientRect(); + const docElem = document.documentElement; + return { + top: box.top + window.pageYOffset - docElem.clientTop, + left: box.left + window.pageXOffset - docElem.clientLeft + }; + } + static _findElements(top, right, bottom, left) { + let hits = []; + for (let i = 0; i < ScrollSpy._elements.length; i++) { + let scrollspy = ScrollSpy._elements[i]; + let currTop = top + scrollspy.options.scrollOffset || 200; + if (scrollspy.el.getBoundingClientRect().height > 0) { + let elTop = ScrollSpy._offset(scrollspy.el).top, elLeft = ScrollSpy._offset(scrollspy.el).left, elRight = elLeft + scrollspy.el.getBoundingClientRect().width, elBottom = elTop + scrollspy.el.getBoundingClientRect().height; + let isIntersect = !(elLeft > right || + elRight < left || + elTop > bottom || + elBottom < currTop); + if (isIntersect) { + hits.push(scrollspy); + } + } + } + return hits; + } + _enter() { + ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0); + if (ScrollSpy._visibleElements[0]) { + const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id)); + actElem?.classList.remove(this.options.activeClass); + if (ScrollSpy._visibleElements[0].M_ScrollSpy && this.id < ScrollSpy._visibleElements[0].M_ScrollSpy.id) { + ScrollSpy._visibleElements.unshift(this.el); + } + else { + ScrollSpy._visibleElements.push(this.el); + } + } + else { + ScrollSpy._visibleElements.push(this.el); + } + const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id); + document.querySelector(selector)?.classList.add(this.options.activeClass); + } + _exit() { + ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0); + if (ScrollSpy._visibleElements[0]) { + const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id)); + actElem?.classList.remove(this.options.activeClass); + ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((x) => x.id != this.el.id); + if (ScrollSpy._visibleElements[0]) { + // Check if empty + const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id); + document.querySelector(selector)?.classList.add(this.options.activeClass); + } + } + } + static { + ScrollSpy._elements = []; + ScrollSpy._elementsInView = []; + ScrollSpy._visibleElements = []; // Array. + ScrollSpy._count = 0; + ScrollSpy._increment = 0; + ScrollSpy._ticks = 0; + } +} + +const _defaults$8 = { + edge: 'left', + draggable: true, + dragTargetWidth: '10px', + inDuration: 250, + outDuration: 200, + onOpenStart: null, + onOpenEnd: null, + onCloseStart: null, + onCloseEnd: null, + preventScrolling: true +}; +class Sidenav extends Component { + id; + /** Describes open/close state of Sidenav. */ + isOpen; + /** Describes if sidenav is fixed. */ + isFixed; + /** Describes if Sidenav is being dragged. */ + isDragged; + lastWindowWidth; + lastWindowHeight; + static _sidenavs; + _overlay; + dragTarget; + _startingXpos; + _xPos; + _time; + _width; + _initialScrollTop; + _verticallyScrolling; + deltaX; + velocityX; + percentOpen; + constructor(el, options) { + super(el, options, Sidenav); + this.el.M_Sidenav = this; + this.options = { + ...Sidenav.defaults, + ...options + }; + this.id = this.el.id; + this.isOpen = false; + this.isFixed = this.el.classList.contains('sidenav-fixed'); + this.isDragged = false; + // Window size variables for window resize checks + this.lastWindowWidth = window.innerWidth; + this.lastWindowHeight = window.innerHeight; + this._createOverlay(); + this._createDragTarget(); + this._setupEventHandlers(); + this._setupClasses(); + this._setupFixed(); + Sidenav._sidenavs.push(this); + } + static get defaults() { + return _defaults$8; + } + /** + * Initializes instances of Sidenav. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Sidenav); + } + static getInstance(el) { + return el.M_Sidenav; + } + destroy() { + this._removeEventHandlers(); + this._enableBodyScrolling(); + this._overlay.parentNode.removeChild(this._overlay); + this.dragTarget.parentNode.removeChild(this.dragTarget); + this.el.M_Sidenav = undefined; + this.el.style.transform = ''; + const index = Sidenav._sidenavs.indexOf(this); + if (index >= 0) { + Sidenav._sidenavs.splice(index, 1); + } + } + _createOverlay() { + this._overlay = document.createElement('div'); + this._overlay.classList.add('sidenav-overlay'); + this._overlay.addEventListener('click', this.close); + document.body.appendChild(this._overlay); + } + _setupEventHandlers() { + if (Sidenav._sidenavs.length === 0) { + document.body.addEventListener('click', this._handleTriggerClick); + } + var passiveIfSupported = null; + this.dragTarget.addEventListener('touchmove', this._handleDragTargetDrag, passiveIfSupported); + this.dragTarget.addEventListener('touchend', this._handleDragTargetRelease); + this._overlay.addEventListener('touchmove', this._handleCloseDrag, passiveIfSupported); + this._overlay.addEventListener('touchend', this._handleCloseRelease); + this.el.addEventListener('touchmove', this._handleCloseDrag, passiveIfSupported); + this.el.addEventListener('touchend', this._handleCloseRelease); + this.el.addEventListener('click', this._handleCloseTriggerClick); + // Add resize for side nav fixed + if (this.isFixed) { + window.addEventListener('resize', this._handleWindowResize); + } + } + _removeEventHandlers() { + if (Sidenav._sidenavs.length === 1) { + document.body.removeEventListener('click', this._handleTriggerClick); + } + this.dragTarget.removeEventListener('touchmove', this._handleDragTargetDrag); + this.dragTarget.removeEventListener('touchend', this._handleDragTargetRelease); + this._overlay.removeEventListener('touchmove', this._handleCloseDrag); + this._overlay.removeEventListener('touchend', this._handleCloseRelease); + this.el.removeEventListener('touchmove', this._handleCloseDrag); + this.el.removeEventListener('touchend', this._handleCloseRelease); + this.el.removeEventListener('click', this._handleCloseTriggerClick); + // Remove resize for side nav fixed + if (this.isFixed) { + window.removeEventListener('resize', this._handleWindowResize); + } + } + _handleTriggerClick(e) { + const trigger = e.target.closest('.sidenav-trigger'); + if (e.target && trigger) { + const sidenavId = Utils.getIdFromTrigger(trigger); + const sidenavInstance = document.getElementById(sidenavId).M_Sidenav; + if (sidenavInstance) { + sidenavInstance.open(trigger); + } + e.preventDefault(); + } + } + // Set variables needed at the beginning of drag and stop any current transition. + _startDrag(e) { + const clientX = e.targetTouches[0].clientX; + this.isDragged = true; + this._startingXpos = clientX; + this._xPos = this._startingXpos; + this._time = Date.now(); + this._width = this.el.getBoundingClientRect().width; + this._overlay.style.display = 'block'; + this._initialScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop(); + this._verticallyScrolling = false; + } + //Set variables needed at each drag move update tick + _dragMoveUpdate(e) { + const clientX = e.targetTouches[0].clientX; + const currentScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop(); + this.deltaX = Math.abs(this._xPos - clientX); + this._xPos = clientX; + this.velocityX = this.deltaX / (Date.now() - this._time); + this._time = Date.now(); + if (this._initialScrollTop !== currentScrollTop) { + this._verticallyScrolling = true; + } + } + _handleDragTargetDrag = (e) => { + // Check if draggable + if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) { + return; + } + // If not being dragged, set initial drag start variables + if (!this.isDragged) { + this._startDrag(e); + } + // Run touchmove updates + this._dragMoveUpdate(e); + // Calculate raw deltaX + let totalDeltaX = this._xPos - this._startingXpos; + // dragDirection is the attempted user drag direction + const dragDirection = totalDeltaX > 0 ? 'right' : 'left'; + // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction + totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX)); + if (this.options.edge === dragDirection) { + totalDeltaX = 0; + } + /** + * transformX is the drag displacement + * transformPrefix is the initial transform placement + * Invert values if Sidenav is right edge + */ + let transformX = totalDeltaX; + let transformPrefix = 'translateX(-100%)'; + if (this.options.edge === 'right') { + transformPrefix = 'translateX(100%)'; + transformX = -transformX; + } + // Calculate open/close percentage of sidenav, with open = 1 and close = 0 + this.percentOpen = Math.min(1, totalDeltaX / this._width); + // Set transform and opacity styles + this.el.style.transform = `${transformPrefix} translateX(${transformX}px)`; + this._overlay.style.opacity = this.percentOpen.toString(); + }; + _handleDragTargetRelease = () => { + if (this.isDragged) { + if (this.percentOpen > 0.2) { + this.open(); + } + else { + this._animateOut(); + } + this.isDragged = false; + this._verticallyScrolling = false; + } + }; + _handleCloseDrag = (e) => { + if (this.isOpen) { + // Check if draggable + if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) { + return; + } + // If not being dragged, set initial drag start variables + if (!this.isDragged) { + this._startDrag(e); + } + // Run touchmove updates + this._dragMoveUpdate(e); + // Calculate raw deltaX + let totalDeltaX = this._xPos - this._startingXpos; + // dragDirection is the attempted user drag direction + let dragDirection = totalDeltaX > 0 ? 'right' : 'left'; + // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction + totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX)); + if (this.options.edge !== dragDirection) { + totalDeltaX = 0; + } + let transformX = -totalDeltaX; + if (this.options.edge === 'right') { + transformX = -transformX; + } + // Calculate open/close percentage of sidenav, with open = 1 and close = 0 + this.percentOpen = Math.min(1, 1 - totalDeltaX / this._width); + // Set transform and opacity styles + this.el.style.transform = `translateX(${transformX}px)`; + this._overlay.style.opacity = this.percentOpen.toString(); + } + }; + _handleCloseRelease = () => { + if (this.isOpen && this.isDragged) { + if (this.percentOpen > 0.8) { + this._animateIn(); + } + else { + this.close(); + } + this.isDragged = false; + this._verticallyScrolling = false; + } + }; + // Handles closing of Sidenav when element with class .sidenav-close + _handleCloseTriggerClick = (e) => { + const closeTrigger = e.target.closest('.sidenav-close'); + if (closeTrigger && !this._isCurrentlyFixed()) { + this.close(); + } + }; + _handleWindowResize = () => { + // Only handle horizontal resizes + if (this.lastWindowWidth !== window.innerWidth) { + if (window.innerWidth > 992) { + this.open(); + } + else { + this.close(); + } + } + this.lastWindowWidth = window.innerWidth; + this.lastWindowHeight = window.innerHeight; + }; + _setupClasses() { + if (this.options.edge === 'right') { + this.el.classList.add('right-aligned'); + this.dragTarget.classList.add('right-aligned'); + } + } + _removeClasses() { + this.el.classList.remove('right-aligned'); + this.dragTarget.classList.remove('right-aligned'); + } + _setupFixed() { + if (this._isCurrentlyFixed()) + this.open(); + } + _isCurrentlyFixed() { + return this.isFixed && window.innerWidth > 992; + } + _createDragTarget() { + const dragTarget = document.createElement('div'); + dragTarget.classList.add('drag-target'); + dragTarget.style.width = this.options.dragTargetWidth; + document.body.appendChild(dragTarget); + this.dragTarget = dragTarget; + } + _preventBodyScrolling() { + document.body.style.overflow = 'hidden'; + } + _enableBodyScrolling() { + document.body.style.overflow = ''; + } + /** + * Opens Sidenav. + */ + open = () => { + if (this.isOpen === true) + return; + this.isOpen = true; + // Run onOpenStart callback + if (typeof this.options.onOpenStart === 'function') { + this.options.onOpenStart.call(this, this.el); + } + // Handle fixed Sidenav + if (this._isCurrentlyFixed()) { + // Show if fixed + this.el.style.transform = 'translateX(0)'; + this._enableBodyScrolling(); + this._overlay.style.display = 'none'; + } + // Handle non-fixed Sidenav + else { + if (this.options.preventScrolling) + this._preventBodyScrolling(); + if (!this.isDragged || this.percentOpen != 1) + this._animateIn(); + } + }; + /** + * Closes Sidenav. + */ + close = () => { + if (this.isOpen === false) + return; + this.isOpen = false; + // Run onCloseStart callback + if (typeof this.options.onCloseStart === 'function') { + this.options.onCloseStart.call(this, this.el); + } + // Handle fixed Sidenav + if (this._isCurrentlyFixed()) { + const transformX = this.options.edge === 'left' ? '-105%' : '105%'; + this.el.style.transform = `translateX(${transformX})`; + } + // Handle non-fixed Sidenav + else { + this._enableBodyScrolling(); + if (!this.isDragged || this.percentOpen != 0) { + this._animateOut(); + } + else { + this._overlay.style.display = 'none'; + } + } + }; + _animateIn() { + this._animateSidenavIn(); + this._animateOverlayIn(); + } + _animateOut() { + this._animateSidenavOut(); + this._animateOverlayOut(); + } + _animateSidenavIn() { + let slideOutPercent = this.options.edge === 'left' ? -1 : 1; + if (this.isDragged) { + slideOutPercent = + this.options.edge === 'left' + ? slideOutPercent + this.percentOpen + : slideOutPercent - this.percentOpen; + } + const duration = this.options.inDuration; + // from + this.el.style.transition = 'none'; + this.el.style.transform = 'translateX(' + (slideOutPercent * 100) + '%)'; + setTimeout(() => { + this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad + // to + this.el.style.transform = 'translateX(0)'; + }, 1); + setTimeout(() => { + if (typeof this.options.onOpenEnd === 'function') + this.options.onOpenEnd.call(this, this.el); + }, duration); + } + _animateSidenavOut() { + const endPercent = this.options.edge === 'left' ? -1 : 1; + if (this.isDragged) { + this.options.edge === 'left' + ? endPercent + this.percentOpen + : endPercent - this.percentOpen; + } + const duration = this.options.outDuration; + this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad + // to + this.el.style.transform = 'translateX(' + (endPercent * 100) + '%)'; + setTimeout(() => { + if (typeof this.options.onCloseEnd === 'function') + this.options.onCloseEnd.call(this, this.el); + }, duration); + } + _animateOverlayIn() { + let start = 0; + if (this.isDragged) + start = this.percentOpen; + else + this._overlay.style.display = 'block'; + // Animation + const duration = this.options.inDuration; + // from + this._overlay.style.transition = 'none'; + this._overlay.style.opacity = start.toString(); + // easeOutQuad + setTimeout(() => { + this._overlay.style.transition = `opacity ${duration}ms ease`; + // to + this._overlay.style.opacity = '1'; + }, 1); + } + _animateOverlayOut() { + const duration = this.options.outDuration; + // easeOutQuad + this._overlay.style.transition = `opacity ${duration}ms ease`; + // to + this._overlay.style.opacity = '0'; + setTimeout(() => { + this._overlay.style.display = 'none'; + }, duration); + } + static { + Sidenav._sidenavs = []; + } +} + +let _defaults$7 = { + duration: 300, + onShow: null, + swipeable: false, + responsiveThreshold: Infinity // breakpoint for swipeable +}; +class Tabs extends Component { + _tabLinks; + _index; + _indicator; + _tabWidth; + _tabsWidth; + _tabsCarousel; + _activeTabLink; + _content; + constructor(el, options) { + super(el, options, Tabs); + this.el.M_Tabs = this; + this.options = { + ...Tabs.defaults, + ...options + }; + this._tabLinks = this.el.querySelectorAll('li.tab > a'); + this._index = 0; + this._setupActiveTabLink(); + if (this.options.swipeable) { + this._setupSwipeableTabs(); + } + else { + this._setupNormalTabs(); + } + // Setup tabs indicator after content to ensure accurate widths + this._setTabsAndTabWidth(); + this._createIndicator(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$7; + } + /** + * Initializes instances of Tabs. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Tabs); + } + static getInstance(el) { + return el.M_Tabs; + } + destroy() { + this._removeEventHandlers(); + this._indicator.parentNode.removeChild(this._indicator); + if (this.options.swipeable) { + this._teardownSwipeableTabs(); + } + else { + this._teardownNormalTabs(); + } + this.el.M_Tabs = undefined; + } + /** + * The index of tab that is currently shown. + */ + get index() { return this._index; } + _setupEventHandlers() { + window.addEventListener('resize', this._handleWindowResize); + this.el.addEventListener('click', this._handleTabClick); + } + _removeEventHandlers() { + window.removeEventListener('resize', this._handleWindowResize); + this.el.removeEventListener('click', this._handleTabClick); + } + _handleWindowResize = () => { + this._setTabsAndTabWidth(); + if (this._tabWidth !== 0 && this._tabsWidth !== 0) { + this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px'; + this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px'; + } + }; + _handleTabClick = (e) => { + const tabLink = e.target; + const tab = tabLink.parentElement; + // Handle click on tab link only + if (!tabLink || !tab.classList.contains('tab')) + return; + // is disabled? + if (tab.classList.contains('disabled')) { + e.preventDefault(); + return; + } + // Act as regular link if target attribute is specified. + if (tabLink.hasAttribute('target')) + return; + // Make the old tab inactive. + this._activeTabLink.classList.remove('active'); + const _oldContent = this._content; + // Update the variables with the new link and content + this._activeTabLink = tabLink; + if (tabLink.hash) + this._content = document.querySelector(tabLink.hash); + this._tabLinks = this.el.querySelectorAll('li.tab > a'); + // Make the tab active + this._activeTabLink.classList.add('active'); + const prevIndex = this._index; + this._index = Math.max(Array.from(this._tabLinks).indexOf(tabLink), 0); + // Swap content + if (this.options.swipeable) { + if (this._tabsCarousel) { + this._tabsCarousel.set(this._index, () => { + if (typeof this.options.onShow === 'function') + this.options.onShow.call(this, this._content); + }); + } + } + else { + if (this._content) { + this._content.style.display = 'block'; + this._content.classList.add('active'); + if (typeof this.options.onShow === 'function') + this.options.onShow.call(this, this._content); + if (_oldContent && _oldContent !== this._content) { + _oldContent.style.display = 'none'; + _oldContent.classList.remove('active'); + } + } + } + // Update widths after content is swapped (scrollbar bugfix) + this._setTabsAndTabWidth(); + this._animateIndicator(prevIndex); + e.preventDefault(); + }; + _createIndicator() { + const indicator = document.createElement('li'); + indicator.classList.add('indicator'); + this.el.appendChild(indicator); + this._indicator = indicator; + this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px'; + this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px'; + } + _setupActiveTabLink() { + // If the location.hash matches one of the links, use that as the active tab. + this._activeTabLink = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === location.hash); + // If no match is found, use the first link or any with class 'active' as the initial active tab. + if (!this._activeTabLink) { + this._activeTabLink = this.el.querySelector('li.tab a.active'); + } + if (this._activeTabLink.length === 0) { + this._activeTabLink = this.el.querySelector('li.tab a'); + } + Array.from(this._tabLinks).forEach((a) => a.classList.remove('active')); + this._activeTabLink.classList.add('active'); + this._index = Math.max(Array.from(this._tabLinks).indexOf(this._activeTabLink), 0); + if (this._activeTabLink && this._activeTabLink.hash) { + this._content = document.querySelector(this._activeTabLink.hash); + if (this._content) + this._content.classList.add('active'); + } + } + _setupSwipeableTabs() { + // Change swipeable according to responsive threshold + if (window.innerWidth > this.options.responsiveThreshold) + this.options.swipeable = false; + const tabsContent = []; + this._tabLinks.forEach(a => { + if (a.hash) { + const currContent = document.querySelector(a.hash); + currContent.classList.add('carousel-item'); + tabsContent.push(currContent); + } + }); + // Create Carousel-Wrapper around Tab-Contents + const tabsWrapper = document.createElement('div'); + tabsWrapper.classList.add('tabs-content', 'carousel', 'carousel-slider'); + // Wrap around + tabsContent[0].parentElement.insertBefore(tabsWrapper, tabsContent[0]); + tabsContent.forEach(tabContent => { + tabsWrapper.appendChild(tabContent); + tabContent.style.display = ''; + }); + // Keep active tab index to set initial carousel slide + const tab = this._activeTabLink.parentElement; + const activeTabIndex = Array.from(tab.parentNode.children).indexOf(tab); + this._tabsCarousel = Carousel.init(tabsWrapper, { + fullWidth: true, + noWrap: true, + onCycleTo: (item) => { + const prevIndex = this._index; + this._index = Array.from(item.parentNode.children).indexOf(item); + this._activeTabLink.classList.remove('active'); + this._activeTabLink = Array.from(this._tabLinks)[this._index]; + this._activeTabLink.classList.add('active'); + this._animateIndicator(prevIndex); + if (typeof this.options.onShow === 'function') + this.options.onShow.call(this, this._content); + } + }); + // Set initial carousel slide to active tab + this._tabsCarousel.set(activeTabIndex); + } + _teardownSwipeableTabs() { + const tabsWrapper = this._tabsCarousel.el; + this._tabsCarousel.destroy(); + // Unwrap + tabsWrapper.after(tabsWrapper.children); + tabsWrapper.remove(); + } + _setupNormalTabs() { + // Hide Tabs Content + Array.from(this._tabLinks).forEach((a) => { + if (a === this._activeTabLink) + return; + if (a.hash) { + const currContent = document.querySelector(a.hash); + if (currContent) + currContent.style.display = 'none'; + } + }); + } + _teardownNormalTabs() { + // show Tabs Content + this._tabLinks.forEach((a) => { + if (a.hash) { + const currContent = document.querySelector(a.hash); + if (currContent) + currContent.style.display = ''; + } + }); + } + _setTabsAndTabWidth() { + this._tabsWidth = this.el.getBoundingClientRect().width; + this._tabWidth = Math.max(this._tabsWidth, this.el.scrollWidth) / this._tabLinks.length; + } + _calcRightPos(el) { + return Math.ceil(this._tabsWidth - el.offsetLeft - el.getBoundingClientRect().width); + } + _calcLeftPos(el) { + return Math.floor(el.offsetLeft); + } + /** + * Recalculate tab indicator position. This is useful when + * the indicator position is not correct. + */ + updateTabIndicator() { + this._setTabsAndTabWidth(); + this._animateIndicator(this._index); + } + _animateIndicator(prevIndex) { + let leftDelay = 0, rightDelay = 0; + const isMovingLeftOrStaying = (this._index - prevIndex >= 0); + if (isMovingLeftOrStaying) + leftDelay = 90; + else + rightDelay = 90; + // in v1: easeOutQuad + this._indicator.style.transition = ` + left ${this.options.duration}ms ease-out ${leftDelay}ms, + right ${this.options.duration}ms ease-out ${rightDelay}ms`; + this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px'; + this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px'; + } + /** + * Show tab content that corresponds to the tab with the id. + * @param tabId The id of the tab that you want to switch to. + */ + select(tabId) { + const tab = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === '#' + tabId); + if (tab) + tab.click(); + } +} + +let _defaults$6 = { + onOpen: null, + onClose: null +}; +class TapTarget extends Component { + /** + * If the tap target is open. + */ + isOpen; + wrapper; + _origin; + originEl; + waveEl; + contentEl; + constructor(el, options) { + super(el, options, TapTarget); + this.el.M_TapTarget = this; + this.options = { + ...TapTarget.defaults, + ...options + }; + this.isOpen = false; + // setup + this._origin = document.querySelector(`#${el.dataset.target}`); + this._setup(); + this._calculatePositioning(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$6; + } + /** + * Initializes instances of TapTarget. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, TapTarget); + } + static getInstance(el) { + return el.M_TapTarget; + } + destroy() { + this._removeEventHandlers(); + this.el.TapTarget = undefined; + } + _setupEventHandlers() { + this.el.addEventListener('click', this._handleTargetClick); + this.originEl.addEventListener('click', this._handleOriginClick); + // Resize + window.addEventListener('resize', this._handleThrottledResize); + } + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleTargetClick); + this.originEl.removeEventListener('click', this._handleOriginClick); + window.removeEventListener('resize', this._handleThrottledResize); + } + _handleThrottledResize = Utils.throttle(function () { this._handleResize(); }, 200).bind(this); + _handleTargetClick = () => { + this.open(); + }; + _handleOriginClick = () => { + this.close(); + }; + _handleResize = () => { + this._calculatePositioning(); + }; + _handleDocumentClick = (e) => { + if (!e.target.closest('.tap-target-wrapper')) { + this.close(); + e.preventDefault(); + e.stopPropagation(); + } + }; + _setup() { + // Creating tap target + this.wrapper = this.el.parentElement; + this.waveEl = this.wrapper.querySelector('.tap-target-wave'); + this.originEl = this.wrapper.querySelector('.tap-target-origin'); + this.contentEl = this.el.querySelector('.tap-target-content'); + // Creating wrapper + if (!this.wrapper.classList.contains('.tap-target-wrapper')) { + this.wrapper = document.createElement('div'); + this.wrapper.classList.add('tap-target-wrapper'); + this.el.before(this.wrapper); + this.wrapper.append(this.el); + } + // Creating content + if (!this.contentEl) { + this.contentEl = document.createElement('div'); + this.contentEl.classList.add('tap-target-content'); + this.el.append(this.contentEl); + } + // Creating foreground wave + if (!this.waveEl) { + this.waveEl = document.createElement('div'); + this.waveEl.classList.add('tap-target-wave'); + // Creating origin + if (!this.originEl) { + this.originEl = this._origin.cloneNode(true); // .clone(true, true); + this.originEl.classList.add('tap-target-origin'); + this.originEl.removeAttribute('id'); + this.originEl.removeAttribute('style'); + this.waveEl.append(this.originEl); + } + this.wrapper.append(this.waveEl); + } + } + _offset(el) { + const box = el.getBoundingClientRect(); + const docElem = document.documentElement; + return { + top: box.top + window.pageYOffset - docElem.clientTop, + left: box.left + window.pageXOffset - docElem.clientLeft + }; + } + _calculatePositioning() { + // Element or parent is fixed position? + let isFixed = getComputedStyle(this._origin).position === 'fixed'; + if (!isFixed) { + let currentElem = this._origin; + const parents = []; + while ((currentElem = currentElem.parentNode) && currentElem !== document) + parents.push(currentElem); + for (let i = 0; i < parents.length; i++) { + isFixed = getComputedStyle(parents[i]).position === 'fixed'; + if (isFixed) + break; + } + } + // Calculating origin + const originWidth = this._origin.offsetWidth; + const originHeight = this._origin.offsetHeight; + const originTop = isFixed ? this._offset(this._origin).top - Utils.getDocumentScrollTop() : this._offset(this._origin).top; + const originLeft = isFixed ? this._offset(this._origin).left - Utils.getDocumentScrollLeft() : this._offset(this._origin).left; + // Calculating screen + const windowWidth = window.innerWidth; + const windowHeight = window.innerHeight; + const scrollBarWidth = windowWidth - document.documentElement.clientWidth; + const centerX = windowWidth / 2; + const centerY = windowHeight / 2; + const isLeft = originLeft <= centerX; + const isRight = originLeft > centerX; + const isTop = originTop <= centerY; + const isBottom = originTop > centerY; + const isCenterX = originLeft >= windowWidth * 0.25 && originLeft <= windowWidth * 0.75; + // Calculating tap target + const tapTargetWidth = this.el.offsetWidth; + const tapTargetHeight = this.el.offsetHeight; + const tapTargetTop = originTop + originHeight / 2 - tapTargetHeight / 2; + const tapTargetLeft = originLeft + originWidth / 2 - tapTargetWidth / 2; + const tapTargetPosition = isFixed ? 'fixed' : 'absolute'; + // Calculating content + const tapTargetTextWidth = isCenterX ? tapTargetWidth : tapTargetWidth / 2 + originWidth; + const tapTargetTextHeight = tapTargetHeight / 2; + const tapTargetTextTop = isTop ? tapTargetHeight / 2 : 0; + const tapTargetTextBottom = 0; + const tapTargetTextLeft = isLeft && !isCenterX ? tapTargetWidth / 2 - originWidth : 0; + const tapTargetTextRight = 0; + const tapTargetTextPadding = originWidth; + const tapTargetTextAlign = isBottom ? 'bottom' : 'top'; + // Calculating wave + const tapTargetWaveWidth = originWidth > originHeight ? originWidth * 2 : originWidth * 2; + const tapTargetWaveHeight = tapTargetWaveWidth; + const tapTargetWaveTop = tapTargetHeight / 2 - tapTargetWaveHeight / 2; + const tapTargetWaveLeft = tapTargetWidth / 2 - tapTargetWaveWidth / 2; + // Setting tap target + this.wrapper.style.top = isTop ? tapTargetTop + 'px' : ''; + this.wrapper.style.right = isRight ? windowWidth - tapTargetLeft - tapTargetWidth - scrollBarWidth + 'px' : ''; + this.wrapper.style.bottom = isBottom ? windowHeight - tapTargetTop - tapTargetHeight + 'px' : ''; + this.wrapper.style.left = isLeft ? tapTargetLeft + 'px' : ''; + this.wrapper.style.position = tapTargetPosition; + // Setting content + this.contentEl.style.width = tapTargetTextWidth + 'px'; + this.contentEl.style.height = tapTargetTextHeight + 'px'; + this.contentEl.style.top = tapTargetTextTop + 'px'; + this.contentEl.style.right = tapTargetTextRight + 'px'; + this.contentEl.style.bottom = tapTargetTextBottom + 'px'; + this.contentEl.style.left = tapTargetTextLeft + 'px'; + this.contentEl.style.padding = tapTargetTextPadding + 'px'; + this.contentEl.style.verticalAlign = tapTargetTextAlign; + // Setting wave + this.waveEl.style.top = tapTargetWaveTop + 'px'; + this.waveEl.style.left = tapTargetWaveLeft + 'px'; + this.waveEl.style.width = tapTargetWaveWidth + 'px'; + this.waveEl.style.height = tapTargetWaveHeight + 'px'; + } + /** + * Open Tap Target. + */ + open = () => { + if (this.isOpen) + return; + // onOpen callback + if (typeof this.options.onOpen === 'function') { + this.options.onOpen.call(this, this._origin); + } + this.isOpen = true; + this.wrapper.classList.add('open'); + document.body.addEventListener('click', this._handleDocumentClick, true); + document.body.addEventListener('touchend', this._handleDocumentClick); + }; + /** + * Close Tap Target. + */ + close = () => { + if (!this.isOpen) + return; + // onClose callback + if (typeof this.options.onClose === 'function') { + this.options.onClose.call(this, this._origin); + } + this.isOpen = false; + this.wrapper.classList.remove('open'); + document.body.removeEventListener('click', this._handleDocumentClick, true); + document.body.removeEventListener('touchend', this._handleDocumentClick); + }; +} + +let _defaults$5 = { + dialRadius: 135, + outerRadius: 105, + innerRadius: 70, + tickRadius: 20, + duration: 350, + container: null, + defaultTime: 'now', // default time, 'now' or '13:14' e.g. + fromNow: 0, // Millisecond offset from the defaultTime + showClearBtn: false, + // internationalization + i18n: { + cancel: 'Cancel', + clear: 'Clear', + done: 'Ok' + }, + autoClose: false, // auto close when minute is selected + twelveHour: true, // change to 12 hour AM/PM clock from 24 hour + vibrate: true, // vibrate the device when dragging clock hand + // Callbacks + onOpenStart: null, + onOpenEnd: null, + onCloseStart: null, + onCloseEnd: null, + onSelect: null +}; +class Timepicker extends Component { + id; + modal; + modalEl; + plate; + digitalClock; + inputHours; + inputMinutes; + x0; + y0; + moved; + dx; + dy; + /** + * Current view on the timepicker. + * @default 'hours' + */ + currentView; + hand; + minutesView; + hours; + minutes; + /** The selected time. */ + time; + /** + * If the time is AM or PM on twelve-hour clock. + * @default 'PM' + */ + amOrPm; + static _template; + /** If the picker is open. */ + isOpen; + /** Vibrate device when dragging clock hand. */ + vibrate; + _canvas; + hoursView; + spanAmPm; + footer; + _amBtn; + _pmBtn; + bg; + bearing; + g; + toggleViewTimer; + canvas; + vibrateTimer; + constructor(el, options) { + super(el, options, Timepicker); + this.el.M_Timepicker = this; + this.options = { + ...Timepicker.defaults, + ...options + }; + this.id = Utils.guid(); + this._insertHTMLIntoDOM(); + this._setupModal(); + this._setupVariables(); + this._setupEventHandlers(); + this._clockSetup(); + this._pickerSetup(); + } + static get defaults() { + return _defaults$5; + } + /** + * Initializes instances of Timepicker. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Timepicker); + } + static _addLeadingZero(num) { + return (num < 10 ? '0' : '') + num; + } + static _createSVGEl(name) { + let svgNS = 'http://www.w3.org/2000/svg'; + return document.createElementNS(svgNS, name); + } + static _Pos(e) { + if (e.type.startsWith("touch") && e.targetTouches.length >= 1) { + return { x: e.targetTouches[0].clientX, y: e.targetTouches[0].clientY }; + } + // mouse event + return { x: e.clientX, y: e.clientY }; + } + static getInstance(el) { + return el.M_Timepicker; + } + destroy() { + this._removeEventHandlers(); + this.modal.destroy(); + this.modalEl.remove(); + this.el.M_Timepicker = undefined; + } + _setupEventHandlers() { + this.el.addEventListener('click', this._handleInputClick); + this.el.addEventListener('keydown', this._handleInputKeydown); + this.plate.addEventListener('mousedown', this._handleClockClickStart); + this.plate.addEventListener('touchstart', this._handleClockClickStart); + this.digitalClock.addEventListener('keyup', this._inputFromTextField); + this.inputHours.addEventListener('click', () => this.showView('hours')); + this.inputMinutes.addEventListener('click', () => this.showView('minutes')); + } + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleInputClick); + this.el.removeEventListener('keydown', this._handleInputKeydown); + } + _handleInputClick = () => { + this.open(); + }; + _handleInputKeydown = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + e.preventDefault(); + this.open(); + } + }; + _handleTimeInputEnterKey = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + e.preventDefault(); + this._inputFromTextField(); + } + }; + _handleClockClickStart = (e) => { + e.preventDefault(); + let clockPlateBR = this.plate.getBoundingClientRect(); + let offset = { x: clockPlateBR.left, y: clockPlateBR.top }; + this.x0 = offset.x + this.options.dialRadius; + this.y0 = offset.y + this.options.dialRadius; + this.moved = false; + let clickPos = Timepicker._Pos(e); + this.dx = clickPos.x - this.x0; + this.dy = clickPos.y - this.y0; + // Set clock hands + this.setHand(this.dx, this.dy, false); + // Mousemove on document + document.addEventListener('mousemove', this._handleDocumentClickMove); + document.addEventListener('touchmove', this._handleDocumentClickMove); + // Mouseup on document + document.addEventListener('mouseup', this._handleDocumentClickEnd); + document.addEventListener('touchend', this._handleDocumentClickEnd); + }; + _handleDocumentClickMove = (e) => { + e.preventDefault(); + let clickPos = Timepicker._Pos(e); + let x = clickPos.x - this.x0; + let y = clickPos.y - this.y0; + this.moved = true; + this.setHand(x, y, false); + }; + _handleDocumentClickEnd = (e) => { + e.preventDefault(); + document.removeEventListener('mouseup', this._handleDocumentClickEnd); + document.removeEventListener('touchend', this._handleDocumentClickEnd); + let clickPos = Timepicker._Pos(e); + let x = clickPos.x - this.x0; + let y = clickPos.y - this.y0; + if (this.moved && x === this.dx && y === this.dy) { + this.setHand(x, y); + } + if (this.currentView === 'hours') { + this.showView('minutes', this.options.duration / 2); + } + else if (this.options.autoClose) { + this.minutesView.classList.add('timepicker-dial-out'); + setTimeout(() => { + this.done(); + }, this.options.duration / 2); + } + if (typeof this.options.onSelect === 'function') { + this.options.onSelect.call(this, this.hours, this.minutes); + } + // Unbind mousemove event + document.removeEventListener('mousemove', this._handleDocumentClickMove); + document.removeEventListener('touchmove', this._handleDocumentClickMove); + }; + _insertHTMLIntoDOM() { + const template = document.createElement('template'); + template.innerHTML = Timepicker._template.trim(); + this.modalEl = template.content.firstChild; + this.modalEl.id = 'modal-' + this.id; + // Append popover to input by default + const optEl = this.options.container; + const containerEl = optEl instanceof HTMLElement ? optEl : document.querySelector(optEl); + if (this.options.container && !!containerEl) { + containerEl.append(this.modalEl); + } + else { + this.el.parentElement.appendChild(this.modalEl); + } + } + _setupModal() { + this.modal = Modal.init(this.modalEl, { + onOpenStart: this.options.onOpenStart, + onOpenEnd: this.options.onOpenEnd, + onCloseStart: this.options.onCloseStart, + onCloseEnd: () => { + if (typeof this.options.onCloseEnd === 'function') { + this.options.onCloseEnd.call(this); + } + this.isOpen = false; + } + }); + } + _setupVariables() { + this.currentView = 'hours'; + this.vibrate = navigator.vibrate + ? 'vibrate' + : navigator.webkitVibrate + ? 'webkitVibrate' + : null; + this._canvas = this.modalEl.querySelector('.timepicker-canvas'); + this.plate = this.modalEl.querySelector('.timepicker-plate'); + this.digitalClock = this.modalEl.querySelector('.timepicker-display-column'); + this.hoursView = this.modalEl.querySelector('.timepicker-hours'); + this.minutesView = this.modalEl.querySelector('.timepicker-minutes'); + this.inputHours = this.modalEl.querySelector('.timepicker-input-hours'); + this.inputMinutes = this.modalEl.querySelector('.timepicker-input-minutes'); + this.spanAmPm = this.modalEl.querySelector('.timepicker-span-am-pm'); + this.footer = this.modalEl.querySelector('.timepicker-footer'); + this.amOrPm = 'PM'; + } + _createButton(text, visibility) { + const button = document.createElement('button'); + button.classList.add('btn-flat', 'waves-effect'); + button.style.visibility = visibility; + button.type = 'button'; + button.tabIndex = this.options.twelveHour ? 3 : 1; + button.innerText = text; + return button; + } + _pickerSetup() { + const clearButton = this._createButton(this.options.i18n.clear, this.options.showClearBtn ? '' : 'hidden'); + clearButton.classList.add('timepicker-clear'); + clearButton.addEventListener('click', this.clear); + this.footer.appendChild(clearButton); + const confirmationBtnsContainer = document.createElement('div'); + confirmationBtnsContainer.classList.add('confirmation-btns'); + this.footer.append(confirmationBtnsContainer); + const cancelButton = this._createButton(this.options.i18n.cancel, ''); + cancelButton.classList.add('timepicker-close'); + cancelButton.addEventListener('click', this.close); + confirmationBtnsContainer.appendChild(cancelButton); + const doneButton = this._createButton(this.options.i18n.done, ''); + doneButton.classList.add('timepicker-close'); + doneButton.addEventListener('click', this.done); + confirmationBtnsContainer.appendChild(doneButton); + } + _clockSetup() { + if (this.options.twelveHour) { + // AM Button + this._amBtn = document.createElement('div'); + this._amBtn.classList.add('am-btn'); + this._amBtn.innerText = 'AM'; + this._amBtn.addEventListener('click', this._handleAmPmClick); + this.spanAmPm.appendChild(this._amBtn); + // PM Button + this._pmBtn = document.createElement('div'); + this._pmBtn.classList.add('pm-btn'); + this._pmBtn.innerText = 'PM'; + this._pmBtn.addEventListener('click', this._handleAmPmClick); + this.spanAmPm.appendChild(this._pmBtn); + } + this._buildHoursView(); + this._buildMinutesView(); + this._buildSVGClock(); + } + _buildSVGClock() { + // Draw clock hands and others + let dialRadius = this.options.dialRadius; + let tickRadius = this.options.tickRadius; + let diameter = dialRadius * 2; + let svg = Timepicker._createSVGEl('svg'); + svg.setAttribute('class', 'timepicker-svg'); + svg.setAttribute('width', diameter.toString()); + svg.setAttribute('height', diameter.toString()); + let g = Timepicker._createSVGEl('g'); + g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')'); + let bearing = Timepicker._createSVGEl('circle'); + bearing.setAttribute('class', 'timepicker-canvas-bearing'); + bearing.setAttribute('cx', '0'); + bearing.setAttribute('cy', '0'); + bearing.setAttribute('r', '4'); + let hand = Timepicker._createSVGEl('line'); + hand.setAttribute('x1', '0'); + hand.setAttribute('y1', '0'); + let bg = Timepicker._createSVGEl('circle'); + bg.setAttribute('class', 'timepicker-canvas-bg'); + bg.setAttribute('r', tickRadius.toString()); + g.appendChild(hand); + g.appendChild(bg); + g.appendChild(bearing); + svg.appendChild(g); + this._canvas.appendChild(svg); + this.hand = hand; + this.bg = bg; + this.bearing = bearing; + this.g = g; + } + _buildHoursView() { + const $tick = document.createElement('div'); + $tick.classList.add('timepicker-tick'); + // Hours view + if (this.options.twelveHour) { + for (let i = 1; i < 13; i += 1) { + const tick = $tick.cloneNode(true); + const radian = (i / 6) * Math.PI; + const radius = this.options.outerRadius; + tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px'; + tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px'; + tick.innerHTML = i === 0 ? '00' : i.toString(); + this.hoursView.appendChild(tick); + // tick.on(mousedownEvent, mousedown); + } + } + else { + for (let i = 0; i < 24; i += 1) { + const tick = $tick.cloneNode(true); + const radian = (i / 6) * Math.PI; + const inner = i > 0 && i < 13; + const radius = inner ? this.options.innerRadius : this.options.outerRadius; + tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px'; + tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px'; + tick.innerHTML = i === 0 ? '00' : i.toString(); + this.hoursView.appendChild(tick); + // tick.on(mousedownEvent, mousedown); + } + } + } + _buildMinutesView() { + const _tick = document.createElement('div'); + _tick.classList.add('timepicker-tick'); + // Minutes view + for (let i = 0; i < 60; i += 5) { + const tick = _tick.cloneNode(true); + const radian = (i / 30) * Math.PI; + tick.style.left = + this.options.dialRadius + + Math.sin(radian) * this.options.outerRadius - + this.options.tickRadius + + 'px'; + tick.style.top = + this.options.dialRadius - + Math.cos(radian) * this.options.outerRadius - + this.options.tickRadius + + 'px'; + tick.innerHTML = Timepicker._addLeadingZero(i); + this.minutesView.appendChild(tick); + } + } + _handleAmPmClick = (e) => { + const btnClicked = e.target; + this.amOrPm = btnClicked.classList.contains('am-btn') ? 'AM' : 'PM'; + this._updateAmPmView(); + }; + _updateAmPmView() { + if (this.options.twelveHour) { + if (this.amOrPm === 'PM') { + this._amBtn.classList.remove('text-primary'); + this._pmBtn.classList.add('text-primary'); + } + else if (this.amOrPm === 'AM') { + this._amBtn.classList.add('text-primary'); + this._pmBtn.classList.remove('text-primary'); + } + } + } + _updateTimeFromInput() { + // Get the time + let value = ((this.el.value || this.options.defaultTime || '') + '').split(':'); + if (this.options.twelveHour && !(typeof value[1] === 'undefined')) { + if (value[1].toUpperCase().indexOf('AM') > 0) { + this.amOrPm = 'AM'; + } + else { + this.amOrPm = 'PM'; + } + value[1] = value[1].replace('AM', '').replace('PM', ''); + } + if (value[0] === 'now') { + let now = new Date(+new Date() + this.options.fromNow); + value = [now.getHours().toString(), now.getMinutes().toString()]; + if (this.options.twelveHour) { + this.amOrPm = parseInt(value[0]) >= 12 && parseInt(value[0]) < 24 ? 'PM' : 'AM'; + } + } + this.hours = +value[0] || 0; + this.minutes = +value[1] || 0; + this.inputHours.value = this.hours; + this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes); + this._updateAmPmView(); + } + /** + * Show hours or minutes view on timepicker. + * @param view The name of the view you want to switch to, 'hours' or 'minutes'. + */ + showView = (view, delay = null) => { + if (view === 'minutes' && getComputedStyle(this.hoursView).visibility === 'visible') ; + let isHours = view === 'hours', nextView = isHours ? this.hoursView : this.minutesView, hideView = isHours ? this.minutesView : this.hoursView; + this.currentView = view; + if (isHours) { + this.inputHours.classList.add('text-primary'); + this.inputMinutes.classList.remove('text-primary'); + } + else { + this.inputHours.classList.remove('text-primary'); + this.inputMinutes.classList.add('text-primary'); + } + // Transition view + hideView.classList.add('timepicker-dial-out'); + nextView.style.visibility = 'visible'; + nextView.classList.remove('timepicker-dial-out'); + // Reset clock hand + this.resetClock(delay); + // After transitions ended + clearTimeout(this.toggleViewTimer); + this.toggleViewTimer = setTimeout(() => { + hideView.style.visibility = 'hidden'; + }, this.options.duration); + }; + resetClock(delay) { + let view = this.currentView, value = this[view], isHours = view === 'hours', unit = Math.PI / (isHours ? 6 : 30), radian = value * unit, radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius, x = Math.sin(radian) * radius, y = -Math.cos(radian) * radius, self = this; + if (delay) { + this.canvas?.classList.add('timepicker-canvas-out'); + setTimeout(() => { + self.canvas?.classList.remove('timepicker-canvas-out'); + self.setHand(x, y); + }, delay); + } + else { + this.setHand(x, y); + } + } + _inputFromTextField = () => { + const isHours = this.currentView === 'hours'; + if (isHours) { + const value = parseInt(this.inputHours.value); + if (value > 0 && value < 13) { + this.drawClockFromTimeInput(value, isHours); + this.showView('minutes', this.options.duration / 2); + this.hours = value; + this.inputMinutes.focus(); + } + else { + const hour = new Date().getHours(); + this.inputHours.value = (hour % 12).toString(); + } + } + else { + const value = parseInt(this.inputMinutes.value); + if (value >= 0 && value < 60) { + this.inputMinutes.value = Timepicker._addLeadingZero(value); + this.drawClockFromTimeInput(value, isHours); + this.minutes = value; + this.modalEl.querySelector('.confirmation-btns :nth-child(2)').focus(); + } + else { + const minutes = new Date().getMinutes(); + this.inputMinutes.value = Timepicker._addLeadingZero(minutes); + } + } + }; + drawClockFromTimeInput(value, isHours) { + const unit = Math.PI / (isHours ? 6 : 30); + const radian = value * unit; + let radius; + if (this.options.twelveHour) { + radius = this.options.outerRadius; + } + let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius; + this.hand.setAttribute('x2', cx1.toString()); + this.hand.setAttribute('y2', cy1.toString()); + this.bg.setAttribute('cx', cx2.toString()); + this.bg.setAttribute('cy', cy2.toString()); + } + setHand(x, y, roundBy5 = false) { + let radian = Math.atan2(x, -y), isHours = this.currentView === 'hours', unit = Math.PI / (isHours || roundBy5 ? 6 : 30), z = Math.sqrt(x * x + y * y), inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2, radius = inner ? this.options.innerRadius : this.options.outerRadius; + if (this.options.twelveHour) { + radius = this.options.outerRadius; + } + // Radian should in range [0, 2PI] + if (radian < 0) { + radian = Math.PI * 2 + radian; + } + // Get the round value + let value = Math.round(radian / unit); + // Get the round radian + radian = value * unit; + // Correct the hours or minutes + if (this.options.twelveHour) { + if (isHours) { + if (value === 0) + value = 12; + } + else { + if (roundBy5) + value *= 5; + if (value === 60) + value = 0; + } + } + else { + if (isHours) { + if (value === 12) { + value = 0; + } + value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12; + } + else { + if (roundBy5) { + value *= 5; + } + if (value === 60) { + value = 0; + } + } + } + // Once hours or minutes changed, vibrate the device + if (this[this.currentView] !== value) { + if (this.vibrate && this.options.vibrate) { + // Do not vibrate too frequently + if (!this.vibrateTimer) { + navigator[this.vibrate](10); + this.vibrateTimer = setTimeout(() => { + this.vibrateTimer = null; + }, 100); + } + } + } + this[this.currentView] = value; + if (isHours) { + this.inputHours.value = value.toString(); + } + else { + this.inputMinutes.value = Timepicker._addLeadingZero(value); + } + // Set clock hand and others' position + let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius; + this.hand.setAttribute('x2', cx1.toString()); + this.hand.setAttribute('y2', cy1.toString()); + this.bg.setAttribute('cx', cx2.toString()); + this.bg.setAttribute('cy', cy2.toString()); + } + /** + * Open timepicker. + */ + open = () => { + if (this.isOpen) + return; + this.isOpen = true; + this._updateTimeFromInput(); + this.showView('hours'); + this.modal.open(undefined); + }; + /** + * Close timepicker. + */ + close = () => { + if (!this.isOpen) + return; + this.isOpen = false; + this.modal.close(); + }; + done = (e = null, clearValue = null) => { + // Set input value + let last = this.el.value; + let value = clearValue + ? '' + : Timepicker._addLeadingZero(this.hours) + ':' + Timepicker._addLeadingZero(this.minutes); + this.time = value; + if (!clearValue && this.options.twelveHour) { + value = `${value} ${this.amOrPm}`; + } + this.el.value = value; + // Trigger change event + if (value !== last) { + this.el.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true })); + } + this.close(); + this.el.focus(); + }; + clear = () => { + this.done(null, true); + }; + static { + Timepicker._template = ` +
+
+
+
+
+ + : + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ { + if (this.isOpen) + return; + isManual = isManual === undefined ? true : undefined; // Default value true + this.isOpen = true; + // Update tooltip content with HTML attribute options + this.options = { ...this.options, ...this._getAttributeOptions() }; + this._updateTooltipContent(); + this._setEnterDelayTimeout(isManual); + }; + /** + * Hide tooltip. + */ + close = () => { + if (!this.isOpen) + return; + this.isHovered = false; + this.isFocused = false; + this.isOpen = false; + this._setExitDelayTimeout(); + }; + _setExitDelayTimeout() { + clearTimeout(this._exitDelayTimeout); + this._exitDelayTimeout = setTimeout(() => { + if (this.isHovered || this.isFocused) + return; + this._animateOut(); + }, this.options.exitDelay); + } + _setEnterDelayTimeout(isManual) { + clearTimeout(this._enterDelayTimeout); + this._enterDelayTimeout = setTimeout(() => { + if (!this.isHovered && !this.isFocused && !isManual) + return; + this._animateIn(); + }, this.options.enterDelay); + } + _positionTooltip() { + const tooltip = this.tooltipEl; + const origin = this.el, originHeight = origin.offsetHeight, originWidth = origin.offsetWidth, tooltipHeight = tooltip.offsetHeight, tooltipWidth = tooltip.offsetWidth, margin = this.options.margin; + (this.xMovement = 0), (this.yMovement = 0); + let targetTop = origin.getBoundingClientRect().top + Utils.getDocumentScrollTop(); + let targetLeft = origin.getBoundingClientRect().left + Utils.getDocumentScrollLeft(); + if (this.options.position === 'top') { + targetTop += -tooltipHeight - margin; + targetLeft += originWidth / 2 - tooltipWidth / 2; + this.yMovement = -this.options.transitionMovement; + } + else if (this.options.position === 'right') { + targetTop += originHeight / 2 - tooltipHeight / 2; + targetLeft += originWidth + margin; + this.xMovement = this.options.transitionMovement; + } + else if (this.options.position === 'left') { + targetTop += originHeight / 2 - tooltipHeight / 2; + targetLeft += -tooltipWidth - margin; + this.xMovement = -this.options.transitionMovement; + } + else { + targetTop += originHeight + margin; + targetLeft += originWidth / 2 - tooltipWidth / 2; + this.yMovement = this.options.transitionMovement; + } + const newCoordinates = this._repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight); + tooltip.style.top = newCoordinates.y + 'px'; + tooltip.style.left = newCoordinates.x + 'px'; + } + _repositionWithinScreen(x, y, width, height) { + const scrollLeft = Utils.getDocumentScrollLeft(); + const scrollTop = Utils.getDocumentScrollTop(); + let newX = x - scrollLeft; + let newY = y - scrollTop; + const bounding = { + left: newX, + top: newY, + width: width, + height: height + }; + const offset = this.options.margin + this.options.transitionMovement; + const edges = Utils.checkWithinContainer(document.body, bounding, offset); + if (edges.left) { + newX = offset; + } + else if (edges.right) { + newX -= newX + width - window.innerWidth; + } + if (edges.top) { + newY = offset; + } + else if (edges.bottom) { + newY -= newY + height - window.innerHeight; + } + return { + x: newX + scrollLeft, + y: newY + scrollTop + }; + } + _animateIn() { + this._positionTooltip(); + this.tooltipEl.style.visibility = 'visible'; + const duration = this.options.inDuration; + // easeOutCubic + this.tooltipEl.style.transition = ` + transform ${duration}ms ease-out, + opacity ${duration}ms ease-out`; + setTimeout(() => { + this.tooltipEl.style.transform = `translateX(${this.xMovement}px) translateY(${this.yMovement}px)`; + this.tooltipEl.style.opacity = (this.options.opacity || 1).toString(); + }, 1); + } + _animateOut() { + const duration = this.options.outDuration; + // easeOutCubic + this.tooltipEl.style.transition = ` + transform ${duration}ms ease-out, + opacity ${duration}ms ease-out`; + setTimeout(() => { + this.tooltipEl.style.transform = `translateX(0px) translateY(0px)`; + this.tooltipEl.style.opacity = '0'; + }, 1); + /* + anim.remove(this.tooltipEl); + anim({ + targets: this.tooltipEl, + opacity: 0, + translateX: 0, + translateY: 0, + duration: this.options.outDuration, + easing: 'easeOutCubic' + }); + */ + } + _handleMouseEnter = () => { + this.isHovered = true; + this.isFocused = false; // Allows close of tooltip when opened by focus. + this.open(false); + }; + _handleMouseLeave = () => { + this.isHovered = false; + this.isFocused = false; // Allows close of tooltip when opened by focus. + this.close(); + }; + _handleFocus = () => { + if (Utils.tabPressed) { + this.isFocused = true; + this.open(false); + } + }; + _handleBlur = () => { + this.isFocused = false; + this.close(); + }; + _getAttributeOptions() { + let attributeOptions = {}; + const tooltipTextOption = this.el.getAttribute('data-tooltip'); + const tooltipId = this.el.getAttribute('data-tooltip-id'); + const positionOption = this.el.getAttribute('data-position'); + if (tooltipTextOption) { + attributeOptions.text = tooltipTextOption; + } + if (positionOption) { + attributeOptions.position = positionOption; + } + if (tooltipId) { + attributeOptions.tooltipId = tooltipId; + } + return attributeOptions; + } +} + +class Waves { + static _offset(el) { + const box = el.getBoundingClientRect(); + const docElem = document.documentElement; + return { + top: box.top + window.pageYOffset - docElem.clientTop, + left: box.left + window.pageXOffset - docElem.clientLeft + }; + } + // https://phoenix-dx.com/css-techniques-for-material-ripple-effect/ + static renderWaveEffect(targetElement, position = null, color = null) { + const isCentered = position === null; + const duration = 500; + let animationFrame, animationStart; + const animationStep = function (timestamp) { + if (!animationStart) { + animationStart = timestamp; + } + const frame = timestamp - animationStart; + if (frame < duration) { + const easing = (frame / duration) * (2 - (frame / duration)); + const circle = isCentered ? 'circle at 50% 50%' : `circle at ${position.x}px ${position.y}px`; + const waveColor = `rgba(${color?.r || 0}, ${color?.g || 0}, ${color?.b || 0}, ${0.3 * (1 - easing)})`; + const stop = 90 * easing + "%"; + targetElement.style.backgroundImage = "radial-gradient(" + circle + ", " + waveColor + " " + stop + ", transparent " + stop + ")"; + animationFrame = window.requestAnimationFrame(animationStep); + } + else { + targetElement.style.backgroundImage = 'none'; + window.cancelAnimationFrame(animationFrame); + } + }; + animationFrame = window.requestAnimationFrame(animationStep); + } + static Init() { + if (typeof document !== 'undefined') + document?.addEventListener("DOMContentLoaded", () => { + document.body.addEventListener('click', e => { + const trigger = e.target; + const el = trigger.closest('.waves-effect'); + if (el && el.contains(trigger)) { + const isCircular = el.classList.contains('waves-circle'); + const x = e.pageX - Waves._offset(el).left; + const y = e.pageY - Waves._offset(el).top; + let color = null; + if (el.classList.contains('waves-light')) + color = { r: 255, g: 255, b: 255 }; + Waves.renderWaveEffect(el, isCircular ? null : { x, y }, color); + } + }); + }); + } +} + +const _defaults$3 = {}; +// TODO: !!!!! +class Range extends Component { + _mousedown; + value; + thumb; + constructor(el, options) { + super(el, options, Range); + this.el.M_Range = this; + this.options = { + ...Range.defaults, + ...options + }; + this._mousedown = false; + this._setupThumb(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$3; + } + /** + * Initializes instances of Range. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Range); + } + static getInstance(el) { + return el.M_Range; + } + destroy() { + this._removeEventHandlers(); + this._removeThumb(); + this.el.M_Range = undefined; + } + _setupEventHandlers() { + this.el.addEventListener('change', this._handleRangeChange); + this.el.addEventListener('mousedown', this._handleRangeMousedownTouchstart); + this.el.addEventListener('touchstart', this._handleRangeMousedownTouchstart); + this.el.addEventListener('input', this._handleRangeInputMousemoveTouchmove); + this.el.addEventListener('mousemove', this._handleRangeInputMousemoveTouchmove); + this.el.addEventListener('touchmove', this._handleRangeInputMousemoveTouchmove); + this.el.addEventListener('mouseup', this._handleRangeMouseupTouchend); + this.el.addEventListener('touchend', this._handleRangeMouseupTouchend); + this.el.addEventListener('blur', this._handleRangeBlurMouseoutTouchleave); + this.el.addEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave); + this.el.addEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave); + } + _removeEventHandlers() { + this.el.removeEventListener('change', this._handleRangeChange); + this.el.removeEventListener('mousedown', this._handleRangeMousedownTouchstart); + this.el.removeEventListener('touchstart', this._handleRangeMousedownTouchstart); + this.el.removeEventListener('input', this._handleRangeInputMousemoveTouchmove); + this.el.removeEventListener('mousemove', this._handleRangeInputMousemoveTouchmove); + this.el.removeEventListener('touchmove', this._handleRangeInputMousemoveTouchmove); + this.el.removeEventListener('mouseup', this._handleRangeMouseupTouchend); + this.el.removeEventListener('touchend', this._handleRangeMouseupTouchend); + this.el.removeEventListener('blur', this._handleRangeBlurMouseoutTouchleave); + this.el.removeEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave); + this.el.removeEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave); + } + _handleRangeChange = () => { + this.value.innerHTML = this.el.value; + if (!this.thumb.classList.contains('active')) { + this._showRangeBubble(); + } + const offsetLeft = this._calcRangeOffset(); + this.thumb.classList.add('active'); + this.thumb.style.left = offsetLeft + 'px'; + }; + _handleRangeMousedownTouchstart = (e) => { + // Set indicator value + this.value.innerHTML = this.el.value; + this._mousedown = true; + this.el.classList.add('active'); + if (!this.thumb.classList.contains('active')) { + this._showRangeBubble(); + } + if (e.type !== 'input') { + const offsetLeft = this._calcRangeOffset(); + this.thumb.classList.add('active'); + this.thumb.style.left = offsetLeft + 'px'; + } + }; + _handleRangeInputMousemoveTouchmove = () => { + if (this._mousedown) { + if (!this.thumb.classList.contains('active')) { + this._showRangeBubble(); + } + const offsetLeft = this._calcRangeOffset(); + this.thumb.classList.add('active'); + this.thumb.style.left = offsetLeft + 'px'; + this.value.innerHTML = this.el.value; + } + }; + _handleRangeMouseupTouchend = () => { + this._mousedown = false; + this.el.classList.remove('active'); + }; + _handleRangeBlurMouseoutTouchleave = () => { + if (!this._mousedown) { + const paddingLeft = parseInt(getComputedStyle(this.el).paddingLeft); + const marginLeftText = 7 + paddingLeft + 'px'; + if (this.thumb.classList.contains('active')) { + const duration = 100; + // from + this.thumb.style.transition = 'none'; + setTimeout(() => { + this.thumb.style.transition = ` + height ${duration}ms ease, + width ${duration}ms ease, + top ${duration}ms ease, + margin ${duration}ms ease + `; + // to + this.thumb.style.height = '0'; + this.thumb.style.width = '0'; + this.thumb.style.top = '0'; + this.thumb.style.marginLeft = marginLeftText; + }, 1); + } + this.thumb.classList.remove('active'); + } + }; + _setupThumb() { + this.thumb = document.createElement('span'); + this.value = document.createElement('span'); + this.thumb.classList.add('thumb'); + this.value.classList.add('value'); + this.thumb.append(this.value); + this.el.after(this.thumb); + } + _removeThumb() { + this.thumb.remove(); + } + _showRangeBubble() { + const paddingLeft = parseInt(getComputedStyle(this.thumb.parentElement).paddingLeft); + const marginLeftText = -7 + paddingLeft + 'px'; // TODO: fix magic number? + const duration = 300; + // easeOutQuint + this.thumb.style.transition = ` + height ${duration}ms ease, + width ${duration}ms ease, + top ${duration}ms ease, + margin ${duration}ms ease + `; + // to + this.thumb.style.height = '30px'; + this.thumb.style.width = '30px'; + this.thumb.style.top = '-30px'; + this.thumb.style.marginLeft = marginLeftText; + } + _calcRangeOffset() { + const width = this.el.getBoundingClientRect().width - 15; + const max = parseFloat(this.el.getAttribute('max')) || 100; // Range default max + const min = parseFloat(this.el.getAttribute('min')) || 0; // Range default min + const percent = (parseFloat(this.el.value) - min) / (max - min); + return percent * width; + } + /** + * Initializes every range input in the current document. + */ + static Init() { + if (typeof document !== 'undefined') + Range.init((document?.querySelectorAll('input[type=range]')), {}); + } +} + +const _defaults$2 = Object.freeze({}); +class CharacterCounter extends Component { + /** Stores the reference to the counter HTML element. */ + counterEl; + /** Specifies whether the input is valid or not. */ + isInvalid; + /** Specifies whether the input text has valid length or not. */ + isValidLength; + constructor(el, options) { + super(el, {}, CharacterCounter); + this.el.M_CharacterCounter = this; + this.options = { + ...CharacterCounter.defaults, + ...options + }; + this.isInvalid = false; + this.isValidLength = false; + this._setupCounter(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$2; + } + /** + * Initializes instances of CharacterCounter. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, CharacterCounter); + } + static getInstance(el) { + return el.M_CharacterCounter; + } + destroy() { + this._removeEventHandlers(); + this.el.CharacterCounter = undefined; + this._removeCounter(); + } + _setupEventHandlers() { + this.el.addEventListener('focus', this.updateCounter, true); + this.el.addEventListener('input', this.updateCounter, true); + } + _removeEventHandlers() { + this.el.removeEventListener('focus', this.updateCounter, true); + this.el.removeEventListener('input', this.updateCounter, true); + } + _setupCounter() { + this.counterEl = document.createElement('span'); + this.counterEl.classList.add('character-counter'); + this.counterEl.style.float = 'right'; + this.counterEl.style.fontSize = '12px'; + this.counterEl.style.height = '1'; + this.el.parentElement.appendChild(this.counterEl); + } + _removeCounter() { + this.counterEl.remove(); + } + updateCounter = () => { + let maxLength = parseInt(this.el.getAttribute('maxlength')), actualLength = this.el.value.length; + this.isValidLength = actualLength <= maxLength; + let counterString = actualLength.toString(); + if (maxLength) { + counterString += '/' + maxLength; + this._validateInput(); + } + this.counterEl.innerHTML = counterString; + }; + _validateInput() { + if (this.isValidLength && this.isInvalid) { + this.isInvalid = false; + this.el.classList.remove('invalid'); + } + else if (!this.isValidLength && !this.isInvalid) { + this.isInvalid = true; + this.el.classList.remove('valid'); + this.el.classList.add('invalid'); + } + } +} + +let _defaults$1 = { + indicators: true, + height: 400, + duration: 500, + interval: 6000, + pauseOnFocus: true, + pauseOnHover: true, + indicatorLabelFunc: null // Function which will generate a label for the indicators (ARIA) +}; +class Slider extends Component { + /** Index of current slide. */ + activeIndex; + interval; + eventPause; + _slider; + _slides; + _activeSlide; + _indicators; + _hovered; + _focused; + _focusCurrent; + _sliderId; + constructor(el, options) { + super(el, options, Slider); + this.el.M_Slider = this; + this.options = { + ...Slider.defaults, + ...options + }; + // init props + this.interval = null; + this.eventPause = false; + this._hovered = false; + this._focused = false; + this._focusCurrent = false; + // setup + this._slider = this.el.querySelector('.slides'); + this._slides = Array.from(this._slider.querySelectorAll('li')); + this.activeIndex = this._slides.findIndex(li => li.classList.contains('active')); + if (this.activeIndex !== -1) { + this._activeSlide = this._slides[this.activeIndex]; + } + this._setSliderHeight(); + // Sets element id if it does not have one + if (this._slider.hasAttribute('id')) + this._sliderId = this._slider.getAttribute('id'); + else { + this._sliderId = 'slider-' + Utils.guid(); + this._slider.setAttribute('id', this._sliderId); + } + const placeholderBase64 = 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; + // Set initial positions of captions + this._slides.forEach(slide => { + // Caption + //const caption = slide.querySelector('.caption'); + //if (caption) this._animateCaptionIn(caption, 0); + // Set Images as Background Images + const img = slide.querySelector('img'); + if (img) { + if (img.src !== placeholderBase64) { + img.style.backgroundImage = 'url(' + img.src + ')'; + img.src = placeholderBase64; + } + } + // Sets slide as focusable by code + if (!slide.hasAttribute('tabindex')) + slide.setAttribute('tabindex', '-1'); + // Removes initial visibility from "inactive" slides + slide.style.visibility = 'hidden'; + }); + this._setupIndicators(); + // Show active slide + if (this._activeSlide) { + this._activeSlide.style.display = 'block'; + this._activeSlide.style.visibility = 'visible'; + } + else { + this.activeIndex = 0; + this._slides[0].classList.add('active'); + this._slides[0].style.visibility = 'visible'; + this._activeSlide = this._slides[0]; + this._animateSlide(this._slides[0], true); + // Update indicators + if (this.options.indicators) { + this._indicators[this.activeIndex].children[0].classList.add('active'); + } + } + this._setupEventHandlers(); + // auto scroll + this.start(); + } + static get defaults() { + return _defaults$1; + } + /** + * Initializes instances of Slider. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Slider); + } + static getInstance(el) { + return el.M_Slider; + } + destroy() { + this.pause(); + this._removeIndicators(); + this._removeEventHandlers(); + this.el.M_Slider = undefined; + } + _setupEventHandlers() { + if (this.options.pauseOnFocus) { + this.el.addEventListener('focusin', this._handleAutoPauseFocus); + this.el.addEventListener('focusout', this._handleAutoStartFocus); + } + if (this.options.pauseOnHover) { + this.el.addEventListener('mouseenter', this._handleAutoPauseHover); + this.el.addEventListener('mouseleave', this._handleAutoStartHover); + } + if (this.options.indicators) { + this._indicators.forEach((el) => { + el.addEventListener('click', this._handleIndicatorClick); + }); + } + } + _removeEventHandlers() { + if (this.options.pauseOnFocus) { + this.el.removeEventListener('focusin', this._handleAutoPauseFocus); + this.el.removeEventListener('focusout', this._handleAutoStartFocus); + } + if (this.options.pauseOnHover) { + this.el.removeEventListener('mouseenter', this._handleAutoPauseHover); + this.el.removeEventListener('mouseleave', this._handleAutoStartHover); + } + if (this.options.indicators) { + this._indicators.forEach((el) => { + el.removeEventListener('click', this._handleIndicatorClick); + }); + } + } + _handleIndicatorClick = (e) => { + const el = e.target.parentElement; + const currIndex = [...el.parentNode.children].indexOf(el); + this._focusCurrent = true; + this.set(currIndex); + }; + _handleAutoPauseHover = () => { + this._hovered = true; + if (this.interval != null) { + this._pause(true); + } + }; + _handleAutoPauseFocus = () => { + this._focused = true; + if (this.interval != null) { + this._pause(true); + } + }; + _handleAutoStartHover = () => { + this._hovered = false; + if (!(this.options.pauseOnFocus && this._focused) && this.eventPause) { + this.start(); + } + }; + _handleAutoStartFocus = () => { + this._focused = false; + if (!(this.options.pauseOnHover && this._hovered) && this.eventPause) { + this.start(); + } + }; + _handleInterval = () => { + const activeElem = this._slider.querySelector('.active'); + let newActiveIndex = [...activeElem.parentNode.children].indexOf(activeElem); + if (this._slides.length === newActiveIndex + 1) + newActiveIndex = 0; // loop to start + else + newActiveIndex += 1; + this.set(newActiveIndex); + }; + _animateSlide(slide, isDirectionIn) { + let dx = 0, dy = 0; + // from + slide.style.opacity = isDirectionIn ? '0' : '1'; + setTimeout(() => { + slide.style.transition = `opacity ${this.options.duration}ms ease`; + // to + slide.style.opacity = isDirectionIn ? '1' : '0'; + }, 1); + // Caption + const caption = slide.querySelector('.caption'); + if (!caption) + return; + if (caption.classList.contains('center-align')) + dy = -100; + else if (caption.classList.contains('right-align')) + dx = 100; + else if (caption.classList.contains('left-align')) + dx = -100; + // from + caption.style.opacity = isDirectionIn ? '0' : '1'; + caption.style.transform = isDirectionIn ? `translate(${dx}px, ${dy}px)` : `translate(0, 0)`; + setTimeout(() => { + caption.style.transition = `opacity ${this.options.duration}ms ease, transform ${this.options.duration}ms ease`; + // to + caption.style.opacity = isDirectionIn ? '1' : '0'; + caption.style.transform = isDirectionIn ? `translate(0, 0)` : `translate(${dx}px, ${dy}px)`; + }, this.options.duration); // delay + } + _setSliderHeight() { + // If fullscreen, do nothing + if (!this.el.classList.contains('fullscreen')) { + if (this.options.indicators) { + // Add height if indicators are present + this.el.style.height = (this.options.height + 40) + 'px'; //.css('height', this.options.height + 40 + 'px'); + } + else { + this.el.style.height = this.options.height + 'px'; + } + this._slider.style.height = this.options.height + 'px'; + } + } + _setupIndicators() { + if (this.options.indicators) { + const ul = document.createElement('ul'); + ul.classList.add('indicators'); + const arrLi = []; + this._slides.forEach((el, i) => { + const label = this.options.indicatorLabelFunc + ? this.options.indicatorLabelFunc.call(this, i + 1, i === 0) + : `${i + 1}`; + const li = document.createElement('li'); + li.classList.add('indicator-item'); + li.innerHTML = ``; + arrLi.push(li); + ul.append(li); + }); + this.el.append(ul); + this._indicators = arrLi; + } + } + _removeIndicators() { + this.el.querySelector('ul.indicators').remove(); //find('ul.indicators').remove(); + } + set(index) { + // Wrap around indices. + if (index >= this._slides.length) + index = 0; + else if (index < 0) + index = this._slides.length - 1; + // Only do if index changes + if (this.activeIndex === index) + return; + this._activeSlide = this._slides[this.activeIndex]; + const _caption = this._activeSlide.querySelector('.caption'); + this._activeSlide.classList.remove('active'); + // Enables every slide + this._slides.forEach(slide => slide.style.visibility = 'visible'); + //--- Hide active Slide + Caption + this._activeSlide.style.opacity = '0'; + setTimeout(() => { + this._slides.forEach(slide => { + if (slide.classList.contains('active')) + return; + slide.style.opacity = '0'; + slide.style.transform = 'translate(0, 0)'; + // Disables invisible slides (for assistive technologies) + slide.style.visibility = 'hidden'; + }); + }, this.options.duration); + // Hide active Caption + //this._animateCaptionIn(_caption, this.options.duration); + _caption.style.opacity = '0'; + // Update indicators + if (this.options.indicators) { + const activeIndicator = this._indicators[this.activeIndex].children[0]; + const nextIndicator = this._indicators[index].children[0]; + activeIndicator.classList.remove('active'); + nextIndicator.classList.add('active'); + if (typeof this.options.indicatorLabelFunc === "function") { + activeIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, this.activeIndex, false); + nextIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, index, true); + } + } + //--- Show new Slide + Caption + this._animateSlide(this._slides[index], true); + this._slides[index].classList.add('active'); + this.activeIndex = index; + // Reset interval, if allowed. This check prevents autostart + // when slider is paused, since it can be changed though indicators. + if (this.interval != null) { + this.start(); + } + } + _pause(fromEvent) { + clearInterval(this.interval); + this.eventPause = fromEvent; + this.interval = null; + } + /** + * Pause slider autoslide. + */ + pause = () => { + this._pause(false); + }; + /** + * Start slider autoslide. + */ + start = () => { + clearInterval(this.interval); + this.interval = setInterval(this._handleInterval, this.options.duration + this.options.interval); + this.eventPause = false; + }; + /** + * Move to next slider. + */ + next = () => { + let newIndex = this.activeIndex + 1; + // Wrap around indices. + if (newIndex >= this._slides.length) + newIndex = 0; + else if (newIndex < 0) + newIndex = this._slides.length - 1; + this.set(newIndex); + }; + /** + * Move to prev slider. + */ + prev = () => { + let newIndex = this.activeIndex - 1; + // Wrap around indices. + if (newIndex >= this._slides.length) + newIndex = 0; + else if (newIndex < 0) + newIndex = this._slides.length - 1; + this.set(newIndex); + }; +} + +let _defaults = { + text: '', + displayLength: 4000, + inDuration: 300, + outDuration: 375, + classes: '', + completeCallback: null, + activationPercent: 0.8 +}; +class Toast { + /** The toast element. */ + el; + /** + * The remaining amount of time in ms that the toast + * will stay before dismissal. + */ + timeRemaining; + /** + * Describes the current pan state of the Toast. + */ + panning; + options; + message; + counterInterval; + wasSwiped; + startingXPos; + xPos; + time; + deltaX; + velocityX; + static _toasts; + static _container; + static _draggedToast; + constructor(options) { + this.options = { + ...Toast.defaults, + ...options + }; + this.message = this.options.text; + this.panning = false; + this.timeRemaining = this.options.displayLength; + if (Toast._toasts.length === 0) { + Toast._createContainer(); + } + // Create new toast + Toast._toasts.push(this); + let toastElement = this._createToast(); + toastElement.M_Toast = this; + this.el = toastElement; + this._animateIn(); + this._setTimer(); + } + static get defaults() { + return _defaults; + } + static getInstance(el) { + return el.M_Toast; + } + static _createContainer() { + const container = document.createElement('div'); + container.setAttribute('id', 'toast-container'); + // Add event handler + container.addEventListener('touchstart', Toast._onDragStart); + container.addEventListener('touchmove', Toast._onDragMove); + container.addEventListener('touchend', Toast._onDragEnd); + container.addEventListener('mousedown', Toast._onDragStart); + document.addEventListener('mousemove', Toast._onDragMove); + document.addEventListener('mouseup', Toast._onDragEnd); + document.body.appendChild(container); + Toast._container = container; + } + static _removeContainer() { + document.removeEventListener('mousemove', Toast._onDragMove); + document.removeEventListener('mouseup', Toast._onDragEnd); + Toast._container.remove(); + Toast._container = null; + } + static _onDragStart(e) { + if (e.target && e.target.closest('.toast')) { + const toastElem = e.target.closest('.toast'); + const toast = toastElem.M_Toast; + toast.panning = true; + Toast._draggedToast = toast; + toast.el.classList.add('panning'); + toast.el.style.transition = ''; + toast.startingXPos = Toast._xPos(e); + toast.time = Date.now(); + toast.xPos = Toast._xPos(e); + } + } + static _onDragMove(e) { + if (!!Toast._draggedToast) { + e.preventDefault(); + const toast = Toast._draggedToast; + toast.deltaX = Math.abs(toast.xPos - Toast._xPos(e)); + toast.xPos = Toast._xPos(e); + toast.velocityX = toast.deltaX / (Date.now() - toast.time); + toast.time = Date.now(); + const totalDeltaX = toast.xPos - toast.startingXPos; + const activationDistance = toast.el.offsetWidth * toast.options.activationPercent; + toast.el.style.transform = `translateX(${totalDeltaX}px)`; + toast.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString(); + } + } + static _onDragEnd() { + if (!!Toast._draggedToast) { + let toast = Toast._draggedToast; + toast.panning = false; + toast.el.classList.remove('panning'); + let totalDeltaX = toast.xPos - toast.startingXPos; + let activationDistance = toast.el.offsetWidth * toast.options.activationPercent; + let shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1; + // Remove toast + if (shouldBeDismissed) { + toast.wasSwiped = true; + toast.dismiss(); + // Animate toast back to original position + } + else { + toast.el.style.transition = 'transform .2s, opacity .2s'; + toast.el.style.transform = ''; + toast.el.style.opacity = ''; + } + Toast._draggedToast = null; + } + } + static _xPos(e) { + if (e.type.startsWith("touch") && e.targetTouches.length >= 1) { + return e.targetTouches[0].clientX; + } + // mouse event + return e.clientX; + } + /** + * dismiss all toasts. + */ + static dismissAll() { + for (let toastIndex in Toast._toasts) { + Toast._toasts[toastIndex].dismiss(); + } + } + _createToast() { + let toast = this.options.toastId + ? document.getElementById(this.options.toastId) + : document.createElement('div'); + if (toast instanceof HTMLTemplateElement) { + const node = toast.content.cloneNode(true); + toast = node.firstElementChild; + } + toast.classList.add('toast'); + toast.setAttribute('role', 'alert'); + toast.setAttribute('aria-live', 'assertive'); + toast.setAttribute('aria-atomic', 'true'); + // Add custom classes onto toast + if (this.options.classes.length > 0) { + toast.classList.add(...this.options.classes.split(' ')); + } + if (this.message) + toast.innerText = this.message; + Toast._container.appendChild(toast); + return toast; + } + _animateIn() { + // Animate toast in + this.el.style.display = ""; + this.el.style.opacity = '0'; + // easeOutCubic + this.el.style.transition = ` + top ${this.options.inDuration}ms ease, + opacity ${this.options.inDuration}ms ease + `; + setTimeout(() => { + this.el.style.top = '0'; + this.el.style.opacity = '1'; + }, 1); + } + /** + * Create setInterval which automatically removes toast when timeRemaining >= 0 + * has been reached. + */ + _setTimer() { + if (this.timeRemaining !== Infinity) { + this.counterInterval = setInterval(() => { + // If toast is not being dragged, decrease its time remaining + if (!this.panning) { + this.timeRemaining -= 20; + } + // Animate toast out + if (this.timeRemaining <= 0) { + this.dismiss(); + } + }, 20); + } + } + /** + * Dismiss toast with animation. + */ + dismiss() { + window.clearInterval(this.counterInterval); + let activationDistance = this.el.offsetWidth * this.options.activationPercent; + if (this.wasSwiped) { + this.el.style.transition = 'transform .05s, opacity .05s'; + this.el.style.transform = `translateX(${activationDistance}px)`; + this.el.style.opacity = '0'; + } + // easeOutExpo + this.el.style.transition = ` + margin ${this.options.outDuration}ms ease, + opacity ${this.options.outDuration}ms ease`; + setTimeout(() => { + this.el.style.opacity = '0'; + this.el.style.marginTop = '-40px'; + }, 1); + setTimeout(() => { + // Call the optional callback + if (typeof this.options.completeCallback === 'function') { + this.options.completeCallback(); + } + // Remove toast from DOM + if (this.el.id != this.options.toastId) { + this.el.remove(); + Toast._toasts.splice(Toast._toasts.indexOf(this), 1); + if (Toast._toasts.length === 0) { + Toast._removeContainer(); + } + } + }, this.options.outDuration); + } + static { + Toast._toasts = []; + Toast._container = null; + Toast._draggedToast = null; + } +} + +const version = '2.1.1'; +const Grid = (children = '') => { + return `
${children}`; +}; +function Button(children = '') { + return ``; +} +/** + * Automatically initialize components. + * @param context Root element to initialize. Defaults to `document.body`. + */ +function AutoInit(context = document.body) { + let registry = { + Autocomplete: context.querySelectorAll('.autocomplete:not(.no-autoinit)'), + Carousel: context.querySelectorAll('.carousel:not(.no-autoinit)'), + Chips: context.querySelectorAll('.chips:not(.no-autoinit)'), + Collapsible: context.querySelectorAll('.collapsible:not(.no-autoinit)'), + Datepicker: context.querySelectorAll('.datepicker:not(.no-autoinit)'), + Dropdown: context.querySelectorAll('.dropdown-trigger:not(.no-autoinit)'), + Materialbox: context.querySelectorAll('.materialboxed:not(.no-autoinit)'), + Modal: context.querySelectorAll('.modal:not(.no-autoinit)'), + Parallax: context.querySelectorAll('.parallax:not(.no-autoinit)'), + Pushpin: context.querySelectorAll('.pushpin:not(.no-autoinit)'), + ScrollSpy: context.querySelectorAll('.scrollspy:not(.no-autoinit)'), + FormSelect: context.querySelectorAll('select:not(.no-autoinit)'), + Sidenav: context.querySelectorAll('.sidenav:not(.no-autoinit)'), + Tabs: context.querySelectorAll('.tabs:not(.no-autoinit)'), + TapTarget: context.querySelectorAll('.tap-target:not(.no-autoinit)'), + Timepicker: context.querySelectorAll('.timepicker:not(.no-autoinit)'), + Tooltip: context.querySelectorAll('.tooltipped:not(.no-autoinit)'), + FloatingActionButton: context.querySelectorAll('.fixed-action-btn:not(.no-autoinit)') + }; + Autocomplete.init(registry.Autocomplete, {}); + Carousel.init(registry.Carousel, {}); + Chips.init(registry.Chips, {}); + Collapsible.init(registry.Collapsible, {}); + Datepicker.init(registry.Datepicker, {}); + Dropdown.init(registry.Dropdown, {}); + Materialbox.init(registry.Materialbox, {}); + Modal.init(registry.Modal, {}); + Parallax.init(registry.Parallax, {}); + Pushpin.init(registry.Pushpin, {}); + ScrollSpy.init(registry.ScrollSpy, {}); + FormSelect.init(registry.FormSelect, {}); + Sidenav.init(registry.Sidenav, {}); + Tabs.init(registry.Tabs, {}); + TapTarget.init(registry.TapTarget, {}); + Timepicker.init(registry.Timepicker, {}); + Tooltip.init(registry.Tooltip, {}); + FloatingActionButton.init(registry.FloatingActionButton, {}); +} +// Init +if (typeof document !== 'undefined') { + document.addEventListener('keydown', Utils.docHandleKeydown, true); + document.addEventListener('keyup', Utils.docHandleKeyup, true); + document.addEventListener('focus', Utils.docHandleFocus, true); + document.addEventListener('blur', Utils.docHandleBlur, true); +} +Cards.Init(); +Forms.Init(); +Chips.Init(); +Waves.Init(); +Range.Init(); + +exports.AutoInit = AutoInit; +exports.Autocomplete = Autocomplete; +exports.Button = Button; +exports.Cards = Cards; +exports.Carousel = Carousel; +exports.CharacterCounter = CharacterCounter; +exports.Chips = Chips; +exports.Collapsible = Collapsible; +exports.Datepicker = Datepicker; +exports.Dropdown = Dropdown; +exports.FloatingActionButton = FloatingActionButton; +exports.FormSelect = FormSelect; +exports.Forms = Forms; +exports.Grid = Grid; +exports.Materialbox = Materialbox; +exports.Modal = Modal; +exports.Parallax = Parallax; +exports.Pushpin = Pushpin; +exports.Range = Range; +exports.ScrollSpy = ScrollSpy; +exports.Sidenav = Sidenav; +exports.Slider = Slider; +exports.Tabs = Tabs; +exports.TapTarget = TapTarget; +exports.Timepicker = Timepicker; +exports.Toast = Toast; +exports.Tooltip = Tooltip; +exports.Waves = Waves; +exports.version = version; diff --git a/dist/js/materialize.d.ts b/dist/js/materialize.d.ts new file mode 100644 index 0000000000..7b46de6fc7 --- /dev/null +++ b/dist/js/materialize.d.ts @@ -0,0 +1,2333 @@ +/** + * Base options for component initialization. + */ +interface BaseOptions { +} +type MElement = HTMLElement | Element; +type InitElements = NodeListOf | HTMLCollectionOf; +type ComponentConstructor, O extends BaseOptions> = { + new (el: HTMLElement, options: Partial): T; +}; +type ComponentType, O extends BaseOptions> = ComponentConstructor & typeof Component; +interface I18nOptions { + cancel: string; + clear: string; + done: string; +} +interface Openable { + isOpen: boolean; + open(): void; + close(): void; +} +/** + * Base class implementation for Materialize components. + */ +declare class Component { + /** + * The DOM element the plugin was initialized with. + */ + el: HTMLElement; + /** + * The options the instance was initialized with. + */ + options: O; + /** + * Constructs component instance and set everything up. + */ + constructor(el: HTMLElement, options: Partial, classDef: ComponentType, O>); + /** + * Initializes component instance. + * @param el HTML element. + * @param options Component options. + * @param classDef Class definition. + */ + protected static init>(el: I, options: O, classDef: ComponentType): C; + /** + * Initializes component instances. + * @param els HTML elements. + * @param options Component options. + * @param classDef Class definition. + */ + protected static init>(els: InitElements, options: Partial, classDef: ComponentType): C[]; + /** + * Initializes component instances. + * @param els HTML elements. + * @param options Component options. + * @param classDef Class definition. + */ + protected static init>(els: I | InitElements, options: Partial, classDef: ComponentType): C | C[]; + /** + * @returns default options for component instance. + */ + static get defaults(): BaseOptions; + /** + * Retrieves component instance for the given element. + * @param el Associated HTML Element. + */ + static getInstance(el: HTMLElement): Component; + /** + * Destroy plugin instance and teardown. + */ + destroy(): void; +} + +interface DropdownOptions extends BaseOptions { + /** + * Defines the edge the menu is aligned to. + * @default 'left' + */ + alignment: 'left' | 'right'; + /** + * If true, automatically focus dropdown el for keyboard. + * @default true + */ + autoFocus: boolean; + /** + * If true, constrainWidth to the size of the dropdown activator. + * @default true + */ + constrainWidth: boolean; + /** + * Provide an element that will be the bounding container of the dropdown. + * @default null + */ + container: Element; + /** + * If false, the dropdown will show below the trigger. + * @default true + */ + coverTrigger: boolean; + /** + * If true, close dropdown on item click. + * @default true + */ + closeOnClick: boolean; + /** + * If true, the dropdown will open on hover. + * @default false + */ + hover: boolean; + /** + * The duration of the transition enter in milliseconds. + * @default 150 + */ + inDuration: number; + /** + * The duration of the transition out in milliseconds. + * @default 250 + */ + outDuration: number; + /** + * Function called when dropdown starts entering. + * @default null + */ + onOpenStart: (el: HTMLElement) => void; + /** + * Function called when dropdown finishes entering. + * @default null + */ + onOpenEnd: (el: HTMLElement) => void; + /** + * Function called when dropdown starts exiting. + * @default null + */ + onCloseStart: (el: HTMLElement) => void; + /** + * Function called when dropdown finishes exiting. + * @default null + */ + onCloseEnd: (el: HTMLElement) => void; + /** + * Function called when item is clicked. + * @default null + */ + onItemClick: (el: HTMLLIElement) => void; +} +declare class Dropdown extends Component implements Openable { + static _dropdowns: Dropdown[]; + /** ID of the dropdown element. */ + id: string; + /** The DOM element of the dropdown. */ + dropdownEl: HTMLElement; + /** If the dropdown is open. */ + isOpen: boolean; + /** If the dropdown content is scrollable. */ + isScrollable: boolean; + isTouchMoving: boolean; + /** The index of the item focused. */ + focusedIndex: number; + filterQuery: any[]; + filterTimeout: NodeJS.Timeout; + constructor(el: HTMLElement, options: Partial); + static get defaults(): DropdownOptions; + /** + * Initializes instance of Dropdown. + * @param el HTML element. + * @param options Component options. + */ + static init(el: HTMLElement, options?: Partial): Dropdown; + /** + * Initializes instances of Dropdown. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): Dropdown[]; + static getInstance(el: HTMLElement): Dropdown; + destroy(): void; + _setupEventHandlers(): void; + _removeEventHandlers(): void; + _setupTemporaryEventHandlers(): void; + _removeTemporaryEventHandlers(): void; + _handleClick: (e: MouseEvent) => void; + _handleMouseEnter: () => void; + _handleMouseLeave: (e: MouseEvent) => void; + _handleDocumentClick: (e: MouseEvent) => void; + _handleTriggerKeydown: (e: KeyboardEvent) => void; + _handleDocumentTouchmove: (e: TouchEvent) => void; + _handleDropdownClick: (e: MouseEvent) => void; + _handleDropdownKeydown: (e: KeyboardEvent) => void; + _handleWindowResize: (e: Event) => void; + _resetFilterQuery: () => void; + _resetDropdownStyles(): void; + _moveDropdown(containerEl?: HTMLElement): void; + _makeDropdownFocusable(): void; + _focusFocusedItem(): void; + _getDropdownPosition(closestOverflowParent: HTMLElement): { + x: number; + y: number; + verticalAlignment: string; + horizontalAlignment: "left" | "right"; + height: number; + width: number; + }; + _animateIn(): void; + _animateOut(): void; + private _getClosestAncestor; + _placeDropdown(): void; + /** + * Open dropdown. + */ + open: () => void; + /** + * Close dropdown. + */ + close: () => void; + /** + * While dropdown is open, you can recalculate its dimensions if its contents have changed. + */ + recalculateDimensions: () => void; +} + +interface AutocompleteData { + /** + * A primitive value that can be converted to string. + * If "text" is not provided, it will also be used as "option text" as well + */ + id: string | number; + /** + * This optional attribute is used as "display value" for the current entry. + * When provided, it will also be taken into consideration by the standard search function. + */ + text?: string; + /** + * This optional attribute is used to provide a valid image URL to the current option. + */ + image?: string; + /** + * Optional attributes which describes the option. + */ + description?: string; +} +interface AutocompleteOptions extends BaseOptions { + /** + * Data object defining autocomplete options with + * optional icon strings. + */ + data: AutocompleteData[]; + /** + * Flag which can be set if multiple values can be selected. The Result will be an Array. + * @default false + */ + isMultiSelect: boolean; + /** + * Callback for when autocompleted. + */ + onAutocomplete: (entries: AutocompleteData[]) => void; + /** + * Minimum number of characters before autocomplete starts. + * @default 1 + */ + minLength: number; + /** + * The height of the Menu which can be set via css-property. + * @default '300px' + */ + maxDropDownHeight: string; + /** + * Function is called when the input text is altered and data can also be loaded asynchronously. + * If the results are collected the items in the list can be updated via the function setMenuItems(collectedItems). + * @param text Searched text. + * @param autocomplete Current autocomplete instance. + */ + onSearch: (text: string, autocomplete: Autocomplete) => void; + /** + * If true will render the key from each item directly as HTML. + * User input MUST be properly sanitized first. + * @default false + */ + allowUnsafeHTML: boolean; + /** + * Pass options object to select dropdown initialization. + * @default {} + */ + dropdownOptions: Partial; +} +declare class Autocomplete extends Component { + el: HTMLInputElement; + /** If the autocomplete is open. */ + isOpen: boolean; + /** Number of matching autocomplete options. */ + count: number; + /** Index of the current selected option. */ + activeIndex: number; + private oldVal; + private $active; + private _mousedown; + container: HTMLElement; + /** Instance of the dropdown plugin for this autocomplete. */ + dropdown: Dropdown; + static _keydown: boolean; + selectedValues: AutocompleteData[]; + menuItems: AutocompleteData[]; + constructor(el: HTMLInputElement, options: Partial); + static get defaults(): AutocompleteOptions; + /** + * Initializes instance of Autocomplete. + * @param el HTML element. + * @param options Component options. + */ + static init(el: HTMLInputElement, options?: Partial): Autocomplete; + /** + * Initializes instances of Autocomplete. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): Autocomplete[]; + static getInstance(el: HTMLElement): Autocomplete; + destroy(): void; + _setupEventHandlers(): void; + _removeEventHandlers(): void; + _setupDropdown(): void; + _removeDropdown(): void; + _handleInputBlur: () => void; + _handleInputKeyupAndFocus: (e: KeyboardEvent) => void; + _handleInputKeydown: (e: KeyboardEvent) => void; + _handleInputClick: () => void; + _handleContainerMousedownAndTouchstart: () => void; + _handleContainerMouseupAndTouchend: () => void; + _resetCurrentElementPosition(): void; + _resetAutocomplete(): void; + _highlightPartialText(input: string, label: string): string[]; + _createDropdownItem(entry: AutocompleteData): HTMLLIElement; + _renderDropdown(): void; + _setStatusLoading(): void; + _updateSelectedInfo(): void; + _refreshInputText(): void; + _triggerChanged(): void; + /** + * Show autocomplete. + */ + open: () => void; + /** + * Hide autocomplete. + */ + close: () => void; + /** + * Updates the visible or selectable items shown in the menu. + * @param menuItems Items to be available. + */ + setMenuItems(menuItems: AutocompleteData[]): void; + /** + * Sets selected values. + * @param entries + */ + setValues(entries: AutocompleteData[]): void; + /** + * Select a specific autocomplete option via id-property. + * @param id The id of a data-entry. + */ + selectOption(id: number | string): void; +} + +interface FloatingActionButtonOptions extends BaseOptions { + /** + * Direction FAB menu opens. + * @default "top" + */ + direction: "top" | "right" | "bottom" | "left"; + /** + * true: FAB menu appears on hover, false: FAB menu appears on click. + * @default true + */ + hoverEnabled: boolean; + /** + * Enable transit the FAB into a toolbar on click. + * @default false + */ + toolbarEnabled: boolean; +} +declare class FloatingActionButton extends Component implements Openable { + /** + * Describes open/close state of FAB. + */ + isOpen: boolean; + private _anchor; + private _menu; + private _floatingBtns; + private _floatingBtnsReverse; + offsetY: number; + offsetX: number; + btnBottom: number; + btnLeft: number; + btnWidth: number; + constructor(el: HTMLElement, options: Partial); + static get defaults(): FloatingActionButtonOptions; + /** + * Initializes instance of FloatingActionButton. + * @param el HTML element. + * @param options Component options. + */ + static init(el: HTMLElement, options?: Partial): FloatingActionButton; + /** + * Initializes instances of FloatingActionButton. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): FloatingActionButton[]; + static getInstance(el: HTMLElement): FloatingActionButton; + destroy(): void; + _setupEventHandlers(): void; + _removeEventHandlers(): void; + _handleFABClick: () => void; + _handleDocumentClick: (e: MouseEvent) => void; + /** + * Open FAB. + */ + open: () => void; + /** + * Close FAB. + */ + close: () => void; + _animateInFAB(): void; + _animateOutFAB(): void; + _animateInToolbar(): void; +} + +declare class Cards { + static Init(): void; +} + +interface CarouselOptions extends BaseOptions { + /** + * Transition duration in milliseconds. + * @default 200 + */ + duration: number; + /** + * Perspective zoom. If 0, all items are the same size. + * @default -100 + */ + dist: number; + /** + * Set the spacing of the center item. + * @default 0 + */ + shift: number; + /** + * Set the padding between non center items. + * @default 0 + */ + padding: number; + /** + * Set the number of visible items. + * @default 5 + */ + numVisible: number; + /** + * Make the carousel a full width slider like the second example. + * @default false + */ + fullWidth: boolean; + /** + * Set to true to show indicators. + * @default false + */ + indicators: boolean; + /** + * Don't wrap around and cycle through items. + * @default false + */ + noWrap: boolean; + /** + * Callback for when a new slide is cycled to. + * @default null + */ + onCycleTo: (current: Element, dragged: boolean) => void; +} +declare class Carousel extends Component { + hasMultipleSlides: boolean; + showIndicators: boolean; + noWrap: boolean; + /** If the carousel is being clicked or tapped. */ + pressed: boolean; + /** If the carousel is currently being dragged. */ + dragged: boolean; + offset: number; + target: number; + images: HTMLElement[]; + itemWidth: any; + itemHeight: any; + dim: number; + _indicators: any; + count: number; + xform: string; + verticalDragged: boolean; + reference: any; + referenceY: any; + velocity: number; + frame: number; + timestamp: number; + ticker: string | number | NodeJS.Timeout; + amplitude: number; + /** The index of the center carousel item. */ + center: number; + imageHeight: any; + scrollingTimeout: any; + oneTimeCallback: any; + constructor(el: HTMLElement, options: Partial); + static get defaults(): CarouselOptions; + /** + * Initializes instance of Carousel. + * @param el HTML element. + * @param options Component options. + */ + static init(el: HTMLElement, options?: Partial): Carousel; + /** + * Initializes instances of Carousel. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): Carousel[]; + static getInstance(el: HTMLElement): Carousel; + destroy(): void; + _setupEventHandlers(): void; + _removeEventHandlers(): void; + _handleThrottledResize: () => void; + _handleCarouselTap: (e: MouseEvent | TouchEvent) => void; + _handleCarouselDrag: (e: MouseEvent | TouchEvent) => boolean; + _handleCarouselRelease: (e: MouseEvent | TouchEvent) => boolean; + _handleCarouselClick: (e: MouseEvent | TouchEvent) => boolean; + _handleIndicatorClick: (e: Event) => void; + _handleResize: () => void; + _setCarouselHeight(imageOnly?: boolean): void; + _xpos(e: MouseEvent | TouchEvent): number; + _ypos(e: MouseEvent | TouchEvent): number; + _wrap(x: number): any; + _track: () => void; + _autoScroll: () => void; + _scroll(x?: number): void; + _updateItemStyle(el: HTMLElement, opacity: number, zIndex: number, transform: string): void; + _cycleTo(n: number, callback?: CarouselOptions["onCycleTo"]): void; + /** + * Move carousel to next slide or go forward a given amount of slides. + * @param n How many times the carousel slides. + */ + next(n?: number): void; + /** + * Move carousel to previous slide or go back a given amount of slides. + * @param n How many times the carousel slides. + */ + prev(n?: number): void; + /** + * Move carousel to nth slide. + * @param n Index of slide. + * @param callback "onCycleTo" optional callback. + */ + set(n: number, callback?: CarouselOptions["onCycleTo"]): void; +} + +interface CharacterCounterOptions extends BaseOptions { +} +type InputElement = HTMLInputElement | HTMLTextAreaElement; +declare class CharacterCounter extends Component<{}> { + el: InputElement; + /** Stores the reference to the counter HTML element. */ + counterEl: HTMLSpanElement; + /** Specifies whether the input is valid or not. */ + isInvalid: boolean; + /** Specifies whether the input text has valid length or not. */ + isValidLength: boolean; + constructor(el: HTMLInputElement | HTMLTextAreaElement, options: Partial); + static get defaults(): CharacterCounterOptions; + /** + * Initializes instance of CharacterCounter. + * @param el HTML element. + * @param options Component options. + */ + static init(el: InputElement, options?: Partial): CharacterCounter; + /** + * Initializes instances of CharacterCounter. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): CharacterCounter[]; + static getInstance(el: InputElement): CharacterCounter; + destroy(): void; + _setupEventHandlers(): void; + _removeEventHandlers(): void; + _setupCounter(): void; + _removeCounter(): void; + updateCounter: () => void; + _validateInput(): void; +} + +interface ChipData { + /** + * Unique identifier. + */ + id: number | string; + /** + * Chip text. If not specified, "id" will be used. + */ + text?: string; + /** + * Chip image (URL). + */ + image?: string; +} +interface ChipsOptions extends BaseOptions { + /** + * Set the chip data. + * @default [] + */ + data: ChipData[]; + /** + * Set first placeholder when there are no tags. + * @default "" + */ + placeholder: string; + /** + * Set second placeholder when adding additional tags. + * @default "" + */ + secondaryPlaceholder: string; + /** + * Set autocomplete options. + * @default {} + */ + autocompleteOptions: Partial; + /** + * Toggles abililty to add custom value not in autocomplete list. + * @default false + */ + autocompleteOnly: boolean; + /** + * Set chips limit. + * @default Infinity + */ + limit: number; + /** + * Specifies class to be used in "close" button (useful when working with Material Symbols icon set). + * @default 'material-icons' + */ + closeIconClass: string; + /** + * Callback for chip add. + * @default null + */ + onChipAdd: (element: HTMLElement, chip: HTMLElement) => void; + /** + * Callback for chip select. + * @default null + */ + onChipSelect: (element: HTMLElement, chip: HTMLElement) => void; + /** + * Callback for chip delete. + * @default null + */ + onChipDelete: (element: HTMLElement, chip: HTMLElement) => void; +} +declare class Chips extends Component { + /** Array of the current chips data. */ + chipsData: ChipData[]; + /** If the chips has autocomplete enabled. */ + hasAutocomplete: boolean; + /** Autocomplete instance, if any. */ + autocomplete: Autocomplete; + _input: HTMLInputElement; + _label: any; + _chips: HTMLElement[]; + static _keydown: boolean; + private _selectedChip; + constructor(el: HTMLElement, options: Partial); + static get defaults(): ChipsOptions; + /** + * Initializes instance of Chips. + * @param el HTML element. + * @param options Component options. + */ + static init(el: InitElements, options?: Partial): Chips; + /** + * Initializes instances of Chips. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): Chips[]; + static getInstance(el: HTMLElement): Chips; + getData(): ChipData[]; + destroy(): void; + _setupEventHandlers(): void; + _removeEventHandlers(): void; + _handleChipClick: (e: MouseEvent) => void; + static _handleChipsKeydown(e: KeyboardEvent): void; + static _handleChipsKeyup(e: Event): void; + static _handleChipsBlur(e: Event): void; + _handleInputFocus: () => void; + _handleInputBlur: () => void; + _handleInputKeydown: (e: KeyboardEvent) => void; + _renderChip(chip: ChipData): HTMLDivElement; + _renderChips(): void; + _setupAutocomplete(): void; + _setupInput(): void; + _setupLabel(): void; + _setPlaceholder(): void; + _isValidAndNotExist(chip: ChipData): boolean; + /** + * Add chip to input. + * @param chip Chip data object + */ + addChip(chip: ChipData): void; + /** + * Delete nth chip. + * @param chipIndex Index of chip + */ + deleteChip(chipIndex: number): void; + /** + * Select nth chip. + * @param chipIndex Index of chip + */ + selectChip(chipIndex: number): void; + static Init(): void; +} + +interface CollapsibleOptions extends BaseOptions { + /** + * If accordion versus collapsible. + * @default true + */ + accordion: boolean; + /** + * Transition in duration in milliseconds. + * @default 300 + */ + inDuration: number; + /** + * Transition out duration in milliseconds. + * @default 300 + */ + outDuration: number; + /** + * Callback function called before collapsible is opened. + * @default null + */ + onOpenStart: (el: Element) => void; + /** + * Callback function called after collapsible is opened. + * @default null + */ + onOpenEnd: (el: Element) => void; + /** + * Callback function called before collapsible is closed. + * @default null + */ + onCloseStart: (el: Element) => void; + /** + * Callback function called after collapsible is closed. + * @default null + */ + onCloseEnd: (el: Element) => void; +} +declare class Collapsible extends Component { + private _headers; + constructor(el: HTMLElement, options: Partial); + static get defaults(): CollapsibleOptions; + /** + * Initializes instance of Collapsible. + * @param el HTML element. + * @param options Component options. + */ + static init(el: HTMLElement, options?: Partial): Collapsible; + /** + * Initializes instances of Collapsible. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): Collapsible[]; + static getInstance(el: HTMLElement): Collapsible; + destroy(): void; + _setupEventHandlers(): void; + _removeEventHandlers(): void; + _handleCollapsibleClick: (e: MouseEvent | KeyboardEvent) => void; + _handleCollapsibleKeydown: (e: KeyboardEvent) => void; + private _setExpanded; + _animateIn(index: number): void; + _animateOut(index: number): void; + /** + * Open collapsible section. + * @param n Nth section to open. + */ + open: (index: number) => void; + /** + * Close collapsible section. + * @param n Nth section to close. + */ + close: (index: number) => void; +} + +interface ModalOptions extends BaseOptions { + /** + * Opacity of the modal overlay. + * @default 0.5 + */ + opacity: number; + /** + * Transition in duration in milliseconds. + * @default 250 + */ + inDuration: number; + /** + * Transition out duration in milliseconds. + * @default 250 + */ + outDuration: number; + /** + * Prevent page from scrolling while modal is open. + * @default true + */ + preventScrolling: boolean; + /** + * Callback function called before modal is opened. + * @default null + */ + onOpenStart: (this: Modal, el: HTMLElement) => void; + /** + * Callback function called after modal is opened. + * @default null + */ + onOpenEnd: (this: Modal, el: HTMLElement) => void; + /** + * Callback function called before modal is closed. + * @default null + */ + onCloseStart: (el: HTMLElement) => void; + /** + * Callback function called after modal is closed. + * @default null + */ + onCloseEnd: (el: HTMLElement) => void; + /** + * Allow modal to be dismissed by keyboard or overlay click. + * @default true + */ + dismissible: boolean; + /** + * Starting top offset. + * @default '4%' + */ + startingTop: string; + /** + * Ending top offset. + * @default '10%' + */ + endingTop: string; +} +declare class Modal extends Component { + static _modalsOpen: number; + static _count: number; + /** + * ID of the modal element. + */ + id: string; + /** + * If the modal is open. + */ + isOpen: boolean; + private _openingTrigger; + private _overlay; + private _nthModalOpened; + constructor(el: HTMLElement, options: Partial); + static get defaults(): { + opacity: number; + inDuration: number; + outDuration: number; + onOpenStart: any; + onOpenEnd: any; + onCloseStart: any; + onCloseEnd: any; + preventScrolling: boolean; + dismissible: boolean; + startingTop: string; + endingTop: string; + }; + /** + * Initializes instance of Modal. + * @param el HTML element. + * @param options Component options. + * @returns {Modal} + */ + static init(el: HTMLElement, options?: Partial): Modal; + /** + * Initializes instances of Modal. + * @param els HTML elements. + * @param options Component options. + * @returns {Modal[]} + */ + static init(els: InitElements, options?: Partial): Modal[]; + static getInstance(el: HTMLElement): Modal; + destroy(): void; + _setupEventHandlers(): void; + _removeEventHandlers(): void; + _handleTriggerClick: (e: MouseEvent) => void; + _handleOverlayClick: () => void; + _handleModalCloseClick: (e: MouseEvent) => void; + _handleKeydown: (e: KeyboardEvent) => void; + _handleFocus: (e: FocusEvent) => void; + _animateIn(): void; + _animateOut(): void; + /** + * Open modal. + */ + open: (trigger?: HTMLElement) => Modal; + /** + * Close modal. + */ + close: () => this; + static create(children?: string): string; +} + +interface DateI18nOptions extends I18nOptions { + previousMonth: string; + nextMonth: string; + months: string[]; + monthsShort: string[]; + weekdays: string[]; + weekdaysShort: string[]; + weekdaysAbbrev: string[]; +} +interface DatepickerOptions extends BaseOptions { + /** + * Automatically close picker when date is selected. + * @default false + */ + autoClose: boolean; + /** + * The date output format for the input field value + * or a function taking the date and outputting the + * formatted date string. + * @default 'mmm dd, yyyy' + */ + format: string | ((d: Date) => string); + /** + * Used to create date object from current input string. + * @default null + */ + parse: ((value: string, format: string) => Date) | null; + /** + * The initial date to view when first opened. + * @default null + */ + defaultDate: Date | null; + /** + * Make the `defaultDate` the initial selected value. + * @default false + */ + setDefaultDate: boolean; + /** + * Prevent selection of any date on the weekend. + * @default false + */ + disableWeekends: boolean; + /** + * Custom function to disable certain days. + * @default null + */ + disableDayFn: ((day: Date) => boolean) | null; + /** + * First day of week (0: Sunday, 1: Monday etc). + * @default 0 + */ + firstDay: number; + /** + * The earliest date that can be selected. + * @default null + */ + minDate: Date | null; + /** + * The latest date that can be selected. + * @default null + */ + maxDate: Date | null; + /** + * Number of years either side, or array of upper/lower range. + * @default 10 + */ + yearRange: number | number[]; + /** + * Sort year range in reverse order. + * @default false + */ + yearRangeReverse: boolean; + /** + * Changes Datepicker to RTL. + * @default false + */ + isRTL: boolean; + /** + * Show month after year in Datepicker title. + * @default false + */ + showMonthAfterYear: boolean; + /** + * Render days of the calendar grid that fall in the next + * or previous month. + * @default false + */ + showDaysInNextAndPreviousMonths: boolean; + /** + * Specify a DOM element OR selector for a DOM element to render + * the calendar in, by default it will be placed before the input. + * @default null + */ + container: HTMLElement | string | null; + /** + * Show the clear button in the datepicker. + * @default false + */ + showClearBtn: boolean; + /** + * Internationalization options. + */ + i18n: Partial; + /** + * An array of string returned by `Date.toDateString()`, + * indicating there are events in the specified days. + * @default [] + */ + events: string[]; + /** + * Callback function when date is selected, + * first parameter is the newly selected date. + * @default null + */ + onSelect: ((selectedDate: Date) => void) | null; + /** + * Callback function when Datepicker is opened. + * @default null + */ + onOpen: (() => void) | null; + /** + * Callback function when Datepicker is closed. + * @default null + */ + onClose: (() => void) | null; + /** + * Callback function when Datepicker HTML is refreshed. + * @default null + */ + onDraw: (() => void) | null; + /** Field used for internal calculations DO NOT CHANGE IT */ + minYear?: any; + /** Field used for internal calculations DO NOT CHANGE IT */ + maxYear?: any; + /** Field used for internal calculations DO NOT CHANGE IT */ + minMonth?: any; + /** Field used for internal calculations DO NOT CHANGE IT */ + maxMonth?: any; + /** Field used for internal calculations DO NOT CHANGE IT */ + startRange?: any; + /** Field used for internal calculations DO NOT CHANGE IT */ + endRange?: any; +} +declare class Datepicker extends Component { + el: HTMLInputElement; + id: string; + /** If the picker is open. */ + isOpen: boolean; + modal: Modal; + calendarEl: HTMLElement; + /** CLEAR button instance. */ + clearBtn: HTMLElement; + /** DONE button instance */ + doneBtn: HTMLElement; + cancelBtn: HTMLElement; + modalEl: HTMLElement; + yearTextEl: HTMLElement; + dateTextEl: HTMLElement; + /** The selected Date. */ + date: Date; + formats: any; + calendars: any; + private _y; + private _m; + static _template: string; + constructor(el: HTMLInputElement, options: Partial); + static get defaults(): DatepickerOptions; + /** + * Initializes instance of Datepicker. + * @param el HTML element. + * @param options Component options. + */ + static init(el: HTMLInputElement, options?: Partial): Datepicker; + /** + * Initializes instances of Datepicker. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): Datepicker[]; + static _isDate(obj: any): boolean; + static _isWeekend(date: any): boolean; + static _setToStartOfDay(date: any): void; + static _getDaysInMonth(year: any, month: any): number; + static _isLeapYear(year: any): boolean; + static _compareDates(a: any, b: any): boolean; + static getInstance(el: HTMLElement): Datepicker; + destroy(): void; + destroySelects(): void; + _insertHTMLIntoDOM(): void; + _setupModal(): void; + /** + * Gets a string representation of the selected date. + */ + toString(format?: string | ((d: Date) => string)): string; + /** + * Set a date on the datepicker. + * @param date Date to set on the datepicker. + * @param preventOnSelect Undocumented as of 5 March 2018. + */ + setDate(date?: Date | string, preventOnSelect?: boolean): void; + /** + * Sets current date as the input value. + */ + setInputValue(): void; + _renderDateDisplay(): void; + /** + * Change date view to a specific date on the datepicker. + * @param date Date to show on the datepicker. + */ + gotoDate(date: Date): void; + adjustCalendars(): void; + adjustCalendar(calendar: any): any; + nextMonth(): void; + prevMonth(): void; + render(year: any, month: any, randId: any): string; + renderDay(opts: any): string; + renderRow(days: any, isRTL: any, isRowSelected: any): string; + renderTable(opts: any, data: any, randId: any): string; + renderHead(opts: any): string; + renderBody(rows: any): string; + renderTitle(instance: any, c: any, year: any, month: any, refYear: any, randId: any): string; + draw(force?: boolean): void; + _setupEventHandlers(): void; + _setupVariables(): void; + _removeEventHandlers(): void; + _handleInputClick: () => void; + _handleInputKeydown: (e: KeyboardEvent) => void; + _handleCalendarClick: (e: any) => void; + _handleClearClick: () => void; + _handleMonthChange: (e: any) => void; + _handleYearChange: (e: any) => void; + gotoMonth(month: any): void; + gotoYear(year: any): void; + _handleInputChange: (e: Event) => void; + renderDayName(opts: any, day: any, abbr?: boolean): any; + _finishSelection: () => void; + /** + * Open datepicker. + */ + open: () => this; + /** + * Close datepicker. + */ + close: () => this; +} + +declare class Forms { + /** + * Resizes the given TextArea after updating the + * value content dynamically. + * @param textarea TextArea to be resized + */ + static textareaAutoResize(textarea: HTMLTextAreaElement): void; + static Init(): void; + static InitTextarea(textarea: HTMLTextAreaElement): void; + static InitFileInputPath(fileInput: HTMLInputElement): void; +} + +interface MaterialboxOptions extends BaseOptions { + /** + * Transition in duration in milliseconds. + * @default 275 + */ + inDuration: number; + /** + * Transition out duration in milliseconds. + * @default 200 + */ + outDuration: number; + /** + * Callback function called before materialbox is opened. + * @default null + */ + onOpenStart: (el: Element) => void; + /** + * Callback function called after materialbox is opened. + * @default null + */ + onOpenEnd: (el: Element) => void; + /** + * Callback function called before materialbox is closed. + * @default null + */ + onCloseStart: (el: Element) => void; + /** + * Callback function called after materialbox is closed. + * @default null + */ + onCloseEnd: (el: Element) => void; +} +declare class Materialbox extends Component { + /** If the materialbox overlay is showing. */ + overlayActive: boolean; + /** If the materialbox is no longer being animated. */ + doneAnimating: boolean; + /** Caption, if specified. */ + caption: string; + /** Original width of image. */ + originalWidth: number; + /** Original height of image. */ + originalHeight: number; + private originInlineStyles; + private placeholder; + private _changedAncestorList; + private newHeight; + private newWidth; + private windowWidth; + private windowHeight; + private attrWidth; + private attrHeight; + private _overlay; + private _photoCaption; + constructor(el: HTMLElement, options: Partial); + static get defaults(): MaterialboxOptions; + /** + * Initializes instance of MaterialBox. + * @param el HTML element. + * @param options Component options. + */ + static init(el: HTMLElement, options?: Partial): Materialbox; + /** + * Initializes instances of MaterialBox. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): Materialbox[]; + static getInstance(el: HTMLElement): Materialbox; + destroy(): void; + private _setupEventHandlers; + private _removeEventHandlers; + private _handleMaterialboxClick; + private _handleWindowScroll; + private _handleWindowResize; + private _handleWindowEscape; + private _makeAncestorsOverflowVisible; + private _offset; + private _updateVars; + private _animateImageIn; + private _animateImageOut; + private _addCaption; + private _removeCaption; + private _addOverlay; + private _removeOverlay; + /** + * Open materialbox. + */ + open: () => void; + /** + * Close materialbox. + */ + close: () => void; +} + +interface ParallaxOptions extends BaseOptions { + /** + * The minimum width of the screen, in pixels, where the parallax functionality starts working. + * @default 0 + */ + responsiveThreshold: number; +} +declare class Parallax extends Component { + private _enabled; + private _img; + static _parallaxes: Parallax[]; + static _handleScrollThrottled: () => any; + static _handleWindowResizeThrottled: () => any; + constructor(el: HTMLElement, options: Partial); + static get defaults(): ParallaxOptions; + /** + * Initializes instance of Parallax. + * @param el HTML element. + * @param options Component options. + */ + static init(el: HTMLElement, options?: Partial): Parallax; + /** + * Initializes instances of Parallax. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): Parallax[]; + static getInstance(el: HTMLElement): Parallax; + destroy(): void; + static _handleScroll(): void; + static _handleWindowResize(): void; + _setupEventHandlers(): void; + _removeEventHandlers(): void; + _setupStyles(): void; + _handleImageLoad: () => void; + private _offset; + _updateParallax(): void; +} + +interface PushpinOptions extends BaseOptions { + /** + * The distance in pixels from the top of the page where + * the element becomes fixed. + * @default 0 + */ + top: number; + /** + * The distance in pixels from the top of the page where + * the elements stops being fixed. + * @default Infinity + */ + bottom: number; + /** + * The offset from the top the element will be fixed at. + * @default 0 + */ + offset: number; + /** + * Callback function called when pushpin position changes. + * You are provided with a position string. + * @default null + */ + onPositionChange: (position: "pinned" | "pin-top" | "pin-bottom") => void; +} +declare class Pushpin extends Component { + static _pushpins: any[]; + originalOffset: any; + constructor(el: HTMLElement, options: Partial); + static get defaults(): PushpinOptions; + /** + * Initializes instance of Pushpin. + * @param el HTML element. + * @param options Component options. + */ + static init(el: HTMLElement, options?: Partial): Pushpin; + /** + * Initializes instances of Pushpin. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): Pushpin[]; + static getInstance(el: HTMLElement): Pushpin; + destroy(): void; + static _updateElements(): void; + _setupEventHandlers(): void; + _removeEventHandlers(): void; + _updatePosition(): void; + _removePinClasses(): void; +} + +interface ScrollSpyOptions extends BaseOptions { + /** + * Throttle of scroll handler. + * @default 100 + */ + throttle: number; + /** + * Offset for centering element when scrolled to. + * @default 200 + */ + scrollOffset: number; + /** + * Class applied to active elements. + * @default 'active' + */ + activeClass: string; + /** + * Used to find active element. + * @default id => 'a[href="#' + id + '"]' + */ + getActiveElement: (id: string) => string; +} +declare class ScrollSpy extends Component { + static _elements: ScrollSpy[]; + static _count: number; + static _increment: number; + tickId: number; + id: any; + static _elementsInView: ScrollSpy[]; + static _visibleElements: any[]; + static _ticks: number; + constructor(el: HTMLElement, options: Partial); + static get defaults(): ScrollSpyOptions; + /** + * Initializes instance of ScrollSpy. + * @param el HTML element. + * @param options Component options. + */ + static init(el: HTMLElement, options?: Partial): ScrollSpy; + /** + * Initializes instances of ScrollSpy. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): ScrollSpy[]; + static getInstance(el: HTMLElement): ScrollSpy; + destroy(): void; + _setupEventHandlers(): void; + _removeEventHandlers(): void; + _handleThrottledResize: () => void; + _handleTriggerClick: (e: MouseEvent) => void; + _handleWindowScroll: () => void; + static _offset(el: any): { + top: number; + left: number; + }; + static _findElements(top: number, right: number, bottom: number, left: number): ScrollSpy[]; + _enter(): void; + _exit(): void; +} + +interface FormSelectOptions extends BaseOptions { + /** + * Classes to be added to the select wrapper element. + * @default "" + */ + classes: string; + /** + * Pass options object to select dropdown initialization. + * @default {} + */ + dropdownOptions: Partial; +} +type ValueStruct = { + el: HTMLOptionElement; + optionEl: HTMLElement; +}; +declare class FormSelect extends Component { + el: HTMLSelectElement; + /** If this is a multiple select. */ + isMultiple: boolean; + /** + * Label associated with the current select element. + * Is "null", if not detected. + */ + labelEl: HTMLLabelElement; + /** Dropdown UL element. */ + dropdownOptions: HTMLUListElement; + /** Text input that shows current selected option. */ + input: HTMLInputElement; + /** Instance of the dropdown plugin for this select. */ + dropdown: Dropdown; + /** The select wrapper element. */ + wrapper: HTMLDivElement; + selectOptions: (HTMLOptionElement | HTMLOptGroupElement)[]; + private _values; + constructor(el: HTMLSelectElement, options: FormSelectOptions); + static get defaults(): FormSelectOptions; + /** + * Initializes instance of FormSelect. + * @param el HTML element. + * @param options Component options. + */ + static init(el: HTMLSelectElement, options?: Partial): FormSelect; + /** + * Initializes instances of FormSelect. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): FormSelect[]; + static getInstance(el: HTMLElement): FormSelect; + destroy(): void; + _setupEventHandlers(): void; + _removeEventHandlers(): void; + _handleSelectChange: () => void; + _handleOptionClick: (e: MouseEvent | KeyboardEvent) => void; + _arraysEqual(a: T[], b: (E | T)[]): boolean; + _selectOptionElement(virtualOption: HTMLElement): void; + _handleInputClick: () => void; + _setupDropdown(): void; + _addOptionToValues(realOption: HTMLOptionElement, virtualOption: HTMLElement): void; + _removeDropdown(): void; + _createAndAppendOptionWithIcon(realOption: HTMLOptionElement | HTMLOptGroupElement, type: string): HTMLLIElement; + _selectValue(value: ValueStruct): void; + _deselectValue(value: ValueStruct): void; + _deselectAll(): void; + _isValueSelected(value: ValueStruct): boolean; + _toggleEntryFromArray(value: ValueStruct): void; + _getSelectedOptions(): HTMLOptionElement[]; + _setValueToInput(): void; + _setSelectedStates(): void; + _activateOption(ul: HTMLElement, li: HTMLElement): void; + getSelectedValues(): string[]; +} + +interface SidenavOptions extends BaseOptions { + /** + * Side of screen on which Sidenav appears. + * @default 'left' + */ + edge: 'left' | 'right'; + /** + * Allow swipe gestures to open/close Sidenav. + * @default true + */ + draggable: boolean; + /** + * Width of the area where you can start dragging. + * @default '10px' + */ + dragTargetWidth: string; + /** + * Length in ms of enter transition. + * @default 250 + */ + inDuration: number; + /** + * Length in ms of exit transition. + * @default 200 + */ + outDuration: number; + /** + * Prevent page from scrolling while sidenav is open. + * @default true + */ + preventScrolling: boolean; + /** + * Function called when sidenav starts entering. + */ + onOpenStart: (elem: HTMLElement) => void; + /** + * Function called when sidenav finishes entering. + */ + onOpenEnd: (elem: HTMLElement) => void; + /** + * Function called when sidenav starts exiting. + */ + onCloseStart: (elem: HTMLElement) => void; + /** + * Function called when sidenav finishes exiting. + */ + onCloseEnd: (elem: HTMLElement) => void; +} +declare class Sidenav extends Component implements Openable { + id: string; + /** Describes open/close state of Sidenav. */ + isOpen: boolean; + /** Describes if sidenav is fixed. */ + isFixed: boolean; + /** Describes if Sidenav is being dragged. */ + isDragged: boolean; + lastWindowWidth: number; + lastWindowHeight: number; + static _sidenavs: Sidenav[]; + private _overlay; + dragTarget: Element; + private _startingXpos; + private _xPos; + private _time; + private _width; + private _initialScrollTop; + private _verticallyScrolling; + private deltaX; + private velocityX; + private percentOpen; + constructor(el: HTMLElement, options: Partial); + static get defaults(): SidenavOptions; + /** + * Initializes instance of Sidenav. + * @param el HTML element. + * @param options Component options. + */ + static init(el: HTMLElement, options?: Partial): Sidenav; + /** + * Initializes instances of Sidenav. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): Sidenav[]; + static getInstance(el: HTMLElement): Sidenav; + destroy(): void; + private _createOverlay; + private _setupEventHandlers; + private _removeEventHandlers; + private _handleTriggerClick; + private _startDrag; + private _dragMoveUpdate; + private _handleDragTargetDrag; + private _handleDragTargetRelease; + private _handleCloseDrag; + private _handleCloseRelease; + private _handleCloseTriggerClick; + private _handleWindowResize; + private _setupClasses; + private _removeClasses; + private _setupFixed; + private _isCurrentlyFixed; + private _createDragTarget; + private _preventBodyScrolling; + private _enableBodyScrolling; + /** + * Opens Sidenav. + */ + open: () => void; + /** + * Closes Sidenav. + */ + close: () => void; + private _animateIn; + private _animateOut; + private _animateSidenavIn; + private _animateSidenavOut; + private _animateOverlayIn; + private _animateOverlayOut; +} + +interface SliderOptions extends BaseOptions { + /** + * Set to false to hide slide indicators. + * @default true + */ + indicators: boolean; + /** + * Set height of slider. + * @default 400 + */ + height: number; + /** + * Set the duration of the transition animation in ms. + * @default 500 + */ + duration: number; + /** + * Set the duration between transitions in ms. + * @default 6000 + */ + interval: number; + /** + * If slider should pause when keyboard focus is received. + * @default true + */ + pauseOnFocus: boolean; + /** + * If slider should pause when is hovered by a pointer. + * @default true + */ + pauseOnHover: boolean; + /** + * Optional function used to generate ARIA label to indicators (for accessibility purposes). + * @param index Current index, starting from "1". + * @param current A which indicates whether it is the current element or not + * @returns a string to be used as label indicator. + * @default null + */ + indicatorLabelFunc: (index: number, current: boolean) => string; +} +declare class Slider extends Component { + /** Index of current slide. */ + activeIndex: number; + interval: string | number | NodeJS.Timeout; + eventPause: boolean; + _slider: HTMLUListElement; + _slides: HTMLLIElement[]; + _activeSlide: HTMLLIElement; + _indicators: HTMLLIElement[]; + _hovered: boolean; + _focused: boolean; + _focusCurrent: boolean; + _sliderId: string; + constructor(el: HTMLElement, options: Partial); + static get defaults(): SliderOptions; + /** + * Initializes instance of Slider. + * @param el HTML element. + * @param options Component options. + */ + static init(el: HTMLElement, options?: Partial): Slider; + /** + * Initializes instances of Slider. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): Slider[]; + static getInstance(el: HTMLElement): Slider; + destroy(): void; + private _setupEventHandlers; + private _removeEventHandlers; + private _handleIndicatorClick; + private _handleAutoPauseHover; + private _handleAutoPauseFocus; + private _handleAutoStartHover; + private _handleAutoStartFocus; + private _handleInterval; + private _animateSlide; + private _setSliderHeight; + private _setupIndicators; + private _removeIndicators; + set(index: number): void; + _pause(fromEvent: boolean): void; + /** + * Pause slider autoslide. + */ + pause: () => void; + /** + * Start slider autoslide. + */ + start: () => void; + /** + * Move to next slider. + */ + next: () => void; + /** + * Move to prev slider. + */ + prev: () => void; +} + +interface TabsOptions extends BaseOptions { + /** + * Transition duration in milliseconds. + * @default 300 + */ + duration: number; + /** + * Callback for when a new tab content is shown. + * @default null + */ + onShow: (newContent: Element) => void; + /** + * Set to true to enable swipeable tabs. + * This also uses the responsiveThreshold option. + * @default false + */ + swipeable: boolean; + /** + * The maximum width of the screen, in pixels, + * where the swipeable functionality initializes. + * @default infinity + */ + responsiveThreshold: number; +} +declare class Tabs extends Component { + _tabLinks: NodeListOf; + _index: number; + _indicator: HTMLLIElement; + _tabWidth: number; + _tabsWidth: number; + _tabsCarousel: any; + _activeTabLink: any; + _content: any; + constructor(el: HTMLElement, options: Partial); + static get defaults(): TabsOptions; + /** + * Initializes instance of Tabs. + * @param el HTML element. + * @param options Component options. + */ + static init(el: HTMLElement, options?: Partial): Tabs; + /** + * Initializes instances of Tabs. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): Tabs[]; + static getInstance(el: HTMLElement): Tabs; + destroy(): void; + /** + * The index of tab that is currently shown. + */ + get index(): number; + _setupEventHandlers(): void; + _removeEventHandlers(): void; + _handleWindowResize: () => void; + _handleTabClick: (e: MouseEvent) => void; + _createIndicator(): void; + _setupActiveTabLink(): void; + _setupSwipeableTabs(): void; + _teardownSwipeableTabs(): void; + _setupNormalTabs(): void; + _teardownNormalTabs(): void; + _setTabsAndTabWidth(): void; + _calcRightPos(el: any): number; + _calcLeftPos(el: any): number; + /** + * Recalculate tab indicator position. This is useful when + * the indicator position is not correct. + */ + updateTabIndicator(): void; + _animateIndicator(prevIndex: any): void; + /** + * Show tab content that corresponds to the tab with the id. + * @param tabId The id of the tab that you want to switch to. + */ + select(tabId: string): void; +} + +interface TapTargetOptions extends BaseOptions { + /** + * Callback function called when Tap Target is opened. + * @default null + */ + onOpen: (origin: HTMLElement) => void; + /** + * Callback function called when Tap Target is closed. + * @default null + */ + onClose: (origin: HTMLElement) => void; +} +declare class TapTarget extends Component implements Openable { + /** + * If the tap target is open. + */ + isOpen: boolean; + private wrapper; + private _origin; + private originEl; + private waveEl; + private contentEl; + constructor(el: HTMLElement, options: Partial); + static get defaults(): TapTargetOptions; + /** + * Initializes instance of TapTarget. + * @param el HTML element. + * @param options Component options. + */ + static init(el: HTMLElement, options?: Partial): TapTarget; + /** + * Initializes instances of TapTarget. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): TapTarget[]; + static getInstance(el: HTMLElement): TapTarget; + destroy(): void; + _setupEventHandlers(): void; + _removeEventHandlers(): void; + _handleThrottledResize: () => void; + _handleTargetClick: () => void; + _handleOriginClick: () => void; + _handleResize: () => void; + _handleDocumentClick: (e: MouseEvent | TouchEvent) => void; + _setup(): void; + private _offset; + _calculatePositioning(): void; + /** + * Open Tap Target. + */ + open: () => void; + /** + * Close Tap Target. + */ + close: () => void; +} + +type Views = "hours" | "minutes"; +interface TimepickerOptions extends BaseOptions { + /** + * Dial radius. + * @default 135 + */ + dialRadius: number; + /** + * Outer radius. + * @default 105 + */ + outerRadius: number; + /** + * Inner radius. + * @default 70 + */ + innerRadius: number; + /** + * Tick radius. + * @default 20 + */ + tickRadius: number; + /** + * Duration of the transition from/to the hours/minutes view. + * @default 350 + */ + duration: number; + /** + * Specify a DOM element OR selector for a DOM element to render + * the time picker in, by default it will be placed before the input. + * @default null + */ + container: HTMLElement | string | null; + /** + * Show the clear button in the Timepicker. + * @default false + */ + showClearBtn: boolean; + /** + * Default time to set on the timepicker 'now' or '13:14'. + * @default 'now'; + */ + defaultTime: string; + /** + * Millisecond offset from the defaultTime. + * @default 0 + */ + fromNow: number; + /** + * Internationalization options. + */ + i18n: Partial; + /** + * Automatically close picker when minute is selected. + * @default false; + */ + autoClose: boolean; + /** + * Use 12 hour AM/PM clock instead of 24 hour clock. + * @default true + */ + twelveHour: boolean; + /** + * Vibrate device when dragging clock hand. + * @default true + */ + vibrate: boolean; + /** + * Callback function called before modal is opened. + * @default null + */ + onOpenStart: (el: HTMLElement) => void; + /** + * Callback function called after modal is opened. + * @default null + */ + onOpenEnd: (el: HTMLElement) => void; + /** + * Callback function called before modal is closed. + * @default null + */ + onCloseStart: (el: HTMLElement) => void; + /** + * Callback function called after modal is closed. + * @default null + */ + onCloseEnd: (el: HTMLElement) => void; + /** + * Callback function when a time is selected. + * @default null + */ + onSelect: (hour: number, minute: number) => void; +} +type Point = { + x: number; + y: number; +}; +declare class Timepicker extends Component { + el: HTMLInputElement; + id: string; + modal: Modal; + modalEl: HTMLElement; + plate: any; + digitalClock: any; + inputHours: HTMLInputElement; + inputMinutes: HTMLInputElement; + x0: number; + y0: number; + moved: boolean; + dx: number; + dy: number; + /** + * Current view on the timepicker. + * @default 'hours' + */ + currentView: Views; + hand: any; + minutesView: HTMLElement; + hours: any; + minutes: any; + /** The selected time. */ + time: string; + /** + * If the time is AM or PM on twelve-hour clock. + * @default 'PM' + */ + amOrPm: "AM" | "PM"; + static _template: any; + /** If the picker is open. */ + isOpen: boolean; + /** Vibrate device when dragging clock hand. */ + vibrate: "vibrate" | "webkitVibrate" | null; + _canvas: HTMLElement; + hoursView: any; + spanAmPm: HTMLSpanElement; + footer: HTMLElement; + private _amBtn; + private _pmBtn; + bg: Element; + bearing: Element; + g: Element; + toggleViewTimer: string | number | NodeJS.Timeout; + canvas: any; + vibrateTimer: any; + constructor(el: HTMLInputElement, options: Partial); + static get defaults(): TimepickerOptions; + /** + * Initializes instance of Timepicker. + * @param el HTML element. + * @param options Component options. + */ + static init(el: HTMLInputElement, options?: Partial): Timepicker; + /** + * Initializes instances of Timepicker. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): Timepicker[]; + static _addLeadingZero(num: number): string; + static _createSVGEl(name: string): Element; + static _Pos(e: TouchEvent | MouseEvent): Point; + static getInstance(el: HTMLElement): Timepicker; + destroy(): void; + _setupEventHandlers(): void; + _removeEventHandlers(): void; + _handleInputClick: () => void; + _handleInputKeydown: (e: KeyboardEvent) => void; + _handleTimeInputEnterKey: (e: KeyboardEvent) => void; + _handleClockClickStart: (e: any) => void; + _handleDocumentClickMove: (e: any) => void; + _handleDocumentClickEnd: (e: any) => void; + _insertHTMLIntoDOM(): void; + _setupModal(): void; + _setupVariables(): void; + private _createButton; + _pickerSetup(): void; + _clockSetup(): void; + _buildSVGClock(): void; + _buildHoursView(): void; + _buildMinutesView(): void; + _handleAmPmClick: (e: any) => void; + _updateAmPmView(): void; + _updateTimeFromInput(): void; + /** + * Show hours or minutes view on timepicker. + * @param view The name of the view you want to switch to, 'hours' or 'minutes'. + */ + showView: (view: Views, delay?: number) => void; + resetClock(delay: any): void; + _inputFromTextField: () => void; + drawClockFromTimeInput(value: any, isHours: any): void; + setHand(x: any, y: any, roundBy5?: boolean): void; + /** + * Open timepicker. + */ + open: () => void; + /** + * Close timepicker. + */ + close: () => void; + done: (e?: any, clearValue?: any) => void; + clear: () => void; +} + +interface ToastOptions extends BaseOptions { + /** + * The content of the Toast. + * @default "" + */ + text: string; + /** + * Element Id for the tooltip. + * @default "" + */ + toastId?: string; + /** + * Length in ms the Toast stays before dismissal. + * @default 4000 + */ + displayLength: number; + /** + * Transition in duration in milliseconds. + * @default 300 + */ + inDuration: number; + /** + * Transition out duration in milliseconds. + * @default 375 + */ + outDuration: number; + /** + * Classes to be added to the toast element. + * @default "" + */ + classes: string; + /** + * Callback function called when toast is dismissed. + * @default null + */ + completeCallback: () => void; + /** + * The percentage of the toast's width it takes fora drag + * to dismiss a Toast. + * @default 0.8 + */ + activationPercent: number; +} +declare class Toast { + /** The toast element. */ + el: HTMLElement; + /** + * The remaining amount of time in ms that the toast + * will stay before dismissal. + */ + timeRemaining: number; + /** + * Describes the current pan state of the Toast. + */ + panning: boolean; + options: ToastOptions; + message: string; + counterInterval: NodeJS.Timeout; + wasSwiped: boolean; + startingXPos: number; + xPos: number; + time: number; + deltaX: number; + velocityX: number; + static _toasts: Toast[]; + static _container: any; + static _draggedToast: Toast; + constructor(options: Partial); + static get defaults(): ToastOptions; + static getInstance(el: HTMLElement): Toast; + static _createContainer(): void; + static _removeContainer(): void; + static _onDragStart(e: TouchEvent | MouseEvent): void; + static _onDragMove(e: TouchEvent | MouseEvent): void; + static _onDragEnd(): void; + static _xPos(e: TouchEvent | MouseEvent): number; + /** + * dismiss all toasts. + */ + static dismissAll(): void; + _createToast(): HTMLElement; + _animateIn(): void; + /** + * Create setInterval which automatically removes toast when timeRemaining >= 0 + * has been reached. + */ + _setTimer(): void; + /** + * Dismiss toast with animation. + */ + dismiss(): void; +} + +type TooltipPosition = 'top' | 'right' | 'bottom' | 'left'; +interface TooltipOptions extends BaseOptions { + /** + * Delay time before tooltip disappears. + * @default 200 + */ + exitDelay: number; + /** + * Delay time before tooltip appears. + * @default 0 + */ + enterDelay: number; + /** + * Element Id for the tooltip. + * @default "" + */ + tooltipId?: string; + /** + * Text string for the tooltip. + * @default "" + */ + text: string; + /** + * Set distance tooltip appears away from its activator + * excluding transitionMovement. + * @default 5 + */ + margin: number; + /** + * Enter transition duration. + * @default 300 + */ + inDuration: number; + /** + * Opacity of the tooltip. + * @default 1 + */ + opacity: number; + /** + * Exit transition duration. + * @default 250 + */ + outDuration: number; + /** + * Set the direction of the tooltip. + * @default 'bottom' + */ + position: TooltipPosition; + /** + * Amount in px that the tooltip moves during its transition. + * @default 10 + */ + transitionMovement: number; +} +declare class Tooltip extends Component { + /** + * If tooltip is open. + */ + isOpen: boolean; + /** + * If tooltip is hovered. + */ + isHovered: boolean; + /** + * If tooltip is focused. + */ + isFocused: boolean; + tooltipEl: HTMLElement; + private _exitDelayTimeout; + private _enterDelayTimeout; + xMovement: number; + yMovement: number; + constructor(el: HTMLElement, options: Partial); + static get defaults(): TooltipOptions; + /** + * Initializes instance of Tooltip. + * @param el HTML element. + * @param options Component options. + */ + static init(el: HTMLElement, options?: Partial): Tooltip; + /** + * Initializes instances of Tooltip. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): Tooltip[]; + static getInstance(el: HTMLElement): Tooltip; + destroy(): void; + _appendTooltipEl(): void; + _setTooltipContent(tooltipContentEl: HTMLElement): void; + _updateTooltipContent(): void; + _setupEventHandlers(): void; + _removeEventHandlers(): void; + /** + * Show tooltip. + */ + open: (isManual: boolean) => void; + /** + * Hide tooltip. + */ + close: () => void; + _setExitDelayTimeout(): void; + _setEnterDelayTimeout(isManual: any): void; + _positionTooltip(): void; + _repositionWithinScreen(x: number, y: number, width: number, height: number): { + x: number; + y: number; + }; + _animateIn(): void; + _animateOut(): void; + _handleMouseEnter: () => void; + _handleMouseLeave: () => void; + _handleFocus: () => void; + _handleBlur: () => void; + _getAttributeOptions(): Partial; +} + +type RGBColor = { + r: number; + g: number; + b: number; +}; +type Position = { + x: number; + y: number; +}; +declare class Waves { + private static _offset; + static renderWaveEffect(targetElement: HTMLElement, position?: Position | null, color?: RGBColor | null): void; + static Init(): void; +} + +interface RangeOptions extends BaseOptions { +} +declare class Range extends Component { + el: HTMLInputElement; + private _mousedown; + value: HTMLElement; + thumb: HTMLElement; + constructor(el: HTMLInputElement, options: Partial); + static get defaults(): RangeOptions; + /** + * Initializes instance of Range. + * @param el HTML element. + * @param options Component options. + */ + static init(el: HTMLInputElement, options?: Partial): Range; + /** + * Initializes instances of Range. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): Range[]; + static getInstance(el: HTMLInputElement): Range; + destroy(): void; + _setupEventHandlers(): void; + _removeEventHandlers(): void; + _handleRangeChange: () => void; + _handleRangeMousedownTouchstart: (e: MouseEvent | TouchEvent) => void; + _handleRangeInputMousemoveTouchmove: () => void; + _handleRangeMouseupTouchend: () => void; + _handleRangeBlurMouseoutTouchleave: () => void; + _setupThumb(): void; + _removeThumb(): void; + _showRangeBubble(): void; + _calcRangeOffset(): number; + /** + * Initializes every range input in the current document. + */ + static Init(): void; +} + +declare const version = "2.1.1"; +declare const Grid: (children?: any) => string; +declare function Button(children?: any): string; +/** + * Automatically initialize components. + * @param context Root element to initialize. Defaults to `document.body`. + */ +declare function AutoInit(context?: HTMLElement): void; + +export { AutoInit, Autocomplete, Button, Cards, Carousel, CharacterCounter, Chips, Collapsible, Datepicker, Dropdown, FloatingActionButton, FormSelect, Forms, Grid, Materialbox, Modal, Parallax, Pushpin, Range, ScrollSpy, Sidenav, Slider, Tabs, TapTarget, Timepicker, Toast, Tooltip, Waves, version }; diff --git a/dist/js/materialize.js b/dist/js/materialize.js new file mode 100644 index 0000000000..4e8241506f --- /dev/null +++ b/dist/js/materialize.js @@ -0,0 +1,7598 @@ +/*! +* Materialize v2.1.1 (https://materializeweb.com) +* Copyright 2014-2024 Materialize +* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE) +*/ +var M = (function (exports) { + 'use strict'; + + /** + * Class with utilitary functions for global usage. + */ + class Utils { + /** Specifies wether tab is pressed or not. */ + static tabPressed = false; + /** Specifies wether there is a key pressed. */ + static keyDown = false; + /** + * Key maps. + */ + static keys = { + TAB: ['Tab'], + ENTER: ['Enter'], + ESC: ['Escape', 'Esc'], + BACKSPACE: ['Backspace'], + ARROW_UP: ['ArrowUp', 'Up'], + ARROW_DOWN: ['ArrowDown', 'Down'], + ARROW_LEFT: ['ArrowLeft', 'Left'], + ARROW_RIGHT: ['ArrowRight', 'Right'], + DELETE: ['Delete', 'Del'], + }; + /** + * Detects when a key is pressed. + * @param e Event instance. + */ + static docHandleKeydown(e) { + Utils.keyDown = true; + if ([...Utils.keys.TAB, ...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP].includes(e.key)) { + Utils.tabPressed = true; + } + } + /** + * Detects when a key is released. + * @param e Event instance. + */ + static docHandleKeyup(e) { + Utils.keyDown = false; + if ([...Utils.keys.TAB, ...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP].includes(e.key)) { + Utils.tabPressed = false; + } + } + /** + * Detects when document is focused. + * @param e Event instance. + */ + static docHandleFocus(e) { + if (Utils.keyDown) { + document.body.classList.add('keyboard-focused'); + } + } + /** + * Detects when document is not focused. + * @param e Event instance. + */ + static docHandleBlur(e) { + document.body.classList.remove('keyboard-focused'); + } + /** + * Generates a unique string identifier. + */ + static guid() { + const s4 = () => { + return Math.floor((1 + Math.random()) * 0x10000) + .toString(16) + .substring(1); + }; + return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); + } + /** + * Checks for exceeded edges + * @param container Container element. + * @param bounding Bounding rect. + * @param offset Element offset. + */ + static checkWithinContainer(container, bounding, offset) { + let edges = { + top: false, + right: false, + bottom: false, + left: false + }; + let containerRect = container.getBoundingClientRect(); + // If body element is smaller than viewport, use viewport height instead. + let containerBottom = container === document.body + ? Math.max(containerRect.bottom, window.innerHeight) + : containerRect.bottom; + let scrollLeft = container.scrollLeft; + let scrollTop = container.scrollTop; + let scrolledX = bounding.left - scrollLeft; + let scrolledY = bounding.top - scrollTop; + // Check for container and viewport for each edge + if (scrolledX < containerRect.left + offset || scrolledX < offset) { + edges.left = true; + } + if (scrolledX + bounding.width > containerRect.right - offset || + scrolledX + bounding.width > window.innerWidth - offset) { + edges.right = true; + } + if (scrolledY < containerRect.top + offset || scrolledY < offset) { + edges.top = true; + } + if (scrolledY + bounding.height > containerBottom - offset || + scrolledY + bounding.height > window.innerHeight - offset) { + edges.bottom = true; + } + return edges; + } + /** + * Checks if element can be aligned in multiple directions. + * @param el Element to be inspected. + * @param container Container element. + * @param bounding Bounding rect. + * @param offset Element offset. + */ + static checkPossibleAlignments(el, container, bounding, offset) { + let canAlign = { + top: true, + right: true, + bottom: true, + left: true, + spaceOnTop: null, + spaceOnRight: null, + spaceOnBottom: null, + spaceOnLeft: null + }; + let containerAllowsOverflow = getComputedStyle(container).overflow === 'visible'; + let containerRect = container.getBoundingClientRect(); + let containerHeight = Math.min(containerRect.height, window.innerHeight); + let containerWidth = Math.min(containerRect.width, window.innerWidth); + let elOffsetRect = el.getBoundingClientRect(); + let scrollLeft = container.scrollLeft; + let scrollTop = container.scrollTop; + let scrolledX = bounding.left - scrollLeft; + let scrolledYTopEdge = bounding.top - scrollTop; + let scrolledYBottomEdge = bounding.top + elOffsetRect.height - scrollTop; + // Check for container and viewport for left + canAlign.spaceOnRight = !containerAllowsOverflow + ? containerWidth - (scrolledX + bounding.width) + : window.innerWidth - (elOffsetRect.left + bounding.width); + if (canAlign.spaceOnRight < 0) { + canAlign.left = false; + } + // Check for container and viewport for Right + canAlign.spaceOnLeft = !containerAllowsOverflow + ? scrolledX - bounding.width + elOffsetRect.width + : elOffsetRect.right - bounding.width; + if (canAlign.spaceOnLeft < 0) { + canAlign.right = false; + } + // Check for container and viewport for Top + canAlign.spaceOnBottom = !containerAllowsOverflow + ? containerHeight - (scrolledYTopEdge + bounding.height + offset) + : window.innerHeight - (elOffsetRect.top + bounding.height + offset); + if (canAlign.spaceOnBottom < 0) { + canAlign.top = false; + } + // Check for container and viewport for Bottom + canAlign.spaceOnTop = !containerAllowsOverflow + ? scrolledYBottomEdge - (bounding.height - offset) + : elOffsetRect.bottom - (bounding.height + offset); + if (canAlign.spaceOnTop < 0) { + canAlign.bottom = false; + } + return canAlign; + } + /** + * Retrieves target element id from trigger. + * @param trigger Trigger element. + */ + static getIdFromTrigger(trigger) { + let id = trigger.dataset.target; + if (!id) { + id = trigger.getAttribute('href'); + return id ? id.slice(1) : ''; + } + return id; + } + /** + * Retrieves document scroll postion from top. + */ + static getDocumentScrollTop() { + return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0; + } + ; + /** + * Retrieves document scroll postion from left. + */ + static getDocumentScrollLeft() { + return window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft || 0; + } + /** + * Fires the given function after a certain ammount of time. + * @param func Function to be fired. + * @param wait Wait time. + * @param options Additional options. + */ + static throttle(func, wait, options = null) { + let context, args, result; + let timeout = null; + let previous = 0; + options || (options = {}); + let later = function () { + previous = options.leading === false ? 0 : new Date().getTime(); + timeout = null; + result = func.apply(context, args); + context = args = null; + }; + return function () { + let now = new Date().getTime(); + if (!previous && options.leading === false) + previous = now; + let remaining = wait - (now - previous); + context = this; + args = arguments; + if (remaining <= 0) { + clearTimeout(timeout); + timeout = null; + previous = now; + result = func.apply(context, args); + context = args = null; + } + else if (!timeout && options.trailing !== false) { + timeout = setTimeout(later, remaining); + } + return result; + }; + } + } + + /** + * Base class implementation for Materialize components. + */ + class Component { + /** + * The DOM element the plugin was initialized with. + */ + el; + /** + * The options the instance was initialized with. + */ + options; + /** + * Constructs component instance and set everything up. + */ + constructor(el, options, classDef) { + // Display error if el is not a valid HTML Element + if (!(el instanceof HTMLElement)) { + console.error(Error(el + ' is not an HTML Element')); + } + // If exists, destroy and reinitialize in child + let ins = classDef.getInstance(el); + if (!!ins) { + ins.destroy(); + } + this.el = el; + } + /** + * Initializes component instances. + * @param els HTML elements. + * @param options Component options. + * @param classDef Class definition. + */ + static init(els, options, classDef) { + let instances = null; + if (els instanceof Element) { + instances = new classDef(els, options); + } + else if (!!els && els.length) { + instances = []; + for (let i = 0; i < els.length; i++) { + instances.push(new classDef(els[i], options)); + } + } + return instances; + } + /** + * @returns default options for component instance. + */ + static get defaults() { return {}; } + /** + * Retrieves component instance for the given element. + * @param el Associated HTML Element. + */ + static getInstance(el) { + throw new Error("This method must be implemented."); + } + /** + * Destroy plugin instance and teardown. + */ + destroy() { throw new Error("This method must be implemented."); } + } + + const _defaults$l = { + alignment: 'left', + autoFocus: true, + constrainWidth: true, + container: null, + coverTrigger: true, + closeOnClick: true, + hover: false, + inDuration: 150, + outDuration: 250, + onOpenStart: null, + onOpenEnd: null, + onCloseStart: null, + onCloseEnd: null, + onItemClick: null + }; + class Dropdown extends Component { + static _dropdowns = []; + /** ID of the dropdown element. */ + id; + /** The DOM element of the dropdown. */ + dropdownEl; + /** If the dropdown is open. */ + isOpen; + /** If the dropdown content is scrollable. */ + isScrollable; + isTouchMoving; + /** The index of the item focused. */ + focusedIndex; + filterQuery; + filterTimeout; + constructor(el, options) { + super(el, options, Dropdown); + this.el.M_Dropdown = this; + Dropdown._dropdowns.push(this); + this.id = Utils.getIdFromTrigger(el); + this.dropdownEl = document.getElementById(this.id); + this.options = { + ...Dropdown.defaults, + ...options + }; + this.isOpen = false; + this.isScrollable = false; + this.isTouchMoving = false; + this.focusedIndex = -1; + this.filterQuery = []; + // Move dropdown-content after dropdown-trigger + this._moveDropdown(); + this._makeDropdownFocusable(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$l; + } + /** + * Initializes instances of Dropdown. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Dropdown); + } + static getInstance(el) { + return el.M_Dropdown; + } + destroy() { + this._resetDropdownStyles(); + this._removeEventHandlers(); + Dropdown._dropdowns.splice(Dropdown._dropdowns.indexOf(this), 1); + this.el.M_Dropdown = undefined; + } + _setupEventHandlers() { + // Trigger keydown handler + this.el.addEventListener('keydown', this._handleTriggerKeydown); + // Item click handler + this.dropdownEl?.addEventListener('click', this._handleDropdownClick); + // Hover event handlers + if (this.options.hover) { + this.el.addEventListener('mouseenter', this._handleMouseEnter); + this.el.addEventListener('mouseleave', this._handleMouseLeave); + this.dropdownEl.addEventListener('mouseleave', this._handleMouseLeave); + // Click event handlers + } + else { + this.el.addEventListener('click', this._handleClick); + } + } + _removeEventHandlers() { + this.el.removeEventListener('keydown', this._handleTriggerKeydown); + this.dropdownEl.removeEventListener('click', this._handleDropdownClick); + if (this.options.hover) { + this.el.removeEventListener('mouseenter', this._handleMouseEnter); + this.el.removeEventListener('mouseleave', this._handleMouseLeave); + this.dropdownEl.removeEventListener('mouseleave', this._handleMouseLeave); + } + else { + this.el.removeEventListener('click', this._handleClick); + } + } + _setupTemporaryEventHandlers() { + document.body.addEventListener('click', this._handleDocumentClick); + document.body.addEventListener('touchmove', this._handleDocumentTouchmove); + this.dropdownEl.addEventListener('keydown', this._handleDropdownKeydown); + window.addEventListener('resize', this._handleWindowResize); + } + _removeTemporaryEventHandlers() { + document.body.removeEventListener('click', this._handleDocumentClick); + document.body.removeEventListener('touchmove', this._handleDocumentTouchmove); + this.dropdownEl.removeEventListener('keydown', this._handleDropdownKeydown); + window.removeEventListener('resize', this._handleWindowResize); + } + _handleClick = (e) => { + e.preventDefault(); + if (this.isOpen) { + this.close(); + } + else { + this.open(); + } + }; + _handleMouseEnter = () => { + this.open(); + }; + _handleMouseLeave = (e) => { + const toEl = e.relatedTarget; + const leaveToDropdownContent = !!toEl.closest('.dropdown-content'); + let leaveToActiveDropdownTrigger = false; + const closestTrigger = toEl.closest('.dropdown-trigger'); + if (closestTrigger && + !!closestTrigger.M_Dropdown && + closestTrigger.M_Dropdown.isOpen) { + leaveToActiveDropdownTrigger = true; + } + // Close hover dropdown if mouse did not leave to either active dropdown-trigger or dropdown-content + if (!leaveToActiveDropdownTrigger && !leaveToDropdownContent) { + this.close(); + } + }; + _handleDocumentClick = (e) => { + const target = e.target; + if (this.options.closeOnClick && + target.closest('.dropdown-content') && + !this.isTouchMoving) { + // isTouchMoving to check if scrolling on mobile. + this.close(); + } + else if (!target.closest('.dropdown-content')) { + // Do this one frame later so that if the element clicked also triggers _handleClick + // For example, if a label for a select was clicked, that we don't close/open the dropdown + setTimeout(() => { + if (this.isOpen) { + this.close(); + } + }, 0); + } + this.isTouchMoving = false; + }; + _handleTriggerKeydown = (e) => { + // ARROW DOWN OR ENTER WHEN SELECT IS CLOSED - open Dropdown + const arrowDownOrEnter = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ENTER.includes(e.key); + if (arrowDownOrEnter && !this.isOpen) { + e.preventDefault(); + this.open(); + } + }; + _handleDocumentTouchmove = (e) => { + const target = e.target; + if (target.closest('.dropdown-content')) { + this.isTouchMoving = true; + } + }; + _handleDropdownClick = (e) => { + // onItemClick callback + if (typeof this.options.onItemClick === 'function') { + const itemEl = e.target.closest('li'); + this.options.onItemClick.call(this, itemEl); + } + }; + _handleDropdownKeydown = (e) => { + const arrowUpOrDown = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ARROW_UP.includes(e.key); + if (Utils.keys.TAB.includes(e.key)) { + e.preventDefault(); + this.close(); + } + // Navigate down dropdown list + else if (arrowUpOrDown && this.isOpen) { + e.preventDefault(); + const direction = Utils.keys.ARROW_DOWN.includes(e.key) ? 1 : -1; + let newFocusedIndex = this.focusedIndex; + let hasFoundNewIndex = false; + do { + newFocusedIndex = newFocusedIndex + direction; + if (!!this.dropdownEl.children[newFocusedIndex] && + this.dropdownEl.children[newFocusedIndex].tabIndex !== -1) { + hasFoundNewIndex = true; + break; + } + } while (newFocusedIndex < this.dropdownEl.children.length && newFocusedIndex >= 0); + if (hasFoundNewIndex) { + // Remove active class from old element + if (this.focusedIndex >= 0) + this.dropdownEl.children[this.focusedIndex].classList.remove('active'); + this.focusedIndex = newFocusedIndex; + this._focusFocusedItem(); + } + } + // ENTER selects choice on focused item + else if (Utils.keys.ENTER.includes(e.key) && this.isOpen) { + // Search for and ` + + ''); + } + renderRow(days, isRTL, isRowSelected) { + return ('' + + (isRTL ? days.reverse() : days).join('') + + ''); + } + renderTable(opts, data, randId) { + return ('
' + + this.renderHead(opts) + + this.renderBody(data) + + '
'); + } + renderHead(opts) { + let i, arr = []; + for (i = 0; i < 7; i++) { + arr.push(`${this.renderDayName(opts, i, true)}`); + } + return '' + (opts.isRTL ? arr.reverse() : arr).join('') + ''; + } + renderBody(rows) { + return '' + rows.join('') + ''; + } + renderTitle(instance, c, year, month, refYear, randId) { + let i, j, arr, opts = this.options, isMinYear = year === opts.minYear, isMaxYear = year === opts.maxYear, html = '
', monthHtml, yearHtml, prev = true, next = true; + for (arr = [], i = 0; i < 12; i++) { + arr.push(''); + } + monthHtml = ''; + if (Array.isArray(opts.yearRange)) { + i = opts.yearRange[0]; + j = opts.yearRange[1] + 1; + } + else { + i = year - opts.yearRange; + j = 1 + year + opts.yearRange; + } + for (arr = []; i < j && i <= opts.maxYear; i++) { + if (i >= opts.minYear) { + arr.push(``); + } + } + if (opts.yearRangeReverse) + arr.reverse(); + yearHtml = ``; + let leftArrow = ''; + html += ``; + html += '
'; + if (opts.showMonthAfterYear) { + html += yearHtml + monthHtml; + } + else { + html += monthHtml + yearHtml; + } + html += '
'; + if (isMinYear && (month === 0 || opts.minMonth >= month)) { + prev = false; + } + if (isMaxYear && (month === 11 || opts.maxMonth <= month)) { + next = false; + } + let rightArrow = ''; + html += ``; + return (html += '
'); + } + // refresh HTML + draw(force = false) { + if (!this.isOpen && !force) + return; + let opts = this.options, minYear = opts.minYear, maxYear = opts.maxYear, minMonth = opts.minMonth, maxMonth = opts.maxMonth, html = '', randId; + if (this._y <= minYear) { + this._y = minYear; + if (!isNaN(minMonth) && this._m < minMonth) { + this._m = minMonth; + } + } + if (this._y >= maxYear) { + this._y = maxYear; + if (!isNaN(maxMonth) && this._m > maxMonth) { + this._m = maxMonth; + } + } + randId = + 'datepicker-title-' + + Math.random() + .toString(36) + .replace(/[^a-z]+/g, '') + .substr(0, 2); + for (let c = 0; c < 1; c++) { + this._renderDateDisplay(); + html += + this.renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year, randId) + this.render(this.calendars[c].year, this.calendars[c].month, randId); + } + this.destroySelects(); + this.calendarEl.innerHTML = html; + // Init Materialize Select + let yearSelect = this.calendarEl.querySelector('.orig-select-year'); + let monthSelect = this.calendarEl.querySelector('.orig-select-month'); + FormSelect.init(yearSelect, { + classes: 'select-year', + dropdownOptions: { container: document.body, constrainWidth: false } + }); + FormSelect.init(monthSelect, { + classes: 'select-month', + dropdownOptions: { container: document.body, constrainWidth: false } + }); + // Add change handlers for select + yearSelect.addEventListener('change', this._handleYearChange); + monthSelect.addEventListener('change', this._handleMonthChange); + if (typeof this.options.onDraw === 'function') { + this.options.onDraw.call(this); + } + } + _setupEventHandlers() { + this.el.addEventListener('click', this._handleInputClick); + this.el.addEventListener('keydown', this._handleInputKeydown); + this.el.addEventListener('change', this._handleInputChange); + this.calendarEl.addEventListener('click', this._handleCalendarClick); + this.doneBtn.addEventListener('click', this._finishSelection); + this.cancelBtn.addEventListener('click', this.close); + if (this.options.showClearBtn) { + this.clearBtn.addEventListener('click', this._handleClearClick); + } + } + _setupVariables() { + const template = document.createElement('template'); + template.innerHTML = Datepicker._template.trim(); + this.modalEl = template.content.firstChild; + this.calendarEl = this.modalEl.querySelector('.datepicker-calendar'); + this.yearTextEl = this.modalEl.querySelector('.year-text'); + this.dateTextEl = this.modalEl.querySelector('.date-text'); + if (this.options.showClearBtn) { + this.clearBtn = this.modalEl.querySelector('.datepicker-clear'); + } + this.doneBtn = this.modalEl.querySelector('.datepicker-done'); + this.cancelBtn = this.modalEl.querySelector('.datepicker-cancel'); + this.formats = { + d: () => { + return this.date.getDate(); + }, + dd: () => { + let d = this.date.getDate(); + return (d < 10 ? '0' : '') + d; + }, + ddd: () => { + return this.options.i18n.weekdaysShort[this.date.getDay()]; + }, + dddd: () => { + return this.options.i18n.weekdays[this.date.getDay()]; + }, + m: () => { + return this.date.getMonth() + 1; + }, + mm: () => { + let m = this.date.getMonth() + 1; + return (m < 10 ? '0' : '') + m; + }, + mmm: () => { + return this.options.i18n.monthsShort[this.date.getMonth()]; + }, + mmmm: () => { + return this.options.i18n.months[this.date.getMonth()]; + }, + yy: () => { + return ('' + this.date.getFullYear()).slice(2); + }, + yyyy: () => { + return this.date.getFullYear(); + } + }; + } + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleInputClick); + this.el.removeEventListener('keydown', this._handleInputKeydown); + this.el.removeEventListener('change', this._handleInputChange); + this.calendarEl.removeEventListener('click', this._handleCalendarClick); + } + _handleInputClick = () => { + this.open(); + }; + _handleInputKeydown = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + e.preventDefault(); + this.open(); + } + }; + _handleCalendarClick = (e) => { + if (!this.isOpen) + return; + const target = (e.target); + if (!target.classList.contains('is-disabled')) { + if (target.classList.contains('datepicker-day-button') && + !target.classList.contains('is-empty') && + !target.parentElement.classList.contains('is-disabled')) { + this.setDate(new Date(e.target.getAttribute('data-year'), e.target.getAttribute('data-month'), e.target.getAttribute('data-day'))); + if (this.options.autoClose) { + this._finishSelection(); + } + } + else if (target.closest('.month-prev')) { + this.prevMonth(); + } + else if (target.closest('.month-next')) { + this.nextMonth(); + } + } + }; + _handleClearClick = () => { + this.date = null; + this.setInputValue(); + this.close(); + }; + _handleMonthChange = (e) => { + this.gotoMonth(e.target.value); + }; + _handleYearChange = (e) => { + this.gotoYear(e.target.value); + }; + // change view to a specific month (zero-index, e.g. 0: January) + gotoMonth(month) { + if (!isNaN(month)) { + this.calendars[0].month = parseInt(month, 10); + this.adjustCalendars(); + } + } + // change view to a specific full year (e.g. "2012") + gotoYear(year) { + if (!isNaN(year)) { + this.calendars[0].year = parseInt(year, 10); + this.adjustCalendars(); + } + } + _handleInputChange = (e) => { + let date; + // Prevent change event from being fired when triggered by the plugin + if (e['detail']?.firedBy === this) + return; + if (this.options.parse) { + date = this.options.parse(this.el.value, typeof this.options.format === "function" + ? this.options.format(new Date(this.el.value)) + : this.options.format); + } + else { + date = new Date(Date.parse(this.el.value)); + } + if (Datepicker._isDate(date)) + this.setDate(date); + }; + renderDayName(opts, day, abbr = false) { + day += opts.firstDay; + while (day >= 7) { + day -= 7; + } + return abbr ? opts.i18n.weekdaysAbbrev[day] : opts.i18n.weekdays[day]; + } + // Set input value to the selected date and close Datepicker + _finishSelection = () => { + this.setInputValue(); + this.close(); + }; + /** + * Open datepicker. + */ + open = () => { + if (this.isOpen) + return; + this.isOpen = true; + if (typeof this.options.onOpen === 'function') { + this.options.onOpen.call(this); + } + this.draw(); + this.modal.open(undefined); + return this; + }; + /** + * Close datepicker. + */ + close = () => { + if (!this.isOpen) + return; + this.isOpen = false; + if (typeof this.options.onClose === 'function') { + this.options.onClose.call(this); + } + this.modal.close(); + return this; + }; + static { + Datepicker._template = ` +
+
+
+ + +
+
+
+
+ +
+ + +
+
+
+
+
`; + } + } + + class Forms { + /** + * Resizes the given TextArea after updating the + * value content dynamically. + * @param textarea TextArea to be resized + */ + static textareaAutoResize(textarea) { + if (!textarea) { + console.error('No textarea element found'); + return; + } + // Textarea Auto Resize + let hiddenDiv = document.querySelector('.hiddendiv'); + if (!hiddenDiv) { + hiddenDiv = document.createElement('div'); + hiddenDiv.classList.add('hiddendiv', 'common'); + document.body.append(hiddenDiv); + } + const style = getComputedStyle(textarea); + // Set font properties of hiddenDiv + const fontFamily = style.fontFamily; //textarea.css('font-family'); + const fontSize = style.fontSize; //textarea.css('font-size'); + const lineHeight = style.lineHeight; //textarea.css('line-height'); + // Firefox can't handle padding shorthand. + const paddingTop = style.paddingTop; //getComputedStyle(textarea).css('padding-top'); + const paddingRight = style.paddingRight; //textarea.css('padding-right'); + const paddingBottom = style.paddingBottom; //textarea.css('padding-bottom'); + const paddingLeft = style.paddingLeft; //textarea.css('padding-left'); + if (fontSize) + hiddenDiv.style.fontSize = fontSize; //('font-size', fontSize); + if (fontFamily) + hiddenDiv.style.fontFamily = fontFamily; //css('font-family', fontFamily); + if (lineHeight) + hiddenDiv.style.lineHeight = lineHeight; //css('line-height', lineHeight); + if (paddingTop) + hiddenDiv.style.paddingTop = paddingTop; //ss('padding-top', paddingTop); + if (paddingRight) + hiddenDiv.style.paddingRight = paddingRight; //css('padding-right', paddingRight); + if (paddingBottom) + hiddenDiv.style.paddingBottom = paddingBottom; //css('padding-bottom', paddingBottom); + if (paddingLeft) + hiddenDiv.style.paddingLeft = paddingLeft; //css('padding-left', paddingLeft); + // Set original-height, if none + if (!textarea.hasAttribute('original-height')) + textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString()); + if (textarea.getAttribute('wrap') === 'off') { + hiddenDiv.style.overflowWrap = 'normal'; // ('overflow-wrap', 'normal') + hiddenDiv.style.whiteSpace = 'pre'; //.css('white-space', 'pre'); + } + hiddenDiv.innerText = textarea.value + '\n'; + const content = hiddenDiv.innerHTML.replace(/\n/g, '
'); + hiddenDiv.innerHTML = content; + // When textarea is hidden, width goes crazy. + // Approximate with half of window size + if (textarea.offsetWidth > 0 && textarea.offsetHeight > 0) { + hiddenDiv.style.width = textarea.getBoundingClientRect().width + 'px'; // ('width', textarea.width() + 'px'); + } + else { + hiddenDiv.style.width = (window.innerWidth / 2) + 'px'; //css('width', window.innerWidth / 2 + 'px'); + } + // Resize if the new height is greater than the + // original height of the textarea + const originalHeight = parseInt(textarea.getAttribute('original-height')); + const prevLength = parseInt(textarea.getAttribute('previous-length')); + if (isNaN(originalHeight)) + return; + if (originalHeight <= hiddenDiv.clientHeight) { + textarea.style.height = hiddenDiv.clientHeight + 'px'; //css('height', hiddenDiv.innerHeight() + 'px'); + } + else if (textarea.value.length < prevLength) { + // In case the new height is less than original height, it + // means the textarea has less text than before + // So we set the height to the original one + textarea.style.height = originalHeight + 'px'; + } + textarea.setAttribute('previous-length', textarea.value.length.toString()); + } + ; + static Init() { + if (typeof document !== 'undefined') + document?.addEventListener("DOMContentLoaded", () => { + document.addEventListener('keyup', (e) => { + const target = e.target; + // Radio and Checkbox focus class + if (target instanceof HTMLInputElement && ['radio', 'checkbox'].includes(target.type)) { + // TAB, check if tabbing to radio or checkbox. + if (Utils.keys.TAB.includes(e.key)) { + target.classList.add('tabbed'); + target.addEventListener('blur', e => target.classList.remove('tabbed'), { once: true }); + } + } + }); + document.querySelectorAll('.materialize-textarea').forEach((textArea) => { + Forms.InitTextarea(textArea); + }); + // File Input Path + document.querySelectorAll('.file-field input[type="file"]').forEach((fileInput) => { + Forms.InitFileInputPath(fileInput); + }); + }); + } + static InitTextarea(textarea) { + // Save Data in Element + textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString()); + textarea.setAttribute('previous-length', textarea.value.length.toString()); + Forms.textareaAutoResize(textarea); + textarea.addEventListener('keyup', e => Forms.textareaAutoResize(textarea)); + textarea.addEventListener('keydown', e => Forms.textareaAutoResize(textarea)); + } + static InitFileInputPath(fileInput) { + fileInput.addEventListener('change', e => { + const fileField = fileInput.closest('.file-field'); + const pathInput = fileField.querySelector('input.file-path'); + const files = fileInput.files; + const filenames = []; + for (let i = 0; i < files.length; i++) { + filenames.push(files[i].name); + } + pathInput.value = filenames.join(', '); + pathInput.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true })); + }); + } + } + + const _defaults$c = { + inDuration: 275, + outDuration: 200, + onOpenStart: null, + onOpenEnd: null, + onCloseStart: null, + onCloseEnd: null + }; + class Materialbox extends Component { + /** If the materialbox overlay is showing. */ + overlayActive; + /** If the materialbox is no longer being animated. */ + doneAnimating; + /** Caption, if specified. */ + caption; + /** Original width of image. */ + originalWidth; + /** Original height of image. */ + originalHeight; + originInlineStyles; + placeholder; + _changedAncestorList; + newHeight; + newWidth; + windowWidth; + windowHeight; + attrWidth; + attrHeight; + _overlay; + _photoCaption; + constructor(el, options) { + super(el, options, Materialbox); + this.el.M_Materialbox = this; + this.options = { + ...Materialbox.defaults, + ...options + }; + this.overlayActive = false; + this.doneAnimating = true; + this.placeholder = document.createElement('div'); + this.placeholder.classList.add('material-placeholder'); + this.originalWidth = 0; + this.originalHeight = 0; + this.originInlineStyles = this.el.getAttribute('style'); + this.caption = this.el.getAttribute('data-caption') || ''; + // Wrap + this.el.before(this.placeholder); + this.placeholder.append(this.el); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$c; + } + /** + * Initializes instances of MaterialBox. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Materialbox); + } + static getInstance(el) { + return el.M_Materialbox; + } + destroy() { + this._removeEventHandlers(); + this.el.M_Materialbox = undefined; + // Unwrap image + //this.placeholder.after(this.el).remove(); + this.placeholder.remove(); + this.el.removeAttribute('style'); + } + _setupEventHandlers() { + this.el.addEventListener('click', this._handleMaterialboxClick); + } + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleMaterialboxClick); + } + _handleMaterialboxClick = () => { + // If already modal, return to original + if (this.doneAnimating === false || (this.overlayActive && this.doneAnimating)) + this.close(); + else + this.open(); + }; + _handleWindowScroll = () => { + if (this.overlayActive) + this.close(); + }; + _handleWindowResize = () => { + if (this.overlayActive) + this.close(); + }; + _handleWindowEscape = (e) => { + if (Utils.keys.ESC.includes(e.key) && this.doneAnimating && this.overlayActive) + this.close(); + }; + _makeAncestorsOverflowVisible() { + this._changedAncestorList = []; + let ancestor = this.placeholder.parentNode; + while (ancestor !== null && ancestor !== document) { + const curr = ancestor; + if (curr.style.overflow !== 'visible') { + curr.style.overflow = 'visible'; + this._changedAncestorList.push(curr); + } + ancestor = ancestor.parentNode; + } + } + _offset(el) { + const box = el.getBoundingClientRect(); + const docElem = document.documentElement; + return { + top: box.top + window.pageYOffset - docElem.clientTop, + left: box.left + window.pageXOffset - docElem.clientLeft + }; + } + _updateVars() { + this.windowWidth = window.innerWidth; + this.windowHeight = window.innerHeight; + this.caption = this.el.getAttribute('data-caption') || ''; + } + // Image + _animateImageIn() { + this.el.style.maxHeight = this.newHeight.toString() + 'px'; + this.el.style.maxWidth = this.newWidth.toString() + 'px'; + const duration = this.options.inDuration; + // from + this.el.style.transition = 'none'; + this.el.style.height = this.originalHeight + 'px'; + this.el.style.width = this.originalWidth + 'px'; + setTimeout(() => { + // easeOutQuad + this.el.style.transition = `height ${duration}ms ease, + width ${duration}ms ease, + left ${duration}ms ease, + top ${duration}ms ease + `; + // to + this.el.style.height = this.newHeight + 'px'; + this.el.style.width = this.newWidth + 'px'; + this.el.style.left = (Utils.getDocumentScrollLeft() + + this.windowWidth / 2 - + this._offset(this.placeholder).left - + this.newWidth / 2) + 'px'; + this.el.style.top = (Utils.getDocumentScrollTop() + + this.windowHeight / 2 - + this._offset(this.placeholder).top - + this.newHeight / 2) + 'px'; + }, 1); + setTimeout(() => { + this.doneAnimating = true; + if (typeof this.options.onOpenEnd === 'function') + this.options.onOpenEnd.call(this, this.el); + }, duration); + /* + anim({ + targets: this.el, // image + height: [this.originalHeight, this.newHeight], + width: [this.originalWidth, this.newWidth], + left: + Utils.getDocumentScrollLeft() + + this.windowWidth / 2 - + this._offset(this.placeholder).left - + this.newWidth / 2, + top: + Utils.getDocumentScrollTop() + + this.windowHeight / 2 - + this._offset(this.placeholder).top - + this.newHeight / 2, + + duration: this.options.inDuration, + easing: 'easeOutQuad', + complete: () => { + this.doneAnimating = true; + if (typeof this.options.onOpenEnd === 'function') this.options.onOpenEnd.call(this, this.el); + } + }); + */ + } + _animateImageOut() { + const duration = this.options.outDuration; + // easeOutQuad + this.el.style.transition = `height ${duration}ms ease, + width ${duration}ms ease, + left ${duration}ms ease, + top ${duration}ms ease + `; + // to + this.el.style.height = this.originalWidth + 'px'; + this.el.style.width = this.originalWidth + 'px'; + this.el.style.left = '0'; + this.el.style.top = '0'; + setTimeout(() => { + this.placeholder.style.height = ''; + this.placeholder.style.width = ''; + this.placeholder.style.position = ''; + this.placeholder.style.top = ''; + this.placeholder.style.left = ''; + // Revert to width or height attribute + if (this.attrWidth) + this.el.setAttribute('width', this.attrWidth.toString()); + if (this.attrHeight) + this.el.setAttribute('height', this.attrHeight.toString()); + this.el.removeAttribute('style'); + this.originInlineStyles && this.el.setAttribute('style', this.originInlineStyles); + // Remove class + this.el.classList.remove('active'); + this.doneAnimating = true; + // Remove overflow overrides on ancestors + this._changedAncestorList.forEach(anchestor => anchestor.style.overflow = ''); + // onCloseEnd callback + if (typeof this.options.onCloseEnd === 'function') + this.options.onCloseEnd.call(this, this.el); + }, duration); + } + // Caption + _addCaption() { + this._photoCaption = document.createElement('div'); + this._photoCaption.classList.add('materialbox-caption'); + this._photoCaption.innerText = this.caption; + document.body.append(this._photoCaption); + this._photoCaption.style.display = 'inline'; + // Animate + this._photoCaption.style.transition = 'none'; + this._photoCaption.style.opacity = '0'; + const duration = this.options.inDuration; + setTimeout(() => { + this._photoCaption.style.transition = `opacity ${duration}ms ease`; + this._photoCaption.style.opacity = '1'; + }, 1); + } + _removeCaption() { + const duration = this.options.outDuration; + this._photoCaption.style.transition = `opacity ${duration}ms ease`; + this._photoCaption.style.opacity = '0'; + setTimeout(() => { + this._photoCaption.remove(); + }, duration); + } + // Overlay + _addOverlay() { + this._overlay = document.createElement('div'); + this._overlay.id = 'materialbox-overlay'; + this._overlay.addEventListener('click', e => { + if (this.doneAnimating) + this.close(); + }, { once: true }); + // Put before in origin image to preserve z-index layering. + this.el.before(this._overlay); + // Set dimensions if needed + const overlayOffset = this._overlay.getBoundingClientRect(); + this._overlay.style.width = this.windowWidth + 'px'; + this._overlay.style.height = this.windowHeight + 'px'; + this._overlay.style.left = -1 * overlayOffset.left + 'px'; + this._overlay.style.top = -1 * overlayOffset.top + 'px'; + // Animate + this._overlay.style.transition = 'none'; + this._overlay.style.opacity = '0'; + const duration = this.options.inDuration; + setTimeout(() => { + this._overlay.style.transition = `opacity ${duration}ms ease`; + this._overlay.style.opacity = '1'; + }, 1); + } + _removeOverlay() { + const duration = this.options.outDuration; + this._overlay.style.transition = `opacity ${duration}ms ease`; + this._overlay.style.opacity = '0'; + setTimeout(() => { + this.overlayActive = false; + this._overlay.remove(); + }, duration); + } + /** + * Open materialbox. + */ + open = () => { + this._updateVars(); + this.originalWidth = this.el.getBoundingClientRect().width; + this.originalHeight = this.el.getBoundingClientRect().height; + // Set states + this.doneAnimating = false; + this.el.classList.add('active'); + this.overlayActive = true; + // onOpenStart callback + if (typeof this.options.onOpenStart === 'function') + this.options.onOpenStart.call(this, this.el); + // Set positioning for placeholder + this.placeholder.style.width = this.placeholder.getBoundingClientRect().width + 'px'; + this.placeholder.style.height = this.placeholder.getBoundingClientRect().height + 'px'; + this.placeholder.style.position = 'relative'; + this.placeholder.style.top = '0'; + this.placeholder.style.left = '0'; + this._makeAncestorsOverflowVisible(); + // Set css on origin + this.el.style.position = 'absolute'; + this.el.style.zIndex = '1000'; + this.el.style.willChange = 'left, top, width, height'; + // Change from width or height attribute to css + this.attrWidth = this.el.getAttribute('width'); + this.attrHeight = this.el.getAttribute('height'); + if (this.attrWidth) { + this.el.style.width = this.attrWidth + 'px'; + this.el.removeAttribute('width'); + } + if (this.attrHeight) { + this.el.style.width = this.attrHeight + 'px'; + this.el.removeAttribute('height'); + } + this._addOverlay(); + // Add and animate caption if it exists + if (this.caption !== '') + this._addCaption(); + // Resize Image + const widthPercent = this.originalWidth / this.windowWidth; + const heightPercent = this.originalHeight / this.windowHeight; + this.newWidth = 0; + this.newHeight = 0; + if (widthPercent > heightPercent) { + // Width first + const ratio = this.originalHeight / this.originalWidth; + this.newWidth = this.windowWidth * 0.9; + this.newHeight = this.windowWidth * 0.9 * ratio; + } + else { + // Height first + const ratio = this.originalWidth / this.originalHeight; + this.newWidth = this.windowHeight * 0.9 * ratio; + this.newHeight = this.windowHeight * 0.9; + } + this._animateImageIn(); + // Handle Exit triggers + window.addEventListener('scroll', this._handleWindowScroll); + window.addEventListener('resize', this._handleWindowResize); + window.addEventListener('keyup', this._handleWindowEscape); + }; + /** + * Close materialbox. + */ + close = () => { + this._updateVars(); + this.doneAnimating = false; + // onCloseStart callback + if (typeof this.options.onCloseStart === 'function') + this.options.onCloseStart.call(this, this.el); + //anim.remove(this.el); + //anim.remove(this._overlay); + //if (this.caption !== '') anim.remove(this._photoCaption); + // disable exit handlers + window.removeEventListener('scroll', this._handleWindowScroll); + window.removeEventListener('resize', this._handleWindowResize); + window.removeEventListener('keyup', this._handleWindowEscape); + this._removeOverlay(); + this._animateImageOut(); + if (this.caption !== '') + this._removeCaption(); + }; + } + + let _defaults$b = { + responsiveThreshold: 0 // breakpoint for swipeable + }; + class Parallax extends Component { + _enabled; + _img; + static _parallaxes = []; + static _handleScrollThrottled; + static _handleWindowResizeThrottled; + constructor(el, options) { + super(el, options, Parallax); + this.el.M_Parallax = this; + this.options = { + ...Parallax.defaults, + ...options + }; + this._enabled = window.innerWidth > this.options.responsiveThreshold; + this._img = this.el.querySelector('img'); + this._updateParallax(); + this._setupEventHandlers(); + this._setupStyles(); + Parallax._parallaxes.push(this); + } + static get defaults() { + return _defaults$b; + } + /** + * Initializes instances of Parallax. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Parallax); + } + static getInstance(el) { + return el.M_Parallax; + } + destroy() { + Parallax._parallaxes.splice(Parallax._parallaxes.indexOf(this), 1); + this._img.style.transform = ''; + this._removeEventHandlers(); + this.el.M_Parallax = undefined; + } + static _handleScroll() { + for (let i = 0; i < Parallax._parallaxes.length; i++) { + let parallaxInstance = Parallax._parallaxes[i]; + parallaxInstance._updateParallax.call(parallaxInstance); + } + } + static _handleWindowResize() { + for (let i = 0; i < Parallax._parallaxes.length; i++) { + let parallaxInstance = Parallax._parallaxes[i]; + parallaxInstance._enabled = + window.innerWidth > parallaxInstance.options.responsiveThreshold; + } + } + _setupEventHandlers() { + this._img.addEventListener('load', this._handleImageLoad); + if (Parallax._parallaxes.length === 0) { + if (!Parallax._handleScrollThrottled) { + Parallax._handleScrollThrottled = Utils.throttle(Parallax._handleScroll, 5); + } + if (!Parallax._handleWindowResizeThrottled) { + Parallax._handleWindowResizeThrottled = Utils.throttle(Parallax._handleWindowResize, 5); + } + window.addEventListener('scroll', Parallax._handleScrollThrottled); + window.addEventListener('resize', Parallax._handleWindowResizeThrottled); + } + } + _removeEventHandlers() { + this._img.removeEventListener('load', this._handleImageLoad); + if (Parallax._parallaxes.length === 0) { + window.removeEventListener('scroll', Parallax._handleScrollThrottled); + window.removeEventListener('resize', Parallax._handleWindowResizeThrottled); + } + } + _setupStyles() { + this._img.style.opacity = '1'; + } + _handleImageLoad = () => { + this._updateParallax(); + }; + _offset(el) { + const box = el.getBoundingClientRect(); + const docElem = document.documentElement; + return { + top: box.top + window.pageYOffset - docElem.clientTop, + left: box.left + window.pageXOffset - docElem.clientLeft + }; + } + _updateParallax() { + const containerHeight = this.el.getBoundingClientRect().height > 0 ? this.el.parentNode.offsetHeight : 500; + const imgHeight = this._img.offsetHeight; + const parallaxDist = imgHeight - containerHeight; + const bottom = this._offset(this.el).top + containerHeight; + const top = this._offset(this.el).top; + const scrollTop = Utils.getDocumentScrollTop(); + const windowHeight = window.innerHeight; + const windowBottom = scrollTop + windowHeight; + const percentScrolled = (windowBottom - top) / (containerHeight + windowHeight); + const parallax = parallaxDist * percentScrolled; + if (!this._enabled) { + this._img.style.transform = ''; + } + else if (bottom > scrollTop && top < scrollTop + windowHeight) { + this._img.style.transform = `translate3D(-50%, ${parallax}px, 0)`; + } + } + } + + let _defaults$a = { + top: 0, + bottom: Infinity, + offset: 0, + onPositionChange: null + }; + class Pushpin extends Component { + static _pushpins; + originalOffset; + constructor(el, options) { + super(el, options, Pushpin); + this.el.M_Pushpin = this; + this.options = { + ...Pushpin.defaults, + ...options + }; + this.originalOffset = this.el.offsetTop; + Pushpin._pushpins.push(this); + this._setupEventHandlers(); + this._updatePosition(); + } + static get defaults() { + return _defaults$a; + } + /** + * Initializes instances of Pushpin. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Pushpin); + } + static getInstance(el) { + return el.M_Pushpin; + } + destroy() { + this.el.style.top = null; + this._removePinClasses(); + // Remove pushpin Inst + let index = Pushpin._pushpins.indexOf(this); + Pushpin._pushpins.splice(index, 1); + if (Pushpin._pushpins.length === 0) { + this._removeEventHandlers(); + } + this.el.M_Pushpin = undefined; + } + static _updateElements() { + for (let elIndex in Pushpin._pushpins) { + let pInstance = Pushpin._pushpins[elIndex]; + pInstance._updatePosition(); + } + } + _setupEventHandlers() { + document.addEventListener('scroll', Pushpin._updateElements); + } + _removeEventHandlers() { + document.removeEventListener('scroll', Pushpin._updateElements); + } + _updatePosition() { + let scrolled = Utils.getDocumentScrollTop() + this.options.offset; + if (this.options.top <= scrolled && + this.options.bottom >= scrolled && + !this.el.classList.contains('pinned')) { + this._removePinClasses(); + this.el.style.top = `${this.options.offset}px`; + this.el.classList.add('pinned'); + // onPositionChange callback + if (typeof this.options.onPositionChange === 'function') { + this.options.onPositionChange.call(this, 'pinned'); + } + } + // Add pin-top (when scrolled position is above top) + if (scrolled < this.options.top && !this.el.classList.contains('pin-top')) { + this._removePinClasses(); + this.el.style.top = '0'; + this.el.classList.add('pin-top'); + // onPositionChange callback + if (typeof this.options.onPositionChange === 'function') { + this.options.onPositionChange.call(this, 'pin-top'); + } + } + // Add pin-bottom (when scrolled position is below bottom) + if (scrolled > this.options.bottom && !this.el.classList.contains('pin-bottom')) { + this._removePinClasses(); + this.el.classList.add('pin-bottom'); + this.el.style.top = `${this.options.bottom - this.originalOffset}px`; + // onPositionChange callback + if (typeof this.options.onPositionChange === 'function') { + this.options.onPositionChange.call(this, 'pin-bottom'); + } + } + } + _removePinClasses() { + // IE 11 bug (can't remove multiple classes in one line) + this.el.classList.remove('pin-top'); + this.el.classList.remove('pinned'); + this.el.classList.remove('pin-bottom'); + } + static { + Pushpin._pushpins = []; + } + } + + let _defaults$9 = { + throttle: 100, + scrollOffset: 200, // offset - 200 allows elements near bottom of page to scroll + activeClass: 'active', + getActiveElement: (id) => { return 'a[href="#' + id + '"]'; } + }; + class ScrollSpy extends Component { + static _elements; + static _count; + static _increment; + tickId; + id; + static _elementsInView; + static _visibleElements; + static _ticks; + constructor(el, options) { + super(el, options, ScrollSpy); + this.el.M_ScrollSpy = this; + this.options = { + ...ScrollSpy.defaults, + ...options + }; + ScrollSpy._elements.push(this); + ScrollSpy._count++; + ScrollSpy._increment++; + this.tickId = -1; + this.id = ScrollSpy._increment; + this._setupEventHandlers(); + this._handleWindowScroll(); + } + static get defaults() { + return _defaults$9; + } + /** + * Initializes instances of ScrollSpy. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, ScrollSpy); + } + static getInstance(el) { + return el.M_ScrollSpy; + } + destroy() { + ScrollSpy._elements.splice(ScrollSpy._elements.indexOf(this), 1); + ScrollSpy._elementsInView.splice(ScrollSpy._elementsInView.indexOf(this), 1); + ScrollSpy._visibleElements.splice(ScrollSpy._visibleElements.indexOf(this.el), 1); + ScrollSpy._count--; + this._removeEventHandlers(); + const actElem = document.querySelector(this.options.getActiveElement(this.el.id)); + actElem.classList.remove(this.options.activeClass); + this.el.M_ScrollSpy = undefined; + } + _setupEventHandlers() { + if (ScrollSpy._count === 1) { + window.addEventListener('scroll', this._handleWindowScroll); + window.addEventListener('resize', this._handleThrottledResize); + document.body.addEventListener('click', this._handleTriggerClick); + } + } + _removeEventHandlers() { + if (ScrollSpy._count === 0) { + window.removeEventListener('scroll', this._handleWindowScroll); + window.removeEventListener('resize', this._handleThrottledResize); + document.body.removeEventListener('click', this._handleTriggerClick); + } + } + _handleThrottledResize = Utils.throttle(function () { this._handleWindowScroll(); }, 200).bind(this); + _handleTriggerClick = (e) => { + const trigger = e.target; + for (let i = ScrollSpy._elements.length - 1; i >= 0; i--) { + const scrollspy = ScrollSpy._elements[i]; + const x = document.querySelector('a[href="#' + scrollspy.el.id + '"]'); + if (trigger === x) { + e.preventDefault(); + scrollspy.el.scrollIntoView({ behavior: 'smooth' }); + break; + } + } + }; + _handleWindowScroll = () => { + // unique tick id + ScrollSpy._ticks++; + // viewport rectangle + let top = Utils.getDocumentScrollTop(), left = Utils.getDocumentScrollLeft(), right = left + window.innerWidth, bottom = top + window.innerHeight; + // determine which elements are in view + let intersections = ScrollSpy._findElements(top, right, bottom, left); + for (let i = 0; i < intersections.length; i++) { + let scrollspy = intersections[i]; + let lastTick = scrollspy.tickId; + if (lastTick < 0) { + // entered into view + scrollspy._enter(); + } + // update tick id + scrollspy.tickId = ScrollSpy._ticks; + } + for (let i = 0; i < ScrollSpy._elementsInView.length; i++) { + let scrollspy = ScrollSpy._elementsInView[i]; + let lastTick = scrollspy.tickId; + if (lastTick >= 0 && lastTick !== ScrollSpy._ticks) { + // exited from view + scrollspy._exit(); + scrollspy.tickId = -1; + } + } + // remember elements in view for next tick + ScrollSpy._elementsInView = intersections; + }; + static _offset(el) { + const box = el.getBoundingClientRect(); + const docElem = document.documentElement; + return { + top: box.top + window.pageYOffset - docElem.clientTop, + left: box.left + window.pageXOffset - docElem.clientLeft + }; + } + static _findElements(top, right, bottom, left) { + let hits = []; + for (let i = 0; i < ScrollSpy._elements.length; i++) { + let scrollspy = ScrollSpy._elements[i]; + let currTop = top + scrollspy.options.scrollOffset || 200; + if (scrollspy.el.getBoundingClientRect().height > 0) { + let elTop = ScrollSpy._offset(scrollspy.el).top, elLeft = ScrollSpy._offset(scrollspy.el).left, elRight = elLeft + scrollspy.el.getBoundingClientRect().width, elBottom = elTop + scrollspy.el.getBoundingClientRect().height; + let isIntersect = !(elLeft > right || + elRight < left || + elTop > bottom || + elBottom < currTop); + if (isIntersect) { + hits.push(scrollspy); + } + } + } + return hits; + } + _enter() { + ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0); + if (ScrollSpy._visibleElements[0]) { + const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id)); + actElem?.classList.remove(this.options.activeClass); + if (ScrollSpy._visibleElements[0].M_ScrollSpy && this.id < ScrollSpy._visibleElements[0].M_ScrollSpy.id) { + ScrollSpy._visibleElements.unshift(this.el); + } + else { + ScrollSpy._visibleElements.push(this.el); + } + } + else { + ScrollSpy._visibleElements.push(this.el); + } + const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id); + document.querySelector(selector)?.classList.add(this.options.activeClass); + } + _exit() { + ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0); + if (ScrollSpy._visibleElements[0]) { + const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id)); + actElem?.classList.remove(this.options.activeClass); + ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((x) => x.id != this.el.id); + if (ScrollSpy._visibleElements[0]) { + // Check if empty + const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id); + document.querySelector(selector)?.classList.add(this.options.activeClass); + } + } + } + static { + ScrollSpy._elements = []; + ScrollSpy._elementsInView = []; + ScrollSpy._visibleElements = []; // Array. + ScrollSpy._count = 0; + ScrollSpy._increment = 0; + ScrollSpy._ticks = 0; + } + } + + const _defaults$8 = { + edge: 'left', + draggable: true, + dragTargetWidth: '10px', + inDuration: 250, + outDuration: 200, + onOpenStart: null, + onOpenEnd: null, + onCloseStart: null, + onCloseEnd: null, + preventScrolling: true + }; + class Sidenav extends Component { + id; + /** Describes open/close state of Sidenav. */ + isOpen; + /** Describes if sidenav is fixed. */ + isFixed; + /** Describes if Sidenav is being dragged. */ + isDragged; + lastWindowWidth; + lastWindowHeight; + static _sidenavs; + _overlay; + dragTarget; + _startingXpos; + _xPos; + _time; + _width; + _initialScrollTop; + _verticallyScrolling; + deltaX; + velocityX; + percentOpen; + constructor(el, options) { + super(el, options, Sidenav); + this.el.M_Sidenav = this; + this.options = { + ...Sidenav.defaults, + ...options + }; + this.id = this.el.id; + this.isOpen = false; + this.isFixed = this.el.classList.contains('sidenav-fixed'); + this.isDragged = false; + // Window size variables for window resize checks + this.lastWindowWidth = window.innerWidth; + this.lastWindowHeight = window.innerHeight; + this._createOverlay(); + this._createDragTarget(); + this._setupEventHandlers(); + this._setupClasses(); + this._setupFixed(); + Sidenav._sidenavs.push(this); + } + static get defaults() { + return _defaults$8; + } + /** + * Initializes instances of Sidenav. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Sidenav); + } + static getInstance(el) { + return el.M_Sidenav; + } + destroy() { + this._removeEventHandlers(); + this._enableBodyScrolling(); + this._overlay.parentNode.removeChild(this._overlay); + this.dragTarget.parentNode.removeChild(this.dragTarget); + this.el.M_Sidenav = undefined; + this.el.style.transform = ''; + const index = Sidenav._sidenavs.indexOf(this); + if (index >= 0) { + Sidenav._sidenavs.splice(index, 1); + } + } + _createOverlay() { + this._overlay = document.createElement('div'); + this._overlay.classList.add('sidenav-overlay'); + this._overlay.addEventListener('click', this.close); + document.body.appendChild(this._overlay); + } + _setupEventHandlers() { + if (Sidenav._sidenavs.length === 0) { + document.body.addEventListener('click', this._handleTriggerClick); + } + var passiveIfSupported = null; + this.dragTarget.addEventListener('touchmove', this._handleDragTargetDrag, passiveIfSupported); + this.dragTarget.addEventListener('touchend', this._handleDragTargetRelease); + this._overlay.addEventListener('touchmove', this._handleCloseDrag, passiveIfSupported); + this._overlay.addEventListener('touchend', this._handleCloseRelease); + this.el.addEventListener('touchmove', this._handleCloseDrag, passiveIfSupported); + this.el.addEventListener('touchend', this._handleCloseRelease); + this.el.addEventListener('click', this._handleCloseTriggerClick); + // Add resize for side nav fixed + if (this.isFixed) { + window.addEventListener('resize', this._handleWindowResize); + } + } + _removeEventHandlers() { + if (Sidenav._sidenavs.length === 1) { + document.body.removeEventListener('click', this._handleTriggerClick); + } + this.dragTarget.removeEventListener('touchmove', this._handleDragTargetDrag); + this.dragTarget.removeEventListener('touchend', this._handleDragTargetRelease); + this._overlay.removeEventListener('touchmove', this._handleCloseDrag); + this._overlay.removeEventListener('touchend', this._handleCloseRelease); + this.el.removeEventListener('touchmove', this._handleCloseDrag); + this.el.removeEventListener('touchend', this._handleCloseRelease); + this.el.removeEventListener('click', this._handleCloseTriggerClick); + // Remove resize for side nav fixed + if (this.isFixed) { + window.removeEventListener('resize', this._handleWindowResize); + } + } + _handleTriggerClick(e) { + const trigger = e.target.closest('.sidenav-trigger'); + if (e.target && trigger) { + const sidenavId = Utils.getIdFromTrigger(trigger); + const sidenavInstance = document.getElementById(sidenavId).M_Sidenav; + if (sidenavInstance) { + sidenavInstance.open(trigger); + } + e.preventDefault(); + } + } + // Set variables needed at the beginning of drag and stop any current transition. + _startDrag(e) { + const clientX = e.targetTouches[0].clientX; + this.isDragged = true; + this._startingXpos = clientX; + this._xPos = this._startingXpos; + this._time = Date.now(); + this._width = this.el.getBoundingClientRect().width; + this._overlay.style.display = 'block'; + this._initialScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop(); + this._verticallyScrolling = false; + } + //Set variables needed at each drag move update tick + _dragMoveUpdate(e) { + const clientX = e.targetTouches[0].clientX; + const currentScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop(); + this.deltaX = Math.abs(this._xPos - clientX); + this._xPos = clientX; + this.velocityX = this.deltaX / (Date.now() - this._time); + this._time = Date.now(); + if (this._initialScrollTop !== currentScrollTop) { + this._verticallyScrolling = true; + } + } + _handleDragTargetDrag = (e) => { + // Check if draggable + if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) { + return; + } + // If not being dragged, set initial drag start variables + if (!this.isDragged) { + this._startDrag(e); + } + // Run touchmove updates + this._dragMoveUpdate(e); + // Calculate raw deltaX + let totalDeltaX = this._xPos - this._startingXpos; + // dragDirection is the attempted user drag direction + const dragDirection = totalDeltaX > 0 ? 'right' : 'left'; + // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction + totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX)); + if (this.options.edge === dragDirection) { + totalDeltaX = 0; + } + /** + * transformX is the drag displacement + * transformPrefix is the initial transform placement + * Invert values if Sidenav is right edge + */ + let transformX = totalDeltaX; + let transformPrefix = 'translateX(-100%)'; + if (this.options.edge === 'right') { + transformPrefix = 'translateX(100%)'; + transformX = -transformX; + } + // Calculate open/close percentage of sidenav, with open = 1 and close = 0 + this.percentOpen = Math.min(1, totalDeltaX / this._width); + // Set transform and opacity styles + this.el.style.transform = `${transformPrefix} translateX(${transformX}px)`; + this._overlay.style.opacity = this.percentOpen.toString(); + }; + _handleDragTargetRelease = () => { + if (this.isDragged) { + if (this.percentOpen > 0.2) { + this.open(); + } + else { + this._animateOut(); + } + this.isDragged = false; + this._verticallyScrolling = false; + } + }; + _handleCloseDrag = (e) => { + if (this.isOpen) { + // Check if draggable + if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) { + return; + } + // If not being dragged, set initial drag start variables + if (!this.isDragged) { + this._startDrag(e); + } + // Run touchmove updates + this._dragMoveUpdate(e); + // Calculate raw deltaX + let totalDeltaX = this._xPos - this._startingXpos; + // dragDirection is the attempted user drag direction + let dragDirection = totalDeltaX > 0 ? 'right' : 'left'; + // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction + totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX)); + if (this.options.edge !== dragDirection) { + totalDeltaX = 0; + } + let transformX = -totalDeltaX; + if (this.options.edge === 'right') { + transformX = -transformX; + } + // Calculate open/close percentage of sidenav, with open = 1 and close = 0 + this.percentOpen = Math.min(1, 1 - totalDeltaX / this._width); + // Set transform and opacity styles + this.el.style.transform = `translateX(${transformX}px)`; + this._overlay.style.opacity = this.percentOpen.toString(); + } + }; + _handleCloseRelease = () => { + if (this.isOpen && this.isDragged) { + if (this.percentOpen > 0.8) { + this._animateIn(); + } + else { + this.close(); + } + this.isDragged = false; + this._verticallyScrolling = false; + } + }; + // Handles closing of Sidenav when element with class .sidenav-close + _handleCloseTriggerClick = (e) => { + const closeTrigger = e.target.closest('.sidenav-close'); + if (closeTrigger && !this._isCurrentlyFixed()) { + this.close(); + } + }; + _handleWindowResize = () => { + // Only handle horizontal resizes + if (this.lastWindowWidth !== window.innerWidth) { + if (window.innerWidth > 992) { + this.open(); + } + else { + this.close(); + } + } + this.lastWindowWidth = window.innerWidth; + this.lastWindowHeight = window.innerHeight; + }; + _setupClasses() { + if (this.options.edge === 'right') { + this.el.classList.add('right-aligned'); + this.dragTarget.classList.add('right-aligned'); + } + } + _removeClasses() { + this.el.classList.remove('right-aligned'); + this.dragTarget.classList.remove('right-aligned'); + } + _setupFixed() { + if (this._isCurrentlyFixed()) + this.open(); + } + _isCurrentlyFixed() { + return this.isFixed && window.innerWidth > 992; + } + _createDragTarget() { + const dragTarget = document.createElement('div'); + dragTarget.classList.add('drag-target'); + dragTarget.style.width = this.options.dragTargetWidth; + document.body.appendChild(dragTarget); + this.dragTarget = dragTarget; + } + _preventBodyScrolling() { + document.body.style.overflow = 'hidden'; + } + _enableBodyScrolling() { + document.body.style.overflow = ''; + } + /** + * Opens Sidenav. + */ + open = () => { + if (this.isOpen === true) + return; + this.isOpen = true; + // Run onOpenStart callback + if (typeof this.options.onOpenStart === 'function') { + this.options.onOpenStart.call(this, this.el); + } + // Handle fixed Sidenav + if (this._isCurrentlyFixed()) { + // Show if fixed + this.el.style.transform = 'translateX(0)'; + this._enableBodyScrolling(); + this._overlay.style.display = 'none'; + } + // Handle non-fixed Sidenav + else { + if (this.options.preventScrolling) + this._preventBodyScrolling(); + if (!this.isDragged || this.percentOpen != 1) + this._animateIn(); + } + }; + /** + * Closes Sidenav. + */ + close = () => { + if (this.isOpen === false) + return; + this.isOpen = false; + // Run onCloseStart callback + if (typeof this.options.onCloseStart === 'function') { + this.options.onCloseStart.call(this, this.el); + } + // Handle fixed Sidenav + if (this._isCurrentlyFixed()) { + const transformX = this.options.edge === 'left' ? '-105%' : '105%'; + this.el.style.transform = `translateX(${transformX})`; + } + // Handle non-fixed Sidenav + else { + this._enableBodyScrolling(); + if (!this.isDragged || this.percentOpen != 0) { + this._animateOut(); + } + else { + this._overlay.style.display = 'none'; + } + } + }; + _animateIn() { + this._animateSidenavIn(); + this._animateOverlayIn(); + } + _animateOut() { + this._animateSidenavOut(); + this._animateOverlayOut(); + } + _animateSidenavIn() { + let slideOutPercent = this.options.edge === 'left' ? -1 : 1; + if (this.isDragged) { + slideOutPercent = + this.options.edge === 'left' + ? slideOutPercent + this.percentOpen + : slideOutPercent - this.percentOpen; + } + const duration = this.options.inDuration; + // from + this.el.style.transition = 'none'; + this.el.style.transform = 'translateX(' + (slideOutPercent * 100) + '%)'; + setTimeout(() => { + this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad + // to + this.el.style.transform = 'translateX(0)'; + }, 1); + setTimeout(() => { + if (typeof this.options.onOpenEnd === 'function') + this.options.onOpenEnd.call(this, this.el); + }, duration); + } + _animateSidenavOut() { + const endPercent = this.options.edge === 'left' ? -1 : 1; + if (this.isDragged) { + this.options.edge === 'left' + ? endPercent + this.percentOpen + : endPercent - this.percentOpen; + } + const duration = this.options.outDuration; + this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad + // to + this.el.style.transform = 'translateX(' + (endPercent * 100) + '%)'; + setTimeout(() => { + if (typeof this.options.onCloseEnd === 'function') + this.options.onCloseEnd.call(this, this.el); + }, duration); + } + _animateOverlayIn() { + let start = 0; + if (this.isDragged) + start = this.percentOpen; + else + this._overlay.style.display = 'block'; + // Animation + const duration = this.options.inDuration; + // from + this._overlay.style.transition = 'none'; + this._overlay.style.opacity = start.toString(); + // easeOutQuad + setTimeout(() => { + this._overlay.style.transition = `opacity ${duration}ms ease`; + // to + this._overlay.style.opacity = '1'; + }, 1); + } + _animateOverlayOut() { + const duration = this.options.outDuration; + // easeOutQuad + this._overlay.style.transition = `opacity ${duration}ms ease`; + // to + this._overlay.style.opacity = '0'; + setTimeout(() => { + this._overlay.style.display = 'none'; + }, duration); + } + static { + Sidenav._sidenavs = []; + } + } + + let _defaults$7 = { + duration: 300, + onShow: null, + swipeable: false, + responsiveThreshold: Infinity // breakpoint for swipeable + }; + class Tabs extends Component { + _tabLinks; + _index; + _indicator; + _tabWidth; + _tabsWidth; + _tabsCarousel; + _activeTabLink; + _content; + constructor(el, options) { + super(el, options, Tabs); + this.el.M_Tabs = this; + this.options = { + ...Tabs.defaults, + ...options + }; + this._tabLinks = this.el.querySelectorAll('li.tab > a'); + this._index = 0; + this._setupActiveTabLink(); + if (this.options.swipeable) { + this._setupSwipeableTabs(); + } + else { + this._setupNormalTabs(); + } + // Setup tabs indicator after content to ensure accurate widths + this._setTabsAndTabWidth(); + this._createIndicator(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$7; + } + /** + * Initializes instances of Tabs. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Tabs); + } + static getInstance(el) { + return el.M_Tabs; + } + destroy() { + this._removeEventHandlers(); + this._indicator.parentNode.removeChild(this._indicator); + if (this.options.swipeable) { + this._teardownSwipeableTabs(); + } + else { + this._teardownNormalTabs(); + } + this.el.M_Tabs = undefined; + } + /** + * The index of tab that is currently shown. + */ + get index() { return this._index; } + _setupEventHandlers() { + window.addEventListener('resize', this._handleWindowResize); + this.el.addEventListener('click', this._handleTabClick); + } + _removeEventHandlers() { + window.removeEventListener('resize', this._handleWindowResize); + this.el.removeEventListener('click', this._handleTabClick); + } + _handleWindowResize = () => { + this._setTabsAndTabWidth(); + if (this._tabWidth !== 0 && this._tabsWidth !== 0) { + this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px'; + this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px'; + } + }; + _handleTabClick = (e) => { + const tabLink = e.target; + const tab = tabLink.parentElement; + // Handle click on tab link only + if (!tabLink || !tab.classList.contains('tab')) + return; + // is disabled? + if (tab.classList.contains('disabled')) { + e.preventDefault(); + return; + } + // Act as regular link if target attribute is specified. + if (tabLink.hasAttribute('target')) + return; + // Make the old tab inactive. + this._activeTabLink.classList.remove('active'); + const _oldContent = this._content; + // Update the variables with the new link and content + this._activeTabLink = tabLink; + if (tabLink.hash) + this._content = document.querySelector(tabLink.hash); + this._tabLinks = this.el.querySelectorAll('li.tab > a'); + // Make the tab active + this._activeTabLink.classList.add('active'); + const prevIndex = this._index; + this._index = Math.max(Array.from(this._tabLinks).indexOf(tabLink), 0); + // Swap content + if (this.options.swipeable) { + if (this._tabsCarousel) { + this._tabsCarousel.set(this._index, () => { + if (typeof this.options.onShow === 'function') + this.options.onShow.call(this, this._content); + }); + } + } + else { + if (this._content) { + this._content.style.display = 'block'; + this._content.classList.add('active'); + if (typeof this.options.onShow === 'function') + this.options.onShow.call(this, this._content); + if (_oldContent && _oldContent !== this._content) { + _oldContent.style.display = 'none'; + _oldContent.classList.remove('active'); + } + } + } + // Update widths after content is swapped (scrollbar bugfix) + this._setTabsAndTabWidth(); + this._animateIndicator(prevIndex); + e.preventDefault(); + }; + _createIndicator() { + const indicator = document.createElement('li'); + indicator.classList.add('indicator'); + this.el.appendChild(indicator); + this._indicator = indicator; + this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px'; + this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px'; + } + _setupActiveTabLink() { + // If the location.hash matches one of the links, use that as the active tab. + this._activeTabLink = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === location.hash); + // If no match is found, use the first link or any with class 'active' as the initial active tab. + if (!this._activeTabLink) { + this._activeTabLink = this.el.querySelector('li.tab a.active'); + } + if (this._activeTabLink.length === 0) { + this._activeTabLink = this.el.querySelector('li.tab a'); + } + Array.from(this._tabLinks).forEach((a) => a.classList.remove('active')); + this._activeTabLink.classList.add('active'); + this._index = Math.max(Array.from(this._tabLinks).indexOf(this._activeTabLink), 0); + if (this._activeTabLink && this._activeTabLink.hash) { + this._content = document.querySelector(this._activeTabLink.hash); + if (this._content) + this._content.classList.add('active'); + } + } + _setupSwipeableTabs() { + // Change swipeable according to responsive threshold + if (window.innerWidth > this.options.responsiveThreshold) + this.options.swipeable = false; + const tabsContent = []; + this._tabLinks.forEach(a => { + if (a.hash) { + const currContent = document.querySelector(a.hash); + currContent.classList.add('carousel-item'); + tabsContent.push(currContent); + } + }); + // Create Carousel-Wrapper around Tab-Contents + const tabsWrapper = document.createElement('div'); + tabsWrapper.classList.add('tabs-content', 'carousel', 'carousel-slider'); + // Wrap around + tabsContent[0].parentElement.insertBefore(tabsWrapper, tabsContent[0]); + tabsContent.forEach(tabContent => { + tabsWrapper.appendChild(tabContent); + tabContent.style.display = ''; + }); + // Keep active tab index to set initial carousel slide + const tab = this._activeTabLink.parentElement; + const activeTabIndex = Array.from(tab.parentNode.children).indexOf(tab); + this._tabsCarousel = Carousel.init(tabsWrapper, { + fullWidth: true, + noWrap: true, + onCycleTo: (item) => { + const prevIndex = this._index; + this._index = Array.from(item.parentNode.children).indexOf(item); + this._activeTabLink.classList.remove('active'); + this._activeTabLink = Array.from(this._tabLinks)[this._index]; + this._activeTabLink.classList.add('active'); + this._animateIndicator(prevIndex); + if (typeof this.options.onShow === 'function') + this.options.onShow.call(this, this._content); + } + }); + // Set initial carousel slide to active tab + this._tabsCarousel.set(activeTabIndex); + } + _teardownSwipeableTabs() { + const tabsWrapper = this._tabsCarousel.el; + this._tabsCarousel.destroy(); + // Unwrap + tabsWrapper.after(tabsWrapper.children); + tabsWrapper.remove(); + } + _setupNormalTabs() { + // Hide Tabs Content + Array.from(this._tabLinks).forEach((a) => { + if (a === this._activeTabLink) + return; + if (a.hash) { + const currContent = document.querySelector(a.hash); + if (currContent) + currContent.style.display = 'none'; + } + }); + } + _teardownNormalTabs() { + // show Tabs Content + this._tabLinks.forEach((a) => { + if (a.hash) { + const currContent = document.querySelector(a.hash); + if (currContent) + currContent.style.display = ''; + } + }); + } + _setTabsAndTabWidth() { + this._tabsWidth = this.el.getBoundingClientRect().width; + this._tabWidth = Math.max(this._tabsWidth, this.el.scrollWidth) / this._tabLinks.length; + } + _calcRightPos(el) { + return Math.ceil(this._tabsWidth - el.offsetLeft - el.getBoundingClientRect().width); + } + _calcLeftPos(el) { + return Math.floor(el.offsetLeft); + } + /** + * Recalculate tab indicator position. This is useful when + * the indicator position is not correct. + */ + updateTabIndicator() { + this._setTabsAndTabWidth(); + this._animateIndicator(this._index); + } + _animateIndicator(prevIndex) { + let leftDelay = 0, rightDelay = 0; + const isMovingLeftOrStaying = (this._index - prevIndex >= 0); + if (isMovingLeftOrStaying) + leftDelay = 90; + else + rightDelay = 90; + // in v1: easeOutQuad + this._indicator.style.transition = ` + left ${this.options.duration}ms ease-out ${leftDelay}ms, + right ${this.options.duration}ms ease-out ${rightDelay}ms`; + this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px'; + this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px'; + } + /** + * Show tab content that corresponds to the tab with the id. + * @param tabId The id of the tab that you want to switch to. + */ + select(tabId) { + const tab = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === '#' + tabId); + if (tab) + tab.click(); + } + } + + let _defaults$6 = { + onOpen: null, + onClose: null + }; + class TapTarget extends Component { + /** + * If the tap target is open. + */ + isOpen; + wrapper; + _origin; + originEl; + waveEl; + contentEl; + constructor(el, options) { + super(el, options, TapTarget); + this.el.M_TapTarget = this; + this.options = { + ...TapTarget.defaults, + ...options + }; + this.isOpen = false; + // setup + this._origin = document.querySelector(`#${el.dataset.target}`); + this._setup(); + this._calculatePositioning(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$6; + } + /** + * Initializes instances of TapTarget. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, TapTarget); + } + static getInstance(el) { + return el.M_TapTarget; + } + destroy() { + this._removeEventHandlers(); + this.el.TapTarget = undefined; + } + _setupEventHandlers() { + this.el.addEventListener('click', this._handleTargetClick); + this.originEl.addEventListener('click', this._handleOriginClick); + // Resize + window.addEventListener('resize', this._handleThrottledResize); + } + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleTargetClick); + this.originEl.removeEventListener('click', this._handleOriginClick); + window.removeEventListener('resize', this._handleThrottledResize); + } + _handleThrottledResize = Utils.throttle(function () { this._handleResize(); }, 200).bind(this); + _handleTargetClick = () => { + this.open(); + }; + _handleOriginClick = () => { + this.close(); + }; + _handleResize = () => { + this._calculatePositioning(); + }; + _handleDocumentClick = (e) => { + if (!e.target.closest('.tap-target-wrapper')) { + this.close(); + e.preventDefault(); + e.stopPropagation(); + } + }; + _setup() { + // Creating tap target + this.wrapper = this.el.parentElement; + this.waveEl = this.wrapper.querySelector('.tap-target-wave'); + this.originEl = this.wrapper.querySelector('.tap-target-origin'); + this.contentEl = this.el.querySelector('.tap-target-content'); + // Creating wrapper + if (!this.wrapper.classList.contains('.tap-target-wrapper')) { + this.wrapper = document.createElement('div'); + this.wrapper.classList.add('tap-target-wrapper'); + this.el.before(this.wrapper); + this.wrapper.append(this.el); + } + // Creating content + if (!this.contentEl) { + this.contentEl = document.createElement('div'); + this.contentEl.classList.add('tap-target-content'); + this.el.append(this.contentEl); + } + // Creating foreground wave + if (!this.waveEl) { + this.waveEl = document.createElement('div'); + this.waveEl.classList.add('tap-target-wave'); + // Creating origin + if (!this.originEl) { + this.originEl = this._origin.cloneNode(true); // .clone(true, true); + this.originEl.classList.add('tap-target-origin'); + this.originEl.removeAttribute('id'); + this.originEl.removeAttribute('style'); + this.waveEl.append(this.originEl); + } + this.wrapper.append(this.waveEl); + } + } + _offset(el) { + const box = el.getBoundingClientRect(); + const docElem = document.documentElement; + return { + top: box.top + window.pageYOffset - docElem.clientTop, + left: box.left + window.pageXOffset - docElem.clientLeft + }; + } + _calculatePositioning() { + // Element or parent is fixed position? + let isFixed = getComputedStyle(this._origin).position === 'fixed'; + if (!isFixed) { + let currentElem = this._origin; + const parents = []; + while ((currentElem = currentElem.parentNode) && currentElem !== document) + parents.push(currentElem); + for (let i = 0; i < parents.length; i++) { + isFixed = getComputedStyle(parents[i]).position === 'fixed'; + if (isFixed) + break; + } + } + // Calculating origin + const originWidth = this._origin.offsetWidth; + const originHeight = this._origin.offsetHeight; + const originTop = isFixed ? this._offset(this._origin).top - Utils.getDocumentScrollTop() : this._offset(this._origin).top; + const originLeft = isFixed ? this._offset(this._origin).left - Utils.getDocumentScrollLeft() : this._offset(this._origin).left; + // Calculating screen + const windowWidth = window.innerWidth; + const windowHeight = window.innerHeight; + const scrollBarWidth = windowWidth - document.documentElement.clientWidth; + const centerX = windowWidth / 2; + const centerY = windowHeight / 2; + const isLeft = originLeft <= centerX; + const isRight = originLeft > centerX; + const isTop = originTop <= centerY; + const isBottom = originTop > centerY; + const isCenterX = originLeft >= windowWidth * 0.25 && originLeft <= windowWidth * 0.75; + // Calculating tap target + const tapTargetWidth = this.el.offsetWidth; + const tapTargetHeight = this.el.offsetHeight; + const tapTargetTop = originTop + originHeight / 2 - tapTargetHeight / 2; + const tapTargetLeft = originLeft + originWidth / 2 - tapTargetWidth / 2; + const tapTargetPosition = isFixed ? 'fixed' : 'absolute'; + // Calculating content + const tapTargetTextWidth = isCenterX ? tapTargetWidth : tapTargetWidth / 2 + originWidth; + const tapTargetTextHeight = tapTargetHeight / 2; + const tapTargetTextTop = isTop ? tapTargetHeight / 2 : 0; + const tapTargetTextBottom = 0; + const tapTargetTextLeft = isLeft && !isCenterX ? tapTargetWidth / 2 - originWidth : 0; + const tapTargetTextRight = 0; + const tapTargetTextPadding = originWidth; + const tapTargetTextAlign = isBottom ? 'bottom' : 'top'; + // Calculating wave + const tapTargetWaveWidth = originWidth > originHeight ? originWidth * 2 : originWidth * 2; + const tapTargetWaveHeight = tapTargetWaveWidth; + const tapTargetWaveTop = tapTargetHeight / 2 - tapTargetWaveHeight / 2; + const tapTargetWaveLeft = tapTargetWidth / 2 - tapTargetWaveWidth / 2; + // Setting tap target + this.wrapper.style.top = isTop ? tapTargetTop + 'px' : ''; + this.wrapper.style.right = isRight ? windowWidth - tapTargetLeft - tapTargetWidth - scrollBarWidth + 'px' : ''; + this.wrapper.style.bottom = isBottom ? windowHeight - tapTargetTop - tapTargetHeight + 'px' : ''; + this.wrapper.style.left = isLeft ? tapTargetLeft + 'px' : ''; + this.wrapper.style.position = tapTargetPosition; + // Setting content + this.contentEl.style.width = tapTargetTextWidth + 'px'; + this.contentEl.style.height = tapTargetTextHeight + 'px'; + this.contentEl.style.top = tapTargetTextTop + 'px'; + this.contentEl.style.right = tapTargetTextRight + 'px'; + this.contentEl.style.bottom = tapTargetTextBottom + 'px'; + this.contentEl.style.left = tapTargetTextLeft + 'px'; + this.contentEl.style.padding = tapTargetTextPadding + 'px'; + this.contentEl.style.verticalAlign = tapTargetTextAlign; + // Setting wave + this.waveEl.style.top = tapTargetWaveTop + 'px'; + this.waveEl.style.left = tapTargetWaveLeft + 'px'; + this.waveEl.style.width = tapTargetWaveWidth + 'px'; + this.waveEl.style.height = tapTargetWaveHeight + 'px'; + } + /** + * Open Tap Target. + */ + open = () => { + if (this.isOpen) + return; + // onOpen callback + if (typeof this.options.onOpen === 'function') { + this.options.onOpen.call(this, this._origin); + } + this.isOpen = true; + this.wrapper.classList.add('open'); + document.body.addEventListener('click', this._handleDocumentClick, true); + document.body.addEventListener('touchend', this._handleDocumentClick); + }; + /** + * Close Tap Target. + */ + close = () => { + if (!this.isOpen) + return; + // onClose callback + if (typeof this.options.onClose === 'function') { + this.options.onClose.call(this, this._origin); + } + this.isOpen = false; + this.wrapper.classList.remove('open'); + document.body.removeEventListener('click', this._handleDocumentClick, true); + document.body.removeEventListener('touchend', this._handleDocumentClick); + }; + } + + let _defaults$5 = { + dialRadius: 135, + outerRadius: 105, + innerRadius: 70, + tickRadius: 20, + duration: 350, + container: null, + defaultTime: 'now', // default time, 'now' or '13:14' e.g. + fromNow: 0, // Millisecond offset from the defaultTime + showClearBtn: false, + // internationalization + i18n: { + cancel: 'Cancel', + clear: 'Clear', + done: 'Ok' + }, + autoClose: false, // auto close when minute is selected + twelveHour: true, // change to 12 hour AM/PM clock from 24 hour + vibrate: true, // vibrate the device when dragging clock hand + // Callbacks + onOpenStart: null, + onOpenEnd: null, + onCloseStart: null, + onCloseEnd: null, + onSelect: null + }; + class Timepicker extends Component { + id; + modal; + modalEl; + plate; + digitalClock; + inputHours; + inputMinutes; + x0; + y0; + moved; + dx; + dy; + /** + * Current view on the timepicker. + * @default 'hours' + */ + currentView; + hand; + minutesView; + hours; + minutes; + /** The selected time. */ + time; + /** + * If the time is AM or PM on twelve-hour clock. + * @default 'PM' + */ + amOrPm; + static _template; + /** If the picker is open. */ + isOpen; + /** Vibrate device when dragging clock hand. */ + vibrate; + _canvas; + hoursView; + spanAmPm; + footer; + _amBtn; + _pmBtn; + bg; + bearing; + g; + toggleViewTimer; + canvas; + vibrateTimer; + constructor(el, options) { + super(el, options, Timepicker); + this.el.M_Timepicker = this; + this.options = { + ...Timepicker.defaults, + ...options + }; + this.id = Utils.guid(); + this._insertHTMLIntoDOM(); + this._setupModal(); + this._setupVariables(); + this._setupEventHandlers(); + this._clockSetup(); + this._pickerSetup(); + } + static get defaults() { + return _defaults$5; + } + /** + * Initializes instances of Timepicker. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Timepicker); + } + static _addLeadingZero(num) { + return (num < 10 ? '0' : '') + num; + } + static _createSVGEl(name) { + let svgNS = 'http://www.w3.org/2000/svg'; + return document.createElementNS(svgNS, name); + } + static _Pos(e) { + if (e.type.startsWith("touch") && e.targetTouches.length >= 1) { + return { x: e.targetTouches[0].clientX, y: e.targetTouches[0].clientY }; + } + // mouse event + return { x: e.clientX, y: e.clientY }; + } + static getInstance(el) { + return el.M_Timepicker; + } + destroy() { + this._removeEventHandlers(); + this.modal.destroy(); + this.modalEl.remove(); + this.el.M_Timepicker = undefined; + } + _setupEventHandlers() { + this.el.addEventListener('click', this._handleInputClick); + this.el.addEventListener('keydown', this._handleInputKeydown); + this.plate.addEventListener('mousedown', this._handleClockClickStart); + this.plate.addEventListener('touchstart', this._handleClockClickStart); + this.digitalClock.addEventListener('keyup', this._inputFromTextField); + this.inputHours.addEventListener('click', () => this.showView('hours')); + this.inputMinutes.addEventListener('click', () => this.showView('minutes')); + } + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleInputClick); + this.el.removeEventListener('keydown', this._handleInputKeydown); + } + _handleInputClick = () => { + this.open(); + }; + _handleInputKeydown = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + e.preventDefault(); + this.open(); + } + }; + _handleTimeInputEnterKey = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + e.preventDefault(); + this._inputFromTextField(); + } + }; + _handleClockClickStart = (e) => { + e.preventDefault(); + let clockPlateBR = this.plate.getBoundingClientRect(); + let offset = { x: clockPlateBR.left, y: clockPlateBR.top }; + this.x0 = offset.x + this.options.dialRadius; + this.y0 = offset.y + this.options.dialRadius; + this.moved = false; + let clickPos = Timepicker._Pos(e); + this.dx = clickPos.x - this.x0; + this.dy = clickPos.y - this.y0; + // Set clock hands + this.setHand(this.dx, this.dy, false); + // Mousemove on document + document.addEventListener('mousemove', this._handleDocumentClickMove); + document.addEventListener('touchmove', this._handleDocumentClickMove); + // Mouseup on document + document.addEventListener('mouseup', this._handleDocumentClickEnd); + document.addEventListener('touchend', this._handleDocumentClickEnd); + }; + _handleDocumentClickMove = (e) => { + e.preventDefault(); + let clickPos = Timepicker._Pos(e); + let x = clickPos.x - this.x0; + let y = clickPos.y - this.y0; + this.moved = true; + this.setHand(x, y, false); + }; + _handleDocumentClickEnd = (e) => { + e.preventDefault(); + document.removeEventListener('mouseup', this._handleDocumentClickEnd); + document.removeEventListener('touchend', this._handleDocumentClickEnd); + let clickPos = Timepicker._Pos(e); + let x = clickPos.x - this.x0; + let y = clickPos.y - this.y0; + if (this.moved && x === this.dx && y === this.dy) { + this.setHand(x, y); + } + if (this.currentView === 'hours') { + this.showView('minutes', this.options.duration / 2); + } + else if (this.options.autoClose) { + this.minutesView.classList.add('timepicker-dial-out'); + setTimeout(() => { + this.done(); + }, this.options.duration / 2); + } + if (typeof this.options.onSelect === 'function') { + this.options.onSelect.call(this, this.hours, this.minutes); + } + // Unbind mousemove event + document.removeEventListener('mousemove', this._handleDocumentClickMove); + document.removeEventListener('touchmove', this._handleDocumentClickMove); + }; + _insertHTMLIntoDOM() { + const template = document.createElement('template'); + template.innerHTML = Timepicker._template.trim(); + this.modalEl = template.content.firstChild; + this.modalEl.id = 'modal-' + this.id; + // Append popover to input by default + const optEl = this.options.container; + const containerEl = optEl instanceof HTMLElement ? optEl : document.querySelector(optEl); + if (this.options.container && !!containerEl) { + containerEl.append(this.modalEl); + } + else { + this.el.parentElement.appendChild(this.modalEl); + } + } + _setupModal() { + this.modal = Modal.init(this.modalEl, { + onOpenStart: this.options.onOpenStart, + onOpenEnd: this.options.onOpenEnd, + onCloseStart: this.options.onCloseStart, + onCloseEnd: () => { + if (typeof this.options.onCloseEnd === 'function') { + this.options.onCloseEnd.call(this); + } + this.isOpen = false; + } + }); + } + _setupVariables() { + this.currentView = 'hours'; + this.vibrate = navigator.vibrate + ? 'vibrate' + : navigator.webkitVibrate + ? 'webkitVibrate' + : null; + this._canvas = this.modalEl.querySelector('.timepicker-canvas'); + this.plate = this.modalEl.querySelector('.timepicker-plate'); + this.digitalClock = this.modalEl.querySelector('.timepicker-display-column'); + this.hoursView = this.modalEl.querySelector('.timepicker-hours'); + this.minutesView = this.modalEl.querySelector('.timepicker-minutes'); + this.inputHours = this.modalEl.querySelector('.timepicker-input-hours'); + this.inputMinutes = this.modalEl.querySelector('.timepicker-input-minutes'); + this.spanAmPm = this.modalEl.querySelector('.timepicker-span-am-pm'); + this.footer = this.modalEl.querySelector('.timepicker-footer'); + this.amOrPm = 'PM'; + } + _createButton(text, visibility) { + const button = document.createElement('button'); + button.classList.add('btn-flat', 'waves-effect'); + button.style.visibility = visibility; + button.type = 'button'; + button.tabIndex = this.options.twelveHour ? 3 : 1; + button.innerText = text; + return button; + } + _pickerSetup() { + const clearButton = this._createButton(this.options.i18n.clear, this.options.showClearBtn ? '' : 'hidden'); + clearButton.classList.add('timepicker-clear'); + clearButton.addEventListener('click', this.clear); + this.footer.appendChild(clearButton); + const confirmationBtnsContainer = document.createElement('div'); + confirmationBtnsContainer.classList.add('confirmation-btns'); + this.footer.append(confirmationBtnsContainer); + const cancelButton = this._createButton(this.options.i18n.cancel, ''); + cancelButton.classList.add('timepicker-close'); + cancelButton.addEventListener('click', this.close); + confirmationBtnsContainer.appendChild(cancelButton); + const doneButton = this._createButton(this.options.i18n.done, ''); + doneButton.classList.add('timepicker-close'); + doneButton.addEventListener('click', this.done); + confirmationBtnsContainer.appendChild(doneButton); + } + _clockSetup() { + if (this.options.twelveHour) { + // AM Button + this._amBtn = document.createElement('div'); + this._amBtn.classList.add('am-btn'); + this._amBtn.innerText = 'AM'; + this._amBtn.addEventListener('click', this._handleAmPmClick); + this.spanAmPm.appendChild(this._amBtn); + // PM Button + this._pmBtn = document.createElement('div'); + this._pmBtn.classList.add('pm-btn'); + this._pmBtn.innerText = 'PM'; + this._pmBtn.addEventListener('click', this._handleAmPmClick); + this.spanAmPm.appendChild(this._pmBtn); + } + this._buildHoursView(); + this._buildMinutesView(); + this._buildSVGClock(); + } + _buildSVGClock() { + // Draw clock hands and others + let dialRadius = this.options.dialRadius; + let tickRadius = this.options.tickRadius; + let diameter = dialRadius * 2; + let svg = Timepicker._createSVGEl('svg'); + svg.setAttribute('class', 'timepicker-svg'); + svg.setAttribute('width', diameter.toString()); + svg.setAttribute('height', diameter.toString()); + let g = Timepicker._createSVGEl('g'); + g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')'); + let bearing = Timepicker._createSVGEl('circle'); + bearing.setAttribute('class', 'timepicker-canvas-bearing'); + bearing.setAttribute('cx', '0'); + bearing.setAttribute('cy', '0'); + bearing.setAttribute('r', '4'); + let hand = Timepicker._createSVGEl('line'); + hand.setAttribute('x1', '0'); + hand.setAttribute('y1', '0'); + let bg = Timepicker._createSVGEl('circle'); + bg.setAttribute('class', 'timepicker-canvas-bg'); + bg.setAttribute('r', tickRadius.toString()); + g.appendChild(hand); + g.appendChild(bg); + g.appendChild(bearing); + svg.appendChild(g); + this._canvas.appendChild(svg); + this.hand = hand; + this.bg = bg; + this.bearing = bearing; + this.g = g; + } + _buildHoursView() { + const $tick = document.createElement('div'); + $tick.classList.add('timepicker-tick'); + // Hours view + if (this.options.twelveHour) { + for (let i = 1; i < 13; i += 1) { + const tick = $tick.cloneNode(true); + const radian = (i / 6) * Math.PI; + const radius = this.options.outerRadius; + tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px'; + tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px'; + tick.innerHTML = i === 0 ? '00' : i.toString(); + this.hoursView.appendChild(tick); + // tick.on(mousedownEvent, mousedown); + } + } + else { + for (let i = 0; i < 24; i += 1) { + const tick = $tick.cloneNode(true); + const radian = (i / 6) * Math.PI; + const inner = i > 0 && i < 13; + const radius = inner ? this.options.innerRadius : this.options.outerRadius; + tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px'; + tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px'; + tick.innerHTML = i === 0 ? '00' : i.toString(); + this.hoursView.appendChild(tick); + // tick.on(mousedownEvent, mousedown); + } + } + } + _buildMinutesView() { + const _tick = document.createElement('div'); + _tick.classList.add('timepicker-tick'); + // Minutes view + for (let i = 0; i < 60; i += 5) { + const tick = _tick.cloneNode(true); + const radian = (i / 30) * Math.PI; + tick.style.left = + this.options.dialRadius + + Math.sin(radian) * this.options.outerRadius - + this.options.tickRadius + + 'px'; + tick.style.top = + this.options.dialRadius - + Math.cos(radian) * this.options.outerRadius - + this.options.tickRadius + + 'px'; + tick.innerHTML = Timepicker._addLeadingZero(i); + this.minutesView.appendChild(tick); + } + } + _handleAmPmClick = (e) => { + const btnClicked = e.target; + this.amOrPm = btnClicked.classList.contains('am-btn') ? 'AM' : 'PM'; + this._updateAmPmView(); + }; + _updateAmPmView() { + if (this.options.twelveHour) { + if (this.amOrPm === 'PM') { + this._amBtn.classList.remove('text-primary'); + this._pmBtn.classList.add('text-primary'); + } + else if (this.amOrPm === 'AM') { + this._amBtn.classList.add('text-primary'); + this._pmBtn.classList.remove('text-primary'); + } + } + } + _updateTimeFromInput() { + // Get the time + let value = ((this.el.value || this.options.defaultTime || '') + '').split(':'); + if (this.options.twelveHour && !(typeof value[1] === 'undefined')) { + if (value[1].toUpperCase().indexOf('AM') > 0) { + this.amOrPm = 'AM'; + } + else { + this.amOrPm = 'PM'; + } + value[1] = value[1].replace('AM', '').replace('PM', ''); + } + if (value[0] === 'now') { + let now = new Date(+new Date() + this.options.fromNow); + value = [now.getHours().toString(), now.getMinutes().toString()]; + if (this.options.twelveHour) { + this.amOrPm = parseInt(value[0]) >= 12 && parseInt(value[0]) < 24 ? 'PM' : 'AM'; + } + } + this.hours = +value[0] || 0; + this.minutes = +value[1] || 0; + this.inputHours.value = this.hours; + this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes); + this._updateAmPmView(); + } + /** + * Show hours or minutes view on timepicker. + * @param view The name of the view you want to switch to, 'hours' or 'minutes'. + */ + showView = (view, delay = null) => { + if (view === 'minutes' && getComputedStyle(this.hoursView).visibility === 'visible') ; + let isHours = view === 'hours', nextView = isHours ? this.hoursView : this.minutesView, hideView = isHours ? this.minutesView : this.hoursView; + this.currentView = view; + if (isHours) { + this.inputHours.classList.add('text-primary'); + this.inputMinutes.classList.remove('text-primary'); + } + else { + this.inputHours.classList.remove('text-primary'); + this.inputMinutes.classList.add('text-primary'); + } + // Transition view + hideView.classList.add('timepicker-dial-out'); + nextView.style.visibility = 'visible'; + nextView.classList.remove('timepicker-dial-out'); + // Reset clock hand + this.resetClock(delay); + // After transitions ended + clearTimeout(this.toggleViewTimer); + this.toggleViewTimer = setTimeout(() => { + hideView.style.visibility = 'hidden'; + }, this.options.duration); + }; + resetClock(delay) { + let view = this.currentView, value = this[view], isHours = view === 'hours', unit = Math.PI / (isHours ? 6 : 30), radian = value * unit, radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius, x = Math.sin(radian) * radius, y = -Math.cos(radian) * radius, self = this; + if (delay) { + this.canvas?.classList.add('timepicker-canvas-out'); + setTimeout(() => { + self.canvas?.classList.remove('timepicker-canvas-out'); + self.setHand(x, y); + }, delay); + } + else { + this.setHand(x, y); + } + } + _inputFromTextField = () => { + const isHours = this.currentView === 'hours'; + if (isHours) { + const value = parseInt(this.inputHours.value); + if (value > 0 && value < 13) { + this.drawClockFromTimeInput(value, isHours); + this.showView('minutes', this.options.duration / 2); + this.hours = value; + this.inputMinutes.focus(); + } + else { + const hour = new Date().getHours(); + this.inputHours.value = (hour % 12).toString(); + } + } + else { + const value = parseInt(this.inputMinutes.value); + if (value >= 0 && value < 60) { + this.inputMinutes.value = Timepicker._addLeadingZero(value); + this.drawClockFromTimeInput(value, isHours); + this.minutes = value; + this.modalEl.querySelector('.confirmation-btns :nth-child(2)').focus(); + } + else { + const minutes = new Date().getMinutes(); + this.inputMinutes.value = Timepicker._addLeadingZero(minutes); + } + } + }; + drawClockFromTimeInput(value, isHours) { + const unit = Math.PI / (isHours ? 6 : 30); + const radian = value * unit; + let radius; + if (this.options.twelveHour) { + radius = this.options.outerRadius; + } + let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius; + this.hand.setAttribute('x2', cx1.toString()); + this.hand.setAttribute('y2', cy1.toString()); + this.bg.setAttribute('cx', cx2.toString()); + this.bg.setAttribute('cy', cy2.toString()); + } + setHand(x, y, roundBy5 = false) { + let radian = Math.atan2(x, -y), isHours = this.currentView === 'hours', unit = Math.PI / (isHours || roundBy5 ? 6 : 30), z = Math.sqrt(x * x + y * y), inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2, radius = inner ? this.options.innerRadius : this.options.outerRadius; + if (this.options.twelveHour) { + radius = this.options.outerRadius; + } + // Radian should in range [0, 2PI] + if (radian < 0) { + radian = Math.PI * 2 + radian; + } + // Get the round value + let value = Math.round(radian / unit); + // Get the round radian + radian = value * unit; + // Correct the hours or minutes + if (this.options.twelveHour) { + if (isHours) { + if (value === 0) + value = 12; + } + else { + if (roundBy5) + value *= 5; + if (value === 60) + value = 0; + } + } + else { + if (isHours) { + if (value === 12) { + value = 0; + } + value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12; + } + else { + if (roundBy5) { + value *= 5; + } + if (value === 60) { + value = 0; + } + } + } + // Once hours or minutes changed, vibrate the device + if (this[this.currentView] !== value) { + if (this.vibrate && this.options.vibrate) { + // Do not vibrate too frequently + if (!this.vibrateTimer) { + navigator[this.vibrate](10); + this.vibrateTimer = setTimeout(() => { + this.vibrateTimer = null; + }, 100); + } + } + } + this[this.currentView] = value; + if (isHours) { + this.inputHours.value = value.toString(); + } + else { + this.inputMinutes.value = Timepicker._addLeadingZero(value); + } + // Set clock hand and others' position + let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius; + this.hand.setAttribute('x2', cx1.toString()); + this.hand.setAttribute('y2', cy1.toString()); + this.bg.setAttribute('cx', cx2.toString()); + this.bg.setAttribute('cy', cy2.toString()); + } + /** + * Open timepicker. + */ + open = () => { + if (this.isOpen) + return; + this.isOpen = true; + this._updateTimeFromInput(); + this.showView('hours'); + this.modal.open(undefined); + }; + /** + * Close timepicker. + */ + close = () => { + if (!this.isOpen) + return; + this.isOpen = false; + this.modal.close(); + }; + done = (e = null, clearValue = null) => { + // Set input value + let last = this.el.value; + let value = clearValue + ? '' + : Timepicker._addLeadingZero(this.hours) + ':' + Timepicker._addLeadingZero(this.minutes); + this.time = value; + if (!clearValue && this.options.twelveHour) { + value = `${value} ${this.amOrPm}`; + } + this.el.value = value; + // Trigger change event + if (value !== last) { + this.el.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true })); + } + this.close(); + this.el.focus(); + }; + clear = () => { + this.done(null, true); + }; + static { + Timepicker._template = ` +
+
+
+
+
+ + : + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ { + if (this.isOpen) + return; + isManual = isManual === undefined ? true : undefined; // Default value true + this.isOpen = true; + // Update tooltip content with HTML attribute options + this.options = { ...this.options, ...this._getAttributeOptions() }; + this._updateTooltipContent(); + this._setEnterDelayTimeout(isManual); + }; + /** + * Hide tooltip. + */ + close = () => { + if (!this.isOpen) + return; + this.isHovered = false; + this.isFocused = false; + this.isOpen = false; + this._setExitDelayTimeout(); + }; + _setExitDelayTimeout() { + clearTimeout(this._exitDelayTimeout); + this._exitDelayTimeout = setTimeout(() => { + if (this.isHovered || this.isFocused) + return; + this._animateOut(); + }, this.options.exitDelay); + } + _setEnterDelayTimeout(isManual) { + clearTimeout(this._enterDelayTimeout); + this._enterDelayTimeout = setTimeout(() => { + if (!this.isHovered && !this.isFocused && !isManual) + return; + this._animateIn(); + }, this.options.enterDelay); + } + _positionTooltip() { + const tooltip = this.tooltipEl; + const origin = this.el, originHeight = origin.offsetHeight, originWidth = origin.offsetWidth, tooltipHeight = tooltip.offsetHeight, tooltipWidth = tooltip.offsetWidth, margin = this.options.margin; + (this.xMovement = 0), (this.yMovement = 0); + let targetTop = origin.getBoundingClientRect().top + Utils.getDocumentScrollTop(); + let targetLeft = origin.getBoundingClientRect().left + Utils.getDocumentScrollLeft(); + if (this.options.position === 'top') { + targetTop += -tooltipHeight - margin; + targetLeft += originWidth / 2 - tooltipWidth / 2; + this.yMovement = -this.options.transitionMovement; + } + else if (this.options.position === 'right') { + targetTop += originHeight / 2 - tooltipHeight / 2; + targetLeft += originWidth + margin; + this.xMovement = this.options.transitionMovement; + } + else if (this.options.position === 'left') { + targetTop += originHeight / 2 - tooltipHeight / 2; + targetLeft += -tooltipWidth - margin; + this.xMovement = -this.options.transitionMovement; + } + else { + targetTop += originHeight + margin; + targetLeft += originWidth / 2 - tooltipWidth / 2; + this.yMovement = this.options.transitionMovement; + } + const newCoordinates = this._repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight); + tooltip.style.top = newCoordinates.y + 'px'; + tooltip.style.left = newCoordinates.x + 'px'; + } + _repositionWithinScreen(x, y, width, height) { + const scrollLeft = Utils.getDocumentScrollLeft(); + const scrollTop = Utils.getDocumentScrollTop(); + let newX = x - scrollLeft; + let newY = y - scrollTop; + const bounding = { + left: newX, + top: newY, + width: width, + height: height + }; + const offset = this.options.margin + this.options.transitionMovement; + const edges = Utils.checkWithinContainer(document.body, bounding, offset); + if (edges.left) { + newX = offset; + } + else if (edges.right) { + newX -= newX + width - window.innerWidth; + } + if (edges.top) { + newY = offset; + } + else if (edges.bottom) { + newY -= newY + height - window.innerHeight; + } + return { + x: newX + scrollLeft, + y: newY + scrollTop + }; + } + _animateIn() { + this._positionTooltip(); + this.tooltipEl.style.visibility = 'visible'; + const duration = this.options.inDuration; + // easeOutCubic + this.tooltipEl.style.transition = ` + transform ${duration}ms ease-out, + opacity ${duration}ms ease-out`; + setTimeout(() => { + this.tooltipEl.style.transform = `translateX(${this.xMovement}px) translateY(${this.yMovement}px)`; + this.tooltipEl.style.opacity = (this.options.opacity || 1).toString(); + }, 1); + } + _animateOut() { + const duration = this.options.outDuration; + // easeOutCubic + this.tooltipEl.style.transition = ` + transform ${duration}ms ease-out, + opacity ${duration}ms ease-out`; + setTimeout(() => { + this.tooltipEl.style.transform = `translateX(0px) translateY(0px)`; + this.tooltipEl.style.opacity = '0'; + }, 1); + /* + anim.remove(this.tooltipEl); + anim({ + targets: this.tooltipEl, + opacity: 0, + translateX: 0, + translateY: 0, + duration: this.options.outDuration, + easing: 'easeOutCubic' + }); + */ + } + _handleMouseEnter = () => { + this.isHovered = true; + this.isFocused = false; // Allows close of tooltip when opened by focus. + this.open(false); + }; + _handleMouseLeave = () => { + this.isHovered = false; + this.isFocused = false; // Allows close of tooltip when opened by focus. + this.close(); + }; + _handleFocus = () => { + if (Utils.tabPressed) { + this.isFocused = true; + this.open(false); + } + }; + _handleBlur = () => { + this.isFocused = false; + this.close(); + }; + _getAttributeOptions() { + let attributeOptions = {}; + const tooltipTextOption = this.el.getAttribute('data-tooltip'); + const tooltipId = this.el.getAttribute('data-tooltip-id'); + const positionOption = this.el.getAttribute('data-position'); + if (tooltipTextOption) { + attributeOptions.text = tooltipTextOption; + } + if (positionOption) { + attributeOptions.position = positionOption; + } + if (tooltipId) { + attributeOptions.tooltipId = tooltipId; + } + return attributeOptions; + } + } + + class Waves { + static _offset(el) { + const box = el.getBoundingClientRect(); + const docElem = document.documentElement; + return { + top: box.top + window.pageYOffset - docElem.clientTop, + left: box.left + window.pageXOffset - docElem.clientLeft + }; + } + // https://phoenix-dx.com/css-techniques-for-material-ripple-effect/ + static renderWaveEffect(targetElement, position = null, color = null) { + const isCentered = position === null; + const duration = 500; + let animationFrame, animationStart; + const animationStep = function (timestamp) { + if (!animationStart) { + animationStart = timestamp; + } + const frame = timestamp - animationStart; + if (frame < duration) { + const easing = (frame / duration) * (2 - (frame / duration)); + const circle = isCentered ? 'circle at 50% 50%' : `circle at ${position.x}px ${position.y}px`; + const waveColor = `rgba(${color?.r || 0}, ${color?.g || 0}, ${color?.b || 0}, ${0.3 * (1 - easing)})`; + const stop = 90 * easing + "%"; + targetElement.style.backgroundImage = "radial-gradient(" + circle + ", " + waveColor + " " + stop + ", transparent " + stop + ")"; + animationFrame = window.requestAnimationFrame(animationStep); + } + else { + targetElement.style.backgroundImage = 'none'; + window.cancelAnimationFrame(animationFrame); + } + }; + animationFrame = window.requestAnimationFrame(animationStep); + } + static Init() { + if (typeof document !== 'undefined') + document?.addEventListener("DOMContentLoaded", () => { + document.body.addEventListener('click', e => { + const trigger = e.target; + const el = trigger.closest('.waves-effect'); + if (el && el.contains(trigger)) { + const isCircular = el.classList.contains('waves-circle'); + const x = e.pageX - Waves._offset(el).left; + const y = e.pageY - Waves._offset(el).top; + let color = null; + if (el.classList.contains('waves-light')) + color = { r: 255, g: 255, b: 255 }; + Waves.renderWaveEffect(el, isCircular ? null : { x, y }, color); + } + }); + }); + } + } + + const _defaults$3 = {}; + // TODO: !!!!! + class Range extends Component { + _mousedown; + value; + thumb; + constructor(el, options) { + super(el, options, Range); + this.el.M_Range = this; + this.options = { + ...Range.defaults, + ...options + }; + this._mousedown = false; + this._setupThumb(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$3; + } + /** + * Initializes instances of Range. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Range); + } + static getInstance(el) { + return el.M_Range; + } + destroy() { + this._removeEventHandlers(); + this._removeThumb(); + this.el.M_Range = undefined; + } + _setupEventHandlers() { + this.el.addEventListener('change', this._handleRangeChange); + this.el.addEventListener('mousedown', this._handleRangeMousedownTouchstart); + this.el.addEventListener('touchstart', this._handleRangeMousedownTouchstart); + this.el.addEventListener('input', this._handleRangeInputMousemoveTouchmove); + this.el.addEventListener('mousemove', this._handleRangeInputMousemoveTouchmove); + this.el.addEventListener('touchmove', this._handleRangeInputMousemoveTouchmove); + this.el.addEventListener('mouseup', this._handleRangeMouseupTouchend); + this.el.addEventListener('touchend', this._handleRangeMouseupTouchend); + this.el.addEventListener('blur', this._handleRangeBlurMouseoutTouchleave); + this.el.addEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave); + this.el.addEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave); + } + _removeEventHandlers() { + this.el.removeEventListener('change', this._handleRangeChange); + this.el.removeEventListener('mousedown', this._handleRangeMousedownTouchstart); + this.el.removeEventListener('touchstart', this._handleRangeMousedownTouchstart); + this.el.removeEventListener('input', this._handleRangeInputMousemoveTouchmove); + this.el.removeEventListener('mousemove', this._handleRangeInputMousemoveTouchmove); + this.el.removeEventListener('touchmove', this._handleRangeInputMousemoveTouchmove); + this.el.removeEventListener('mouseup', this._handleRangeMouseupTouchend); + this.el.removeEventListener('touchend', this._handleRangeMouseupTouchend); + this.el.removeEventListener('blur', this._handleRangeBlurMouseoutTouchleave); + this.el.removeEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave); + this.el.removeEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave); + } + _handleRangeChange = () => { + this.value.innerHTML = this.el.value; + if (!this.thumb.classList.contains('active')) { + this._showRangeBubble(); + } + const offsetLeft = this._calcRangeOffset(); + this.thumb.classList.add('active'); + this.thumb.style.left = offsetLeft + 'px'; + }; + _handleRangeMousedownTouchstart = (e) => { + // Set indicator value + this.value.innerHTML = this.el.value; + this._mousedown = true; + this.el.classList.add('active'); + if (!this.thumb.classList.contains('active')) { + this._showRangeBubble(); + } + if (e.type !== 'input') { + const offsetLeft = this._calcRangeOffset(); + this.thumb.classList.add('active'); + this.thumb.style.left = offsetLeft + 'px'; + } + }; + _handleRangeInputMousemoveTouchmove = () => { + if (this._mousedown) { + if (!this.thumb.classList.contains('active')) { + this._showRangeBubble(); + } + const offsetLeft = this._calcRangeOffset(); + this.thumb.classList.add('active'); + this.thumb.style.left = offsetLeft + 'px'; + this.value.innerHTML = this.el.value; + } + }; + _handleRangeMouseupTouchend = () => { + this._mousedown = false; + this.el.classList.remove('active'); + }; + _handleRangeBlurMouseoutTouchleave = () => { + if (!this._mousedown) { + const paddingLeft = parseInt(getComputedStyle(this.el).paddingLeft); + const marginLeftText = 7 + paddingLeft + 'px'; + if (this.thumb.classList.contains('active')) { + const duration = 100; + // from + this.thumb.style.transition = 'none'; + setTimeout(() => { + this.thumb.style.transition = ` + height ${duration}ms ease, + width ${duration}ms ease, + top ${duration}ms ease, + margin ${duration}ms ease + `; + // to + this.thumb.style.height = '0'; + this.thumb.style.width = '0'; + this.thumb.style.top = '0'; + this.thumb.style.marginLeft = marginLeftText; + }, 1); + } + this.thumb.classList.remove('active'); + } + }; + _setupThumb() { + this.thumb = document.createElement('span'); + this.value = document.createElement('span'); + this.thumb.classList.add('thumb'); + this.value.classList.add('value'); + this.thumb.append(this.value); + this.el.after(this.thumb); + } + _removeThumb() { + this.thumb.remove(); + } + _showRangeBubble() { + const paddingLeft = parseInt(getComputedStyle(this.thumb.parentElement).paddingLeft); + const marginLeftText = -7 + paddingLeft + 'px'; // TODO: fix magic number? + const duration = 300; + // easeOutQuint + this.thumb.style.transition = ` + height ${duration}ms ease, + width ${duration}ms ease, + top ${duration}ms ease, + margin ${duration}ms ease + `; + // to + this.thumb.style.height = '30px'; + this.thumb.style.width = '30px'; + this.thumb.style.top = '-30px'; + this.thumb.style.marginLeft = marginLeftText; + } + _calcRangeOffset() { + const width = this.el.getBoundingClientRect().width - 15; + const max = parseFloat(this.el.getAttribute('max')) || 100; // Range default max + const min = parseFloat(this.el.getAttribute('min')) || 0; // Range default min + const percent = (parseFloat(this.el.value) - min) / (max - min); + return percent * width; + } + /** + * Initializes every range input in the current document. + */ + static Init() { + if (typeof document !== 'undefined') + Range.init((document?.querySelectorAll('input[type=range]')), {}); + } + } + + const _defaults$2 = Object.freeze({}); + class CharacterCounter extends Component { + /** Stores the reference to the counter HTML element. */ + counterEl; + /** Specifies whether the input is valid or not. */ + isInvalid; + /** Specifies whether the input text has valid length or not. */ + isValidLength; + constructor(el, options) { + super(el, {}, CharacterCounter); + this.el.M_CharacterCounter = this; + this.options = { + ...CharacterCounter.defaults, + ...options + }; + this.isInvalid = false; + this.isValidLength = false; + this._setupCounter(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$2; + } + /** + * Initializes instances of CharacterCounter. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, CharacterCounter); + } + static getInstance(el) { + return el.M_CharacterCounter; + } + destroy() { + this._removeEventHandlers(); + this.el.CharacterCounter = undefined; + this._removeCounter(); + } + _setupEventHandlers() { + this.el.addEventListener('focus', this.updateCounter, true); + this.el.addEventListener('input', this.updateCounter, true); + } + _removeEventHandlers() { + this.el.removeEventListener('focus', this.updateCounter, true); + this.el.removeEventListener('input', this.updateCounter, true); + } + _setupCounter() { + this.counterEl = document.createElement('span'); + this.counterEl.classList.add('character-counter'); + this.counterEl.style.float = 'right'; + this.counterEl.style.fontSize = '12px'; + this.counterEl.style.height = '1'; + this.el.parentElement.appendChild(this.counterEl); + } + _removeCounter() { + this.counterEl.remove(); + } + updateCounter = () => { + let maxLength = parseInt(this.el.getAttribute('maxlength')), actualLength = this.el.value.length; + this.isValidLength = actualLength <= maxLength; + let counterString = actualLength.toString(); + if (maxLength) { + counterString += '/' + maxLength; + this._validateInput(); + } + this.counterEl.innerHTML = counterString; + }; + _validateInput() { + if (this.isValidLength && this.isInvalid) { + this.isInvalid = false; + this.el.classList.remove('invalid'); + } + else if (!this.isValidLength && !this.isInvalid) { + this.isInvalid = true; + this.el.classList.remove('valid'); + this.el.classList.add('invalid'); + } + } + } + + let _defaults$1 = { + indicators: true, + height: 400, + duration: 500, + interval: 6000, + pauseOnFocus: true, + pauseOnHover: true, + indicatorLabelFunc: null // Function which will generate a label for the indicators (ARIA) + }; + class Slider extends Component { + /** Index of current slide. */ + activeIndex; + interval; + eventPause; + _slider; + _slides; + _activeSlide; + _indicators; + _hovered; + _focused; + _focusCurrent; + _sliderId; + constructor(el, options) { + super(el, options, Slider); + this.el.M_Slider = this; + this.options = { + ...Slider.defaults, + ...options + }; + // init props + this.interval = null; + this.eventPause = false; + this._hovered = false; + this._focused = false; + this._focusCurrent = false; + // setup + this._slider = this.el.querySelector('.slides'); + this._slides = Array.from(this._slider.querySelectorAll('li')); + this.activeIndex = this._slides.findIndex(li => li.classList.contains('active')); + if (this.activeIndex !== -1) { + this._activeSlide = this._slides[this.activeIndex]; + } + this._setSliderHeight(); + // Sets element id if it does not have one + if (this._slider.hasAttribute('id')) + this._sliderId = this._slider.getAttribute('id'); + else { + this._sliderId = 'slider-' + Utils.guid(); + this._slider.setAttribute('id', this._sliderId); + } + const placeholderBase64 = 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; + // Set initial positions of captions + this._slides.forEach(slide => { + // Caption + //const caption = slide.querySelector('.caption'); + //if (caption) this._animateCaptionIn(caption, 0); + // Set Images as Background Images + const img = slide.querySelector('img'); + if (img) { + if (img.src !== placeholderBase64) { + img.style.backgroundImage = 'url(' + img.src + ')'; + img.src = placeholderBase64; + } + } + // Sets slide as focusable by code + if (!slide.hasAttribute('tabindex')) + slide.setAttribute('tabindex', '-1'); + // Removes initial visibility from "inactive" slides + slide.style.visibility = 'hidden'; + }); + this._setupIndicators(); + // Show active slide + if (this._activeSlide) { + this._activeSlide.style.display = 'block'; + this._activeSlide.style.visibility = 'visible'; + } + else { + this.activeIndex = 0; + this._slides[0].classList.add('active'); + this._slides[0].style.visibility = 'visible'; + this._activeSlide = this._slides[0]; + this._animateSlide(this._slides[0], true); + // Update indicators + if (this.options.indicators) { + this._indicators[this.activeIndex].children[0].classList.add('active'); + } + } + this._setupEventHandlers(); + // auto scroll + this.start(); + } + static get defaults() { + return _defaults$1; + } + /** + * Initializes instances of Slider. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Slider); + } + static getInstance(el) { + return el.M_Slider; + } + destroy() { + this.pause(); + this._removeIndicators(); + this._removeEventHandlers(); + this.el.M_Slider = undefined; + } + _setupEventHandlers() { + if (this.options.pauseOnFocus) { + this.el.addEventListener('focusin', this._handleAutoPauseFocus); + this.el.addEventListener('focusout', this._handleAutoStartFocus); + } + if (this.options.pauseOnHover) { + this.el.addEventListener('mouseenter', this._handleAutoPauseHover); + this.el.addEventListener('mouseleave', this._handleAutoStartHover); + } + if (this.options.indicators) { + this._indicators.forEach((el) => { + el.addEventListener('click', this._handleIndicatorClick); + }); + } + } + _removeEventHandlers() { + if (this.options.pauseOnFocus) { + this.el.removeEventListener('focusin', this._handleAutoPauseFocus); + this.el.removeEventListener('focusout', this._handleAutoStartFocus); + } + if (this.options.pauseOnHover) { + this.el.removeEventListener('mouseenter', this._handleAutoPauseHover); + this.el.removeEventListener('mouseleave', this._handleAutoStartHover); + } + if (this.options.indicators) { + this._indicators.forEach((el) => { + el.removeEventListener('click', this._handleIndicatorClick); + }); + } + } + _handleIndicatorClick = (e) => { + const el = e.target.parentElement; + const currIndex = [...el.parentNode.children].indexOf(el); + this._focusCurrent = true; + this.set(currIndex); + }; + _handleAutoPauseHover = () => { + this._hovered = true; + if (this.interval != null) { + this._pause(true); + } + }; + _handleAutoPauseFocus = () => { + this._focused = true; + if (this.interval != null) { + this._pause(true); + } + }; + _handleAutoStartHover = () => { + this._hovered = false; + if (!(this.options.pauseOnFocus && this._focused) && this.eventPause) { + this.start(); + } + }; + _handleAutoStartFocus = () => { + this._focused = false; + if (!(this.options.pauseOnHover && this._hovered) && this.eventPause) { + this.start(); + } + }; + _handleInterval = () => { + const activeElem = this._slider.querySelector('.active'); + let newActiveIndex = [...activeElem.parentNode.children].indexOf(activeElem); + if (this._slides.length === newActiveIndex + 1) + newActiveIndex = 0; // loop to start + else + newActiveIndex += 1; + this.set(newActiveIndex); + }; + _animateSlide(slide, isDirectionIn) { + let dx = 0, dy = 0; + // from + slide.style.opacity = isDirectionIn ? '0' : '1'; + setTimeout(() => { + slide.style.transition = `opacity ${this.options.duration}ms ease`; + // to + slide.style.opacity = isDirectionIn ? '1' : '0'; + }, 1); + // Caption + const caption = slide.querySelector('.caption'); + if (!caption) + return; + if (caption.classList.contains('center-align')) + dy = -100; + else if (caption.classList.contains('right-align')) + dx = 100; + else if (caption.classList.contains('left-align')) + dx = -100; + // from + caption.style.opacity = isDirectionIn ? '0' : '1'; + caption.style.transform = isDirectionIn ? `translate(${dx}px, ${dy}px)` : `translate(0, 0)`; + setTimeout(() => { + caption.style.transition = `opacity ${this.options.duration}ms ease, transform ${this.options.duration}ms ease`; + // to + caption.style.opacity = isDirectionIn ? '1' : '0'; + caption.style.transform = isDirectionIn ? `translate(0, 0)` : `translate(${dx}px, ${dy}px)`; + }, this.options.duration); // delay + } + _setSliderHeight() { + // If fullscreen, do nothing + if (!this.el.classList.contains('fullscreen')) { + if (this.options.indicators) { + // Add height if indicators are present + this.el.style.height = (this.options.height + 40) + 'px'; //.css('height', this.options.height + 40 + 'px'); + } + else { + this.el.style.height = this.options.height + 'px'; + } + this._slider.style.height = this.options.height + 'px'; + } + } + _setupIndicators() { + if (this.options.indicators) { + const ul = document.createElement('ul'); + ul.classList.add('indicators'); + const arrLi = []; + this._slides.forEach((el, i) => { + const label = this.options.indicatorLabelFunc + ? this.options.indicatorLabelFunc.call(this, i + 1, i === 0) + : `${i + 1}`; + const li = document.createElement('li'); + li.classList.add('indicator-item'); + li.innerHTML = ``; + arrLi.push(li); + ul.append(li); + }); + this.el.append(ul); + this._indicators = arrLi; + } + } + _removeIndicators() { + this.el.querySelector('ul.indicators').remove(); //find('ul.indicators').remove(); + } + set(index) { + // Wrap around indices. + if (index >= this._slides.length) + index = 0; + else if (index < 0) + index = this._slides.length - 1; + // Only do if index changes + if (this.activeIndex === index) + return; + this._activeSlide = this._slides[this.activeIndex]; + const _caption = this._activeSlide.querySelector('.caption'); + this._activeSlide.classList.remove('active'); + // Enables every slide + this._slides.forEach(slide => slide.style.visibility = 'visible'); + //--- Hide active Slide + Caption + this._activeSlide.style.opacity = '0'; + setTimeout(() => { + this._slides.forEach(slide => { + if (slide.classList.contains('active')) + return; + slide.style.opacity = '0'; + slide.style.transform = 'translate(0, 0)'; + // Disables invisible slides (for assistive technologies) + slide.style.visibility = 'hidden'; + }); + }, this.options.duration); + // Hide active Caption + //this._animateCaptionIn(_caption, this.options.duration); + _caption.style.opacity = '0'; + // Update indicators + if (this.options.indicators) { + const activeIndicator = this._indicators[this.activeIndex].children[0]; + const nextIndicator = this._indicators[index].children[0]; + activeIndicator.classList.remove('active'); + nextIndicator.classList.add('active'); + if (typeof this.options.indicatorLabelFunc === "function") { + activeIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, this.activeIndex, false); + nextIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, index, true); + } + } + //--- Show new Slide + Caption + this._animateSlide(this._slides[index], true); + this._slides[index].classList.add('active'); + this.activeIndex = index; + // Reset interval, if allowed. This check prevents autostart + // when slider is paused, since it can be changed though indicators. + if (this.interval != null) { + this.start(); + } + } + _pause(fromEvent) { + clearInterval(this.interval); + this.eventPause = fromEvent; + this.interval = null; + } + /** + * Pause slider autoslide. + */ + pause = () => { + this._pause(false); + }; + /** + * Start slider autoslide. + */ + start = () => { + clearInterval(this.interval); + this.interval = setInterval(this._handleInterval, this.options.duration + this.options.interval); + this.eventPause = false; + }; + /** + * Move to next slider. + */ + next = () => { + let newIndex = this.activeIndex + 1; + // Wrap around indices. + if (newIndex >= this._slides.length) + newIndex = 0; + else if (newIndex < 0) + newIndex = this._slides.length - 1; + this.set(newIndex); + }; + /** + * Move to prev slider. + */ + prev = () => { + let newIndex = this.activeIndex - 1; + // Wrap around indices. + if (newIndex >= this._slides.length) + newIndex = 0; + else if (newIndex < 0) + newIndex = this._slides.length - 1; + this.set(newIndex); + }; + } + + let _defaults = { + text: '', + displayLength: 4000, + inDuration: 300, + outDuration: 375, + classes: '', + completeCallback: null, + activationPercent: 0.8 + }; + class Toast { + /** The toast element. */ + el; + /** + * The remaining amount of time in ms that the toast + * will stay before dismissal. + */ + timeRemaining; + /** + * Describes the current pan state of the Toast. + */ + panning; + options; + message; + counterInterval; + wasSwiped; + startingXPos; + xPos; + time; + deltaX; + velocityX; + static _toasts; + static _container; + static _draggedToast; + constructor(options) { + this.options = { + ...Toast.defaults, + ...options + }; + this.message = this.options.text; + this.panning = false; + this.timeRemaining = this.options.displayLength; + if (Toast._toasts.length === 0) { + Toast._createContainer(); + } + // Create new toast + Toast._toasts.push(this); + let toastElement = this._createToast(); + toastElement.M_Toast = this; + this.el = toastElement; + this._animateIn(); + this._setTimer(); + } + static get defaults() { + return _defaults; + } + static getInstance(el) { + return el.M_Toast; + } + static _createContainer() { + const container = document.createElement('div'); + container.setAttribute('id', 'toast-container'); + // Add event handler + container.addEventListener('touchstart', Toast._onDragStart); + container.addEventListener('touchmove', Toast._onDragMove); + container.addEventListener('touchend', Toast._onDragEnd); + container.addEventListener('mousedown', Toast._onDragStart); + document.addEventListener('mousemove', Toast._onDragMove); + document.addEventListener('mouseup', Toast._onDragEnd); + document.body.appendChild(container); + Toast._container = container; + } + static _removeContainer() { + document.removeEventListener('mousemove', Toast._onDragMove); + document.removeEventListener('mouseup', Toast._onDragEnd); + Toast._container.remove(); + Toast._container = null; + } + static _onDragStart(e) { + if (e.target && e.target.closest('.toast')) { + const toastElem = e.target.closest('.toast'); + const toast = toastElem.M_Toast; + toast.panning = true; + Toast._draggedToast = toast; + toast.el.classList.add('panning'); + toast.el.style.transition = ''; + toast.startingXPos = Toast._xPos(e); + toast.time = Date.now(); + toast.xPos = Toast._xPos(e); + } + } + static _onDragMove(e) { + if (!!Toast._draggedToast) { + e.preventDefault(); + const toast = Toast._draggedToast; + toast.deltaX = Math.abs(toast.xPos - Toast._xPos(e)); + toast.xPos = Toast._xPos(e); + toast.velocityX = toast.deltaX / (Date.now() - toast.time); + toast.time = Date.now(); + const totalDeltaX = toast.xPos - toast.startingXPos; + const activationDistance = toast.el.offsetWidth * toast.options.activationPercent; + toast.el.style.transform = `translateX(${totalDeltaX}px)`; + toast.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString(); + } + } + static _onDragEnd() { + if (!!Toast._draggedToast) { + let toast = Toast._draggedToast; + toast.panning = false; + toast.el.classList.remove('panning'); + let totalDeltaX = toast.xPos - toast.startingXPos; + let activationDistance = toast.el.offsetWidth * toast.options.activationPercent; + let shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1; + // Remove toast + if (shouldBeDismissed) { + toast.wasSwiped = true; + toast.dismiss(); + // Animate toast back to original position + } + else { + toast.el.style.transition = 'transform .2s, opacity .2s'; + toast.el.style.transform = ''; + toast.el.style.opacity = ''; + } + Toast._draggedToast = null; + } + } + static _xPos(e) { + if (e.type.startsWith("touch") && e.targetTouches.length >= 1) { + return e.targetTouches[0].clientX; + } + // mouse event + return e.clientX; + } + /** + * dismiss all toasts. + */ + static dismissAll() { + for (let toastIndex in Toast._toasts) { + Toast._toasts[toastIndex].dismiss(); + } + } + _createToast() { + let toast = this.options.toastId + ? document.getElementById(this.options.toastId) + : document.createElement('div'); + if (toast instanceof HTMLTemplateElement) { + const node = toast.content.cloneNode(true); + toast = node.firstElementChild; + } + toast.classList.add('toast'); + toast.setAttribute('role', 'alert'); + toast.setAttribute('aria-live', 'assertive'); + toast.setAttribute('aria-atomic', 'true'); + // Add custom classes onto toast + if (this.options.classes.length > 0) { + toast.classList.add(...this.options.classes.split(' ')); + } + if (this.message) + toast.innerText = this.message; + Toast._container.appendChild(toast); + return toast; + } + _animateIn() { + // Animate toast in + this.el.style.display = ""; + this.el.style.opacity = '0'; + // easeOutCubic + this.el.style.transition = ` + top ${this.options.inDuration}ms ease, + opacity ${this.options.inDuration}ms ease + `; + setTimeout(() => { + this.el.style.top = '0'; + this.el.style.opacity = '1'; + }, 1); + } + /** + * Create setInterval which automatically removes toast when timeRemaining >= 0 + * has been reached. + */ + _setTimer() { + if (this.timeRemaining !== Infinity) { + this.counterInterval = setInterval(() => { + // If toast is not being dragged, decrease its time remaining + if (!this.panning) { + this.timeRemaining -= 20; + } + // Animate toast out + if (this.timeRemaining <= 0) { + this.dismiss(); + } + }, 20); + } + } + /** + * Dismiss toast with animation. + */ + dismiss() { + window.clearInterval(this.counterInterval); + let activationDistance = this.el.offsetWidth * this.options.activationPercent; + if (this.wasSwiped) { + this.el.style.transition = 'transform .05s, opacity .05s'; + this.el.style.transform = `translateX(${activationDistance}px)`; + this.el.style.opacity = '0'; + } + // easeOutExpo + this.el.style.transition = ` + margin ${this.options.outDuration}ms ease, + opacity ${this.options.outDuration}ms ease`; + setTimeout(() => { + this.el.style.opacity = '0'; + this.el.style.marginTop = '-40px'; + }, 1); + setTimeout(() => { + // Call the optional callback + if (typeof this.options.completeCallback === 'function') { + this.options.completeCallback(); + } + // Remove toast from DOM + if (this.el.id != this.options.toastId) { + this.el.remove(); + Toast._toasts.splice(Toast._toasts.indexOf(this), 1); + if (Toast._toasts.length === 0) { + Toast._removeContainer(); + } + } + }, this.options.outDuration); + } + static { + Toast._toasts = []; + Toast._container = null; + Toast._draggedToast = null; + } + } + + const version = '2.1.1'; + const Grid = (children = '') => { + return `
${children}`; + }; + function Button(children = '') { + return ``; + } + /** + * Automatically initialize components. + * @param context Root element to initialize. Defaults to `document.body`. + */ + function AutoInit(context = document.body) { + let registry = { + Autocomplete: context.querySelectorAll('.autocomplete:not(.no-autoinit)'), + Carousel: context.querySelectorAll('.carousel:not(.no-autoinit)'), + Chips: context.querySelectorAll('.chips:not(.no-autoinit)'), + Collapsible: context.querySelectorAll('.collapsible:not(.no-autoinit)'), + Datepicker: context.querySelectorAll('.datepicker:not(.no-autoinit)'), + Dropdown: context.querySelectorAll('.dropdown-trigger:not(.no-autoinit)'), + Materialbox: context.querySelectorAll('.materialboxed:not(.no-autoinit)'), + Modal: context.querySelectorAll('.modal:not(.no-autoinit)'), + Parallax: context.querySelectorAll('.parallax:not(.no-autoinit)'), + Pushpin: context.querySelectorAll('.pushpin:not(.no-autoinit)'), + ScrollSpy: context.querySelectorAll('.scrollspy:not(.no-autoinit)'), + FormSelect: context.querySelectorAll('select:not(.no-autoinit)'), + Sidenav: context.querySelectorAll('.sidenav:not(.no-autoinit)'), + Tabs: context.querySelectorAll('.tabs:not(.no-autoinit)'), + TapTarget: context.querySelectorAll('.tap-target:not(.no-autoinit)'), + Timepicker: context.querySelectorAll('.timepicker:not(.no-autoinit)'), + Tooltip: context.querySelectorAll('.tooltipped:not(.no-autoinit)'), + FloatingActionButton: context.querySelectorAll('.fixed-action-btn:not(.no-autoinit)') + }; + Autocomplete.init(registry.Autocomplete, {}); + Carousel.init(registry.Carousel, {}); + Chips.init(registry.Chips, {}); + Collapsible.init(registry.Collapsible, {}); + Datepicker.init(registry.Datepicker, {}); + Dropdown.init(registry.Dropdown, {}); + Materialbox.init(registry.Materialbox, {}); + Modal.init(registry.Modal, {}); + Parallax.init(registry.Parallax, {}); + Pushpin.init(registry.Pushpin, {}); + ScrollSpy.init(registry.ScrollSpy, {}); + FormSelect.init(registry.FormSelect, {}); + Sidenav.init(registry.Sidenav, {}); + Tabs.init(registry.Tabs, {}); + TapTarget.init(registry.TapTarget, {}); + Timepicker.init(registry.Timepicker, {}); + Tooltip.init(registry.Tooltip, {}); + FloatingActionButton.init(registry.FloatingActionButton, {}); + } + // Init + if (typeof document !== 'undefined') { + document.addEventListener('keydown', Utils.docHandleKeydown, true); + document.addEventListener('keyup', Utils.docHandleKeyup, true); + document.addEventListener('focus', Utils.docHandleFocus, true); + document.addEventListener('blur', Utils.docHandleBlur, true); + } + Cards.Init(); + Forms.Init(); + Chips.Init(); + Waves.Init(); + Range.Init(); + + exports.AutoInit = AutoInit; + exports.Autocomplete = Autocomplete; + exports.Button = Button; + exports.Cards = Cards; + exports.Carousel = Carousel; + exports.CharacterCounter = CharacterCounter; + exports.Chips = Chips; + exports.Collapsible = Collapsible; + exports.Datepicker = Datepicker; + exports.Dropdown = Dropdown; + exports.FloatingActionButton = FloatingActionButton; + exports.FormSelect = FormSelect; + exports.Forms = Forms; + exports.Grid = Grid; + exports.Materialbox = Materialbox; + exports.Modal = Modal; + exports.Parallax = Parallax; + exports.Pushpin = Pushpin; + exports.Range = Range; + exports.ScrollSpy = ScrollSpy; + exports.Sidenav = Sidenav; + exports.Slider = Slider; + exports.Tabs = Tabs; + exports.TapTarget = TapTarget; + exports.Timepicker = Timepicker; + exports.Toast = Toast; + exports.Tooltip = Tooltip; + exports.Waves = Waves; + exports.version = version; + + return exports; + +})({}); diff --git a/dist/js/materialize.min.js b/dist/js/materialize.min.js new file mode 100644 index 0000000000..f34b477a05 --- /dev/null +++ b/dist/js/materialize.min.js @@ -0,0 +1,6 @@ +/*! +* Materialize v2.1.1 (https://materializeweb.com) +* Copyright 2014-2024 Materialize +* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE) +*/ +var M=function(t){"use strict";class e{static tabPressed=!1;static keyDown=!1;static keys={TAB:["Tab"],ENTER:["Enter"],ESC:["Escape","Esc"],BACKSPACE:["Backspace"],ARROW_UP:["ArrowUp","Up"],ARROW_DOWN:["ArrowDown","Down"],ARROW_LEFT:["ArrowLeft","Left"],ARROW_RIGHT:["ArrowRight","Right"],DELETE:["Delete","Del"]};static docHandleKeydown(t){e.keyDown=!0,[...e.keys.TAB,...e.keys.ARROW_DOWN,...e.keys.ARROW_UP].includes(t.key)&&(e.tabPressed=!0)}static docHandleKeyup(t){e.keyDown=!1,[...e.keys.TAB,...e.keys.ARROW_DOWN,...e.keys.ARROW_UP].includes(t.key)&&(e.tabPressed=!1)}static docHandleFocus(t){e.keyDown&&document.body.classList.add("keyboard-focused")}static docHandleBlur(t){document.body.classList.remove("keyboard-focused")}static guid(){const t=()=>Math.floor(65536*(1+Math.random())).toString(16).substring(1);return t()+t()+"-"+t()+"-"+t()+"-"+t()+"-"+t()+t()+t()}static checkWithinContainer(t,e,i){let s={top:!1,right:!1,bottom:!1,left:!1},n=t.getBoundingClientRect(),o=t===document.body?Math.max(n.bottom,window.innerHeight):n.bottom,l=t.scrollLeft,a=t.scrollTop,h=e.left-l,r=e.top-a;return(hn.right-i||h+e.width>window.innerWidth-i)&&(s.right=!0),(ro-i||r+e.height>window.innerHeight-i)&&(s.bottom=!0),s}static checkPossibleAlignments(t,e,i,s){let n={top:!0,right:!0,bottom:!0,left:!0,spaceOnTop:null,spaceOnRight:null,spaceOnBottom:null,spaceOnLeft:null},o="visible"===getComputedStyle(e).overflow,l=e.getBoundingClientRect(),a=Math.min(l.height,window.innerHeight),h=Math.min(l.width,window.innerWidth),r=t.getBoundingClientRect(),d=e.scrollLeft,c=e.scrollTop,p=i.left-d,u=i.top-c,m=i.top+r.height-c;return n.spaceOnRight=o?window.innerWidth-(r.left+i.width):h-(p+i.width),n.spaceOnRight<0&&(n.left=!1),n.spaceOnLeft=o?r.right-i.width:p-i.width+r.width,n.spaceOnLeft<0&&(n.right=!1),n.spaceOnBottom=o?window.innerHeight-(r.top+i.height+s):a-(u+i.height+s),n.spaceOnBottom<0&&(n.top=!1),n.spaceOnTop=o?r.bottom-(i.height+s):m-(i.height-s),n.spaceOnTop<0&&(n.bottom=!1),n}static getIdFromTrigger(t){let e=t.dataset.target;return e||(e=t.getAttribute("href"),e?e.slice(1):"")}static getDocumentScrollTop(){return window.scrollY||document.documentElement.scrollTop||document.body.scrollTop||0}static getDocumentScrollLeft(){return window.scrollX||document.documentElement.scrollLeft||document.body.scrollLeft||0}static throttle(t,e,i=null){let s,n,o,l=null,a=0;i||(i={});let h=function(){a=!1===i.leading?0:(new Date).getTime(),l=null,o=t.apply(s,n),s=n=null};return function(){let r=(new Date).getTime();a||!1!==i.leading||(a=r);let d=e-(r-a);return s=this,n=arguments,d<=0?(clearTimeout(l),l=null,a=r,o=t.apply(s,n),s=n=null):l||!1===i.trailing||(l=setTimeout(h,d)),o}}}class i{el;options;constructor(t,e,i){t instanceof HTMLElement||console.error(Error(t+" is not an HTML Element"));let s=i.getInstance(t);s&&s.destroy(),this.el=t}static init(t,e,i){let s=null;if(t instanceof Element)s=new i(t,e);else if(t&&t.length){s=[];for(let n=0;n{t.preventDefault(),this.isOpen?this.close():this.open()};_handleMouseEnter=()=>{this.open()};_handleMouseLeave=t=>{const e=t.relatedTarget,i=!!e.closest(".dropdown-content");let s=!1;const n=e.closest(".dropdown-trigger");n&&n.M_Dropdown&&n.M_Dropdown.isOpen&&(s=!0),s||i||this.close()};_handleDocumentClick=t=>{const e=t.target;this.options.closeOnClick&&e.closest(".dropdown-content")&&!this.isTouchMoving?this.close():e.closest(".dropdown-content")||setTimeout((()=>{this.isOpen&&this.close()}),0),this.isTouchMoving=!1};_handleTriggerKeydown=t=>{(e.keys.ARROW_DOWN.includes(t.key)||e.keys.ENTER.includes(t.key))&&!this.isOpen&&(t.preventDefault(),this.open())};_handleDocumentTouchmove=t=>{t.target.closest(".dropdown-content")&&(this.isTouchMoving=!0)};_handleDropdownClick=t=>{if("function"==typeof this.options.onItemClick){const e=t.target.closest("li");this.options.onItemClick.call(this,e)}};_handleDropdownKeydown=t=>{const i=e.keys.ARROW_DOWN.includes(t.key)||e.keys.ARROW_UP.includes(t.key);if(e.keys.TAB.includes(t.key))t.preventDefault(),this.close();else if(i&&this.isOpen){t.preventDefault();const i=e.keys.ARROW_DOWN.includes(t.key)?1:-1;let s=this.focusedIndex,n=!1;do{if(s+=i,this.dropdownEl.children[s]&&-1!==this.dropdownEl.children[s].tabIndex){n=!0;break}}while(s=0);n&&(this.focusedIndex>=0&&this.dropdownEl.children[this.focusedIndex].classList.remove("active"),this.focusedIndex=s,this._focusFocusedItem())}else if(e.keys.ENTER.includes(t.key)&&this.isOpen){const t=this.dropdownEl.children[this.focusedIndex],e=t.querySelector("a, button");e?e.click():t&&t instanceof HTMLElement&&t.click()}else e.keys.ESC.includes(t.key)&&this.isOpen&&(t.preventDefault(),this.close());const s=t.key.toLowerCase(),n=/[a-zA-Z0-9-_]/.test(s),o=[...e.keys.ARROW_DOWN,...e.keys.ARROW_UP,...e.keys.ENTER,...e.keys.ESC,...e.keys.TAB];if(n&&!o.includes(t.key)){this.filterQuery.push(s);const t=this.filterQuery.join(""),e=Array.from(this.dropdownEl.querySelectorAll("li")).find((e=>0===e.innerText.toLowerCase().indexOf(t)));e&&(this.focusedIndex=[...e.parentNode.children].indexOf(e),this._focusFocusedItem())}this.filterTimeout=setTimeout(this._resetFilterQuery,1e3)};_handleWindowResize=t=>{this.el.offsetParent&&this.recalculateDimensions()};_resetFilterQuery=()=>{this.filterQuery=[]};_resetDropdownStyles(){this.dropdownEl.style.display="",this.dropdownEl.style.width="",this.dropdownEl.style.height="",this.dropdownEl.style.left="",this.dropdownEl.style.top="",this.dropdownEl.style.transformOrigin="",this.dropdownEl.style.transform="",this.dropdownEl.style.opacity=""}_moveDropdown(t=null){this.options.container?this.options.container.append(this.dropdownEl):t?t.contains(this.dropdownEl)||t.append(this.dropdownEl):this.el.after(this.dropdownEl)}_makeDropdownFocusable(){this.dropdownEl&&(this.dropdownEl.popover="",this.dropdownEl.tabIndex=0,Array.from(this.dropdownEl.children).forEach((t=>{t.getAttribute("tabindex")||t.setAttribute("tabindex","0")})))}_focusFocusedItem(){this.focusedIndex>=0&&this.focusedIndexr.spaceOnBottom?(d="bottom",n+=r.spaceOnTop,a-=this.options.coverTrigger?r.spaceOnTop-20:r.spaceOnTop-20+i.height):n+=r.spaceOnBottom)),!r[c]){const t="left"===c?"right":"left";r[t]?c=t:r.spaceOnLeft>r.spaceOnRight?(c="right",o+=r.spaceOnLeft,l-=r.spaceOnLeft):(c="left",o+=r.spaceOnRight)}return"bottom"===d&&(a=a-s.height+(this.options.coverTrigger?i.height:0)),"right"===c&&(l=l-s.width+i.width),{x:l,y:a,verticalAlignment:d,horizontalAlignment:c,height:n,width:o}}_animateIn(){const t=this.options.inDuration;this.dropdownEl.style.transition="none",this.dropdownEl.style.opacity="0",this.dropdownEl.style.transform="scale(0.3, 0.3)",setTimeout((()=>{this.dropdownEl.style.transition=`opacity ${t}ms ease, transform ${t}ms ease`,this.dropdownEl.style.opacity="1",this.dropdownEl.style.transform="scale(1, 1)"}),1),setTimeout((()=>{this.options.autoFocus&&this.dropdownEl.focus(),"function"==typeof this.options.onOpenEnd&&this.options.onOpenEnd.call(this,this.el)}),t)}_animateOut(){const t=this.options.outDuration;this.dropdownEl.style.transition=`opacity ${t}ms ease, transform ${t}ms ease`,this.dropdownEl.style.opacity="0",this.dropdownEl.style.transform="scale(0.3, 0.3)",setTimeout((()=>{this._resetDropdownStyles(),"function"==typeof this.options.onCloseEnd&&this.options.onCloseEnd.call(this,this.el)}),t)}_getClosestAncestor(t,e){let i=t.parentNode;for(;null!==i&&i!==document;){if(e(i))return i;i=i.parentElement}return null}_placeDropdown(){let t=this._getClosestAncestor(this.dropdownEl,(t=>!["HTML","BODY"].includes(t.tagName)&&"visible"!==getComputedStyle(t).overflow));t||(t=this.dropdownEl.offsetParent?this.dropdownEl.offsetParent:this.dropdownEl.parentNode),"static"===getComputedStyle(t).position&&(t.style.position="relative"),this._moveDropdown(t);const e=this.options.constrainWidth?this.el.getBoundingClientRect().width:this.dropdownEl.getBoundingClientRect().width;this.dropdownEl.style.width=e+"px";const i=this._getDropdownPosition(t);this.dropdownEl.style.left=i.x+"px",this.dropdownEl.style.top=i.y+"px",this.dropdownEl.style.height=i.height+"px",this.dropdownEl.style.width=i.width+"px",this.dropdownEl.style.transformOrigin=`${"left"===i.horizontalAlignment?"0":"100%"} ${"top"===i.verticalAlignment?"0":"100%"}`}open=()=>{this.isOpen||(this.isOpen=!0,"function"==typeof this.options.onOpenStart&&this.options.onOpenStart.call(this,this.el),this._resetDropdownStyles(),this.dropdownEl.style.display="block",this._placeDropdown(),this._animateIn(),setTimeout((()=>this._setupTemporaryEventHandlers()),0))};close=()=>{this.isOpen&&(this.isOpen=!1,this.focusedIndex=-1,"function"==typeof this.options.onCloseStart&&this.options.onCloseStart.call(this,this.el),this._animateOut(),this._removeTemporaryEventHandlers(),this.options.autoFocus&&this.el.focus())};recalculateDimensions=()=>{this.isOpen&&(this.dropdownEl.style.width="",this.dropdownEl.style.height="",this.dropdownEl.style.left="",this.dropdownEl.style.top="",this.dropdownEl.style.transformOrigin="",this._placeDropdown())}}let o={data:[],onAutocomplete:null,dropdownOptions:{autoFocus:!1,closeOnClick:!1,coverTrigger:!1},minLength:1,isMultiSelect:!1,onSearch:(t,e)=>{const i=t.toLocaleLowerCase();e.setMenuItems(e.options.data.filter((t=>t.id.toString().toLocaleLowerCase().includes(i)||t.text?.toLocaleLowerCase().includes(i))))},maxDropDownHeight:"300px",allowUnsafeHTML:!1};class l extends i{isOpen;count;activeIndex;oldVal;$active;_mousedown;container;dropdown;static _keydown;selectedValues;menuItems;constructor(t,e){super(t,e,l),this.el.M_Autocomplete=this,this.options={...l.defaults,...e},this.isOpen=!1,this.count=0,this.activeIndex=-1,this.oldVal="",this.selectedValues=[],this.menuItems=this.options.data||[],this.$active=null,this._mousedown=!1,this._setupDropdown(),this._setupEventHandlers()}static get defaults(){return o}static init(t,e={}){return super.init(t,e,l)}static getInstance(t){return t.M_Autocomplete}destroy(){this._removeEventHandlers(),this._removeDropdown(),this.el.M_Autocomplete=void 0}_setupEventHandlers(){this.el.addEventListener("blur",this._handleInputBlur),this.el.addEventListener("keyup",this._handleInputKeyupAndFocus),this.el.addEventListener("focus",this._handleInputKeyupAndFocus),this.el.addEventListener("keydown",this._handleInputKeydown),this.el.addEventListener("click",this._handleInputClick),this.container.addEventListener("mousedown",this._handleContainerMousedownAndTouchstart),this.container.addEventListener("mouseup",this._handleContainerMouseupAndTouchend),void 0!==window.ontouchstart&&(this.container.addEventListener("touchstart",this._handleContainerMousedownAndTouchstart),this.container.addEventListener("touchend",this._handleContainerMouseupAndTouchend))}_removeEventHandlers(){this.el.removeEventListener("blur",this._handleInputBlur),this.el.removeEventListener("keyup",this._handleInputKeyupAndFocus),this.el.removeEventListener("focus",this._handleInputKeyupAndFocus),this.el.removeEventListener("keydown",this._handleInputKeydown),this.el.removeEventListener("click",this._handleInputClick),this.container.removeEventListener("mousedown",this._handleContainerMousedownAndTouchstart),this.container.removeEventListener("mouseup",this._handleContainerMouseupAndTouchend),void 0!==window.ontouchstart&&(this.container.removeEventListener("touchstart",this._handleContainerMousedownAndTouchstart),this.container.removeEventListener("touchend",this._handleContainerMouseupAndTouchend))}_setupDropdown(){this.container=document.createElement("ul"),this.container.style.maxHeight=this.options.maxDropDownHeight,this.container.id=`autocomplete-options-${e.guid()}`,this.container.classList.add("autocomplete-content","dropdown-content"),this.el.setAttribute("data-target",this.container.id),this.menuItems.forEach((t=>{const e=this._createDropdownItem(t);this.container.append(e)})),this.el.parentElement.appendChild(this.container);let t={...l.defaults.dropdownOptions,...this.options.dropdownOptions},i=t.onItemClick;t.onItemClick=t=>{if(!t)return;const e=t.getAttribute("data-id");this.selectOption(e),i&&"function"==typeof i&&i.call(this.dropdown,this.el)},this.dropdown=n.init(this.el,t);const s=this.el.parentElement.querySelector("label");s&&this.el.after(s),this.el.removeEventListener("click",this.dropdown._handleClick),this.el.value&&this.selectOption(this.el.value);const o=document.createElement("div");o.classList.add("status-info"),o.setAttribute("style","position: absolute;right:0;top:0;"),this.el.parentElement.appendChild(o),this._updateSelectedInfo()}_removeDropdown(){this.container.parentNode.removeChild(this.container)}_handleInputBlur=()=>{this._mousedown||(this.close(),this._resetAutocomplete())};_handleInputKeyupAndFocus=t=>{"keyup"===t.type&&(l._keydown=!1),this.count=0;const i=this.el.value.toLocaleLowerCase();e.keys.ENTER.includes(t.key)||e.keys.ARROW_UP.includes(t.key)||e.keys.ARROW_DOWN.includes(t.key)||(this.oldVal===i||!e.tabPressed&&"focus"===t.type||this.open(),this.oldVal!==i&&(this._setStatusLoading(),this.options.onSearch(this.el.value,this)),this.options.isMultiSelect||0!==this.el.value.length||(this.selectedValues=[],this._triggerChanged()),this.oldVal=i)};_handleInputKeydown=t=>{l._keydown=!0;const i=this.container.querySelectorAll("li").length;if(e.keys.ENTER.includes(t.key)&&this.activeIndex>=0){const e=this.container.querySelectorAll("li")[this.activeIndex];e&&(this.selectOption(e.getAttribute("data-id")),t.preventDefault())}else(e.keys.ARROW_UP.includes(t.key)||e.keys.ARROW_DOWN.includes(t.key))&&(t.preventDefault(),e.keys.ARROW_UP.includes(t.key)&&this.activeIndex>0&&this.activeIndex--,e.keys.ARROW_DOWN.includes(t.key)&&this.activeIndex=0&&(this.$active=this.container.querySelectorAll("li")[this.activeIndex],this.$active?.classList.add("active"),this.container.children[this.activeIndex].scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})))};_handleInputClick=()=>{this.open()};_handleContainerMousedownAndTouchstart=()=>{this._mousedown=!0};_handleContainerMouseupAndTouchend=()=>{this._mousedown=!1};_resetCurrentElementPosition(){this.activeIndex=-1,this.$active?.classList.remove("active")}_resetAutocomplete(){this.container.replaceChildren(),this._resetCurrentElementPosition(),this.oldVal=null,this.isOpen=!1,this._mousedown=!1}_highlightPartialText(t,e){const i=e.toLocaleLowerCase().indexOf(""+t.toLocaleLowerCase()),s=i+t.length-1;return-1==i||-1==s?[e,"",""]:[e.slice(0,i),e.slice(i,s+1),e.slice(s+1)]}_createDropdownItem(t){const e=document.createElement("li");if(e.setAttribute("data-id",t.id),e.setAttribute("style","display:grid; grid-auto-flow: column; user-select: none; align-items: center;"),this.options.isMultiSelect&&(e.innerHTML=`\n
\n e.id===t.id))?' checked="checked"':""}>\n
`),t.image){const i=document.createElement("img");i.classList.add("circle"),i.src=t.image,e.appendChild(i)}const i=this.el.value.toLocaleLowerCase(),s=this._highlightPartialText(i,(t.text||t.id).toString()),n=document.createElement("div");if(n.setAttribute("style","line-height:1.2;font-weight:500;"),this.options.allowUnsafeHTML)n.innerHTML=s[0]+''+s[1]+""+s[2];else if(n.appendChild(document.createTextNode(s[0])),s[1]){const t=document.createElement("span");t.textContent=s[1],t.classList.add("highlight"),n.appendChild(t),n.appendChild(document.createTextNode(s[2]))}const o=document.createElement("div");if(o.classList.add("item-text"),o.setAttribute("style","padding:5px;overflow:hidden;"),e.appendChild(o),e.querySelector(".item-text").appendChild(n),"string"==typeof t.description||"number"==typeof t.description&&!isNaN(t.description)){const i=document.createElement("small");i.setAttribute("style","line-height:1.3;color:grey;white-space:nowrap;text-overflow:ellipsis;display:block;width:90%;overflow:hidden;"),i.innerText=t.description,e.querySelector(".item-text").appendChild(i)}return e.style.gridTemplateColumns=(()=>this.options.isMultiSelect?t.image?"40px min-content auto":"40px auto":t.image?"min-content auto":"auto")(),e}_renderDropdown(){this._resetAutocomplete(),0===this.menuItems.length&&(this.menuItems=this.selectedValues);for(let t=0;t\n \n \n \n
'}_updateSelectedInfo(){const t=this.el.parentElement.querySelector(".status-info");t&&(this.options.isMultiSelect?t.innerHTML=this.selectedValues.length.toString():t.innerHTML="")}_refreshInputText(){if(1===this.selectedValues.length){const t=this.selectedValues[0];this.el.value=t.text||t.id}}_triggerChanged(){this.el.dispatchEvent(new Event("change")),"function"==typeof this.options.onAutocomplete&&this.options.onAutocomplete.call(this,this.selectedValues)}open=()=>{const t=this.el.value.toLocaleLowerCase();this._resetAutocomplete(),t.length>=this.options.minLength&&(this.isOpen=!0,this._renderDropdown()),this.dropdown.isOpen?this.dropdown.recalculateDimensions():setTimeout((()=>{this.dropdown.open()}),0)};close=()=>{this.dropdown.close()};setMenuItems(t){this.menuItems=t,this.open(),this._updateSelectedInfo()}setValues(t){this.selectedValues=t,this._updateSelectedInfo(),this.options.isMultiSelect||this._refreshInputText(),this._triggerChanged()}selectOption(t){const e=this.menuItems.find((e=>e.id==t));if(!e)return;const i=this.container.querySelector('li[data-id="'+t+'"]');if(i){if(this.options.isMultiSelect){const t=i.querySelector('input[type="checkbox"]');t.checked=!t.checked,t.checked?this.selectedValues.push(e):this.selectedValues=this.selectedValues.filter((t=>t.id!==e.id)),this.el.focus()}else this.selectedValues=[e],this._refreshInputText(),this._resetAutocomplete(),this.close();this._updateSelectedInfo(),this._triggerChanged()}}}let a={direction:"top",hoverEnabled:!0,toolbarEnabled:!1};class h extends i{isOpen;_anchor;_menu;_floatingBtns;_floatingBtnsReverse;offsetY;offsetX;btnBottom;btnLeft;btnWidth;constructor(t,e){super(t,e,h),this.el.M_FloatingActionButton=this,this.options={...h.defaults,...e},this.isOpen=!1,this._anchor=this.el.querySelector("a"),this._menu=this.el.querySelector("ul"),this._floatingBtns=Array.from(this.el.querySelectorAll("ul .btn-floating")),this._floatingBtnsReverse=this._floatingBtns.reverse(),this.offsetY=0,this.offsetX=0,this.el.classList.add(`direction-${this.options.direction}`),"top"===this.options.direction?this.offsetY=40:"right"===this.options.direction?this.offsetX=-40:"bottom"===this.options.direction?this.offsetY=-40:this.offsetX=40,this._setupEventHandlers()}static get defaults(){return a}static init(t,e={}){return super.init(t,e,h)}static getInstance(t){return t.M_FloatingActionButton}destroy(){this._removeEventHandlers(),this.el.M_FloatingActionButton=void 0}_setupEventHandlers(){this.options.hoverEnabled&&!this.options.toolbarEnabled?(this.el.addEventListener("mouseenter",this.open),this.el.addEventListener("mouseleave",this.close)):this.el.addEventListener("click",this._handleFABClick)}_removeEventHandlers(){this.options.hoverEnabled&&!this.options.toolbarEnabled?(this.el.removeEventListener("mouseenter",this.open),this.el.removeEventListener("mouseleave",this.close)):this.el.removeEventListener("click",this._handleFABClick)}_handleFABClick=()=>{this.isOpen?this.close():this.open()};_handleDocumentClick=t=>{t.target!==this._menu&&this.close};open=()=>{this.isOpen||(this.options.toolbarEnabled?this._animateInToolbar():this._animateInFAB(),this.isOpen=!0)};close=()=>{this.isOpen&&(this.options.toolbarEnabled?(window.removeEventListener("scroll",this.close,!0),document.body.removeEventListener("click",this._handleDocumentClick,!0)):this._animateOutFAB(),this.isOpen=!1)};_animateInFAB(){this.el.classList.add("active");this._floatingBtnsReverse.forEach(((t,e)=>{const i=40*e;t.style.transition="none",t.style.opacity="0",t.style.transform=`translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`,setTimeout((()=>{t.style.opacity="0.4",setTimeout((()=>{t.style.transition="opacity 275ms ease, transform 275ms ease",t.style.opacity="1",t.style.transform="translate(0, 0) scale(1)"}),1)}),i)}))}_animateOutFAB(){setTimeout((()=>this.el.classList.remove("active")),175),this._floatingBtnsReverse.forEach((t=>{t.style.transition="opacity 175ms ease, transform 175ms ease",t.style.opacity="0",t.style.transform=`translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`}))}_animateInToolbar(){let t,e=window.innerWidth,i=window.innerHeight,s=this.el.getBoundingClientRect();const n=document.createElement("div");n.classList.add("fab-backdrop");const o=getComputedStyle(this._anchor).backgroundColor;this._anchor.append(n),this.offsetX=s.left-e/2+s.width/2,this.offsetY=i-s.bottom,t=e/n[0].clientWidth,this.btnBottom=s.bottom,this.btnLeft=s.left,this.btnWidth=s.width,this.el.classList.add("active"),this.el.style.textAlign="center",this.el.style.width="100%",this.el.style.bottom="0",this.el.style.left="0",this.el.style.transform="translateX("+this.offsetX+"px)",this.el.style.transition="none",this._anchor.style.transform=`translateY(${this.offsetY}px`,this._anchor.style.transition="none",n.style.backgroundColor=o,setTimeout((()=>{this.el.style.transform="",this.el.style.transition="transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s",this._anchor.style.overflow="visible",this._anchor.style.transform="",this._anchor.style.transition="transform .2s",setTimeout((()=>{this.el.style.overflow="hidden",this.el.style.backgroundColor=o,n.style.transform="scale("+t+")",n.style.transition="transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)",this._menu.querySelectorAll("li > a").forEach((t=>t.style.opacity="1")),window.addEventListener("scroll",this.close,!0),document.body.addEventListener("click",this._handleDocumentClick,!0)}),100)}),0)}}class r{static Init(){"undefined"!=typeof document&&document.addEventListener("DOMContentLoaded",(()=>{document.body.addEventListener("click",(t=>{const e=t.target,i=e.closest(".card");if(!i)return;const s=Array.from(i.children).find((t=>t.classList.contains("card-reveal")));if(!s)return;const n=getComputedStyle(i).overflow,o=s.querySelector(".card-reveal .card-title");if(e===o||o.contains(e)){const t=225;s.style.transition=`transform ${t}ms ease`,s.style.transform="translateY(0)",setTimeout((()=>{s.style.display="none",i.style.overflow=n}),t)}i.querySelectorAll(".activator").forEach((t=>{(e===t||t.contains(e))&&(i.style.overflow="hidden",s.style.display="block",setTimeout((()=>{s.style.transition="transform 300ms ease",s.style.transform="translateY(-100%)"}),1))}))}))}))}}let d={duration:200,dist:-100,shift:0,padding:0,numVisible:5,fullWidth:!1,indicators:!1,noWrap:!1,onCycleTo:null};class c extends i{hasMultipleSlides;showIndicators;noWrap;pressed;dragged;offset;target;images;itemWidth;itemHeight;dim;_indicators;count;xform;verticalDragged;reference;referenceY;velocity;frame;timestamp;ticker;amplitude;center=0;imageHeight;scrollingTimeout;oneTimeCallback;constructor(t,e){super(t,e,c),this.el.M_Carousel=this,this.options={...c.defaults,...e},this.hasMultipleSlides=this.el.querySelectorAll(".carousel-item").length>1,this.showIndicators=this.options.indicators&&this.hasMultipleSlides,this.noWrap=this.options.noWrap||!this.hasMultipleSlides,this.pressed=!1,this.dragged=!1,this.offset=this.target=0,this.images=[],this.itemWidth=this.el.querySelector(".carousel-item").clientWidth,this.itemHeight=this.el.querySelector(".carousel-item").clientHeight,this.dim=2*this.itemWidth+this.options.padding||1,this.options.fullWidth&&(this.options.dist=0,this._setCarouselHeight(),this.showIndicators&&this.el.querySelector(".carousel-fixed-item")?.classList.add("with-indicators")),this._indicators=document.createElement("ul"),this._indicators.classList.add("indicators"),this.el.querySelectorAll(".carousel-item").forEach(((t,e)=>{if(this.images.push(t),this.showIndicators){const t=document.createElement("li");t.classList.add("indicator-item"),0===e&&t.classList.add("active"),this._indicators.appendChild(t)}})),this.showIndicators&&this.el.appendChild(this._indicators),this.count=this.images.length,this.options.numVisible=Math.min(this.count,this.options.numVisible),this.xform="transform",["webkit","Moz","O","ms"].every((t=>{var e=t+"Transform";return void 0===document.body.style[e]||(this.xform=e,!1)})),this._setupEventHandlers(),this._scroll(this.offset)}static get defaults(){return d}static init(t,e={}){return super.init(t,e,c)}static getInstance(t){return t.M_Carousel}destroy(){this._removeEventHandlers(),this.el.M_Carousel=void 0}_setupEventHandlers(){void 0!==window.ontouchstart&&(this.el.addEventListener("touchstart",this._handleCarouselTap),this.el.addEventListener("touchmove",this._handleCarouselDrag),this.el.addEventListener("touchend",this._handleCarouselRelease)),this.el.addEventListener("mousedown",this._handleCarouselTap),this.el.addEventListener("mousemove",this._handleCarouselDrag),this.el.addEventListener("mouseup",this._handleCarouselRelease),this.el.addEventListener("mouseleave",this._handleCarouselRelease),this.el.addEventListener("click",this._handleCarouselClick),this.showIndicators&&this._indicators&&this._indicators.querySelectorAll(".indicator-item").forEach((t=>{t.addEventListener("click",this._handleIndicatorClick)})),window.addEventListener("resize",this._handleThrottledResize)}_removeEventHandlers(){void 0!==window.ontouchstart&&(this.el.removeEventListener("touchstart",this._handleCarouselTap),this.el.removeEventListener("touchmove",this._handleCarouselDrag),this.el.removeEventListener("touchend",this._handleCarouselRelease)),this.el.removeEventListener("mousedown",this._handleCarouselTap),this.el.removeEventListener("mousemove",this._handleCarouselDrag),this.el.removeEventListener("mouseup",this._handleCarouselRelease),this.el.removeEventListener("mouseleave",this._handleCarouselRelease),this.el.removeEventListener("click",this._handleCarouselClick),this.showIndicators&&this._indicators&&this._indicators.querySelectorAll(".indicator-item").forEach((t=>{t.removeEventListener("click",this._handleIndicatorClick)})),window.removeEventListener("resize",this._handleThrottledResize)}_handleThrottledResize=e.throttle((function(){this._handleResize()}),200,null).bind(this);_handleCarouselTap=t=>{"mousedown"===t.type&&"IMG"===t.target.tagName&&t.preventDefault(),this.pressed=!0,this.dragged=!1,this.verticalDragged=!1,this.reference=this._xpos(t),this.referenceY=this._ypos(t),this.velocity=this.amplitude=0,this.frame=this.offset,this.timestamp=Date.now(),clearInterval(this.ticker),this.ticker=setInterval(this._track,100)};_handleCarouselDrag=t=>{let e,i,s,n;if(this.pressed)if(e=this._xpos(t),i=this._ypos(t),s=this.reference-e,n=Math.abs(this.referenceY-i),n<30&&!this.verticalDragged)(s>2||s<-2)&&(this.dragged=!0,this.reference=e,this._scroll(this.offset+s));else{if(this.dragged)return t.preventDefault(),t.stopPropagation(),!1;this.verticalDragged=!0}if(this.dragged)return t.preventDefault(),t.stopPropagation(),!1};_handleCarouselRelease=t=>{if(this.pressed)return this.pressed=!1,clearInterval(this.ticker),this.target=this.offset,(this.velocity>10||this.velocity<-10)&&(this.amplitude=.9*this.velocity,this.target=this.offset+this.amplitude),this.target=Math.round(this.target/this.dim)*this.dim,this.noWrap&&(this.target>=this.dim*(this.count-1)?this.target=this.dim*(this.count-1):this.target<0&&(this.target=0)),this.amplitude=this.target-this.offset,this.timestamp=Date.now(),requestAnimationFrame(this._autoScroll),this.dragged&&(t.preventDefault(),t.stopPropagation()),!1};_handleCarouselClick=t=>{if(this.dragged)return t.preventDefault(),t.stopPropagation(),!1;if(!this.options.fullWidth){const e=t.target.closest(".carousel-item");if(!e)return;const i=[...e.parentNode.children].indexOf(e);0!==this._wrap(this.center)-i&&(t.preventDefault(),t.stopPropagation()),i<0?t.clientX-t.target.getBoundingClientRect().left>this.el.clientWidth/2?this.next():this.prev():this._cycleTo(i)}};_handleIndicatorClick=t=>{t.stopPropagation();const e=t.target.closest(".indicator-item");if(e){const t=[...e.parentNode.children].indexOf(e);this._cycleTo(t)}};_handleResize=()=>{this.options.fullWidth?(this.itemWidth=this.el.querySelector(".carousel-item").clientWidth,this.imageHeight=this.el.querySelector(".carousel-item.active").clientHeight,this.dim=2*this.itemWidth+this.options.padding,this.offset=2*this.center*this.itemWidth,this.target=this.offset,this._setCarouselHeight(!0)):this._scroll()};_setCarouselHeight(t=!1){const e=this.el.querySelector(".carousel-item.active")?this.el.querySelector(".carousel-item.active"):this.el.querySelector(".carousel-item"),i=e.querySelector("img");if(i)if(i.complete){const t=i.clientHeight;if(t>0)this.el.style.height=t+"px";else{const t=i.naturalWidth,e=i.naturalHeight,s=this.el.clientWidth/t*e;this.el.style.height=s+"px"}}else i.addEventListener("load",(()=>{this.el.style.height=i.offsetHeight+"px"}));else if(!t){const t=e.clientHeight;this.el.style.height=t+"px"}}_xpos(t){return t.type.startsWith("touch")&&t.targetTouches.length>=1?t.targetTouches[0].clientX:t.clientX}_ypos(t){return t.type.startsWith("touch")&&t.targetTouches.length>=1?t.targetTouches[0].clientY:t.clientY}_wrap(t){return t>=this.count?t%this.count:t<0?this._wrap(this.count+t%this.count):t}_track=()=>{let t,e,i,s;t=Date.now(),e=t-this.timestamp,this.timestamp=t,i=this.offset-this.frame,this.frame=this.offset,s=1e3*i/(1+e),this.velocity=.8*s+.2*this.velocity};_autoScroll=()=>{let t,e;this.amplitude&&(t=Date.now()-this.timestamp,e=this.amplitude*Math.exp(-t/this.options.duration),e>2||e<-2?(this._scroll(this.target-e),requestAnimationFrame(this._autoScroll)):this._scroll(this.target))};_scroll(t=0){let e,i,s,n,o,l,a,h,r,d;this.el.classList.contains("scrolling")||this.el.classList.add("scrolling"),null!=this.scrollingTimeout&&window.clearTimeout(this.scrollingTimeout),this.scrollingTimeout=window.setTimeout((()=>{this.el.classList.remove("scrolling")}),this.options.duration);let c=this.center,p=1/this.options.numVisible;if(this.offset="number"==typeof t?t:this.offset,this.center=Math.floor((this.offset+this.dim/2)/this.dim),s=this.offset-this.center*this.dim,n=s<0?1:-1,o=-n*s*2/this.dim,i=this.count>>1,this.options.fullWidth?(a="translateX(0)",d=1):(a="translateX("+(this.el.clientWidth-this.itemWidth)/2+"px) ",a+="translateY("+(this.el.clientHeight-this.itemHeight)/2+"px)",d=1-p*o),this.showIndicators){const t=this.center%this.count,e=this._indicators.querySelector(".indicator-item.active");if([...e.parentNode.children].indexOf(e)!==t){e.classList.remove("active");const i=t<0?this.count+t:t;this._indicators.querySelectorAll(".indicator-item")[i].classList.add("active")}}if(!this.noWrap||this.center>=0&&this.center0?1-o:1):(h=this.options.dist*(2*e-o*n),r=1-p*(2*e-o*n)),!this.noWrap||this.center-e>=0){l=this.images[this._wrap(this.center-e)];let t=`${a} translateX(${-this.options.shift+(-this.dim*e-s)/2}px) translateZ(${h}px)`;this._updateItemStyle(l,r,-e,t)}}if(!this.noWrap||this.center>=0&&this.center0&&Math.abs(i-this.count)0&&(this.target-=this.dim*i),"function"==typeof e&&(this.oneTimeCallback=e),this.offset!==this.target&&(this.amplitude=this.target-this.offset,this.timestamp=Date.now(),requestAnimationFrame(this._autoScroll))}next(t=1){(void 0===t||isNaN(t))&&(t=1);let e=this.center+t;if(e>=this.count||e<0){if(this.noWrap)return;e=this._wrap(e)}this._cycleTo(e)}prev(t=1){(void 0===t||isNaN(t))&&(t=1);let e=this.center-t;if(e>=this.count||e<0){if(this.noWrap)return;e=this._wrap(e)}this._cycleTo(e)}set(t,e){if((void 0===t||isNaN(t))&&(t=0),t>this.count||t<0){if(this.noWrap)return;t=this._wrap(t)}this._cycleTo(t,e)}}let p={data:[],placeholder:"",secondaryPlaceholder:"",closeIconClass:"material-icons",autocompleteOptions:{},autocompleteOnly:!1,limit:1/0,onChipAdd:null,onChipSelect:null,onChipDelete:null};function u(t){return[...t.parentNode.children].indexOf(t)}class m extends i{chipsData;hasAutocomplete;autocomplete;_input;_label;_chips;static _keydown;_selectedChip;constructor(t,i){super(t,i,m),this.el.M_Chips=this,this.options={...m.defaults,...i},this.el.classList.add("chips","input-field"),this.chipsData=[],this._chips=[],this._setupInput(),this.hasAutocomplete=Object.keys(this.options.autocompleteOptions).length>0,this._input.getAttribute("id")||this._input.setAttribute("id",e.guid()),this.options.data.length&&(this.chipsData=this.options.data,this._renderChips()),this.hasAutocomplete&&this._setupAutocomplete(),this._setPlaceholder(),this._setupLabel(),this._setupEventHandlers()}static get defaults(){return p}static init(t,e={}){return super.init(t,e,m)}static getInstance(t){return t.M_Chips}getData(){return this.chipsData}destroy(){this._removeEventHandlers(),this._chips.forEach((t=>t.remove())),this._chips=[],this.el.M_Chips=void 0}_setupEventHandlers(){this.el.addEventListener("click",this._handleChipClick),document.addEventListener("keydown",m._handleChipsKeydown),document.addEventListener("keyup",m._handleChipsKeyup),this.el.addEventListener("blur",m._handleChipsBlur,!0),this._input.addEventListener("focus",this._handleInputFocus),this._input.addEventListener("blur",this._handleInputBlur),this._input.addEventListener("keydown",this._handleInputKeydown)}_removeEventHandlers(){this.el.removeEventListener("click",this._handleChipClick),document.removeEventListener("keydown",m._handleChipsKeydown),document.removeEventListener("keyup",m._handleChipsKeyup),this.el.removeEventListener("blur",m._handleChipsBlur,!0),this._input.removeEventListener("focus",this._handleInputFocus),this._input.removeEventListener("blur",this._handleInputBlur),this._input.removeEventListener("keydown",this._handleInputKeydown)}_handleChipClick=t=>{const e=t.target.closest(".chip"),i=t.target.classList.contains("close");if(e){const t=[...e.parentNode.children].indexOf(e);i?(this.deleteChip(t),this._input.focus()):this.selectChip(t)}else this._input.focus()};static _handleChipsKeydown(t){m._keydown=!0;const i=t.target.closest(".chips"),s=t.target&&i,n=t.target.tagName;if("INPUT"===n||"TEXTAREA"===n||!s)return;const o=i.M_Chips;if(e.keys.BACKSPACE.includes(t.key)||e.keys.DELETE.includes(t.key)){t.preventDefault();let e=o.chipsData.length;if(o._selectedChip){const t=u(o._selectedChip);o.deleteChip(t),o._selectedChip=null,e=Math.max(t-1,0)}o.chipsData.length?o.selectChip(e):o._input.focus()}else if(e.keys.ARROW_LEFT.includes(t.key)){if(o._selectedChip){const t=u(o._selectedChip)-1;if(t<0)return;o.selectChip(t)}}else if(e.keys.ARROW_RIGHT.includes(t.key)&&o._selectedChip){const t=u(o._selectedChip)+1;t>=o.chipsData.length?o._input.focus():o.selectChip(t)}}static _handleChipsKeyup(t){m._keydown=!1}static _handleChipsBlur(t){if(!m._keydown&&document.hidden){t.target.closest(".chips").M_Chips._selectedChip=null}}_handleInputFocus=()=>{this.el.classList.add("focus")};_handleInputBlur=()=>{this.el.classList.remove("focus")};_handleInputKeydown=t=>{if(m._keydown=!0,e.keys.ENTER.includes(t.key)){if(this.hasAutocomplete&&this.autocomplete&&this.autocomplete.isOpen)return;t.preventDefault(),(!this.hasAutocomplete||this.hasAutocomplete&&!this.options.autocompleteOnly)&&this.addChip({id:this._input.value}),this._input.value=""}else(e.keys.BACKSPACE.includes(t.key)||e.keys.ARROW_LEFT.includes(t.key))&&""===this._input.value&&this.chipsData.length&&(t.preventDefault(),this.selectChip(this.chipsData.length-1))};_renderChip(t){if(!t.id)return;const e=document.createElement("div");e.classList.add("chip"),e.innerText=t.text||t.id,e.setAttribute("tabindex","0");const i=document.createElement("i");if(i.classList.add(this.options.closeIconClass,"close"),i.innerText="close",t.image){const i=document.createElement("img");i.setAttribute("src",t.image),e.insertBefore(i,e.firstChild)}return e.appendChild(i),e}_renderChips(){this._chips=[];for(let t=0;t{t.length>0&&this.addChip({id:t[0].id,text:t[0].text,image:t[0].image}),this._input.value="",this._input.focus()},this.autocomplete=l.init(this._input,this.options.autocompleteOptions)}_setupInput(){this._input=this.el.querySelector("input"),this._input||(this._input=document.createElement("input"),this.el.append(this._input)),this._input.classList.add("input")}_setupLabel(){this._label=this.el.querySelector("label"),this._label&&this._label.setAttribute("for",this._input.getAttribute("id"))}_setPlaceholder(){void 0!==this.chipsData&&!this.chipsData.length&&this.options.placeholder?this._input.placeholder=this.options.placeholder:(void 0===this.chipsData||this.chipsData.length)&&this.options.secondaryPlaceholder&&(this._input.placeholder=this.options.secondaryPlaceholder)}_isValidAndNotExist(t){const e=!!t.id,i=!this.chipsData.some((e=>e.id==t.id));return e&&i}addChip(t){if(!this._isValidAndNotExist(t)||this.chipsData.length>=this.options.limit)return;const e=this._renderChip(t);this._chips.push(e),this.chipsData.push(t),this._input.before(e),this._setPlaceholder(),"function"==typeof this.options.onChipAdd&&this.options.onChipAdd(this.el,e)}deleteChip(t){const e=this._chips[t];this._chips[t].remove(),this._chips.splice(t,1),this.chipsData.splice(t,1),this._setPlaceholder(),"function"==typeof this.options.onChipDelete&&this.options.onChipDelete(this.el,e)}selectChip(t){const e=this._chips[t];this._selectedChip=e,e.focus(),"function"==typeof this.options.onChipSelect&&this.options.onChipSelect(this.el,e)}static Init(){"undefined"!=typeof document&&document.addEventListener("DOMContentLoaded",(()=>{document.body.addEventListener("click",(t=>{if(t.target.closest(".chip .close")){const e=t.target.closest(".chips");if(e&&null==e.M_Chips)return;t.target.closest(".chip").remove()}}))}))}static{m._keydown=!1}}const _={accordion:!0,onOpenStart:null,onOpenEnd:null,onCloseStart:null,onCloseEnd:null,inDuration:300,outDuration:300};class v extends i{_headers;constructor(t,e){super(t,e,v),this.el.M_Collapsible=this,this.options={...v.defaults,...e},this._headers=Array.from(this.el.querySelectorAll("li > .collapsible-header")),this._headers.forEach((t=>t.tabIndex=0)),this._setupEventHandlers();const i=Array.from(this.el.querySelectorAll("li.active > .collapsible-body"));this.options.accordion?i.length>0&&this._setExpanded(i[0]):i.forEach((t=>this._setExpanded(t)))}static get defaults(){return _}static init(t,e={}){return super.init(t,e,v)}static getInstance(t){return t.M_Collapsible}destroy(){this._removeEventHandlers(),this.el.M_Collapsible=void 0}_setupEventHandlers(){this.el.addEventListener("click",this._handleCollapsibleClick),this._headers.forEach((t=>t.addEventListener("keydown",this._handleCollapsibleKeydown)))}_removeEventHandlers(){this.el.removeEventListener("click",this._handleCollapsibleClick),this._headers.forEach((t=>t.removeEventListener("keydown",this._handleCollapsibleKeydown)))}_handleCollapsibleClick=t=>{const e=t.target.closest(".collapsible-header");if(t.target&&e){if(e.closest(".collapsible")!==this.el)return;const t=e.closest("li"),i=t.classList.contains("active"),s=[...t.parentNode.children].indexOf(t);i?this.close(s):this.open(s)}};_handleCollapsibleKeydown=t=>{e.keys.ENTER.includes(t.key)&&this._handleCollapsibleClick(t)};_setExpanded(t){t.style.maxHeight=t.scrollHeight+"px"}_animateIn(t){const e=this.el.children[t];if(!e)return;const i=e.querySelector(".collapsible-body"),s=this.options.inDuration;i.style.transition=`max-height ${s}ms ease-out`,this._setExpanded(i),setTimeout((()=>{"function"==typeof this.options.onOpenEnd&&this.options.onOpenEnd.call(this,e)}),s)}_animateOut(t){const e=this.el.children[t];if(!e)return;const i=e.querySelector(".collapsible-body"),s=this.options.outDuration;i.style.transition=`max-height ${s}ms ease-out`,i.style.maxHeight="0",setTimeout((()=>{"function"==typeof this.options.onCloseEnd&&this.options.onCloseEnd.call(this,e)}),s)}open=t=>{const e=Array.from(this.el.children).filter((t=>"LI"===t.tagName)),i=e[t];if(i&&!i.classList.contains("active")){if("function"==typeof this.options.onOpenStart&&this.options.onOpenStart.call(this,i),this.options.accordion){const t=e.filter((t=>t.classList.contains("active")));t.forEach((t=>{const i=e.indexOf(t);this.close(i)}))}i.classList.add("active"),this._animateIn(t)}};close=t=>{const e=Array.from(this.el.children).filter((t=>"LI"===t.tagName))[t];e&&e.classList.contains("active")&&("function"==typeof this.options.onCloseStart&&this.options.onCloseStart.call(this,e),e.classList.remove("active"),this._animateOut(t))}}const g={opacity:.5,inDuration:250,outDuration:250,onOpenStart:null,onOpenEnd:null,onCloseStart:null,onCloseEnd:null,preventScrolling:!0,dismissible:!0,startingTop:"4%",endingTop:"10%"};class y extends i{static _modalsOpen;static _count;id;isOpen;_openingTrigger;_overlay;_nthModalOpened;constructor(t,e){super(t,e,y),this.el.M_Modal=this,this.options={...y.defaults,...e},this.isOpen=!1,this.id=this.el.id,this._openingTrigger=void 0,this._overlay=document.createElement("div"),this._overlay.classList.add("modal-overlay"),this.el.tabIndex=0,this._nthModalOpened=0,y._count++,this._setupEventHandlers()}static get defaults(){return g}static init(t,e={}){return super.init(t,e,y)}static getInstance(t){return t.M_Modal}destroy(){y._count--,this._removeEventHandlers(),this.el.removeAttribute("style"),this._overlay.remove(),this.el.M_Modal=void 0}_setupEventHandlers(){1===y._count&&document.body.addEventListener("click",this._handleTriggerClick),this._overlay.addEventListener("click",this._handleOverlayClick),this.el.addEventListener("click",this._handleModalCloseClick)}_removeEventHandlers(){0===y._count&&document.body.removeEventListener("click",this._handleTriggerClick),this._overlay.removeEventListener("click",this._handleOverlayClick),this.el.removeEventListener("click",this._handleModalCloseClick)}_handleTriggerClick=t=>{const i=t.target.closest(".modal-trigger");if(!i)return;const s=e.getIdFromTrigger(i),n=document.getElementById(s).M_Modal;n&&n.open(i),t.preventDefault()};_handleOverlayClick=()=>{this.options.dismissible&&this.close()};_handleModalCloseClick=t=>{t.target.closest(".modal-close")&&this.close()};_handleKeydown=t=>{e.keys.ESC.includes(t.key)&&this.options.dismissible&&this.close()};_handleFocus=t=>{this.el.contains(t.target)||this._nthModalOpened!==y._modalsOpen||this.el.focus()};_animateIn(){this._overlay.style.display="block",this._overlay.style.opacity="0",this.el.style.display="block",this.el.style.opacity="0";const t=this.options.inDuration,e=this.el.classList.contains("bottom-sheet");e||(this.el.style.top=this.options.startingTop,this.el.style.transform="scaleX(0.9) scaleY(0.9)"),this._overlay.style.transition=`opacity ${t}ms ease-out`,this.el.style.transition=`\n top ${t}ms ease-out,\n bottom ${t}ms ease-out,\n opacity ${t}ms ease-out,\n transform ${t}ms ease-out\n `,setTimeout((()=>{this._overlay.style.opacity=this.options.opacity.toString(),this.el.style.opacity="1",e?this.el.style.bottom="0":(this.el.style.top=this.options.endingTop,this.el.style.transform="scaleX(1) scaleY(1)"),setTimeout((()=>{"function"==typeof this.options.onOpenEnd&&this.options.onOpenEnd.call(this,this.el,this._openingTrigger)}),t)}),1)}_animateOut(){const t=this.options.outDuration,e=this.el.classList.contains("bottom-sheet");e||(this.el.style.top=this.options.endingTop),this._overlay.style.transition=`opacity ${t}ms ease-out`,this.el.style.transition=`\n top ${t}ms ease-out,\n bottom ${t}ms ease-out,\n opacity ${t}ms ease-out,\n transform ${t}ms ease-out\n `,setTimeout((()=>{this._overlay.style.opacity="0",this.el.style.opacity="0",e?this.el.style.bottom="-100%":(this.el.style.top=this.options.startingTop,this.el.style.transform="scaleX(0.9) scaleY(0.9)"),setTimeout((()=>{this.el.style.display="none",this._overlay.remove(),"function"==typeof this.options.onCloseEnd&&this.options.onCloseEnd.call(this,this.el)}),t)}),1)}open=t=>{if(!this.isOpen){if(this.isOpen=!0,y._modalsOpen++,this._nthModalOpened=y._modalsOpen,this._overlay.style.zIndex=(1e3+2*y._modalsOpen).toString(),this.el.style.zIndex=(1e3+2*y._modalsOpen+1).toString(),this._openingTrigger=t||void 0,"function"==typeof this.options.onOpenStart&&this.options.onOpenStart.call(this,this.el,this._openingTrigger),this.options.preventScrolling){if(document.documentElement.scrollHeight>document.documentElement.clientHeight){const t=document.documentElement.scrollTop;document.documentElement.style.top="-"+t+"px",document.documentElement.classList.add("noscroll")}}return this.el.classList.add("open"),this.el.insertAdjacentElement("afterend",this._overlay),this.options.dismissible&&(document.addEventListener("keydown",this._handleKeydown),document.addEventListener("focus",this._handleFocus,!0)),this._animateIn(),this.el.focus(),this}};close=()=>{if(this.isOpen){if(this.isOpen=!1,y._modalsOpen--,this._nthModalOpened=0,"function"==typeof this.options.onCloseStart&&this.options.onCloseStart.call(this,this.el),this.el.classList.remove("open"),0===y._modalsOpen){const t=-parseInt(document.documentElement.style.top);document.documentElement.style.removeProperty("top"),document.documentElement.classList.remove("noscroll"),document.documentElement.scrollTop=t}return this.options.dismissible&&(document.removeEventListener("keydown",this._handleKeydown),document.removeEventListener("focus",this._handleFocus,!0)),this._animateOut(),this}};static create(t=""){return`\n
\n

${t}

\n

A bunch of text

\n
\n
\n Agree\n
\n `}static{y._modalsOpen=0,y._count=0}}let f={classes:"",dropdownOptions:{}};class w extends i{isMultiple;labelEl;dropdownOptions;input;dropdown;wrapper;selectOptions;_values;constructor(t,e){super(t,e,w),this.el.classList.contains("browser-default")||(this.el.M_FormSelect=this,this.options={...w.defaults,...e},this.isMultiple=this.el.multiple,this.el.tabIndex=-1,this._values=[],this._setupDropdown(),this._setupEventHandlers())}static get defaults(){return f}static init(t,e={}){return super.init(t,e,w)}static getInstance(t){return t.M_FormSelect}destroy(){this._removeEventHandlers(),this._removeDropdown(),this.el.M_FormSelect=void 0}_setupEventHandlers(){this.dropdownOptions.querySelectorAll("li:not(.optgroup)").forEach((t=>{t.addEventListener("click",this._handleOptionClick),t.addEventListener("keydown",(t=>{" "!==t.key&&"Enter"!==t.key||this._handleOptionClick(t)}))})),this.el.addEventListener("change",this._handleSelectChange),this.input.addEventListener("click",this._handleInputClick)}_removeEventHandlers(){this.dropdownOptions.querySelectorAll("li:not(.optgroup)").forEach((t=>{t.removeEventListener("click",this._handleOptionClick)})),this.el.removeEventListener("change",this._handleSelectChange),this.input.removeEventListener("click",this._handleInputClick)}_handleSelectChange=()=>{this._setValueToInput()};_handleOptionClick=t=>{t.preventDefault();const e=t.target.closest("li");this._selectOptionElement(e),t.stopPropagation()};_arraysEqual(t,e){if(t===e)return!0;if(null==t||null==e)return!1;if(t.length!==e.length)return!1;for(let i=0;ie.optionEl===t)),i=this.getSelectedValues();this.isMultiple?this._toggleEntryFromArray(e):(this._deselectAll(),this._selectValue(e)),this._setValueToInput();const s=this.getSelectedValues();!this._arraysEqual(i,s)&&this.el.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0}))}this.isMultiple||this.dropdown.close()}_handleInputClick=()=>{this.dropdown&&this.dropdown.isOpen&&(this._setValueToInput(),this._setSelectedStates())};_setupDropdown(){this.labelEl=document.querySelector('[for="'+this.el.id+'"]'),this.labelEl&&(this.labelEl.style.display="none"),this.wrapper=document.createElement("div"),this.wrapper.classList.add("select-wrapper","input-field"),this.options.classes.length>0&&this.wrapper.classList.add(...this.options.classes.split(" ")),this.el.before(this.wrapper);const t=document.createElement("div");t.classList.add("hide-select"),this.wrapper.append(t),t.appendChild(this.el),this.el.disabled&&this.wrapper.classList.add("disabled"),this.selectOptions=Array.from(this.el.children).filter((t=>["OPTION","OPTGROUP"].includes(t.tagName))),this.dropdownOptions=document.createElement("ul"),this.dropdownOptions.id=`select-options-${e.guid()}`,this.dropdownOptions.classList.add("dropdown-content","select-dropdown"),this.dropdownOptions.setAttribute("role","listbox"),this.dropdownOptions.ariaMultiSelectable=this.isMultiple.toString(),this.isMultiple&&this.dropdownOptions.classList.add("multiple-select-dropdown"),this.selectOptions.length>0&&this.selectOptions.forEach((t=>{if("OPTION"===t.tagName){const e=this._createAndAppendOptionWithIcon(t,this.isMultiple?"multiple":void 0);this._addOptionToValues(t,e)}else if("OPTGROUP"===t.tagName){const i="opt-group-"+e.guid(),s=document.createElement("li");s.classList.add("optgroup"),s.tabIndex=-1,s.setAttribute("role","group"),s.setAttribute("aria-labelledby",i),s.innerHTML=`${t.getAttribute("label")}`,this.dropdownOptions.append(s);const n=[];Array.from(t.children).filter((t=>"OPTION"===t.tagName)).forEach((t=>{const i=this._createAndAppendOptionWithIcon(t,"optgroup-option"),s="opt-child-"+e.guid();i.id=s,n.push(s),this._addOptionToValues(t,i)})),s.setAttribute("aria-owns",n.join(" "))}})),this.wrapper.append(this.dropdownOptions),this.input=document.createElement("input"),this.input.id="m_select-input-"+e.guid(),this.input.classList.add("select-dropdown","dropdown-trigger"),this.input.type="text",this.input.readOnly=!0,this.input.setAttribute("data-target",this.dropdownOptions.id),this.input.ariaReadOnly="true",this.input.ariaRequired=this.el.hasAttribute("required").toString(),this.el.disabled&&(this.input.disabled=!0);const i=this.el.attributes;for(let t=0;t{const s=this.dropdownOptions.querySelector(".selected");if(s&&(e.keyDown=!0,this.dropdown.focusedIndex=[...s.parentNode.children].indexOf(s),this.dropdown._focusFocusedItem(),e.keyDown=!1,this.dropdown.isScrollable)){let t=s.getBoundingClientRect().top-this.dropdownOptions.getBoundingClientRect().top;t-=this.dropdownOptions.clientHeight/2,this.dropdownOptions.scrollTop=t}this.input.ariaExpanded="true",i&&"function"==typeof i&&i.call(this.dropdown,this.el)},t.onCloseEnd=t=>{this.input.ariaExpanded="false",s&&"function"==typeof s&&s.call(this.dropdown,this.el)},t.closeOnClick=!1,this.dropdown=n.init(this.input,t)}if(this._setSelectedStates(),this.labelEl){const t=document.createElement("label");t.htmlFor=this.input.id,t.innerText=this.labelEl.innerText,this.input.after(t)}}_addOptionToValues(t,e){this._values.push({el:t,optionEl:e})}_removeDropdown(){this.wrapper.querySelector(".caret").remove(),this.input.remove(),this.dropdownOptions.remove(),this.wrapper.before(this.el),this.wrapper.remove()}_createAndAppendOptionWithIcon(t,e){const i=document.createElement("li");i.setAttribute("role","option"),t.disabled&&(i.classList.add("disabled"),i.ariaDisabled="true"),"optgroup-option"===e&&i.classList.add(e);const s=document.createElement("span");s.innerHTML=t.innerHTML,this.isMultiple&&!t.disabled&&(s.innerHTML=``),i.appendChild(s);const n=t.getAttribute("data-icon"),o=t.getAttribute("class")?.split(" ");if(n){const t=document.createElement("img");o&&t.classList.add(...o),t.src=n,t.ariaHidden="true",i.prepend(t)}return this.dropdownOptions.append(i),i}_selectValue(t){t.el.selected=!0,t.optionEl.classList.add("selected"),t.optionEl.ariaSelected="true";const e=t.optionEl.querySelector('input[type="checkbox"]');e&&(e.checked=!0)}_deselectValue(t){t.el.selected=!1,t.optionEl.classList.remove("selected"),t.optionEl.ariaSelected="false";const e=t.optionEl.querySelector('input[type="checkbox"]');e&&(e.checked=!1)}_deselectAll(){this._values.forEach((t=>this._deselectValue(t)))}_isValueSelected(t){return this.getSelectedValues().some((e=>e===t.el.value))}_toggleEntryFromArray(t){this._isValueSelected(t)?this._deselectValue(t):this._selectValue(t)}_getSelectedOptions(){return Array.prototype.filter.call(this.el.selectedOptions,(t=>t))}_setValueToInput(){const t=this._getSelectedOptions(),e=this._values.filter((e=>t.indexOf(e.el)>=0)).filter((t=>!t.el.disabled)).map((t=>t.optionEl.querySelector("span").innerText.trim()));if(0===e.length){const t=this.el.querySelector("option:disabled");if(t&&""===t.value)return void(this.input.value=t.innerText)}this.input.value=e.join(", ")}_setSelectedStates(){this._values.forEach((t=>{const e=t.el.selected,i=t.optionEl.querySelector('input[type="checkbox"]');i&&(i.checked=e),e?this._activateOption(this.dropdownOptions,t.optionEl):(t.optionEl.classList.remove("selected"),t.optionEl.ariaSelected="false")}))}_activateOption(t,e){e&&(this.isMultiple||t.querySelectorAll("li.selected").forEach((t=>t.classList.remove("selected"))),e.classList.add("selected"),e.ariaSelected="true")}getSelectedValues(){return this._getSelectedOptions().map((t=>t.value))}}let E={autoClose:!1,format:"mmm dd, yyyy",parse:null,defaultDate:null,setDefaultDate:!1,disableWeekends:!1,disableDayFn:null,firstDay:0,minDate:null,maxDate:null,yearRange:10,minYear:0,maxYear:9999,minMonth:void 0,maxMonth:void 0,startRange:null,endRange:null,isRTL:!1,yearRangeReverse:!1,showMonthAfterYear:!1,showDaysInNextAndPreviousMonths:!1,container:null,showClearBtn:!1,i18n:{cancel:"Cancel",clear:"Clear",done:"Ok",previousMonth:"‹",nextMonth:"›",months:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],weekdays:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],weekdaysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],weekdaysAbbrev:["S","M","T","W","T","F","S"]},events:[],onSelect:null,onOpen:null,onClose:null,onDraw:null};class b extends i{id;isOpen;modal;calendarEl;clearBtn;doneBtn;cancelBtn;modalEl;yearTextEl;dateTextEl;date;formats;calendars;_y;_m;static _template;constructor(t,i){super(t,i,b),this.el.M_Datepicker=this,this.options={...b.defaults,...i},i&&i.hasOwnProperty("i18n")&&"object"==typeof i.i18n&&(this.options.i18n={...b.defaults.i18n,...i.i18n}),this.options.minDate&&this.options.minDate.setHours(0,0,0,0),this.options.maxDate&&this.options.maxDate.setHours(0,0,0,0),this.id=e.guid(),this._setupVariables(),this._insertHTMLIntoDOM(),this._setupModal(),this._setupEventHandlers(),this.options.defaultDate||(this.options.defaultDate=new Date(Date.parse(this.el.value)));let s=this.options.defaultDate;b._isDate(s)?this.options.setDefaultDate?(this.setDate(s,!0),this.setInputValue()):this.gotoDate(s):this.gotoDate(new Date),this.isOpen=!1}static get defaults(){return E}static init(t,e={}){return super.init(t,e,b)}static _isDate(t){return/Date/.test(Object.prototype.toString.call(t))&&!isNaN(t.getTime())}static _isWeekend(t){let e=t.getDay();return 0===e||6===e}static _setToStartOfDay(t){b._isDate(t)&&t.setHours(0,0,0,0)}static _getDaysInMonth(t,e){return[31,b._isLeapYear(t)?29:28,31,30,31,30,31,31,30,31,30,31][e]}static _isLeapYear(t){return t%4==0&&t%100!=0||t%400==0}static _compareDates(t,e){return t.getTime()===e.getTime()}static getInstance(t){return t.M_Datepicker}destroy(){this._removeEventHandlers(),this.modal.destroy(),this.modalEl.remove(),this.destroySelects(),this.el.M_Datepicker=void 0}destroySelects(){let t=this.calendarEl.querySelector(".orig-select-year");t&&w.getInstance(t).destroy();let e=this.calendarEl.querySelector(".orig-select-month");e&&w.getInstance(e).destroy()}_insertHTMLIntoDOM(){if(this.options.showClearBtn&&(this.clearBtn.style.visibility="",this.clearBtn.innerText=this.options.i18n.clear),this.doneBtn.innerText=this.options.i18n.done,this.cancelBtn.innerText=this.options.i18n.cancel,this.options.container){const t=this.options.container;this.options.container=t instanceof HTMLElement?t:document.querySelector(t),this.options.container.append(this.modalEl)}else this.el.parentElement.appendChild(this.modalEl)}_setupModal(){this.modalEl.id="modal-"+this.id,this.modal=y.init(this.modalEl,{onCloseEnd:()=>{this.isOpen=!1}})}toString(t=null){if("function"==typeof(t=t||this.options.format))return t(this.date);if(!b._isDate(this.date))return"";return t.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g).map((t=>this.formats[t]?this.formats[t]():t)).join("")}setDate(t=null,e=!1){if(!t)return this.date=null,this._renderDateDisplay(),this.draw();if("string"==typeof t&&(t=new Date(Date.parse(t))),!b._isDate(t))return;let i=this.options.minDate,s=this.options.maxDate;b._isDate(i)&&ts&&(t=s),this.date=new Date(t.getTime()),this._renderDateDisplay(),b._setToStartOfDay(this.date),this.gotoDate(this.date),e||"function"!=typeof this.options.onSelect||this.options.onSelect.call(this,this.date)}setInputValue(){this.el.value=this.toString(),this.el.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0,detail:{firedBy:this}}))}_renderDateDisplay(){let t=b._isDate(this.date)?this.date:new Date,e=this.options.i18n,i=e.weekdaysShort[t.getDay()],s=e.monthsShort[t.getMonth()],n=t.getDate();this.yearTextEl.innerHTML=t.getFullYear().toString(),this.dateTextEl.innerHTML=`${i}, ${s} ${n}`}gotoDate(t){let e=!0;if(b._isDate(t)){if(this.calendars){let i=new Date(this.calendars[0].year,this.calendars[0].month,1),s=new Date(this.calendars[this.calendars.length-1].year,this.calendars[this.calendars.length-1].month,1),n=t.getTime();s.setMonth(s.getMonth()+1),s.setDate(s.getDate()-1),e=n11&&(t.year+=Math.floor(Math.abs(t.month)/12),t.month-=12),t}nextMonth(){this.calendars[0].month++,this.adjustCalendars()}prevMonth(){this.calendars[0].month--,this.adjustCalendars()}render(t,e,i){let s=this.options,n=new Date,o=b._getDaysInMonth(t,e),l=new Date(t,e,1).getDay(),a=[],h=[];b._setToStartOfDay(n),s.firstDay>0&&(l-=s.firstDay,l<0&&(l+=7));let r=0===e?11:e-1,d=11===e?0:e+1,c=0===e?t-1:t,p=11===e?t+1:t,u=b._getDaysInMonth(c,r),m=o+l,_=m;for(;_>7;)_-=7;m+=7-_;let v=!1;for(let i=0,_=0;i=o+l,E=i-l+1,L=e,C=t,k=s.startRange&&b._compareDates(s.startRange,m),T=s.endRange&&b._compareDates(s.endRange,m),x=s.startRange&&s.endRange&&s.startRanges.maxDate||s.disableWeekends&&b._isWeekend(m)||s.disableDayFn&&s.disableDayFn(m),isEmpty:w,isStartRange:k,isEndRange:T,isInRange:x,showDaysInNextAndPreviousMonths:s.showDaysInNextAndPreviousMonths};h.push(this.renderDay(S)),7==++_&&(a.push(this.renderRow(h,s.isRTL,v)),h=[],_=0,v=!1)}return this.renderTable(s,a,i)}renderDay(t){let e=[],i="false";if(t.isEmpty){if(!t.showDaysInNextAndPreviousMonths)return'';e.push("is-outside-current-month"),e.push("is-selection-disabled")}return t.isDisabled&&e.push("is-disabled"),t.isToday&&e.push("is-today"),t.isSelected&&(e.push("is-selected"),i="true"),t.hasEvent&&e.push("has-event"),t.isInRange&&e.push("is-inrange"),t.isStartRange&&e.push("is-startrange"),t.isEndRange&&e.push("is-endrange"),``}renderRow(t,e,i){return''+(e?t.reverse():t).join("")+""}renderTable(t,e,i){return'
'+this.renderHead(t)+this.renderBody(e)+"
"}renderHead(t){let e,i=[];for(e=0;e<7;e++)i.push(`${this.renderDayName(t,e,!0)}`);return""+(t.isRTL?i.reverse():i).join("")+""}renderBody(t){return""+t.join("")+""}renderTitle(t,e,i,s,n,o){let l,a,h,r,d,c=this.options,p=i===c.minYear,u=i===c.maxYear,m='
',_=!0,v=!0;for(h=[],l=0;l<12;l++)h.push('");for(r='",Array.isArray(c.yearRange)?(l=c.yearRange[0],a=c.yearRange[1]+1):(l=i-c.yearRange,a=1+i+c.yearRange),h=[];l=c.minYear&&h.push(``);c.yearRangeReverse&&h.reverse(),d=``;m+=``,m+='
',c.showMonthAfterYear?m+=d+r:m+=r+d,m+="
",p&&(0===s||c.minMonth>=s)&&(_=!1),u&&(11===s||c.maxMonth<=s)&&(v=!1);return m+=``,m+"
"}draw(t=!1){if(!this.isOpen&&!t)return;let e,i=this.options,s=i.minYear,n=i.maxYear,o=i.minMonth,l=i.maxMonth,a="";this._y<=s&&(this._y=s,!isNaN(o)&&this._m=n&&(this._y=n,!isNaN(l)&&this._m>l&&(this._m=l)),e="datepicker-title-"+Math.random().toString(36).replace(/[^a-z]+/g,"").substr(0,2);for(let t=0;t<1;t++)this._renderDateDisplay(),a+=this.renderTitle(this,t,this.calendars[t].year,this.calendars[t].month,this.calendars[0].year,e)+this.render(this.calendars[t].year,this.calendars[t].month,e);this.destroySelects(),this.calendarEl.innerHTML=a;let h=this.calendarEl.querySelector(".orig-select-year"),r=this.calendarEl.querySelector(".orig-select-month");w.init(h,{classes:"select-year",dropdownOptions:{container:document.body,constrainWidth:!1}}),w.init(r,{classes:"select-month",dropdownOptions:{container:document.body,constrainWidth:!1}}),h.addEventListener("change",this._handleYearChange),r.addEventListener("change",this._handleMonthChange),"function"==typeof this.options.onDraw&&this.options.onDraw.call(this)}_setupEventHandlers(){this.el.addEventListener("click",this._handleInputClick),this.el.addEventListener("keydown",this._handleInputKeydown),this.el.addEventListener("change",this._handleInputChange),this.calendarEl.addEventListener("click",this._handleCalendarClick),this.doneBtn.addEventListener("click",this._finishSelection),this.cancelBtn.addEventListener("click",this.close),this.options.showClearBtn&&this.clearBtn.addEventListener("click",this._handleClearClick)}_setupVariables(){const t=document.createElement("template");t.innerHTML=b._template.trim(),this.modalEl=t.content.firstChild,this.calendarEl=this.modalEl.querySelector(".datepicker-calendar"),this.yearTextEl=this.modalEl.querySelector(".year-text"),this.dateTextEl=this.modalEl.querySelector(".date-text"),this.options.showClearBtn&&(this.clearBtn=this.modalEl.querySelector(".datepicker-clear")),this.doneBtn=this.modalEl.querySelector(".datepicker-done"),this.cancelBtn=this.modalEl.querySelector(".datepicker-cancel"),this.formats={d:()=>this.date.getDate(),dd:()=>{let t=this.date.getDate();return(t<10?"0":"")+t},ddd:()=>this.options.i18n.weekdaysShort[this.date.getDay()],dddd:()=>this.options.i18n.weekdays[this.date.getDay()],m:()=>this.date.getMonth()+1,mm:()=>{let t=this.date.getMonth()+1;return(t<10?"0":"")+t},mmm:()=>this.options.i18n.monthsShort[this.date.getMonth()],mmmm:()=>this.options.i18n.months[this.date.getMonth()],yy:()=>(""+this.date.getFullYear()).slice(2),yyyy:()=>this.date.getFullYear()}}_removeEventHandlers(){this.el.removeEventListener("click",this._handleInputClick),this.el.removeEventListener("keydown",this._handleInputKeydown),this.el.removeEventListener("change",this._handleInputChange),this.calendarEl.removeEventListener("click",this._handleCalendarClick)}_handleInputClick=()=>{this.open()};_handleInputKeydown=t=>{e.keys.ENTER.includes(t.key)&&(t.preventDefault(),this.open())};_handleCalendarClick=t=>{if(!this.isOpen)return;const e=t.target;e.classList.contains("is-disabled")||(!e.classList.contains("datepicker-day-button")||e.classList.contains("is-empty")||e.parentElement.classList.contains("is-disabled")?e.closest(".month-prev")?this.prevMonth():e.closest(".month-next")&&this.nextMonth():(this.setDate(new Date(t.target.getAttribute("data-year"),t.target.getAttribute("data-month"),t.target.getAttribute("data-day"))),this.options.autoClose&&this._finishSelection()))};_handleClearClick=()=>{this.date=null,this.setInputValue(),this.close()};_handleMonthChange=t=>{this.gotoMonth(t.target.value)};_handleYearChange=t=>{this.gotoYear(t.target.value)};gotoMonth(t){isNaN(t)||(this.calendars[0].month=parseInt(t,10),this.adjustCalendars())}gotoYear(t){isNaN(t)||(this.calendars[0].year=parseInt(t,10),this.adjustCalendars())}_handleInputChange=t=>{let e;t.detail?.firedBy!==this&&(e=this.options.parse?this.options.parse(this.el.value,"function"==typeof this.options.format?this.options.format(new Date(this.el.value)):this.options.format):new Date(Date.parse(this.el.value)),b._isDate(e)&&this.setDate(e))};renderDayName(t,e,i=!1){for(e+=t.firstDay;e>=7;)e-=7;return i?t.i18n.weekdaysAbbrev[e]:t.i18n.weekdays[e]}_finishSelection=()=>{this.setInputValue(),this.close()};open=()=>{if(!this.isOpen)return this.isOpen=!0,"function"==typeof this.options.onOpen&&this.options.onOpen.call(this),this.draw(),this.modal.open(void 0),this};close=()=>{if(this.isOpen)return this.isOpen=!1,"function"==typeof this.options.onClose&&this.options.onClose.call(this),this.modal.close(),this};static{b._template='\n
\n
\n
\n \n \n
\n
\n
\n
\n \n
\n \n \n
\n
\n
\n
\n
'}}class L{static textareaAutoResize(t){if(!t)return void console.error("No textarea element found");let e=document.querySelector(".hiddendiv");e||(e=document.createElement("div"),e.classList.add("hiddendiv","common"),document.body.append(e));const i=getComputedStyle(t),s=i.fontFamily,n=i.fontSize,o=i.lineHeight,l=i.paddingTop,a=i.paddingRight,h=i.paddingBottom,r=i.paddingLeft;n&&(e.style.fontSize=n),s&&(e.style.fontFamily=s),o&&(e.style.lineHeight=o),l&&(e.style.paddingTop=l),a&&(e.style.paddingRight=a),h&&(e.style.paddingBottom=h),r&&(e.style.paddingLeft=r),t.hasAttribute("original-height")||t.setAttribute("original-height",t.getBoundingClientRect().height.toString()),"off"===t.getAttribute("wrap")&&(e.style.overflowWrap="normal",e.style.whiteSpace="pre"),e.innerText=t.value+"\n";const d=e.innerHTML.replace(/\n/g,"
");e.innerHTML=d,t.offsetWidth>0&&t.offsetHeight>0?e.style.width=t.getBoundingClientRect().width+"px":e.style.width=window.innerWidth/2+"px";const c=parseInt(t.getAttribute("original-height")),p=parseInt(t.getAttribute("previous-length"));isNaN(c)||(c<=e.clientHeight?t.style.height=e.clientHeight+"px":t.value.length{document.addEventListener("keyup",(t=>{const i=t.target;i instanceof HTMLInputElement&&["radio","checkbox"].includes(i.type)&&e.keys.TAB.includes(t.key)&&(i.classList.add("tabbed"),i.addEventListener("blur",(t=>i.classList.remove("tabbed")),{once:!0}))})),document.querySelectorAll(".materialize-textarea").forEach((t=>{L.InitTextarea(t)})),document.querySelectorAll('.file-field input[type="file"]').forEach((t=>{L.InitFileInputPath(t)}))}))}static InitTextarea(t){t.setAttribute("original-height",t.getBoundingClientRect().height.toString()),t.setAttribute("previous-length",t.value.length.toString()),L.textareaAutoResize(t),t.addEventListener("keyup",(e=>L.textareaAutoResize(t))),t.addEventListener("keydown",(e=>L.textareaAutoResize(t)))}static InitFileInputPath(t){t.addEventListener("change",(e=>{const i=t.closest(".file-field").querySelector("input.file-path"),s=t.files,n=[];for(let t=0;t{!1===this.doneAnimating||this.overlayActive&&this.doneAnimating?this.close():this.open()};_handleWindowScroll=()=>{this.overlayActive&&this.close()};_handleWindowResize=()=>{this.overlayActive&&this.close()};_handleWindowEscape=t=>{e.keys.ESC.includes(t.key)&&this.doneAnimating&&this.overlayActive&&this.close()};_makeAncestorsOverflowVisible(){this._changedAncestorList=[];let t=this.placeholder.parentNode;for(;null!==t&&t!==document;){const e=t;"visible"!==e.style.overflow&&(e.style.overflow="visible",this._changedAncestorList.push(e)),t=t.parentNode}}_offset(t){const e=t.getBoundingClientRect(),i=document.documentElement;return{top:e.top+window.pageYOffset-i.clientTop,left:e.left+window.pageXOffset-i.clientLeft}}_updateVars(){this.windowWidth=window.innerWidth,this.windowHeight=window.innerHeight,this.caption=this.el.getAttribute("data-caption")||""}_animateImageIn(){this.el.style.maxHeight=this.newHeight.toString()+"px",this.el.style.maxWidth=this.newWidth.toString()+"px";const t=this.options.inDuration;this.el.style.transition="none",this.el.style.height=this.originalHeight+"px",this.el.style.width=this.originalWidth+"px",setTimeout((()=>{this.el.style.transition=`height ${t}ms ease,\n width ${t}ms ease,\n left ${t}ms ease,\n top ${t}ms ease\n `,this.el.style.height=this.newHeight+"px",this.el.style.width=this.newWidth+"px",this.el.style.left=e.getDocumentScrollLeft()+this.windowWidth/2-this._offset(this.placeholder).left-this.newWidth/2+"px",this.el.style.top=e.getDocumentScrollTop()+this.windowHeight/2-this._offset(this.placeholder).top-this.newHeight/2+"px"}),1),setTimeout((()=>{this.doneAnimating=!0,"function"==typeof this.options.onOpenEnd&&this.options.onOpenEnd.call(this,this.el)}),t)}_animateImageOut(){const t=this.options.outDuration;this.el.style.transition=`height ${t}ms ease,\n width ${t}ms ease,\n left ${t}ms ease,\n top ${t}ms ease\n `,this.el.style.height=this.originalWidth+"px",this.el.style.width=this.originalWidth+"px",this.el.style.left="0",this.el.style.top="0",setTimeout((()=>{this.placeholder.style.height="",this.placeholder.style.width="",this.placeholder.style.position="",this.placeholder.style.top="",this.placeholder.style.left="",this.attrWidth&&this.el.setAttribute("width",this.attrWidth.toString()),this.attrHeight&&this.el.setAttribute("height",this.attrHeight.toString()),this.el.removeAttribute("style"),this.originInlineStyles&&this.el.setAttribute("style",this.originInlineStyles),this.el.classList.remove("active"),this.doneAnimating=!0,this._changedAncestorList.forEach((t=>t.style.overflow="")),"function"==typeof this.options.onCloseEnd&&this.options.onCloseEnd.call(this,this.el)}),t)}_addCaption(){this._photoCaption=document.createElement("div"),this._photoCaption.classList.add("materialbox-caption"),this._photoCaption.innerText=this.caption,document.body.append(this._photoCaption),this._photoCaption.style.display="inline",this._photoCaption.style.transition="none",this._photoCaption.style.opacity="0";const t=this.options.inDuration;setTimeout((()=>{this._photoCaption.style.transition=`opacity ${t}ms ease`,this._photoCaption.style.opacity="1"}),1)}_removeCaption(){const t=this.options.outDuration;this._photoCaption.style.transition=`opacity ${t}ms ease`,this._photoCaption.style.opacity="0",setTimeout((()=>{this._photoCaption.remove()}),t)}_addOverlay(){this._overlay=document.createElement("div"),this._overlay.id="materialbox-overlay",this._overlay.addEventListener("click",(t=>{this.doneAnimating&&this.close()}),{once:!0}),this.el.before(this._overlay);const t=this._overlay.getBoundingClientRect();this._overlay.style.width=this.windowWidth+"px",this._overlay.style.height=this.windowHeight+"px",this._overlay.style.left=-1*t.left+"px",this._overlay.style.top=-1*t.top+"px",this._overlay.style.transition="none",this._overlay.style.opacity="0";const e=this.options.inDuration;setTimeout((()=>{this._overlay.style.transition=`opacity ${e}ms ease`,this._overlay.style.opacity="1"}),1)}_removeOverlay(){const t=this.options.outDuration;this._overlay.style.transition=`opacity ${t}ms ease`,this._overlay.style.opacity="0",setTimeout((()=>{this.overlayActive=!1,this._overlay.remove()}),t)}open=()=>{this._updateVars(),this.originalWidth=this.el.getBoundingClientRect().width,this.originalHeight=this.el.getBoundingClientRect().height,this.doneAnimating=!1,this.el.classList.add("active"),this.overlayActive=!0,"function"==typeof this.options.onOpenStart&&this.options.onOpenStart.call(this,this.el),this.placeholder.style.width=this.placeholder.getBoundingClientRect().width+"px",this.placeholder.style.height=this.placeholder.getBoundingClientRect().height+"px",this.placeholder.style.position="relative",this.placeholder.style.top="0",this.placeholder.style.left="0",this._makeAncestorsOverflowVisible(),this.el.style.position="absolute",this.el.style.zIndex="1000",this.el.style.willChange="left, top, width, height",this.attrWidth=this.el.getAttribute("width"),this.attrHeight=this.el.getAttribute("height"),this.attrWidth&&(this.el.style.width=this.attrWidth+"px",this.el.removeAttribute("width")),this.attrHeight&&(this.el.style.width=this.attrHeight+"px",this.el.removeAttribute("height")),this._addOverlay(),""!==this.caption&&this._addCaption();const t=this.originalWidth/this.windowWidth,e=this.originalHeight/this.windowHeight;if(this.newWidth=0,this.newHeight=0,t>e){const t=this.originalHeight/this.originalWidth;this.newWidth=.9*this.windowWidth,this.newHeight=.9*this.windowWidth*t}else{const t=this.originalWidth/this.originalHeight;this.newWidth=.9*this.windowHeight*t,this.newHeight=.9*this.windowHeight}this._animateImageIn(),window.addEventListener("scroll",this._handleWindowScroll),window.addEventListener("resize",this._handleWindowResize),window.addEventListener("keyup",this._handleWindowEscape)};close=()=>{this._updateVars(),this.doneAnimating=!1,"function"==typeof this.options.onCloseStart&&this.options.onCloseStart.call(this,this.el),window.removeEventListener("scroll",this._handleWindowScroll),window.removeEventListener("resize",this._handleWindowResize),window.removeEventListener("keyup",this._handleWindowEscape),this._removeOverlay(),this._animateImageOut(),""!==this.caption&&this._removeCaption()}}let T={responsiveThreshold:0};class x extends i{_enabled;_img;static _parallaxes=[];static _handleScrollThrottled;static _handleWindowResizeThrottled;constructor(t,e){super(t,e,x),this.el.M_Parallax=this,this.options={...x.defaults,...e},this._enabled=window.innerWidth>this.options.responsiveThreshold,this._img=this.el.querySelector("img"),this._updateParallax(),this._setupEventHandlers(),this._setupStyles(),x._parallaxes.push(this)}static get defaults(){return T}static init(t,e={}){return super.init(t,e,x)}static getInstance(t){return t.M_Parallax}destroy(){x._parallaxes.splice(x._parallaxes.indexOf(this),1),this._img.style.transform="",this._removeEventHandlers(),this.el.M_Parallax=void 0}static _handleScroll(){for(let t=0;te.options.responsiveThreshold}}_setupEventHandlers(){this._img.addEventListener("load",this._handleImageLoad),0===x._parallaxes.length&&(x._handleScrollThrottled||(x._handleScrollThrottled=e.throttle(x._handleScroll,5)),x._handleWindowResizeThrottled||(x._handleWindowResizeThrottled=e.throttle(x._handleWindowResize,5)),window.addEventListener("scroll",x._handleScrollThrottled),window.addEventListener("resize",x._handleWindowResizeThrottled))}_removeEventHandlers(){this._img.removeEventListener("load",this._handleImageLoad),0===x._parallaxes.length&&(window.removeEventListener("scroll",x._handleScrollThrottled),window.removeEventListener("resize",x._handleWindowResizeThrottled))}_setupStyles(){this._img.style.opacity="1"}_handleImageLoad=()=>{this._updateParallax()};_offset(t){const e=t.getBoundingClientRect(),i=document.documentElement;return{top:e.top+window.pageYOffset-i.clientTop,left:e.left+window.pageXOffset-i.clientLeft}}_updateParallax(){const t=this.el.getBoundingClientRect().height>0?this.el.parentNode.offsetHeight:500,i=this._img.offsetHeight-t,s=this._offset(this.el).top+t,n=this._offset(this.el).top,o=e.getDocumentScrollTop(),l=window.innerHeight,a=i*((o+l-n)/(t+l));this._enabled?s>o&&n=t&&!this.el.classList.contains("pinned")&&(this._removePinClasses(),this.el.style.top=`${this.options.offset}px`,this.el.classList.add("pinned"),"function"==typeof this.options.onPositionChange&&this.options.onPositionChange.call(this,"pinned")),tthis.options.bottom&&!this.el.classList.contains("pin-bottom")&&(this._removePinClasses(),this.el.classList.add("pin-bottom"),this.el.style.top=this.options.bottom-this.originalOffset+"px","function"==typeof this.options.onPositionChange&&this.options.onPositionChange.call(this,"pin-bottom"))}_removePinClasses(){this.el.classList.remove("pin-top"),this.el.classList.remove("pinned"),this.el.classList.remove("pin-bottom")}static{D._pushpins=[]}}let O={throttle:100,scrollOffset:200,activeClass:"active",getActiveElement:t=>'a[href="#'+t+'"]'};class A extends i{static _elements;static _count;static _increment;tickId;id;static _elementsInView;static _visibleElements;static _ticks;constructor(t,e){super(t,e,A),this.el.M_ScrollSpy=this,this.options={...A.defaults,...e},A._elements.push(this),A._count++,A._increment++,this.tickId=-1,this.id=A._increment,this._setupEventHandlers(),this._handleWindowScroll()}static get defaults(){return O}static init(t,e={}){return super.init(t,e,A)}static getInstance(t){return t.M_ScrollSpy}destroy(){A._elements.splice(A._elements.indexOf(this),1),A._elementsInView.splice(A._elementsInView.indexOf(this),1),A._visibleElements.splice(A._visibleElements.indexOf(this.el),1),A._count--,this._removeEventHandlers();document.querySelector(this.options.getActiveElement(this.el.id)).classList.remove(this.options.activeClass),this.el.M_ScrollSpy=void 0}_setupEventHandlers(){1===A._count&&(window.addEventListener("scroll",this._handleWindowScroll),window.addEventListener("resize",this._handleThrottledResize),document.body.addEventListener("click",this._handleTriggerClick))}_removeEventHandlers(){0===A._count&&(window.removeEventListener("scroll",this._handleWindowScroll),window.removeEventListener("resize",this._handleThrottledResize),document.body.removeEventListener("click",this._handleTriggerClick))}_handleThrottledResize=e.throttle((function(){this._handleWindowScroll()}),200).bind(this);_handleTriggerClick=t=>{const e=t.target;for(let i=A._elements.length-1;i>=0;i--){const s=A._elements[i];if(e===document.querySelector('a[href="#'+s.el.id+'"]')){t.preventDefault(),s.el.scrollIntoView({behavior:"smooth"});break}}};_handleWindowScroll=()=>{A._ticks++;let t=e.getDocumentScrollTop(),i=e.getDocumentScrollLeft(),s=i+window.innerWidth,n=t+window.innerHeight,o=A._findElements(t,s,n,i);for(let t=0;t=0&&i!==A._ticks&&(e._exit(),e.tickId=-1)}A._elementsInView=o};static _offset(t){const e=t.getBoundingClientRect(),i=document.documentElement;return{top:e.top+window.pageYOffset-i.clientTop,left:e.left+window.pageXOffset-i.clientLeft}}static _findElements(t,e,i,s){let n=[];for(let o=0;o0){let t=A._offset(l.el).top,o=A._offset(l.el).left,h=o+l.el.getBoundingClientRect().width,r=t+l.el.getBoundingClientRect().height;!(o>e||hi||r0!==t.getBoundingClientRect().height)),A._visibleElements[0]){const t=document.querySelector(this.options.getActiveElement(A._visibleElements[0].id));t?.classList.remove(this.options.activeClass),A._visibleElements[0].M_ScrollSpy&&this.id0!==t.getBoundingClientRect().height)),A._visibleElements[0]){const t=document.querySelector(this.options.getActiveElement(A._visibleElements[0].id));if(t?.classList.remove(this.options.activeClass),A._visibleElements=A._visibleElements.filter((t=>t.id!=this.el.id)),A._visibleElements[0]){const t=this.options.getActiveElement(A._visibleElements[0].id);document.querySelector(t)?.classList.add(this.options.activeClass)}}}static{A._elements=[],A._elementsInView=[],A._visibleElements=[],A._count=0,A._increment=0,A._ticks=0}}const M={edge:"left",draggable:!0,dragTargetWidth:"10px",inDuration:250,outDuration:200,onOpenStart:null,onOpenEnd:null,onCloseStart:null,onCloseEnd:null,preventScrolling:!0};class I extends i{id;isOpen;isFixed;isDragged;lastWindowWidth;lastWindowHeight;static _sidenavs;_overlay;dragTarget;_startingXpos;_xPos;_time;_width;_initialScrollTop;_verticallyScrolling;deltaX;velocityX;percentOpen;constructor(t,e){super(t,e,I),this.el.M_Sidenav=this,this.options={...I.defaults,...e},this.id=this.el.id,this.isOpen=!1,this.isFixed=this.el.classList.contains("sidenav-fixed"),this.isDragged=!1,this.lastWindowWidth=window.innerWidth,this.lastWindowHeight=window.innerHeight,this._createOverlay(),this._createDragTarget(),this._setupEventHandlers(),this._setupClasses(),this._setupFixed(),I._sidenavs.push(this)}static get defaults(){return M}static init(t,e={}){return super.init(t,e,I)}static getInstance(t){return t.M_Sidenav}destroy(){this._removeEventHandlers(),this._enableBodyScrolling(),this._overlay.parentNode.removeChild(this._overlay),this.dragTarget.parentNode.removeChild(this.dragTarget),this.el.M_Sidenav=void 0,this.el.style.transform="";const t=I._sidenavs.indexOf(this);t>=0&&I._sidenavs.splice(t,1)}_createOverlay(){this._overlay=document.createElement("div"),this._overlay.classList.add("sidenav-overlay"),this._overlay.addEventListener("click",this.close),document.body.appendChild(this._overlay)}_setupEventHandlers(){0===I._sidenavs.length&&document.body.addEventListener("click",this._handleTriggerClick);var t=null;this.dragTarget.addEventListener("touchmove",this._handleDragTargetDrag,t),this.dragTarget.addEventListener("touchend",this._handleDragTargetRelease),this._overlay.addEventListener("touchmove",this._handleCloseDrag,t),this._overlay.addEventListener("touchend",this._handleCloseRelease),this.el.addEventListener("touchmove",this._handleCloseDrag,t),this.el.addEventListener("touchend",this._handleCloseRelease),this.el.addEventListener("click",this._handleCloseTriggerClick),this.isFixed&&window.addEventListener("resize",this._handleWindowResize)}_removeEventHandlers(){1===I._sidenavs.length&&document.body.removeEventListener("click",this._handleTriggerClick),this.dragTarget.removeEventListener("touchmove",this._handleDragTargetDrag),this.dragTarget.removeEventListener("touchend",this._handleDragTargetRelease),this._overlay.removeEventListener("touchmove",this._handleCloseDrag),this._overlay.removeEventListener("touchend",this._handleCloseRelease),this.el.removeEventListener("touchmove",this._handleCloseDrag),this.el.removeEventListener("touchend",this._handleCloseRelease),this.el.removeEventListener("click",this._handleCloseTriggerClick),this.isFixed&&window.removeEventListener("resize",this._handleWindowResize)}_handleTriggerClick(t){const i=t.target.closest(".sidenav-trigger");if(t.target&&i){const s=e.getIdFromTrigger(i),n=document.getElementById(s).M_Sidenav;n&&n.open(i),t.preventDefault()}}_startDrag(t){const i=t.targetTouches[0].clientX;this.isDragged=!0,this._startingXpos=i,this._xPos=this._startingXpos,this._time=Date.now(),this._width=this.el.getBoundingClientRect().width,this._overlay.style.display="block",this._initialScrollTop=this.isOpen?this.el.scrollTop:e.getDocumentScrollTop(),this._verticallyScrolling=!1}_dragMoveUpdate(t){const i=t.targetTouches[0].clientX,s=this.isOpen?this.el.scrollTop:e.getDocumentScrollTop();this.deltaX=Math.abs(this._xPos-i),this._xPos=i,this.velocityX=this.deltaX/(Date.now()-this._time),this._time=Date.now(),this._initialScrollTop!==s&&(this._verticallyScrolling=!0)}_handleDragTargetDrag=t=>{if(!this.options.draggable||this._isCurrentlyFixed()||this._verticallyScrolling)return;this.isDragged||this._startDrag(t),this._dragMoveUpdate(t);let e=this._xPos-this._startingXpos;const i=e>0?"right":"left";e=Math.min(this._width,Math.abs(e)),this.options.edge===i&&(e=0);let s=e,n="translateX(-100%)";"right"===this.options.edge&&(n="translateX(100%)",s=-s),this.percentOpen=Math.min(1,e/this._width),this.el.style.transform=`${n} translateX(${s}px)`,this._overlay.style.opacity=this.percentOpen.toString()};_handleDragTargetRelease=()=>{this.isDragged&&(this.percentOpen>.2?this.open():this._animateOut(),this.isDragged=!1,this._verticallyScrolling=!1)};_handleCloseDrag=t=>{if(this.isOpen){if(!this.options.draggable||this._isCurrentlyFixed()||this._verticallyScrolling)return;this.isDragged||this._startDrag(t),this._dragMoveUpdate(t);let e=this._xPos-this._startingXpos,i=e>0?"right":"left";e=Math.min(this._width,Math.abs(e)),this.options.edge!==i&&(e=0);let s=-e;"right"===this.options.edge&&(s=-s),this.percentOpen=Math.min(1,1-e/this._width),this.el.style.transform=`translateX(${s}px)`,this._overlay.style.opacity=this.percentOpen.toString()}};_handleCloseRelease=()=>{this.isOpen&&this.isDragged&&(this.percentOpen>.8?this._animateIn():this.close(),this.isDragged=!1,this._verticallyScrolling=!1)};_handleCloseTriggerClick=t=>{t.target.closest(".sidenav-close")&&!this._isCurrentlyFixed()&&this.close()};_handleWindowResize=()=>{this.lastWindowWidth!==window.innerWidth&&(window.innerWidth>992?this.open():this.close()),this.lastWindowWidth=window.innerWidth,this.lastWindowHeight=window.innerHeight};_setupClasses(){"right"===this.options.edge&&(this.el.classList.add("right-aligned"),this.dragTarget.classList.add("right-aligned"))}_removeClasses(){this.el.classList.remove("right-aligned"),this.dragTarget.classList.remove("right-aligned")}_setupFixed(){this._isCurrentlyFixed()&&this.open()}_isCurrentlyFixed(){return this.isFixed&&window.innerWidth>992}_createDragTarget(){const t=document.createElement("div");t.classList.add("drag-target"),t.style.width=this.options.dragTargetWidth,document.body.appendChild(t),this.dragTarget=t}_preventBodyScrolling(){document.body.style.overflow="hidden"}_enableBodyScrolling(){document.body.style.overflow=""}open=()=>{!0!==this.isOpen&&(this.isOpen=!0,"function"==typeof this.options.onOpenStart&&this.options.onOpenStart.call(this,this.el),this._isCurrentlyFixed()?(this.el.style.transform="translateX(0)",this._enableBodyScrolling(),this._overlay.style.display="none"):(this.options.preventScrolling&&this._preventBodyScrolling(),this.isDragged&&1==this.percentOpen||this._animateIn()))};close=()=>{if(!1!==this.isOpen)if(this.isOpen=!1,"function"==typeof this.options.onCloseStart&&this.options.onCloseStart.call(this,this.el),this._isCurrentlyFixed()){const t="left"===this.options.edge?"-105%":"105%";this.el.style.transform=`translateX(${t})`}else this._enableBodyScrolling(),this.isDragged&&0==this.percentOpen?this._overlay.style.display="none":this._animateOut()};_animateIn(){this._animateSidenavIn(),this._animateOverlayIn()}_animateOut(){this._animateSidenavOut(),this._animateOverlayOut()}_animateSidenavIn(){let t="left"===this.options.edge?-1:1;this.isDragged&&(t="left"===this.options.edge?t+this.percentOpen:t-this.percentOpen);const e=this.options.inDuration;this.el.style.transition="none",this.el.style.transform="translateX("+100*t+"%)",setTimeout((()=>{this.el.style.transition=`transform ${e}ms ease`,this.el.style.transform="translateX(0)"}),1),setTimeout((()=>{"function"==typeof this.options.onOpenEnd&&this.options.onOpenEnd.call(this,this.el)}),e)}_animateSidenavOut(){const t="left"===this.options.edge?-1:1;this.isDragged&&(this.options.edge,this.percentOpen);const e=this.options.outDuration;this.el.style.transition=`transform ${e}ms ease`,this.el.style.transform="translateX("+100*t+"%)",setTimeout((()=>{"function"==typeof this.options.onCloseEnd&&this.options.onCloseEnd.call(this,this.el)}),e)}_animateOverlayIn(){let t=0;this.isDragged?t=this.percentOpen:this._overlay.style.display="block";const e=this.options.inDuration;this._overlay.style.transition="none",this._overlay.style.opacity=t.toString(),setTimeout((()=>{this._overlay.style.transition=`opacity ${e}ms ease`,this._overlay.style.opacity="1"}),1)}_animateOverlayOut(){const t=this.options.outDuration;this._overlay.style.transition=`opacity ${t}ms ease`,this._overlay.style.opacity="0",setTimeout((()=>{this._overlay.style.display="none"}),t)}static{I._sidenavs=[]}}let R={duration:300,onShow:null,swipeable:!1,responsiveThreshold:1/0};class H extends i{_tabLinks;_index;_indicator;_tabWidth;_tabsWidth;_tabsCarousel;_activeTabLink;_content;constructor(t,e){super(t,e,H),this.el.M_Tabs=this,this.options={...H.defaults,...e},this._tabLinks=this.el.querySelectorAll("li.tab > a"),this._index=0,this._setupActiveTabLink(),this.options.swipeable?this._setupSwipeableTabs():this._setupNormalTabs(),this._setTabsAndTabWidth(),this._createIndicator(),this._setupEventHandlers()}static get defaults(){return R}static init(t,e={}){return super.init(t,e,H)}static getInstance(t){return t.M_Tabs}destroy(){this._removeEventHandlers(),this._indicator.parentNode.removeChild(this._indicator),this.options.swipeable?this._teardownSwipeableTabs():this._teardownNormalTabs(),this.el.M_Tabs=void 0}get index(){return this._index}_setupEventHandlers(){window.addEventListener("resize",this._handleWindowResize),this.el.addEventListener("click",this._handleTabClick)}_removeEventHandlers(){window.removeEventListener("resize",this._handleWindowResize),this.el.removeEventListener("click",this._handleTabClick)}_handleWindowResize=()=>{this._setTabsAndTabWidth(),0!==this._tabWidth&&0!==this._tabsWidth&&(this._indicator.style.left=this._calcLeftPos(this._activeTabLink)+"px",this._indicator.style.right=this._calcRightPos(this._activeTabLink)+"px")};_handleTabClick=t=>{const e=t.target,i=e.parentElement;if(!e||!i.classList.contains("tab"))return;if(i.classList.contains("disabled"))return void t.preventDefault();if(e.hasAttribute("target"))return;this._activeTabLink.classList.remove("active");const s=this._content;this._activeTabLink=e,e.hash&&(this._content=document.querySelector(e.hash)),this._tabLinks=this.el.querySelectorAll("li.tab > a"),this._activeTabLink.classList.add("active");const n=this._index;this._index=Math.max(Array.from(this._tabLinks).indexOf(e),0),this.options.swipeable?this._tabsCarousel&&this._tabsCarousel.set(this._index,(()=>{"function"==typeof this.options.onShow&&this.options.onShow.call(this,this._content)})):this._content&&(this._content.style.display="block",this._content.classList.add("active"),"function"==typeof this.options.onShow&&this.options.onShow.call(this,this._content),s&&s!==this._content&&(s.style.display="none",s.classList.remove("active"))),this._setTabsAndTabWidth(),this._animateIndicator(n),t.preventDefault()};_createIndicator(){const t=document.createElement("li");t.classList.add("indicator"),this.el.appendChild(t),this._indicator=t,this._indicator.style.left=this._calcLeftPos(this._activeTabLink)+"px",this._indicator.style.right=this._calcRightPos(this._activeTabLink)+"px"}_setupActiveTabLink(){this._activeTabLink=Array.from(this._tabLinks).find((t=>t.getAttribute("href")===location.hash)),this._activeTabLink||(this._activeTabLink=this.el.querySelector("li.tab a.active")),0===this._activeTabLink.length&&(this._activeTabLink=this.el.querySelector("li.tab a")),Array.from(this._tabLinks).forEach((t=>t.classList.remove("active"))),this._activeTabLink.classList.add("active"),this._index=Math.max(Array.from(this._tabLinks).indexOf(this._activeTabLink),0),this._activeTabLink&&this._activeTabLink.hash&&(this._content=document.querySelector(this._activeTabLink.hash),this._content&&this._content.classList.add("active"))}_setupSwipeableTabs(){window.innerWidth>this.options.responsiveThreshold&&(this.options.swipeable=!1);const t=[];this._tabLinks.forEach((e=>{if(e.hash){const i=document.querySelector(e.hash);i.classList.add("carousel-item"),t.push(i)}}));const e=document.createElement("div");e.classList.add("tabs-content","carousel","carousel-slider"),t[0].parentElement.insertBefore(e,t[0]),t.forEach((t=>{e.appendChild(t),t.style.display=""}));const i=this._activeTabLink.parentElement,s=Array.from(i.parentNode.children).indexOf(i);this._tabsCarousel=c.init(e,{fullWidth:!0,noWrap:!0,onCycleTo:t=>{const e=this._index;this._index=Array.from(t.parentNode.children).indexOf(t),this._activeTabLink.classList.remove("active"),this._activeTabLink=Array.from(this._tabLinks)[this._index],this._activeTabLink.classList.add("active"),this._animateIndicator(e),"function"==typeof this.options.onShow&&this.options.onShow.call(this,this._content)}}),this._tabsCarousel.set(s)}_teardownSwipeableTabs(){const t=this._tabsCarousel.el;this._tabsCarousel.destroy(),t.after(t.children),t.remove()}_setupNormalTabs(){Array.from(this._tabLinks).forEach((t=>{if(t!==this._activeTabLink&&t.hash){const e=document.querySelector(t.hash);e&&(e.style.display="none")}}))}_teardownNormalTabs(){this._tabLinks.forEach((t=>{if(t.hash){const e=document.querySelector(t.hash);e&&(e.style.display="")}}))}_setTabsAndTabWidth(){this._tabsWidth=this.el.getBoundingClientRect().width,this._tabWidth=Math.max(this._tabsWidth,this.el.scrollWidth)/this._tabLinks.length}_calcRightPos(t){return Math.ceil(this._tabsWidth-t.offsetLeft-t.getBoundingClientRect().width)}_calcLeftPos(t){return Math.floor(t.offsetLeft)}updateTabIndicator(){this._setTabsAndTabWidth(),this._animateIndicator(this._index)}_animateIndicator(t){let e=0,i=0;this._index-t>=0?e=90:i=90,this._indicator.style.transition=`\n left ${this.options.duration}ms ease-out ${e}ms,\n right ${this.options.duration}ms ease-out ${i}ms`,this._indicator.style.left=this._calcLeftPos(this._activeTabLink)+"px",this._indicator.style.right=this._calcRightPos(this._activeTabLink)+"px"}select(t){const e=Array.from(this._tabLinks).find((e=>e.getAttribute("href")==="#"+t));e&&e.click()}}let W={onOpen:null,onClose:null};class P extends i{isOpen;wrapper;_origin;originEl;waveEl;contentEl;constructor(t,e){super(t,e,P),this.el.M_TapTarget=this,this.options={...P.defaults,...e},this.isOpen=!1,this._origin=document.querySelector(`#${t.dataset.target}`),this._setup(),this._calculatePositioning(),this._setupEventHandlers()}static get defaults(){return W}static init(t,e={}){return super.init(t,e,P)}static getInstance(t){return t.M_TapTarget}destroy(){this._removeEventHandlers(),this.el.TapTarget=void 0}_setupEventHandlers(){this.el.addEventListener("click",this._handleTargetClick),this.originEl.addEventListener("click",this._handleOriginClick),window.addEventListener("resize",this._handleThrottledResize)}_removeEventHandlers(){this.el.removeEventListener("click",this._handleTargetClick),this.originEl.removeEventListener("click",this._handleOriginClick),window.removeEventListener("resize",this._handleThrottledResize)}_handleThrottledResize=e.throttle((function(){this._handleResize()}),200).bind(this);_handleTargetClick=()=>{this.open()};_handleOriginClick=()=>{this.close()};_handleResize=()=>{this._calculatePositioning()};_handleDocumentClick=t=>{t.target.closest(".tap-target-wrapper")||(this.close(),t.preventDefault(),t.stopPropagation())};_setup(){this.wrapper=this.el.parentElement,this.waveEl=this.wrapper.querySelector(".tap-target-wave"),this.originEl=this.wrapper.querySelector(".tap-target-origin"),this.contentEl=this.el.querySelector(".tap-target-content"),this.wrapper.classList.contains(".tap-target-wrapper")||(this.wrapper=document.createElement("div"),this.wrapper.classList.add("tap-target-wrapper"),this.el.before(this.wrapper),this.wrapper.append(this.el)),this.contentEl||(this.contentEl=document.createElement("div"),this.contentEl.classList.add("tap-target-content"),this.el.append(this.contentEl)),this.waveEl||(this.waveEl=document.createElement("div"),this.waveEl.classList.add("tap-target-wave"),this.originEl||(this.originEl=this._origin.cloneNode(!0),this.originEl.classList.add("tap-target-origin"),this.originEl.removeAttribute("id"),this.originEl.removeAttribute("style"),this.waveEl.append(this.originEl)),this.wrapper.append(this.waveEl))}_offset(t){const e=t.getBoundingClientRect(),i=document.documentElement;return{top:e.top+window.pageYOffset-i.clientTop,left:e.left+window.pageXOffset-i.clientLeft}}_calculatePositioning(){let t="fixed"===getComputedStyle(this._origin).position;if(!t){let e=this._origin;const i=[];for(;(e=e.parentNode)&&e!==document;)i.push(e);for(let e=0;er,u=n<=d,m=n>d,_=o>=.25*l&&o<=.75*l,v=this.el.offsetWidth,g=this.el.offsetHeight,y=n+s/2-g/2,f=o+i/2-v/2,w=t?"fixed":"absolute",E=_?v:v/2+i,b=g/2,L=u?g/2:0,C=c&&!_?v/2-i:0,k=i,T=m?"bottom":"top",x=2*i,S=x,D=g/2-S/2,O=v/2-x/2;this.wrapper.style.top=u?y+"px":"",this.wrapper.style.right=p?l-f-v-h+"px":"",this.wrapper.style.bottom=m?a-y-g+"px":"",this.wrapper.style.left=c?f+"px":"",this.wrapper.style.position=w,this.contentEl.style.width=E+"px",this.contentEl.style.height=b+"px",this.contentEl.style.top=L+"px",this.contentEl.style.right="0px",this.contentEl.style.bottom="0px",this.contentEl.style.left=C+"px",this.contentEl.style.padding=k+"px",this.contentEl.style.verticalAlign=T,this.waveEl.style.top=D+"px",this.waveEl.style.left=O+"px",this.waveEl.style.width=x+"px",this.waveEl.style.height=S+"px"}open=()=>{this.isOpen||("function"==typeof this.options.onOpen&&this.options.onOpen.call(this,this._origin),this.isOpen=!0,this.wrapper.classList.add("open"),document.body.addEventListener("click",this._handleDocumentClick,!0),document.body.addEventListener("touchend",this._handleDocumentClick))};close=()=>{this.isOpen&&("function"==typeof this.options.onClose&&this.options.onClose.call(this,this._origin),this.isOpen=!1,this.wrapper.classList.remove("open"),document.body.removeEventListener("click",this._handleDocumentClick,!0),document.body.removeEventListener("touchend",this._handleDocumentClick))}}let B={dialRadius:135,outerRadius:105,innerRadius:70,tickRadius:20,duration:350,container:null,defaultTime:"now",fromNow:0,showClearBtn:!1,i18n:{cancel:"Cancel",clear:"Clear",done:"Ok"},autoClose:!1,twelveHour:!0,vibrate:!0,onOpenStart:null,onOpenEnd:null,onCloseStart:null,onCloseEnd:null,onSelect:null};class q extends i{id;modal;modalEl;plate;digitalClock;inputHours;inputMinutes;x0;y0;moved;dx;dy;currentView;hand;minutesView;hours;minutes;time;amOrPm;static _template;isOpen;vibrate;_canvas;hoursView;spanAmPm;footer;_amBtn;_pmBtn;bg;bearing;g;toggleViewTimer;canvas;vibrateTimer;constructor(t,i){super(t,i,q),this.el.M_Timepicker=this,this.options={...q.defaults,...i},this.id=e.guid(),this._insertHTMLIntoDOM(),this._setupModal(),this._setupVariables(),this._setupEventHandlers(),this._clockSetup(),this._pickerSetup()}static get defaults(){return B}static init(t,e={}){return super.init(t,e,q)}static _addLeadingZero(t){return(t<10?"0":"")+t}static _createSVGEl(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}static _Pos(t){return t.type.startsWith("touch")&&t.targetTouches.length>=1?{x:t.targetTouches[0].clientX,y:t.targetTouches[0].clientY}:{x:t.clientX,y:t.clientY}}static getInstance(t){return t.M_Timepicker}destroy(){this._removeEventHandlers(),this.modal.destroy(),this.modalEl.remove(),this.el.M_Timepicker=void 0}_setupEventHandlers(){this.el.addEventListener("click",this._handleInputClick),this.el.addEventListener("keydown",this._handleInputKeydown),this.plate.addEventListener("mousedown",this._handleClockClickStart),this.plate.addEventListener("touchstart",this._handleClockClickStart),this.digitalClock.addEventListener("keyup",this._inputFromTextField),this.inputHours.addEventListener("click",(()=>this.showView("hours"))),this.inputMinutes.addEventListener("click",(()=>this.showView("minutes")))}_removeEventHandlers(){this.el.removeEventListener("click",this._handleInputClick),this.el.removeEventListener("keydown",this._handleInputKeydown)}_handleInputClick=()=>{this.open()};_handleInputKeydown=t=>{e.keys.ENTER.includes(t.key)&&(t.preventDefault(),this.open())};_handleTimeInputEnterKey=t=>{e.keys.ENTER.includes(t.key)&&(t.preventDefault(),this._inputFromTextField())};_handleClockClickStart=t=>{t.preventDefault();let e=this.plate.getBoundingClientRect(),i=e.left,s=e.top;this.x0=i+this.options.dialRadius,this.y0=s+this.options.dialRadius,this.moved=!1;let n=q._Pos(t);this.dx=n.x-this.x0,this.dy=n.y-this.y0,this.setHand(this.dx,this.dy,!1),document.addEventListener("mousemove",this._handleDocumentClickMove),document.addEventListener("touchmove",this._handleDocumentClickMove),document.addEventListener("mouseup",this._handleDocumentClickEnd),document.addEventListener("touchend",this._handleDocumentClickEnd)};_handleDocumentClickMove=t=>{t.preventDefault();let e=q._Pos(t),i=e.x-this.x0,s=e.y-this.y0;this.moved=!0,this.setHand(i,s,!1)};_handleDocumentClickEnd=t=>{t.preventDefault(),document.removeEventListener("mouseup",this._handleDocumentClickEnd),document.removeEventListener("touchend",this._handleDocumentClickEnd);let e=q._Pos(t),i=e.x-this.x0,s=e.y-this.y0;this.moved&&i===this.dx&&s===this.dy&&this.setHand(i,s),"hours"===this.currentView?this.showView("minutes",this.options.duration/2):this.options.autoClose&&(this.minutesView.classList.add("timepicker-dial-out"),setTimeout((()=>{this.done()}),this.options.duration/2)),"function"==typeof this.options.onSelect&&this.options.onSelect.call(this,this.hours,this.minutes),document.removeEventListener("mousemove",this._handleDocumentClickMove),document.removeEventListener("touchmove",this._handleDocumentClickMove)};_insertHTMLIntoDOM(){const t=document.createElement("template");t.innerHTML=q._template.trim(),this.modalEl=t.content.firstChild,this.modalEl.id="modal-"+this.id;const e=this.options.container,i=e instanceof HTMLElement?e:document.querySelector(e);this.options.container&&i?i.append(this.modalEl):this.el.parentElement.appendChild(this.modalEl)}_setupModal(){this.modal=y.init(this.modalEl,{onOpenStart:this.options.onOpenStart,onOpenEnd:this.options.onOpenEnd,onCloseStart:this.options.onCloseStart,onCloseEnd:()=>{"function"==typeof this.options.onCloseEnd&&this.options.onCloseEnd.call(this),this.isOpen=!1}})}_setupVariables(){this.currentView="hours",this.vibrate=navigator.vibrate?"vibrate":navigator.webkitVibrate?"webkitVibrate":null,this._canvas=this.modalEl.querySelector(".timepicker-canvas"),this.plate=this.modalEl.querySelector(".timepicker-plate"),this.digitalClock=this.modalEl.querySelector(".timepicker-display-column"),this.hoursView=this.modalEl.querySelector(".timepicker-hours"),this.minutesView=this.modalEl.querySelector(".timepicker-minutes"),this.inputHours=this.modalEl.querySelector(".timepicker-input-hours"),this.inputMinutes=this.modalEl.querySelector(".timepicker-input-minutes"),this.spanAmPm=this.modalEl.querySelector(".timepicker-span-am-pm"),this.footer=this.modalEl.querySelector(".timepicker-footer"),this.amOrPm="PM"}_createButton(t,e){const i=document.createElement("button");return i.classList.add("btn-flat","waves-effect"),i.style.visibility=e,i.type="button",i.tabIndex=this.options.twelveHour?3:1,i.innerText=t,i}_pickerSetup(){const t=this._createButton(this.options.i18n.clear,this.options.showClearBtn?"":"hidden");t.classList.add("timepicker-clear"),t.addEventListener("click",this.clear),this.footer.appendChild(t);const e=document.createElement("div");e.classList.add("confirmation-btns"),this.footer.append(e);const i=this._createButton(this.options.i18n.cancel,"");i.classList.add("timepicker-close"),i.addEventListener("click",this.close),e.appendChild(i);const s=this._createButton(this.options.i18n.done,"");s.classList.add("timepicker-close"),s.addEventListener("click",this.done),e.appendChild(s)}_clockSetup(){this.options.twelveHour&&(this._amBtn=document.createElement("div"),this._amBtn.classList.add("am-btn"),this._amBtn.innerText="AM",this._amBtn.addEventListener("click",this._handleAmPmClick),this.spanAmPm.appendChild(this._amBtn),this._pmBtn=document.createElement("div"),this._pmBtn.classList.add("pm-btn"),this._pmBtn.innerText="PM",this._pmBtn.addEventListener("click",this._handleAmPmClick),this.spanAmPm.appendChild(this._pmBtn)),this._buildHoursView(),this._buildMinutesView(),this._buildSVGClock()}_buildSVGClock(){let t=this.options.dialRadius,e=this.options.tickRadius,i=2*t,s=q._createSVGEl("svg");s.setAttribute("class","timepicker-svg"),s.setAttribute("width",i.toString()),s.setAttribute("height",i.toString());let n=q._createSVGEl("g");n.setAttribute("transform","translate("+t+","+t+")");let o=q._createSVGEl("circle");o.setAttribute("class","timepicker-canvas-bearing"),o.setAttribute("cx","0"),o.setAttribute("cy","0"),o.setAttribute("r","4");let l=q._createSVGEl("line");l.setAttribute("x1","0"),l.setAttribute("y1","0");let a=q._createSVGEl("circle");a.setAttribute("class","timepicker-canvas-bg"),a.setAttribute("r",e.toString()),n.appendChild(l),n.appendChild(a),n.appendChild(o),s.appendChild(n),this._canvas.appendChild(s),this.hand=l,this.bg=a,this.bearing=o,this.g=n}_buildHoursView(){const t=document.createElement("div");if(t.classList.add("timepicker-tick"),this.options.twelveHour)for(let e=1;e<13;e+=1){const i=t.cloneNode(!0),s=e/6*Math.PI,n=this.options.outerRadius;i.style.left=this.options.dialRadius+Math.sin(s)*n-this.options.tickRadius+"px",i.style.top=this.options.dialRadius-Math.cos(s)*n-this.options.tickRadius+"px",i.innerHTML=0===e?"00":e.toString(),this.hoursView.appendChild(i)}else for(let e=0;e<24;e+=1){const i=t.cloneNode(!0),s=e/6*Math.PI,n=e>0&&e<13?this.options.innerRadius:this.options.outerRadius;i.style.left=this.options.dialRadius+Math.sin(s)*n-this.options.tickRadius+"px",i.style.top=this.options.dialRadius-Math.cos(s)*n-this.options.tickRadius+"px",i.innerHTML=0===e?"00":e.toString(),this.hoursView.appendChild(i)}}_buildMinutesView(){const t=document.createElement("div");t.classList.add("timepicker-tick");for(let e=0;e<60;e+=5){const i=t.cloneNode(!0),s=e/30*Math.PI;i.style.left=this.options.dialRadius+Math.sin(s)*this.options.outerRadius-this.options.tickRadius+"px",i.style.top=this.options.dialRadius-Math.cos(s)*this.options.outerRadius-this.options.tickRadius+"px",i.innerHTML=q._addLeadingZero(e),this.minutesView.appendChild(i)}}_handleAmPmClick=t=>{const e=t.target;this.amOrPm=e.classList.contains("am-btn")?"AM":"PM",this._updateAmPmView()};_updateAmPmView(){this.options.twelveHour&&("PM"===this.amOrPm?(this._amBtn.classList.remove("text-primary"),this._pmBtn.classList.add("text-primary")):"AM"===this.amOrPm&&(this._amBtn.classList.add("text-primary"),this._pmBtn.classList.remove("text-primary")))}_updateTimeFromInput(){let t=((this.el.value||this.options.defaultTime||"")+"").split(":");if(this.options.twelveHour&&void 0!==t[1]&&(t[1].toUpperCase().indexOf("AM")>0?this.amOrPm="AM":this.amOrPm="PM",t[1]=t[1].replace("AM","").replace("PM","")),"now"===t[0]){let e=new Date(+new Date+this.options.fromNow);t=[e.getHours().toString(),e.getMinutes().toString()],this.options.twelveHour&&(this.amOrPm=parseInt(t[0])>=12&&parseInt(t[0])<24?"PM":"AM")}this.hours=+t[0]||0,this.minutes=+t[1]||0,this.inputHours.value=this.hours,this.inputMinutes.value=q._addLeadingZero(this.minutes),this._updateAmPmView()}showView=(t,e=null)=>{"minutes"===t&&getComputedStyle(this.hoursView).visibility;let i="hours"===t,s=i?this.hoursView:this.minutesView,n=i?this.minutesView:this.hoursView;this.currentView=t,i?(this.inputHours.classList.add("text-primary"),this.inputMinutes.classList.remove("text-primary")):(this.inputHours.classList.remove("text-primary"),this.inputMinutes.classList.add("text-primary")),n.classList.add("timepicker-dial-out"),s.style.visibility="visible",s.classList.remove("timepicker-dial-out"),this.resetClock(e),clearTimeout(this.toggleViewTimer),this.toggleViewTimer=setTimeout((()=>{n.style.visibility="hidden"}),this.options.duration)};resetClock(t){let e=this.currentView,i=this[e],s="hours"===e,n=i*(Math.PI/(s?6:30)),o=s&&i>0&&i<13?this.options.innerRadius:this.options.outerRadius,l=Math.sin(n)*o,a=-Math.cos(n)*o,h=this;t?(this.canvas?.classList.add("timepicker-canvas-out"),setTimeout((()=>{h.canvas?.classList.remove("timepicker-canvas-out"),h.setHand(l,a)}),t)):this.setHand(l,a)}_inputFromTextField=()=>{const t="hours"===this.currentView;if(t){const e=parseInt(this.inputHours.value);if(e>0&&e<13)this.drawClockFromTimeInput(e,t),this.showView("minutes",this.options.duration/2),this.hours=e,this.inputMinutes.focus();else{const t=(new Date).getHours();this.inputHours.value=(t%12).toString()}}else{const e=parseInt(this.inputMinutes.value);if(e>=0&&e<60)this.inputMinutes.value=q._addLeadingZero(e),this.drawClockFromTimeInput(e,t),this.minutes=e,this.modalEl.querySelector(".confirmation-btns :nth-child(2)").focus();else{const t=(new Date).getMinutes();this.inputMinutes.value=q._addLeadingZero(t)}}};drawClockFromTimeInput(t,e){const i=t*(Math.PI/(e?6:30));let s;this.options.twelveHour&&(s=this.options.outerRadius);let n=Math.sin(i)*(s-this.options.tickRadius),o=-Math.cos(i)*(s-this.options.tickRadius),l=Math.sin(i)*s,a=-Math.cos(i)*s;this.hand.setAttribute("x2",n.toString()),this.hand.setAttribute("y2",o.toString()),this.bg.setAttribute("cx",l.toString()),this.bg.setAttribute("cy",a.toString())}setHand(t,e,i=!1){let s=Math.atan2(t,-e),n="hours"===this.currentView,o=Math.PI/(n||i?6:30),l=Math.sqrt(t*t+e*e),a=n&&l<(this.options.outerRadius+this.options.innerRadius)/2,h=a?this.options.innerRadius:this.options.outerRadius;this.options.twelveHour&&(h=this.options.outerRadius),s<0&&(s=2*Math.PI+s);let r=Math.round(s/o);s=r*o,this.options.twelveHour?n?0===r&&(r=12):(i&&(r*=5),60===r&&(r=0)):n?(12===r&&(r=0),r=a?0===r?12:r:0===r?0:r+12):(i&&(r*=5),60===r&&(r=0)),this[this.currentView]!==r&&this.vibrate&&this.options.vibrate&&(this.vibrateTimer||(navigator[this.vibrate](10),this.vibrateTimer=setTimeout((()=>{this.vibrateTimer=null}),100))),this[this.currentView]=r,n?this.inputHours.value=r.toString():this.inputMinutes.value=q._addLeadingZero(r);let d=Math.sin(s)*(h-this.options.tickRadius),c=-Math.cos(s)*(h-this.options.tickRadius),p=Math.sin(s)*h,u=-Math.cos(s)*h;this.hand.setAttribute("x2",d.toString()),this.hand.setAttribute("y2",c.toString()),this.bg.setAttribute("cx",p.toString()),this.bg.setAttribute("cy",u.toString())}open=()=>{this.isOpen||(this.isOpen=!0,this._updateTimeFromInput(),this.showView("hours"),this.modal.open(void 0))};close=()=>{this.isOpen&&(this.isOpen=!1,this.modal.close())};done=(t=null,e=null)=>{let i=this.el.value,s=e?"":q._addLeadingZero(this.hours)+":"+q._addLeadingZero(this.minutes);this.time=s,!e&&this.options.twelveHour&&(s=`${s} ${this.amOrPm}`),this.el.value=s,s!==i&&this.el.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0})),this.close(),this.el.focus()};clear=()=>{this.done(null,!0)};static{q._template='\n
\n
\n
\n
\n
\n \n :\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n {this.isOpen||(t=void 0===t||void 0,this.isOpen=!0,this.options={...this.options,...this._getAttributeOptions()},this._updateTooltipContent(),this._setEnterDelayTimeout(t))};close=()=>{this.isOpen&&(this.isHovered=!1,this.isFocused=!1,this.isOpen=!1,this._setExitDelayTimeout())};_setExitDelayTimeout(){clearTimeout(this._exitDelayTimeout),this._exitDelayTimeout=setTimeout((()=>{this.isHovered||this.isFocused||this._animateOut()}),this.options.exitDelay)}_setEnterDelayTimeout(t){clearTimeout(this._enterDelayTimeout),this._enterDelayTimeout=setTimeout((()=>{(this.isHovered||this.isFocused||t)&&this._animateIn()}),this.options.enterDelay)}_positionTooltip(){const t=this.tooltipEl,i=this.el,s=i.offsetHeight,n=i.offsetWidth,o=t.offsetHeight,l=t.offsetWidth,a=this.options.margin;this.xMovement=0,this.yMovement=0;let h=i.getBoundingClientRect().top+e.getDocumentScrollTop(),r=i.getBoundingClientRect().left+e.getDocumentScrollLeft();"top"===this.options.position?(h+=-o-a,r+=n/2-l/2,this.yMovement=-this.options.transitionMovement):"right"===this.options.position?(h+=s/2-o/2,r+=n+a,this.xMovement=this.options.transitionMovement):"left"===this.options.position?(h+=s/2-o/2,r+=-l-a,this.xMovement=-this.options.transitionMovement):(h+=s+a,r+=n/2-l/2,this.yMovement=this.options.transitionMovement);const d=this._repositionWithinScreen(r,h,l,o);t.style.top=d.y+"px",t.style.left=d.x+"px"}_repositionWithinScreen(t,i,s,n){const o=e.getDocumentScrollLeft(),l=e.getDocumentScrollTop();let a=t-o,h=i-l;const r={left:a,top:h,width:s,height:n},d=this.options.margin+this.options.transitionMovement,c=e.checkWithinContainer(document.body,r,d);return c.left?a=d:c.right&&(a-=a+s-window.innerWidth),c.top?h=d:c.bottom&&(h-=h+n-window.innerHeight),{x:a+o,y:h+l}}_animateIn(){this._positionTooltip(),this.tooltipEl.style.visibility="visible";const t=this.options.inDuration;this.tooltipEl.style.transition=`\n transform ${t}ms ease-out,\n opacity ${t}ms ease-out`,setTimeout((()=>{this.tooltipEl.style.transform=`translateX(${this.xMovement}px) translateY(${this.yMovement}px)`,this.tooltipEl.style.opacity=(this.options.opacity||1).toString()}),1)}_animateOut(){const t=this.options.outDuration;this.tooltipEl.style.transition=`\n transform ${t}ms ease-out,\n opacity ${t}ms ease-out`,setTimeout((()=>{this.tooltipEl.style.transform="translateX(0px) translateY(0px)",this.tooltipEl.style.opacity="0"}),1)}_handleMouseEnter=()=>{this.isHovered=!0,this.isFocused=!1,this.open(!1)};_handleMouseLeave=()=>{this.isHovered=!1,this.isFocused=!1,this.close()};_handleFocus=()=>{e.tabPressed&&(this.isFocused=!0,this.open(!1))};_handleBlur=()=>{this.isFocused=!1,this.close()};_getAttributeOptions(){let t={};const e=this.el.getAttribute("data-tooltip"),i=this.el.getAttribute("data-tooltip-id"),s=this.el.getAttribute("data-position");return e&&(t.text=e),s&&(t.position=s),i&&(t.tooltipId=i),t}}class V{static _offset(t){const e=t.getBoundingClientRect(),i=document.documentElement;return{top:e.top+window.pageYOffset-i.clientTop,left:e.left+window.pageXOffset-i.clientLeft}}static renderWaveEffect(t,e=null,i=null){const s=null===e;let n,o;const l=function(a){o||(o=a);const h=a-o;if(h<500){const o=h/500*(2-h/500),a=s?"circle at 50% 50%":`circle at ${e.x}px ${e.y}px`,r=`rgba(${i?.r||0}, ${i?.g||0}, ${i?.b||0}, ${.3*(1-o)})`,d=90*o+"%";t.style.backgroundImage="radial-gradient("+a+", "+r+" "+d+", transparent "+d+")",n=window.requestAnimationFrame(l)}else t.style.backgroundImage="none",window.cancelAnimationFrame(n)};n=window.requestAnimationFrame(l)}static Init(){"undefined"!=typeof document&&document?.addEventListener("DOMContentLoaded",(()=>{document.body.addEventListener("click",(t=>{const e=t.target,i=e.closest(".waves-effect");if(i&&i.contains(e)){const e=i.classList.contains("waves-circle"),s=t.pageX-V._offset(i).left,n=t.pageY-V._offset(i).top;let o=null;i.classList.contains("waves-light")&&(o={r:255,g:255,b:255}),V.renderWaveEffect(i,e?null:{x:s,y:n},o)}}))}))}}const N={};class z extends i{_mousedown;value;thumb;constructor(t,e){super(t,e,z),this.el.M_Range=this,this.options={...z.defaults,...e},this._mousedown=!1,this._setupThumb(),this._setupEventHandlers()}static get defaults(){return N}static init(t,e={}){return super.init(t,e,z)}static getInstance(t){return t.M_Range}destroy(){this._removeEventHandlers(),this._removeThumb(),this.el.M_Range=void 0}_setupEventHandlers(){this.el.addEventListener("change",this._handleRangeChange),this.el.addEventListener("mousedown",this._handleRangeMousedownTouchstart),this.el.addEventListener("touchstart",this._handleRangeMousedownTouchstart),this.el.addEventListener("input",this._handleRangeInputMousemoveTouchmove),this.el.addEventListener("mousemove",this._handleRangeInputMousemoveTouchmove),this.el.addEventListener("touchmove",this._handleRangeInputMousemoveTouchmove),this.el.addEventListener("mouseup",this._handleRangeMouseupTouchend),this.el.addEventListener("touchend",this._handleRangeMouseupTouchend),this.el.addEventListener("blur",this._handleRangeBlurMouseoutTouchleave),this.el.addEventListener("mouseout",this._handleRangeBlurMouseoutTouchleave),this.el.addEventListener("touchleave",this._handleRangeBlurMouseoutTouchleave)}_removeEventHandlers(){this.el.removeEventListener("change",this._handleRangeChange),this.el.removeEventListener("mousedown",this._handleRangeMousedownTouchstart),this.el.removeEventListener("touchstart",this._handleRangeMousedownTouchstart),this.el.removeEventListener("input",this._handleRangeInputMousemoveTouchmove),this.el.removeEventListener("mousemove",this._handleRangeInputMousemoveTouchmove),this.el.removeEventListener("touchmove",this._handleRangeInputMousemoveTouchmove),this.el.removeEventListener("mouseup",this._handleRangeMouseupTouchend),this.el.removeEventListener("touchend",this._handleRangeMouseupTouchend),this.el.removeEventListener("blur",this._handleRangeBlurMouseoutTouchleave),this.el.removeEventListener("mouseout",this._handleRangeBlurMouseoutTouchleave),this.el.removeEventListener("touchleave",this._handleRangeBlurMouseoutTouchleave)}_handleRangeChange=()=>{this.value.innerHTML=this.el.value,this.thumb.classList.contains("active")||this._showRangeBubble();const t=this._calcRangeOffset();this.thumb.classList.add("active"),this.thumb.style.left=t+"px"};_handleRangeMousedownTouchstart=t=>{if(this.value.innerHTML=this.el.value,this._mousedown=!0,this.el.classList.add("active"),this.thumb.classList.contains("active")||this._showRangeBubble(),"input"!==t.type){const t=this._calcRangeOffset();this.thumb.classList.add("active"),this.thumb.style.left=t+"px"}};_handleRangeInputMousemoveTouchmove=()=>{if(this._mousedown){this.thumb.classList.contains("active")||this._showRangeBubble();const t=this._calcRangeOffset();this.thumb.classList.add("active"),this.thumb.style.left=t+"px",this.value.innerHTML=this.el.value}};_handleRangeMouseupTouchend=()=>{this._mousedown=!1,this.el.classList.remove("active")};_handleRangeBlurMouseoutTouchleave=()=>{if(!this._mousedown){const t=7+parseInt(getComputedStyle(this.el).paddingLeft)+"px";if(this.thumb.classList.contains("active")){const e=100;this.thumb.style.transition="none",setTimeout((()=>{this.thumb.style.transition=`\n height ${e}ms ease,\n width ${e}ms ease,\n top ${e}ms ease,\n margin ${e}ms ease\n `,this.thumb.style.height="0",this.thumb.style.width="0",this.thumb.style.top="0",this.thumb.style.marginLeft=t}),1)}this.thumb.classList.remove("active")}};_setupThumb(){this.thumb=document.createElement("span"),this.value=document.createElement("span"),this.thumb.classList.add("thumb"),this.value.classList.add("value"),this.thumb.append(this.value),this.el.after(this.thumb)}_removeThumb(){this.thumb.remove()}_showRangeBubble(){const t=-7+parseInt(getComputedStyle(this.thumb.parentElement).paddingLeft)+"px";this.thumb.style.transition="\n height 300ms ease,\n width 300ms ease,\n top 300ms ease,\n margin 300ms ease\n ",this.thumb.style.height="30px",this.thumb.style.width="30px",this.thumb.style.top="-30px",this.thumb.style.marginLeft=t}_calcRangeOffset(){const t=this.el.getBoundingClientRect().width-15,e=parseFloat(this.el.getAttribute("max"))||100,i=parseFloat(this.el.getAttribute("min"))||0;return(parseFloat(this.el.value)-i)/(e-i)*t}static Init(){"undefined"!=typeof document&&z.init(document?.querySelectorAll("input[type=range]"),{})}}const X=Object.freeze({});class Y extends i{counterEl;isInvalid;isValidLength;constructor(t,e){super(t,{},Y),this.el.M_CharacterCounter=this,this.options={...Y.defaults,...e},this.isInvalid=!1,this.isValidLength=!1,this._setupCounter(),this._setupEventHandlers()}static get defaults(){return X}static init(t,e={}){return super.init(t,e,Y)}static getInstance(t){return t.M_CharacterCounter}destroy(){this._removeEventHandlers(),this.el.CharacterCounter=void 0,this._removeCounter()}_setupEventHandlers(){this.el.addEventListener("focus",this.updateCounter,!0),this.el.addEventListener("input",this.updateCounter,!0)}_removeEventHandlers(){this.el.removeEventListener("focus",this.updateCounter,!0),this.el.removeEventListener("input",this.updateCounter,!0)}_setupCounter(){this.counterEl=document.createElement("span"),this.counterEl.classList.add("character-counter"),this.counterEl.style.float="right",this.counterEl.style.fontSize="12px",this.counterEl.style.height="1",this.el.parentElement.appendChild(this.counterEl)}_removeCounter(){this.counterEl.remove()}updateCounter=()=>{let t=parseInt(this.el.getAttribute("maxlength")),e=this.el.value.length;this.isValidLength=e<=t;let i=e.toString();t&&(i+="/"+t,this._validateInput()),this.counterEl.innerHTML=i};_validateInput(){this.isValidLength&&this.isInvalid?(this.isInvalid=!1,this.el.classList.remove("invalid")):this.isValidLength||this.isInvalid||(this.isInvalid=!0,this.el.classList.remove("valid"),this.el.classList.add("invalid"))}}let K={indicators:!0,height:400,duration:500,interval:6e3,pauseOnFocus:!0,pauseOnHover:!0,indicatorLabelFunc:null};class j extends i{activeIndex;interval;eventPause;_slider;_slides;_activeSlide;_indicators;_hovered;_focused;_focusCurrent;_sliderId;constructor(t,i){super(t,i,j),this.el.M_Slider=this,this.options={...j.defaults,...i},this.interval=null,this.eventPause=!1,this._hovered=!1,this._focused=!1,this._focusCurrent=!1,this._slider=this.el.querySelector(".slides"),this._slides=Array.from(this._slider.querySelectorAll("li")),this.activeIndex=this._slides.findIndex((t=>t.classList.contains("active"))),-1!==this.activeIndex&&(this._activeSlide=this._slides[this.activeIndex]),this._setSliderHeight(),this._slider.hasAttribute("id")?this._sliderId=this._slider.getAttribute("id"):(this._sliderId="slider-"+e.guid(),this._slider.setAttribute("id",this._sliderId));const s="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";this._slides.forEach((t=>{const e=t.querySelector("img");e&&e.src!==s&&(e.style.backgroundImage="url("+e.src+")",e.src=s),t.hasAttribute("tabindex")||t.setAttribute("tabindex","-1"),t.style.visibility="hidden"})),this._setupIndicators(),this._activeSlide?(this._activeSlide.style.display="block",this._activeSlide.style.visibility="visible"):(this.activeIndex=0,this._slides[0].classList.add("active"),this._slides[0].style.visibility="visible",this._activeSlide=this._slides[0],this._animateSlide(this._slides[0],!0),this.options.indicators&&this._indicators[this.activeIndex].children[0].classList.add("active")),this._setupEventHandlers(),this.start()}static get defaults(){return K}static init(t,e={}){return super.init(t,e,j)}static getInstance(t){return t.M_Slider}destroy(){this.pause(),this._removeIndicators(),this._removeEventHandlers(),this.el.M_Slider=void 0}_setupEventHandlers(){this.options.pauseOnFocus&&(this.el.addEventListener("focusin",this._handleAutoPauseFocus),this.el.addEventListener("focusout",this._handleAutoStartFocus)),this.options.pauseOnHover&&(this.el.addEventListener("mouseenter",this._handleAutoPauseHover),this.el.addEventListener("mouseleave",this._handleAutoStartHover)),this.options.indicators&&this._indicators.forEach((t=>{t.addEventListener("click",this._handleIndicatorClick)}))}_removeEventHandlers(){this.options.pauseOnFocus&&(this.el.removeEventListener("focusin",this._handleAutoPauseFocus),this.el.removeEventListener("focusout",this._handleAutoStartFocus)),this.options.pauseOnHover&&(this.el.removeEventListener("mouseenter",this._handleAutoPauseHover),this.el.removeEventListener("mouseleave",this._handleAutoStartHover)),this.options.indicators&&this._indicators.forEach((t=>{t.removeEventListener("click",this._handleIndicatorClick)}))}_handleIndicatorClick=t=>{const e=t.target.parentElement,i=[...e.parentNode.children].indexOf(e);this._focusCurrent=!0,this.set(i)};_handleAutoPauseHover=()=>{this._hovered=!0,null!=this.interval&&this._pause(!0)};_handleAutoPauseFocus=()=>{this._focused=!0,null!=this.interval&&this._pause(!0)};_handleAutoStartHover=()=>{this._hovered=!1,this.options.pauseOnFocus&&this._focused||!this.eventPause||this.start()};_handleAutoStartFocus=()=>{this._focused=!1,this.options.pauseOnHover&&this._hovered||!this.eventPause||this.start()};_handleInterval=()=>{const t=this._slider.querySelector(".active");let e=[...t.parentNode.children].indexOf(t);this._slides.length===e+1?e=0:e+=1,this.set(e)};_animateSlide(t,e){let i=0,s=0;t.style.opacity=e?"0":"1",setTimeout((()=>{t.style.transition=`opacity ${this.options.duration}ms ease`,t.style.opacity=e?"1":"0"}),1);const n=t.querySelector(".caption");n&&(n.classList.contains("center-align")?s=-100:n.classList.contains("right-align")?i=100:n.classList.contains("left-align")&&(i=-100),n.style.opacity=e?"0":"1",n.style.transform=e?`translate(${i}px, ${s}px)`:"translate(0, 0)",setTimeout((()=>{n.style.transition=`opacity ${this.options.duration}ms ease, transform ${this.options.duration}ms ease`,n.style.opacity=e?"1":"0",n.style.transform=e?"translate(0, 0)":`translate(${i}px, ${s}px)`}),this.options.duration))}_setSliderHeight(){this.el.classList.contains("fullscreen")||(this.options.indicators?this.el.style.height=this.options.height+40+"px":this.el.style.height=this.options.height+"px",this._slider.style.height=this.options.height+"px")}_setupIndicators(){if(this.options.indicators){const t=document.createElement("ul");t.classList.add("indicators");const e=[];this._slides.forEach(((i,s)=>{const n=this.options.indicatorLabelFunc?this.options.indicatorLabelFunc.call(this,s+1,0===s):`${s+1}`,o=document.createElement("li");o.classList.add("indicator-item"),o.innerHTML=``,e.push(o),t.append(o)})),this.el.append(t),this._indicators=e}}_removeIndicators(){this.el.querySelector("ul.indicators").remove()}set(t){if(t>=this._slides.length?t=0:t<0&&(t=this._slides.length-1),this.activeIndex===t)return;this._activeSlide=this._slides[this.activeIndex];const e=this._activeSlide.querySelector(".caption");if(this._activeSlide.classList.remove("active"),this._slides.forEach((t=>t.style.visibility="visible")),this._activeSlide.style.opacity="0",setTimeout((()=>{this._slides.forEach((t=>{t.classList.contains("active")||(t.style.opacity="0",t.style.transform="translate(0, 0)",t.style.visibility="hidden")}))}),this.options.duration),e.style.opacity="0",this.options.indicators){const e=this._indicators[this.activeIndex].children[0],i=this._indicators[t].children[0];e.classList.remove("active"),i.classList.add("active"),"function"==typeof this.options.indicatorLabelFunc&&(e.ariaLabel=this.options.indicatorLabelFunc.call(this,this.activeIndex,!1),i.ariaLabel=this.options.indicatorLabelFunc.call(this,t,!0))}this._animateSlide(this._slides[t],!0),this._slides[t].classList.add("active"),this.activeIndex=t,null!=this.interval&&this.start()}_pause(t){clearInterval(this.interval),this.eventPause=t,this.interval=null}pause=()=>{this._pause(!1)};start=()=>{clearInterval(this.interval),this.interval=setInterval(this._handleInterval,this.options.duration+this.options.interval),this.eventPause=!1};next=()=>{let t=this.activeIndex+1;t>=this._slides.length?t=0:t<0&&(t=this._slides.length-1),this.set(t)};prev=()=>{let t=this.activeIndex-1;t>=this._slides.length?t=0:t<0&&(t=this._slides.length-1),this.set(t)}}let U={text:"",displayLength:4e3,inDuration:300,outDuration:375,classes:"",completeCallback:null,activationPercent:.8};class G{el;timeRemaining;panning;options;message;counterInterval;wasSwiped;startingXPos;xPos;time;deltaX;velocityX;static _toasts;static _container;static _draggedToast;constructor(t){this.options={...G.defaults,...t},this.message=this.options.text,this.panning=!1,this.timeRemaining=this.options.displayLength,0===G._toasts.length&&G._createContainer(),G._toasts.push(this);let e=this._createToast();e.M_Toast=this,this.el=e,this._animateIn(),this._setTimer()}static get defaults(){return U}static getInstance(t){return t.M_Toast}static _createContainer(){const t=document.createElement("div");t.setAttribute("id","toast-container"),t.addEventListener("touchstart",G._onDragStart),t.addEventListener("touchmove",G._onDragMove),t.addEventListener("touchend",G._onDragEnd),t.addEventListener("mousedown",G._onDragStart),document.addEventListener("mousemove",G._onDragMove),document.addEventListener("mouseup",G._onDragEnd),document.body.appendChild(t),G._container=t}static _removeContainer(){document.removeEventListener("mousemove",G._onDragMove),document.removeEventListener("mouseup",G._onDragEnd),G._container.remove(),G._container=null}static _onDragStart(t){if(t.target&&t.target.closest(".toast")){const e=t.target.closest(".toast").M_Toast;e.panning=!0,G._draggedToast=e,e.el.classList.add("panning"),e.el.style.transition="",e.startingXPos=G._xPos(t),e.time=Date.now(),e.xPos=G._xPos(t)}}static _onDragMove(t){if(G._draggedToast){t.preventDefault();const e=G._draggedToast;e.deltaX=Math.abs(e.xPos-G._xPos(t)),e.xPos=G._xPos(t),e.velocityX=e.deltaX/(Date.now()-e.time),e.time=Date.now();const i=e.xPos-e.startingXPos,s=e.el.offsetWidth*e.options.activationPercent;e.el.style.transform=`translateX(${i}px)`,e.el.style.opacity=(1-Math.abs(i/s)).toString()}}static _onDragEnd(){if(G._draggedToast){let t=G._draggedToast;t.panning=!1,t.el.classList.remove("panning");let e=t.xPos-t.startingXPos,i=t.el.offsetWidth*t.options.activationPercent;Math.abs(e)>i||t.velocityX>1?(t.wasSwiped=!0,t.dismiss()):(t.el.style.transition="transform .2s, opacity .2s",t.el.style.transform="",t.el.style.opacity=""),G._draggedToast=null}}static _xPos(t){return t.type.startsWith("touch")&&t.targetTouches.length>=1?t.targetTouches[0].clientX:t.clientX}static dismissAll(){for(let t in G._toasts)G._toasts[t].dismiss()}_createToast(){let t=this.options.toastId?document.getElementById(this.options.toastId):document.createElement("div");if(t instanceof HTMLTemplateElement){const e=t.content.cloneNode(!0);t=e.firstElementChild}return t.classList.add("toast"),t.setAttribute("role","alert"),t.setAttribute("aria-live","assertive"),t.setAttribute("aria-atomic","true"),this.options.classes.length>0&&t.classList.add(...this.options.classes.split(" ")),this.message&&(t.innerText=this.message),G._container.appendChild(t),t}_animateIn(){this.el.style.display="",this.el.style.opacity="0",this.el.style.transition=`\n top ${this.options.inDuration}ms ease,\n opacity ${this.options.inDuration}ms ease\n `,setTimeout((()=>{this.el.style.top="0",this.el.style.opacity="1"}),1)}_setTimer(){this.timeRemaining!==1/0&&(this.counterInterval=setInterval((()=>{this.panning||(this.timeRemaining-=20),this.timeRemaining<=0&&this.dismiss()}),20))}dismiss(){window.clearInterval(this.counterInterval);let t=this.el.offsetWidth*this.options.activationPercent;this.wasSwiped&&(this.el.style.transition="transform .05s, opacity .05s",this.el.style.transform=`translateX(${t}px)`,this.el.style.opacity="0"),this.el.style.transition=`\n margin ${this.options.outDuration}ms ease,\n opacity ${this.options.outDuration}ms ease`,setTimeout((()=>{this.el.style.opacity="0",this.el.style.marginTop="-40px"}),1),setTimeout((()=>{"function"==typeof this.options.completeCallback&&this.options.completeCallback(),this.el.id!=this.options.toastId&&(this.el.remove(),G._toasts.splice(G._toasts.indexOf(this),1),0===G._toasts.length&&G._removeContainer())}),this.options.outDuration)}static{G._toasts=[],G._container=null,G._draggedToast=null}}return"undefined"!=typeof document&&(document.addEventListener("keydown",e.docHandleKeydown,!0),document.addEventListener("keyup",e.docHandleKeyup,!0),document.addEventListener("focus",e.docHandleFocus,!0),document.addEventListener("blur",e.docHandleBlur,!0)),r.Init(),L.Init(),m.Init(),V.Init(),z.Init(),t.AutoInit=function(t=document.body){let e={Autocomplete:t.querySelectorAll(".autocomplete:not(.no-autoinit)"),Carousel:t.querySelectorAll(".carousel:not(.no-autoinit)"),Chips:t.querySelectorAll(".chips:not(.no-autoinit)"),Collapsible:t.querySelectorAll(".collapsible:not(.no-autoinit)"),Datepicker:t.querySelectorAll(".datepicker:not(.no-autoinit)"),Dropdown:t.querySelectorAll(".dropdown-trigger:not(.no-autoinit)"),Materialbox:t.querySelectorAll(".materialboxed:not(.no-autoinit)"),Modal:t.querySelectorAll(".modal:not(.no-autoinit)"),Parallax:t.querySelectorAll(".parallax:not(.no-autoinit)"),Pushpin:t.querySelectorAll(".pushpin:not(.no-autoinit)"),ScrollSpy:t.querySelectorAll(".scrollspy:not(.no-autoinit)"),FormSelect:t.querySelectorAll("select:not(.no-autoinit)"),Sidenav:t.querySelectorAll(".sidenav:not(.no-autoinit)"),Tabs:t.querySelectorAll(".tabs:not(.no-autoinit)"),TapTarget:t.querySelectorAll(".tap-target:not(.no-autoinit)"),Timepicker:t.querySelectorAll(".timepicker:not(.no-autoinit)"),Tooltip:t.querySelectorAll(".tooltipped:not(.no-autoinit)"),FloatingActionButton:t.querySelectorAll(".fixed-action-btn:not(.no-autoinit)")};l.init(e.Autocomplete,{}),c.init(e.Carousel,{}),m.init(e.Chips,{}),v.init(e.Collapsible,{}),b.init(e.Datepicker,{}),n.init(e.Dropdown,{}),k.init(e.Materialbox,{}),y.init(e.Modal,{}),x.init(e.Parallax,{}),D.init(e.Pushpin,{}),A.init(e.ScrollSpy,{}),w.init(e.FormSelect,{}),I.init(e.Sidenav,{}),H.init(e.Tabs,{}),P.init(e.TapTarget,{}),q.init(e.Timepicker,{}),$.init(e.Tooltip,{}),h.init(e.FloatingActionButton,{})},t.Autocomplete=l,t.Button=function(t=""){return``},t.Cards=r,t.Carousel=c,t.CharacterCounter=Y,t.Chips=m,t.Collapsible=v,t.Datepicker=b,t.Dropdown=n,t.FloatingActionButton=h,t.FormSelect=w,t.Forms=L,t.Grid=(t="")=>`
${t}`,t.Materialbox=k,t.Modal=y,t.Parallax=x,t.Pushpin=D,t.Range=z,t.ScrollSpy=A,t.Sidenav=I,t.Slider=j,t.Tabs=H,t.TapTarget=P,t.Timepicker=q,t.Toast=G,t.Tooltip=$,t.Waves=V,t.version="2.1.1",t}({}); diff --git a/dist/js/materialize.mjs b/dist/js/materialize.mjs new file mode 100644 index 0000000000..d57689d652 --- /dev/null +++ b/dist/js/materialize.mjs @@ -0,0 +1,7563 @@ +/*! +* Materialize v2.1.1 (https://materializeweb.com) +* Copyright 2014-2024 Materialize +* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE) +*/ +/** + * Class with utilitary functions for global usage. + */ +class Utils { + /** Specifies wether tab is pressed or not. */ + static tabPressed = false; + /** Specifies wether there is a key pressed. */ + static keyDown = false; + /** + * Key maps. + */ + static keys = { + TAB: ['Tab'], + ENTER: ['Enter'], + ESC: ['Escape', 'Esc'], + BACKSPACE: ['Backspace'], + ARROW_UP: ['ArrowUp', 'Up'], + ARROW_DOWN: ['ArrowDown', 'Down'], + ARROW_LEFT: ['ArrowLeft', 'Left'], + ARROW_RIGHT: ['ArrowRight', 'Right'], + DELETE: ['Delete', 'Del'], + }; + /** + * Detects when a key is pressed. + * @param e Event instance. + */ + static docHandleKeydown(e) { + Utils.keyDown = true; + if ([...Utils.keys.TAB, ...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP].includes(e.key)) { + Utils.tabPressed = true; + } + } + /** + * Detects when a key is released. + * @param e Event instance. + */ + static docHandleKeyup(e) { + Utils.keyDown = false; + if ([...Utils.keys.TAB, ...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP].includes(e.key)) { + Utils.tabPressed = false; + } + } + /** + * Detects when document is focused. + * @param e Event instance. + */ + static docHandleFocus(e) { + if (Utils.keyDown) { + document.body.classList.add('keyboard-focused'); + } + } + /** + * Detects when document is not focused. + * @param e Event instance. + */ + static docHandleBlur(e) { + document.body.classList.remove('keyboard-focused'); + } + /** + * Generates a unique string identifier. + */ + static guid() { + const s4 = () => { + return Math.floor((1 + Math.random()) * 0x10000) + .toString(16) + .substring(1); + }; + return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); + } + /** + * Checks for exceeded edges + * @param container Container element. + * @param bounding Bounding rect. + * @param offset Element offset. + */ + static checkWithinContainer(container, bounding, offset) { + let edges = { + top: false, + right: false, + bottom: false, + left: false + }; + let containerRect = container.getBoundingClientRect(); + // If body element is smaller than viewport, use viewport height instead. + let containerBottom = container === document.body + ? Math.max(containerRect.bottom, window.innerHeight) + : containerRect.bottom; + let scrollLeft = container.scrollLeft; + let scrollTop = container.scrollTop; + let scrolledX = bounding.left - scrollLeft; + let scrolledY = bounding.top - scrollTop; + // Check for container and viewport for each edge + if (scrolledX < containerRect.left + offset || scrolledX < offset) { + edges.left = true; + } + if (scrolledX + bounding.width > containerRect.right - offset || + scrolledX + bounding.width > window.innerWidth - offset) { + edges.right = true; + } + if (scrolledY < containerRect.top + offset || scrolledY < offset) { + edges.top = true; + } + if (scrolledY + bounding.height > containerBottom - offset || + scrolledY + bounding.height > window.innerHeight - offset) { + edges.bottom = true; + } + return edges; + } + /** + * Checks if element can be aligned in multiple directions. + * @param el Element to be inspected. + * @param container Container element. + * @param bounding Bounding rect. + * @param offset Element offset. + */ + static checkPossibleAlignments(el, container, bounding, offset) { + let canAlign = { + top: true, + right: true, + bottom: true, + left: true, + spaceOnTop: null, + spaceOnRight: null, + spaceOnBottom: null, + spaceOnLeft: null + }; + let containerAllowsOverflow = getComputedStyle(container).overflow === 'visible'; + let containerRect = container.getBoundingClientRect(); + let containerHeight = Math.min(containerRect.height, window.innerHeight); + let containerWidth = Math.min(containerRect.width, window.innerWidth); + let elOffsetRect = el.getBoundingClientRect(); + let scrollLeft = container.scrollLeft; + let scrollTop = container.scrollTop; + let scrolledX = bounding.left - scrollLeft; + let scrolledYTopEdge = bounding.top - scrollTop; + let scrolledYBottomEdge = bounding.top + elOffsetRect.height - scrollTop; + // Check for container and viewport for left + canAlign.spaceOnRight = !containerAllowsOverflow + ? containerWidth - (scrolledX + bounding.width) + : window.innerWidth - (elOffsetRect.left + bounding.width); + if (canAlign.spaceOnRight < 0) { + canAlign.left = false; + } + // Check for container and viewport for Right + canAlign.spaceOnLeft = !containerAllowsOverflow + ? scrolledX - bounding.width + elOffsetRect.width + : elOffsetRect.right - bounding.width; + if (canAlign.spaceOnLeft < 0) { + canAlign.right = false; + } + // Check for container and viewport for Top + canAlign.spaceOnBottom = !containerAllowsOverflow + ? containerHeight - (scrolledYTopEdge + bounding.height + offset) + : window.innerHeight - (elOffsetRect.top + bounding.height + offset); + if (canAlign.spaceOnBottom < 0) { + canAlign.top = false; + } + // Check for container and viewport for Bottom + canAlign.spaceOnTop = !containerAllowsOverflow + ? scrolledYBottomEdge - (bounding.height - offset) + : elOffsetRect.bottom - (bounding.height + offset); + if (canAlign.spaceOnTop < 0) { + canAlign.bottom = false; + } + return canAlign; + } + /** + * Retrieves target element id from trigger. + * @param trigger Trigger element. + */ + static getIdFromTrigger(trigger) { + let id = trigger.dataset.target; + if (!id) { + id = trigger.getAttribute('href'); + return id ? id.slice(1) : ''; + } + return id; + } + /** + * Retrieves document scroll postion from top. + */ + static getDocumentScrollTop() { + return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0; + } + ; + /** + * Retrieves document scroll postion from left. + */ + static getDocumentScrollLeft() { + return window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft || 0; + } + /** + * Fires the given function after a certain ammount of time. + * @param func Function to be fired. + * @param wait Wait time. + * @param options Additional options. + */ + static throttle(func, wait, options = null) { + let context, args, result; + let timeout = null; + let previous = 0; + options || (options = {}); + let later = function () { + previous = options.leading === false ? 0 : new Date().getTime(); + timeout = null; + result = func.apply(context, args); + context = args = null; + }; + return function () { + let now = new Date().getTime(); + if (!previous && options.leading === false) + previous = now; + let remaining = wait - (now - previous); + context = this; + args = arguments; + if (remaining <= 0) { + clearTimeout(timeout); + timeout = null; + previous = now; + result = func.apply(context, args); + context = args = null; + } + else if (!timeout && options.trailing !== false) { + timeout = setTimeout(later, remaining); + } + return result; + }; + } +} + +/** + * Base class implementation for Materialize components. + */ +class Component { + /** + * The DOM element the plugin was initialized with. + */ + el; + /** + * The options the instance was initialized with. + */ + options; + /** + * Constructs component instance and set everything up. + */ + constructor(el, options, classDef) { + // Display error if el is not a valid HTML Element + if (!(el instanceof HTMLElement)) { + console.error(Error(el + ' is not an HTML Element')); + } + // If exists, destroy and reinitialize in child + let ins = classDef.getInstance(el); + if (!!ins) { + ins.destroy(); + } + this.el = el; + } + /** + * Initializes component instances. + * @param els HTML elements. + * @param options Component options. + * @param classDef Class definition. + */ + static init(els, options, classDef) { + let instances = null; + if (els instanceof Element) { + instances = new classDef(els, options); + } + else if (!!els && els.length) { + instances = []; + for (let i = 0; i < els.length; i++) { + instances.push(new classDef(els[i], options)); + } + } + return instances; + } + /** + * @returns default options for component instance. + */ + static get defaults() { return {}; } + /** + * Retrieves component instance for the given element. + * @param el Associated HTML Element. + */ + static getInstance(el) { + throw new Error("This method must be implemented."); + } + /** + * Destroy plugin instance and teardown. + */ + destroy() { throw new Error("This method must be implemented."); } +} + +const _defaults$l = { + alignment: 'left', + autoFocus: true, + constrainWidth: true, + container: null, + coverTrigger: true, + closeOnClick: true, + hover: false, + inDuration: 150, + outDuration: 250, + onOpenStart: null, + onOpenEnd: null, + onCloseStart: null, + onCloseEnd: null, + onItemClick: null +}; +class Dropdown extends Component { + static _dropdowns = []; + /** ID of the dropdown element. */ + id; + /** The DOM element of the dropdown. */ + dropdownEl; + /** If the dropdown is open. */ + isOpen; + /** If the dropdown content is scrollable. */ + isScrollable; + isTouchMoving; + /** The index of the item focused. */ + focusedIndex; + filterQuery; + filterTimeout; + constructor(el, options) { + super(el, options, Dropdown); + this.el.M_Dropdown = this; + Dropdown._dropdowns.push(this); + this.id = Utils.getIdFromTrigger(el); + this.dropdownEl = document.getElementById(this.id); + this.options = { + ...Dropdown.defaults, + ...options + }; + this.isOpen = false; + this.isScrollable = false; + this.isTouchMoving = false; + this.focusedIndex = -1; + this.filterQuery = []; + // Move dropdown-content after dropdown-trigger + this._moveDropdown(); + this._makeDropdownFocusable(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$l; + } + /** + * Initializes instances of Dropdown. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Dropdown); + } + static getInstance(el) { + return el.M_Dropdown; + } + destroy() { + this._resetDropdownStyles(); + this._removeEventHandlers(); + Dropdown._dropdowns.splice(Dropdown._dropdowns.indexOf(this), 1); + this.el.M_Dropdown = undefined; + } + _setupEventHandlers() { + // Trigger keydown handler + this.el.addEventListener('keydown', this._handleTriggerKeydown); + // Item click handler + this.dropdownEl?.addEventListener('click', this._handleDropdownClick); + // Hover event handlers + if (this.options.hover) { + this.el.addEventListener('mouseenter', this._handleMouseEnter); + this.el.addEventListener('mouseleave', this._handleMouseLeave); + this.dropdownEl.addEventListener('mouseleave', this._handleMouseLeave); + // Click event handlers + } + else { + this.el.addEventListener('click', this._handleClick); + } + } + _removeEventHandlers() { + this.el.removeEventListener('keydown', this._handleTriggerKeydown); + this.dropdownEl.removeEventListener('click', this._handleDropdownClick); + if (this.options.hover) { + this.el.removeEventListener('mouseenter', this._handleMouseEnter); + this.el.removeEventListener('mouseleave', this._handleMouseLeave); + this.dropdownEl.removeEventListener('mouseleave', this._handleMouseLeave); + } + else { + this.el.removeEventListener('click', this._handleClick); + } + } + _setupTemporaryEventHandlers() { + document.body.addEventListener('click', this._handleDocumentClick); + document.body.addEventListener('touchmove', this._handleDocumentTouchmove); + this.dropdownEl.addEventListener('keydown', this._handleDropdownKeydown); + window.addEventListener('resize', this._handleWindowResize); + } + _removeTemporaryEventHandlers() { + document.body.removeEventListener('click', this._handleDocumentClick); + document.body.removeEventListener('touchmove', this._handleDocumentTouchmove); + this.dropdownEl.removeEventListener('keydown', this._handleDropdownKeydown); + window.removeEventListener('resize', this._handleWindowResize); + } + _handleClick = (e) => { + e.preventDefault(); + if (this.isOpen) { + this.close(); + } + else { + this.open(); + } + }; + _handleMouseEnter = () => { + this.open(); + }; + _handleMouseLeave = (e) => { + const toEl = e.relatedTarget; + const leaveToDropdownContent = !!toEl.closest('.dropdown-content'); + let leaveToActiveDropdownTrigger = false; + const closestTrigger = toEl.closest('.dropdown-trigger'); + if (closestTrigger && + !!closestTrigger.M_Dropdown && + closestTrigger.M_Dropdown.isOpen) { + leaveToActiveDropdownTrigger = true; + } + // Close hover dropdown if mouse did not leave to either active dropdown-trigger or dropdown-content + if (!leaveToActiveDropdownTrigger && !leaveToDropdownContent) { + this.close(); + } + }; + _handleDocumentClick = (e) => { + const target = e.target; + if (this.options.closeOnClick && + target.closest('.dropdown-content') && + !this.isTouchMoving) { + // isTouchMoving to check if scrolling on mobile. + this.close(); + } + else if (!target.closest('.dropdown-content')) { + // Do this one frame later so that if the element clicked also triggers _handleClick + // For example, if a label for a select was clicked, that we don't close/open the dropdown + setTimeout(() => { + if (this.isOpen) { + this.close(); + } + }, 0); + } + this.isTouchMoving = false; + }; + _handleTriggerKeydown = (e) => { + // ARROW DOWN OR ENTER WHEN SELECT IS CLOSED - open Dropdown + const arrowDownOrEnter = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ENTER.includes(e.key); + if (arrowDownOrEnter && !this.isOpen) { + e.preventDefault(); + this.open(); + } + }; + _handleDocumentTouchmove = (e) => { + const target = e.target; + if (target.closest('.dropdown-content')) { + this.isTouchMoving = true; + } + }; + _handleDropdownClick = (e) => { + // onItemClick callback + if (typeof this.options.onItemClick === 'function') { + const itemEl = e.target.closest('li'); + this.options.onItemClick.call(this, itemEl); + } + }; + _handleDropdownKeydown = (e) => { + const arrowUpOrDown = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ARROW_UP.includes(e.key); + if (Utils.keys.TAB.includes(e.key)) { + e.preventDefault(); + this.close(); + } + // Navigate down dropdown list + else if (arrowUpOrDown && this.isOpen) { + e.preventDefault(); + const direction = Utils.keys.ARROW_DOWN.includes(e.key) ? 1 : -1; + let newFocusedIndex = this.focusedIndex; + let hasFoundNewIndex = false; + do { + newFocusedIndex = newFocusedIndex + direction; + if (!!this.dropdownEl.children[newFocusedIndex] && + this.dropdownEl.children[newFocusedIndex].tabIndex !== -1) { + hasFoundNewIndex = true; + break; + } + } while (newFocusedIndex < this.dropdownEl.children.length && newFocusedIndex >= 0); + if (hasFoundNewIndex) { + // Remove active class from old element + if (this.focusedIndex >= 0) + this.dropdownEl.children[this.focusedIndex].classList.remove('active'); + this.focusedIndex = newFocusedIndex; + this._focusFocusedItem(); + } + } + // ENTER selects choice on focused item + else if (Utils.keys.ENTER.includes(e.key) && this.isOpen) { + // Search for and ` + + ''); + } + renderRow(days, isRTL, isRowSelected) { + return ('' + + (isRTL ? days.reverse() : days).join('') + + ''); + } + renderTable(opts, data, randId) { + return ('
' + + this.renderHead(opts) + + this.renderBody(data) + + '
'); + } + renderHead(opts) { + let i, arr = []; + for (i = 0; i < 7; i++) { + arr.push(`${this.renderDayName(opts, i, true)}`); + } + return '' + (opts.isRTL ? arr.reverse() : arr).join('') + ''; + } + renderBody(rows) { + return '' + rows.join('') + ''; + } + renderTitle(instance, c, year, month, refYear, randId) { + let i, j, arr, opts = this.options, isMinYear = year === opts.minYear, isMaxYear = year === opts.maxYear, html = '
', monthHtml, yearHtml, prev = true, next = true; + for (arr = [], i = 0; i < 12; i++) { + arr.push(''); + } + monthHtml = ''; + if (Array.isArray(opts.yearRange)) { + i = opts.yearRange[0]; + j = opts.yearRange[1] + 1; + } + else { + i = year - opts.yearRange; + j = 1 + year + opts.yearRange; + } + for (arr = []; i < j && i <= opts.maxYear; i++) { + if (i >= opts.minYear) { + arr.push(``); + } + } + if (opts.yearRangeReverse) + arr.reverse(); + yearHtml = ``; + let leftArrow = ''; + html += ``; + html += '
'; + if (opts.showMonthAfterYear) { + html += yearHtml + monthHtml; + } + else { + html += monthHtml + yearHtml; + } + html += '
'; + if (isMinYear && (month === 0 || opts.minMonth >= month)) { + prev = false; + } + if (isMaxYear && (month === 11 || opts.maxMonth <= month)) { + next = false; + } + let rightArrow = ''; + html += ``; + return (html += '
'); + } + // refresh HTML + draw(force = false) { + if (!this.isOpen && !force) + return; + let opts = this.options, minYear = opts.minYear, maxYear = opts.maxYear, minMonth = opts.minMonth, maxMonth = opts.maxMonth, html = '', randId; + if (this._y <= minYear) { + this._y = minYear; + if (!isNaN(minMonth) && this._m < minMonth) { + this._m = minMonth; + } + } + if (this._y >= maxYear) { + this._y = maxYear; + if (!isNaN(maxMonth) && this._m > maxMonth) { + this._m = maxMonth; + } + } + randId = + 'datepicker-title-' + + Math.random() + .toString(36) + .replace(/[^a-z]+/g, '') + .substr(0, 2); + for (let c = 0; c < 1; c++) { + this._renderDateDisplay(); + html += + this.renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year, randId) + this.render(this.calendars[c].year, this.calendars[c].month, randId); + } + this.destroySelects(); + this.calendarEl.innerHTML = html; + // Init Materialize Select + let yearSelect = this.calendarEl.querySelector('.orig-select-year'); + let monthSelect = this.calendarEl.querySelector('.orig-select-month'); + FormSelect.init(yearSelect, { + classes: 'select-year', + dropdownOptions: { container: document.body, constrainWidth: false } + }); + FormSelect.init(monthSelect, { + classes: 'select-month', + dropdownOptions: { container: document.body, constrainWidth: false } + }); + // Add change handlers for select + yearSelect.addEventListener('change', this._handleYearChange); + monthSelect.addEventListener('change', this._handleMonthChange); + if (typeof this.options.onDraw === 'function') { + this.options.onDraw.call(this); + } + } + _setupEventHandlers() { + this.el.addEventListener('click', this._handleInputClick); + this.el.addEventListener('keydown', this._handleInputKeydown); + this.el.addEventListener('change', this._handleInputChange); + this.calendarEl.addEventListener('click', this._handleCalendarClick); + this.doneBtn.addEventListener('click', this._finishSelection); + this.cancelBtn.addEventListener('click', this.close); + if (this.options.showClearBtn) { + this.clearBtn.addEventListener('click', this._handleClearClick); + } + } + _setupVariables() { + const template = document.createElement('template'); + template.innerHTML = Datepicker._template.trim(); + this.modalEl = template.content.firstChild; + this.calendarEl = this.modalEl.querySelector('.datepicker-calendar'); + this.yearTextEl = this.modalEl.querySelector('.year-text'); + this.dateTextEl = this.modalEl.querySelector('.date-text'); + if (this.options.showClearBtn) { + this.clearBtn = this.modalEl.querySelector('.datepicker-clear'); + } + this.doneBtn = this.modalEl.querySelector('.datepicker-done'); + this.cancelBtn = this.modalEl.querySelector('.datepicker-cancel'); + this.formats = { + d: () => { + return this.date.getDate(); + }, + dd: () => { + let d = this.date.getDate(); + return (d < 10 ? '0' : '') + d; + }, + ddd: () => { + return this.options.i18n.weekdaysShort[this.date.getDay()]; + }, + dddd: () => { + return this.options.i18n.weekdays[this.date.getDay()]; + }, + m: () => { + return this.date.getMonth() + 1; + }, + mm: () => { + let m = this.date.getMonth() + 1; + return (m < 10 ? '0' : '') + m; + }, + mmm: () => { + return this.options.i18n.monthsShort[this.date.getMonth()]; + }, + mmmm: () => { + return this.options.i18n.months[this.date.getMonth()]; + }, + yy: () => { + return ('' + this.date.getFullYear()).slice(2); + }, + yyyy: () => { + return this.date.getFullYear(); + } + }; + } + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleInputClick); + this.el.removeEventListener('keydown', this._handleInputKeydown); + this.el.removeEventListener('change', this._handleInputChange); + this.calendarEl.removeEventListener('click', this._handleCalendarClick); + } + _handleInputClick = () => { + this.open(); + }; + _handleInputKeydown = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + e.preventDefault(); + this.open(); + } + }; + _handleCalendarClick = (e) => { + if (!this.isOpen) + return; + const target = (e.target); + if (!target.classList.contains('is-disabled')) { + if (target.classList.contains('datepicker-day-button') && + !target.classList.contains('is-empty') && + !target.parentElement.classList.contains('is-disabled')) { + this.setDate(new Date(e.target.getAttribute('data-year'), e.target.getAttribute('data-month'), e.target.getAttribute('data-day'))); + if (this.options.autoClose) { + this._finishSelection(); + } + } + else if (target.closest('.month-prev')) { + this.prevMonth(); + } + else if (target.closest('.month-next')) { + this.nextMonth(); + } + } + }; + _handleClearClick = () => { + this.date = null; + this.setInputValue(); + this.close(); + }; + _handleMonthChange = (e) => { + this.gotoMonth(e.target.value); + }; + _handleYearChange = (e) => { + this.gotoYear(e.target.value); + }; + // change view to a specific month (zero-index, e.g. 0: January) + gotoMonth(month) { + if (!isNaN(month)) { + this.calendars[0].month = parseInt(month, 10); + this.adjustCalendars(); + } + } + // change view to a specific full year (e.g. "2012") + gotoYear(year) { + if (!isNaN(year)) { + this.calendars[0].year = parseInt(year, 10); + this.adjustCalendars(); + } + } + _handleInputChange = (e) => { + let date; + // Prevent change event from being fired when triggered by the plugin + if (e['detail']?.firedBy === this) + return; + if (this.options.parse) { + date = this.options.parse(this.el.value, typeof this.options.format === "function" + ? this.options.format(new Date(this.el.value)) + : this.options.format); + } + else { + date = new Date(Date.parse(this.el.value)); + } + if (Datepicker._isDate(date)) + this.setDate(date); + }; + renderDayName(opts, day, abbr = false) { + day += opts.firstDay; + while (day >= 7) { + day -= 7; + } + return abbr ? opts.i18n.weekdaysAbbrev[day] : opts.i18n.weekdays[day]; + } + // Set input value to the selected date and close Datepicker + _finishSelection = () => { + this.setInputValue(); + this.close(); + }; + /** + * Open datepicker. + */ + open = () => { + if (this.isOpen) + return; + this.isOpen = true; + if (typeof this.options.onOpen === 'function') { + this.options.onOpen.call(this); + } + this.draw(); + this.modal.open(undefined); + return this; + }; + /** + * Close datepicker. + */ + close = () => { + if (!this.isOpen) + return; + this.isOpen = false; + if (typeof this.options.onClose === 'function') { + this.options.onClose.call(this); + } + this.modal.close(); + return this; + }; + static { + Datepicker._template = ` +
+
+
+ + +
+
+
+
+ +
+ + +
+
+
+
+
`; + } +} + +class Forms { + /** + * Resizes the given TextArea after updating the + * value content dynamically. + * @param textarea TextArea to be resized + */ + static textareaAutoResize(textarea) { + if (!textarea) { + console.error('No textarea element found'); + return; + } + // Textarea Auto Resize + let hiddenDiv = document.querySelector('.hiddendiv'); + if (!hiddenDiv) { + hiddenDiv = document.createElement('div'); + hiddenDiv.classList.add('hiddendiv', 'common'); + document.body.append(hiddenDiv); + } + const style = getComputedStyle(textarea); + // Set font properties of hiddenDiv + const fontFamily = style.fontFamily; //textarea.css('font-family'); + const fontSize = style.fontSize; //textarea.css('font-size'); + const lineHeight = style.lineHeight; //textarea.css('line-height'); + // Firefox can't handle padding shorthand. + const paddingTop = style.paddingTop; //getComputedStyle(textarea).css('padding-top'); + const paddingRight = style.paddingRight; //textarea.css('padding-right'); + const paddingBottom = style.paddingBottom; //textarea.css('padding-bottom'); + const paddingLeft = style.paddingLeft; //textarea.css('padding-left'); + if (fontSize) + hiddenDiv.style.fontSize = fontSize; //('font-size', fontSize); + if (fontFamily) + hiddenDiv.style.fontFamily = fontFamily; //css('font-family', fontFamily); + if (lineHeight) + hiddenDiv.style.lineHeight = lineHeight; //css('line-height', lineHeight); + if (paddingTop) + hiddenDiv.style.paddingTop = paddingTop; //ss('padding-top', paddingTop); + if (paddingRight) + hiddenDiv.style.paddingRight = paddingRight; //css('padding-right', paddingRight); + if (paddingBottom) + hiddenDiv.style.paddingBottom = paddingBottom; //css('padding-bottom', paddingBottom); + if (paddingLeft) + hiddenDiv.style.paddingLeft = paddingLeft; //css('padding-left', paddingLeft); + // Set original-height, if none + if (!textarea.hasAttribute('original-height')) + textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString()); + if (textarea.getAttribute('wrap') === 'off') { + hiddenDiv.style.overflowWrap = 'normal'; // ('overflow-wrap', 'normal') + hiddenDiv.style.whiteSpace = 'pre'; //.css('white-space', 'pre'); + } + hiddenDiv.innerText = textarea.value + '\n'; + const content = hiddenDiv.innerHTML.replace(/\n/g, '
'); + hiddenDiv.innerHTML = content; + // When textarea is hidden, width goes crazy. + // Approximate with half of window size + if (textarea.offsetWidth > 0 && textarea.offsetHeight > 0) { + hiddenDiv.style.width = textarea.getBoundingClientRect().width + 'px'; // ('width', textarea.width() + 'px'); + } + else { + hiddenDiv.style.width = (window.innerWidth / 2) + 'px'; //css('width', window.innerWidth / 2 + 'px'); + } + // Resize if the new height is greater than the + // original height of the textarea + const originalHeight = parseInt(textarea.getAttribute('original-height')); + const prevLength = parseInt(textarea.getAttribute('previous-length')); + if (isNaN(originalHeight)) + return; + if (originalHeight <= hiddenDiv.clientHeight) { + textarea.style.height = hiddenDiv.clientHeight + 'px'; //css('height', hiddenDiv.innerHeight() + 'px'); + } + else if (textarea.value.length < prevLength) { + // In case the new height is less than original height, it + // means the textarea has less text than before + // So we set the height to the original one + textarea.style.height = originalHeight + 'px'; + } + textarea.setAttribute('previous-length', textarea.value.length.toString()); + } + ; + static Init() { + if (typeof document !== 'undefined') + document?.addEventListener("DOMContentLoaded", () => { + document.addEventListener('keyup', (e) => { + const target = e.target; + // Radio and Checkbox focus class + if (target instanceof HTMLInputElement && ['radio', 'checkbox'].includes(target.type)) { + // TAB, check if tabbing to radio or checkbox. + if (Utils.keys.TAB.includes(e.key)) { + target.classList.add('tabbed'); + target.addEventListener('blur', e => target.classList.remove('tabbed'), { once: true }); + } + } + }); + document.querySelectorAll('.materialize-textarea').forEach((textArea) => { + Forms.InitTextarea(textArea); + }); + // File Input Path + document.querySelectorAll('.file-field input[type="file"]').forEach((fileInput) => { + Forms.InitFileInputPath(fileInput); + }); + }); + } + static InitTextarea(textarea) { + // Save Data in Element + textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString()); + textarea.setAttribute('previous-length', textarea.value.length.toString()); + Forms.textareaAutoResize(textarea); + textarea.addEventListener('keyup', e => Forms.textareaAutoResize(textarea)); + textarea.addEventListener('keydown', e => Forms.textareaAutoResize(textarea)); + } + static InitFileInputPath(fileInput) { + fileInput.addEventListener('change', e => { + const fileField = fileInput.closest('.file-field'); + const pathInput = fileField.querySelector('input.file-path'); + const files = fileInput.files; + const filenames = []; + for (let i = 0; i < files.length; i++) { + filenames.push(files[i].name); + } + pathInput.value = filenames.join(', '); + pathInput.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true })); + }); + } +} + +const _defaults$c = { + inDuration: 275, + outDuration: 200, + onOpenStart: null, + onOpenEnd: null, + onCloseStart: null, + onCloseEnd: null +}; +class Materialbox extends Component { + /** If the materialbox overlay is showing. */ + overlayActive; + /** If the materialbox is no longer being animated. */ + doneAnimating; + /** Caption, if specified. */ + caption; + /** Original width of image. */ + originalWidth; + /** Original height of image. */ + originalHeight; + originInlineStyles; + placeholder; + _changedAncestorList; + newHeight; + newWidth; + windowWidth; + windowHeight; + attrWidth; + attrHeight; + _overlay; + _photoCaption; + constructor(el, options) { + super(el, options, Materialbox); + this.el.M_Materialbox = this; + this.options = { + ...Materialbox.defaults, + ...options + }; + this.overlayActive = false; + this.doneAnimating = true; + this.placeholder = document.createElement('div'); + this.placeholder.classList.add('material-placeholder'); + this.originalWidth = 0; + this.originalHeight = 0; + this.originInlineStyles = this.el.getAttribute('style'); + this.caption = this.el.getAttribute('data-caption') || ''; + // Wrap + this.el.before(this.placeholder); + this.placeholder.append(this.el); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$c; + } + /** + * Initializes instances of MaterialBox. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Materialbox); + } + static getInstance(el) { + return el.M_Materialbox; + } + destroy() { + this._removeEventHandlers(); + this.el.M_Materialbox = undefined; + // Unwrap image + //this.placeholder.after(this.el).remove(); + this.placeholder.remove(); + this.el.removeAttribute('style'); + } + _setupEventHandlers() { + this.el.addEventListener('click', this._handleMaterialboxClick); + } + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleMaterialboxClick); + } + _handleMaterialboxClick = () => { + // If already modal, return to original + if (this.doneAnimating === false || (this.overlayActive && this.doneAnimating)) + this.close(); + else + this.open(); + }; + _handleWindowScroll = () => { + if (this.overlayActive) + this.close(); + }; + _handleWindowResize = () => { + if (this.overlayActive) + this.close(); + }; + _handleWindowEscape = (e) => { + if (Utils.keys.ESC.includes(e.key) && this.doneAnimating && this.overlayActive) + this.close(); + }; + _makeAncestorsOverflowVisible() { + this._changedAncestorList = []; + let ancestor = this.placeholder.parentNode; + while (ancestor !== null && ancestor !== document) { + const curr = ancestor; + if (curr.style.overflow !== 'visible') { + curr.style.overflow = 'visible'; + this._changedAncestorList.push(curr); + } + ancestor = ancestor.parentNode; + } + } + _offset(el) { + const box = el.getBoundingClientRect(); + const docElem = document.documentElement; + return { + top: box.top + window.pageYOffset - docElem.clientTop, + left: box.left + window.pageXOffset - docElem.clientLeft + }; + } + _updateVars() { + this.windowWidth = window.innerWidth; + this.windowHeight = window.innerHeight; + this.caption = this.el.getAttribute('data-caption') || ''; + } + // Image + _animateImageIn() { + this.el.style.maxHeight = this.newHeight.toString() + 'px'; + this.el.style.maxWidth = this.newWidth.toString() + 'px'; + const duration = this.options.inDuration; + // from + this.el.style.transition = 'none'; + this.el.style.height = this.originalHeight + 'px'; + this.el.style.width = this.originalWidth + 'px'; + setTimeout(() => { + // easeOutQuad + this.el.style.transition = `height ${duration}ms ease, + width ${duration}ms ease, + left ${duration}ms ease, + top ${duration}ms ease + `; + // to + this.el.style.height = this.newHeight + 'px'; + this.el.style.width = this.newWidth + 'px'; + this.el.style.left = (Utils.getDocumentScrollLeft() + + this.windowWidth / 2 - + this._offset(this.placeholder).left - + this.newWidth / 2) + 'px'; + this.el.style.top = (Utils.getDocumentScrollTop() + + this.windowHeight / 2 - + this._offset(this.placeholder).top - + this.newHeight / 2) + 'px'; + }, 1); + setTimeout(() => { + this.doneAnimating = true; + if (typeof this.options.onOpenEnd === 'function') + this.options.onOpenEnd.call(this, this.el); + }, duration); + /* + anim({ + targets: this.el, // image + height: [this.originalHeight, this.newHeight], + width: [this.originalWidth, this.newWidth], + left: + Utils.getDocumentScrollLeft() + + this.windowWidth / 2 - + this._offset(this.placeholder).left - + this.newWidth / 2, + top: + Utils.getDocumentScrollTop() + + this.windowHeight / 2 - + this._offset(this.placeholder).top - + this.newHeight / 2, + + duration: this.options.inDuration, + easing: 'easeOutQuad', + complete: () => { + this.doneAnimating = true; + if (typeof this.options.onOpenEnd === 'function') this.options.onOpenEnd.call(this, this.el); + } + }); + */ + } + _animateImageOut() { + const duration = this.options.outDuration; + // easeOutQuad + this.el.style.transition = `height ${duration}ms ease, + width ${duration}ms ease, + left ${duration}ms ease, + top ${duration}ms ease + `; + // to + this.el.style.height = this.originalWidth + 'px'; + this.el.style.width = this.originalWidth + 'px'; + this.el.style.left = '0'; + this.el.style.top = '0'; + setTimeout(() => { + this.placeholder.style.height = ''; + this.placeholder.style.width = ''; + this.placeholder.style.position = ''; + this.placeholder.style.top = ''; + this.placeholder.style.left = ''; + // Revert to width or height attribute + if (this.attrWidth) + this.el.setAttribute('width', this.attrWidth.toString()); + if (this.attrHeight) + this.el.setAttribute('height', this.attrHeight.toString()); + this.el.removeAttribute('style'); + this.originInlineStyles && this.el.setAttribute('style', this.originInlineStyles); + // Remove class + this.el.classList.remove('active'); + this.doneAnimating = true; + // Remove overflow overrides on ancestors + this._changedAncestorList.forEach(anchestor => anchestor.style.overflow = ''); + // onCloseEnd callback + if (typeof this.options.onCloseEnd === 'function') + this.options.onCloseEnd.call(this, this.el); + }, duration); + } + // Caption + _addCaption() { + this._photoCaption = document.createElement('div'); + this._photoCaption.classList.add('materialbox-caption'); + this._photoCaption.innerText = this.caption; + document.body.append(this._photoCaption); + this._photoCaption.style.display = 'inline'; + // Animate + this._photoCaption.style.transition = 'none'; + this._photoCaption.style.opacity = '0'; + const duration = this.options.inDuration; + setTimeout(() => { + this._photoCaption.style.transition = `opacity ${duration}ms ease`; + this._photoCaption.style.opacity = '1'; + }, 1); + } + _removeCaption() { + const duration = this.options.outDuration; + this._photoCaption.style.transition = `opacity ${duration}ms ease`; + this._photoCaption.style.opacity = '0'; + setTimeout(() => { + this._photoCaption.remove(); + }, duration); + } + // Overlay + _addOverlay() { + this._overlay = document.createElement('div'); + this._overlay.id = 'materialbox-overlay'; + this._overlay.addEventListener('click', e => { + if (this.doneAnimating) + this.close(); + }, { once: true }); + // Put before in origin image to preserve z-index layering. + this.el.before(this._overlay); + // Set dimensions if needed + const overlayOffset = this._overlay.getBoundingClientRect(); + this._overlay.style.width = this.windowWidth + 'px'; + this._overlay.style.height = this.windowHeight + 'px'; + this._overlay.style.left = -1 * overlayOffset.left + 'px'; + this._overlay.style.top = -1 * overlayOffset.top + 'px'; + // Animate + this._overlay.style.transition = 'none'; + this._overlay.style.opacity = '0'; + const duration = this.options.inDuration; + setTimeout(() => { + this._overlay.style.transition = `opacity ${duration}ms ease`; + this._overlay.style.opacity = '1'; + }, 1); + } + _removeOverlay() { + const duration = this.options.outDuration; + this._overlay.style.transition = `opacity ${duration}ms ease`; + this._overlay.style.opacity = '0'; + setTimeout(() => { + this.overlayActive = false; + this._overlay.remove(); + }, duration); + } + /** + * Open materialbox. + */ + open = () => { + this._updateVars(); + this.originalWidth = this.el.getBoundingClientRect().width; + this.originalHeight = this.el.getBoundingClientRect().height; + // Set states + this.doneAnimating = false; + this.el.classList.add('active'); + this.overlayActive = true; + // onOpenStart callback + if (typeof this.options.onOpenStart === 'function') + this.options.onOpenStart.call(this, this.el); + // Set positioning for placeholder + this.placeholder.style.width = this.placeholder.getBoundingClientRect().width + 'px'; + this.placeholder.style.height = this.placeholder.getBoundingClientRect().height + 'px'; + this.placeholder.style.position = 'relative'; + this.placeholder.style.top = '0'; + this.placeholder.style.left = '0'; + this._makeAncestorsOverflowVisible(); + // Set css on origin + this.el.style.position = 'absolute'; + this.el.style.zIndex = '1000'; + this.el.style.willChange = 'left, top, width, height'; + // Change from width or height attribute to css + this.attrWidth = this.el.getAttribute('width'); + this.attrHeight = this.el.getAttribute('height'); + if (this.attrWidth) { + this.el.style.width = this.attrWidth + 'px'; + this.el.removeAttribute('width'); + } + if (this.attrHeight) { + this.el.style.width = this.attrHeight + 'px'; + this.el.removeAttribute('height'); + } + this._addOverlay(); + // Add and animate caption if it exists + if (this.caption !== '') + this._addCaption(); + // Resize Image + const widthPercent = this.originalWidth / this.windowWidth; + const heightPercent = this.originalHeight / this.windowHeight; + this.newWidth = 0; + this.newHeight = 0; + if (widthPercent > heightPercent) { + // Width first + const ratio = this.originalHeight / this.originalWidth; + this.newWidth = this.windowWidth * 0.9; + this.newHeight = this.windowWidth * 0.9 * ratio; + } + else { + // Height first + const ratio = this.originalWidth / this.originalHeight; + this.newWidth = this.windowHeight * 0.9 * ratio; + this.newHeight = this.windowHeight * 0.9; + } + this._animateImageIn(); + // Handle Exit triggers + window.addEventListener('scroll', this._handleWindowScroll); + window.addEventListener('resize', this._handleWindowResize); + window.addEventListener('keyup', this._handleWindowEscape); + }; + /** + * Close materialbox. + */ + close = () => { + this._updateVars(); + this.doneAnimating = false; + // onCloseStart callback + if (typeof this.options.onCloseStart === 'function') + this.options.onCloseStart.call(this, this.el); + //anim.remove(this.el); + //anim.remove(this._overlay); + //if (this.caption !== '') anim.remove(this._photoCaption); + // disable exit handlers + window.removeEventListener('scroll', this._handleWindowScroll); + window.removeEventListener('resize', this._handleWindowResize); + window.removeEventListener('keyup', this._handleWindowEscape); + this._removeOverlay(); + this._animateImageOut(); + if (this.caption !== '') + this._removeCaption(); + }; +} + +let _defaults$b = { + responsiveThreshold: 0 // breakpoint for swipeable +}; +class Parallax extends Component { + _enabled; + _img; + static _parallaxes = []; + static _handleScrollThrottled; + static _handleWindowResizeThrottled; + constructor(el, options) { + super(el, options, Parallax); + this.el.M_Parallax = this; + this.options = { + ...Parallax.defaults, + ...options + }; + this._enabled = window.innerWidth > this.options.responsiveThreshold; + this._img = this.el.querySelector('img'); + this._updateParallax(); + this._setupEventHandlers(); + this._setupStyles(); + Parallax._parallaxes.push(this); + } + static get defaults() { + return _defaults$b; + } + /** + * Initializes instances of Parallax. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Parallax); + } + static getInstance(el) { + return el.M_Parallax; + } + destroy() { + Parallax._parallaxes.splice(Parallax._parallaxes.indexOf(this), 1); + this._img.style.transform = ''; + this._removeEventHandlers(); + this.el.M_Parallax = undefined; + } + static _handleScroll() { + for (let i = 0; i < Parallax._parallaxes.length; i++) { + let parallaxInstance = Parallax._parallaxes[i]; + parallaxInstance._updateParallax.call(parallaxInstance); + } + } + static _handleWindowResize() { + for (let i = 0; i < Parallax._parallaxes.length; i++) { + let parallaxInstance = Parallax._parallaxes[i]; + parallaxInstance._enabled = + window.innerWidth > parallaxInstance.options.responsiveThreshold; + } + } + _setupEventHandlers() { + this._img.addEventListener('load', this._handleImageLoad); + if (Parallax._parallaxes.length === 0) { + if (!Parallax._handleScrollThrottled) { + Parallax._handleScrollThrottled = Utils.throttle(Parallax._handleScroll, 5); + } + if (!Parallax._handleWindowResizeThrottled) { + Parallax._handleWindowResizeThrottled = Utils.throttle(Parallax._handleWindowResize, 5); + } + window.addEventListener('scroll', Parallax._handleScrollThrottled); + window.addEventListener('resize', Parallax._handleWindowResizeThrottled); + } + } + _removeEventHandlers() { + this._img.removeEventListener('load', this._handleImageLoad); + if (Parallax._parallaxes.length === 0) { + window.removeEventListener('scroll', Parallax._handleScrollThrottled); + window.removeEventListener('resize', Parallax._handleWindowResizeThrottled); + } + } + _setupStyles() { + this._img.style.opacity = '1'; + } + _handleImageLoad = () => { + this._updateParallax(); + }; + _offset(el) { + const box = el.getBoundingClientRect(); + const docElem = document.documentElement; + return { + top: box.top + window.pageYOffset - docElem.clientTop, + left: box.left + window.pageXOffset - docElem.clientLeft + }; + } + _updateParallax() { + const containerHeight = this.el.getBoundingClientRect().height > 0 ? this.el.parentNode.offsetHeight : 500; + const imgHeight = this._img.offsetHeight; + const parallaxDist = imgHeight - containerHeight; + const bottom = this._offset(this.el).top + containerHeight; + const top = this._offset(this.el).top; + const scrollTop = Utils.getDocumentScrollTop(); + const windowHeight = window.innerHeight; + const windowBottom = scrollTop + windowHeight; + const percentScrolled = (windowBottom - top) / (containerHeight + windowHeight); + const parallax = parallaxDist * percentScrolled; + if (!this._enabled) { + this._img.style.transform = ''; + } + else if (bottom > scrollTop && top < scrollTop + windowHeight) { + this._img.style.transform = `translate3D(-50%, ${parallax}px, 0)`; + } + } +} + +let _defaults$a = { + top: 0, + bottom: Infinity, + offset: 0, + onPositionChange: null +}; +class Pushpin extends Component { + static _pushpins; + originalOffset; + constructor(el, options) { + super(el, options, Pushpin); + this.el.M_Pushpin = this; + this.options = { + ...Pushpin.defaults, + ...options + }; + this.originalOffset = this.el.offsetTop; + Pushpin._pushpins.push(this); + this._setupEventHandlers(); + this._updatePosition(); + } + static get defaults() { + return _defaults$a; + } + /** + * Initializes instances of Pushpin. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Pushpin); + } + static getInstance(el) { + return el.M_Pushpin; + } + destroy() { + this.el.style.top = null; + this._removePinClasses(); + // Remove pushpin Inst + let index = Pushpin._pushpins.indexOf(this); + Pushpin._pushpins.splice(index, 1); + if (Pushpin._pushpins.length === 0) { + this._removeEventHandlers(); + } + this.el.M_Pushpin = undefined; + } + static _updateElements() { + for (let elIndex in Pushpin._pushpins) { + let pInstance = Pushpin._pushpins[elIndex]; + pInstance._updatePosition(); + } + } + _setupEventHandlers() { + document.addEventListener('scroll', Pushpin._updateElements); + } + _removeEventHandlers() { + document.removeEventListener('scroll', Pushpin._updateElements); + } + _updatePosition() { + let scrolled = Utils.getDocumentScrollTop() + this.options.offset; + if (this.options.top <= scrolled && + this.options.bottom >= scrolled && + !this.el.classList.contains('pinned')) { + this._removePinClasses(); + this.el.style.top = `${this.options.offset}px`; + this.el.classList.add('pinned'); + // onPositionChange callback + if (typeof this.options.onPositionChange === 'function') { + this.options.onPositionChange.call(this, 'pinned'); + } + } + // Add pin-top (when scrolled position is above top) + if (scrolled < this.options.top && !this.el.classList.contains('pin-top')) { + this._removePinClasses(); + this.el.style.top = '0'; + this.el.classList.add('pin-top'); + // onPositionChange callback + if (typeof this.options.onPositionChange === 'function') { + this.options.onPositionChange.call(this, 'pin-top'); + } + } + // Add pin-bottom (when scrolled position is below bottom) + if (scrolled > this.options.bottom && !this.el.classList.contains('pin-bottom')) { + this._removePinClasses(); + this.el.classList.add('pin-bottom'); + this.el.style.top = `${this.options.bottom - this.originalOffset}px`; + // onPositionChange callback + if (typeof this.options.onPositionChange === 'function') { + this.options.onPositionChange.call(this, 'pin-bottom'); + } + } + } + _removePinClasses() { + // IE 11 bug (can't remove multiple classes in one line) + this.el.classList.remove('pin-top'); + this.el.classList.remove('pinned'); + this.el.classList.remove('pin-bottom'); + } + static { + Pushpin._pushpins = []; + } +} + +let _defaults$9 = { + throttle: 100, + scrollOffset: 200, // offset - 200 allows elements near bottom of page to scroll + activeClass: 'active', + getActiveElement: (id) => { return 'a[href="#' + id + '"]'; } +}; +class ScrollSpy extends Component { + static _elements; + static _count; + static _increment; + tickId; + id; + static _elementsInView; + static _visibleElements; + static _ticks; + constructor(el, options) { + super(el, options, ScrollSpy); + this.el.M_ScrollSpy = this; + this.options = { + ...ScrollSpy.defaults, + ...options + }; + ScrollSpy._elements.push(this); + ScrollSpy._count++; + ScrollSpy._increment++; + this.tickId = -1; + this.id = ScrollSpy._increment; + this._setupEventHandlers(); + this._handleWindowScroll(); + } + static get defaults() { + return _defaults$9; + } + /** + * Initializes instances of ScrollSpy. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, ScrollSpy); + } + static getInstance(el) { + return el.M_ScrollSpy; + } + destroy() { + ScrollSpy._elements.splice(ScrollSpy._elements.indexOf(this), 1); + ScrollSpy._elementsInView.splice(ScrollSpy._elementsInView.indexOf(this), 1); + ScrollSpy._visibleElements.splice(ScrollSpy._visibleElements.indexOf(this.el), 1); + ScrollSpy._count--; + this._removeEventHandlers(); + const actElem = document.querySelector(this.options.getActiveElement(this.el.id)); + actElem.classList.remove(this.options.activeClass); + this.el.M_ScrollSpy = undefined; + } + _setupEventHandlers() { + if (ScrollSpy._count === 1) { + window.addEventListener('scroll', this._handleWindowScroll); + window.addEventListener('resize', this._handleThrottledResize); + document.body.addEventListener('click', this._handleTriggerClick); + } + } + _removeEventHandlers() { + if (ScrollSpy._count === 0) { + window.removeEventListener('scroll', this._handleWindowScroll); + window.removeEventListener('resize', this._handleThrottledResize); + document.body.removeEventListener('click', this._handleTriggerClick); + } + } + _handleThrottledResize = Utils.throttle(function () { this._handleWindowScroll(); }, 200).bind(this); + _handleTriggerClick = (e) => { + const trigger = e.target; + for (let i = ScrollSpy._elements.length - 1; i >= 0; i--) { + const scrollspy = ScrollSpy._elements[i]; + const x = document.querySelector('a[href="#' + scrollspy.el.id + '"]'); + if (trigger === x) { + e.preventDefault(); + scrollspy.el.scrollIntoView({ behavior: 'smooth' }); + break; + } + } + }; + _handleWindowScroll = () => { + // unique tick id + ScrollSpy._ticks++; + // viewport rectangle + let top = Utils.getDocumentScrollTop(), left = Utils.getDocumentScrollLeft(), right = left + window.innerWidth, bottom = top + window.innerHeight; + // determine which elements are in view + let intersections = ScrollSpy._findElements(top, right, bottom, left); + for (let i = 0; i < intersections.length; i++) { + let scrollspy = intersections[i]; + let lastTick = scrollspy.tickId; + if (lastTick < 0) { + // entered into view + scrollspy._enter(); + } + // update tick id + scrollspy.tickId = ScrollSpy._ticks; + } + for (let i = 0; i < ScrollSpy._elementsInView.length; i++) { + let scrollspy = ScrollSpy._elementsInView[i]; + let lastTick = scrollspy.tickId; + if (lastTick >= 0 && lastTick !== ScrollSpy._ticks) { + // exited from view + scrollspy._exit(); + scrollspy.tickId = -1; + } + } + // remember elements in view for next tick + ScrollSpy._elementsInView = intersections; + }; + static _offset(el) { + const box = el.getBoundingClientRect(); + const docElem = document.documentElement; + return { + top: box.top + window.pageYOffset - docElem.clientTop, + left: box.left + window.pageXOffset - docElem.clientLeft + }; + } + static _findElements(top, right, bottom, left) { + let hits = []; + for (let i = 0; i < ScrollSpy._elements.length; i++) { + let scrollspy = ScrollSpy._elements[i]; + let currTop = top + scrollspy.options.scrollOffset || 200; + if (scrollspy.el.getBoundingClientRect().height > 0) { + let elTop = ScrollSpy._offset(scrollspy.el).top, elLeft = ScrollSpy._offset(scrollspy.el).left, elRight = elLeft + scrollspy.el.getBoundingClientRect().width, elBottom = elTop + scrollspy.el.getBoundingClientRect().height; + let isIntersect = !(elLeft > right || + elRight < left || + elTop > bottom || + elBottom < currTop); + if (isIntersect) { + hits.push(scrollspy); + } + } + } + return hits; + } + _enter() { + ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0); + if (ScrollSpy._visibleElements[0]) { + const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id)); + actElem?.classList.remove(this.options.activeClass); + if (ScrollSpy._visibleElements[0].M_ScrollSpy && this.id < ScrollSpy._visibleElements[0].M_ScrollSpy.id) { + ScrollSpy._visibleElements.unshift(this.el); + } + else { + ScrollSpy._visibleElements.push(this.el); + } + } + else { + ScrollSpy._visibleElements.push(this.el); + } + const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id); + document.querySelector(selector)?.classList.add(this.options.activeClass); + } + _exit() { + ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0); + if (ScrollSpy._visibleElements[0]) { + const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id)); + actElem?.classList.remove(this.options.activeClass); + ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((x) => x.id != this.el.id); + if (ScrollSpy._visibleElements[0]) { + // Check if empty + const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id); + document.querySelector(selector)?.classList.add(this.options.activeClass); + } + } + } + static { + ScrollSpy._elements = []; + ScrollSpy._elementsInView = []; + ScrollSpy._visibleElements = []; // Array. + ScrollSpy._count = 0; + ScrollSpy._increment = 0; + ScrollSpy._ticks = 0; + } +} + +const _defaults$8 = { + edge: 'left', + draggable: true, + dragTargetWidth: '10px', + inDuration: 250, + outDuration: 200, + onOpenStart: null, + onOpenEnd: null, + onCloseStart: null, + onCloseEnd: null, + preventScrolling: true +}; +class Sidenav extends Component { + id; + /** Describes open/close state of Sidenav. */ + isOpen; + /** Describes if sidenav is fixed. */ + isFixed; + /** Describes if Sidenav is being dragged. */ + isDragged; + lastWindowWidth; + lastWindowHeight; + static _sidenavs; + _overlay; + dragTarget; + _startingXpos; + _xPos; + _time; + _width; + _initialScrollTop; + _verticallyScrolling; + deltaX; + velocityX; + percentOpen; + constructor(el, options) { + super(el, options, Sidenav); + this.el.M_Sidenav = this; + this.options = { + ...Sidenav.defaults, + ...options + }; + this.id = this.el.id; + this.isOpen = false; + this.isFixed = this.el.classList.contains('sidenav-fixed'); + this.isDragged = false; + // Window size variables for window resize checks + this.lastWindowWidth = window.innerWidth; + this.lastWindowHeight = window.innerHeight; + this._createOverlay(); + this._createDragTarget(); + this._setupEventHandlers(); + this._setupClasses(); + this._setupFixed(); + Sidenav._sidenavs.push(this); + } + static get defaults() { + return _defaults$8; + } + /** + * Initializes instances of Sidenav. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Sidenav); + } + static getInstance(el) { + return el.M_Sidenav; + } + destroy() { + this._removeEventHandlers(); + this._enableBodyScrolling(); + this._overlay.parentNode.removeChild(this._overlay); + this.dragTarget.parentNode.removeChild(this.dragTarget); + this.el.M_Sidenav = undefined; + this.el.style.transform = ''; + const index = Sidenav._sidenavs.indexOf(this); + if (index >= 0) { + Sidenav._sidenavs.splice(index, 1); + } + } + _createOverlay() { + this._overlay = document.createElement('div'); + this._overlay.classList.add('sidenav-overlay'); + this._overlay.addEventListener('click', this.close); + document.body.appendChild(this._overlay); + } + _setupEventHandlers() { + if (Sidenav._sidenavs.length === 0) { + document.body.addEventListener('click', this._handleTriggerClick); + } + var passiveIfSupported = null; + this.dragTarget.addEventListener('touchmove', this._handleDragTargetDrag, passiveIfSupported); + this.dragTarget.addEventListener('touchend', this._handleDragTargetRelease); + this._overlay.addEventListener('touchmove', this._handleCloseDrag, passiveIfSupported); + this._overlay.addEventListener('touchend', this._handleCloseRelease); + this.el.addEventListener('touchmove', this._handleCloseDrag, passiveIfSupported); + this.el.addEventListener('touchend', this._handleCloseRelease); + this.el.addEventListener('click', this._handleCloseTriggerClick); + // Add resize for side nav fixed + if (this.isFixed) { + window.addEventListener('resize', this._handleWindowResize); + } + } + _removeEventHandlers() { + if (Sidenav._sidenavs.length === 1) { + document.body.removeEventListener('click', this._handleTriggerClick); + } + this.dragTarget.removeEventListener('touchmove', this._handleDragTargetDrag); + this.dragTarget.removeEventListener('touchend', this._handleDragTargetRelease); + this._overlay.removeEventListener('touchmove', this._handleCloseDrag); + this._overlay.removeEventListener('touchend', this._handleCloseRelease); + this.el.removeEventListener('touchmove', this._handleCloseDrag); + this.el.removeEventListener('touchend', this._handleCloseRelease); + this.el.removeEventListener('click', this._handleCloseTriggerClick); + // Remove resize for side nav fixed + if (this.isFixed) { + window.removeEventListener('resize', this._handleWindowResize); + } + } + _handleTriggerClick(e) { + const trigger = e.target.closest('.sidenav-trigger'); + if (e.target && trigger) { + const sidenavId = Utils.getIdFromTrigger(trigger); + const sidenavInstance = document.getElementById(sidenavId).M_Sidenav; + if (sidenavInstance) { + sidenavInstance.open(trigger); + } + e.preventDefault(); + } + } + // Set variables needed at the beginning of drag and stop any current transition. + _startDrag(e) { + const clientX = e.targetTouches[0].clientX; + this.isDragged = true; + this._startingXpos = clientX; + this._xPos = this._startingXpos; + this._time = Date.now(); + this._width = this.el.getBoundingClientRect().width; + this._overlay.style.display = 'block'; + this._initialScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop(); + this._verticallyScrolling = false; + } + //Set variables needed at each drag move update tick + _dragMoveUpdate(e) { + const clientX = e.targetTouches[0].clientX; + const currentScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop(); + this.deltaX = Math.abs(this._xPos - clientX); + this._xPos = clientX; + this.velocityX = this.deltaX / (Date.now() - this._time); + this._time = Date.now(); + if (this._initialScrollTop !== currentScrollTop) { + this._verticallyScrolling = true; + } + } + _handleDragTargetDrag = (e) => { + // Check if draggable + if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) { + return; + } + // If not being dragged, set initial drag start variables + if (!this.isDragged) { + this._startDrag(e); + } + // Run touchmove updates + this._dragMoveUpdate(e); + // Calculate raw deltaX + let totalDeltaX = this._xPos - this._startingXpos; + // dragDirection is the attempted user drag direction + const dragDirection = totalDeltaX > 0 ? 'right' : 'left'; + // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction + totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX)); + if (this.options.edge === dragDirection) { + totalDeltaX = 0; + } + /** + * transformX is the drag displacement + * transformPrefix is the initial transform placement + * Invert values if Sidenav is right edge + */ + let transformX = totalDeltaX; + let transformPrefix = 'translateX(-100%)'; + if (this.options.edge === 'right') { + transformPrefix = 'translateX(100%)'; + transformX = -transformX; + } + // Calculate open/close percentage of sidenav, with open = 1 and close = 0 + this.percentOpen = Math.min(1, totalDeltaX / this._width); + // Set transform and opacity styles + this.el.style.transform = `${transformPrefix} translateX(${transformX}px)`; + this._overlay.style.opacity = this.percentOpen.toString(); + }; + _handleDragTargetRelease = () => { + if (this.isDragged) { + if (this.percentOpen > 0.2) { + this.open(); + } + else { + this._animateOut(); + } + this.isDragged = false; + this._verticallyScrolling = false; + } + }; + _handleCloseDrag = (e) => { + if (this.isOpen) { + // Check if draggable + if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) { + return; + } + // If not being dragged, set initial drag start variables + if (!this.isDragged) { + this._startDrag(e); + } + // Run touchmove updates + this._dragMoveUpdate(e); + // Calculate raw deltaX + let totalDeltaX = this._xPos - this._startingXpos; + // dragDirection is the attempted user drag direction + let dragDirection = totalDeltaX > 0 ? 'right' : 'left'; + // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction + totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX)); + if (this.options.edge !== dragDirection) { + totalDeltaX = 0; + } + let transformX = -totalDeltaX; + if (this.options.edge === 'right') { + transformX = -transformX; + } + // Calculate open/close percentage of sidenav, with open = 1 and close = 0 + this.percentOpen = Math.min(1, 1 - totalDeltaX / this._width); + // Set transform and opacity styles + this.el.style.transform = `translateX(${transformX}px)`; + this._overlay.style.opacity = this.percentOpen.toString(); + } + }; + _handleCloseRelease = () => { + if (this.isOpen && this.isDragged) { + if (this.percentOpen > 0.8) { + this._animateIn(); + } + else { + this.close(); + } + this.isDragged = false; + this._verticallyScrolling = false; + } + }; + // Handles closing of Sidenav when element with class .sidenav-close + _handleCloseTriggerClick = (e) => { + const closeTrigger = e.target.closest('.sidenav-close'); + if (closeTrigger && !this._isCurrentlyFixed()) { + this.close(); + } + }; + _handleWindowResize = () => { + // Only handle horizontal resizes + if (this.lastWindowWidth !== window.innerWidth) { + if (window.innerWidth > 992) { + this.open(); + } + else { + this.close(); + } + } + this.lastWindowWidth = window.innerWidth; + this.lastWindowHeight = window.innerHeight; + }; + _setupClasses() { + if (this.options.edge === 'right') { + this.el.classList.add('right-aligned'); + this.dragTarget.classList.add('right-aligned'); + } + } + _removeClasses() { + this.el.classList.remove('right-aligned'); + this.dragTarget.classList.remove('right-aligned'); + } + _setupFixed() { + if (this._isCurrentlyFixed()) + this.open(); + } + _isCurrentlyFixed() { + return this.isFixed && window.innerWidth > 992; + } + _createDragTarget() { + const dragTarget = document.createElement('div'); + dragTarget.classList.add('drag-target'); + dragTarget.style.width = this.options.dragTargetWidth; + document.body.appendChild(dragTarget); + this.dragTarget = dragTarget; + } + _preventBodyScrolling() { + document.body.style.overflow = 'hidden'; + } + _enableBodyScrolling() { + document.body.style.overflow = ''; + } + /** + * Opens Sidenav. + */ + open = () => { + if (this.isOpen === true) + return; + this.isOpen = true; + // Run onOpenStart callback + if (typeof this.options.onOpenStart === 'function') { + this.options.onOpenStart.call(this, this.el); + } + // Handle fixed Sidenav + if (this._isCurrentlyFixed()) { + // Show if fixed + this.el.style.transform = 'translateX(0)'; + this._enableBodyScrolling(); + this._overlay.style.display = 'none'; + } + // Handle non-fixed Sidenav + else { + if (this.options.preventScrolling) + this._preventBodyScrolling(); + if (!this.isDragged || this.percentOpen != 1) + this._animateIn(); + } + }; + /** + * Closes Sidenav. + */ + close = () => { + if (this.isOpen === false) + return; + this.isOpen = false; + // Run onCloseStart callback + if (typeof this.options.onCloseStart === 'function') { + this.options.onCloseStart.call(this, this.el); + } + // Handle fixed Sidenav + if (this._isCurrentlyFixed()) { + const transformX = this.options.edge === 'left' ? '-105%' : '105%'; + this.el.style.transform = `translateX(${transformX})`; + } + // Handle non-fixed Sidenav + else { + this._enableBodyScrolling(); + if (!this.isDragged || this.percentOpen != 0) { + this._animateOut(); + } + else { + this._overlay.style.display = 'none'; + } + } + }; + _animateIn() { + this._animateSidenavIn(); + this._animateOverlayIn(); + } + _animateOut() { + this._animateSidenavOut(); + this._animateOverlayOut(); + } + _animateSidenavIn() { + let slideOutPercent = this.options.edge === 'left' ? -1 : 1; + if (this.isDragged) { + slideOutPercent = + this.options.edge === 'left' + ? slideOutPercent + this.percentOpen + : slideOutPercent - this.percentOpen; + } + const duration = this.options.inDuration; + // from + this.el.style.transition = 'none'; + this.el.style.transform = 'translateX(' + (slideOutPercent * 100) + '%)'; + setTimeout(() => { + this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad + // to + this.el.style.transform = 'translateX(0)'; + }, 1); + setTimeout(() => { + if (typeof this.options.onOpenEnd === 'function') + this.options.onOpenEnd.call(this, this.el); + }, duration); + } + _animateSidenavOut() { + const endPercent = this.options.edge === 'left' ? -1 : 1; + if (this.isDragged) { + this.options.edge === 'left' + ? endPercent + this.percentOpen + : endPercent - this.percentOpen; + } + const duration = this.options.outDuration; + this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad + // to + this.el.style.transform = 'translateX(' + (endPercent * 100) + '%)'; + setTimeout(() => { + if (typeof this.options.onCloseEnd === 'function') + this.options.onCloseEnd.call(this, this.el); + }, duration); + } + _animateOverlayIn() { + let start = 0; + if (this.isDragged) + start = this.percentOpen; + else + this._overlay.style.display = 'block'; + // Animation + const duration = this.options.inDuration; + // from + this._overlay.style.transition = 'none'; + this._overlay.style.opacity = start.toString(); + // easeOutQuad + setTimeout(() => { + this._overlay.style.transition = `opacity ${duration}ms ease`; + // to + this._overlay.style.opacity = '1'; + }, 1); + } + _animateOverlayOut() { + const duration = this.options.outDuration; + // easeOutQuad + this._overlay.style.transition = `opacity ${duration}ms ease`; + // to + this._overlay.style.opacity = '0'; + setTimeout(() => { + this._overlay.style.display = 'none'; + }, duration); + } + static { + Sidenav._sidenavs = []; + } +} + +let _defaults$7 = { + duration: 300, + onShow: null, + swipeable: false, + responsiveThreshold: Infinity // breakpoint for swipeable +}; +class Tabs extends Component { + _tabLinks; + _index; + _indicator; + _tabWidth; + _tabsWidth; + _tabsCarousel; + _activeTabLink; + _content; + constructor(el, options) { + super(el, options, Tabs); + this.el.M_Tabs = this; + this.options = { + ...Tabs.defaults, + ...options + }; + this._tabLinks = this.el.querySelectorAll('li.tab > a'); + this._index = 0; + this._setupActiveTabLink(); + if (this.options.swipeable) { + this._setupSwipeableTabs(); + } + else { + this._setupNormalTabs(); + } + // Setup tabs indicator after content to ensure accurate widths + this._setTabsAndTabWidth(); + this._createIndicator(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$7; + } + /** + * Initializes instances of Tabs. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Tabs); + } + static getInstance(el) { + return el.M_Tabs; + } + destroy() { + this._removeEventHandlers(); + this._indicator.parentNode.removeChild(this._indicator); + if (this.options.swipeable) { + this._teardownSwipeableTabs(); + } + else { + this._teardownNormalTabs(); + } + this.el.M_Tabs = undefined; + } + /** + * The index of tab that is currently shown. + */ + get index() { return this._index; } + _setupEventHandlers() { + window.addEventListener('resize', this._handleWindowResize); + this.el.addEventListener('click', this._handleTabClick); + } + _removeEventHandlers() { + window.removeEventListener('resize', this._handleWindowResize); + this.el.removeEventListener('click', this._handleTabClick); + } + _handleWindowResize = () => { + this._setTabsAndTabWidth(); + if (this._tabWidth !== 0 && this._tabsWidth !== 0) { + this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px'; + this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px'; + } + }; + _handleTabClick = (e) => { + const tabLink = e.target; + const tab = tabLink.parentElement; + // Handle click on tab link only + if (!tabLink || !tab.classList.contains('tab')) + return; + // is disabled? + if (tab.classList.contains('disabled')) { + e.preventDefault(); + return; + } + // Act as regular link if target attribute is specified. + if (tabLink.hasAttribute('target')) + return; + // Make the old tab inactive. + this._activeTabLink.classList.remove('active'); + const _oldContent = this._content; + // Update the variables with the new link and content + this._activeTabLink = tabLink; + if (tabLink.hash) + this._content = document.querySelector(tabLink.hash); + this._tabLinks = this.el.querySelectorAll('li.tab > a'); + // Make the tab active + this._activeTabLink.classList.add('active'); + const prevIndex = this._index; + this._index = Math.max(Array.from(this._tabLinks).indexOf(tabLink), 0); + // Swap content + if (this.options.swipeable) { + if (this._tabsCarousel) { + this._tabsCarousel.set(this._index, () => { + if (typeof this.options.onShow === 'function') + this.options.onShow.call(this, this._content); + }); + } + } + else { + if (this._content) { + this._content.style.display = 'block'; + this._content.classList.add('active'); + if (typeof this.options.onShow === 'function') + this.options.onShow.call(this, this._content); + if (_oldContent && _oldContent !== this._content) { + _oldContent.style.display = 'none'; + _oldContent.classList.remove('active'); + } + } + } + // Update widths after content is swapped (scrollbar bugfix) + this._setTabsAndTabWidth(); + this._animateIndicator(prevIndex); + e.preventDefault(); + }; + _createIndicator() { + const indicator = document.createElement('li'); + indicator.classList.add('indicator'); + this.el.appendChild(indicator); + this._indicator = indicator; + this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px'; + this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px'; + } + _setupActiveTabLink() { + // If the location.hash matches one of the links, use that as the active tab. + this._activeTabLink = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === location.hash); + // If no match is found, use the first link or any with class 'active' as the initial active tab. + if (!this._activeTabLink) { + this._activeTabLink = this.el.querySelector('li.tab a.active'); + } + if (this._activeTabLink.length === 0) { + this._activeTabLink = this.el.querySelector('li.tab a'); + } + Array.from(this._tabLinks).forEach((a) => a.classList.remove('active')); + this._activeTabLink.classList.add('active'); + this._index = Math.max(Array.from(this._tabLinks).indexOf(this._activeTabLink), 0); + if (this._activeTabLink && this._activeTabLink.hash) { + this._content = document.querySelector(this._activeTabLink.hash); + if (this._content) + this._content.classList.add('active'); + } + } + _setupSwipeableTabs() { + // Change swipeable according to responsive threshold + if (window.innerWidth > this.options.responsiveThreshold) + this.options.swipeable = false; + const tabsContent = []; + this._tabLinks.forEach(a => { + if (a.hash) { + const currContent = document.querySelector(a.hash); + currContent.classList.add('carousel-item'); + tabsContent.push(currContent); + } + }); + // Create Carousel-Wrapper around Tab-Contents + const tabsWrapper = document.createElement('div'); + tabsWrapper.classList.add('tabs-content', 'carousel', 'carousel-slider'); + // Wrap around + tabsContent[0].parentElement.insertBefore(tabsWrapper, tabsContent[0]); + tabsContent.forEach(tabContent => { + tabsWrapper.appendChild(tabContent); + tabContent.style.display = ''; + }); + // Keep active tab index to set initial carousel slide + const tab = this._activeTabLink.parentElement; + const activeTabIndex = Array.from(tab.parentNode.children).indexOf(tab); + this._tabsCarousel = Carousel.init(tabsWrapper, { + fullWidth: true, + noWrap: true, + onCycleTo: (item) => { + const prevIndex = this._index; + this._index = Array.from(item.parentNode.children).indexOf(item); + this._activeTabLink.classList.remove('active'); + this._activeTabLink = Array.from(this._tabLinks)[this._index]; + this._activeTabLink.classList.add('active'); + this._animateIndicator(prevIndex); + if (typeof this.options.onShow === 'function') + this.options.onShow.call(this, this._content); + } + }); + // Set initial carousel slide to active tab + this._tabsCarousel.set(activeTabIndex); + } + _teardownSwipeableTabs() { + const tabsWrapper = this._tabsCarousel.el; + this._tabsCarousel.destroy(); + // Unwrap + tabsWrapper.after(tabsWrapper.children); + tabsWrapper.remove(); + } + _setupNormalTabs() { + // Hide Tabs Content + Array.from(this._tabLinks).forEach((a) => { + if (a === this._activeTabLink) + return; + if (a.hash) { + const currContent = document.querySelector(a.hash); + if (currContent) + currContent.style.display = 'none'; + } + }); + } + _teardownNormalTabs() { + // show Tabs Content + this._tabLinks.forEach((a) => { + if (a.hash) { + const currContent = document.querySelector(a.hash); + if (currContent) + currContent.style.display = ''; + } + }); + } + _setTabsAndTabWidth() { + this._tabsWidth = this.el.getBoundingClientRect().width; + this._tabWidth = Math.max(this._tabsWidth, this.el.scrollWidth) / this._tabLinks.length; + } + _calcRightPos(el) { + return Math.ceil(this._tabsWidth - el.offsetLeft - el.getBoundingClientRect().width); + } + _calcLeftPos(el) { + return Math.floor(el.offsetLeft); + } + /** + * Recalculate tab indicator position. This is useful when + * the indicator position is not correct. + */ + updateTabIndicator() { + this._setTabsAndTabWidth(); + this._animateIndicator(this._index); + } + _animateIndicator(prevIndex) { + let leftDelay = 0, rightDelay = 0; + const isMovingLeftOrStaying = (this._index - prevIndex >= 0); + if (isMovingLeftOrStaying) + leftDelay = 90; + else + rightDelay = 90; + // in v1: easeOutQuad + this._indicator.style.transition = ` + left ${this.options.duration}ms ease-out ${leftDelay}ms, + right ${this.options.duration}ms ease-out ${rightDelay}ms`; + this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px'; + this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px'; + } + /** + * Show tab content that corresponds to the tab with the id. + * @param tabId The id of the tab that you want to switch to. + */ + select(tabId) { + const tab = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === '#' + tabId); + if (tab) + tab.click(); + } +} + +let _defaults$6 = { + onOpen: null, + onClose: null +}; +class TapTarget extends Component { + /** + * If the tap target is open. + */ + isOpen; + wrapper; + _origin; + originEl; + waveEl; + contentEl; + constructor(el, options) { + super(el, options, TapTarget); + this.el.M_TapTarget = this; + this.options = { + ...TapTarget.defaults, + ...options + }; + this.isOpen = false; + // setup + this._origin = document.querySelector(`#${el.dataset.target}`); + this._setup(); + this._calculatePositioning(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$6; + } + /** + * Initializes instances of TapTarget. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, TapTarget); + } + static getInstance(el) { + return el.M_TapTarget; + } + destroy() { + this._removeEventHandlers(); + this.el.TapTarget = undefined; + } + _setupEventHandlers() { + this.el.addEventListener('click', this._handleTargetClick); + this.originEl.addEventListener('click', this._handleOriginClick); + // Resize + window.addEventListener('resize', this._handleThrottledResize); + } + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleTargetClick); + this.originEl.removeEventListener('click', this._handleOriginClick); + window.removeEventListener('resize', this._handleThrottledResize); + } + _handleThrottledResize = Utils.throttle(function () { this._handleResize(); }, 200).bind(this); + _handleTargetClick = () => { + this.open(); + }; + _handleOriginClick = () => { + this.close(); + }; + _handleResize = () => { + this._calculatePositioning(); + }; + _handleDocumentClick = (e) => { + if (!e.target.closest('.tap-target-wrapper')) { + this.close(); + e.preventDefault(); + e.stopPropagation(); + } + }; + _setup() { + // Creating tap target + this.wrapper = this.el.parentElement; + this.waveEl = this.wrapper.querySelector('.tap-target-wave'); + this.originEl = this.wrapper.querySelector('.tap-target-origin'); + this.contentEl = this.el.querySelector('.tap-target-content'); + // Creating wrapper + if (!this.wrapper.classList.contains('.tap-target-wrapper')) { + this.wrapper = document.createElement('div'); + this.wrapper.classList.add('tap-target-wrapper'); + this.el.before(this.wrapper); + this.wrapper.append(this.el); + } + // Creating content + if (!this.contentEl) { + this.contentEl = document.createElement('div'); + this.contentEl.classList.add('tap-target-content'); + this.el.append(this.contentEl); + } + // Creating foreground wave + if (!this.waveEl) { + this.waveEl = document.createElement('div'); + this.waveEl.classList.add('tap-target-wave'); + // Creating origin + if (!this.originEl) { + this.originEl = this._origin.cloneNode(true); // .clone(true, true); + this.originEl.classList.add('tap-target-origin'); + this.originEl.removeAttribute('id'); + this.originEl.removeAttribute('style'); + this.waveEl.append(this.originEl); + } + this.wrapper.append(this.waveEl); + } + } + _offset(el) { + const box = el.getBoundingClientRect(); + const docElem = document.documentElement; + return { + top: box.top + window.pageYOffset - docElem.clientTop, + left: box.left + window.pageXOffset - docElem.clientLeft + }; + } + _calculatePositioning() { + // Element or parent is fixed position? + let isFixed = getComputedStyle(this._origin).position === 'fixed'; + if (!isFixed) { + let currentElem = this._origin; + const parents = []; + while ((currentElem = currentElem.parentNode) && currentElem !== document) + parents.push(currentElem); + for (let i = 0; i < parents.length; i++) { + isFixed = getComputedStyle(parents[i]).position === 'fixed'; + if (isFixed) + break; + } + } + // Calculating origin + const originWidth = this._origin.offsetWidth; + const originHeight = this._origin.offsetHeight; + const originTop = isFixed ? this._offset(this._origin).top - Utils.getDocumentScrollTop() : this._offset(this._origin).top; + const originLeft = isFixed ? this._offset(this._origin).left - Utils.getDocumentScrollLeft() : this._offset(this._origin).left; + // Calculating screen + const windowWidth = window.innerWidth; + const windowHeight = window.innerHeight; + const scrollBarWidth = windowWidth - document.documentElement.clientWidth; + const centerX = windowWidth / 2; + const centerY = windowHeight / 2; + const isLeft = originLeft <= centerX; + const isRight = originLeft > centerX; + const isTop = originTop <= centerY; + const isBottom = originTop > centerY; + const isCenterX = originLeft >= windowWidth * 0.25 && originLeft <= windowWidth * 0.75; + // Calculating tap target + const tapTargetWidth = this.el.offsetWidth; + const tapTargetHeight = this.el.offsetHeight; + const tapTargetTop = originTop + originHeight / 2 - tapTargetHeight / 2; + const tapTargetLeft = originLeft + originWidth / 2 - tapTargetWidth / 2; + const tapTargetPosition = isFixed ? 'fixed' : 'absolute'; + // Calculating content + const tapTargetTextWidth = isCenterX ? tapTargetWidth : tapTargetWidth / 2 + originWidth; + const tapTargetTextHeight = tapTargetHeight / 2; + const tapTargetTextTop = isTop ? tapTargetHeight / 2 : 0; + const tapTargetTextBottom = 0; + const tapTargetTextLeft = isLeft && !isCenterX ? tapTargetWidth / 2 - originWidth : 0; + const tapTargetTextRight = 0; + const tapTargetTextPadding = originWidth; + const tapTargetTextAlign = isBottom ? 'bottom' : 'top'; + // Calculating wave + const tapTargetWaveWidth = originWidth > originHeight ? originWidth * 2 : originWidth * 2; + const tapTargetWaveHeight = tapTargetWaveWidth; + const tapTargetWaveTop = tapTargetHeight / 2 - tapTargetWaveHeight / 2; + const tapTargetWaveLeft = tapTargetWidth / 2 - tapTargetWaveWidth / 2; + // Setting tap target + this.wrapper.style.top = isTop ? tapTargetTop + 'px' : ''; + this.wrapper.style.right = isRight ? windowWidth - tapTargetLeft - tapTargetWidth - scrollBarWidth + 'px' : ''; + this.wrapper.style.bottom = isBottom ? windowHeight - tapTargetTop - tapTargetHeight + 'px' : ''; + this.wrapper.style.left = isLeft ? tapTargetLeft + 'px' : ''; + this.wrapper.style.position = tapTargetPosition; + // Setting content + this.contentEl.style.width = tapTargetTextWidth + 'px'; + this.contentEl.style.height = tapTargetTextHeight + 'px'; + this.contentEl.style.top = tapTargetTextTop + 'px'; + this.contentEl.style.right = tapTargetTextRight + 'px'; + this.contentEl.style.bottom = tapTargetTextBottom + 'px'; + this.contentEl.style.left = tapTargetTextLeft + 'px'; + this.contentEl.style.padding = tapTargetTextPadding + 'px'; + this.contentEl.style.verticalAlign = tapTargetTextAlign; + // Setting wave + this.waveEl.style.top = tapTargetWaveTop + 'px'; + this.waveEl.style.left = tapTargetWaveLeft + 'px'; + this.waveEl.style.width = tapTargetWaveWidth + 'px'; + this.waveEl.style.height = tapTargetWaveHeight + 'px'; + } + /** + * Open Tap Target. + */ + open = () => { + if (this.isOpen) + return; + // onOpen callback + if (typeof this.options.onOpen === 'function') { + this.options.onOpen.call(this, this._origin); + } + this.isOpen = true; + this.wrapper.classList.add('open'); + document.body.addEventListener('click', this._handleDocumentClick, true); + document.body.addEventListener('touchend', this._handleDocumentClick); + }; + /** + * Close Tap Target. + */ + close = () => { + if (!this.isOpen) + return; + // onClose callback + if (typeof this.options.onClose === 'function') { + this.options.onClose.call(this, this._origin); + } + this.isOpen = false; + this.wrapper.classList.remove('open'); + document.body.removeEventListener('click', this._handleDocumentClick, true); + document.body.removeEventListener('touchend', this._handleDocumentClick); + }; +} + +let _defaults$5 = { + dialRadius: 135, + outerRadius: 105, + innerRadius: 70, + tickRadius: 20, + duration: 350, + container: null, + defaultTime: 'now', // default time, 'now' or '13:14' e.g. + fromNow: 0, // Millisecond offset from the defaultTime + showClearBtn: false, + // internationalization + i18n: { + cancel: 'Cancel', + clear: 'Clear', + done: 'Ok' + }, + autoClose: false, // auto close when minute is selected + twelveHour: true, // change to 12 hour AM/PM clock from 24 hour + vibrate: true, // vibrate the device when dragging clock hand + // Callbacks + onOpenStart: null, + onOpenEnd: null, + onCloseStart: null, + onCloseEnd: null, + onSelect: null +}; +class Timepicker extends Component { + id; + modal; + modalEl; + plate; + digitalClock; + inputHours; + inputMinutes; + x0; + y0; + moved; + dx; + dy; + /** + * Current view on the timepicker. + * @default 'hours' + */ + currentView; + hand; + minutesView; + hours; + minutes; + /** The selected time. */ + time; + /** + * If the time is AM or PM on twelve-hour clock. + * @default 'PM' + */ + amOrPm; + static _template; + /** If the picker is open. */ + isOpen; + /** Vibrate device when dragging clock hand. */ + vibrate; + _canvas; + hoursView; + spanAmPm; + footer; + _amBtn; + _pmBtn; + bg; + bearing; + g; + toggleViewTimer; + canvas; + vibrateTimer; + constructor(el, options) { + super(el, options, Timepicker); + this.el.M_Timepicker = this; + this.options = { + ...Timepicker.defaults, + ...options + }; + this.id = Utils.guid(); + this._insertHTMLIntoDOM(); + this._setupModal(); + this._setupVariables(); + this._setupEventHandlers(); + this._clockSetup(); + this._pickerSetup(); + } + static get defaults() { + return _defaults$5; + } + /** + * Initializes instances of Timepicker. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Timepicker); + } + static _addLeadingZero(num) { + return (num < 10 ? '0' : '') + num; + } + static _createSVGEl(name) { + let svgNS = 'http://www.w3.org/2000/svg'; + return document.createElementNS(svgNS, name); + } + static _Pos(e) { + if (e.type.startsWith("touch") && e.targetTouches.length >= 1) { + return { x: e.targetTouches[0].clientX, y: e.targetTouches[0].clientY }; + } + // mouse event + return { x: e.clientX, y: e.clientY }; + } + static getInstance(el) { + return el.M_Timepicker; + } + destroy() { + this._removeEventHandlers(); + this.modal.destroy(); + this.modalEl.remove(); + this.el.M_Timepicker = undefined; + } + _setupEventHandlers() { + this.el.addEventListener('click', this._handleInputClick); + this.el.addEventListener('keydown', this._handleInputKeydown); + this.plate.addEventListener('mousedown', this._handleClockClickStart); + this.plate.addEventListener('touchstart', this._handleClockClickStart); + this.digitalClock.addEventListener('keyup', this._inputFromTextField); + this.inputHours.addEventListener('click', () => this.showView('hours')); + this.inputMinutes.addEventListener('click', () => this.showView('minutes')); + } + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleInputClick); + this.el.removeEventListener('keydown', this._handleInputKeydown); + } + _handleInputClick = () => { + this.open(); + }; + _handleInputKeydown = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + e.preventDefault(); + this.open(); + } + }; + _handleTimeInputEnterKey = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + e.preventDefault(); + this._inputFromTextField(); + } + }; + _handleClockClickStart = (e) => { + e.preventDefault(); + let clockPlateBR = this.plate.getBoundingClientRect(); + let offset = { x: clockPlateBR.left, y: clockPlateBR.top }; + this.x0 = offset.x + this.options.dialRadius; + this.y0 = offset.y + this.options.dialRadius; + this.moved = false; + let clickPos = Timepicker._Pos(e); + this.dx = clickPos.x - this.x0; + this.dy = clickPos.y - this.y0; + // Set clock hands + this.setHand(this.dx, this.dy, false); + // Mousemove on document + document.addEventListener('mousemove', this._handleDocumentClickMove); + document.addEventListener('touchmove', this._handleDocumentClickMove); + // Mouseup on document + document.addEventListener('mouseup', this._handleDocumentClickEnd); + document.addEventListener('touchend', this._handleDocumentClickEnd); + }; + _handleDocumentClickMove = (e) => { + e.preventDefault(); + let clickPos = Timepicker._Pos(e); + let x = clickPos.x - this.x0; + let y = clickPos.y - this.y0; + this.moved = true; + this.setHand(x, y, false); + }; + _handleDocumentClickEnd = (e) => { + e.preventDefault(); + document.removeEventListener('mouseup', this._handleDocumentClickEnd); + document.removeEventListener('touchend', this._handleDocumentClickEnd); + let clickPos = Timepicker._Pos(e); + let x = clickPos.x - this.x0; + let y = clickPos.y - this.y0; + if (this.moved && x === this.dx && y === this.dy) { + this.setHand(x, y); + } + if (this.currentView === 'hours') { + this.showView('minutes', this.options.duration / 2); + } + else if (this.options.autoClose) { + this.minutesView.classList.add('timepicker-dial-out'); + setTimeout(() => { + this.done(); + }, this.options.duration / 2); + } + if (typeof this.options.onSelect === 'function') { + this.options.onSelect.call(this, this.hours, this.minutes); + } + // Unbind mousemove event + document.removeEventListener('mousemove', this._handleDocumentClickMove); + document.removeEventListener('touchmove', this._handleDocumentClickMove); + }; + _insertHTMLIntoDOM() { + const template = document.createElement('template'); + template.innerHTML = Timepicker._template.trim(); + this.modalEl = template.content.firstChild; + this.modalEl.id = 'modal-' + this.id; + // Append popover to input by default + const optEl = this.options.container; + const containerEl = optEl instanceof HTMLElement ? optEl : document.querySelector(optEl); + if (this.options.container && !!containerEl) { + containerEl.append(this.modalEl); + } + else { + this.el.parentElement.appendChild(this.modalEl); + } + } + _setupModal() { + this.modal = Modal.init(this.modalEl, { + onOpenStart: this.options.onOpenStart, + onOpenEnd: this.options.onOpenEnd, + onCloseStart: this.options.onCloseStart, + onCloseEnd: () => { + if (typeof this.options.onCloseEnd === 'function') { + this.options.onCloseEnd.call(this); + } + this.isOpen = false; + } + }); + } + _setupVariables() { + this.currentView = 'hours'; + this.vibrate = navigator.vibrate + ? 'vibrate' + : navigator.webkitVibrate + ? 'webkitVibrate' + : null; + this._canvas = this.modalEl.querySelector('.timepicker-canvas'); + this.plate = this.modalEl.querySelector('.timepicker-plate'); + this.digitalClock = this.modalEl.querySelector('.timepicker-display-column'); + this.hoursView = this.modalEl.querySelector('.timepicker-hours'); + this.minutesView = this.modalEl.querySelector('.timepicker-minutes'); + this.inputHours = this.modalEl.querySelector('.timepicker-input-hours'); + this.inputMinutes = this.modalEl.querySelector('.timepicker-input-minutes'); + this.spanAmPm = this.modalEl.querySelector('.timepicker-span-am-pm'); + this.footer = this.modalEl.querySelector('.timepicker-footer'); + this.amOrPm = 'PM'; + } + _createButton(text, visibility) { + const button = document.createElement('button'); + button.classList.add('btn-flat', 'waves-effect'); + button.style.visibility = visibility; + button.type = 'button'; + button.tabIndex = this.options.twelveHour ? 3 : 1; + button.innerText = text; + return button; + } + _pickerSetup() { + const clearButton = this._createButton(this.options.i18n.clear, this.options.showClearBtn ? '' : 'hidden'); + clearButton.classList.add('timepicker-clear'); + clearButton.addEventListener('click', this.clear); + this.footer.appendChild(clearButton); + const confirmationBtnsContainer = document.createElement('div'); + confirmationBtnsContainer.classList.add('confirmation-btns'); + this.footer.append(confirmationBtnsContainer); + const cancelButton = this._createButton(this.options.i18n.cancel, ''); + cancelButton.classList.add('timepicker-close'); + cancelButton.addEventListener('click', this.close); + confirmationBtnsContainer.appendChild(cancelButton); + const doneButton = this._createButton(this.options.i18n.done, ''); + doneButton.classList.add('timepicker-close'); + doneButton.addEventListener('click', this.done); + confirmationBtnsContainer.appendChild(doneButton); + } + _clockSetup() { + if (this.options.twelveHour) { + // AM Button + this._amBtn = document.createElement('div'); + this._amBtn.classList.add('am-btn'); + this._amBtn.innerText = 'AM'; + this._amBtn.addEventListener('click', this._handleAmPmClick); + this.spanAmPm.appendChild(this._amBtn); + // PM Button + this._pmBtn = document.createElement('div'); + this._pmBtn.classList.add('pm-btn'); + this._pmBtn.innerText = 'PM'; + this._pmBtn.addEventListener('click', this._handleAmPmClick); + this.spanAmPm.appendChild(this._pmBtn); + } + this._buildHoursView(); + this._buildMinutesView(); + this._buildSVGClock(); + } + _buildSVGClock() { + // Draw clock hands and others + let dialRadius = this.options.dialRadius; + let tickRadius = this.options.tickRadius; + let diameter = dialRadius * 2; + let svg = Timepicker._createSVGEl('svg'); + svg.setAttribute('class', 'timepicker-svg'); + svg.setAttribute('width', diameter.toString()); + svg.setAttribute('height', diameter.toString()); + let g = Timepicker._createSVGEl('g'); + g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')'); + let bearing = Timepicker._createSVGEl('circle'); + bearing.setAttribute('class', 'timepicker-canvas-bearing'); + bearing.setAttribute('cx', '0'); + bearing.setAttribute('cy', '0'); + bearing.setAttribute('r', '4'); + let hand = Timepicker._createSVGEl('line'); + hand.setAttribute('x1', '0'); + hand.setAttribute('y1', '0'); + let bg = Timepicker._createSVGEl('circle'); + bg.setAttribute('class', 'timepicker-canvas-bg'); + bg.setAttribute('r', tickRadius.toString()); + g.appendChild(hand); + g.appendChild(bg); + g.appendChild(bearing); + svg.appendChild(g); + this._canvas.appendChild(svg); + this.hand = hand; + this.bg = bg; + this.bearing = bearing; + this.g = g; + } + _buildHoursView() { + const $tick = document.createElement('div'); + $tick.classList.add('timepicker-tick'); + // Hours view + if (this.options.twelveHour) { + for (let i = 1; i < 13; i += 1) { + const tick = $tick.cloneNode(true); + const radian = (i / 6) * Math.PI; + const radius = this.options.outerRadius; + tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px'; + tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px'; + tick.innerHTML = i === 0 ? '00' : i.toString(); + this.hoursView.appendChild(tick); + // tick.on(mousedownEvent, mousedown); + } + } + else { + for (let i = 0; i < 24; i += 1) { + const tick = $tick.cloneNode(true); + const radian = (i / 6) * Math.PI; + const inner = i > 0 && i < 13; + const radius = inner ? this.options.innerRadius : this.options.outerRadius; + tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px'; + tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px'; + tick.innerHTML = i === 0 ? '00' : i.toString(); + this.hoursView.appendChild(tick); + // tick.on(mousedownEvent, mousedown); + } + } + } + _buildMinutesView() { + const _tick = document.createElement('div'); + _tick.classList.add('timepicker-tick'); + // Minutes view + for (let i = 0; i < 60; i += 5) { + const tick = _tick.cloneNode(true); + const radian = (i / 30) * Math.PI; + tick.style.left = + this.options.dialRadius + + Math.sin(radian) * this.options.outerRadius - + this.options.tickRadius + + 'px'; + tick.style.top = + this.options.dialRadius - + Math.cos(radian) * this.options.outerRadius - + this.options.tickRadius + + 'px'; + tick.innerHTML = Timepicker._addLeadingZero(i); + this.minutesView.appendChild(tick); + } + } + _handleAmPmClick = (e) => { + const btnClicked = e.target; + this.amOrPm = btnClicked.classList.contains('am-btn') ? 'AM' : 'PM'; + this._updateAmPmView(); + }; + _updateAmPmView() { + if (this.options.twelveHour) { + if (this.amOrPm === 'PM') { + this._amBtn.classList.remove('text-primary'); + this._pmBtn.classList.add('text-primary'); + } + else if (this.amOrPm === 'AM') { + this._amBtn.classList.add('text-primary'); + this._pmBtn.classList.remove('text-primary'); + } + } + } + _updateTimeFromInput() { + // Get the time + let value = ((this.el.value || this.options.defaultTime || '') + '').split(':'); + if (this.options.twelveHour && !(typeof value[1] === 'undefined')) { + if (value[1].toUpperCase().indexOf('AM') > 0) { + this.amOrPm = 'AM'; + } + else { + this.amOrPm = 'PM'; + } + value[1] = value[1].replace('AM', '').replace('PM', ''); + } + if (value[0] === 'now') { + let now = new Date(+new Date() + this.options.fromNow); + value = [now.getHours().toString(), now.getMinutes().toString()]; + if (this.options.twelveHour) { + this.amOrPm = parseInt(value[0]) >= 12 && parseInt(value[0]) < 24 ? 'PM' : 'AM'; + } + } + this.hours = +value[0] || 0; + this.minutes = +value[1] || 0; + this.inputHours.value = this.hours; + this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes); + this._updateAmPmView(); + } + /** + * Show hours or minutes view on timepicker. + * @param view The name of the view you want to switch to, 'hours' or 'minutes'. + */ + showView = (view, delay = null) => { + if (view === 'minutes' && getComputedStyle(this.hoursView).visibility === 'visible') ; + let isHours = view === 'hours', nextView = isHours ? this.hoursView : this.minutesView, hideView = isHours ? this.minutesView : this.hoursView; + this.currentView = view; + if (isHours) { + this.inputHours.classList.add('text-primary'); + this.inputMinutes.classList.remove('text-primary'); + } + else { + this.inputHours.classList.remove('text-primary'); + this.inputMinutes.classList.add('text-primary'); + } + // Transition view + hideView.classList.add('timepicker-dial-out'); + nextView.style.visibility = 'visible'; + nextView.classList.remove('timepicker-dial-out'); + // Reset clock hand + this.resetClock(delay); + // After transitions ended + clearTimeout(this.toggleViewTimer); + this.toggleViewTimer = setTimeout(() => { + hideView.style.visibility = 'hidden'; + }, this.options.duration); + }; + resetClock(delay) { + let view = this.currentView, value = this[view], isHours = view === 'hours', unit = Math.PI / (isHours ? 6 : 30), radian = value * unit, radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius, x = Math.sin(radian) * radius, y = -Math.cos(radian) * radius, self = this; + if (delay) { + this.canvas?.classList.add('timepicker-canvas-out'); + setTimeout(() => { + self.canvas?.classList.remove('timepicker-canvas-out'); + self.setHand(x, y); + }, delay); + } + else { + this.setHand(x, y); + } + } + _inputFromTextField = () => { + const isHours = this.currentView === 'hours'; + if (isHours) { + const value = parseInt(this.inputHours.value); + if (value > 0 && value < 13) { + this.drawClockFromTimeInput(value, isHours); + this.showView('minutes', this.options.duration / 2); + this.hours = value; + this.inputMinutes.focus(); + } + else { + const hour = new Date().getHours(); + this.inputHours.value = (hour % 12).toString(); + } + } + else { + const value = parseInt(this.inputMinutes.value); + if (value >= 0 && value < 60) { + this.inputMinutes.value = Timepicker._addLeadingZero(value); + this.drawClockFromTimeInput(value, isHours); + this.minutes = value; + this.modalEl.querySelector('.confirmation-btns :nth-child(2)').focus(); + } + else { + const minutes = new Date().getMinutes(); + this.inputMinutes.value = Timepicker._addLeadingZero(minutes); + } + } + }; + drawClockFromTimeInput(value, isHours) { + const unit = Math.PI / (isHours ? 6 : 30); + const radian = value * unit; + let radius; + if (this.options.twelveHour) { + radius = this.options.outerRadius; + } + let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius; + this.hand.setAttribute('x2', cx1.toString()); + this.hand.setAttribute('y2', cy1.toString()); + this.bg.setAttribute('cx', cx2.toString()); + this.bg.setAttribute('cy', cy2.toString()); + } + setHand(x, y, roundBy5 = false) { + let radian = Math.atan2(x, -y), isHours = this.currentView === 'hours', unit = Math.PI / (isHours || roundBy5 ? 6 : 30), z = Math.sqrt(x * x + y * y), inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2, radius = inner ? this.options.innerRadius : this.options.outerRadius; + if (this.options.twelveHour) { + radius = this.options.outerRadius; + } + // Radian should in range [0, 2PI] + if (radian < 0) { + radian = Math.PI * 2 + radian; + } + // Get the round value + let value = Math.round(radian / unit); + // Get the round radian + radian = value * unit; + // Correct the hours or minutes + if (this.options.twelveHour) { + if (isHours) { + if (value === 0) + value = 12; + } + else { + if (roundBy5) + value *= 5; + if (value === 60) + value = 0; + } + } + else { + if (isHours) { + if (value === 12) { + value = 0; + } + value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12; + } + else { + if (roundBy5) { + value *= 5; + } + if (value === 60) { + value = 0; + } + } + } + // Once hours or minutes changed, vibrate the device + if (this[this.currentView] !== value) { + if (this.vibrate && this.options.vibrate) { + // Do not vibrate too frequently + if (!this.vibrateTimer) { + navigator[this.vibrate](10); + this.vibrateTimer = setTimeout(() => { + this.vibrateTimer = null; + }, 100); + } + } + } + this[this.currentView] = value; + if (isHours) { + this.inputHours.value = value.toString(); + } + else { + this.inputMinutes.value = Timepicker._addLeadingZero(value); + } + // Set clock hand and others' position + let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius; + this.hand.setAttribute('x2', cx1.toString()); + this.hand.setAttribute('y2', cy1.toString()); + this.bg.setAttribute('cx', cx2.toString()); + this.bg.setAttribute('cy', cy2.toString()); + } + /** + * Open timepicker. + */ + open = () => { + if (this.isOpen) + return; + this.isOpen = true; + this._updateTimeFromInput(); + this.showView('hours'); + this.modal.open(undefined); + }; + /** + * Close timepicker. + */ + close = () => { + if (!this.isOpen) + return; + this.isOpen = false; + this.modal.close(); + }; + done = (e = null, clearValue = null) => { + // Set input value + let last = this.el.value; + let value = clearValue + ? '' + : Timepicker._addLeadingZero(this.hours) + ':' + Timepicker._addLeadingZero(this.minutes); + this.time = value; + if (!clearValue && this.options.twelveHour) { + value = `${value} ${this.amOrPm}`; + } + this.el.value = value; + // Trigger change event + if (value !== last) { + this.el.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true })); + } + this.close(); + this.el.focus(); + }; + clear = () => { + this.done(null, true); + }; + static { + Timepicker._template = ` +
+
+
+
+
+ + : + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ { + if (this.isOpen) + return; + isManual = isManual === undefined ? true : undefined; // Default value true + this.isOpen = true; + // Update tooltip content with HTML attribute options + this.options = { ...this.options, ...this._getAttributeOptions() }; + this._updateTooltipContent(); + this._setEnterDelayTimeout(isManual); + }; + /** + * Hide tooltip. + */ + close = () => { + if (!this.isOpen) + return; + this.isHovered = false; + this.isFocused = false; + this.isOpen = false; + this._setExitDelayTimeout(); + }; + _setExitDelayTimeout() { + clearTimeout(this._exitDelayTimeout); + this._exitDelayTimeout = setTimeout(() => { + if (this.isHovered || this.isFocused) + return; + this._animateOut(); + }, this.options.exitDelay); + } + _setEnterDelayTimeout(isManual) { + clearTimeout(this._enterDelayTimeout); + this._enterDelayTimeout = setTimeout(() => { + if (!this.isHovered && !this.isFocused && !isManual) + return; + this._animateIn(); + }, this.options.enterDelay); + } + _positionTooltip() { + const tooltip = this.tooltipEl; + const origin = this.el, originHeight = origin.offsetHeight, originWidth = origin.offsetWidth, tooltipHeight = tooltip.offsetHeight, tooltipWidth = tooltip.offsetWidth, margin = this.options.margin; + (this.xMovement = 0), (this.yMovement = 0); + let targetTop = origin.getBoundingClientRect().top + Utils.getDocumentScrollTop(); + let targetLeft = origin.getBoundingClientRect().left + Utils.getDocumentScrollLeft(); + if (this.options.position === 'top') { + targetTop += -tooltipHeight - margin; + targetLeft += originWidth / 2 - tooltipWidth / 2; + this.yMovement = -this.options.transitionMovement; + } + else if (this.options.position === 'right') { + targetTop += originHeight / 2 - tooltipHeight / 2; + targetLeft += originWidth + margin; + this.xMovement = this.options.transitionMovement; + } + else if (this.options.position === 'left') { + targetTop += originHeight / 2 - tooltipHeight / 2; + targetLeft += -tooltipWidth - margin; + this.xMovement = -this.options.transitionMovement; + } + else { + targetTop += originHeight + margin; + targetLeft += originWidth / 2 - tooltipWidth / 2; + this.yMovement = this.options.transitionMovement; + } + const newCoordinates = this._repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight); + tooltip.style.top = newCoordinates.y + 'px'; + tooltip.style.left = newCoordinates.x + 'px'; + } + _repositionWithinScreen(x, y, width, height) { + const scrollLeft = Utils.getDocumentScrollLeft(); + const scrollTop = Utils.getDocumentScrollTop(); + let newX = x - scrollLeft; + let newY = y - scrollTop; + const bounding = { + left: newX, + top: newY, + width: width, + height: height + }; + const offset = this.options.margin + this.options.transitionMovement; + const edges = Utils.checkWithinContainer(document.body, bounding, offset); + if (edges.left) { + newX = offset; + } + else if (edges.right) { + newX -= newX + width - window.innerWidth; + } + if (edges.top) { + newY = offset; + } + else if (edges.bottom) { + newY -= newY + height - window.innerHeight; + } + return { + x: newX + scrollLeft, + y: newY + scrollTop + }; + } + _animateIn() { + this._positionTooltip(); + this.tooltipEl.style.visibility = 'visible'; + const duration = this.options.inDuration; + // easeOutCubic + this.tooltipEl.style.transition = ` + transform ${duration}ms ease-out, + opacity ${duration}ms ease-out`; + setTimeout(() => { + this.tooltipEl.style.transform = `translateX(${this.xMovement}px) translateY(${this.yMovement}px)`; + this.tooltipEl.style.opacity = (this.options.opacity || 1).toString(); + }, 1); + } + _animateOut() { + const duration = this.options.outDuration; + // easeOutCubic + this.tooltipEl.style.transition = ` + transform ${duration}ms ease-out, + opacity ${duration}ms ease-out`; + setTimeout(() => { + this.tooltipEl.style.transform = `translateX(0px) translateY(0px)`; + this.tooltipEl.style.opacity = '0'; + }, 1); + /* + anim.remove(this.tooltipEl); + anim({ + targets: this.tooltipEl, + opacity: 0, + translateX: 0, + translateY: 0, + duration: this.options.outDuration, + easing: 'easeOutCubic' + }); + */ + } + _handleMouseEnter = () => { + this.isHovered = true; + this.isFocused = false; // Allows close of tooltip when opened by focus. + this.open(false); + }; + _handleMouseLeave = () => { + this.isHovered = false; + this.isFocused = false; // Allows close of tooltip when opened by focus. + this.close(); + }; + _handleFocus = () => { + if (Utils.tabPressed) { + this.isFocused = true; + this.open(false); + } + }; + _handleBlur = () => { + this.isFocused = false; + this.close(); + }; + _getAttributeOptions() { + let attributeOptions = {}; + const tooltipTextOption = this.el.getAttribute('data-tooltip'); + const tooltipId = this.el.getAttribute('data-tooltip-id'); + const positionOption = this.el.getAttribute('data-position'); + if (tooltipTextOption) { + attributeOptions.text = tooltipTextOption; + } + if (positionOption) { + attributeOptions.position = positionOption; + } + if (tooltipId) { + attributeOptions.tooltipId = tooltipId; + } + return attributeOptions; + } +} + +class Waves { + static _offset(el) { + const box = el.getBoundingClientRect(); + const docElem = document.documentElement; + return { + top: box.top + window.pageYOffset - docElem.clientTop, + left: box.left + window.pageXOffset - docElem.clientLeft + }; + } + // https://phoenix-dx.com/css-techniques-for-material-ripple-effect/ + static renderWaveEffect(targetElement, position = null, color = null) { + const isCentered = position === null; + const duration = 500; + let animationFrame, animationStart; + const animationStep = function (timestamp) { + if (!animationStart) { + animationStart = timestamp; + } + const frame = timestamp - animationStart; + if (frame < duration) { + const easing = (frame / duration) * (2 - (frame / duration)); + const circle = isCentered ? 'circle at 50% 50%' : `circle at ${position.x}px ${position.y}px`; + const waveColor = `rgba(${color?.r || 0}, ${color?.g || 0}, ${color?.b || 0}, ${0.3 * (1 - easing)})`; + const stop = 90 * easing + "%"; + targetElement.style.backgroundImage = "radial-gradient(" + circle + ", " + waveColor + " " + stop + ", transparent " + stop + ")"; + animationFrame = window.requestAnimationFrame(animationStep); + } + else { + targetElement.style.backgroundImage = 'none'; + window.cancelAnimationFrame(animationFrame); + } + }; + animationFrame = window.requestAnimationFrame(animationStep); + } + static Init() { + if (typeof document !== 'undefined') + document?.addEventListener("DOMContentLoaded", () => { + document.body.addEventListener('click', e => { + const trigger = e.target; + const el = trigger.closest('.waves-effect'); + if (el && el.contains(trigger)) { + const isCircular = el.classList.contains('waves-circle'); + const x = e.pageX - Waves._offset(el).left; + const y = e.pageY - Waves._offset(el).top; + let color = null; + if (el.classList.contains('waves-light')) + color = { r: 255, g: 255, b: 255 }; + Waves.renderWaveEffect(el, isCircular ? null : { x, y }, color); + } + }); + }); + } +} + +const _defaults$3 = {}; +// TODO: !!!!! +class Range extends Component { + _mousedown; + value; + thumb; + constructor(el, options) { + super(el, options, Range); + this.el.M_Range = this; + this.options = { + ...Range.defaults, + ...options + }; + this._mousedown = false; + this._setupThumb(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$3; + } + /** + * Initializes instances of Range. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Range); + } + static getInstance(el) { + return el.M_Range; + } + destroy() { + this._removeEventHandlers(); + this._removeThumb(); + this.el.M_Range = undefined; + } + _setupEventHandlers() { + this.el.addEventListener('change', this._handleRangeChange); + this.el.addEventListener('mousedown', this._handleRangeMousedownTouchstart); + this.el.addEventListener('touchstart', this._handleRangeMousedownTouchstart); + this.el.addEventListener('input', this._handleRangeInputMousemoveTouchmove); + this.el.addEventListener('mousemove', this._handleRangeInputMousemoveTouchmove); + this.el.addEventListener('touchmove', this._handleRangeInputMousemoveTouchmove); + this.el.addEventListener('mouseup', this._handleRangeMouseupTouchend); + this.el.addEventListener('touchend', this._handleRangeMouseupTouchend); + this.el.addEventListener('blur', this._handleRangeBlurMouseoutTouchleave); + this.el.addEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave); + this.el.addEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave); + } + _removeEventHandlers() { + this.el.removeEventListener('change', this._handleRangeChange); + this.el.removeEventListener('mousedown', this._handleRangeMousedownTouchstart); + this.el.removeEventListener('touchstart', this._handleRangeMousedownTouchstart); + this.el.removeEventListener('input', this._handleRangeInputMousemoveTouchmove); + this.el.removeEventListener('mousemove', this._handleRangeInputMousemoveTouchmove); + this.el.removeEventListener('touchmove', this._handleRangeInputMousemoveTouchmove); + this.el.removeEventListener('mouseup', this._handleRangeMouseupTouchend); + this.el.removeEventListener('touchend', this._handleRangeMouseupTouchend); + this.el.removeEventListener('blur', this._handleRangeBlurMouseoutTouchleave); + this.el.removeEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave); + this.el.removeEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave); + } + _handleRangeChange = () => { + this.value.innerHTML = this.el.value; + if (!this.thumb.classList.contains('active')) { + this._showRangeBubble(); + } + const offsetLeft = this._calcRangeOffset(); + this.thumb.classList.add('active'); + this.thumb.style.left = offsetLeft + 'px'; + }; + _handleRangeMousedownTouchstart = (e) => { + // Set indicator value + this.value.innerHTML = this.el.value; + this._mousedown = true; + this.el.classList.add('active'); + if (!this.thumb.classList.contains('active')) { + this._showRangeBubble(); + } + if (e.type !== 'input') { + const offsetLeft = this._calcRangeOffset(); + this.thumb.classList.add('active'); + this.thumb.style.left = offsetLeft + 'px'; + } + }; + _handleRangeInputMousemoveTouchmove = () => { + if (this._mousedown) { + if (!this.thumb.classList.contains('active')) { + this._showRangeBubble(); + } + const offsetLeft = this._calcRangeOffset(); + this.thumb.classList.add('active'); + this.thumb.style.left = offsetLeft + 'px'; + this.value.innerHTML = this.el.value; + } + }; + _handleRangeMouseupTouchend = () => { + this._mousedown = false; + this.el.classList.remove('active'); + }; + _handleRangeBlurMouseoutTouchleave = () => { + if (!this._mousedown) { + const paddingLeft = parseInt(getComputedStyle(this.el).paddingLeft); + const marginLeftText = 7 + paddingLeft + 'px'; + if (this.thumb.classList.contains('active')) { + const duration = 100; + // from + this.thumb.style.transition = 'none'; + setTimeout(() => { + this.thumb.style.transition = ` + height ${duration}ms ease, + width ${duration}ms ease, + top ${duration}ms ease, + margin ${duration}ms ease + `; + // to + this.thumb.style.height = '0'; + this.thumb.style.width = '0'; + this.thumb.style.top = '0'; + this.thumb.style.marginLeft = marginLeftText; + }, 1); + } + this.thumb.classList.remove('active'); + } + }; + _setupThumb() { + this.thumb = document.createElement('span'); + this.value = document.createElement('span'); + this.thumb.classList.add('thumb'); + this.value.classList.add('value'); + this.thumb.append(this.value); + this.el.after(this.thumb); + } + _removeThumb() { + this.thumb.remove(); + } + _showRangeBubble() { + const paddingLeft = parseInt(getComputedStyle(this.thumb.parentElement).paddingLeft); + const marginLeftText = -7 + paddingLeft + 'px'; // TODO: fix magic number? + const duration = 300; + // easeOutQuint + this.thumb.style.transition = ` + height ${duration}ms ease, + width ${duration}ms ease, + top ${duration}ms ease, + margin ${duration}ms ease + `; + // to + this.thumb.style.height = '30px'; + this.thumb.style.width = '30px'; + this.thumb.style.top = '-30px'; + this.thumb.style.marginLeft = marginLeftText; + } + _calcRangeOffset() { + const width = this.el.getBoundingClientRect().width - 15; + const max = parseFloat(this.el.getAttribute('max')) || 100; // Range default max + const min = parseFloat(this.el.getAttribute('min')) || 0; // Range default min + const percent = (parseFloat(this.el.value) - min) / (max - min); + return percent * width; + } + /** + * Initializes every range input in the current document. + */ + static Init() { + if (typeof document !== 'undefined') + Range.init((document?.querySelectorAll('input[type=range]')), {}); + } +} + +const _defaults$2 = Object.freeze({}); +class CharacterCounter extends Component { + /** Stores the reference to the counter HTML element. */ + counterEl; + /** Specifies whether the input is valid or not. */ + isInvalid; + /** Specifies whether the input text has valid length or not. */ + isValidLength; + constructor(el, options) { + super(el, {}, CharacterCounter); + this.el.M_CharacterCounter = this; + this.options = { + ...CharacterCounter.defaults, + ...options + }; + this.isInvalid = false; + this.isValidLength = false; + this._setupCounter(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$2; + } + /** + * Initializes instances of CharacterCounter. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, CharacterCounter); + } + static getInstance(el) { + return el.M_CharacterCounter; + } + destroy() { + this._removeEventHandlers(); + this.el.CharacterCounter = undefined; + this._removeCounter(); + } + _setupEventHandlers() { + this.el.addEventListener('focus', this.updateCounter, true); + this.el.addEventListener('input', this.updateCounter, true); + } + _removeEventHandlers() { + this.el.removeEventListener('focus', this.updateCounter, true); + this.el.removeEventListener('input', this.updateCounter, true); + } + _setupCounter() { + this.counterEl = document.createElement('span'); + this.counterEl.classList.add('character-counter'); + this.counterEl.style.float = 'right'; + this.counterEl.style.fontSize = '12px'; + this.counterEl.style.height = '1'; + this.el.parentElement.appendChild(this.counterEl); + } + _removeCounter() { + this.counterEl.remove(); + } + updateCounter = () => { + let maxLength = parseInt(this.el.getAttribute('maxlength')), actualLength = this.el.value.length; + this.isValidLength = actualLength <= maxLength; + let counterString = actualLength.toString(); + if (maxLength) { + counterString += '/' + maxLength; + this._validateInput(); + } + this.counterEl.innerHTML = counterString; + }; + _validateInput() { + if (this.isValidLength && this.isInvalid) { + this.isInvalid = false; + this.el.classList.remove('invalid'); + } + else if (!this.isValidLength && !this.isInvalid) { + this.isInvalid = true; + this.el.classList.remove('valid'); + this.el.classList.add('invalid'); + } + } +} + +let _defaults$1 = { + indicators: true, + height: 400, + duration: 500, + interval: 6000, + pauseOnFocus: true, + pauseOnHover: true, + indicatorLabelFunc: null // Function which will generate a label for the indicators (ARIA) +}; +class Slider extends Component { + /** Index of current slide. */ + activeIndex; + interval; + eventPause; + _slider; + _slides; + _activeSlide; + _indicators; + _hovered; + _focused; + _focusCurrent; + _sliderId; + constructor(el, options) { + super(el, options, Slider); + this.el.M_Slider = this; + this.options = { + ...Slider.defaults, + ...options + }; + // init props + this.interval = null; + this.eventPause = false; + this._hovered = false; + this._focused = false; + this._focusCurrent = false; + // setup + this._slider = this.el.querySelector('.slides'); + this._slides = Array.from(this._slider.querySelectorAll('li')); + this.activeIndex = this._slides.findIndex(li => li.classList.contains('active')); + if (this.activeIndex !== -1) { + this._activeSlide = this._slides[this.activeIndex]; + } + this._setSliderHeight(); + // Sets element id if it does not have one + if (this._slider.hasAttribute('id')) + this._sliderId = this._slider.getAttribute('id'); + else { + this._sliderId = 'slider-' + Utils.guid(); + this._slider.setAttribute('id', this._sliderId); + } + const placeholderBase64 = 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; + // Set initial positions of captions + this._slides.forEach(slide => { + // Caption + //const caption = slide.querySelector('.caption'); + //if (caption) this._animateCaptionIn(caption, 0); + // Set Images as Background Images + const img = slide.querySelector('img'); + if (img) { + if (img.src !== placeholderBase64) { + img.style.backgroundImage = 'url(' + img.src + ')'; + img.src = placeholderBase64; + } + } + // Sets slide as focusable by code + if (!slide.hasAttribute('tabindex')) + slide.setAttribute('tabindex', '-1'); + // Removes initial visibility from "inactive" slides + slide.style.visibility = 'hidden'; + }); + this._setupIndicators(); + // Show active slide + if (this._activeSlide) { + this._activeSlide.style.display = 'block'; + this._activeSlide.style.visibility = 'visible'; + } + else { + this.activeIndex = 0; + this._slides[0].classList.add('active'); + this._slides[0].style.visibility = 'visible'; + this._activeSlide = this._slides[0]; + this._animateSlide(this._slides[0], true); + // Update indicators + if (this.options.indicators) { + this._indicators[this.activeIndex].children[0].classList.add('active'); + } + } + this._setupEventHandlers(); + // auto scroll + this.start(); + } + static get defaults() { + return _defaults$1; + } + /** + * Initializes instances of Slider. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Slider); + } + static getInstance(el) { + return el.M_Slider; + } + destroy() { + this.pause(); + this._removeIndicators(); + this._removeEventHandlers(); + this.el.M_Slider = undefined; + } + _setupEventHandlers() { + if (this.options.pauseOnFocus) { + this.el.addEventListener('focusin', this._handleAutoPauseFocus); + this.el.addEventListener('focusout', this._handleAutoStartFocus); + } + if (this.options.pauseOnHover) { + this.el.addEventListener('mouseenter', this._handleAutoPauseHover); + this.el.addEventListener('mouseleave', this._handleAutoStartHover); + } + if (this.options.indicators) { + this._indicators.forEach((el) => { + el.addEventListener('click', this._handleIndicatorClick); + }); + } + } + _removeEventHandlers() { + if (this.options.pauseOnFocus) { + this.el.removeEventListener('focusin', this._handleAutoPauseFocus); + this.el.removeEventListener('focusout', this._handleAutoStartFocus); + } + if (this.options.pauseOnHover) { + this.el.removeEventListener('mouseenter', this._handleAutoPauseHover); + this.el.removeEventListener('mouseleave', this._handleAutoStartHover); + } + if (this.options.indicators) { + this._indicators.forEach((el) => { + el.removeEventListener('click', this._handleIndicatorClick); + }); + } + } + _handleIndicatorClick = (e) => { + const el = e.target.parentElement; + const currIndex = [...el.parentNode.children].indexOf(el); + this._focusCurrent = true; + this.set(currIndex); + }; + _handleAutoPauseHover = () => { + this._hovered = true; + if (this.interval != null) { + this._pause(true); + } + }; + _handleAutoPauseFocus = () => { + this._focused = true; + if (this.interval != null) { + this._pause(true); + } + }; + _handleAutoStartHover = () => { + this._hovered = false; + if (!(this.options.pauseOnFocus && this._focused) && this.eventPause) { + this.start(); + } + }; + _handleAutoStartFocus = () => { + this._focused = false; + if (!(this.options.pauseOnHover && this._hovered) && this.eventPause) { + this.start(); + } + }; + _handleInterval = () => { + const activeElem = this._slider.querySelector('.active'); + let newActiveIndex = [...activeElem.parentNode.children].indexOf(activeElem); + if (this._slides.length === newActiveIndex + 1) + newActiveIndex = 0; // loop to start + else + newActiveIndex += 1; + this.set(newActiveIndex); + }; + _animateSlide(slide, isDirectionIn) { + let dx = 0, dy = 0; + // from + slide.style.opacity = isDirectionIn ? '0' : '1'; + setTimeout(() => { + slide.style.transition = `opacity ${this.options.duration}ms ease`; + // to + slide.style.opacity = isDirectionIn ? '1' : '0'; + }, 1); + // Caption + const caption = slide.querySelector('.caption'); + if (!caption) + return; + if (caption.classList.contains('center-align')) + dy = -100; + else if (caption.classList.contains('right-align')) + dx = 100; + else if (caption.classList.contains('left-align')) + dx = -100; + // from + caption.style.opacity = isDirectionIn ? '0' : '1'; + caption.style.transform = isDirectionIn ? `translate(${dx}px, ${dy}px)` : `translate(0, 0)`; + setTimeout(() => { + caption.style.transition = `opacity ${this.options.duration}ms ease, transform ${this.options.duration}ms ease`; + // to + caption.style.opacity = isDirectionIn ? '1' : '0'; + caption.style.transform = isDirectionIn ? `translate(0, 0)` : `translate(${dx}px, ${dy}px)`; + }, this.options.duration); // delay + } + _setSliderHeight() { + // If fullscreen, do nothing + if (!this.el.classList.contains('fullscreen')) { + if (this.options.indicators) { + // Add height if indicators are present + this.el.style.height = (this.options.height + 40) + 'px'; //.css('height', this.options.height + 40 + 'px'); + } + else { + this.el.style.height = this.options.height + 'px'; + } + this._slider.style.height = this.options.height + 'px'; + } + } + _setupIndicators() { + if (this.options.indicators) { + const ul = document.createElement('ul'); + ul.classList.add('indicators'); + const arrLi = []; + this._slides.forEach((el, i) => { + const label = this.options.indicatorLabelFunc + ? this.options.indicatorLabelFunc.call(this, i + 1, i === 0) + : `${i + 1}`; + const li = document.createElement('li'); + li.classList.add('indicator-item'); + li.innerHTML = ``; + arrLi.push(li); + ul.append(li); + }); + this.el.append(ul); + this._indicators = arrLi; + } + } + _removeIndicators() { + this.el.querySelector('ul.indicators').remove(); //find('ul.indicators').remove(); + } + set(index) { + // Wrap around indices. + if (index >= this._slides.length) + index = 0; + else if (index < 0) + index = this._slides.length - 1; + // Only do if index changes + if (this.activeIndex === index) + return; + this._activeSlide = this._slides[this.activeIndex]; + const _caption = this._activeSlide.querySelector('.caption'); + this._activeSlide.classList.remove('active'); + // Enables every slide + this._slides.forEach(slide => slide.style.visibility = 'visible'); + //--- Hide active Slide + Caption + this._activeSlide.style.opacity = '0'; + setTimeout(() => { + this._slides.forEach(slide => { + if (slide.classList.contains('active')) + return; + slide.style.opacity = '0'; + slide.style.transform = 'translate(0, 0)'; + // Disables invisible slides (for assistive technologies) + slide.style.visibility = 'hidden'; + }); + }, this.options.duration); + // Hide active Caption + //this._animateCaptionIn(_caption, this.options.duration); + _caption.style.opacity = '0'; + // Update indicators + if (this.options.indicators) { + const activeIndicator = this._indicators[this.activeIndex].children[0]; + const nextIndicator = this._indicators[index].children[0]; + activeIndicator.classList.remove('active'); + nextIndicator.classList.add('active'); + if (typeof this.options.indicatorLabelFunc === "function") { + activeIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, this.activeIndex, false); + nextIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, index, true); + } + } + //--- Show new Slide + Caption + this._animateSlide(this._slides[index], true); + this._slides[index].classList.add('active'); + this.activeIndex = index; + // Reset interval, if allowed. This check prevents autostart + // when slider is paused, since it can be changed though indicators. + if (this.interval != null) { + this.start(); + } + } + _pause(fromEvent) { + clearInterval(this.interval); + this.eventPause = fromEvent; + this.interval = null; + } + /** + * Pause slider autoslide. + */ + pause = () => { + this._pause(false); + }; + /** + * Start slider autoslide. + */ + start = () => { + clearInterval(this.interval); + this.interval = setInterval(this._handleInterval, this.options.duration + this.options.interval); + this.eventPause = false; + }; + /** + * Move to next slider. + */ + next = () => { + let newIndex = this.activeIndex + 1; + // Wrap around indices. + if (newIndex >= this._slides.length) + newIndex = 0; + else if (newIndex < 0) + newIndex = this._slides.length - 1; + this.set(newIndex); + }; + /** + * Move to prev slider. + */ + prev = () => { + let newIndex = this.activeIndex - 1; + // Wrap around indices. + if (newIndex >= this._slides.length) + newIndex = 0; + else if (newIndex < 0) + newIndex = this._slides.length - 1; + this.set(newIndex); + }; +} + +let _defaults = { + text: '', + displayLength: 4000, + inDuration: 300, + outDuration: 375, + classes: '', + completeCallback: null, + activationPercent: 0.8 +}; +class Toast { + /** The toast element. */ + el; + /** + * The remaining amount of time in ms that the toast + * will stay before dismissal. + */ + timeRemaining; + /** + * Describes the current pan state of the Toast. + */ + panning; + options; + message; + counterInterval; + wasSwiped; + startingXPos; + xPos; + time; + deltaX; + velocityX; + static _toasts; + static _container; + static _draggedToast; + constructor(options) { + this.options = { + ...Toast.defaults, + ...options + }; + this.message = this.options.text; + this.panning = false; + this.timeRemaining = this.options.displayLength; + if (Toast._toasts.length === 0) { + Toast._createContainer(); + } + // Create new toast + Toast._toasts.push(this); + let toastElement = this._createToast(); + toastElement.M_Toast = this; + this.el = toastElement; + this._animateIn(); + this._setTimer(); + } + static get defaults() { + return _defaults; + } + static getInstance(el) { + return el.M_Toast; + } + static _createContainer() { + const container = document.createElement('div'); + container.setAttribute('id', 'toast-container'); + // Add event handler + container.addEventListener('touchstart', Toast._onDragStart); + container.addEventListener('touchmove', Toast._onDragMove); + container.addEventListener('touchend', Toast._onDragEnd); + container.addEventListener('mousedown', Toast._onDragStart); + document.addEventListener('mousemove', Toast._onDragMove); + document.addEventListener('mouseup', Toast._onDragEnd); + document.body.appendChild(container); + Toast._container = container; + } + static _removeContainer() { + document.removeEventListener('mousemove', Toast._onDragMove); + document.removeEventListener('mouseup', Toast._onDragEnd); + Toast._container.remove(); + Toast._container = null; + } + static _onDragStart(e) { + if (e.target && e.target.closest('.toast')) { + const toastElem = e.target.closest('.toast'); + const toast = toastElem.M_Toast; + toast.panning = true; + Toast._draggedToast = toast; + toast.el.classList.add('panning'); + toast.el.style.transition = ''; + toast.startingXPos = Toast._xPos(e); + toast.time = Date.now(); + toast.xPos = Toast._xPos(e); + } + } + static _onDragMove(e) { + if (!!Toast._draggedToast) { + e.preventDefault(); + const toast = Toast._draggedToast; + toast.deltaX = Math.abs(toast.xPos - Toast._xPos(e)); + toast.xPos = Toast._xPos(e); + toast.velocityX = toast.deltaX / (Date.now() - toast.time); + toast.time = Date.now(); + const totalDeltaX = toast.xPos - toast.startingXPos; + const activationDistance = toast.el.offsetWidth * toast.options.activationPercent; + toast.el.style.transform = `translateX(${totalDeltaX}px)`; + toast.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString(); + } + } + static _onDragEnd() { + if (!!Toast._draggedToast) { + let toast = Toast._draggedToast; + toast.panning = false; + toast.el.classList.remove('panning'); + let totalDeltaX = toast.xPos - toast.startingXPos; + let activationDistance = toast.el.offsetWidth * toast.options.activationPercent; + let shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1; + // Remove toast + if (shouldBeDismissed) { + toast.wasSwiped = true; + toast.dismiss(); + // Animate toast back to original position + } + else { + toast.el.style.transition = 'transform .2s, opacity .2s'; + toast.el.style.transform = ''; + toast.el.style.opacity = ''; + } + Toast._draggedToast = null; + } + } + static _xPos(e) { + if (e.type.startsWith("touch") && e.targetTouches.length >= 1) { + return e.targetTouches[0].clientX; + } + // mouse event + return e.clientX; + } + /** + * dismiss all toasts. + */ + static dismissAll() { + for (let toastIndex in Toast._toasts) { + Toast._toasts[toastIndex].dismiss(); + } + } + _createToast() { + let toast = this.options.toastId + ? document.getElementById(this.options.toastId) + : document.createElement('div'); + if (toast instanceof HTMLTemplateElement) { + const node = toast.content.cloneNode(true); + toast = node.firstElementChild; + } + toast.classList.add('toast'); + toast.setAttribute('role', 'alert'); + toast.setAttribute('aria-live', 'assertive'); + toast.setAttribute('aria-atomic', 'true'); + // Add custom classes onto toast + if (this.options.classes.length > 0) { + toast.classList.add(...this.options.classes.split(' ')); + } + if (this.message) + toast.innerText = this.message; + Toast._container.appendChild(toast); + return toast; + } + _animateIn() { + // Animate toast in + this.el.style.display = ""; + this.el.style.opacity = '0'; + // easeOutCubic + this.el.style.transition = ` + top ${this.options.inDuration}ms ease, + opacity ${this.options.inDuration}ms ease + `; + setTimeout(() => { + this.el.style.top = '0'; + this.el.style.opacity = '1'; + }, 1); + } + /** + * Create setInterval which automatically removes toast when timeRemaining >= 0 + * has been reached. + */ + _setTimer() { + if (this.timeRemaining !== Infinity) { + this.counterInterval = setInterval(() => { + // If toast is not being dragged, decrease its time remaining + if (!this.panning) { + this.timeRemaining -= 20; + } + // Animate toast out + if (this.timeRemaining <= 0) { + this.dismiss(); + } + }, 20); + } + } + /** + * Dismiss toast with animation. + */ + dismiss() { + window.clearInterval(this.counterInterval); + let activationDistance = this.el.offsetWidth * this.options.activationPercent; + if (this.wasSwiped) { + this.el.style.transition = 'transform .05s, opacity .05s'; + this.el.style.transform = `translateX(${activationDistance}px)`; + this.el.style.opacity = '0'; + } + // easeOutExpo + this.el.style.transition = ` + margin ${this.options.outDuration}ms ease, + opacity ${this.options.outDuration}ms ease`; + setTimeout(() => { + this.el.style.opacity = '0'; + this.el.style.marginTop = '-40px'; + }, 1); + setTimeout(() => { + // Call the optional callback + if (typeof this.options.completeCallback === 'function') { + this.options.completeCallback(); + } + // Remove toast from DOM + if (this.el.id != this.options.toastId) { + this.el.remove(); + Toast._toasts.splice(Toast._toasts.indexOf(this), 1); + if (Toast._toasts.length === 0) { + Toast._removeContainer(); + } + } + }, this.options.outDuration); + } + static { + Toast._toasts = []; + Toast._container = null; + Toast._draggedToast = null; + } +} + +const version = '2.1.1'; +const Grid = (children = '') => { + return `
${children}`; +}; +function Button(children = '') { + return ``; +} +/** + * Automatically initialize components. + * @param context Root element to initialize. Defaults to `document.body`. + */ +function AutoInit(context = document.body) { + let registry = { + Autocomplete: context.querySelectorAll('.autocomplete:not(.no-autoinit)'), + Carousel: context.querySelectorAll('.carousel:not(.no-autoinit)'), + Chips: context.querySelectorAll('.chips:not(.no-autoinit)'), + Collapsible: context.querySelectorAll('.collapsible:not(.no-autoinit)'), + Datepicker: context.querySelectorAll('.datepicker:not(.no-autoinit)'), + Dropdown: context.querySelectorAll('.dropdown-trigger:not(.no-autoinit)'), + Materialbox: context.querySelectorAll('.materialboxed:not(.no-autoinit)'), + Modal: context.querySelectorAll('.modal:not(.no-autoinit)'), + Parallax: context.querySelectorAll('.parallax:not(.no-autoinit)'), + Pushpin: context.querySelectorAll('.pushpin:not(.no-autoinit)'), + ScrollSpy: context.querySelectorAll('.scrollspy:not(.no-autoinit)'), + FormSelect: context.querySelectorAll('select:not(.no-autoinit)'), + Sidenav: context.querySelectorAll('.sidenav:not(.no-autoinit)'), + Tabs: context.querySelectorAll('.tabs:not(.no-autoinit)'), + TapTarget: context.querySelectorAll('.tap-target:not(.no-autoinit)'), + Timepicker: context.querySelectorAll('.timepicker:not(.no-autoinit)'), + Tooltip: context.querySelectorAll('.tooltipped:not(.no-autoinit)'), + FloatingActionButton: context.querySelectorAll('.fixed-action-btn:not(.no-autoinit)') + }; + Autocomplete.init(registry.Autocomplete, {}); + Carousel.init(registry.Carousel, {}); + Chips.init(registry.Chips, {}); + Collapsible.init(registry.Collapsible, {}); + Datepicker.init(registry.Datepicker, {}); + Dropdown.init(registry.Dropdown, {}); + Materialbox.init(registry.Materialbox, {}); + Modal.init(registry.Modal, {}); + Parallax.init(registry.Parallax, {}); + Pushpin.init(registry.Pushpin, {}); + ScrollSpy.init(registry.ScrollSpy, {}); + FormSelect.init(registry.FormSelect, {}); + Sidenav.init(registry.Sidenav, {}); + Tabs.init(registry.Tabs, {}); + TapTarget.init(registry.TapTarget, {}); + Timepicker.init(registry.Timepicker, {}); + Tooltip.init(registry.Tooltip, {}); + FloatingActionButton.init(registry.FloatingActionButton, {}); +} +// Init +if (typeof document !== 'undefined') { + document.addEventListener('keydown', Utils.docHandleKeydown, true); + document.addEventListener('keyup', Utils.docHandleKeyup, true); + document.addEventListener('focus', Utils.docHandleFocus, true); + document.addEventListener('blur', Utils.docHandleBlur, true); +} +Cards.Init(); +Forms.Init(); +Chips.Init(); +Waves.Init(); +Range.Init(); + +export { AutoInit, Autocomplete, Button, Cards, Carousel, CharacterCounter, Chips, Collapsible, Datepicker, Dropdown, FloatingActionButton, FormSelect, Forms, Grid, Materialbox, Modal, Parallax, Pushpin, Range, ScrollSpy, Sidenav, Slider, Tabs, TapTarget, Timepicker, Toast, Tooltip, Waves, version }; diff --git a/package-lock.json b/package-lock.json index 446991ec2f..74059a46e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@materializecss/materialize", - "version": "2.1.0", + "version": "2.1.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@materializecss/materialize", - "version": "2.1.0", + "version": "2.1.1", "funding": [ { "type": "github", diff --git a/package.json b/package.json index 4de044a32b..b68528a127 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "description": "The responsive front-end library based on Material Design from Google.", "author": "The Materialize Team", "homepage": "https://materializeweb.com", - "version": "2.1.0", + "version": "2.1.1", "style": "dist/css/materialize.css", "sass": "sass/materialize.scss", "typings": "dist/js/materialize.d.ts",