diff --git a/.gitignore b/.gitignore index 4fbac5ff73..a88e34deb8 100644 --- a/.gitignore +++ b/.gitignore @@ -25,13 +25,5 @@ yarn-error.log* # Dependency directories node_modules/ -dist -dist/**/*.* -!dist/css/*.css -!dist/css/*.css.map -!dist/js/*.js -!dist/js/*.mjs -!dist/js/*.ts - # Ignore lock yarn.lock diff --git a/dist/css/materialize.css b/dist/css/materialize.css new file mode 100644 index 0000000000..677f602ac5 --- /dev/null +++ b/dist/css/materialize.css @@ -0,0 +1,9498 @@ +/*! +* Materialize v2.2.1 (https://materializeweb.com) +* Copyright 2014-2025 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); + -webkit-text-decoration: var(--md-sys-typescale-display-large-text-decoration); + -moz-text-decoration: var(--md-sys-typescale-display-large-text-decoration); + 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); + -webkit-text-decoration: var(--md-sys-typescale-display-medium-text-decoration); + -moz-text-decoration: var(--md-sys-typescale-display-medium-text-decoration); + 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); + -webkit-text-decoration: var(--md-sys-typescale-display-small-text-decoration); + -moz-text-decoration: var(--md-sys-typescale-display-small-text-decoration); + 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); + -webkit-text-decoration: var(--md-sys-typescale-headline-large-text-decoration); + -moz-text-decoration: var(--md-sys-typescale-headline-large-text-decoration); + 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); + -webkit-text-decoration: var(--md-sys-typescale-headline-medium-text-decoration); + -moz-text-decoration: var(--md-sys-typescale-headline-medium-text-decoration); + 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); + -webkit-text-decoration: var(--md-sys-typescale-headline-small-text-decoration); + -moz-text-decoration: var(--md-sys-typescale-headline-small-text-decoration); + 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); + -webkit-text-decoration: var(--md-sys-typescale-body-large-text-decoration); + -moz-text-decoration: var(--md-sys-typescale-body-large-text-decoration); + 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); + -webkit-text-decoration: var(--md-sys-typescale-body-medium-text-decoration); + -moz-text-decoration: var(--md-sys-typescale-body-medium-text-decoration); + 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); + -webkit-text-decoration: var(--md-sys-typescale-body-small-text-decoration); + -moz-text-decoration: var(--md-sys-typescale-body-small-text-decoration); + 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); + -webkit-text-decoration: var(--md-sys-typescale-label-large-text-decoration); + -moz-text-decoration: var(--md-sys-typescale-label-large-text-decoration); + 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); + -webkit-text-decoration: var(--md-sys-typescale-label-medium-text-decoration); + -moz-text-decoration: var(--md-sys-typescale-label-medium-text-decoration); + 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); + -webkit-text-decoration: var(--md-sys-typescale-label-small-text-decoration); + -moz-text-decoration: var(--md-sys-typescale-label-small-text-decoration); + 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); + -webkit-text-decoration: var(--md-sys-typescale-title-large-text-decoration); + -moz-text-decoration: var(--md-sys-typescale-title-large-text-decoration); + 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); + -webkit-text-decoration: var(--md-sys-typescale-title-medium-text-decoration); + -moz-text-decoration: var(--md-sys-typescale-title-medium-text-decoration); + 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); + -webkit-text-decoration: var(--md-sys-typescale-title-small-text-decoration); + -moz-text-decoration: var(--md-sys-typescale-title-small-text-decoration); + 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 { + -webkit-box-sizing: content-box; + 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 */ + -webkit-text-decoration: underline dotted; + -moz-text-decoration: underline dotted; + 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 { + -webkit-box-sizing: border-box; + 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] { + -webkit-box-sizing: border-box; + 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 { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +*, *:before, *:after { + -webkit-box-sizing: inherit; + 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: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + 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 { + -webkit-box-shadow: none !important; + 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 { + -webkit-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); + 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 { + -webkit-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); + 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 { + -webkit-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); + 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 { + -webkit-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); + 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 { + -webkit-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); + 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 { + -webkit-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); + 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 { + -webkit-transition: -webkit-box-shadow 0.25s; + transition: -webkit-box-shadow 0.25s; + transition: box-shadow 0.25s; + transition: box-shadow 0.25s, -webkit-box-shadow 0.25s; +} +.hoverable:hover { + -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + 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%; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-transform: translateX(-50%); + 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; + -webkit-transform-origin: 0 50%; + 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: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + 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 { + -webkit-transition: background-color 0.25s ease; + 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 { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + 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; + -webkit-transition: 0.25s; + 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; + -webkit-box-sizing: border-box; + 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 span.badge.leading { + margin-right: 7px; + -webkit-box-ordinal-group: 0; + -webkit-order: -1; + -ms-flex-order: -1; + order: -1; +} + +.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; + -webkit-font-feature-settings: "liga"; + -moz-font-feature-settings: "liga"; + 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%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); +} +@media only screen and (max-width : 992.99px) { + nav .brand-logo { + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + } + nav .brand-logo.left, nav .brand-logo.right { + padding: 0; + -webkit-transform: none; + 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 { + -webkit-transition: background-color 0.3s; + transition: background-color 0.3s; + float: left; + padding: 0; +} +nav ul:not(.dropdown-content) > li > a { + -webkit-transition: background-color 0.3s; + 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; + -webkit-box-shadow: none; + box-shadow: none; +} +nav .input-field label { + top: 0; + left: 0; +} +nav .input-field label i { + color: var(--font-on-primary-color-medium); + -webkit-transition: color 0.3s; + 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 { + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important; + transition: -webkit-transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important; + transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important; + transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63), -webkit-transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important; +} +.scale-transition.scale-out { + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0.2s !important; + transition: -webkit-transform 0.2s !important; + transition: transform 0.2s !important; + transition: transform 0.2s, -webkit-transform 0.2s !important; +} +.scale-transition.scale-in { + -webkit-transform: scale(1); + transform: scale(1); +} + +.card-panel { + -webkit-transition: -webkit-box-shadow 0.25s; + transition: -webkit-box-shadow 0.25s; + transition: box-shadow 0.25s; + transition: box-shadow 0.25s, -webkit-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); + -webkit-transition: -webkit-box-shadow 0.25s; + transition: -webkit-box-shadow 0.25s; + transition: box-shadow 0.25s; + transition: box-shadow 0.25s, -webkit-box-shadow 0.25s; + border-radius: 12px; +} +.card .card-title { + font-size: 24px; + font-weight: 300; +} +.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: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + 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: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + position: relative; +} +.card.horizontal .card-stacked .card-content { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + 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-image .activator { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + cursor: pointer; +} +.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-content .card-title.activator { + cursor: pointer; +} +.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); + -webkit-transition: color 0.3s ease; + 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: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + 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; + 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: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} +.tabs.tabs-fixed-width .tab { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} +.tabs .tab { + padding-left: 0; + list-style-type: none; + display: inline-block; + text-align: center; + line-height: 48px; + padding: 0; + margin: 0; +} +.tabs .tab i.material-icons { + position: relative; + top: 8px; + vertical-align: middle; +} +.tabs .tab span { + height: 24px; + line-height: 20px; +} +.tabs .tab a { + color: var(--md-sys-color-on-surface-variant); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + width: 100%; + height: 100%; + min-height: 48px; + padding: 0 24px; + font-size: 14px; + text-overflow: ellipsis; + overflow: hidden; + -webkit-transition: color 0.28s ease, background-color 0.28s ease; + 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 { + background-color: var(--md-sys-color-primary-container); +} +.tabs .tab a.active { + background-color: rgba(var(--md-sys-color-primary-numeric), 0.18); +} +.tabs .tab a:focus, .tabs .tab a.active { + 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; +} +.tabs.tabs-horizontal .tab { + height: 48px; +} +.tabs.tabs-horizontal .tab a { + display: block; +} +.tabs.tabs-horizontal .tab i.material-icons { + padding: 0 4px; + position: relative; + top: -2px; + vertical-align: middle; +} + +/* Fixed Sidenav hide on smaller */ +@media only screen and (max-width : 992.99px) { + .tabs { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + } + .tabs .tab { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + 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: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + 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; + -webkit-transform-origin: 50% 0; + 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: var(--btn-font-size); + font-weight: 500; + text-decoration: none; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + -webkit-tap-highlight-color: transparent; + white-space: nowrap; + outline: 0; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: background-color 0.2s ease-out; + 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; + -webkit-box-shadow: 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, .btn-small:focus, .btn-large:focus { + background-color: var(--md-sys-color-primary-container); +} + +.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; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + position: relative; + overflow: hidden; + z-index: 1; + -webkit-transition: background-color 0.3s; + 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); + 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%; + -webkit-transform: translateY(-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: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + 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: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + top: 0; + bottom: 0; + z-index: 1; +} +.fixed-action-btn.toolbar ul li { + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + display: inline-block; + margin: 0; + height: 100%; + -webkit-transition: none; + transition: none; +} +.fixed-action-btn.toolbar ul li a { + display: block; + overflow: hidden; + position: relative; + width: 100%; + height: 100%; + background-color: transparent; + -webkit-box-shadow: none; + 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; + -webkit-transform: scale(0); + 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; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + 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; + -webkit-transform: none; + transform: none; +} + +.dropdown-trigger { + cursor: pointer; +} + +.modal { + --modal-footer-divider-height: 1px; + --modal-border-radius: 28px; + --modal-padding: 24px; + --modal-padding-bottom: 16px; + border: none; + outline: none; + padding: 0; + max-height: 70%; + width: 55%; + border-radius: var(--modal-border-radius); + will-change: top, opacity; + background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%); +} +.modal[open] { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +@media only screen and (max-width : 992.99px) { + .modal { + width: 80%; + } +} +.modal::-webkit-backdrop { + -webkit-backdrop-filter: blur(1px); + backdrop-filter: blur(1px); +} +.modal::backdrop { + -webkit-backdrop-filter: blur(1px); + backdrop-filter: blur(1px); +} +.modal .modal-header { + padding: var(--modal-padding); + padding-bottom: var(--modal-padding-bottom); + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} +.modal .modal-content { + padding: 0 var(--modal-padding); + overflow-y: auto; +} +.modal .modal-footer { + border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius); + padding: var(--modal-padding); + text-align: right; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} +.modal .modal-close { + cursor: pointer; +} +.modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6 { + margin: 0; +} + +.modal.bottom-sheet { + margin-bottom: 0; + max-height: 45%; + border-bottom-left-radius: 0; + border-bottom-right-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: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + 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: "\e5cf"; + margin-left: 0.5rem; + font-family: "Material Symbols Outlined", "Material Symbols Rounded", "Material Symbols Sharp", "Material Icons"; + font-size: 25px; + line-height: 0.9; + -webkit-font-smoothing: antialiased; +} + +.active .collapsible-header::after { + content: "\e5ce"; +} + +.keyboard-focused .collapsible-header:focus { + background-color: rgba(0, 0, 0, 0.12); +} + +.collapsible-header-content { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.collapsible-body { + max-height: 0; + border-bottom: 1px solid var(--md-sys-color-outline-variant); + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 0 2rem; + overflow: hidden; +} + +.collapsible.popout { + border: none; + -webkit-box-shadow: none; + box-shadow: none; +} +.collapsible.popout > li { + -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); + 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; + -webkit-transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} +.collapsible.popout > li.active { + -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); + 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: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + 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; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + 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; + -o-object-fit: cover; + 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; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + cursor: pointer; +} + +.chip .close:hover { + background-color: rgba(136, 136, 136, 0.5333333333); +} + +.chips { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 4px; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + border: none; + -webkit-box-shadow: none; + box-shadow: none; + margin: 0 0 8px 0; + padding: 4px; + outline: none; + -webkit-transition: all 0.3s; + transition: all 0.3s; +} +.chips.focus { + border-bottom: 1px solid var(--md-sys-color-primary); + -webkit-box-shadow: 0 1px 0 0 var(--md-sys-color-primary); + box-shadow: 0 1px 0 0 var(--md-sys-color-primary); +} +.chips.input-field { + border-bottom: 1px solid var(--md-sys-color-on-surface-variant); +} +.chips.input-field: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; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + min-width: 100px; + max-width: 200px; +} +.chips input:not([type]):not(.browser-default).input:focus { + border: 0; + -webkit-box-shadow: none; + 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; + -webkit-transform: translateY(-140%); + transform: translateY(-140%); +} + +.materialboxed { + display: block; + cursor: -webkit-zoom-in; + cursor: zoom-in; + position: relative; + -webkit-transition: opacity 0.4s; + transition: opacity 0.4s; + -webkit-backface-visibility: hidden; +} +.materialboxed:hover:not(.active) { + opacity: 0.8; +} +.materialboxed.active { + cursor: -webkit-zoom-out; + 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 */ +::-webkit-input-placeholder { + color: var(--md-sys-color-on-surface-variant); +} +::-moz-placeholder { + color: var(--md-sys-color-on-surface-variant); +} +:-ms-input-placeholder { + color: var(--md-sys-color-on-surface-variant); +} +::-ms-input-placeholder { + color: var(--md-sys-color-on-surface-variant); +} +::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; +} + +.input-field input.invalid, .input-field textarea.invalid { + border-bottom: 2px solid var(--md-sys-color-error); + -webkit-box-shadow: 0 1px 0 0 var(--md-sys-color-error); + box-shadow: 0 1px 0 0 var(--md-sys-color-error); +} + +.input-field input.invalid ~ .supporting-text[data-error] > span, .input-field textarea.invalid ~ .supporting-text[data-error] > span { + display: none; +} + +.input-field input.invalid ~ .supporting-text:after, .input-field textarea.invalid ~ .supporting-text:after { + 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 { + -webkit-box-sizing: border-box; + 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:not(:-moz-placeholder-shown) + label, .input-field textarea:not(:-moz-placeholder-shown) + label { + transform: scale(0.75); + top: 8px; +} +.input-field input:not(:-ms-input-placeholder) + label, .input-field textarea:not(:-ms-input-placeholder) + label { + transform: scale(0.75); + top: 8px; +} +.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 { + -webkit-transform: scale(0.75); + 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.invalid ~ label, .input-field input:focus.invalid ~ label, .input-field textarea.invalid ~ label, .input-field textarea:focus.invalid ~ label { + color: var(--md-sys-color-error); +} +.input-field input::-webkit-input-placeholder { + -webkit-user-select: none; + user-select: none; +} +.input-field input::-moz-placeholder { + -moz-user-select: none; + user-select: none; +} +.input-field input:-ms-input-placeholder { + -ms-user-select: none; + user-select: none; +} +.input-field input::-ms-input-placeholder { + -ms-user-select: none; + user-select: none; +} +.input-field input::placeholder { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.input-field > label { + color: var(--md-sys-color-on-surface-variant); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + font-size: 16px; + position: absolute; + left: 16px; + top: 16px; + cursor: text; + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-transition: left 0.2s ease-out, top 0.2s ease-out, -webkit-transform 0.2s ease-out; + transition: left 0.2s ease-out, top 0.2s ease-out, -webkit-transform 0.2s ease-out; + transition: left 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out; + transition: left 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out, -webkit-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; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; +} +.input-field .suffix { + position: absolute; + right: 12px; + top: 16px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + 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:not(:-moz-placeholder-shown) + label, .input-field.outlined textarea:not(:-moz-placeholder-shown) + label { + top: -8px; + left: 16px; + margin-left: -4px; + padding: 0 4px; + background-color: var(--md-sys-color-background); +} +.input-field.outlined input:not(:-ms-input-placeholder) + label, .input-field.outlined textarea:not(:-ms-input-placeholder) + label { + top: -8px; + left: 16px; + margin-left: -4px; + padding: 0 4px; + background-color: var(--md-sys-color-background); +} +.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; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-self: center; + -ms-flex-item-align: center; + 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; + -webkit-box-sizing: border-box; + 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; +} + +/* Datepicker date input fields */ +.datepicker-date-input { + position: relative; + text-indent: -9999px; +} +.datepicker-date-input::after { + display: block; + position: absolute; + top: 1.1rem; + content: attr(data-date); + color: var(--input-color); + text-indent: 0; +} +.datepicker-date-input:focus-visible { + text-indent: 0; +} +.datepicker-date-input:focus-visible:after { + text-indent: -9999px; +} + +[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; + -webkit-transition: 0.28s ease; + transition: 0.28s ease; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + 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; + -webkit-transition: 0.28s ease; + 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 { + -webkit-transform: scale(0); + 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 { + -webkit-transform: scale(1.02); + transform: scale(1.02); +} + +/* Radio With gap */ +[type=radio].with-gap:checked + span:after { + -webkit-transform: scale(0.5); + transform: scale(0.5); +} + +/* Focused styles */ +[type=radio].tabbed:focus + span:before { + -webkit-box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18); + 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; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + 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; + -webkit-transition: 0.2s; + transition: 0.2s; +} +[type=checkbox]:not(.filled-in) + span:not(.lever):after { + border: 0; + -webkit-transform: scale(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 { + -webkit-transform: scale(1); + transform: scale(1); + border: 0; + border-radius: 50%; + -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.12); + 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); + -webkit-transform: rotate(40deg); + transform: rotate(40deg); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform-origin: 100% 100%; + 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; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform-origin: 100% 100%; + 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 */ + -webkit-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; + 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; + -webkit-transform: rotateZ(37deg); + transform: rotateZ(37deg); + -webkit-transform-origin: 100% 100%; + 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); + -webkit-transform: rotateZ(37deg); + transform: rotateZ(37deg); + -webkit-transform-origin: 100% 100%; + 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; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + 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; + -webkit-transition: background 0.3s ease; + 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); + -webkit-transition: left 0.3s ease, background 0.3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease; + transition: left 0.3s ease, background 0.3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease; + transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease, transform 0.1s ease; + transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease, transform 0.1s ease, -webkit-box-shadow 0.1s ease, -webkit-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 { + -webkit-transform: scale(2.4); + 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; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + 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: -webkit-min-content auto; + 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; + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} +input[type=range] + .thumb .value { + display: block; + width: 30px; + text-align: center; + color: var(--md-sys-color-primary); + font-size: 0; + -webkit-transform: rotate(45deg); + 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); + -webkit-transition: -webkit-box-shadow 0.3s; + transition: -webkit-box-shadow 0.3s; + transition: box-shadow 0.3s; + transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; + -webkit-appearance: none; + background-color: var(--md-sys-color-primary); + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + margin: -5px 0 0 0; +} + +.keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb { + -webkit-box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18); + 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); + -moz-transition: box-shadow 0.3s; + 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); + -ms-transition: box-shadow 0.3s; + 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; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + height: 100vh; + padding: 0; + z-index: 999; + overflow-y: auto; + will-change: transform; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateX(-105%); + transform: translateX(-105%); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + 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; + -webkit-transform: translateX(105%); + transform: translateX(105%); + left: auto; + -webkit-transform: translateX(100%); + 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; + -webkit-align-content: center; + -ms-flex-line-pack: center; + 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: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: var(--sidenav-item-height); + font-size: var(--sidenav-font-size); + font-weight: 500; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + 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: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + 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; + -webkit-transform: translateX(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 { + -webkit-transform: translateX(-105%); + transform: translateX(-105%); + } + .sidenav.sidenav-fixed.right-aligned { + -webkit-transform: translateX(105%); + 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; + -webkit-box-shadow: 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); + -webkit-transition: width 0.3s linear; + 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; + -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + 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; + -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; +} + +@-webkit-keyframes indeterminate { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } +} + +@keyframes indeterminate { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } +} +@-webkit-keyframes indeterminate-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } +} +@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 { + -webkit-transform: rotate(360deg); + 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% { + -webkit-transform: rotate(135deg); + transform: rotate(135deg); + } /* 0.5 * ARCSIZE */ + 25% { + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + } /* 1 * ARCSIZE */ + 37.5% { + -webkit-transform: rotate(405deg); + transform: rotate(405deg); + } /* 1.5 * ARCSIZE */ + 50% { + -webkit-transform: rotate(540deg); + transform: rotate(540deg); + } /* 2 * ARCSIZE */ + 62.5% { + -webkit-transform: rotate(675deg); + transform: rotate(675deg); + } /* 2.5 * ARCSIZE */ + 75% { + -webkit-transform: rotate(810deg); + transform: rotate(810deg); + } /* 3 * ARCSIZE */ + 87.5% { + -webkit-transform: rotate(945deg); + transform: rotate(945deg); + } /* 3.5 * ARCSIZE */ + to { + -webkit-transform: rotate(1080deg); + 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 { + -webkit-transform: rotate(130deg); + transform: rotate(130deg); + } + 50% { + -webkit-transform: rotate(-5deg); + transform: rotate(-5deg); + } + to { + -webkit-transform: rotate(130deg); + 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 { + -webkit-transform: rotate(-130deg); + transform: rotate(-130deg); + } + 50% { + -webkit-transform: rotate(5deg); + transform: rotate(5deg); + } + to { + -webkit-transform: rotate(-130deg); + 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); + -webkit-transition: background-color 0.3s; + 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); + -webkit-perspective: 500px; + perspective: 500px; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-transform-origin: 0% 50%; + 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); + -webkit-transition: background-color 0.3s; + 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; + -webkit-transition: visibility 0s 0.3s; + transition: visibility 0s 0.3s; +} + +.tap-target-wrapper.open { + visibility: visible; + -webkit-transition: visibility 0s; + transition: visibility 0s; +} +.tap-target-wrapper.open .tap-target { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 0.95; + -webkit-transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1); + transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1); + transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1); + transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1); +} +.tap-target-wrapper.open .tap-target-wave::before { + -webkit-transform: scale(1); + transform: scale(1); +} +.tap-target-wrapper.open .tap-target-wave::after { + visibility: visible; + -webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; + animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; + -webkit-transition: opacity 0.3s, visibility 0s 1s, -webkit-transform 0.3s; + transition: opacity 0.3s, visibility 0s 1s, -webkit-transform 0.3s; + transition: opacity 0.3s, transform 0.3s, visibility 0s 1s; + transition: opacity 0.3s, transform 0.3s, visibility 0s 1s, -webkit-transform 0.3s; +} + +.tap-target { + position: absolute; + font-size: 1rem; + border-radius: 50%; + background-color: var(--md-sys-color-primary-container); + color: var(--md-sys-color-primary); + -webkit-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); + 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; + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1); + transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1); + transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1); + transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 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 { + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; + transition: transform 0.3s; + transition: transform 0.3s, -webkit-transform 0.3s; +} +.tap-target-wave::after { + visibility: hidden; + -webkit-transition: opacity 0.3s, visibility 0s, -webkit-transform 0.3s; + transition: opacity 0.3s, visibility 0s, -webkit-transform 0.3s; + transition: opacity 0.3s, transform 0.3s, visibility 0s; + transition: opacity 0.3s, transform 0.3s, visibility 0s, -webkit-transform 0.3s; + z-index: -1; +} + +.tap-target-origin { + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -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; + -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; + transition: opacity 0.3s, -webkit-transform 0.3s; + transition: opacity 0.3s, transform 0.3s; + transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; + -webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; + animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; + z-index: -1; +} + +@-webkit-keyframes pulse-animation { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 50% { + opacity: 0; + -webkit-transform: scale(1.5); + transform: scale(1.5); + } + 100% { + opacity: 0; + -webkit-transform: scale(1.5); + transform: scale(1.5); + } +} + +@keyframes pulse-animation { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 50% { + opacity: 0; + -webkit-transform: scale(1.5); + transform: scale(1.5); + } + 100% { + opacity: 0; + -webkit-transform: scale(1.5); + transform: scale(1.5); + } +} +/* Modal */ +/*.datepicker-modal { + max-width: 325px; + // @removed since v2.2.1-dev regarding Material M3 standards + min-width: 300px; + max-height: none; +}*/ +.datepicker-container { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + max-width: 325px; + padding: 0; + background-color: var(--md-sys-color-surface); +} + +.datepicker-controls { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + width: 280px; + margin: 0 auto; +} +.datepicker-controls .selects-container { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + 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-dropdown { + padding: 0; + vertical-align: middle; +} +.datepicker-controls .select-year input, +.datepicker-controls .select-month input { + background-color: transparent; +} +.datepicker-controls .select-year input { + width: 50px; +} +.datepicker-controls .select-month input { + width: 80px; +} +.datepicker-controls .month-prev, +.datepicker-controls .month-next { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + 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 { + height: 49px; + margin-top: 4px; + cursor: pointer; + background-color: transparent; + border: none; +} + +/* Date Display */ +.datepicker-date-display { + -webkit-box-flex: 1; + -webkit-flex: 1 auto; + -ms-flex: 1 auto; + flex: 1 auto; + padding: 20px 22px; + border-bottom: 1px solid var(--md-sys-color-surface-variant-light); + 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; +} +.daterange .datepicker-date-display .date-text { + font-size: 1.8rem; +} + +/* Calendar */ +.datepicker-calendar-container { + -webkit-box-flex: 2.5; + -webkit-flex: 2.5 auto; + -ms-flex: 2.5 auto; + 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 .datepicker-day { + color: var(--md-sys-color-on-background); + /*&.is-selected button { + background-color: var(--md-sys-color-primary); + color: var(--md-sys-color-on-primary); + }*/ + padding: 0; +} +.datepicker-table .datepicker-day.is-today { + color: var(--md-sys-color-primary); +} + +.datepicker-day.is-daterange-start, +.datepicker-day.is-daterange-end, +.datepicker-day.is-daterange { + position: relative; +} +.datepicker-day.is-daterange-start:before, +.datepicker-day.is-daterange-end:before, +.datepicker-day.is-daterange:before { + position: absolute; + top: 5px; + width: 100%; + height: 34px; + content: ""; + background-color: var(--md-sys-color-primary-container); + z-index: 0; +} + +.datepicker-day.is-daterange-start:before, +.datepicker-day.is-daterange-end:before { + width: 50%; +} + +.datepicker-day.is-daterange-start:before { + left: 50%; +} + +.datepicker-day.is-daterange .datepicker-day-button:before { + background-color: var(--md-sys-color-primary-container); +} + +.datepicker-day-button { + background-color: transparent; + border: none; + line-height: 34px; + display: block; + width: 34px; + border-radius: 50%; + margin: 5px; + padding: 0 5px; + cursor: pointer; + color: inherit; + position: relative; + z-index: 1; +} +.datepicker-day-button:hover { + background-color: rgba(var(--md-sys-color-primary-numeric), 0.06); +} +.datepicker-day-button:focus { + border-color: var(--md-sys-color-primary); +} +.is-selected .datepicker-day-button { + background-color: var(--md-sys-color-primary); + color: var(--md-sys-color-on-primary); +} +.is-selected .datepicker-day-button:focus { + background-color: var(--md-sys-color-surface-variant); + color: var(--md-sys-color-primary); +} +.datepicker-day-button.is-outside-current-month button, .datepicker-day-button.is-disabled button { + color: var(--md-sys-color-on-surface); + pointer-events: none; +} + +/* Footer */ +.datepicker-footer { + width: 280px; + margin: 0 auto; + padding-bottom: 5px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + 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 */ +/* modal removed as of v2.2.1 */ +/* .timepicker-modal { + max-width: 325px; + max-height: none; +}*/ +.timepicker-container { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + max-width: 325px; + padding: 0; + background-color: var(--md-sys-color-inverse-on-surface); +} + +.text-primary { + color: var(--md-sys-color-on-primary); +} + +/* Clock Digital Display */ +.timepicker-digital-display { + width: auto; + -webkit-box-flex: 1; + -webkit-flex: 1 auto; + -ms-flex: 1 auto; + flex: 1 auto; + padding: 2rem 0.67rem 0.67rem 0.67rem; + font-weight: 300; +} + +.timepicker-text-container { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 4rem; + text-align: left; + color: var(--font-on-primary-color-medium); + font-weight: 400; + /*position: relative;*/ + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + padding: 1rem 1rem 1.3rem 1rem; +} +.timepicker-text-container input[type=text] { + height: 4rem; + color: var(--md-sys-color-secondary); + border-bottom: 0px; + font-size: 4rem; + direction: ltr; +} + +.timepicker-display-column { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.timepicker-display-digital-clock { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.timepicker-input-hours-wrapper, +.timepicker-input-minutes-wrapper { + width: 6.9rem; + height: 5.75rem; +} + +.timepicker-input-hours, +.timepicker-input-minutes, +.timepicker-span-am-pm div { + cursor: pointer; +} + +input[type=text].timepicker-input-hours, +input[type=text].timepicker-input-minutes { + height: 100%; + padding: 1.33rem 0.8rem; + border: 0; + text-align: center; + color: var(--md-sys-color-on-background); + background-color: var(--md-sys-color-surface-variant); +} +input[type=text].timepicker-input-hours:focus, +input[type=text].timepicker-input-minutes:focus { + background-color: var(--md-sys-color-primary-container); +} + +.timepicker-input-divider-wrapper { + width: 1.6rem; + text-align: center; +} + +/*input[type=text].text-primary { + color: var(--md-sys-color-on-background); +}*/ +.timepicker-display-am-pm { + font-size: 1.3rem; + /*position: absolute; + top: 1rem; + right: 1rem;*/ + font-weight: 400; +} + +.timepicker-span-am-pm { + height: 5.75rem; + max-width: 3.5rem; +} + +.timepicker-container .am-btn, +.timepicker-container .pm-btn { + width: 3.6rem; + height: 50%; + padding-left: calc(var(--btn-padding) / 1.8); + padding-right: calc(var(--btn-padding) / 1.8); + line-height: 2rem; + vertical-align: middle; + text-align: center; + border: 1px solid var(--md-sys-color-outline); +} + +.timepicker-container .am-btn { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.timepicker-container .pm-btn { + border-top: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +/* Analog Clock Display */ +.timepicker-analog-display { + -webkit-box-flex: 2.5; + -webkit-flex: 2.5 auto; + -ms-flex: 2.5 auto; + flex: 2.5 auto; + padding: 0.67rem; +} + +.timepicker-plate { + background-color: var(--md-sys-color-surface-variant); + border-radius: 50%; + width: 260px; + height: 260px; + overflow: visible; + position: relative; + margin: 0 1.6rem 1.6rem 1.6rem; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + 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 { + -webkit-transition: opacity 350ms, -webkit-transform 350ms; + transition: opacity 350ms, -webkit-transform 350ms; + transition: transform 350ms, opacity 350ms; + transition: transform 350ms, opacity 350ms, -webkit-transform 350ms; +} + +.timepicker-dial-out { + opacity: 0; +} +.timepicker-dial-out.timepicker-hours { + -webkit-transform: scale(1.1, 1.1); + transform: scale(1.1, 1.1); +} +.timepicker-dial-out.timepicker-minutes { + -webkit-transform: scale(0.8, 0.8); + transform: scale(0.8, 0.8); +} + +.timepicker-canvas { + -webkit-transition: opacity 175ms; + 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: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + 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 : 993px) { + .timepicker-container { + width: auto; + max-width: 620px; + } + .timepicker-container { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } + .timepicker-digital-display { + padding: 0.67rem; + } + .timepicker-text-container { + /*top: 31%;*/ + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin-top: 4.8rem; + text-align: center; + } + .timepicker-display-column { + padding: 0 3%; + } + .timepicker-display-am-pm { + /*position: relative; + top: auto; + right: auto; + text-align: center;*/ + margin-top: 1.1rem; + } + .timepicker-span-am-pm { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + max-width: unset; + } + .timepicker-container .am-btn, + .timepicker-container .pm-btn { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + /*width: auto;*/ + padding-left: calc(var(--btn-padding) / 0.565); + padding-right: calc(var(--btn-padding) / 0.565); + border-radius: var(--btn-border-radius); + border: 1px solid var(--md-sys-color-outline); + /*line-height: inherit; + vertical-align: top; + text-align: inherit;*/ + } + .timepicker-container .am-btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + .timepicker-container .pm-btn { + border-left: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + .timepicker-plate { + margin-top: 1.6rem; + } +} \ 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..820c272698 --- /dev/null +++ b/dist/css/materialize.min.css @@ -0,0 +1,6 @@ +/*! +* Materialize v2.2.1 (https://materializeweb.com) +* Copyright 2014-2025 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);-webkit-text-decoration:var(--md-sys-typescale-display-large-text-decoration);-moz-text-decoration:var(--md-sys-typescale-display-large-text-decoration);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);-webkit-text-decoration:var(--md-sys-typescale-display-medium-text-decoration);-moz-text-decoration:var(--md-sys-typescale-display-medium-text-decoration);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);-webkit-text-decoration:var(--md-sys-typescale-display-small-text-decoration);-moz-text-decoration:var(--md-sys-typescale-display-small-text-decoration);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);-webkit-text-decoration:var(--md-sys-typescale-headline-large-text-decoration);-moz-text-decoration:var(--md-sys-typescale-headline-large-text-decoration);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);-webkit-text-decoration:var(--md-sys-typescale-headline-medium-text-decoration);-moz-text-decoration:var(--md-sys-typescale-headline-medium-text-decoration);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);-webkit-text-decoration:var(--md-sys-typescale-headline-small-text-decoration);-moz-text-decoration:var(--md-sys-typescale-headline-small-text-decoration);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);-webkit-text-decoration:var(--md-sys-typescale-body-large-text-decoration);-moz-text-decoration:var(--md-sys-typescale-body-large-text-decoration);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);-webkit-text-decoration:var(--md-sys-typescale-body-medium-text-decoration);-moz-text-decoration:var(--md-sys-typescale-body-medium-text-decoration);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);-webkit-text-decoration:var(--md-sys-typescale-body-small-text-decoration);-moz-text-decoration:var(--md-sys-typescale-body-small-text-decoration);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);-webkit-text-decoration:var(--md-sys-typescale-label-large-text-decoration);-moz-text-decoration:var(--md-sys-typescale-label-large-text-decoration);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);-webkit-text-decoration:var(--md-sys-typescale-label-medium-text-decoration);-moz-text-decoration:var(--md-sys-typescale-label-medium-text-decoration);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);-webkit-text-decoration:var(--md-sys-typescale-label-small-text-decoration);-moz-text-decoration:var(--md-sys-typescale-label-small-text-decoration);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);-webkit-text-decoration:var(--md-sys-typescale-title-large-text-decoration);-moz-text-decoration:var(--md-sys-typescale-title-large-text-decoration);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);-webkit-text-decoration:var(--md-sys-typescale-title-medium-text-decoration);-moz-text-decoration:var(--md-sys-typescale-title-medium-text-decoration);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);-webkit-text-decoration:var(--md-sys-typescale-title-small-text-decoration);-moz-text-decoration:var(--md-sys-typescale-title-small-text-decoration);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{-webkit-box-sizing:content-box;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;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;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{-webkit-box-sizing:border-box;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]{-webkit-box-sizing:border-box;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{-webkit-box-sizing:border-box;box-sizing:border-box}*,*:before,*:after{-webkit-box-sizing:inherit;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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;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{-webkit-box-shadow:none !important;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{-webkit-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);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{-webkit-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);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{-webkit-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);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{-webkit-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);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{-webkit-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);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{-webkit-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);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{-webkit-transition:-webkit-box-shadow .25s;transition:-webkit-box-shadow .25s;transition:box-shadow .25s;transition:box-shadow .25s, -webkit-box-shadow .25s}.hoverable:hover{-webkit-box-shadow:0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);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%;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pin-top,.pin-bottom{position:relative}.pinned{position:fixed !important}ul.staggered-list li{opacity:0}.fade-in{opacity:0;-webkit-transform-origin:0 50%;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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;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{-webkit-transition:background-color .25s ease;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{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;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;-webkit-transition:.25s;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;-webkit-box-sizing:border-box;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 span.badge.leading{margin-right:7px;-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.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;-webkit-font-feature-settings:"liga";-moz-font-feature-settings:"liga";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%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}@media only screen and (max-width : 992.99px){nav .brand-logo{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}nav .brand-logo.left,nav .brand-logo.right{padding:0;-webkit-transform:none;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{-webkit-transition:background-color .3s;transition:background-color .3s;float:left;padding:0}nav ul:not(.dropdown-content)>li>a{-webkit-transition:background-color .3s;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;-webkit-box-shadow:none;box-shadow:none}nav .input-field label{top:0;left:0}nav .input-field label i{color:var(--font-on-primary-color-medium);-webkit-transition:color .3s;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{-webkit-transition:-webkit-transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;transition:-webkit-transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;transition:transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;transition:transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63), -webkit-transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important}.scale-transition.scale-out{-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform .2s !important;transition:-webkit-transform .2s !important;transition:transform .2s !important;transition:transform .2s, -webkit-transform .2s !important}.scale-transition.scale-in{-webkit-transform:scale(1);transform:scale(1)}.card-panel{-webkit-transition:-webkit-box-shadow .25s;transition:-webkit-box-shadow .25s;transition:box-shadow .25s;transition:box-shadow .25s, -webkit-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);-webkit-transition:-webkit-box-shadow .25s;transition:-webkit-box-shadow .25s;transition:box-shadow .25s;transition:box-shadow .25s, -webkit-box-shadow .25s;border-radius:12px}.card .card-title{font-size:24px;font-weight:300}.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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;position:relative}.card.horizontal .card-stacked .card-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;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-image .activator{position:absolute;left:0;right:0;top:0;bottom:0;cursor:pointer}.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-content .card-title.activator{cursor:pointer}.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);-webkit-transition:color .3s ease;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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;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;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:hsla(0,0%,100%,.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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.tabs.tabs-fixed-width .tab{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.tabs .tab{padding-left:0;list-style-type:none;display:inline-block;text-align:center;line-height:48px;padding:0;margin:0}.tabs .tab i.material-icons{position:relative;top:8px;vertical-align:middle}.tabs .tab span{height:24px;line-height:20px}.tabs .tab a{color:var(--md-sys-color-on-surface-variant);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;min-height:48px;padding:0 24px;font-size:14px;text-overflow:ellipsis;overflow:hidden;-webkit-transition:color .28s ease,background-color .28s ease;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{background-color:var(--md-sys-color-primary-container)}.tabs .tab a.active{background-color:rgba(var(--md-sys-color-primary-numeric), 0.18)}.tabs .tab a:focus,.tabs .tab a.active{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}.tabs.tabs-horizontal .tab{height:48px}.tabs.tabs-horizontal .tab a{display:block}.tabs.tabs-horizontal .tab i.material-icons{padding:0 4px;position:relative;top:-2px;vertical-align:middle}@media only screen and (max-width : 992.99px){.tabs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.tabs .tab{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;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;-webkit-transform-origin:50% 0;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:var(--btn-font-size);font-weight:500;text-decoration:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);white-space:nowrap;outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:background-color .2s ease-out;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;-webkit-box-shadow: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,.btn-small:focus,.btn-large:focus{background-color:var(--md-sys-color-primary-container)}.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;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;position:relative;overflow:hidden;z-index:1;-webkit-transition:background-color .3s;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);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%;-webkit-transform:translateY(-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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;top:0;bottom:0;z-index:1}.fixed-action-btn.toolbar ul li{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;display:inline-block;margin:0;height:100%;-webkit-transition:none;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);-webkit-box-shadow:none;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;-webkit-transform:scale(0);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;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;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;-webkit-transform:none;transform:none}.dropdown-trigger{cursor:pointer}.modal{--modal-footer-divider-height: 1px;--modal-border-radius: 28px;--modal-padding: 24px;--modal-padding-bottom: 16px;border:none;outline:none;padding:0;max-height:70%;width:55%;border-radius:var(--modal-border-radius);will-change:top,opacity;background-color:color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%)}.modal[open]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}@media only screen and (max-width : 992.99px){.modal{width:80%}}.modal::-webkit-backdrop{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.modal::backdrop{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.modal .modal-header{padding:var(--modal-padding);padding-bottom:var(--modal-padding-bottom);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.modal .modal-content{padding:0 var(--modal-padding);overflow-y:auto}.modal .modal-footer{border-radius:0 0 var(--modal-border-radius) var(--modal-border-radius);padding:var(--modal-padding);text-align:right;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.modal .modal-close{cursor:pointer}.modal h1,.modal h2,.modal h3,.modal h4,.modal h5,.modal h6{margin:0}.modal.bottom-sheet{margin-bottom:0;max-height:45%;border-bottom-left-radius:0;border-bottom-right-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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;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:"";margin-left:.5rem;font-family:"Material Symbols Outlined","Material Symbols Rounded","Material Symbols Sharp","Material Icons";font-size:25px;line-height:.9;-webkit-font-smoothing:antialiased}.active .collapsible-header::after{content:""}.keyboard-focused .collapsible-header:focus{background-color:rgba(0,0,0,.12)}.collapsible-header-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.collapsible-body{max-height:0;border-bottom:1px solid var(--md-sys-color-outline-variant);-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 2rem;overflow:hidden}.collapsible.popout{border:none;-webkit-box-shadow:none;box-shadow:none}.collapsible.popout>li{-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);margin:0 24px;-webkit-transition:margin .35s cubic-bezier(0.25, 0.46, 0.45, 0.94);transition:margin .35s cubic-bezier(0.25, 0.46, 0.45, 0.94)}.collapsible.popout>li.active{-webkit-box-shadow:0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);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:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;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;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;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;-o-object-fit:cover;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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;cursor:pointer}.chip .close:hover{background-color:rgba(136,136,136,.5333333333)}.chips{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:4px;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;border:none;-webkit-box-shadow:none;box-shadow:none;margin:0 0 8px 0;padding:4px;outline:none;-webkit-transition:all .3s;transition:all .3s}.chips.focus{border-bottom:1px solid var(--md-sys-color-primary);-webkit-box-shadow:0 1px 0 0 var(--md-sys-color-primary);box-shadow:0 1px 0 0 var(--md-sys-color-primary)}.chips.input-field{border-bottom:1px solid var(--md-sys-color-on-surface-variant)}.chips.input-field: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;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;min-width:100px;max-width:200px}.chips input:not([type]):not(.browser-default).input:focus{border:0;-webkit-box-shadow:none;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;-webkit-transform:translateY(-140%);transform:translateY(-140%)}.materialboxed{display:block;cursor:-webkit-zoom-in;cursor:zoom-in;position:relative;-webkit-transition:opacity .4s;transition:opacity .4s;-webkit-backface-visibility:hidden}.materialboxed:hover:not(.active){opacity:.8}.materialboxed.active{cursor:-webkit-zoom-out;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)}::-webkit-input-placeholder{color:var(--md-sys-color-on-surface-variant)}::-moz-placeholder{color:var(--md-sys-color-on-surface-variant)}:-ms-input-placeholder{color:var(--md-sys-color-on-surface-variant)}::-ms-input-placeholder{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.invalid,.input-field textarea.invalid{border-bottom:2px solid var(--md-sys-color-error);-webkit-box-shadow:0 1px 0 0 var(--md-sys-color-error);box-shadow:0 1px 0 0 var(--md-sys-color-error)}.input-field input.invalid~.supporting-text[data-error]>span,.input-field textarea.invalid~.supporting-text[data-error]>span{display:none}.input-field input.invalid~.supporting-text:after,.input-field textarea.invalid~.supporting-text:after{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{-webkit-box-sizing:border-box;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:not(:-moz-placeholder-shown)+label, .input-field textarea:not(:-moz-placeholder-shown)+label{transform:scale(0.75);top:8px}.input-field input:not(:-ms-input-placeholder)+label, .input-field textarea:not(:-ms-input-placeholder)+label{transform:scale(0.75);top:8px}.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{-webkit-transform:scale(0.75);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.invalid~label,.input-field input:focus.invalid~label,.input-field textarea.invalid~label,.input-field textarea:focus.invalid~label{color:var(--md-sys-color-error)}.input-field input::-webkit-input-placeholder{-webkit-user-select:none;user-select:none}.input-field input::-moz-placeholder{-moz-user-select:none;user-select:none}.input-field input:-ms-input-placeholder{-ms-user-select:none;user-select:none}.input-field input::-ms-input-placeholder{-ms-user-select:none;user-select:none}.input-field input::placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.input-field>label{color:var(--md-sys-color-on-surface-variant);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:16px;position:absolute;left:16px;top:16px;cursor:text;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transition:left .2s ease-out,top .2s ease-out,-webkit-transform .2s ease-out;transition:left .2s ease-out,top .2s ease-out,-webkit-transform .2s ease-out;transition:left .2s ease-out,top .2s ease-out,transform .2s ease-out;transition:left .2s ease-out,top .2s ease-out,transform .2s ease-out,-webkit-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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.input-field .suffix{position:absolute;right:12px;top:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;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:not(:-moz-placeholder-shown)+label, .input-field.outlined textarea:not(:-moz-placeholder-shown)+label{top:-8px;left:16px;margin-left:-4px;padding:0 4px;background-color:var(--md-sys-color-background)}.input-field.outlined input:not(:-ms-input-placeholder)+label, .input-field.outlined textarea:not(:-ms-input-placeholder)+label{top:-8px;left:16px;margin-left:-4px;padding:0 4px;background-color:var(--md-sys-color-background)}.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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:center;-ms-flex-item-align:center;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;-webkit-box-sizing:border-box;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}.datepicker-date-input{position:relative;text-indent:-9999px}.datepicker-date-input::after{display:block;position:absolute;top:1.1rem;content:attr(data-date);color:var(--input-color);text-indent:0}.datepicker-date-input:focus-visible{text-indent:0}.datepicker-date-input:focus-visible:after{text-indent:-9999px}[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;-webkit-transition:.28s ease;transition:.28s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;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;-webkit-transition:.28s ease;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{-webkit-transform:scale(0);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{-webkit-transform:scale(1.02);transform:scale(1.02)}[type=radio].with-gap:checked+span:after{-webkit-transform:scale(0.5);transform:scale(0.5)}[type=radio].tabbed:focus+span:before{-webkit-box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;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;-webkit-transition:.2s;transition:.2s}[type=checkbox]:not(.filled-in)+span:not(.lever):after{border:0;-webkit-transform:scale(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{-webkit-transform:scale(1);transform:scale(1);border:0;border-radius:50%;-webkit-box-shadow:0 0 0 10px rgba(0,0,0,.12);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);-webkit-transform:rotate(40deg);transform:rotate(40deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-origin:100% 100%;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;-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-origin:100% 100%;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;-webkit-transition:border .25s,background-color .25s,width .2s .1s,height .2s .1s,top .2s .1s,left .2s .1s;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;-webkit-transform:rotateZ(37deg);transform:rotateZ(37deg);-webkit-transform-origin:100% 100%;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);-webkit-transform:rotateZ(37deg);transform:rotateZ(37deg);-webkit-transform-origin:100% 100%;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);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;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;-webkit-transition:background .3s ease;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);-webkit-transition:left .3s ease,background .3s ease,-webkit-box-shadow .1s ease,-webkit-transform .1s ease;transition:left .3s ease,background .3s ease,-webkit-box-shadow .1s ease,-webkit-transform .1s ease;transition:left .3s ease,background .3s ease,box-shadow .1s ease,transform .1s ease;transition:left .3s ease,background .3s ease,box-shadow .1s ease,transform .1s ease,-webkit-box-shadow .1s ease,-webkit-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{-webkit-transform:scale(2.4);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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;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:-webkit-min-content auto;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;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}input[type=range]+.thumb .value{display:block;width:30px;text-align:center;color:var(--md-sys-color-primary);font-size:0;-webkit-transform:rotate(45deg);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);-webkit-transition:-webkit-box-shadow .3s;transition:-webkit-box-shadow .3s;transition:box-shadow .3s;transition:box-shadow .3s, -webkit-box-shadow .3s;-webkit-appearance:none;background-color:var(--md-sys-color-primary);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;margin:-5px 0 0 0}.keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb{-webkit-box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);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);-moz-transition:box-shadow .3s;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);-ms-transition:box-shadow .3s;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;-webkit-transform:translateX(-100%);transform:translateX(-100%);height:100vh;padding:0;z-index:999;overflow-y:auto;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateX(-105%);transform:translateX(-105%);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--md-sys-color-on-secondary-container);background-color:var(--md-sys-color-surface)}.sidenav.right-aligned{right:0;-webkit-transform:translateX(105%);transform:translateX(105%);left:auto;-webkit-transform:translateX(100%);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;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center}.sidenav li>a{margin:0 12px;padding:0 var(--sidenav-padding);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:var(--sidenav-item-height);font-size:var(--sidenav-font-size);font-weight:500;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;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:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;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;-webkit-transform:translateX(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{-webkit-transform:translateX(-105%);transform:translateX(-105%)}.sidenav.sidenav-fixed.right-aligned{-webkit-transform:translateX(105%);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;-webkit-box-shadow: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);-webkit-transition:width .3s linear;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;-webkit-animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;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;-webkit-animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;-webkit-animation-delay:1.15s;animation-delay:1.15s}@-webkit-keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@-webkit-keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}@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{-webkit-transform:rotate(360deg);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%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}to{-webkit-transform:rotate(1080deg);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{-webkit-transform:rotate(130deg);transform:rotate(130deg)}50%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(130deg);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{-webkit-transform:rotate(-130deg);transform:rotate(-130deg)}50%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}to{-webkit-transform:rotate(-130deg);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:hsla(0,0%,100%,.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:hsla(0,0%,100%,.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);-webkit-transition:background-color .3s;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);-webkit-perspective:500px;perspective:500px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:0% 50%;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:hsla(0,0%,100%,.45);-webkit-transition:background-color .3s;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;-webkit-transition:visibility 0s .3s;transition:visibility 0s .3s}.tap-target-wrapper.open{visibility:visible;-webkit-transition:visibility 0s;transition:visibility 0s}.tap-target-wrapper.open .tap-target{-webkit-transform:scale(1);transform:scale(1);opacity:.95;-webkit-transition:opacity .3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform .3s cubic-bezier(0.42, 0, 0.58, 1);transition:opacity .3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform .3s cubic-bezier(0.42, 0, 0.58, 1);transition:transform .3s cubic-bezier(0.42, 0, 0.58, 1),opacity .3s cubic-bezier(0.42, 0, 0.58, 1);transition:transform .3s cubic-bezier(0.42, 0, 0.58, 1),opacity .3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform .3s cubic-bezier(0.42, 0, 0.58, 1)}.tap-target-wrapper.open .tap-target-wave::before{-webkit-transform:scale(1);transform:scale(1)}.tap-target-wrapper.open .tap-target-wave::after{visibility:visible;-webkit-animation:pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;animation:pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;-webkit-transition:opacity .3s,visibility 0s 1s,-webkit-transform .3s;transition:opacity .3s,visibility 0s 1s,-webkit-transform .3s;transition:opacity .3s,transform .3s,visibility 0s 1s;transition:opacity .3s,transform .3s,visibility 0s 1s,-webkit-transform .3s}.tap-target{position:absolute;font-size:1rem;border-radius:50%;background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);-webkit-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);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;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:opacity .3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform .3s cubic-bezier(0.42, 0, 0.58, 1);transition:opacity .3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform .3s cubic-bezier(0.42, 0, 0.58, 1);transition:transform .3s cubic-bezier(0.42, 0, 0.58, 1),opacity .3s cubic-bezier(0.42, 0, 0.58, 1);transition:transform .3s cubic-bezier(0.42, 0, 0.58, 1),opacity .3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform .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{-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s}.tap-target-wave::after{visibility:hidden;-webkit-transition:opacity .3s,visibility 0s,-webkit-transform .3s;transition:opacity .3s,visibility 0s,-webkit-transform .3s;transition:opacity .3s,transform .3s,visibility 0s;transition:opacity .3s,transform .3s,visibility 0s,-webkit-transform .3s;z-index:-1}.tap-target-origin{top:50%;left:50%;-webkit-transform:translate(-50%, -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;-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s;transition:opacity .3s,transform .3s,-webkit-transform .3s;-webkit-animation:pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;animation:pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;z-index:-1}@-webkit-keyframes pulse-animation{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}100%{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}@keyframes pulse-animation{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}100%{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}.datepicker-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;max-width:325px;padding:0;background-color:var(--md-sys-color-surface)}.datepicker-controls{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;width:280px;margin:0 auto}.datepicker-controls .selects-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;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-dropdown{padding:0;vertical-align:middle}.datepicker-controls .select-year input,.datepicker-controls .select-month input{background-color:rgba(0,0,0,0)}.datepicker-controls .select-year input{width:50px}.datepicker-controls .select-month input{width:80px}.datepicker-controls .month-prev,.datepicker-controls .month-next{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;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{height:49px;margin-top:4px;cursor:pointer;background-color:rgba(0,0,0,0);border:none}.datepicker-date-display{-webkit-box-flex:1;-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto;padding:20px 22px;border-bottom:1px solid var(--md-sys-color-surface-variant-light);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}.daterange .datepicker-date-display .date-text{font-size:1.8rem}.datepicker-calendar-container{-webkit-box-flex:2.5;-webkit-flex:2.5 auto;-ms-flex:2.5 auto;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 .datepicker-day{color:var(--md-sys-color-on-background);padding:0}.datepicker-table .datepicker-day.is-today{color:var(--md-sys-color-primary)}.datepicker-day.is-daterange-start,.datepicker-day.is-daterange-end,.datepicker-day.is-daterange{position:relative}.datepicker-day.is-daterange-start:before,.datepicker-day.is-daterange-end:before,.datepicker-day.is-daterange:before{position:absolute;top:5px;width:100%;height:34px;content:"";background-color:var(--md-sys-color-primary-container);z-index:0}.datepicker-day.is-daterange-start:before,.datepicker-day.is-daterange-end:before{width:50%}.datepicker-day.is-daterange-start:before{left:50%}.datepicker-day.is-daterange .datepicker-day-button:before{background-color:var(--md-sys-color-primary-container)}.datepicker-day-button{background-color:rgba(0,0,0,0);border:none;line-height:34px;display:block;width:34px;border-radius:50%;margin:5px;padding:0 5px;cursor:pointer;color:inherit;position:relative;z-index:1}.datepicker-day-button:hover{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.datepicker-day-button:focus{border-color:var(--md-sys-color-primary)}.is-selected .datepicker-day-button{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.is-selected .datepicker-day-button:focus{background-color:var(--md-sys-color-surface-variant);color:var(--md-sys-color-primary)}.datepicker-day-button.is-outside-current-month button,.datepicker-day-button.is-disabled button{color:var(--md-sys-color-on-surface);pointer-events:none}.datepicker-footer{width:280px;margin:0 auto;padding-bottom:5px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;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)}.timepicker-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;max-width:325px;padding:0;background-color:var(--md-sys-color-inverse-on-surface)}.text-primary{color:var(--md-sys-color-on-primary)}.timepicker-digital-display{width:auto;-webkit-box-flex:1;-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto;padding:2rem .67rem .67rem .67rem;font-weight:300}.timepicker-text-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:4rem;text-align:left;color:var(--font-on-primary-color-medium);font-weight:400;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:1rem 1rem 1.3rem 1rem}.timepicker-text-container input[type=text]{height:4rem;color:var(--md-sys-color-secondary);border-bottom:0px;font-size:4rem;direction:ltr}.timepicker-display-column{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex}.timepicker-display-digital-clock{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex}.timepicker-input-hours-wrapper,.timepicker-input-minutes-wrapper{width:6.9rem;height:5.75rem}.timepicker-input-hours,.timepicker-input-minutes,.timepicker-span-am-pm div{cursor:pointer}input[type=text].timepicker-input-hours,input[type=text].timepicker-input-minutes{height:100%;padding:1.33rem .8rem;border:0;text-align:center;color:var(--md-sys-color-on-background);background-color:var(--md-sys-color-surface-variant)}input[type=text].timepicker-input-hours:focus,input[type=text].timepicker-input-minutes:focus{background-color:var(--md-sys-color-primary-container)}.timepicker-input-divider-wrapper{width:1.6rem;text-align:center}.timepicker-display-am-pm{font-size:1.3rem;font-weight:400}.timepicker-span-am-pm{height:5.75rem;max-width:3.5rem}.timepicker-container .am-btn,.timepicker-container .pm-btn{width:3.6rem;height:50%;padding-left:calc(var(--btn-padding)/1.8);padding-right:calc(var(--btn-padding)/1.8);line-height:2rem;vertical-align:middle;text-align:center;border:1px solid var(--md-sys-color-outline)}.timepicker-container .am-btn{border-bottom-right-radius:0;border-bottom-left-radius:0}.timepicker-container .pm-btn{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.timepicker-analog-display{-webkit-box-flex:2.5;-webkit-flex:2.5 auto;-ms-flex:2.5 auto;flex:2.5 auto;padding:.67rem}.timepicker-plate{background-color:var(--md-sys-color-surface-variant);border-radius:50%;width:260px;height:260px;overflow:visible;position:relative;margin:0 1.6rem 1.6rem 1.6rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;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{-webkit-transition:opacity 350ms,-webkit-transform 350ms;transition:opacity 350ms,-webkit-transform 350ms;transition:transform 350ms,opacity 350ms;transition:transform 350ms,opacity 350ms,-webkit-transform 350ms}.timepicker-dial-out{opacity:0}.timepicker-dial-out.timepicker-hours{-webkit-transform:scale(1.1, 1.1);transform:scale(1.1, 1.1)}.timepicker-dial-out.timepicker-minutes{-webkit-transform:scale(0.8, 0.8);transform:scale(0.8, 0.8)}.timepicker-canvas{-webkit-transition:opacity 175ms;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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;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 : 993px){.timepicker-container{width:auto;max-width:620px}.timepicker-container{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.timepicker-digital-display{padding:.67rem}.timepicker-text-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:4.8rem;text-align:center}.timepicker-display-column{padding:0 3%}.timepicker-display-am-pm{margin-top:1.1rem}.timepicker-span-am-pm{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:unset}.timepicker-container .am-btn,.timepicker-container .pm-btn{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding-left:calc(var(--btn-padding)/.565);padding-right:calc(var(--btn-padding)/.565);border-radius:var(--btn-border-radius);border:1px solid var(--md-sys-color-outline)}.timepicker-container .am-btn{border-top-right-radius:0;border-bottom-right-radius:0}.timepicker-container .pm-btn{border-left:0;border-bottom-left-radius:0;border-top-left-radius:0}.timepicker-plate{margin-top:1.6rem}} \ 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..7763d65286 --- /dev/null +++ b/dist/css/materialize.min.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/tokens.module.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/theme.module.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/colors.module.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/typography.module.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_color-classes.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_normalize.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_global.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_variables.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_collection.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_badges.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_icons-material-design.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_grid.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_navbar.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_typography.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_transitions.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_cards.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_toast.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_tabs.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_tooltip.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_buttons.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_dropdown.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_modal.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_collapsible.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_chips.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_materialbox.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/forms/_forms.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/forms/_input-fields.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/forms/_radio-buttons.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/forms/_checkboxes.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/forms/_switches.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/forms/_select.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/forms/_file-input.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/forms/_range.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_table_of_contents.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_sidenav.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_preloader.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_slider.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_carousel.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_tapTarget.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_pulse.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_datepicker.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/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,iBAEA,gCACE,iBACA,SAIJ,0CACE,6CAGF,oBACE,sDAGF,iBACE,qBACA,WACA,iBCxEF,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,gBAIF,qCACE,kBAEA,yEACE,eACA,gBAGF,mHACE,eAGF,+EACE,gBACA,gBAGF,4EACE,kBACA,SACA,OACA,QAIJ,YACE,aAGF,aACE,aAGF,YACE,aAIF,iBAaE,aAXE,0GACE,YACA,gBACA,iBAEA,sHACE,YAON,6BACE,cAEA,iCACE,0BACA,eACA,WAIJ,+BACE,aACA,sBACA,OACA,kBAEA,6CACE,YAOJ,iCACE,UAGF,iCACE,UACA,oBAIJ,kBACE,kBAGA,sBACE,cACA,0BACA,kBACA,OACA,QACA,MACA,SACA,WAGF,8BACE,kCACA,kBACA,SACA,OACA,eACA,aAGF,6BACE,kBACA,OACA,QACA,MACA,SACA,eAIJ,oBACE,aACA,0BAEA,sBACE,SAGF,gCACE,cACA,iBACA,kBAEA,kCACE,iBAGF,0CACE,eAKN,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,cC9MN,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,qBA2CA,kBACA,gBACA,kBACA,WACA,6CACA,cACA,mBA/CA,uBACE,+BAEA,8BACE,0CAGF,iIAGE,0BAGF,oCACE,iCAGF,yEAEE,+BAGF,6GAGE,qCAGF,kCACE,gDAIJ,uBACE,aAEA,4BACE,YAYJ,WACE,eACA,qBACA,qBACA,kBACA,iBACA,UACA,SAEA,4BACE,kBACA,QACA,sBAGF,gBACE,YACA,iBAGF,aA4BE,6CACA,aACA,sBACA,WACA,YACA,gBACA,eACA,eACA,uBACA,gBACA,sDArCA,oBACE,+BAGF,0DAGE,kCAGF,mBACE,iEAGF,mBACE,uDAGF,oBACE,iEAGF,uCAEE,aAgBJ,kDAME,qCACA,eACA,+BANA,0EACE,+BASN,iBACE,kBACA,SACA,WACA,6CACA,uBACA,0BAGF,2BACE,YAEA,6BACE,cAGF,4CACE,cACA,kBACA,SACA,sBAON,8CACE,MACE,aAEA,WACE,YAEA,aACE,gBCjKR,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,kBAGF,yDACE,6FAGF,4DACE,8FAGF,iIACE,kBACA,oCAGF,+DACE,6BAGF,kEACE,8BAKF,gDACE,qCACA,6CAGF,6CACE,iDACA,yDAGF,sDACE,iDACA,yDAIF,sDACE,+BACA,kCACA,6CAGF,oDAEE,kCACA,+BAKF,qSAIE,0EACA,qFACA,oBACA,gBACA,eAKF,wEAEE,kCACA,6HAGF,kEAEE,qCACA,qGAGF,+DAEE,iDACA,6HAGF,wEACE,kCACA,kFAGF,4DACE,kCACA,kFAKF,6CACE,uDAGF,wEAEE,kCACA,8GAGF,kEAEE,qCACA,qGAGF,+DAEE,iDACA,6HAGF,wEACE,kCACA,kFACA,6CAGF,4DACE,kCACA,kFAKA,qcAKE,gDACA,mBAwBJ,cA2DE,MZ9OqB,KY+OrB,OZ/OqB,KYgPrB,+CACA,uDACA,cZjPuB,KYkPvB,UACA,aACA,sBACA,mBACA,kBACA,gBACA,UAEA,gCACA,eACA,sBAzEA,oBAEE,yHAGF,oBACE,iBZ5L+B,kCYgMjC,qBACE,gBAGF,wBAKE,WACA,YACA,UANA,oCACE,aAYJ,wBACE,mDAMA,8BACA,+BALA,oCACE,0CAUJ,0BAME,kBACA,WACA,aAPA,+BACE,WACA,UA8BJ,gBACE,MZjQoB,iCYkQpB,iBACA,cACA,qBACA,kBAKJ,oBACE,YAIF,kBAwGE,eACA,WACA,YACA,iBACA,gBACA,YA3GE,4BACE,mBACA,eACA,qBAKJ,mEAEE,mBAEA,yEACE,iBACA,WACA,QACA,2BACA,YACA,UAEA,YAEA,+EACE,qBACA,sBAKN,kCACE,mBAEA,qCACE,gBACA,cACA,UACA,WAEA,wCACE,sBAKN,mCACE,mBAEA,sCACE,SACA,YACA,aACA,8BAEA,yCACE,kBAKN,0BAOE,UACA,YANE,qCACE,UAOJ,6BACE,aACA,MACA,SACA,UAEA,gCACE,OACA,qBACA,SACA,YACA,gBAEA,kCACE,cACA,gBACA,kBACA,WACA,YACA,+BACA,gBACA,MZ3Wc,iCY4Wd,iBACA,UAEA,oCACE,oBAcV,qBACE,OACA,QACA,kBACA,kBACA,YACA,SACA,kBAEA,wBACE,mBAGF,oCACE,UAIJ,gCACE,kBACA,MACA,OACA,WACA,MZpZmB,KYqZnB,OZrZmB,KYsZnB,iBZ1ZyB,8BY2ZzB,cZtZqB,KYuZrB,mBAOJ,WAEE,mCACA,eACA,eAEA,aACE,iBAKJ,WAEE,mCACA,eAEA,aACE,iBAKJ,WACE,cAGF,mDACE,sBCzcF,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,eC3EF,OACE,mCACA,4BACA,sBACA,6BAGA,YACA,aACA,UACA,eACA,UACA,yCACA,wBASA,uGANA,aACE,aACA,sBAMF,8CAxBF,OAyBI,WAIF,iBACE,0BAGF,qBACE,6BACA,2CACA,cAEF,sBACE,+BACA,gBAEF,qBACE,wEACA,6BACA,iBACA,cAGF,oBACE,eAIF,4DACE,SAKJ,oBACE,gBACA,eACA,4BACA,6BACA,2BClEF,aACE,eACA,qBAEA,yDACA,2DACA,0DACA,sBAIF,oBAKE,aACA,eACA,0CACA,gBACA,aACA,4DATA,0BACE,UAUF,sBACE,WACA,iBACA,qBACA,kBACA,kBAIJ,2BACE,YACA,kBACA,6GACA,eACA,eACA,mCAGF,mCACE,YAGF,4CACE,iCAGF,4BACE,YAGF,kBACE,aACA,4DACA,sBACA,eACA,gBAKF,oBACE,YACA,gBAEA,uBACE,oEAEA,cACA,4DAGF,8BACE,qEACA,cC5EJ,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,gBACA,iBAEA,YAGA,aACA,mBAEA,aACE,oDACA,iDAGF,mBACE,+DAEA,yBACE,YAIJ,qDACE,gBACA,SACA,wCACA,qBACA,eAIA,YAEA,UACA,SACA,UACA,YACA,kBACA,gBACA,gBAGA,2DACE,SACA,gBAKJ,6BACE,aACA,gBAKJ,eACE,iBACA,UACA,wBAGF,eACE,kBACA,UACA,wBAEF,mBACE,gBACA,4BClJF,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,YAGF,yDACE,kDACA,+CAEF,6HACE,aAEF,uGACE,yBACA,gCAGF,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,iDAkBF,sJAEE,gCAIJ,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,gBAMN,uBACE,kBACA,oBAEA,8BACE,cACA,kBACA,WACA,wBACA,yBACA,cAGF,qCACE,cAGF,2CACE,oBC1VJ,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,qCAEA,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,0BAIJ,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,qCAEA,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,sBCvBJ,sBACE,aACA,sBACA,gBACA,UACA,6CAGF,qBACE,aACA,8BACA,YACA,cAEA,wCACE,aAIA,2CAKE,mBACA,kBACA,SANA,iDACE,mBAQJ,4CACE,aAIJ,sCACE,UACA,sBAGF,iFAEE,+BAGF,wCACE,WAGF,yCACE,WAGF,kEAEE,oBACA,mBAGF,0EAEE,4CAIJ,wBACE,YACA,eACA,eACA,+BACA,YAKF,yBACE,YAIA,kBACA,kEACA,gBAEA,oCACE,cACA,iBACA,iBACA,qCAGF,oCACE,cACA,iBACA,iBACA,gBAIA,+CACE,iBAON,+BACE,cAGF,kBACE,YACA,eACA,cAEA,wBACE,mBAGF,qBACE,iBACA,kBAGF,qBACE,YAGF,uBACE,qBACA,6CAGF,kCACE,wCAYA,UAVA,2CACE,kCAsBN,iGAGE,kBAEA,sHACE,kBACA,QACA,WACA,YACA,WACA,uDACA,UAIJ,kFAEE,UAGF,0CACE,SAGF,2DACE,uDAGF,uBACE,+BACA,YACA,iBACA,cACA,WACA,kBACA,WACA,cACA,eACA,cAEA,kBACA,UAEA,6BACE,iEAGF,6BACE,yCAGF,oCACE,6CACA,qCAEA,0CACE,qDACA,kCAIJ,iGAEE,qCACA,oBAMJ,mBACE,YACA,cACA,mBACA,aACA,8BAGF,wEAIE,kCACA,eAGF,kBACE,gCCzPF,sBACE,aACA,sBACA,gBACA,UACA,wDAGF,cACE,qCAIF,4BACE,WACA,YAEA,kCACA,gBAGF,2BACE,aACA,eACA,gBACA,0CACA,gBAEA,iBACA,8BAEA,4CACE,YACA,oCACA,kBACA,eACA,cAIJ,2BACE,oBAGF,kCACE,YACA,oBAGF,kEAEE,aACA,eAGF,6EAGE,eAGF,kFAEE,YACA,sBACA,SACA,kBACA,wCACA,qDAEA,8FACE,uDAIJ,kCACE,aACA,kBAOF,0BACE,iBAIA,gBAGF,uBACE,eACA,iBAGF,4DAEE,aACA,WACA,0CACA,2CACA,iBACA,sBACA,kBAEA,6CAGF,8BACE,6BACA,4BAGF,8BACE,aACA,yBACA,0BAIF,2BACE,cACA,eAIF,kBACE,qDACA,kBACA,YACA,aACA,iBACA,kBACA,8BACA,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,sBACE,WACA,gBAGF,sBACE,mBAGF,4BACE,eAGF,2BAEE,sBACA,kBACA,kBAGF,2BACE,aAGF,0BAKE,kBAGF,uBACE,aACA,YACA,gBAGF,4DAEE,YAEA,2CACA,4CACA,uCACA,6CAMF,8BACE,0BACA,6BAGF,8BACE,cACA,4BACA,yBAGF,kBACE","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..23afafd5f8 --- /dev/null +++ b/dist/js/materialize.cjs.js @@ -0,0 +1,8004 @@ +/*! +* Materialize v2.2.1 (https://materializeweb.com) +* Copyright 2014-2025 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. + */ + /* eslint-disabled as of required event type condition check */ + /* eslint-disable-next-line */ + static docHandleFocus(e) { + if (Utils.keyDown) { + document.body.classList.add('keyboard-focused'); + } + } + /** + * Detects when document is not focused. + * @param e Event instance. + */ + /* eslint-disabled as of required event type condition check */ + /* eslint-disable-next-line */ + 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) { + const edges = { + top: false, + right: false, + bottom: false, + left: false + }; + const containerRect = container.getBoundingClientRect(); + // If body element is smaller than viewport, use viewport height instead. + const containerBottom = container === document.body + ? Math.max(containerRect.bottom, window.innerHeight) + : containerRect.bottom; + const scrollLeft = container.scrollLeft; + const scrollTop = container.scrollTop; + const scrolledX = bounding.left - scrollLeft; + const 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) { + const canAlign = { + top: true, + right: true, + bottom: true, + left: true, + spaceOnTop: null, + spaceOnRight: null, + spaceOnBottom: null, + spaceOnLeft: null + }; + const containerAllowsOverflow = getComputedStyle(container).overflow === 'visible'; + const containerRect = container.getBoundingClientRect(); + const containerHeight = Math.min(containerRect.height, window.innerHeight); + const containerWidth = Math.min(containerRect.width, window.innerWidth); + const elOffsetRect = el.getBoundingClientRect(); + const scrollLeft = container.scrollLeft; + const scrollTop = container.scrollTop; + const scrolledX = bounding.left - scrollLeft; + const scrolledYTopEdge = bounding.top - scrollTop; + const 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 = {}) { + let context, args, result, timeout = null, previous = 0; + const later = () => { + previous = options.leading === false ? 0 : new Date().getTime(); + timeout = null; + result = func.apply(context, args); + context = args = null; + }; + return (...args) => { + const now = new Date().getTime(); + if (!previous && options.leading === false) + previous = now; + const remaining = wait - (now - previous); + context = this; + 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; + }; + } + /** + * Renders confirm/close buttons with callback function + */ + static createConfirmationContainer(container, confirmText, cancelText, onConfirm, onCancel) { + const confirmationButtonsContainer = document.createElement('div'); + confirmationButtonsContainer.classList.add('confirmation-btns'); + container.append(confirmationButtonsContainer); + this.createButton(confirmationButtonsContainer, cancelText, ['btn-cancel'], true, onCancel); + this.createButton(confirmationButtonsContainer, confirmText, ['btn-confirm'], true, onConfirm); + } + /** + * Renders a button with optional callback function + */ + static createButton(container, text, className = [], visibility = true, callback = null) { + className = className.concat(['btn', 'waves-effect', 'text']); + const button = document.createElement('button'); + button.className = className.join(' '); + button.style.visibility = visibility ? 'visible' : 'hidden'; + button.type = 'button'; + button.tabIndex = !!visibility ? 0 : -1; + button.innerText = text; + button.addEventListener('click', callback); + button.addEventListener('keypress', (e) => { + if (Utils.keys.ENTER.includes(e.key)) + callback(e); + }); + container.append(button); + } +} + +/** + * 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 + const 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. + */ + // eslint-disable-next-line @typescript-eslint/no-unused-vars + 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$m = { + 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 = []; + this.el.ariaExpanded = 'false'; + // Move dropdown-content after dropdown-trigger + this._moveDropdown(); + this._makeDropdownFocusable(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$m; + } + /** + * 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(); + this._moveDropdown(e.target.closest('li')); + if (this.isOpen) { + this.close(); + } + else { + this.open(); + } + }; + _handleMouseEnter = (e) => { + this._moveDropdown(e.target.closest('li')); + 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) { + const arr = []; + let i; + 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) { + const opts = this.options, isMinYear = year === opts.minYear, isMaxYear = year === opts.maxYear; + let i, j, arr = [], html = '
', prev = true, next = true; + for (i = 0; i < 12; i++) { + arr.push(''); + } + const 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(); + const yearHtml = ``; + const 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; + } + const rightArrow = ''; + html += ``; + return (html += '
'); + } + // refresh HTML + draw() { + const opts = this.options, minYear = opts.minYear, maxYear = opts.maxYear, minMonth = opts.minMonth, maxMonth = opts.maxMonth; + let html = ''; + 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; + } + } + const randId = 'datepicker-title-' + + Math.random() + .toString(36) + .replace(/[^a-z]+/g, '') + .substr(0, 2); + for (let c = 0; c < 1; c++) { + if (!this.options.isDateRange) { + this._renderDateDisplay(this.date); + } + else { + this._renderDateDisplay(this.date, this.endDate); + } + 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 + const yearSelect = this.calendarEl.querySelector('.orig-select-year'); + const monthSelect = this.calendarEl.querySelector('.orig-select-month'); + // @todo fix accessibility @see https://github.com/materializecss/materialize/issues/522 + 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.setInputValues()); + 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.containerEl = template.content.firstChild; + this.calendarEl = this.containerEl.querySelector('.datepicker-calendar'); + this.yearTextEl = this.containerEl.querySelector('.year-text'); + this.dateTextEl = this.containerEl.querySelector('.date-text'); + if (this.options.showClearBtn) { + this.clearBtn = this.containerEl.querySelector('.datepicker-clear'); + } + // TODO: This should not be part of the datepicker + this.doneBtn = this.containerEl.querySelector('.datepicker-done'); + this.cancelBtn = this.containerEl.querySelector('.datepicker-cancel'); + this.formats = { + d: (date) => { + return date.getDate(); + }, + dd: (date) => { + const d = date.getDate(); + return (d < 10 ? '0' : '') + d; + }, + ddd: (date) => { + return this.options.i18n.weekdaysShort[date.getDay()]; + }, + dddd: (date) => { + return this.options.i18n.weekdays[date.getDay()]; + }, + m: (date) => { + return date.getMonth() + 1; + }, + mm: (date) => { + const m = date.getMonth() + 1; + return (m < 10 ? '0' : '') + m; + }, + mmm: (date) => { + return this.options.i18n.monthsShort[date.getMonth()]; + }, + mmmm: (date) => { + return this.options.i18n.months[date.getMonth()]; + }, + yy: (date) => { + return ('' + date.getFullYear()).slice(2); + }, + yyyy: (date) => { + return 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); + if (this.options.isDateRange) { + this.endDateEl.removeEventListener('click', this._handleInputClick); + this.endDateEl.removeEventListener('keypress', this._handleInputKeydown); + this.endDateEl.removeEventListener('change', this._handleInputChange); + } + } + _handleInputClick = (e) => { + // Prevents default browser datepicker modal rendering + if (e.type == 'date') { + e.preventDefault(); + } + this.setDateFromInput(e.target); + this.draw(); + this.gotoDate(e.target === this.el ? this.date : this.endDate); + if (this.options.onInputInteraction) + this.options.onInputInteraction.call(this); + }; + _handleInputKeydown = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + e.preventDefault(); + this.setDateFromInput(e.target); + this.draw(); + if (this.options.onInputInteraction) + this.options.onInputInteraction.call(this); + } + }; + _handleCalendarClick = (e) => { + 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')) { + const selectedDate = new Date(e.target.getAttribute('data-year'), e.target.getAttribute('data-month'), e.target.getAttribute('data-day')); + if (!this.multiple || (this.multiple && this.options.isMultipleSelection)) { + this.setDate(selectedDate); + } + if (this.options.isDateRange) { + this._handleDateRangeCalendarClick(selectedDate); + } + this._finishSelection(); + } + else if (target.closest('.month-prev')) { + this.prevMonth(); + } + else if (target.closest('.month-next')) { + this.nextMonth(); + } + } + }; + _handleDateRangeCalendarClick = (date) => { + if (this.endDate == null || !Datepicker._compareDates(date, this.endDate)) { + if (Datepicker._isDate(this.date) && Datepicker._comparePastDate(date, this.date)) { + return; + } + this.setDate(date, false, Datepicker._isDate(this.date)); + return; + } + this._clearDates(); + this.draw(); + }; + _handleClearClick = () => { + this._clearDates(); + this.setInputValues(); + }; + _clearDates = () => { + this.date = null; + this.endDate = null; + }; + _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; + const el = e.target; + // Prevent change event from being fired when triggered by the plugin + if (e['detail']?.firedBy === this) + return; + // Prevent change event from being fired if an end date is set without a start date + if (el == this.endDateEl && !this.date) + return; + if (this.options.parse) { + date = this.options.parse(e.target.value, typeof this.options.format === 'function' + ? this.options.format(new Date(this.el.value)) + : this.options.format); + } + else { + date = new Date(Date.parse(e.target.value)); + } + if (Datepicker._isDate(date)) { + this.setDate(date, false, el == this.endDateEl, true); + if (e.type == 'date') { + this.setDataDate(e, date); + this.setInputValues(); + } + } + }; + renderDayName(opts, day, abbr = false) { + day += opts.firstDay; + while (day >= 7) { + day -= 7; + } + return abbr ? opts.i18n.weekdaysAbbrev[day] : opts.i18n.weekdays[day]; + } + createDateInput() { + const dateInput = this.el.cloneNode(true); + dateInput.addEventListener('click', this._handleInputClick); + dateInput.addEventListener('keypress', this._handleInputKeydown); + dateInput.addEventListener('change', this._handleInputChange); + this.el.parentElement.appendChild(dateInput); + return dateInput; + } + // Set input value to the selected date and close Datepicker + _finishSelection = () => { + this.setInputValues(); + this.close(); + }; + // deprecated + open() { + console.warn('Datepicker.open() is deprecated. Remove this method and wrap in modal yourself.'); + return this; + } + close() { + console.warn('Datepicker.close() is deprecated. Remove this method and wrap in modal yourself.'); + return this; + } + static { + Datepicker._template = ` +
+
+ + +
+
+
+
+ +
+ + +
+
+
+
`; + } +} + +class Forms { + /** + * Checks if the label has validation and apply + * the correct class and styles + * @param textfield + */ + static validateField(textfield) { + if (!textfield) { + console.error('No text field element found'); + return; + } + const hasLength = textfield.getAttribute('data-length') !== null; + const lenAttr = parseInt(textfield.getAttribute('data-length')); + const len = textfield.value.length; + if (len === 0 && + textfield.validity.badInput === false && + !textfield.required && + textfield.classList.contains('validate')) { + textfield.classList.remove('invalid'); + } + else if (textfield.classList.contains('validate')) { + // Check for character counter attributes + if ((textfield.validity.valid && hasLength && len <= lenAttr) || + (textfield.validity.valid && !hasLength)) { + textfield.classList.remove('invalid'); + } + else { + textfield.classList.add('invalid'); + } + } + } + /** + * Resizes the given TextArea after updating the + * value content dynamically. + * @param e EventTarget + */ + static textareaAutoResize(e) { + const textarea = e; + // 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'; + hiddenDiv.innerHTML = hiddenDiv.innerHTML.replace(/\n/g, '
'); + // 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('change', (e) => { + const target = e.target; + if (target instanceof HTMLInputElement) { + if (target.value.length !== 0 || target.getAttribute('placeholder') !== null) { + for (const child of target.parentNode.children) { + if (child.tagName == 'label') { + child.classList.add('active'); + } + } + } + Forms.validateField(target); + } + }); + 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', () => 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(e.target)); + textarea.addEventListener('keydown', (e) => Forms.textareaAutoResize(e.target)); + } + static InitFileInputPath(fileInput) { + fileInput.addEventListener('change', () => { + 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$d = { + 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') || ''; + this.el.tabIndex = 0; + // Wrap + this.el.before(this.placeholder); + this.placeholder.append(this.el); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$d; + } + /** + * 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); + this.el.addEventListener('keypress', this._handleMaterialboxKeypress); + } + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleMaterialboxClick); + this.el.removeEventListener('keypress', this._handleMaterialboxKeypress); + } + _handleMaterialboxClick = () => { + this._handleMaterialboxToggle(); + }; + _handleMaterialboxKeypress = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + this._handleMaterialboxToggle(); + } + }; + _handleMaterialboxToggle = () => { + // 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.scrollY - docElem.clientTop, + left: box.left + window.scrollX - 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'); + if (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', () => { + 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(); + }; +} + +const _defaults$c = { + opacity: 0.5, + inDuration: 250, + outDuration: 250, + onOpenStart: null, + onOpenEnd: null, + onCloseStart: null, + onCloseEnd: null, + preventScrolling: true, + dismissible: true, + startingTop: '4%', + endingTop: '10%' +}; +class Modal extends Component { + constructor(el, options) { + super(el, options, Modal); + this.el['M_Modal'] = this; + this.options = { + ...Modal.defaults, + ...options + }; + this.el.tabIndex = 0; + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$c; + } + static init(els, options = {}) { + return super.init(els, options, Modal); + } + static getInstance(el) { + return el['M_Modal']; + } + destroy() { } + _setupEventHandlers() { } + _removeEventHandlers() { } + _handleTriggerClick() { } + _handleOverlayClick() { } + _handleModalCloseClick() { } + _handleKeydown() { } + _handleFocus() { } + open() { + return this; + } + close() { + return this; + } + // Experimental! + static #createHtml(config) { + return ` + ${config.header ? '
' + config.header + '
' : ''} +
+ ${config.content} +
+ ${config.header ? '
' + config.footer + '
' : ''} + `; + } + static #createHtmlElement(config) { + const dialog = document.createElement('dialog'); + dialog.id = config.id; + return dialog; + } + static create(config) { + return this.#createHtmlElement(config); + } + static { } +} + +const _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++) { + const parallaxInstance = Parallax._parallaxes[i]; + parallaxInstance._updateParallax.call(parallaxInstance); + } + } + static _handleWindowResize() { + for (let i = 0; i < Parallax._parallaxes.length; i++) { + const 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.scrollY - docElem.clientTop, + left: box.left + window.scrollX - docElem.clientLeft + }; + } + _updateParallax() { + const containerHeight = this.el.getBoundingClientRect().height > 0 ? this.el.parentElement.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)`; + } + } +} + +const _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 + const 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 (const elIndex in Pushpin._pushpins) { + const pInstance = Pushpin._pushpins[elIndex]; + pInstance._updatePosition(); + } + } + _setupEventHandlers() { + document.addEventListener('scroll', Pushpin._updateElements); + } + _removeEventHandlers() { + document.removeEventListener('scroll', Pushpin._updateElements); + } + _updatePosition() { + const 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 = []; + } +} + +const _defaults$9 = { + throttle: 100, + scrollOffset: 200, // offset - 200 allows elements near bottom of page to scroll + activeClass: 'active', + getActiveElement: (id) => { + return 'a[href="#' + id + '"]'; + }, + keepTopElementActive: false, + animationDuration: null +}; +class ScrollSpy extends Component { + static _elements; + static _count; + static _increment; + static _elementsInView; + static _visibleElements; + static _ticks; + static _keptTopActiveElement = null; + tickId; + id; + 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.toString(); + 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(); + if (scrollspy.el['M_ScrollSpy'].options.animationDuration) { + ScrollSpy._smoothScrollIntoView(scrollspy.el, scrollspy.el['M_ScrollSpy'].options.animationDuration); + } + else { + scrollspy.el.scrollIntoView({ behavior: 'smooth' }); + } + break; + } + } + }; + _handleWindowScroll = () => { + // unique tick id + ScrollSpy._ticks++; + // viewport rectangle + const top = Utils.getDocumentScrollTop(), left = Utils.getDocumentScrollLeft(), right = left + window.innerWidth, bottom = top + window.innerHeight; + // determine which elements are in view + const intersections = ScrollSpy._findElements(top, right, bottom, left); + for (let i = 0; i < intersections.length; i++) { + const scrollspy = intersections[i]; + const 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++) { + const scrollspy = ScrollSpy._elementsInView[i]; + const 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; + if (ScrollSpy._elements.length) { + const options = ScrollSpy._elements[0].el['M_ScrollSpy'].options; + if (options.keepTopElementActive && ScrollSpy._visibleElements.length === 0) { + this._resetKeptTopActiveElementIfNeeded(); + const topElements = ScrollSpy._elements + .filter((value) => ScrollSpy._getDistanceToViewport(value.el) <= 0) + .sort((a, b) => { + const distanceA = ScrollSpy._getDistanceToViewport(a.el); + const distanceB = ScrollSpy._getDistanceToViewport(b.el); + if (distanceA < distanceB) + return -1; + if (distanceA > distanceB) + return 1; + return 0; + }); + const nearestTopElement = topElements.length + ? topElements[topElements.length - 1] + : ScrollSpy._elements[0]; + const actElem = document.querySelector(options.getActiveElement(nearestTopElement.el.id)); + actElem?.classList.add(options.activeClass); + ScrollSpy._keptTopActiveElement = actElem; + } + } + }; + 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) { + const hits = []; + for (let i = 0; i < ScrollSpy._elements.length; i++) { + const scrollspy = ScrollSpy._elements[i]; + const currTop = top + scrollspy.options.scrollOffset || 200; + if (scrollspy.el.getBoundingClientRect().height > 0) { + const elTop = ScrollSpy._offset(scrollspy.el).top, elLeft = ScrollSpy._offset(scrollspy.el).left, elRight = elLeft + scrollspy.el.getBoundingClientRect().width, elBottom = elTop + scrollspy.el.getBoundingClientRect().height; + const 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); + } + this._resetKeptTopActiveElementIfNeeded(); + 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); + this._resetKeptTopActiveElementIfNeeded(); + } + } + } + _resetKeptTopActiveElementIfNeeded() { + if (ScrollSpy._keptTopActiveElement) { + ScrollSpy._keptTopActiveElement.classList.remove(this.options.activeClass); + ScrollSpy._keptTopActiveElement = null; + } + } + static _getDistanceToViewport(element) { + const rect = element.getBoundingClientRect(); + const distance = rect.top; + return distance; + } + static _smoothScrollIntoView(element, duration = 300) { + const targetPosition = element.getBoundingClientRect().top + (window.scrollY || window.pageYOffset); + const startPosition = window.scrollY || window.pageYOffset; + const distance = targetPosition - startPosition; + const startTime = performance.now(); + function scrollStep(currentTime) { + const elapsed = currentTime - startTime; + const progress = Math.min(elapsed / duration, 1); + const scrollY = startPosition + distance * progress; + if (progress < 1) { + window.scrollTo(0, scrollY); + requestAnimationFrame(scrollStep); + } + else { + window.scrollTo(0, targetPosition); + } + } + requestAnimationFrame(scrollStep); + } + 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); + } + const 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); + } + /* Set aria-hidden state */ + this._setAriaHidden(); + this._setTabIndex(); + } + _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(); + } + 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._isDraggable()) + return; + let totalDeltaX = this._calculateDelta(e); + 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) => { + // Check if open and draggable + if (!this.isOpen || !this._isDraggable()) + return; + let totalDeltaX = this._calculateDelta(e); + // dragDirection is the attempted user drag direction + const dragDirection = totalDeltaX > 0 ? 'right' : 'left'; + 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(); + }; + _calculateDelta = (e) => { + // If not being dragged, set initial drag start variables + if (!this.isDragged) { + this._startDrag(e); + } + // Run touchmove updates + this._dragMoveUpdate(e); + // Calculate raw deltaX + return this._xPos - this._startingXpos; + }; + _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(); + } + _isDraggable() { + return this.options.draggable && !this._isCurrentlyFixed() && !this._verticallyScrolling; + } + _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(); + /* Set aria-hidden state */ + this._setAriaHidden(); + this._setTabIndex(); + } + }; + /** + * 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'; + } + /* Set aria-hidden state */ + this._setAriaHidden(); + this._setTabIndex(); + } + }; + _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; + // let slideOutPercent = 0; + // if (this.isDragged) { + // // @todo unused variable + // slideOutPercent = + // 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); + } + _setAriaHidden = () => { + this.el.ariaHidden = this.isOpen ? 'false' : 'true'; + const navWrapper = document.querySelector('.nav-wrapper ul'); + if (navWrapper) + navWrapper.ariaHidden = this.isOpen.toString(); + }; + _setTabIndex = () => { + const navLinks = document.querySelectorAll('.nav-wrapper ul li a'); + const sideNavLinks = document.querySelectorAll('.sidenav li a'); + if (navLinks) + navLinks.forEach((navLink) => { + navLink.tabIndex = this.isOpen ? -1 : 0; + }); + if (sideNavLinks) + sideNavLinks.forEach((sideNavLink) => { + sideNavLink.tabIndex = this.isOpen ? 0 : -1; + }); + }; + static { + Sidenav._sidenavs = []; + } +} + +const _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) => { + let tabLink = e.target; + if (!tabLink) + return; + let tab = tabLink.parentElement; + while (tab && !tab.classList.contains('tab')) { + tabLink = tabLink.parentElement; + tab = tab.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) { + let activeTabLink = this.el.querySelector('li.tab a.active'); + if (!activeTabLink) { + activeTabLink = this.el.querySelector('li.tab a'); + } + this._activeTabLink = activeTabLink; + } + 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.append(tabsWrapper.parentElement); + 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(); + } +} + +const _defaults$6 = { + onOpen: null, + onClose: null +}; +class TapTarget extends Component { + /** + * If the tap target is open. + */ + isOpen; + static _taptargets; + wrapper; + // private _origin: HTMLElement; + 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.originEl = document.querySelector(`#${el.dataset.target}`); + this.originEl.tabIndex = 0; + this._setup(); + this._calculatePositioning(); + this._setupEventHandlers(); + TapTarget._taptargets.push(this); + } + 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['M_TapTarget'] = undefined; + const index = TapTarget._taptargets.indexOf(this); + if (index >= 0) { + TapTarget._taptargets.splice(index, 1); + } + } + _setupEventHandlers() { + this.originEl.addEventListener('click', this._handleTargetToggle); + this.originEl.addEventListener('keypress', this._handleKeyboardInteraction, true); + // this.originEl.addEventListener('click', this._handleOriginClick); + // Resize + window.addEventListener('resize', this._handleThrottledResize); + } + _removeEventHandlers() { + this.originEl.removeEventListener('click', this._handleTargetToggle); + this.originEl.removeEventListener('keypress', this._handleKeyboardInteraction, true); + // this.originEl.removeEventListener('click', this._handleOriginClick); + window.removeEventListener('resize', this._handleThrottledResize); + } + _handleThrottledResize = Utils.throttle(function () { + this._handleResize(); + }, 200).bind(this); + _handleKeyboardInteraction = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + this._handleTargetToggle(); + } + }; + _handleTargetToggle = () => { + if (!this.isOpen) + this.open(); + else + this.close(); + }; + /*_handleOriginClick = () => { + this.close(); + }*/ + _handleResize = () => { + this._calculatePositioning(); + }; + _handleDocumentClick = (e) => { + if (e.target.closest(`#${this.el.dataset.target}`) !== this.originEl && + !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.el.parentElement.ariaExpanded = 'false'; + this.originEl.style.zIndex = '1002'; + // 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.originEl).position === 'fixed'; + if (!isFixed) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + let currentElem = this.originEl; + 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.originEl.offsetWidth; + const originHeight = this.originEl.offsetHeight; + const originTop = isFixed + ? this._offset(this.originEl).top - Utils.getDocumentScrollTop() + : this._offset(this.originEl).top; + const originLeft = isFixed + ? this._offset(this.originEl).left - Utils.getDocumentScrollLeft() + : this._offset(this.originEl).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.originEl); + } + this.isOpen = true; + this.wrapper.classList.add('open'); + this.wrapper.ariaExpanded = 'true'; + document.body.addEventListener('click', this._handleDocumentClick, true); + document.body.addEventListener('keypress', 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.originEl); + } + this.isOpen = false; + this.wrapper.classList.remove('open'); + this.wrapper.ariaExpanded = 'false'; + document.body.removeEventListener('click', this._handleDocumentClick, true); + document.body.removeEventListener('keypress', this._handleDocumentClick, true); + document.body.removeEventListener('touchend', this._handleDocumentClick); + }; + static { + TapTarget._taptargets = []; + } +} + +const _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, + autoSubmit: true, + // internationalization + i18n: { + cancel: 'Cancel', + clear: 'Clear', + done: 'Ok' + }, + twelveHour: true, // change to 12 hour AM/PM clock from 24 hour + vibrate: true, // vibrate the device when dragging clock hand + // Callbacks + onSelect: null, + onInputInteraction: null, + onDone: null, + onCancel: null, +}; +class Timepicker extends Component { + id; + containerEl; + 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; + /** Vibrate device when dragging clock hand. */ + vibrate; + _canvas; + hoursView; + spanAmPm; + footer; + _amBtn; + _pmBtn; + bg; + bearing; + g; + toggleViewTimer; + 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._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) { + const 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.containerEl.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('focus', () => this.showView('hours')); + this.inputHours.addEventListener('focusout', () => this.formatHours()); + this.inputMinutes.addEventListener('focus', () => this.showView('minutes')); + this.inputMinutes.addEventListener('focusout', () => this.formatMinutes()); + } + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleInputClick); + this.el.removeEventListener('keydown', this._handleInputKeydown); + } + _handleInputClick = () => { + this.inputHours.focus(); + if (typeof this.options.onInputInteraction === 'function') + this.options.onInputInteraction.call(this); + }; + _handleInputKeydown = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + e.preventDefault(); + this.inputHours.focus(); + if (typeof this.options.onInputInteraction === 'function') + this.options.onInputInteraction.call(this); + } + }; + _handleTimeInputEnterKey = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + e.preventDefault(); + this._inputFromTextField(); + } + }; + _handleClockClickStart = (e) => { + e.preventDefault(); + const clockPlateBR = this.plate.getBoundingClientRect(); + const offset = { x: clockPlateBR.left, y: clockPlateBR.top }; + this.x0 = offset.x + this.options.dialRadius; + this.y0 = offset.y + this.options.dialRadius; + this.moved = false; + const 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(); + const clickPos = Timepicker._Pos(e); + const x = clickPos.x - this.x0; + const 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); + const clickPos = Timepicker._Pos(e); + const x = clickPos.x - this.x0; + const y = clickPos.y - this.y0; + if (this.moved && x === this.dx && y === this.dy) { + this.setHand(x, y); + } + if (this.currentView === 'hours') { + this.inputMinutes.focus(); + this.showView('minutes', this.options.duration / 2); + } + else { + // this.minutesView.classList.add('timepicker-dial-out'); + setTimeout(() => { + if (this.options.autoSubmit) + 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.containerEl = template.content.firstChild; + this.containerEl.id = 'container-' + 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.containerEl); + } + else { + this.el.parentElement.appendChild(this.containerEl); + } + } + _setupVariables() { + this.currentView = 'hours'; + this.vibrate = navigator.vibrate + ? 'vibrate' + : navigator['webkitVibrate'] + ? 'webkitVibrate' + : null; + this._canvas = this.containerEl.querySelector('.timepicker-canvas'); + this.plate = this.containerEl.querySelector('.timepicker-plate'); + this.digitalClock = this.containerEl.querySelector('.timepicker-display-column'); + this.hoursView = this.containerEl.querySelector('.timepicker-hours'); + this.minutesView = this.containerEl.querySelector('.timepicker-minutes'); + this.inputHours = this.containerEl.querySelector('.timepicker-input-hours'); + this.inputMinutes = this.containerEl.querySelector('.timepicker-input-minutes'); + this.spanAmPm = this.containerEl.querySelector('.timepicker-span-am-pm'); + this.footer = this.containerEl.querySelector('.timepicker-footer'); + this.amOrPm = 'PM'; + } + _createButton(text, visibility) { + const button = document.createElement('button'); + button.classList.add('btn', 'btn-flat', 'waves-effect', 'text'); + button.style.visibility = visibility; + button.type = 'button'; + button.tabIndex = -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); + if (!this.options.autoSubmit) { + 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); + } + this._updateTimeFromInput(); + this.showView('hours'); + } + _clockSetup() { + if (this.options.twelveHour) { + // AM Button + this._amBtn = document.createElement('div'); + this._amBtn.classList.add('am-btn', 'btn'); + this._amBtn.innerText = 'AM'; + this._amBtn.tabIndex = 0; + this._amBtn.addEventListener('click', this._handleAmPmClick); + this._amBtn.addEventListener('keypress', this._handleAmPmKeypress); + this.spanAmPm.appendChild(this._amBtn); + // PM Button + this._pmBtn = document.createElement('div'); + this._pmBtn.classList.add('pm-btn', 'btn'); + this._pmBtn.innerText = 'PM'; + this._pmBtn.tabIndex = 0; + this._pmBtn.addEventListener('click', this._handleAmPmClick); + this._pmBtn.addEventListener('keypress', this._handleAmPmKeypress); + this.spanAmPm.appendChild(this._pmBtn); + } + this._buildHoursView(); + this._buildMinutesView(); + this._buildSVGClock(); + } + _buildSVGClock() { + // Draw clock hands and others + const dialRadius = this.options.dialRadius; + const tickRadius = this.options.tickRadius; + const diameter = dialRadius * 2; + const svg = Timepicker._createSVGEl('svg'); + svg.setAttribute('class', 'timepicker-svg'); + svg.setAttribute('width', diameter.toString()); + svg.setAttribute('height', diameter.toString()); + const g = Timepicker._createSVGEl('g'); + g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')'); + const bearing = Timepicker._createSVGEl('circle'); + bearing.setAttribute('class', 'timepicker-canvas-bearing'); + bearing.setAttribute('cx', '0'); + bearing.setAttribute('cy', '0'); + bearing.setAttribute('r', '4'); + const hand = Timepicker._createSVGEl('line'); + hand.setAttribute('x1', '0'); + hand.setAttribute('y1', '0'); + const 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; + this._buildHoursTick(i, radian, radius); + } + } + 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; + this._buildHoursTick(i, radian, radius); + } + } + } + _buildHoursTick(i, radian, radius) { + const tick = document.createElement('div'); + tick.classList.add('timepicker-tick'); + 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); + } + _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) => { + this._handleAmPmInteraction(e.target); + }; + _handleAmPmKeypress = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + this._handleAmPmInteraction(e.target); + } + }; + _handleAmPmInteraction = (e) => { + this.amOrPm = e.classList.contains('am-btn') ? 'AM' : 'PM'; + this._updateAmPmView(); + }; + _updateAmPmView() { + if (this.options.twelveHour) { + if (this.amOrPm === 'PM') { + this._amBtn.classList.remove('filled'); + this._pmBtn.classList.add('filled'); + } + else if (this.amOrPm === 'AM') { + this._amBtn.classList.add('filled'); + this._pmBtn.classList.remove('filled'); + } + } + } + _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') { + const 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 = Timepicker._addLeadingZero(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'. + * @param delay + */ + showView = (view, delay = null) => { + if (view === 'minutes' && getComputedStyle(this.hoursView).visibility === 'visible') ; + const 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) { + const 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; + if (delay) { + this._canvas?.classList.add('timepicker-canvas-out'); + setTimeout(() => { + this._canvas?.classList.remove('timepicker-canvas-out'); + this.setHand(x, y); + }, delay); + } + else { + this.setHand(x, y); + } + } + _inputFromTextField = () => { + const isHours = this.currentView === 'hours'; + if (isHours && this.inputHours.value !== '') { + const value = parseInt(this.inputHours.value); + if (value > 0 && value < (this.options.twelveHour ? 13 : 24)) { + this.hours = value; + } + else { + this.setHoursDefault(); + } + this.drawClockFromTimeInput(this.hours, isHours); + } + else if (!isHours && this.inputMinutes.value !== '') { + const value = parseInt(this.inputMinutes.value); + if (value >= 0 && value < 60) { + this.minutes = value; + } + else { + this.minutes = new Date().getMinutes(); + this.inputMinutes.value = this.minutes.toString(); + } + this.drawClockFromTimeInput(this.minutes, isHours); + } + }; + drawClockFromTimeInput(value, isHours) { + const unit = Math.PI / (isHours ? 6 : 30); + const radian = value * unit; + let radius; + if (this.options.twelveHour) { + radius = this.options.outerRadius; + } + else { + radius = + isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius; + } + this.setClockAttributes(radian, radius); + } + setHand(x, y, roundBy5 = false) { + const 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; + let radian = Math.atan2(x, -y), 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 = Timepicker._addLeadingZero(value); + } + else { + this.inputMinutes.value = Timepicker._addLeadingZero(value); + } + // Set clock hand and others' position + this.setClockAttributes(radian, radius); + } + setClockAttributes(radian, radius) { + const 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()); + } + formatHours() { + if (this.inputHours.value == '') + this.setHoursDefault(); + this.inputHours.value = Timepicker._addLeadingZero(Number(this.inputHours.value)); + } + formatMinutes() { + if (this.inputMinutes.value == '') + this.minutes = new Date().getMinutes(); + this.inputMinutes.value = Timepicker._addLeadingZero(Number(this.inputMinutes.value)); + } + setHoursDefault() { + this.hours = new Date().getHours(); + this.inputHours.value = (this.hours % (this.options.twelveHour ? 12 : 24)).toString(); + } + done = (clearValue = null) => { + // Set input value + const 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 })); + } + }; + confirm = () => { + this.done(); + if (typeof this.options.onDone === 'function') { + setTimeout(() => { + this.options.onDone.call(this); + }, this.options.duration / 2); + } + }; + cancel = () => { + this.clear(); + if (typeof this.options.onDone === 'function') + this.options.onCancel.call(this); + }; + clear = () => { + this.done(true); + }; + // deprecated + open() { + console.warn('Timepicker.close() is deprecated. Remove this method and wrap in modal yourself.'); + return this; + } + close() { + console.warn('Timepicker.close() is deprecated. Remove this method and wrap in modal yourself.'); + return this; + } + static { + Timepicker._template = `
+
+
+
+
+ +
+
+ : +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`; + } +} + +const _defaults$4 = { + exitDelay: 200, + enterDelay: 0, + text: '', + margin: 5, + inDuration: 250, + outDuration: 200, + position: 'bottom', + transitionMovement: 10, + opacity: 1 +}; +class Tooltip extends Component { + /** + * If tooltip is open. + */ + isOpen; + /** + * If tooltip is hovered. + */ + isHovered; + /** + * If tooltip is focused. + */ + isFocused; + tooltipEl; + _exitDelayTimeout; + _enterDelayTimeout; + xMovement; + yMovement; + constructor(el, options) { + super(el, options, Tooltip); + this.el['M_Tooltip'] = this; + this.options = { + ...Tooltip.defaults, + ...this._getAttributeOptions(), + ...options + }; + this.isOpen = false; + this.isHovered = false; + this.isFocused = false; + this._appendTooltipEl(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$4; + } + /** + * Initializes instances of Tooltip. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Tooltip); + } + static getInstance(el) { + return el['M_Tooltip']; + } + destroy() { + this.tooltipEl.remove(); + this._removeEventHandlers(); + this.el['M_Tooltip'] = undefined; + } + _appendTooltipEl() { + this.tooltipEl = document.createElement('div'); + this.tooltipEl.classList.add('material-tooltip'); + const tooltipContentEl = this.options.tooltipId + ? document.getElementById(this.options.tooltipId) + : document.createElement('div'); + this.tooltipEl.append(tooltipContentEl); + tooltipContentEl.style.display = ''; + tooltipContentEl.classList.add('tooltip-content'); + this._setTooltipContent(tooltipContentEl); + this.tooltipEl.appendChild(tooltipContentEl); + document.body.appendChild(this.tooltipEl); + } + _setTooltipContent(tooltipContentEl) { + if (this.options.tooltipId) + return; + tooltipContentEl.innerText = this.options.text; + } + _updateTooltipContent() { + this._setTooltipContent(this.tooltipEl.querySelector('.tooltip-content')); + } + _setupEventHandlers() { + this.el.addEventListener('mouseenter', this._handleMouseEnter); + this.el.addEventListener('mouseleave', this._handleMouseLeave); + this.el.addEventListener('focus', this._handleFocus, true); + this.el.addEventListener('blur', this._handleBlur, true); + } + _removeEventHandlers() { + this.el.removeEventListener('mouseenter', this._handleMouseEnter); + this.el.removeEventListener('mouseleave', this._handleMouseLeave); + this.el.removeEventListener('focus', this._handleFocus, true); + this.el.removeEventListener('blur', this._handleBlur, true); + } + /** + * Show tooltip. + */ + open = (isManual) => { + 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() { + const 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 = () => { + const 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'); + } + } +} + +const _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); + }; +} + +const _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); + const 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) { + const toast = Toast._draggedToast; + toast.panning = false; + toast.el.classList.remove('panning'); + const totalDeltaX = toast.xPos - toast.startingXPos; + const activationDistance = toast.el.offsetWidth * toast.options.activationPercent; + const 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 (const 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() { + clearInterval(this.counterInterval); + const 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; + } +} + +/* eslint-disable @typescript-eslint/no-unused-vars */ +const version = '2.2.1'; +/** + * Automatically initialize components. + * @param context Root element to initialize. Defaults to `document.body`. + * @param options Options for each component. + */ +function AutoInit(context = document.body, options) { + const registry = { + Autocomplete: context.querySelectorAll('.autocomplete:not(.no-autoinit)'), + Cards: context.querySelectorAll('.cards: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, options?.Autocomplete ?? {}); + Cards.init(registry.Cards, options?.Cards ?? {}); + Carousel.init(registry.Carousel, options?.Carousel ?? {}); + Chips.init(registry.Chips, options?.Chips ?? {}); + Collapsible.init(registry.Collapsible, options?.Collapsible ?? {}); + Datepicker.init(registry.Datepicker, options?.Datepicker ?? {}); + Dropdown.init(registry.Dropdown, options?.Dropdown ?? {}); + Materialbox.init(registry.Materialbox, options?.Materialbox ?? {}); + Modal.init(registry.Modal, options?.Modal ?? {}); + Parallax.init(registry.Parallax, options?.Parallax ?? {}); + Pushpin.init(registry.Pushpin, options?.Pushpin ?? {}); + ScrollSpy.init(registry.ScrollSpy, options?.ScrollSpy ?? {}); + FormSelect.init(registry.FormSelect, options?.FormSelect ?? {}); + Sidenav.init(registry.Sidenav, options?.Sidenav ?? {}); + Tabs.init(registry.Tabs, options?.Tabs ?? {}); + TapTarget.init(registry.TapTarget, options?.TapTarget ?? {}); + Timepicker.init(registry.Timepicker, options?.Timepicker ?? {}); + Tooltip.init(registry.Tooltip, options?.Tooltip ?? {}); + FloatingActionButton.init(registry.FloatingActionButton, options?.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); +} +Forms.Init(); +Chips.Init(); +Waves.Init(); +Range.Init(); + +exports.AutoInit = AutoInit; +exports.Autocomplete = Autocomplete; +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.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..36f1d9778b --- /dev/null +++ b/dist/js/materialize.d.ts @@ -0,0 +1,2540 @@ +/** + * Base options for component initialization. + */ +interface BaseOptions$1 { +} +type MElement = HTMLElement | Element; +type InitElements = NodeListOf | HTMLCollectionOf; +type ComponentConstructor, O extends BaseOptions$1> = { + new (el: HTMLElement, options: Partial): T; +}; +type ComponentType, O extends BaseOptions$1> = 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$1; + /** + * 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$1 { + /** + * 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: string[]; + filterTimeout: NodeJS.Timeout | number; + 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: (e: any) => 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: () => void; + _resetFilterQuery: () => void; + _resetDropdownStyles(): void; + _resetDropdownPositioningStyles(): 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$1 { + /** + * 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; + _handleInputKeyup: (e: KeyboardEvent) => void; + _handleInputFocus: () => void; + _inputChangeDetection: (value: string) => 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$1 { + /** + * 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; +} + +interface CardsOptions extends BaseOptions$1 { + onOpen: (el: Element) => void; + onClose: (el: Element) => void; + inDuration: number; + outDuration: number; +} +declare class Cards extends Component implements Openable { + isOpen: boolean; + private readonly cardReveal; + private readonly initialOverflow; + private _activators; + private cardRevealClose; + constructor(el: HTMLElement, options: Partial); + static get defaults(): CardsOptions; + /** + * Initializes instance of Cards. + * @param el HTML element. + * @param options Component options. + */ + static init(el: HTMLElement, options?: Partial): Cards; + /** + * Initializes instances of Cards. + * @param els HTML elements. + * @param options Component options. + */ + static init(els: InitElements, options?: Partial): Cards[]; + static getInstance(el: HTMLElement): Cards; + /** + * {@inheritDoc} + */ + destroy(): void; + _setupEventHandlers: () => void; + _removeEventHandlers: () => void; + _handleClickInteraction: () => void; + _handleKeypressEvent: (e: KeyboardEvent) => void; + _handleRevealEvent: () => void; + _setupRevealCloseEventHandlers: () => void; + _removeRevealCloseEventHandlers: () => void; + _handleKeypressCloseEvent: (e: KeyboardEvent) => void; + /** + * Show card reveal. + */ + open: () => void; + /** + * Hide card reveal. + */ + close: () => void; +} + +interface CarouselOptions extends BaseOptions$1 { + /** + * 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: number; + itemHeight: number; + dim: number; + _indicators: HTMLUListElement; + count: number; + xform: string; + verticalDragged: boolean; + reference: number; + referenceY: number; + velocity: number; + frame: number; + timestamp: number; + ticker: string | number | NodeJS.Timeout; + amplitude: number; + /** The index of the center carousel item. */ + center: number; + imageHeight: number; + scrollingTimeout: number | NodeJS.Timeout; + oneTimeCallback: (current: Element, dragged: boolean) => void | null; + 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; + _handleIndicatorKeyPress: (e: KeyboardEvent) => void; + _handleIndicatorInteraction: (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 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$1 { + /** + * 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; + /** + * Specifies option to render user input field + * @default false; + */ + allowUserInput: boolean; + /** + * 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: HTMLLabelElement; + _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: HTMLElement, 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(): 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$1 { + /** + * 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 DateI18nOptions extends I18nOptions { + previousMonth: string; + nextMonth: string; + months: string[]; + monthsShort: string[]; + weekdays: string[]; + weekdaysShort: string[]; + weekdaysAbbrev: string[]; +} +interface DatepickerOptions extends BaseOptions$1 { + /** + * 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 condition if the datepicker is based on date range. + * @default false + */ + isDateRange: boolean; + /** + * The selector of the user specified date range end element + */ + dateRangeEndEl: string | null; + /** + * The initial condition if the datepicker is based on multiple date selection. + * @default false + */ + isMultipleSelection: boolean; + /** + * The initial date to view when first opened. + * @default null + */ + defaultDate: Date | null; + /** + * The initial end date to view when first opened. + * @default null + */ + defaultEndDate: Date | null; + /** + * Make the `defaultDate` the initial selected value. + * @default false + */ + setDefaultDate: boolean; + /** + * Make the `defaultEndDate` the initial selected value. + * @default false + */ + setDefaultEndDate: 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 if the docked datepicker is in open state by default + */ + openByDefault: 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 closed. + * @default null + */ + /** + * Callback function when Datepicker HTML is refreshed. + * @default null + */ + onDraw: (() => void) | null; + /** + * Callback function for interaction with input field. + * @default null + */ + onInputInteraction: (() => void) | null; + /** Field used for internal calculations DO NOT CHANGE IT */ + minYear?: number; + /** Field used for internal calculations DO NOT CHANGE IT */ + maxYear?: number; + /** Field used for internal calculations DO NOT CHANGE IT */ + minMonth?: number; + /** Field used for internal calculations DO NOT CHANGE IT */ + maxMonth?: number; + /** Field used for internal calculations DO NOT CHANGE IT */ + startRange?: Date; + /** Field used for internal calculations DO NOT CHANGE IT */ + endRange?: Date; +} +declare class Datepicker extends Component { + el: HTMLInputElement; + id: string; + multiple: boolean; + calendarEl: HTMLElement; + /** CLEAR button instance. */ + clearBtn: HTMLElement; + /** DONE button instance */ + doneBtn: HTMLElement; + cancelBtn: HTMLElement; + containerEl: HTMLElement; + yearTextEl: HTMLElement; + dateTextEl: HTMLElement; + endDateEl: HTMLInputElement; + dateEls: HTMLInputElement[]; + /** The selected Date. */ + date: Date; + endDate: null | Date; + dates: Date[]; + formats: object; + calendars: [{ + month: number; + year: number; + }]; + 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; + /** + * @deprecated as this function has no effect without any return statement or global parameter setter. + */ + 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 _compareWithinRange(day: Date, date: Date, dateEnd: Date): boolean; + static _comparePastDate(a: Date, b: Date): boolean; + static getInstance(el: HTMLElement): Datepicker; + destroy(): void; + destroySelects(): void; + _insertHTMLIntoDOM(): void; + /** + * Renders the date input format + */ + _renderDateInputFormat(el: HTMLInputElement): void; + /** + * Gets a string representation of the given date. + */ + toString(date?: Date, format?: string | ((d: Date) => string)): string; + /** + * Returns the formatted date. + */ + formatDate(date: Date, format: string): string; + /** + * Sets date from input field. + */ + setDateFromInput(el: HTMLInputElement): void; + /** + * Set a date on the datepicker. + * @param date Date to set on the datepicker. + * @param preventOnSelect Undocumented as of 5 March 2018. + * @param isEndDate + * @param fromUserInput + */ + setDate(date?: Date, preventOnSelect?: boolean, isEndDate?: boolean, fromUserInput?: boolean): void; + validateDate(date: Date): void | Date; + /** + * Set a single date on the datepicker. + * @param date Date to set on the datepicker. + * @param isEndDate + */ + setSingleDate(date: Date, isEndDate: boolean): void; + /** + * Set a multi date on the datepicker. + * @param date Date to set on the datepicker. + */ + setMultiDate(date: Date): void; + /** + * Sets the data-date attribute on the date input field + */ + setDataDate(el: any, date: any): void; + /** + * Sets dates on the input values. + */ + setInputValues(): void; + setMultipleSelectionInputValues(): void; + /** + * Sets given date as the input value on the given element. + */ + setInputValue(el: any, date: any): void; + /** + * Renders the date in the modal head section. + */ + _renderDateDisplay(date: Date, endDate?: Date): 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(): void; + _setupEventHandlers(): void; + _setupVariables(): void; + _removeEventHandlers(): void; + _handleInputClick: (e: any) => void; + _handleInputKeydown: (e: KeyboardEvent) => void; + _handleCalendarClick: (e: any) => void; + _handleDateRangeCalendarClick: (date: Date) => void; + _handleClearClick: () => void; + _clearDates: () => 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; + createDateInput(): HTMLInputElement; + _finishSelection: () => void; + open(): this; + close(): this; +} + +interface MaterialboxOptions extends BaseOptions$1 { + /** + * 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 _handleMaterialboxKeypress; + private _handleMaterialboxToggle; + 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 ModalOptions extends BaseOptions$1 { + opacity: number; + inDuration: number; + outDuration: number; + preventScrolling: boolean; + onOpenStart: (this: Modal, el: HTMLElement) => void; + onOpenEnd: (this: Modal, el: HTMLElement) => void; + onCloseStart: (el: HTMLElement) => void; + onCloseEnd: (el: HTMLElement) => void; + dismissible: boolean; + startingTop: string; + endingTop: string; +} +declare class Modal extends Component { + #private; + 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; + }; + static init(el: HTMLElement, options?: Partial): Modal; + static init(els: InitElements, options?: Partial): Modal[]; + static getInstance(el: HTMLElement): Modal; + destroy(): void; + _setupEventHandlers(): void; + _removeEventHandlers(): void; + _handleTriggerClick(): void; + _handleOverlayClick(): void; + _handleModalCloseClick(): void; + _handleKeydown(): void; + _handleFocus(): void; + open(): this; + close(): this; + static create(config: any): string | HTMLDialogElement; +} + +declare class Edges { + top: boolean; + right: boolean; + bottom: boolean; + left: boolean; +} + +declare class Bounding { + left: number; + top: number; + width: number; + height: number; +} + +/** + * Class with utilitary functions for global usage. + */ +declare class Utils { + /** Specifies wether tab is pressed or not. */ + static tabPressed: boolean; + /** Specifies wether there is a key pressed. */ + static keyDown: boolean; + /** + * Key maps. + */ + static keys: { + TAB: string[]; + ENTER: string[]; + ESC: string[]; + BACKSPACE: string[]; + ARROW_UP: string[]; + ARROW_DOWN: string[]; + ARROW_LEFT: string[]; + ARROW_RIGHT: string[]; + DELETE: string[]; + }; + /** + * Detects when a key is pressed. + * @param e Event instance. + */ + static docHandleKeydown(e: KeyboardEvent): void; + /** + * Detects when a key is released. + * @param e Event instance. + */ + static docHandleKeyup(e: KeyboardEvent): void; + /** + * Detects when document is focused. + * @param e Event instance. + */ + static docHandleFocus(e: FocusEvent): void; + /** + * Detects when document is not focused. + * @param e Event instance. + */ + static docHandleBlur(e: FocusEvent): void; + /** + * Generates a unique string identifier. + */ + static guid(): string; + /** + * Checks for exceeded edges + * @param container Container element. + * @param bounding Bounding rect. + * @param offset Element offset. + */ + static checkWithinContainer(container: HTMLElement, bounding: Bounding, offset: number): 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: HTMLElement, container: HTMLElement, bounding: Bounding, offset: number): { + top: boolean; + right: boolean; + bottom: boolean; + left: boolean; + spaceOnTop: number; + spaceOnRight: number; + spaceOnBottom: number; + spaceOnLeft: number; + }; + /** + * Retrieves target element id from trigger. + * @param trigger Trigger element. + */ + static getIdFromTrigger(trigger: HTMLElement): string; + /** + * Retrieves document scroll postion from top. + */ + static getDocumentScrollTop(): number; + /** + * Retrieves document scroll postion from left. + */ + static getDocumentScrollLeft(): number; + /** + * 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: (Function: object) => void, wait: number, options?: Partial<{ + leading: boolean; + trailing: boolean; + }>): (...args: any[]) => any; + /** + * Renders confirm/close buttons with callback function + */ + static createConfirmationContainer(container: HTMLElement, confirmText: string, cancelText: string, onConfirm: (Function: object) => void, onCancel: (Function: object) => void): void; + /** + * Renders a button with optional callback function + */ + static createButton(container: HTMLElement, text: string, className?: string[], visibility?: boolean, callback?: (Function: object) => void): void; +} + +interface ParallaxOptions extends BaseOptions$1 { + /** + * 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: () => Utils; + static _handleWindowResizeThrottled: () => Utils; + 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$1 { + /** + * 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: Pushpin[]; + originalOffset: number; + 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$1 { + /** + * 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; + /** + * Used to keep last top element active even if + * scrollbar goes outside of scrollspy elements. + * + * If there is no last top element, + * then the active one will be the first element. + * + * @default false + */ + keepTopElementActive: boolean; + /** + * Used to set scroll animation duration in milliseconds. + * @default null (browser's native animation implementation/duration) + */ + animationDuration: number | null; +} +declare class ScrollSpy extends Component { + static _elements: ScrollSpy[]; + static _count: number; + static _increment: number; + static _elementsInView: ScrollSpy[]; + static _visibleElements: HTMLElement[]; + static _ticks: number; + static _keptTopActiveElement: HTMLElement | null; + private tickId; + private id; + 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; + private _resetKeptTopActiveElementIfNeeded; + private static _getDistanceToViewport; + private static _smoothScrollIntoView; +} + +interface FormSelectOptions extends BaseOptions$1 { + /** + * 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$1 { + /** + * 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 _calculateDelta; + private _handleCloseRelease; + private _handleCloseTriggerClick; + private _handleWindowResize; + private _setupClasses; + private _removeClasses; + private _setupFixed; + private _isDraggable; + 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; + private _setAriaHidden; + private _setTabIndex; +} + +interface TabsOptions extends BaseOptions$1 { + /** + * 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: Carousel; + _activeTabLink: HTMLAnchorElement; + _content: HTMLElement; + 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$1 { + /** + * 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; + static _taptargets: TapTarget[]; + private wrapper; + 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; + _handleKeyboardInteraction: (e: KeyboardEvent) => void; + _handleTargetToggle: () => void; + _handleResize: () => void; + _handleDocumentClick: (e: MouseEvent | TouchEvent | KeyboardEvent) => 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$1 { + /** + * 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; + /** + * Autosubmit timepicker selection to input field + * @default true + */ + autoSubmit: true; + /** + * 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; + /** + * 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 when a time is selected. + * @default null + */ + onSelect: (hour: number, minute: number) => void; + /** + * Callback function for interaction with input field. + * @default null + */ + onInputInteraction: (() => void) | null; + /** + * Callback function for done. + * @default null + */ + onDone: (() => void) | null; + /** + * Callback function for cancel. + * @default null + */ + onCancel: (() => void) | null; +} +type Point = { + x: number; + y: number; +}; +declare class Timepicker extends Component { + el: HTMLInputElement; + id: string; + containerEl: HTMLElement; + plate: HTMLElement; + digitalClock: HTMLElement; + inputHours: HTMLInputElement; + inputMinutes: HTMLInputElement; + x0: number; + y0: number; + moved: boolean; + dx: number; + dy: number; + /** + * Current view on the timepicker. + * @default 'hours' + */ + currentView: Views; + hand: SVGElement; + minutesView: HTMLElement; + hours: number; + minutes: number; + /** The selected time. */ + time: string; + /** + * If the time is AM or PM on twelve-hour clock. + * @default 'PM' + */ + amOrPm: 'AM' | 'PM'; + static _template: any; + /** Vibrate device when dragging clock hand. */ + vibrate: 'vibrate' | 'webkitVibrate' | null; + _canvas: HTMLElement; + hoursView: HTMLElement; + spanAmPm: HTMLSpanElement; + footer: HTMLElement; + private _amBtn; + private _pmBtn; + bg: Element; + bearing: Element; + g: Element; + toggleViewTimer: string | number | NodeJS.Timeout; + vibrateTimer: NodeJS.Timeout | number; + 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): SVGElement; + 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; + _setupVariables(): void; + private _createButton; + _pickerSetup(): void; + _clockSetup(): void; + _buildSVGClock(): void; + _buildHoursView(): void; + _buildHoursTick(i: number, radian: number, radius: number): void; + _buildMinutesView(): void; + _handleAmPmClick: (e: MouseEvent) => void; + _handleAmPmKeypress: (e: KeyboardEvent) => void; + _handleAmPmInteraction: (e: HTMLElement) => 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'. + * @param delay + */ + 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; + setClockAttributes(radian: number, radius: number): void; + formatHours(): void; + formatMinutes(): void; + setHoursDefault(): void; + done: (clearValue?: any) => void; + confirm: () => void; + cancel: () => void; + clear: () => void; + open(): this; + close(): this; +} + +type TooltipPosition = 'top' | 'right' | 'bottom' | 'left'; +interface TooltipOptions extends BaseOptions$1 { + /** + * 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; +} + +interface 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(): BaseOptions; + /** + * 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; +} + +declare class Forms { + /** + * Checks if the label has validation and apply + * the correct class and styles + * @param textfield + */ + static validateField(textfield: HTMLInputElement): void; + /** + * Resizes the given TextArea after updating the + * value content dynamically. + * @param e EventTarget + */ + static textareaAutoResize(e: EventTarget): void; + static Init(): void; + static InitTextarea(textarea: HTMLTextAreaElement): void; + static InitFileInputPath(fileInput: HTMLInputElement): void; +} + +interface SliderOptions extends BaseOptions$1 { + /** + * 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 ToastOptions extends BaseOptions$1 { + /** + * 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 | number; + wasSwiped: boolean; + startingXPos: number; + xPos: number; + time: number; + deltaX: number; + velocityX: number; + static _toasts: Toast[]; + static _container: HTMLElement; + 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 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$1 { +} +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.2.1"; +interface AutoInitOptions { + Autocomplete?: Partial; + Cards?: Partial; + Carousel?: Partial; + Chips?: Partial; + Collapsible?: Partial; + Datepicker?: Partial; + Dropdown?: Partial; + Materialbox?: Partial; + Modal?: Partial; + Parallax?: Partial; + Pushpin?: Partial; + ScrollSpy?: Partial; + FormSelect?: Partial; + Sidenav?: Partial; + Tabs?: Partial; + TapTarget?: Partial; + Timepicker?: Partial; + Tooltip?: Partial; + FloatingActionButton?: Partial; +} +/** + * Automatically initialize components. + * @param context Root element to initialize. Defaults to `document.body`. + * @param options Options for each component. + */ +declare function AutoInit(context?: HTMLElement, options?: Partial): void; + +export { AutoInit, type AutoInitOptions, Autocomplete, Cards, Carousel, CharacterCounter, Chips, Collapsible, Datepicker, Dropdown, FloatingActionButton, FormSelect, Forms, 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..9ce7a51c63 --- /dev/null +++ b/dist/js/materialize.js @@ -0,0 +1,8009 @@ +/*! +* Materialize v2.2.1 (https://materializeweb.com) +* Copyright 2014-2025 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. + */ + /* eslint-disabled as of required event type condition check */ + /* eslint-disable-next-line */ + static docHandleFocus(e) { + if (Utils.keyDown) { + document.body.classList.add('keyboard-focused'); + } + } + /** + * Detects when document is not focused. + * @param e Event instance. + */ + /* eslint-disabled as of required event type condition check */ + /* eslint-disable-next-line */ + 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) { + const edges = { + top: false, + right: false, + bottom: false, + left: false + }; + const containerRect = container.getBoundingClientRect(); + // If body element is smaller than viewport, use viewport height instead. + const containerBottom = container === document.body + ? Math.max(containerRect.bottom, window.innerHeight) + : containerRect.bottom; + const scrollLeft = container.scrollLeft; + const scrollTop = container.scrollTop; + const scrolledX = bounding.left - scrollLeft; + const 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) { + const canAlign = { + top: true, + right: true, + bottom: true, + left: true, + spaceOnTop: null, + spaceOnRight: null, + spaceOnBottom: null, + spaceOnLeft: null + }; + const containerAllowsOverflow = getComputedStyle(container).overflow === 'visible'; + const containerRect = container.getBoundingClientRect(); + const containerHeight = Math.min(containerRect.height, window.innerHeight); + const containerWidth = Math.min(containerRect.width, window.innerWidth); + const elOffsetRect = el.getBoundingClientRect(); + const scrollLeft = container.scrollLeft; + const scrollTop = container.scrollTop; + const scrolledX = bounding.left - scrollLeft; + const scrolledYTopEdge = bounding.top - scrollTop; + const 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 = {}) { + let context, args, result, timeout = null, previous = 0; + const later = () => { + previous = options.leading === false ? 0 : new Date().getTime(); + timeout = null; + result = func.apply(context, args); + context = args = null; + }; + return (...args) => { + const now = new Date().getTime(); + if (!previous && options.leading === false) + previous = now; + const remaining = wait - (now - previous); + context = this; + 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; + }; + } + /** + * Renders confirm/close buttons with callback function + */ + static createConfirmationContainer(container, confirmText, cancelText, onConfirm, onCancel) { + const confirmationButtonsContainer = document.createElement('div'); + confirmationButtonsContainer.classList.add('confirmation-btns'); + container.append(confirmationButtonsContainer); + this.createButton(confirmationButtonsContainer, cancelText, ['btn-cancel'], true, onCancel); + this.createButton(confirmationButtonsContainer, confirmText, ['btn-confirm'], true, onConfirm); + } + /** + * Renders a button with optional callback function + */ + static createButton(container, text, className = [], visibility = true, callback = null) { + className = className.concat(['btn', 'waves-effect', 'text']); + const button = document.createElement('button'); + button.className = className.join(' '); + button.style.visibility = visibility ? 'visible' : 'hidden'; + button.type = 'button'; + button.tabIndex = !!visibility ? 0 : -1; + button.innerText = text; + button.addEventListener('click', callback); + button.addEventListener('keypress', (e) => { + if (Utils.keys.ENTER.includes(e.key)) + callback(e); + }); + container.append(button); + } + } + + /** + * 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 + const 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. + */ + // eslint-disable-next-line @typescript-eslint/no-unused-vars + 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$m = { + 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 = []; + this.el.ariaExpanded = 'false'; + // Move dropdown-content after dropdown-trigger + this._moveDropdown(); + this._makeDropdownFocusable(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$m; + } + /** + * 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(); + this._moveDropdown(e.target.closest('li')); + if (this.isOpen) { + this.close(); + } + else { + this.open(); + } + }; + _handleMouseEnter = (e) => { + this._moveDropdown(e.target.closest('li')); + 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) { + const arr = []; + let i; + 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) { + const opts = this.options, isMinYear = year === opts.minYear, isMaxYear = year === opts.maxYear; + let i, j, arr = [], html = '
', prev = true, next = true; + for (i = 0; i < 12; i++) { + arr.push(''); + } + const 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(); + const yearHtml = ``; + const 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; + } + const rightArrow = ''; + html += ``; + return (html += '
'); + } + // refresh HTML + draw() { + const opts = this.options, minYear = opts.minYear, maxYear = opts.maxYear, minMonth = opts.minMonth, maxMonth = opts.maxMonth; + let html = ''; + 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; + } + } + const randId = 'datepicker-title-' + + Math.random() + .toString(36) + .replace(/[^a-z]+/g, '') + .substr(0, 2); + for (let c = 0; c < 1; c++) { + if (!this.options.isDateRange) { + this._renderDateDisplay(this.date); + } + else { + this._renderDateDisplay(this.date, this.endDate); + } + 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 + const yearSelect = this.calendarEl.querySelector('.orig-select-year'); + const monthSelect = this.calendarEl.querySelector('.orig-select-month'); + // @todo fix accessibility @see https://github.com/materializecss/materialize/issues/522 + 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.setInputValues()); + 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.containerEl = template.content.firstChild; + this.calendarEl = this.containerEl.querySelector('.datepicker-calendar'); + this.yearTextEl = this.containerEl.querySelector('.year-text'); + this.dateTextEl = this.containerEl.querySelector('.date-text'); + if (this.options.showClearBtn) { + this.clearBtn = this.containerEl.querySelector('.datepicker-clear'); + } + // TODO: This should not be part of the datepicker + this.doneBtn = this.containerEl.querySelector('.datepicker-done'); + this.cancelBtn = this.containerEl.querySelector('.datepicker-cancel'); + this.formats = { + d: (date) => { + return date.getDate(); + }, + dd: (date) => { + const d = date.getDate(); + return (d < 10 ? '0' : '') + d; + }, + ddd: (date) => { + return this.options.i18n.weekdaysShort[date.getDay()]; + }, + dddd: (date) => { + return this.options.i18n.weekdays[date.getDay()]; + }, + m: (date) => { + return date.getMonth() + 1; + }, + mm: (date) => { + const m = date.getMonth() + 1; + return (m < 10 ? '0' : '') + m; + }, + mmm: (date) => { + return this.options.i18n.monthsShort[date.getMonth()]; + }, + mmmm: (date) => { + return this.options.i18n.months[date.getMonth()]; + }, + yy: (date) => { + return ('' + date.getFullYear()).slice(2); + }, + yyyy: (date) => { + return 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); + if (this.options.isDateRange) { + this.endDateEl.removeEventListener('click', this._handleInputClick); + this.endDateEl.removeEventListener('keypress', this._handleInputKeydown); + this.endDateEl.removeEventListener('change', this._handleInputChange); + } + } + _handleInputClick = (e) => { + // Prevents default browser datepicker modal rendering + if (e.type == 'date') { + e.preventDefault(); + } + this.setDateFromInput(e.target); + this.draw(); + this.gotoDate(e.target === this.el ? this.date : this.endDate); + if (this.options.onInputInteraction) + this.options.onInputInteraction.call(this); + }; + _handleInputKeydown = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + e.preventDefault(); + this.setDateFromInput(e.target); + this.draw(); + if (this.options.onInputInteraction) + this.options.onInputInteraction.call(this); + } + }; + _handleCalendarClick = (e) => { + 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')) { + const selectedDate = new Date(e.target.getAttribute('data-year'), e.target.getAttribute('data-month'), e.target.getAttribute('data-day')); + if (!this.multiple || (this.multiple && this.options.isMultipleSelection)) { + this.setDate(selectedDate); + } + if (this.options.isDateRange) { + this._handleDateRangeCalendarClick(selectedDate); + } + this._finishSelection(); + } + else if (target.closest('.month-prev')) { + this.prevMonth(); + } + else if (target.closest('.month-next')) { + this.nextMonth(); + } + } + }; + _handleDateRangeCalendarClick = (date) => { + if (this.endDate == null || !Datepicker._compareDates(date, this.endDate)) { + if (Datepicker._isDate(this.date) && Datepicker._comparePastDate(date, this.date)) { + return; + } + this.setDate(date, false, Datepicker._isDate(this.date)); + return; + } + this._clearDates(); + this.draw(); + }; + _handleClearClick = () => { + this._clearDates(); + this.setInputValues(); + }; + _clearDates = () => { + this.date = null; + this.endDate = null; + }; + _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; + const el = e.target; + // Prevent change event from being fired when triggered by the plugin + if (e['detail']?.firedBy === this) + return; + // Prevent change event from being fired if an end date is set without a start date + if (el == this.endDateEl && !this.date) + return; + if (this.options.parse) { + date = this.options.parse(e.target.value, typeof this.options.format === 'function' + ? this.options.format(new Date(this.el.value)) + : this.options.format); + } + else { + date = new Date(Date.parse(e.target.value)); + } + if (Datepicker._isDate(date)) { + this.setDate(date, false, el == this.endDateEl, true); + if (e.type == 'date') { + this.setDataDate(e, date); + this.setInputValues(); + } + } + }; + renderDayName(opts, day, abbr = false) { + day += opts.firstDay; + while (day >= 7) { + day -= 7; + } + return abbr ? opts.i18n.weekdaysAbbrev[day] : opts.i18n.weekdays[day]; + } + createDateInput() { + const dateInput = this.el.cloneNode(true); + dateInput.addEventListener('click', this._handleInputClick); + dateInput.addEventListener('keypress', this._handleInputKeydown); + dateInput.addEventListener('change', this._handleInputChange); + this.el.parentElement.appendChild(dateInput); + return dateInput; + } + // Set input value to the selected date and close Datepicker + _finishSelection = () => { + this.setInputValues(); + this.close(); + }; + // deprecated + open() { + console.warn('Datepicker.open() is deprecated. Remove this method and wrap in modal yourself.'); + return this; + } + close() { + console.warn('Datepicker.close() is deprecated. Remove this method and wrap in modal yourself.'); + return this; + } + static { + Datepicker._template = ` +
+
+ + +
+
+
+
+ +
+ + +
+
+
+
`; + } + } + + class Forms { + /** + * Checks if the label has validation and apply + * the correct class and styles + * @param textfield + */ + static validateField(textfield) { + if (!textfield) { + console.error('No text field element found'); + return; + } + const hasLength = textfield.getAttribute('data-length') !== null; + const lenAttr = parseInt(textfield.getAttribute('data-length')); + const len = textfield.value.length; + if (len === 0 && + textfield.validity.badInput === false && + !textfield.required && + textfield.classList.contains('validate')) { + textfield.classList.remove('invalid'); + } + else if (textfield.classList.contains('validate')) { + // Check for character counter attributes + if ((textfield.validity.valid && hasLength && len <= lenAttr) || + (textfield.validity.valid && !hasLength)) { + textfield.classList.remove('invalid'); + } + else { + textfield.classList.add('invalid'); + } + } + } + /** + * Resizes the given TextArea after updating the + * value content dynamically. + * @param e EventTarget + */ + static textareaAutoResize(e) { + const textarea = e; + // 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'; + hiddenDiv.innerHTML = hiddenDiv.innerHTML.replace(/\n/g, '
'); + // 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('change', (e) => { + const target = e.target; + if (target instanceof HTMLInputElement) { + if (target.value.length !== 0 || target.getAttribute('placeholder') !== null) { + for (const child of target.parentNode.children) { + if (child.tagName == 'label') { + child.classList.add('active'); + } + } + } + Forms.validateField(target); + } + }); + 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', () => 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(e.target)); + textarea.addEventListener('keydown', (e) => Forms.textareaAutoResize(e.target)); + } + static InitFileInputPath(fileInput) { + fileInput.addEventListener('change', () => { + 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$d = { + 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') || ''; + this.el.tabIndex = 0; + // Wrap + this.el.before(this.placeholder); + this.placeholder.append(this.el); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$d; + } + /** + * 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); + this.el.addEventListener('keypress', this._handleMaterialboxKeypress); + } + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleMaterialboxClick); + this.el.removeEventListener('keypress', this._handleMaterialboxKeypress); + } + _handleMaterialboxClick = () => { + this._handleMaterialboxToggle(); + }; + _handleMaterialboxKeypress = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + this._handleMaterialboxToggle(); + } + }; + _handleMaterialboxToggle = () => { + // 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.scrollY - docElem.clientTop, + left: box.left + window.scrollX - 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'); + if (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', () => { + 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(); + }; + } + + const _defaults$c = { + opacity: 0.5, + inDuration: 250, + outDuration: 250, + onOpenStart: null, + onOpenEnd: null, + onCloseStart: null, + onCloseEnd: null, + preventScrolling: true, + dismissible: true, + startingTop: '4%', + endingTop: '10%' + }; + class Modal extends Component { + constructor(el, options) { + super(el, options, Modal); + this.el['M_Modal'] = this; + this.options = { + ...Modal.defaults, + ...options + }; + this.el.tabIndex = 0; + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$c; + } + static init(els, options = {}) { + return super.init(els, options, Modal); + } + static getInstance(el) { + return el['M_Modal']; + } + destroy() { } + _setupEventHandlers() { } + _removeEventHandlers() { } + _handleTriggerClick() { } + _handleOverlayClick() { } + _handleModalCloseClick() { } + _handleKeydown() { } + _handleFocus() { } + open() { + return this; + } + close() { + return this; + } + // Experimental! + static #createHtml(config) { + return ` + ${config.header ? '
' + config.header + '
' : ''} +
+ ${config.content} +
+ ${config.header ? '
' + config.footer + '
' : ''} + `; + } + static #createHtmlElement(config) { + const dialog = document.createElement('dialog'); + dialog.id = config.id; + return dialog; + } + static create(config) { + return this.#createHtmlElement(config); + } + static { } + } + + const _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++) { + const parallaxInstance = Parallax._parallaxes[i]; + parallaxInstance._updateParallax.call(parallaxInstance); + } + } + static _handleWindowResize() { + for (let i = 0; i < Parallax._parallaxes.length; i++) { + const 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.scrollY - docElem.clientTop, + left: box.left + window.scrollX - docElem.clientLeft + }; + } + _updateParallax() { + const containerHeight = this.el.getBoundingClientRect().height > 0 ? this.el.parentElement.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)`; + } + } + } + + const _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 + const 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 (const elIndex in Pushpin._pushpins) { + const pInstance = Pushpin._pushpins[elIndex]; + pInstance._updatePosition(); + } + } + _setupEventHandlers() { + document.addEventListener('scroll', Pushpin._updateElements); + } + _removeEventHandlers() { + document.removeEventListener('scroll', Pushpin._updateElements); + } + _updatePosition() { + const 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 = []; + } + } + + const _defaults$9 = { + throttle: 100, + scrollOffset: 200, // offset - 200 allows elements near bottom of page to scroll + activeClass: 'active', + getActiveElement: (id) => { + return 'a[href="#' + id + '"]'; + }, + keepTopElementActive: false, + animationDuration: null + }; + class ScrollSpy extends Component { + static _elements; + static _count; + static _increment; + static _elementsInView; + static _visibleElements; + static _ticks; + static _keptTopActiveElement = null; + tickId; + id; + 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.toString(); + 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(); + if (scrollspy.el['M_ScrollSpy'].options.animationDuration) { + ScrollSpy._smoothScrollIntoView(scrollspy.el, scrollspy.el['M_ScrollSpy'].options.animationDuration); + } + else { + scrollspy.el.scrollIntoView({ behavior: 'smooth' }); + } + break; + } + } + }; + _handleWindowScroll = () => { + // unique tick id + ScrollSpy._ticks++; + // viewport rectangle + const top = Utils.getDocumentScrollTop(), left = Utils.getDocumentScrollLeft(), right = left + window.innerWidth, bottom = top + window.innerHeight; + // determine which elements are in view + const intersections = ScrollSpy._findElements(top, right, bottom, left); + for (let i = 0; i < intersections.length; i++) { + const scrollspy = intersections[i]; + const 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++) { + const scrollspy = ScrollSpy._elementsInView[i]; + const 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; + if (ScrollSpy._elements.length) { + const options = ScrollSpy._elements[0].el['M_ScrollSpy'].options; + if (options.keepTopElementActive && ScrollSpy._visibleElements.length === 0) { + this._resetKeptTopActiveElementIfNeeded(); + const topElements = ScrollSpy._elements + .filter((value) => ScrollSpy._getDistanceToViewport(value.el) <= 0) + .sort((a, b) => { + const distanceA = ScrollSpy._getDistanceToViewport(a.el); + const distanceB = ScrollSpy._getDistanceToViewport(b.el); + if (distanceA < distanceB) + return -1; + if (distanceA > distanceB) + return 1; + return 0; + }); + const nearestTopElement = topElements.length + ? topElements[topElements.length - 1] + : ScrollSpy._elements[0]; + const actElem = document.querySelector(options.getActiveElement(nearestTopElement.el.id)); + actElem?.classList.add(options.activeClass); + ScrollSpy._keptTopActiveElement = actElem; + } + } + }; + 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) { + const hits = []; + for (let i = 0; i < ScrollSpy._elements.length; i++) { + const scrollspy = ScrollSpy._elements[i]; + const currTop = top + scrollspy.options.scrollOffset || 200; + if (scrollspy.el.getBoundingClientRect().height > 0) { + const elTop = ScrollSpy._offset(scrollspy.el).top, elLeft = ScrollSpy._offset(scrollspy.el).left, elRight = elLeft + scrollspy.el.getBoundingClientRect().width, elBottom = elTop + scrollspy.el.getBoundingClientRect().height; + const 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); + } + this._resetKeptTopActiveElementIfNeeded(); + 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); + this._resetKeptTopActiveElementIfNeeded(); + } + } + } + _resetKeptTopActiveElementIfNeeded() { + if (ScrollSpy._keptTopActiveElement) { + ScrollSpy._keptTopActiveElement.classList.remove(this.options.activeClass); + ScrollSpy._keptTopActiveElement = null; + } + } + static _getDistanceToViewport(element) { + const rect = element.getBoundingClientRect(); + const distance = rect.top; + return distance; + } + static _smoothScrollIntoView(element, duration = 300) { + const targetPosition = element.getBoundingClientRect().top + (window.scrollY || window.pageYOffset); + const startPosition = window.scrollY || window.pageYOffset; + const distance = targetPosition - startPosition; + const startTime = performance.now(); + function scrollStep(currentTime) { + const elapsed = currentTime - startTime; + const progress = Math.min(elapsed / duration, 1); + const scrollY = startPosition + distance * progress; + if (progress < 1) { + window.scrollTo(0, scrollY); + requestAnimationFrame(scrollStep); + } + else { + window.scrollTo(0, targetPosition); + } + } + requestAnimationFrame(scrollStep); + } + 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); + } + const 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); + } + /* Set aria-hidden state */ + this._setAriaHidden(); + this._setTabIndex(); + } + _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(); + } + 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._isDraggable()) + return; + let totalDeltaX = this._calculateDelta(e); + 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) => { + // Check if open and draggable + if (!this.isOpen || !this._isDraggable()) + return; + let totalDeltaX = this._calculateDelta(e); + // dragDirection is the attempted user drag direction + const dragDirection = totalDeltaX > 0 ? 'right' : 'left'; + 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(); + }; + _calculateDelta = (e) => { + // If not being dragged, set initial drag start variables + if (!this.isDragged) { + this._startDrag(e); + } + // Run touchmove updates + this._dragMoveUpdate(e); + // Calculate raw deltaX + return this._xPos - this._startingXpos; + }; + _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(); + } + _isDraggable() { + return this.options.draggable && !this._isCurrentlyFixed() && !this._verticallyScrolling; + } + _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(); + /* Set aria-hidden state */ + this._setAriaHidden(); + this._setTabIndex(); + } + }; + /** + * 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'; + } + /* Set aria-hidden state */ + this._setAriaHidden(); + this._setTabIndex(); + } + }; + _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; + // let slideOutPercent = 0; + // if (this.isDragged) { + // // @todo unused variable + // slideOutPercent = + // 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); + } + _setAriaHidden = () => { + this.el.ariaHidden = this.isOpen ? 'false' : 'true'; + const navWrapper = document.querySelector('.nav-wrapper ul'); + if (navWrapper) + navWrapper.ariaHidden = this.isOpen.toString(); + }; + _setTabIndex = () => { + const navLinks = document.querySelectorAll('.nav-wrapper ul li a'); + const sideNavLinks = document.querySelectorAll('.sidenav li a'); + if (navLinks) + navLinks.forEach((navLink) => { + navLink.tabIndex = this.isOpen ? -1 : 0; + }); + if (sideNavLinks) + sideNavLinks.forEach((sideNavLink) => { + sideNavLink.tabIndex = this.isOpen ? 0 : -1; + }); + }; + static { + Sidenav._sidenavs = []; + } + } + + const _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) => { + let tabLink = e.target; + if (!tabLink) + return; + let tab = tabLink.parentElement; + while (tab && !tab.classList.contains('tab')) { + tabLink = tabLink.parentElement; + tab = tab.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) { + let activeTabLink = this.el.querySelector('li.tab a.active'); + if (!activeTabLink) { + activeTabLink = this.el.querySelector('li.tab a'); + } + this._activeTabLink = activeTabLink; + } + 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.append(tabsWrapper.parentElement); + 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(); + } + } + + const _defaults$6 = { + onOpen: null, + onClose: null + }; + class TapTarget extends Component { + /** + * If the tap target is open. + */ + isOpen; + static _taptargets; + wrapper; + // private _origin: HTMLElement; + 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.originEl = document.querySelector(`#${el.dataset.target}`); + this.originEl.tabIndex = 0; + this._setup(); + this._calculatePositioning(); + this._setupEventHandlers(); + TapTarget._taptargets.push(this); + } + 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['M_TapTarget'] = undefined; + const index = TapTarget._taptargets.indexOf(this); + if (index >= 0) { + TapTarget._taptargets.splice(index, 1); + } + } + _setupEventHandlers() { + this.originEl.addEventListener('click', this._handleTargetToggle); + this.originEl.addEventListener('keypress', this._handleKeyboardInteraction, true); + // this.originEl.addEventListener('click', this._handleOriginClick); + // Resize + window.addEventListener('resize', this._handleThrottledResize); + } + _removeEventHandlers() { + this.originEl.removeEventListener('click', this._handleTargetToggle); + this.originEl.removeEventListener('keypress', this._handleKeyboardInteraction, true); + // this.originEl.removeEventListener('click', this._handleOriginClick); + window.removeEventListener('resize', this._handleThrottledResize); + } + _handleThrottledResize = Utils.throttle(function () { + this._handleResize(); + }, 200).bind(this); + _handleKeyboardInteraction = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + this._handleTargetToggle(); + } + }; + _handleTargetToggle = () => { + if (!this.isOpen) + this.open(); + else + this.close(); + }; + /*_handleOriginClick = () => { + this.close(); + }*/ + _handleResize = () => { + this._calculatePositioning(); + }; + _handleDocumentClick = (e) => { + if (e.target.closest(`#${this.el.dataset.target}`) !== this.originEl && + !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.el.parentElement.ariaExpanded = 'false'; + this.originEl.style.zIndex = '1002'; + // 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.originEl).position === 'fixed'; + if (!isFixed) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + let currentElem = this.originEl; + 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.originEl.offsetWidth; + const originHeight = this.originEl.offsetHeight; + const originTop = isFixed + ? this._offset(this.originEl).top - Utils.getDocumentScrollTop() + : this._offset(this.originEl).top; + const originLeft = isFixed + ? this._offset(this.originEl).left - Utils.getDocumentScrollLeft() + : this._offset(this.originEl).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.originEl); + } + this.isOpen = true; + this.wrapper.classList.add('open'); + this.wrapper.ariaExpanded = 'true'; + document.body.addEventListener('click', this._handleDocumentClick, true); + document.body.addEventListener('keypress', 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.originEl); + } + this.isOpen = false; + this.wrapper.classList.remove('open'); + this.wrapper.ariaExpanded = 'false'; + document.body.removeEventListener('click', this._handleDocumentClick, true); + document.body.removeEventListener('keypress', this._handleDocumentClick, true); + document.body.removeEventListener('touchend', this._handleDocumentClick); + }; + static { + TapTarget._taptargets = []; + } + } + + const _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, + autoSubmit: true, + // internationalization + i18n: { + cancel: 'Cancel', + clear: 'Clear', + done: 'Ok' + }, + twelveHour: true, // change to 12 hour AM/PM clock from 24 hour + vibrate: true, // vibrate the device when dragging clock hand + // Callbacks + onSelect: null, + onInputInteraction: null, + onDone: null, + onCancel: null, + }; + class Timepicker extends Component { + id; + containerEl; + 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; + /** Vibrate device when dragging clock hand. */ + vibrate; + _canvas; + hoursView; + spanAmPm; + footer; + _amBtn; + _pmBtn; + bg; + bearing; + g; + toggleViewTimer; + 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._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) { + const 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.containerEl.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('focus', () => this.showView('hours')); + this.inputHours.addEventListener('focusout', () => this.formatHours()); + this.inputMinutes.addEventListener('focus', () => this.showView('minutes')); + this.inputMinutes.addEventListener('focusout', () => this.formatMinutes()); + } + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleInputClick); + this.el.removeEventListener('keydown', this._handleInputKeydown); + } + _handleInputClick = () => { + this.inputHours.focus(); + if (typeof this.options.onInputInteraction === 'function') + this.options.onInputInteraction.call(this); + }; + _handleInputKeydown = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + e.preventDefault(); + this.inputHours.focus(); + if (typeof this.options.onInputInteraction === 'function') + this.options.onInputInteraction.call(this); + } + }; + _handleTimeInputEnterKey = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + e.preventDefault(); + this._inputFromTextField(); + } + }; + _handleClockClickStart = (e) => { + e.preventDefault(); + const clockPlateBR = this.plate.getBoundingClientRect(); + const offset = { x: clockPlateBR.left, y: clockPlateBR.top }; + this.x0 = offset.x + this.options.dialRadius; + this.y0 = offset.y + this.options.dialRadius; + this.moved = false; + const 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(); + const clickPos = Timepicker._Pos(e); + const x = clickPos.x - this.x0; + const 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); + const clickPos = Timepicker._Pos(e); + const x = clickPos.x - this.x0; + const y = clickPos.y - this.y0; + if (this.moved && x === this.dx && y === this.dy) { + this.setHand(x, y); + } + if (this.currentView === 'hours') { + this.inputMinutes.focus(); + this.showView('minutes', this.options.duration / 2); + } + else { + // this.minutesView.classList.add('timepicker-dial-out'); + setTimeout(() => { + if (this.options.autoSubmit) + 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.containerEl = template.content.firstChild; + this.containerEl.id = 'container-' + 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.containerEl); + } + else { + this.el.parentElement.appendChild(this.containerEl); + } + } + _setupVariables() { + this.currentView = 'hours'; + this.vibrate = navigator.vibrate + ? 'vibrate' + : navigator['webkitVibrate'] + ? 'webkitVibrate' + : null; + this._canvas = this.containerEl.querySelector('.timepicker-canvas'); + this.plate = this.containerEl.querySelector('.timepicker-plate'); + this.digitalClock = this.containerEl.querySelector('.timepicker-display-column'); + this.hoursView = this.containerEl.querySelector('.timepicker-hours'); + this.minutesView = this.containerEl.querySelector('.timepicker-minutes'); + this.inputHours = this.containerEl.querySelector('.timepicker-input-hours'); + this.inputMinutes = this.containerEl.querySelector('.timepicker-input-minutes'); + this.spanAmPm = this.containerEl.querySelector('.timepicker-span-am-pm'); + this.footer = this.containerEl.querySelector('.timepicker-footer'); + this.amOrPm = 'PM'; + } + _createButton(text, visibility) { + const button = document.createElement('button'); + button.classList.add('btn', 'btn-flat', 'waves-effect', 'text'); + button.style.visibility = visibility; + button.type = 'button'; + button.tabIndex = -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); + if (!this.options.autoSubmit) { + 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); + } + this._updateTimeFromInput(); + this.showView('hours'); + } + _clockSetup() { + if (this.options.twelveHour) { + // AM Button + this._amBtn = document.createElement('div'); + this._amBtn.classList.add('am-btn', 'btn'); + this._amBtn.innerText = 'AM'; + this._amBtn.tabIndex = 0; + this._amBtn.addEventListener('click', this._handleAmPmClick); + this._amBtn.addEventListener('keypress', this._handleAmPmKeypress); + this.spanAmPm.appendChild(this._amBtn); + // PM Button + this._pmBtn = document.createElement('div'); + this._pmBtn.classList.add('pm-btn', 'btn'); + this._pmBtn.innerText = 'PM'; + this._pmBtn.tabIndex = 0; + this._pmBtn.addEventListener('click', this._handleAmPmClick); + this._pmBtn.addEventListener('keypress', this._handleAmPmKeypress); + this.spanAmPm.appendChild(this._pmBtn); + } + this._buildHoursView(); + this._buildMinutesView(); + this._buildSVGClock(); + } + _buildSVGClock() { + // Draw clock hands and others + const dialRadius = this.options.dialRadius; + const tickRadius = this.options.tickRadius; + const diameter = dialRadius * 2; + const svg = Timepicker._createSVGEl('svg'); + svg.setAttribute('class', 'timepicker-svg'); + svg.setAttribute('width', diameter.toString()); + svg.setAttribute('height', diameter.toString()); + const g = Timepicker._createSVGEl('g'); + g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')'); + const bearing = Timepicker._createSVGEl('circle'); + bearing.setAttribute('class', 'timepicker-canvas-bearing'); + bearing.setAttribute('cx', '0'); + bearing.setAttribute('cy', '0'); + bearing.setAttribute('r', '4'); + const hand = Timepicker._createSVGEl('line'); + hand.setAttribute('x1', '0'); + hand.setAttribute('y1', '0'); + const 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; + this._buildHoursTick(i, radian, radius); + } + } + 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; + this._buildHoursTick(i, radian, radius); + } + } + } + _buildHoursTick(i, radian, radius) { + const tick = document.createElement('div'); + tick.classList.add('timepicker-tick'); + 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); + } + _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) => { + this._handleAmPmInteraction(e.target); + }; + _handleAmPmKeypress = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + this._handleAmPmInteraction(e.target); + } + }; + _handleAmPmInteraction = (e) => { + this.amOrPm = e.classList.contains('am-btn') ? 'AM' : 'PM'; + this._updateAmPmView(); + }; + _updateAmPmView() { + if (this.options.twelveHour) { + if (this.amOrPm === 'PM') { + this._amBtn.classList.remove('filled'); + this._pmBtn.classList.add('filled'); + } + else if (this.amOrPm === 'AM') { + this._amBtn.classList.add('filled'); + this._pmBtn.classList.remove('filled'); + } + } + } + _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') { + const 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 = Timepicker._addLeadingZero(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'. + * @param delay + */ + showView = (view, delay = null) => { + if (view === 'minutes' && getComputedStyle(this.hoursView).visibility === 'visible') ; + const 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) { + const 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; + if (delay) { + this._canvas?.classList.add('timepicker-canvas-out'); + setTimeout(() => { + this._canvas?.classList.remove('timepicker-canvas-out'); + this.setHand(x, y); + }, delay); + } + else { + this.setHand(x, y); + } + } + _inputFromTextField = () => { + const isHours = this.currentView === 'hours'; + if (isHours && this.inputHours.value !== '') { + const value = parseInt(this.inputHours.value); + if (value > 0 && value < (this.options.twelveHour ? 13 : 24)) { + this.hours = value; + } + else { + this.setHoursDefault(); + } + this.drawClockFromTimeInput(this.hours, isHours); + } + else if (!isHours && this.inputMinutes.value !== '') { + const value = parseInt(this.inputMinutes.value); + if (value >= 0 && value < 60) { + this.minutes = value; + } + else { + this.minutes = new Date().getMinutes(); + this.inputMinutes.value = this.minutes.toString(); + } + this.drawClockFromTimeInput(this.minutes, isHours); + } + }; + drawClockFromTimeInput(value, isHours) { + const unit = Math.PI / (isHours ? 6 : 30); + const radian = value * unit; + let radius; + if (this.options.twelveHour) { + radius = this.options.outerRadius; + } + else { + radius = + isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius; + } + this.setClockAttributes(radian, radius); + } + setHand(x, y, roundBy5 = false) { + const 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; + let radian = Math.atan2(x, -y), 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 = Timepicker._addLeadingZero(value); + } + else { + this.inputMinutes.value = Timepicker._addLeadingZero(value); + } + // Set clock hand and others' position + this.setClockAttributes(radian, radius); + } + setClockAttributes(radian, radius) { + const 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()); + } + formatHours() { + if (this.inputHours.value == '') + this.setHoursDefault(); + this.inputHours.value = Timepicker._addLeadingZero(Number(this.inputHours.value)); + } + formatMinutes() { + if (this.inputMinutes.value == '') + this.minutes = new Date().getMinutes(); + this.inputMinutes.value = Timepicker._addLeadingZero(Number(this.inputMinutes.value)); + } + setHoursDefault() { + this.hours = new Date().getHours(); + this.inputHours.value = (this.hours % (this.options.twelveHour ? 12 : 24)).toString(); + } + done = (clearValue = null) => { + // Set input value + const 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 })); + } + }; + confirm = () => { + this.done(); + if (typeof this.options.onDone === 'function') { + setTimeout(() => { + this.options.onDone.call(this); + }, this.options.duration / 2); + } + }; + cancel = () => { + this.clear(); + if (typeof this.options.onDone === 'function') + this.options.onCancel.call(this); + }; + clear = () => { + this.done(true); + }; + // deprecated + open() { + console.warn('Timepicker.close() is deprecated. Remove this method and wrap in modal yourself.'); + return this; + } + close() { + console.warn('Timepicker.close() is deprecated. Remove this method and wrap in modal yourself.'); + return this; + } + static { + Timepicker._template = `
+
+
+
+
+ +
+
+ : +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`; + } + } + + const _defaults$4 = { + exitDelay: 200, + enterDelay: 0, + text: '', + margin: 5, + inDuration: 250, + outDuration: 200, + position: 'bottom', + transitionMovement: 10, + opacity: 1 + }; + class Tooltip extends Component { + /** + * If tooltip is open. + */ + isOpen; + /** + * If tooltip is hovered. + */ + isHovered; + /** + * If tooltip is focused. + */ + isFocused; + tooltipEl; + _exitDelayTimeout; + _enterDelayTimeout; + xMovement; + yMovement; + constructor(el, options) { + super(el, options, Tooltip); + this.el['M_Tooltip'] = this; + this.options = { + ...Tooltip.defaults, + ...this._getAttributeOptions(), + ...options + }; + this.isOpen = false; + this.isHovered = false; + this.isFocused = false; + this._appendTooltipEl(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$4; + } + /** + * Initializes instances of Tooltip. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Tooltip); + } + static getInstance(el) { + return el['M_Tooltip']; + } + destroy() { + this.tooltipEl.remove(); + this._removeEventHandlers(); + this.el['M_Tooltip'] = undefined; + } + _appendTooltipEl() { + this.tooltipEl = document.createElement('div'); + this.tooltipEl.classList.add('material-tooltip'); + const tooltipContentEl = this.options.tooltipId + ? document.getElementById(this.options.tooltipId) + : document.createElement('div'); + this.tooltipEl.append(tooltipContentEl); + tooltipContentEl.style.display = ''; + tooltipContentEl.classList.add('tooltip-content'); + this._setTooltipContent(tooltipContentEl); + this.tooltipEl.appendChild(tooltipContentEl); + document.body.appendChild(this.tooltipEl); + } + _setTooltipContent(tooltipContentEl) { + if (this.options.tooltipId) + return; + tooltipContentEl.innerText = this.options.text; + } + _updateTooltipContent() { + this._setTooltipContent(this.tooltipEl.querySelector('.tooltip-content')); + } + _setupEventHandlers() { + this.el.addEventListener('mouseenter', this._handleMouseEnter); + this.el.addEventListener('mouseleave', this._handleMouseLeave); + this.el.addEventListener('focus', this._handleFocus, true); + this.el.addEventListener('blur', this._handleBlur, true); + } + _removeEventHandlers() { + this.el.removeEventListener('mouseenter', this._handleMouseEnter); + this.el.removeEventListener('mouseleave', this._handleMouseLeave); + this.el.removeEventListener('focus', this._handleFocus, true); + this.el.removeEventListener('blur', this._handleBlur, true); + } + /** + * Show tooltip. + */ + open = (isManual) => { + 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() { + const 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 = () => { + const 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'); + } + } + } + + const _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); + }; + } + + const _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); + const 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) { + const toast = Toast._draggedToast; + toast.panning = false; + toast.el.classList.remove('panning'); + const totalDeltaX = toast.xPos - toast.startingXPos; + const activationDistance = toast.el.offsetWidth * toast.options.activationPercent; + const 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 (const 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() { + clearInterval(this.counterInterval); + const 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; + } + } + + /* eslint-disable @typescript-eslint/no-unused-vars */ + const version = '2.2.1'; + /** + * Automatically initialize components. + * @param context Root element to initialize. Defaults to `document.body`. + * @param options Options for each component. + */ + function AutoInit(context = document.body, options) { + const registry = { + Autocomplete: context.querySelectorAll('.autocomplete:not(.no-autoinit)'), + Cards: context.querySelectorAll('.cards: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, options?.Autocomplete ?? {}); + Cards.init(registry.Cards, options?.Cards ?? {}); + Carousel.init(registry.Carousel, options?.Carousel ?? {}); + Chips.init(registry.Chips, options?.Chips ?? {}); + Collapsible.init(registry.Collapsible, options?.Collapsible ?? {}); + Datepicker.init(registry.Datepicker, options?.Datepicker ?? {}); + Dropdown.init(registry.Dropdown, options?.Dropdown ?? {}); + Materialbox.init(registry.Materialbox, options?.Materialbox ?? {}); + Modal.init(registry.Modal, options?.Modal ?? {}); + Parallax.init(registry.Parallax, options?.Parallax ?? {}); + Pushpin.init(registry.Pushpin, options?.Pushpin ?? {}); + ScrollSpy.init(registry.ScrollSpy, options?.ScrollSpy ?? {}); + FormSelect.init(registry.FormSelect, options?.FormSelect ?? {}); + Sidenav.init(registry.Sidenav, options?.Sidenav ?? {}); + Tabs.init(registry.Tabs, options?.Tabs ?? {}); + TapTarget.init(registry.TapTarget, options?.TapTarget ?? {}); + Timepicker.init(registry.Timepicker, options?.Timepicker ?? {}); + Tooltip.init(registry.Tooltip, options?.Tooltip ?? {}); + FloatingActionButton.init(registry.FloatingActionButton, options?.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); + } + Forms.Init(); + Chips.Init(); + Waves.Init(); + Range.Init(); + + exports.AutoInit = AutoInit; + exports.Autocomplete = Autocomplete; + 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.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..10658be42d --- /dev/null +++ b/dist/js/materialize.min.js @@ -0,0 +1,6 @@ +/*! +* Materialize v2.2.1 (https://materializeweb.com) +* Copyright 2014-2025 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){const s={top:!1,right:!1,bottom:!1,left:!1},n=t.getBoundingClientRect(),o=t===document.body?Math.max(n.bottom,window.innerHeight):n.bottom,a=t.scrollLeft,l=t.scrollTop,r=e.left-a,h=e.top-l;return(rn.right-i||r+e.width>window.innerWidth-i)&&(s.right=!0),(ho-i||h+e.height>window.innerHeight-i)&&(s.bottom=!0),s}static checkPossibleAlignments(t,e,i,s){const n={top:!0,right:!0,bottom:!0,left:!0,spaceOnTop:null,spaceOnRight:null,spaceOnBottom:null,spaceOnLeft:null},o="visible"===getComputedStyle(e).overflow,a=e.getBoundingClientRect(),l=Math.min(a.height,window.innerHeight),r=Math.min(a.width,window.innerWidth),h=t.getBoundingClientRect(),d=e.scrollLeft,c=e.scrollTop,p=i.left-d,u=i.top-c,m=i.top+h.height-c;return n.spaceOnRight=o?window.innerWidth-(h.left+i.width):r-(p+i.width),n.spaceOnRight<0&&(n.left=!1),n.spaceOnLeft=o?h.right-i.width:p-i.width+h.width,n.spaceOnLeft<0&&(n.right=!1),n.spaceOnBottom=o?window.innerHeight-(h.top+i.height+s):l-(u+i.height+s),n.spaceOnBottom<0&&(n.top=!1),n.spaceOnTop=o?h.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={}){let s,n,o,a=null,l=0;const r=()=>{l=!1===i.leading?0:(new Date).getTime(),a=null,o=t.apply(s,n),s=n=null};return(...n)=>{const h=(new Date).getTime();l||!1!==i.leading||(l=h);const d=e-(h-l);return s=this,d<=0?(clearTimeout(a),a=null,l=h,o=t.apply(s,n),s=n=null):a||!1===i.trailing||(a=setTimeout(r,d)),o}}static createConfirmationContainer(t,e,i,s,n){const o=document.createElement("div");o.classList.add("confirmation-btns"),t.append(o),this.createButton(o,i,["btn-cancel"],!0,n),this.createButton(o,e,["btn-confirm"],!0,s)}static createButton(t,i,s=[],n=!0,o=null){s=s.concat(["btn","waves-effect","text"]);const a=document.createElement("button");a.className=s.join(" "),a.style.visibility=n?"visible":"hidden",a.type="button",a.tabIndex=n?0:-1,a.innerText=i,a.addEventListener("click",o),a.addEventListener("keypress",(t=>{e.keys.ENTER.includes(t.key)&&o(t)})),t.append(a)}}class i{el;options;constructor(t,e,i){t instanceof HTMLElement||console.error(Error(t+" is not an HTML Element"));const 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._moveDropdown(t.target.closest("li")),this.isOpen?this.close():this.open()};_handleMouseEnter=t=>{this._moveDropdown(t.target.closest("li")),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=()=>{this.el.offsetParent&&this.recalculateDimensions()};_resetFilterQuery=()=>{this.filterQuery=[]};_resetDropdownStyles(){this.dropdownEl.style.display="",this._resetDropdownPositioningStyles(),this.dropdownEl.style.transform="",this.dropdownEl.style.opacity=""}_resetDropdownPositioningStyles(){this.dropdownEl.style.width="",this.dropdownEl.style.height="",this.dropdownEl.style.left="",this.dropdownEl.style.top="",this.dropdownEl.style.transformOrigin=""}_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.focusedIndexh.spaceOnBottom?(d="bottom",n+=h.spaceOnTop,l-=this.options.coverTrigger?h.spaceOnTop-20:h.spaceOnTop-20+i.height):n+=h.spaceOnBottom)),!h[c]){const t="left"===c?"right":"left";h[t]?c=t:h.spaceOnLeft>h.spaceOnRight?(c="right",o+=h.spaceOnLeft,a-=h.spaceOnLeft):(c="left",o+=h.spaceOnRight)}return"bottom"===d&&(l=l-s.height+(this.options.coverTrigger?i.height:0)),"right"===c&&(a=a-s.width+i.width),{x:a,y:l,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),this.el.ariaExpanded="true")};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(),this.el.ariaExpanded="false")};recalculateDimensions=()=>{this.isOpen&&(this._resetDropdownPositioningStyles(),this._placeDropdown())}}const 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 a extends i{isOpen;count;activeIndex;oldVal;$active;_mousedown;container;dropdown;static _keydown;selectedValues;menuItems;constructor(t,e){super(t,e,a),this.el.M_Autocomplete=this,this.options={...a.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,a)}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._handleInputKeyup),this.el.addEventListener("focus",this._handleInputFocus),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._handleInputKeyup),this.el.removeEventListener("focus",this._handleInputFocus),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);const t={...a.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())};_handleInputKeyup=t=>{"keyup"===t.type&&(a._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&&this.open(),this._inputChangeDetection(i))};_handleInputFocus=()=>{this.count=0;const t=this.el.value.toLocaleLowerCase();this._inputChangeDetection(t)};_inputChangeDetection=t=>{this.oldVal!==t&&(this._setStatusLoading(),this.options.onSearch(this.el.value,this)),this.options.isMultiSelect||0!==this.el.value.length||(this.selectedValues=[],this._triggerChanged()),this.oldVal=t};_handleInputKeydown=t=>{a._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()}}}const l={direction:"top",hoverEnabled:!0,toolbarEnabled:!1};class r extends i{isOpen;_anchor;_menu;_floatingBtns;_floatingBtnsReverse;offsetY;offsetX;btnBottom;btnLeft;btnWidth;constructor(t,e){super(t,e,r),this.el.M_FloatingActionButton=this,this.options={...r.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 l}static init(t,e={}){return super.init(t,e,r)}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(){const t=window.innerWidth,e=window.innerHeight,i=this.el.getBoundingClientRect(),s=document.createElement("div"),n=t/s[0].clientWidth,o=getComputedStyle(this._anchor).backgroundColor;s.classList.add("fab-backdrop"),s.style.backgroundColor=o,this._anchor.append(s),this.offsetX=i.left-t/2+i.width/2,this.offsetY=e-i.bottom,this.btnBottom=i.bottom,this.btnLeft=i.left,this.btnWidth=i.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",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,s.style.transform="scale("+n+")",s.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)}}const h={onOpen:null,onClose:null,inDuration:225,outDuration:300};class d extends i{isOpen=!1;cardReveal;initialOverflow;_activators;cardRevealClose;constructor(t,e){super(t,e,d),this.el.M_Cards=this,this.options={...d.defaults,...e},this.cardReveal=this.el.querySelector(".card-reveal"),this.cardReveal&&(this.initialOverflow=getComputedStyle(this.el).overflow,this._activators=Array.from(this.el.querySelectorAll(".activator")),this._activators.forEach((t=>{t&&(t.tabIndex=0)})),this.cardRevealClose=this.cardReveal?.querySelector(".card-title"),this.cardRevealClose&&(this.cardRevealClose.tabIndex=-1),this.cardReveal.ariaExpanded="false",this._setupEventHandlers())}static get defaults(){return h}static init(t,e){return super.init(t,e,d)}static getInstance(t){return t.M_Cards}destroy(){this._removeEventHandlers(),this._activators=[]}_setupEventHandlers=()=>{this._activators.forEach((t=>{t.addEventListener("click",this._handleClickInteraction),t.addEventListener("keypress",this._handleKeypressEvent)}))};_removeEventHandlers=()=>{this._activators.forEach((t=>{t.removeEventListener("click",this._handleClickInteraction),t.removeEventListener("keypress",this._handleKeypressEvent)}))};_handleClickInteraction=()=>{this._handleRevealEvent()};_handleKeypressEvent=t=>{e.keys.ENTER.includes(t.key)&&this._handleRevealEvent()};_handleRevealEvent=()=>{this._activators.forEach((t=>t.tabIndex=-1)),this.open()};_setupRevealCloseEventHandlers=()=>{this.cardRevealClose.addEventListener("click",this.close),this.cardRevealClose.addEventListener("keypress",this._handleKeypressCloseEvent)};_removeRevealCloseEventHandlers=()=>{this.cardRevealClose.addEventListener("click",this.close),this.cardRevealClose.addEventListener("keypress",this._handleKeypressCloseEvent)};_handleKeypressCloseEvent=t=>{e.keys.ENTER.includes(t.key)&&this.close()};open=()=>{this.isOpen||(this.isOpen=!0,this.el.style.overflow="hidden",this.cardReveal.style.display="block",this.cardReveal.ariaExpanded="true",this.cardRevealClose.tabIndex=0,setTimeout((()=>{this.cardReveal.style.transition=`transform ${this.options.outDuration}ms ease`,this.cardReveal.style.transform="translateY(-100%)"}),1),"function"==typeof this.options.onOpen&&this.options.onOpen.call(this),this._setupRevealCloseEventHandlers())};close=()=>{this.isOpen&&(this.isOpen=!1,this.cardReveal.style.transition=`transform ${this.options.inDuration}ms ease`,this.cardReveal.style.transform="translateY(0)",setTimeout((()=>{this.cardReveal.style.display="none",this.cardReveal.ariaExpanded="false",this._activators.forEach((t=>t.tabIndex=0)),this.cardRevealClose.tabIndex=-1,this.el.style.overflow=this.initialOverflow}),this.options.inDuration),"function"==typeof this.options.onClose&&this.options.onClose.call(this),this._removeRevealCloseEventHandlers())}}const c={duration:200,dist:-100,shift:0,padding:0,numVisible:5,fullWidth:!1,indicators:!1,noWrap:!1,onCycleTo:null};class p 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,p),this.el.M_Carousel=this,this.options={...p.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"),t.tabIndex=0,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=>{const e=t+"Transform";return void 0===document.body.style[e]||(this.xform=e,!1)})),this._setupEventHandlers(),this._scroll(this.offset)}static get defaults(){return c}static init(t,e={}){return super.init(t,e,p)}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),t.addEventListener("keypress",this._handleIndicatorKeyPress)})),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(),this._handleIndicatorInteraction(t)};_handleIndicatorKeyPress=t=>{t.stopPropagation(),e.keys.ENTER.includes(t.key)&&this._handleIndicatorInteraction(t)};_handleIndicatorInteraction=t=>{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=()=>{const t=Date.now(),e=t-this.timestamp,i=1e3*(this.offset-this.frame)/(1+e);this.timestamp=t,this.frame=this.offset,this.velocity=.8*i+.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){this.el.classList.contains("scrolling")||this.el.classList.add("scrolling"),null!=this.scrollingTimeout&&clearTimeout(this.scrollingTimeout),this.scrollingTimeout=setTimeout((()=>{this.el.classList.remove("scrolling")}),this.options.duration),this.offset="number"==typeof t?t:this.offset,this.center=Math.floor((this.offset+this.dim/2)/this.dim);const e=this.count>>1,i=this.offset-this.center*this.dim,s=i<0?1:-1,n=-s*i*2/this.dim;let o,a,l,r,h,d;const c=this.center,p=1/this.options.numVisible;if(this.options.fullWidth?(l="translateX(0)",d=1):(l="translateX("+(this.el.clientWidth-this.itemWidth)/2+"px) ",l+="translateY("+(this.el.clientHeight-this.itemHeight)/2+"px)",d=1-p*n),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-n:1):(r=this.options.dist*(2*o-n*s),h=1-p*(2*o-n*s)),!this.noWrap||this.center-o>=0){a=this.images[this._wrap(this.center-o)];const t=`${l} translateX(${-this.options.shift+(-this.dim*o-i)/2}px) translateZ(${r}px)`;this._updateItemStyle(a,h,-o,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)}}const u={data:[],placeholder:"",secondaryPlaceholder:"",closeIconClass:"material-icons",autocompleteOptions:{},autocompleteOnly:!1,limit:1/0,allowUserInput:!1,onChipAdd:null,onChipSelect:null,onChipDelete:null};function m(t){return[...t.parentNode.children].indexOf(t)}class v extends i{chipsData;hasAutocomplete;autocomplete;_input;_label;_chips;static _keydown;_selectedChip;constructor(t,e){super(t,e,v),this.el.M_Chips=this,this.options={...v.defaults,...e},this.el.classList.add("chips"),this.chipsData=[],this._chips=[],this.options.data.length&&(this.chipsData=this.options.data,this._renderChips()),this._setupLabel(),this.options.allowUserInput&&(this.el.classList.add("input-field"),this._setupInput(),this._setupEventHandlers(),this.el.append(this._input))}static get defaults(){return u}static init(t,e={}){return super.init(t,e,v)}static getInstance(t){return t.M_Chips}getData(){return this.chipsData}destroy(){this.options.allowUserInput&&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",v._handleChipsKeydown),document.addEventListener("keyup",v._handleChipsKeyup),this.el.addEventListener("blur",v._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",v._handleChipsKeydown),document.removeEventListener("keyup",v._handleChipsKeyup),this.el.removeEventListener("blur",v._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){v._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=m(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=m(o._selectedChip)-1;if(t<0)return;o.selectChip(t)}}else if(e.keys.ARROW_RIGHT.includes(t.key)&&o._selectedChip){const t=m(o._selectedChip)+1;t>=o.chipsData.length?o._input.focus():o.selectChip(t)}}static _handleChipsKeyup(){v._keydown=!1}static _handleChipsBlur(t){if(!v._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(v._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");if(e.classList.add("chip"),e.innerText=t.text||t.id,t.image){const i=document.createElement("img");i.setAttribute("src",t.image),e.insertBefore(i,e.firstChild)}if(this.options.allowUserInput){e.setAttribute("tabindex","0");const t=document.createElement("i");t.classList.add(this.options.closeIconClass,"close"),t.innerText="close",e.appendChild(t)}return 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=a.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"),this.hasAutocomplete=Object.keys(this.options.autocompleteOptions).length>0,this.hasAutocomplete&&this._setupAutocomplete(),this._setPlaceholder(),this._input.getAttribute("id")||this._input.setAttribute("id",e.guid())}_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.querySelectorAll(".chips").forEach((t=>{t.addEventListener("click",(t=>{if(t.target.classList.contains("close")){const e=t.target.closest(".chip");e&&e.remove()}}))}))}))}static{v._keydown=!1}}const _={accordion:!0,onOpenStart:null,onOpenEnd:null,onCloseStart:null,onCloseEnd:null,inDuration:300,outDuration:300};class g extends i{_headers;constructor(t,e){super(t,e,g),this.el.M_Collapsible=this,this.options={...g.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,g)}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 y={classes:"",dropdownOptions:{}};class f extends i{isMultiple;labelEl;dropdownOptions;input;dropdown;wrapper;selectOptions;_values;constructor(t,e){super(t,e,f),this.el.classList.contains("browser-default")||(this.el.M_FormSelect=this,this.options={...f.defaults,...e},this.isMultiple=this.el.multiple,this.el.tabIndex=-1,this._values=[],this._setupDropdown(),this._setupEventHandlers())}static get defaults(){return y}static init(t,e={}){return super.init(t,e,f)}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 t=this.dropdownOptions.querySelector(".selected");if(t&&(e.keyDown=!0,this.dropdown.focusedIndex=[...t.parentNode.children].indexOf(t),this.dropdown._focusFocusedItem(),e.keyDown=!1,this.dropdown.isScrollable)){let e=t.getBoundingClientRect().top-this.dropdownOptions.getBoundingClientRect().top;e-=this.dropdownOptions.clientHeight/2,this.dropdownOptions.scrollTop=e}this.input.ariaExpanded="true",i&&"function"==typeof i&&i.call(this.dropdown,this.el)},t.onCloseEnd=()=>{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))}}const E={format:"mmm dd, yyyy",parse:null,isDateRange:!1,dateRangeEndEl:null,isMultipleSelection:!1,defaultDate:null,defaultEndDate:null,setDefaultDate:!1,setDefaultEndDate:!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,openByDefault:!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,onDraw:null,onInputInteraction:null};class w extends i{id;multiple=!1;calendarEl;clearBtn;doneBtn;cancelBtn;containerEl;yearTextEl;dateTextEl;endDateEl;dateEls;date;endDate;dates;formats;calendars;_y;_m;static _template;constructor(t,i){super(t,i,w),this.el.M_Datepicker=this,this.options={...w.defaults,...i},i&&i.hasOwnProperty("i18n")&&"object"==typeof i.i18n&&(this.options.i18n={...w.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._setupEventHandlers(),this.options.defaultDate||(this.options.defaultDate=new Date(Date.parse(this.el.value)));const s=this.options.defaultDate;if(w._isDate(s)?this.options.setDefaultDate?(this.setDate(s,!0),this.setInputValue(this.el,s)):this.gotoDate(s):this.gotoDate(new Date),this.options.isDateRange){this.multiple=!0;const t=this.options.defaultEndDate;w._isDate(t)&&this.options.setDefaultEndDate&&(this.setDate(t,!0,!0),this.setInputValue(this.endDateEl,t))}this.options.isMultipleSelection&&(this.multiple=!0,this.dates=[],this.dateEls=[],this.dateEls.push(t))}static get defaults(){return E}static init(t,e={}){return super.init(t,e,w)}static _isDate(t){return/Date/.test(Object.prototype.toString.call(t))&&!isNaN(t.getTime())}static _isWeekend(t){const e=t.getDay();return 0===e||6===e}static _setToStartOfDay(t){w._isDate(t)&&t.setHours(0,0,0,0)}static _getDaysInMonth(t,e){return[31,w._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 _compareWithinRange(t,e,i){return t.getTime()>e.getTime()&&t.getTime()this.formats[e]?this.formats[e](t):e)).join("")}setDateFromInput(t){const e=new Date(Date.parse(t.value));this.setDate(e,!1,t==this.endDateEl,!0)}setDate(t=null,e=!1,i=!1,s=!1){const n=this.validateDate(t);n&&(this.options.isMultipleSelection?s||this.setMultiDate(n):this.setSingleDate(n,i),w._setToStartOfDay(n),this.gotoDate(n),e||"function"!=typeof this.options.onSelect||this.options.onSelect.call(this,n))}validateDate(t){if(!t)return this._renderDateDisplay(t),this.draw();if("string"==typeof t&&(t=new Date(Date.parse(t))),!w._isDate(t))return;const e=this.options.minDate,i=this.options.maxDate;return w._isDate(e)&&ti&&(t=i),new Date(t.getTime())}setSingleDate(t,e){e?e&&(this.endDate=t):this.date=t}setMultiDate(t){const e=this.dates?.find((e=>e.getTime()===t.getTime()&&e));e?this.dates.splice(this.dates.indexOf(e),1):this.dates.push(t),this.dates.sort(((t,e)=>t.getTime(){if(e>this.dates.length-1)return t})).forEach((t=>{t.remove()})),this.dates.forEach(((t,e)=>{if(Array.from(this.dateEls)[e])return void this.setInputValue(this.dateEls[e],t);const i=this.createDateInput();this.setInputValue(i,t),this.dateEls.push(i)}))}setInputValue(t,e){"date"==t.type?(this.setDataDate(t,e),t.value=this.formatDate(e,"yyyy-mm-dd")):t.value=this.toString(e),this.el.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0,detail:{firedBy:this}}))}_renderDateDisplay(t,e=null){const i=w._isDate(t)?t:new Date;if(this.options.isDateRange){const t=w._isDate(e)?e:new Date;this.dateTextEl.innerHTML=`${this.formatDate(i,"mmm d")} - ${this.formatDate(t,"mmm d")}`}else this.dateTextEl.innerHTML=this.formatDate(i,"ddd, mmm d")}gotoDate(t){let e=!0;if(w._isDate(t)){if(this.calendars){const 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){const s=new Date,n=w._getDaysInMonth(t,e),o=[];let a=new Date(t,e,1).getDay(),l=[];w._setToStartOfDay(s),this.options.firstDay>0&&(a-=this.options.firstDay,a<0&&(a+=7));const r=0===e?11:e-1,h=11===e?0:e+1,d=0===e?t-1:t,c=11===e?t+1:t,p=w._getDaysInMonth(d,r);let u=n+a,m=u;for(;m>7;)m-=7;u+=7-m;let v=!1;for(let i=0,m=0;i=n+a,f=this.options.startRange&&w._compareDates(this.options.startRange,u),E=this.options.endRange&&w._compareDates(this.options.endRange,u),b=this.options.startRange&&this.options.endRange&&this.options.startRangethis.options.maxDate||this.options.disableWeekends&&w._isWeekend(u)||this.options.disableDayFn&&this.options.disableDayFn(u),C=this.options.isDateRange&&this.date&&this.endDate&&w._compareDates(this.date,u),k=this.options.isDateRange&&this.endDate&&w._compareDates(this.endDate,u),T=this.options.isDateRange&&w._isDate(this.endDate)&&w._compareWithinRange(u,this.date,this.endDate);let D=i-a+1,x=e,S=t,I=!1;w._isDate(this.date)&&(I=w._compareDates(u,this.date)),!I&&w._isDate(this.endDate)&&(I=w._compareDates(u,this.endDate)),this.options.isMultipleSelection&&this.dates?.some((t=>t.getTime()===u.getTime()))&&(I=!0),y&&(i!(!t.hasOwnProperty(e)||!0!==t[e]))).length),s=["datepicker-day"];if(t.isEmpty){if(!t.showDaysInNextAndPreviousMonths)return'';s.push("is-outside-current-month"),s.push("is-selection-disabled")}for(const[i,n]of Object.entries(e))t.hasOwnProperty(i)&&t[i]&&s.push(n);return``}renderRow(t,e,i){return''+(e?t.reverse():t).join("")+""}renderTable(t,e,i){return'
'+this.renderHead(t)+this.renderBody(e)+"
"}renderHead(t){const e=[];let i;for(i=0;i<7;i++)e.push(`${this.renderDayName(t,i,!0)}`);return""+(t.isRTL?e.reverse():e).join("")+""}renderBody(t){return""+t.join("")+""}renderTitle(t,e,i,s,n,o){const a=this.options,l=i===a.minYear,r=i===a.maxYear;let h,d,c=[],p='
',u=!0,m=!0;for(h=0;h<12;h++)c.push('");const v='";for(Array.isArray(a.yearRange)?(h=a.yearRange[0],d=a.yearRange[1]+1):(h=i-a.yearRange,d=1+i+a.yearRange),c=[];h=a.minYear&&c.push(``);a.yearRangeReverse&&c.reverse();const _=``;p+=``,p+='
',a.showMonthAfterYear?p+=_+v:p+=v+_,p+="
",l&&(0===s||a.minMonth>=s)&&(u=!1),r&&(11===s||a.maxMonth<=s)&&(m=!1);return p+=``,p+"
"}draw(){const t=this.options,e=t.minYear,i=t.maxYear,s=t.minMonth,n=t.maxMonth;let o="";this._y<=e&&(this._y=e,!isNaN(s)&&this._m=i&&(this._y=i,!isNaN(n)&&this._m>n&&(this._m=n));const a="datepicker-title-"+Math.random().toString(36).replace(/[^a-z]+/g,"").substr(0,2);for(let t=0;t<1;t++)this.options.isDateRange?this._renderDateDisplay(this.date,this.endDate):this._renderDateDisplay(this.date),o+=this.renderTitle(this,t,this.calendars[t].year,this.calendars[t].month,this.calendars[0].year,a)+this.render(this.calendars[t].year,this.calendars[t].month,a);this.destroySelects(),this.calendarEl.innerHTML=o;const l=this.calendarEl.querySelector(".orig-select-year"),r=this.calendarEl.querySelector(".orig-select-month");f.init(l,{classes:"select-year",dropdownOptions:{container:document.body,constrainWidth:!1}}),f.init(r,{classes:"select-month",dropdownOptions:{container:document.body,constrainWidth:!1}}),l.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.setInputValues())),this.cancelBtn.addEventListener("click",this.close),this.options.showClearBtn&&this.clearBtn.addEventListener("click",this._handleClearClick)}_setupVariables(){const t=document.createElement("template");t.innerHTML=w._template.trim(),this.containerEl=t.content.firstChild,this.calendarEl=this.containerEl.querySelector(".datepicker-calendar"),this.yearTextEl=this.containerEl.querySelector(".year-text"),this.dateTextEl=this.containerEl.querySelector(".date-text"),this.options.showClearBtn&&(this.clearBtn=this.containerEl.querySelector(".datepicker-clear")),this.doneBtn=this.containerEl.querySelector(".datepicker-done"),this.cancelBtn=this.containerEl.querySelector(".datepicker-cancel"),this.formats={d:t=>t.getDate(),dd:t=>{const e=t.getDate();return(e<10?"0":"")+e},ddd:t=>this.options.i18n.weekdaysShort[t.getDay()],dddd:t=>this.options.i18n.weekdays[t.getDay()],m:t=>t.getMonth()+1,mm:t=>{const e=t.getMonth()+1;return(e<10?"0":"")+e},mmm:t=>this.options.i18n.monthsShort[t.getMonth()],mmmm:t=>this.options.i18n.months[t.getMonth()],yy:t=>(""+t.getFullYear()).slice(2),yyyy:t=>t.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),this.options.isDateRange&&(this.endDateEl.removeEventListener("click",this._handleInputClick),this.endDateEl.removeEventListener("keypress",this._handleInputKeydown),this.endDateEl.removeEventListener("change",this._handleInputChange))}_handleInputClick=t=>{"date"==t.type&&t.preventDefault(),this.setDateFromInput(t.target),this.draw(),this.gotoDate(t.target===this.el?this.date:this.endDate),this.options.onInputInteraction&&this.options.onInputInteraction.call(this)};_handleInputKeydown=t=>{e.keys.ENTER.includes(t.key)&&(t.preventDefault(),this.setDateFromInput(t.target),this.draw(),this.options.onInputInteraction&&this.options.onInputInteraction.call(this))};_handleCalendarClick=t=>{const e=t.target;if(!e.classList.contains("is-disabled"))if(!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();else{const e=new Date(t.target.getAttribute("data-year"),t.target.getAttribute("data-month"),t.target.getAttribute("data-day"));(!this.multiple||this.multiple&&this.options.isMultipleSelection)&&this.setDate(e),this.options.isDateRange&&this._handleDateRangeCalendarClick(e),this._finishSelection()}};_handleDateRangeCalendarClick=t=>{if(null!=this.endDate&&w._compareDates(t,this.endDate))this._clearDates(),this.draw();else{if(w._isDate(this.date)&&w._comparePastDate(t,this.date))return;this.setDate(t,!1,w._isDate(this.date))}};_handleClearClick=()=>{this._clearDates(),this.setInputValues()};_clearDates=()=>{this.date=null,this.endDate=null};_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;const i=t.target;t.detail?.firedBy!==this&&(i!=this.endDateEl||this.date)&&(e=this.options.parse?this.options.parse(t.target.value,"function"==typeof this.options.format?this.options.format(new Date(this.el.value)):this.options.format):new Date(Date.parse(t.target.value)),w._isDate(e)&&(this.setDate(e,!1,i==this.endDateEl,!0),"date"==t.type&&(this.setDataDate(t,e),this.setInputValues())))};renderDayName(t,e,i=!1){for(e+=t.firstDay;e>=7;)e-=7;return i?t.i18n.weekdaysAbbrev[e]:t.i18n.weekdays[e]}createDateInput(){const t=this.el.cloneNode(!0);return t.addEventListener("click",this._handleInputClick),t.addEventListener("keypress",this._handleInputKeydown),t.addEventListener("change",this._handleInputChange),this.el.parentElement.appendChild(t),t}_finishSelection=()=>{this.setInputValues(),this.close()};open(){return console.warn("Datepicker.open() is deprecated. Remove this method and wrap in modal yourself."),this}close(){return console.warn("Datepicker.close() is deprecated. Remove this method and wrap in modal yourself."),this}static{w._template='\n
\n
\n \n \n
\n
\n
\n
\n \n
\n \n \n
\n
\n
\n
'}}class b{static validateField(t){if(!t)return void console.error("No text field element found");const e=null!==t.getAttribute("data-length"),i=parseInt(t.getAttribute("data-length")),s=t.value.length;0===s&&!1===t.validity.badInput&&!t.required&&t.classList.contains("validate")?t.classList.remove("invalid"):t.classList.contains("validate")&&(t.validity.valid&&e&&s<=i||t.validity.valid&&!e?t.classList.remove("invalid"):t.classList.add("invalid"))}static textareaAutoResize(t){const e=t;let i=document.querySelector(".hiddendiv");i||(i=document.createElement("div"),i.classList.add("hiddendiv","common"),document.body.append(i));const s=getComputedStyle(e),n=s.fontFamily,o=s.fontSize,a=s.lineHeight,l=s.paddingTop,r=s.paddingRight,h=s.paddingBottom,d=s.paddingLeft;o&&(i.style.fontSize=o),n&&(i.style.fontFamily=n),a&&(i.style.lineHeight=a),l&&(i.style.paddingTop=l),r&&(i.style.paddingRight=r),h&&(i.style.paddingBottom=h),d&&(i.style.paddingLeft=d),e.hasAttribute("original-height")||e.setAttribute("original-height",e.getBoundingClientRect().height.toString()),"off"===e.getAttribute("wrap")&&(i.style.overflowWrap="normal",i.style.whiteSpace="pre"),i.innerText=e.value+"\n",i.innerHTML=i.innerHTML.replace(/\n/g,"
"),e.offsetWidth>0&&e.offsetHeight>0?i.style.width=e.getBoundingClientRect().width+"px":i.style.width=window.innerWidth/2+"px";const c=parseInt(e.getAttribute("original-height")),p=parseInt(e.getAttribute("previous-length"));isNaN(c)||(c<=i.clientHeight?e.style.height=i.clientHeight+"px":e.value.length{document.addEventListener("change",(t=>{const e=t.target;if(e instanceof HTMLInputElement){if(0!==e.value.length||null!==e.getAttribute("placeholder"))for(const t of e.parentNode.children)"label"==t.tagName&&t.classList.add("active");b.validateField(e)}})),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",(()=>i.classList.remove("tabbed")),{once:!0}))})),document.querySelectorAll(".materialize-textarea").forEach((t=>{b.InitTextarea(t)})),document.querySelectorAll('.file-field input[type="file"]').forEach((t=>{b.InitFileInputPath(t)}))}))}static InitTextarea(t){t.setAttribute("original-height",t.getBoundingClientRect().height.toString()),t.setAttribute("previous-length",t.value.length.toString()),b.textareaAutoResize(t),t.addEventListener("keyup",(t=>b.textareaAutoResize(t.target))),t.addEventListener("keydown",(t=>b.textareaAutoResize(t.target)))}static InitFileInputPath(t){t.addEventListener("change",(()=>{const e=t.closest(".file-field").querySelector("input.file-path"),i=t.files,s=[];for(let t=0;t{this._handleMaterialboxToggle()};_handleMaterialboxKeypress=t=>{e.keys.ENTER.includes(t.key)&&this._handleMaterialboxToggle()};_handleMaterialboxToggle=()=>{!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.scrollY-i.clientTop,left:e.left+window.scrollX-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",(()=>{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()}}const k={opacity:.5,inDuration:250,outDuration:250,onOpenStart:null,onOpenEnd:null,onCloseStart:null,onCloseEnd:null,preventScrolling:!0,dismissible:!0,startingTop:"4%",endingTop:"10%"};class T extends i{constructor(t,e){super(t,e,T),this.el.M_Modal=this,this.options={...T.defaults,...e},this.el.tabIndex=0,this._setupEventHandlers()}static get defaults(){return k}static init(t,e={}){return super.init(t,e,T)}static getInstance(t){return t.M_Modal}destroy(){}_setupEventHandlers(){}_removeEventHandlers(){}_handleTriggerClick(){}_handleOverlayClick(){}_handleModalCloseClick(){}_handleKeydown(){}_handleFocus(){}open(){return this}close(){return this}static#t(t){return`\n ${t.header?'
'+t.header+"
":""}\n
\n ${t.content}\n
\n ${t.header?'
'+t.footer+"
":""}\n `}static#e(t){const e=document.createElement("dialog");return e.id=t.id,e}static create(t){return this.#e(t)}static{}}const D={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 D}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.scrollY-i.clientTop,left:e.left+window.scrollX-i.clientLeft}}_updateParallax(){const t=this.el.getBoundingClientRect().height>0?this.el.parentElement.offsetHeight:500,i=this._img.offsetHeight-t,s=this._offset(this.el).top+t,n=this._offset(this.el).top,o=e.getDocumentScrollTop(),a=window.innerHeight,l=i*((o+a-n)/(t+a));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{I._pushpins=[]}}const A={throttle:100,scrollOffset:200,activeClass:"active",getActiveElement:t=>'a[href="#'+t+'"]',keepTopElementActive:!1,animationDuration:null};class M extends i{static _elements;static _count;static _increment;static _elementsInView;static _visibleElements;static _ticks;static _keptTopActiveElement=null;tickId;id;constructor(t,e){super(t,e,M),this.el.M_ScrollSpy=this,this.options={...M.defaults,...e},M._elements.push(this),M._count++,M._increment++,this.tickId=-1,this.id=M._increment.toString(),this._setupEventHandlers(),this._handleWindowScroll()}static get defaults(){return A}static init(t,e={}){return super.init(t,e,M)}static getInstance(t){return t.M_ScrollSpy}destroy(){M._elements.splice(M._elements.indexOf(this),1),M._elementsInView.splice(M._elementsInView.indexOf(this),1),M._visibleElements.splice(M._visibleElements.indexOf(this.el),1),M._count--,this._removeEventHandlers();document.querySelector(this.options.getActiveElement(this.el.id)).classList.remove(this.options.activeClass),this.el.M_ScrollSpy=void 0}_setupEventHandlers(){1===M._count&&(window.addEventListener("scroll",this._handleWindowScroll),window.addEventListener("resize",this._handleThrottledResize),document.body.addEventListener("click",this._handleTriggerClick))}_removeEventHandlers(){0===M._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=M._elements.length-1;i>=0;i--){const s=M._elements[i];if(e===document.querySelector('a[href="#'+s.el.id+'"]')){t.preventDefault(),s.el.M_ScrollSpy.options.animationDuration?M._smoothScrollIntoView(s.el,s.el.M_ScrollSpy.options.animationDuration):s.el.scrollIntoView({behavior:"smooth"});break}}};_handleWindowScroll=()=>{M._ticks++;const t=e.getDocumentScrollTop(),i=e.getDocumentScrollLeft(),s=i+window.innerWidth,n=t+window.innerHeight,o=M._findElements(t,s,n,i);for(let t=0;t=0&&i!==M._ticks&&(e._exit(),e.tickId=-1)}if(M._elementsInView=o,M._elements.length){const t=M._elements[0].el.M_ScrollSpy.options;if(t.keepTopElementActive&&0===M._visibleElements.length){this._resetKeptTopActiveElementIfNeeded();const e=M._elements.filter((t=>M._getDistanceToViewport(t.el)<=0)).sort(((t,e)=>{const i=M._getDistanceToViewport(t.el),s=M._getDistanceToViewport(e.el);return is?1:0})),i=e.length?e[e.length-1]:M._elements[0],s=document.querySelector(t.getActiveElement(i.el.id));s?.classList.add(t.activeClass),M._keptTopActiveElement=s}}};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){const n=[];for(let o=0;o0){const t=M._offset(a.el).top,o=M._offset(a.el).left,r=o+a.el.getBoundingClientRect().width,h=t+a.el.getBoundingClientRect().height;!(o>e||ri||h0!==t.getBoundingClientRect().height)),M._visibleElements[0]){const t=document.querySelector(this.options.getActiveElement(M._visibleElements[0].id));t?.classList.remove(this.options.activeClass),M._visibleElements[0].M_ScrollSpy&&this.id0!==t.getBoundingClientRect().height)),M._visibleElements[0]){const t=document.querySelector(this.options.getActiveElement(M._visibleElements[0].id));if(t?.classList.remove(this.options.activeClass),M._visibleElements=M._visibleElements.filter((t=>t.id!=this.el.id)),M._visibleElements[0]){const t=this.options.getActiveElement(M._visibleElements[0].id);document.querySelector(t)?.classList.add(this.options.activeClass),this._resetKeptTopActiveElementIfNeeded()}}}_resetKeptTopActiveElementIfNeeded(){M._keptTopActiveElement&&(M._keptTopActiveElement.classList.remove(this.options.activeClass),M._keptTopActiveElement=null)}static _getDistanceToViewport(t){return t.getBoundingClientRect().top}static _smoothScrollIntoView(t,e=300){const i=t.getBoundingClientRect().top+(window.scrollY||window.pageYOffset),s=window.scrollY||window.pageYOffset,n=i-s,o=performance.now();requestAnimationFrame((function t(a){const l=a-o,r=Math.min(l/e,1),h=s+n*r;r<1?(window.scrollTo(0,h),requestAnimationFrame(t)):window.scrollTo(0,i)}))}static{M._elements=[],M._elementsInView=[],M._visibleElements=[],M._count=0,M._increment=0,M._ticks=0}}const O={edge:"left",draggable:!0,dragTargetWidth:"10px",inDuration:250,outDuration:200,onOpenStart:null,onOpenEnd:null,onCloseStart:null,onCloseEnd:null,preventScrolling:!0};class R 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,R),this.el.M_Sidenav=this,this.options={...R.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(),R._sidenavs.push(this)}static get defaults(){return O}static init(t,e={}){return super.init(t,e,R)}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=R._sidenavs.indexOf(this);t>=0&&R._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===R._sidenavs.length&&document.body.addEventListener("click",this._handleTriggerClick);this.dragTarget.addEventListener("touchmove",this._handleDragTargetDrag,null),this.dragTarget.addEventListener("touchend",this._handleDragTargetRelease),this._overlay.addEventListener("touchmove",this._handleCloseDrag,null),this._overlay.addEventListener("touchend",this._handleCloseRelease),this.el.addEventListener("touchmove",this._handleCloseDrag),this.el.addEventListener("touchend",this._handleCloseRelease),this.el.addEventListener("click",this._handleCloseTriggerClick),this.isFixed&&window.addEventListener("resize",this._handleWindowResize),this._setAriaHidden(),this._setTabIndex()}_removeEventHandlers(){1===R._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(),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._isDraggable())return;let e=this._calculateDelta(t);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||!this._isDraggable())return;let e=this._calculateDelta(t);const 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()};_calculateDelta=t=>(this.isDragged||this._startDrag(t),this._dragMoveUpdate(t),this._xPos-this._startingXpos);_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()}_isDraggable(){return this.options.draggable&&!this._isCurrentlyFixed()&&!this._verticallyScrolling}_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(),this._setAriaHidden(),this._setTabIndex()))};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(),this._setAriaHidden(),this._setTabIndex()};_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,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)}_setAriaHidden=()=>{this.el.ariaHidden=this.isOpen?"false":"true";const t=document.querySelector(".nav-wrapper ul");t&&(t.ariaHidden=this.isOpen.toString())};_setTabIndex=()=>{const t=document.querySelectorAll(".nav-wrapper ul li a"),e=document.querySelectorAll(".sidenav li a");t&&t.forEach((t=>{t.tabIndex=this.isOpen?-1:0})),e&&e.forEach((t=>{t.tabIndex=this.isOpen?0:-1}))};static{R._sidenavs=[]}}const H={duration:300,onShow:null,swipeable:!1,responsiveThreshold:1/0};class W extends i{_tabLinks;_index;_indicator;_tabWidth;_tabsWidth;_tabsCarousel;_activeTabLink;_content;constructor(t,e){super(t,e,W),this.el.M_Tabs=this,this.options={...W.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 H}static init(t,e={}){return super.init(t,e,W)}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=>{let e=t.target;if(!e)return;let i=e.parentElement;for(;i&&!i.classList.contains("tab");)e=e.parentElement,i=i.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(){if(this._activeTabLink=Array.from(this._tabLinks).find((t=>t.getAttribute("href")===location.hash)),!this._activeTabLink){let t=this.el.querySelector("li.tab a.active");t||(t=this.el.querySelector("li.tab a")),this._activeTabLink=t}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=p.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.append(t.parentElement),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()}}const P={onOpen:null,onClose:null};class B extends i{isOpen;static _taptargets;wrapper;originEl;waveEl;contentEl;constructor(t,e){super(t,e,B),this.el.M_TapTarget=this,this.options={...B.defaults,...e},this.isOpen=!1,this.originEl=document.querySelector(`#${t.dataset.target}`),this.originEl.tabIndex=0,this._setup(),this._calculatePositioning(),this._setupEventHandlers(),B._taptargets.push(this)}static get defaults(){return P}static init(t,e={}){return super.init(t,e,B)}static getInstance(t){return t.M_TapTarget}destroy(){this._removeEventHandlers(),this.el.M_TapTarget=void 0;const t=B._taptargets.indexOf(this);t>=0&&B._taptargets.splice(t,1)}_setupEventHandlers(){this.originEl.addEventListener("click",this._handleTargetToggle),this.originEl.addEventListener("keypress",this._handleKeyboardInteraction,!0),window.addEventListener("resize",this._handleThrottledResize)}_removeEventHandlers(){this.originEl.removeEventListener("click",this._handleTargetToggle),this.originEl.removeEventListener("keypress",this._handleKeyboardInteraction,!0),window.removeEventListener("resize",this._handleThrottledResize)}_handleThrottledResize=e.throttle((function(){this._handleResize()}),200).bind(this);_handleKeyboardInteraction=t=>{e.keys.ENTER.includes(t.key)&&this._handleTargetToggle()};_handleTargetToggle=()=>{this.isOpen?this.close():this.open()};_handleResize=()=>{this._calculatePositioning()};_handleDocumentClick=t=>{t.target.closest(`#${this.el.dataset.target}`)===this.originEl||t.target.closest(".tap-target-wrapper")||this.close()};_setup(){this.wrapper=this.el.parentElement,this.waveEl=this.wrapper.querySelector(".tap-target-wave"),this.el.parentElement.ariaExpanded="false",this.originEl.style.zIndex="1002",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.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.originEl).position;if(!t){let e=this.originEl;const i=[];for(;(e=e.parentNode)&&e!==document;)i.push(e);for(let e=0;eh,u=n<=d,m=n>d,v=o>=.25*a&&o<=.75*a,_=this.el.offsetWidth,g=this.el.offsetHeight,y=n+s/2-g/2,f=o+i/2-_/2,E=t?"fixed":"absolute",w=v?_:_/2+i,b=g/2,L=u?g/2:0,C=c&&!v?_/2-i:0,k=i,T=m?"bottom":"top",D=2*i,x=D,S=g/2-x/2,I=_/2-D/2;this.wrapper.style.top=u?y+"px":"",this.wrapper.style.right=p?a-f-_-r+"px":"",this.wrapper.style.bottom=m?l-y-g+"px":"",this.wrapper.style.left=c?f+"px":"",this.wrapper.style.position=E,this.contentEl.style.width=w+"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=S+"px",this.waveEl.style.left=I+"px",this.waveEl.style.width=D+"px",this.waveEl.style.height=x+"px"}open=()=>{this.isOpen||("function"==typeof this.options.onOpen&&this.options.onOpen.call(this,this.originEl),this.isOpen=!0,this.wrapper.classList.add("open"),this.wrapper.ariaExpanded="true",document.body.addEventListener("click",this._handleDocumentClick,!0),document.body.addEventListener("keypress",this._handleDocumentClick,!0),document.body.addEventListener("touchend",this._handleDocumentClick))};close=()=>{this.isOpen&&("function"==typeof this.options.onClose&&this.options.onClose.call(this,this.originEl),this.isOpen=!1,this.wrapper.classList.remove("open"),this.wrapper.ariaExpanded="false",document.body.removeEventListener("click",this._handleDocumentClick,!0),document.body.removeEventListener("keypress",this._handleDocumentClick,!0),document.body.removeEventListener("touchend",this._handleDocumentClick))};static{B._taptargets=[]}}const q={dialRadius:135,outerRadius:105,innerRadius:70,tickRadius:20,duration:350,container:null,defaultTime:"now",fromNow:0,showClearBtn:!1,autoSubmit:!0,i18n:{cancel:"Cancel",clear:"Clear",done:"Ok"},twelveHour:!0,vibrate:!0,onSelect:null,onInputInteraction:null,onDone:null,onCancel:null};class F extends i{id;containerEl;plate;digitalClock;inputHours;inputMinutes;x0;y0;moved;dx;dy;currentView;hand;minutesView;hours;minutes;time;amOrPm;static _template;vibrate;_canvas;hoursView;spanAmPm;footer;_amBtn;_pmBtn;bg;bearing;g;toggleViewTimer;vibrateTimer;constructor(t,i){super(t,i,F),this.el.M_Timepicker=this,this.options={...F.defaults,...i},this.id=e.guid(),this._insertHTMLIntoDOM(),this._setupVariables(),this._setupEventHandlers(),this._clockSetup(),this._pickerSetup()}static get defaults(){return q}static init(t,e={}){return super.init(t,e,F)}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.containerEl.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("focus",(()=>this.showView("hours"))),this.inputHours.addEventListener("focusout",(()=>this.formatHours())),this.inputMinutes.addEventListener("focus",(()=>this.showView("minutes"))),this.inputMinutes.addEventListener("focusout",(()=>this.formatMinutes()))}_removeEventHandlers(){this.el.removeEventListener("click",this._handleInputClick),this.el.removeEventListener("keydown",this._handleInputKeydown)}_handleInputClick=()=>{this.inputHours.focus(),"function"==typeof this.options.onInputInteraction&&this.options.onInputInteraction.call(this)};_handleInputKeydown=t=>{e.keys.ENTER.includes(t.key)&&(t.preventDefault(),this.inputHours.focus(),"function"==typeof this.options.onInputInteraction&&this.options.onInputInteraction.call(this))};_handleTimeInputEnterKey=t=>{e.keys.ENTER.includes(t.key)&&(t.preventDefault(),this._inputFromTextField())};_handleClockClickStart=t=>{t.preventDefault();const 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;const n=F._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();const e=F._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);const e=F._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.inputMinutes.focus(),this.showView("minutes",this.options.duration/2)):setTimeout((()=>{this.options.autoSubmit&&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=F._template.trim(),this.containerEl=t.content.firstChild,this.containerEl.id="container-"+this.id;const e=this.options.container,i=e instanceof HTMLElement?e:document.querySelector(e);this.options.container&&i?i.append(this.containerEl):this.el.parentElement.appendChild(this.containerEl)}_setupVariables(){this.currentView="hours",this.vibrate=navigator.vibrate?"vibrate":navigator.webkitVibrate?"webkitVibrate":null,this._canvas=this.containerEl.querySelector(".timepicker-canvas"),this.plate=this.containerEl.querySelector(".timepicker-plate"),this.digitalClock=this.containerEl.querySelector(".timepicker-display-column"),this.hoursView=this.containerEl.querySelector(".timepicker-hours"),this.minutesView=this.containerEl.querySelector(".timepicker-minutes"),this.inputHours=this.containerEl.querySelector(".timepicker-input-hours"),this.inputMinutes=this.containerEl.querySelector(".timepicker-input-minutes"),this.spanAmPm=this.containerEl.querySelector(".timepicker-span-am-pm"),this.footer=this.containerEl.querySelector(".timepicker-footer"),this.amOrPm="PM"}_createButton(t,e){const i=document.createElement("button");return i.classList.add("btn","btn-flat","waves-effect","text"),i.style.visibility=e,i.type="button",i.tabIndex=-1,i.innerText=t,i}_pickerSetup(){const t=this._createButton(this.options.i18n.clear,this.options.showClearBtn?"":"hidden");if(t.classList.add("timepicker-clear"),t.addEventListener("click",this.clear),this.footer.appendChild(t),!this.options.autoSubmit){const t=document.createElement("div");t.classList.add("confirmation-btns"),this.footer.append(t);const e=this._createButton(this.options.i18n.cancel,"");e.classList.add("timepicker-close"),e.addEventListener("click",this.close),t.appendChild(e);const i=this._createButton(this.options.i18n.done,"");i.classList.add("timepicker-close"),i.addEventListener("click",this.done),t.appendChild(i)}this._updateTimeFromInput(),this.showView("hours")}_clockSetup(){this.options.twelveHour&&(this._amBtn=document.createElement("div"),this._amBtn.classList.add("am-btn","btn"),this._amBtn.innerText="AM",this._amBtn.tabIndex=0,this._amBtn.addEventListener("click",this._handleAmPmClick),this._amBtn.addEventListener("keypress",this._handleAmPmKeypress),this.spanAmPm.appendChild(this._amBtn),this._pmBtn=document.createElement("div"),this._pmBtn.classList.add("pm-btn","btn"),this._pmBtn.innerText="PM",this._pmBtn.tabIndex=0,this._pmBtn.addEventListener("click",this._handleAmPmClick),this._pmBtn.addEventListener("keypress",this._handleAmPmKeypress),this.spanAmPm.appendChild(this._pmBtn)),this._buildHoursView(),this._buildMinutesView(),this._buildSVGClock()}_buildSVGClock(){const t=this.options.dialRadius,e=this.options.tickRadius,i=2*t,s=F._createSVGEl("svg");s.setAttribute("class","timepicker-svg"),s.setAttribute("width",i.toString()),s.setAttribute("height",i.toString());const n=F._createSVGEl("g");n.setAttribute("transform","translate("+t+","+t+")");const o=F._createSVGEl("circle");o.setAttribute("class","timepicker-canvas-bearing"),o.setAttribute("cx","0"),o.setAttribute("cy","0"),o.setAttribute("r","4");const a=F._createSVGEl("line");a.setAttribute("x1","0"),a.setAttribute("y1","0");const l=F._createSVGEl("circle");l.setAttribute("class","timepicker-canvas-bg"),l.setAttribute("r",e.toString()),n.appendChild(a),n.appendChild(l),n.appendChild(o),s.appendChild(n),this._canvas.appendChild(s),this.hand=a,this.bg=l,this.bearing=o,this.g=n}_buildHoursView(){if(this.options.twelveHour)for(let t=1;t<13;t+=1){const e=t/6*Math.PI,i=this.options.outerRadius;this._buildHoursTick(t,e,i)}else for(let t=0;t<24;t+=1){const e=t/6*Math.PI,i=t>0&&t<13?this.options.innerRadius:this.options.outerRadius;this._buildHoursTick(t,e,i)}}_buildHoursTick(t,e,i){const s=document.createElement("div");s.classList.add("timepicker-tick"),s.style.left=this.options.dialRadius+Math.sin(e)*i-this.options.tickRadius+"px",s.style.top=this.options.dialRadius-Math.cos(e)*i-this.options.tickRadius+"px",s.innerHTML=0===t?"00":t.toString(),this.hoursView.appendChild(s)}_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=F._addLeadingZero(e),this.minutesView.appendChild(i)}}_handleAmPmClick=t=>{this._handleAmPmInteraction(t.target)};_handleAmPmKeypress=t=>{e.keys.ENTER.includes(t.key)&&this._handleAmPmInteraction(t.target)};_handleAmPmInteraction=t=>{this.amOrPm=t.classList.contains("am-btn")?"AM":"PM",this._updateAmPmView()};_updateAmPmView(){this.options.twelveHour&&("PM"===this.amOrPm?(this._amBtn.classList.remove("filled"),this._pmBtn.classList.add("filled")):"AM"===this.amOrPm&&(this._amBtn.classList.add("filled"),this._pmBtn.classList.remove("filled")))}_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]){const 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=F._addLeadingZero(this.hours),this.inputMinutes.value=F._addLeadingZero(this.minutes),this._updateAmPmView()}showView=(t,e=null)=>{"minutes"===t&&getComputedStyle(this.hoursView).visibility;const i="hours"===t,s=i?this.hoursView:this.minutesView,n=i?this.minutesView:this.hoursView;this.currentView=t,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){const 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,a=Math.sin(n)*o,l=-Math.cos(n)*o;t?(this._canvas?.classList.add("timepicker-canvas-out"),setTimeout((()=>{this._canvas?.classList.remove("timepicker-canvas-out"),this.setHand(a,l)}),t)):this.setHand(a,l)}_inputFromTextField=()=>{const t="hours"===this.currentView;if(t&&""!==this.inputHours.value){const e=parseInt(this.inputHours.value);e>0&&e<(this.options.twelveHour?13:24)?this.hours=e:this.setHoursDefault(),this.drawClockFromTimeInput(this.hours,t)}else if(!t&&""!==this.inputMinutes.value){const e=parseInt(this.inputMinutes.value);e>=0&&e<60?this.minutes=e:(this.minutes=(new Date).getMinutes(),this.inputMinutes.value=this.minutes.toString()),this.drawClockFromTimeInput(this.minutes,t)}};drawClockFromTimeInput(t,e){const i=t*(Math.PI/(e?6:30));let s;s=this.options.twelveHour?this.options.outerRadius:e&&t>0&&t<13?this.options.innerRadius:this.options.outerRadius,this.setClockAttributes(i,s)}setHand(t,e,i=!1){const s="hours"===this.currentView,n=Math.PI/(s||i?6:30),o=Math.sqrt(t*t+e*e),a=s&&o<(this.options.outerRadius+this.options.innerRadius)/2;let l=Math.atan2(t,-e),r=a?this.options.innerRadius:this.options.outerRadius;this.options.twelveHour&&(r=this.options.outerRadius),l<0&&(l=2*Math.PI+l);let h=Math.round(l/n);l=h*n,this.options.twelveHour?s?0===h&&(h=12):(i&&(h*=5),60===h&&(h=0)):s?(12===h&&(h=0),h=a?0===h?12:h:0===h?0:h+12):(i&&(h*=5),60===h&&(h=0)),this[this.currentView]!==h&&this.vibrate&&this.options.vibrate&&(this.vibrateTimer||(navigator[this.vibrate](10),this.vibrateTimer=setTimeout((()=>{this.vibrateTimer=null}),100))),this[this.currentView]=h,s?this.inputHours.value=F._addLeadingZero(h):this.inputMinutes.value=F._addLeadingZero(h),this.setClockAttributes(l,r)}setClockAttributes(t,e){const i=Math.sin(t)*(e-this.options.tickRadius),s=-Math.cos(t)*(e-this.options.tickRadius),n=Math.sin(t)*e,o=-Math.cos(t)*e;this.hand.setAttribute("x2",i.toString()),this.hand.setAttribute("y2",s.toString()),this.bg.setAttribute("cx",n.toString()),this.bg.setAttribute("cy",o.toString())}formatHours(){""==this.inputHours.value&&this.setHoursDefault(),this.inputHours.value=F._addLeadingZero(Number(this.inputHours.value))}formatMinutes(){""==this.inputMinutes.value&&(this.minutes=(new Date).getMinutes()),this.inputMinutes.value=F._addLeadingZero(Number(this.inputMinutes.value))}setHoursDefault(){this.hours=(new Date).getHours(),this.inputHours.value=(this.hours%(this.options.twelveHour?12:24)).toString()}done=(t=null)=>{const e=this.el.value;let i=t?"":F._addLeadingZero(this.hours)+":"+F._addLeadingZero(this.minutes);this.time=i,!t&&this.options.twelveHour&&(i=`${i} ${this.amOrPm}`),this.el.value=i,i!==e&&this.el.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0}))};confirm=()=>{this.done(),"function"==typeof this.options.onDone&&setTimeout((()=>{this.options.onDone.call(this)}),this.options.duration/2)};cancel=()=>{this.clear(),"function"==typeof this.options.onDone&&this.options.onCancel.call(this)};clear=()=>{this.done(!0)};open(){return console.warn("Timepicker.close() is deprecated. Remove this method and wrap in modal yourself."),this}close(){return console.warn("Timepicker.close() is deprecated. Remove this method and wrap in modal yourself."),this}static{F._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
\n
\n
\n
'}}const V={exitDelay:200,enterDelay:0,text:"",margin:5,inDuration:250,outDuration:200,position:"bottom",transitionMovement:10,opacity:1};class $ extends i{isOpen;isHovered;isFocused;tooltipEl;_exitDelayTimeout;_enterDelayTimeout;xMovement;yMovement;constructor(t,e){super(t,e,$),this.el.M_Tooltip=this,this.options={...$.defaults,...this._getAttributeOptions(),...e},this.isOpen=!1,this.isHovered=!1,this.isFocused=!1,this._appendTooltipEl(),this._setupEventHandlers()}static get defaults(){return V}static init(t,e={}){return super.init(t,e,$)}static getInstance(t){return t.M_Tooltip}destroy(){this.tooltipEl.remove(),this._removeEventHandlers(),this.el.M_Tooltip=void 0}_appendTooltipEl(){this.tooltipEl=document.createElement("div"),this.tooltipEl.classList.add("material-tooltip");const t=this.options.tooltipId?document.getElementById(this.options.tooltipId):document.createElement("div");this.tooltipEl.append(t),t.style.display="",t.classList.add("tooltip-content"),this._setTooltipContent(t),this.tooltipEl.appendChild(t),document.body.appendChild(this.tooltipEl)}_setTooltipContent(t){this.options.tooltipId||(t.innerText=this.options.text)}_updateTooltipContent(){this._setTooltipContent(this.tooltipEl.querySelector(".tooltip-content"))}_setupEventHandlers(){this.el.addEventListener("mouseenter",this._handleMouseEnter),this.el.addEventListener("mouseleave",this._handleMouseLeave),this.el.addEventListener("focus",this._handleFocus,!0),this.el.addEventListener("blur",this._handleBlur,!0)}_removeEventHandlers(){this.el.removeEventListener("mouseenter",this._handleMouseEnter),this.el.removeEventListener("mouseleave",this._handleMouseLeave),this.el.removeEventListener("focus",this._handleFocus,!0),this.el.removeEventListener("blur",this._handleBlur,!0)}open=t=>{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,a=t.offsetWidth,l=this.options.margin;this.xMovement=0,this.yMovement=0;let r=i.getBoundingClientRect().top+e.getDocumentScrollTop(),h=i.getBoundingClientRect().left+e.getDocumentScrollLeft();"top"===this.options.position?(r+=-o-l,h+=n/2-a/2,this.yMovement=-this.options.transitionMovement):"right"===this.options.position?(r+=s/2-o/2,h+=n+l,this.xMovement=this.options.transitionMovement):"left"===this.options.position?(r+=s/2-o/2,h+=-a-l,this.xMovement=-this.options.transitionMovement):(r+=s+l,h+=n/2-a/2,this.yMovement=this.options.transitionMovement);const d=this._repositionWithinScreen(h,r,a,o);t.style.top=d.y+"px",t.style.left=d.x+"px"}_repositionWithinScreen(t,i,s,n){const o=e.getDocumentScrollLeft(),a=e.getDocumentScrollTop();let l=t-o,r=i-a;const h={left:l,top:r,width:s,height:n},d=this.options.margin+this.options.transitionMovement,c=e.checkWithinContainer(document.body,h,d);return c.left?l=d:c.right&&(l-=l+s-window.innerWidth),c.top?r=d:c.bottom&&(r-=r+n-window.innerHeight),{x:l+o,y:r+a}}_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(){const t={},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 N{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 a=function(l){o||(o=l);const r=l-o;if(r<500){const o=r/500*(2-r/500),l=s?"circle at 50% 50%":`circle at ${e.x}px ${e.y}px`,h=`rgba(${i?.r||0}, ${i?.g||0}, ${i?.b||0}, ${.3*(1-o)})`,d=90*o+"%";t.style.backgroundImage="radial-gradient("+l+", "+h+" "+d+", transparent "+d+")",n=window.requestAnimationFrame(a)}else t.style.backgroundImage="none",window.cancelAnimationFrame(n)};n=window.requestAnimationFrame(a)}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-N._offset(i).left,n=t.pageY-N._offset(i).top;let o=null;i.classList.contains("waves-light")&&(o={r:255,g:255,b:255}),N.renderWaveEffect(i,e?null:{x:s,y:n},o)}}))}))}}const z={};class X extends i{_mousedown;value;thumb;constructor(t,e){super(t,e,X),this.el.M_Range=this,this.options={...X.defaults,...e},this._mousedown=!1,this._setupThumb(),this._setupEventHandlers()}static get defaults(){return z}static init(t,e={}){return super.init(t,e,X)}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&&X.init(document?.querySelectorAll("input[type=range]"),{})}}const K=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 K}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=()=>{const 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"))}}const j={indicators:!0,height:400,duration:500,interval:6e3,pauseOnFocus:!0,pauseOnHover:!0,indicatorLabelFunc:null};class U extends i{activeIndex;interval;eventPause;_slider;_slides;_activeSlide;_indicators;_hovered;_focused;_focusCurrent;_sliderId;constructor(t,i){super(t,i,U),this.el.M_Slider=this,this.options={...U.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 j}static init(t,e={}){return super.init(t,e,U)}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)}}const Z={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);const e=this._createToast();e.M_Toast=this,this.el=e,this._animateIn(),this._setTimer()}static get defaults(){return Z}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){const t=G._draggedToast;t.panning=!1,t.el.classList.remove("panning");const 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(const 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(){clearInterval(this.counterInterval);const 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)),b.Init(),v.Init(),N.Init(),X.Init(),t.AutoInit=function(t=document.body,e){const i={Autocomplete:t.querySelectorAll(".autocomplete:not(.no-autoinit)"),Cards:t.querySelectorAll(".cards: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)")};a.init(i.Autocomplete,e?.Autocomplete??{}),d.init(i.Cards,e?.Cards??{}),p.init(i.Carousel,e?.Carousel??{}),v.init(i.Chips,e?.Chips??{}),g.init(i.Collapsible,e?.Collapsible??{}),w.init(i.Datepicker,e?.Datepicker??{}),n.init(i.Dropdown,e?.Dropdown??{}),C.init(i.Materialbox,e?.Materialbox??{}),T.init(i.Modal,e?.Modal??{}),x.init(i.Parallax,e?.Parallax??{}),I.init(i.Pushpin,e?.Pushpin??{}),M.init(i.ScrollSpy,e?.ScrollSpy??{}),f.init(i.FormSelect,e?.FormSelect??{}),R.init(i.Sidenav,e?.Sidenav??{}),W.init(i.Tabs,e?.Tabs??{}),B.init(i.TapTarget,e?.TapTarget??{}),F.init(i.Timepicker,e?.Timepicker??{}),$.init(i.Tooltip,e?.Tooltip??{}),r.init(i.FloatingActionButton,e?.FloatingActionButton??{})},t.Autocomplete=a,t.Cards=d,t.Carousel=p,t.CharacterCounter=Y,t.Chips=v,t.Collapsible=g,t.Datepicker=w,t.Dropdown=n,t.FloatingActionButton=r,t.FormSelect=f,t.Forms=b,t.Materialbox=C,t.Modal=T,t.Parallax=x,t.Pushpin=I,t.Range=X,t.ScrollSpy=M,t.Sidenav=R,t.Slider=U,t.Tabs=W,t.TapTarget=B,t.Timepicker=F,t.Toast=G,t.Tooltip=$,t.Waves=N,t.version="2.2.1",t}({}); diff --git a/dist/js/materialize.mjs b/dist/js/materialize.mjs new file mode 100644 index 0000000000..e22e28c535 --- /dev/null +++ b/dist/js/materialize.mjs @@ -0,0 +1,7976 @@ +/*! +* Materialize v2.2.1 (https://materializeweb.com) +* Copyright 2014-2025 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. + */ + /* eslint-disabled as of required event type condition check */ + /* eslint-disable-next-line */ + static docHandleFocus(e) { + if (Utils.keyDown) { + document.body.classList.add('keyboard-focused'); + } + } + /** + * Detects when document is not focused. + * @param e Event instance. + */ + /* eslint-disabled as of required event type condition check */ + /* eslint-disable-next-line */ + 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) { + const edges = { + top: false, + right: false, + bottom: false, + left: false + }; + const containerRect = container.getBoundingClientRect(); + // If body element is smaller than viewport, use viewport height instead. + const containerBottom = container === document.body + ? Math.max(containerRect.bottom, window.innerHeight) + : containerRect.bottom; + const scrollLeft = container.scrollLeft; + const scrollTop = container.scrollTop; + const scrolledX = bounding.left - scrollLeft; + const 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) { + const canAlign = { + top: true, + right: true, + bottom: true, + left: true, + spaceOnTop: null, + spaceOnRight: null, + spaceOnBottom: null, + spaceOnLeft: null + }; + const containerAllowsOverflow = getComputedStyle(container).overflow === 'visible'; + const containerRect = container.getBoundingClientRect(); + const containerHeight = Math.min(containerRect.height, window.innerHeight); + const containerWidth = Math.min(containerRect.width, window.innerWidth); + const elOffsetRect = el.getBoundingClientRect(); + const scrollLeft = container.scrollLeft; + const scrollTop = container.scrollTop; + const scrolledX = bounding.left - scrollLeft; + const scrolledYTopEdge = bounding.top - scrollTop; + const 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 = {}) { + let context, args, result, timeout = null, previous = 0; + const later = () => { + previous = options.leading === false ? 0 : new Date().getTime(); + timeout = null; + result = func.apply(context, args); + context = args = null; + }; + return (...args) => { + const now = new Date().getTime(); + if (!previous && options.leading === false) + previous = now; + const remaining = wait - (now - previous); + context = this; + 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; + }; + } + /** + * Renders confirm/close buttons with callback function + */ + static createConfirmationContainer(container, confirmText, cancelText, onConfirm, onCancel) { + const confirmationButtonsContainer = document.createElement('div'); + confirmationButtonsContainer.classList.add('confirmation-btns'); + container.append(confirmationButtonsContainer); + this.createButton(confirmationButtonsContainer, cancelText, ['btn-cancel'], true, onCancel); + this.createButton(confirmationButtonsContainer, confirmText, ['btn-confirm'], true, onConfirm); + } + /** + * Renders a button with optional callback function + */ + static createButton(container, text, className = [], visibility = true, callback = null) { + className = className.concat(['btn', 'waves-effect', 'text']); + const button = document.createElement('button'); + button.className = className.join(' '); + button.style.visibility = visibility ? 'visible' : 'hidden'; + button.type = 'button'; + button.tabIndex = !!visibility ? 0 : -1; + button.innerText = text; + button.addEventListener('click', callback); + button.addEventListener('keypress', (e) => { + if (Utils.keys.ENTER.includes(e.key)) + callback(e); + }); + container.append(button); + } +} + +/** + * 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 + const 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. + */ + // eslint-disable-next-line @typescript-eslint/no-unused-vars + 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$m = { + 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 = []; + this.el.ariaExpanded = 'false'; + // Move dropdown-content after dropdown-trigger + this._moveDropdown(); + this._makeDropdownFocusable(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$m; + } + /** + * 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(); + this._moveDropdown(e.target.closest('li')); + if (this.isOpen) { + this.close(); + } + else { + this.open(); + } + }; + _handleMouseEnter = (e) => { + this._moveDropdown(e.target.closest('li')); + 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) { + const arr = []; + let i; + 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) { + const opts = this.options, isMinYear = year === opts.minYear, isMaxYear = year === opts.maxYear; + let i, j, arr = [], html = '
', prev = true, next = true; + for (i = 0; i < 12; i++) { + arr.push(''); + } + const 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(); + const yearHtml = ``; + const 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; + } + const rightArrow = ''; + html += ``; + return (html += '
'); + } + // refresh HTML + draw() { + const opts = this.options, minYear = opts.minYear, maxYear = opts.maxYear, minMonth = opts.minMonth, maxMonth = opts.maxMonth; + let html = ''; + 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; + } + } + const randId = 'datepicker-title-' + + Math.random() + .toString(36) + .replace(/[^a-z]+/g, '') + .substr(0, 2); + for (let c = 0; c < 1; c++) { + if (!this.options.isDateRange) { + this._renderDateDisplay(this.date); + } + else { + this._renderDateDisplay(this.date, this.endDate); + } + 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 + const yearSelect = this.calendarEl.querySelector('.orig-select-year'); + const monthSelect = this.calendarEl.querySelector('.orig-select-month'); + // @todo fix accessibility @see https://github.com/materializecss/materialize/issues/522 + 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.setInputValues()); + 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.containerEl = template.content.firstChild; + this.calendarEl = this.containerEl.querySelector('.datepicker-calendar'); + this.yearTextEl = this.containerEl.querySelector('.year-text'); + this.dateTextEl = this.containerEl.querySelector('.date-text'); + if (this.options.showClearBtn) { + this.clearBtn = this.containerEl.querySelector('.datepicker-clear'); + } + // TODO: This should not be part of the datepicker + this.doneBtn = this.containerEl.querySelector('.datepicker-done'); + this.cancelBtn = this.containerEl.querySelector('.datepicker-cancel'); + this.formats = { + d: (date) => { + return date.getDate(); + }, + dd: (date) => { + const d = date.getDate(); + return (d < 10 ? '0' : '') + d; + }, + ddd: (date) => { + return this.options.i18n.weekdaysShort[date.getDay()]; + }, + dddd: (date) => { + return this.options.i18n.weekdays[date.getDay()]; + }, + m: (date) => { + return date.getMonth() + 1; + }, + mm: (date) => { + const m = date.getMonth() + 1; + return (m < 10 ? '0' : '') + m; + }, + mmm: (date) => { + return this.options.i18n.monthsShort[date.getMonth()]; + }, + mmmm: (date) => { + return this.options.i18n.months[date.getMonth()]; + }, + yy: (date) => { + return ('' + date.getFullYear()).slice(2); + }, + yyyy: (date) => { + return 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); + if (this.options.isDateRange) { + this.endDateEl.removeEventListener('click', this._handleInputClick); + this.endDateEl.removeEventListener('keypress', this._handleInputKeydown); + this.endDateEl.removeEventListener('change', this._handleInputChange); + } + } + _handleInputClick = (e) => { + // Prevents default browser datepicker modal rendering + if (e.type == 'date') { + e.preventDefault(); + } + this.setDateFromInput(e.target); + this.draw(); + this.gotoDate(e.target === this.el ? this.date : this.endDate); + if (this.options.onInputInteraction) + this.options.onInputInteraction.call(this); + }; + _handleInputKeydown = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + e.preventDefault(); + this.setDateFromInput(e.target); + this.draw(); + if (this.options.onInputInteraction) + this.options.onInputInteraction.call(this); + } + }; + _handleCalendarClick = (e) => { + 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')) { + const selectedDate = new Date(e.target.getAttribute('data-year'), e.target.getAttribute('data-month'), e.target.getAttribute('data-day')); + if (!this.multiple || (this.multiple && this.options.isMultipleSelection)) { + this.setDate(selectedDate); + } + if (this.options.isDateRange) { + this._handleDateRangeCalendarClick(selectedDate); + } + this._finishSelection(); + } + else if (target.closest('.month-prev')) { + this.prevMonth(); + } + else if (target.closest('.month-next')) { + this.nextMonth(); + } + } + }; + _handleDateRangeCalendarClick = (date) => { + if (this.endDate == null || !Datepicker._compareDates(date, this.endDate)) { + if (Datepicker._isDate(this.date) && Datepicker._comparePastDate(date, this.date)) { + return; + } + this.setDate(date, false, Datepicker._isDate(this.date)); + return; + } + this._clearDates(); + this.draw(); + }; + _handleClearClick = () => { + this._clearDates(); + this.setInputValues(); + }; + _clearDates = () => { + this.date = null; + this.endDate = null; + }; + _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; + const el = e.target; + // Prevent change event from being fired when triggered by the plugin + if (e['detail']?.firedBy === this) + return; + // Prevent change event from being fired if an end date is set without a start date + if (el == this.endDateEl && !this.date) + return; + if (this.options.parse) { + date = this.options.parse(e.target.value, typeof this.options.format === 'function' + ? this.options.format(new Date(this.el.value)) + : this.options.format); + } + else { + date = new Date(Date.parse(e.target.value)); + } + if (Datepicker._isDate(date)) { + this.setDate(date, false, el == this.endDateEl, true); + if (e.type == 'date') { + this.setDataDate(e, date); + this.setInputValues(); + } + } + }; + renderDayName(opts, day, abbr = false) { + day += opts.firstDay; + while (day >= 7) { + day -= 7; + } + return abbr ? opts.i18n.weekdaysAbbrev[day] : opts.i18n.weekdays[day]; + } + createDateInput() { + const dateInput = this.el.cloneNode(true); + dateInput.addEventListener('click', this._handleInputClick); + dateInput.addEventListener('keypress', this._handleInputKeydown); + dateInput.addEventListener('change', this._handleInputChange); + this.el.parentElement.appendChild(dateInput); + return dateInput; + } + // Set input value to the selected date and close Datepicker + _finishSelection = () => { + this.setInputValues(); + this.close(); + }; + // deprecated + open() { + console.warn('Datepicker.open() is deprecated. Remove this method and wrap in modal yourself.'); + return this; + } + close() { + console.warn('Datepicker.close() is deprecated. Remove this method and wrap in modal yourself.'); + return this; + } + static { + Datepicker._template = ` +
+
+ + +
+
+
+
+ +
+ + +
+
+
+
`; + } +} + +class Forms { + /** + * Checks if the label has validation and apply + * the correct class and styles + * @param textfield + */ + static validateField(textfield) { + if (!textfield) { + console.error('No text field element found'); + return; + } + const hasLength = textfield.getAttribute('data-length') !== null; + const lenAttr = parseInt(textfield.getAttribute('data-length')); + const len = textfield.value.length; + if (len === 0 && + textfield.validity.badInput === false && + !textfield.required && + textfield.classList.contains('validate')) { + textfield.classList.remove('invalid'); + } + else if (textfield.classList.contains('validate')) { + // Check for character counter attributes + if ((textfield.validity.valid && hasLength && len <= lenAttr) || + (textfield.validity.valid && !hasLength)) { + textfield.classList.remove('invalid'); + } + else { + textfield.classList.add('invalid'); + } + } + } + /** + * Resizes the given TextArea after updating the + * value content dynamically. + * @param e EventTarget + */ + static textareaAutoResize(e) { + const textarea = e; + // 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'; + hiddenDiv.innerHTML = hiddenDiv.innerHTML.replace(/\n/g, '
'); + // 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('change', (e) => { + const target = e.target; + if (target instanceof HTMLInputElement) { + if (target.value.length !== 0 || target.getAttribute('placeholder') !== null) { + for (const child of target.parentNode.children) { + if (child.tagName == 'label') { + child.classList.add('active'); + } + } + } + Forms.validateField(target); + } + }); + 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', () => 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(e.target)); + textarea.addEventListener('keydown', (e) => Forms.textareaAutoResize(e.target)); + } + static InitFileInputPath(fileInput) { + fileInput.addEventListener('change', () => { + 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$d = { + 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') || ''; + this.el.tabIndex = 0; + // Wrap + this.el.before(this.placeholder); + this.placeholder.append(this.el); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$d; + } + /** + * 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); + this.el.addEventListener('keypress', this._handleMaterialboxKeypress); + } + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleMaterialboxClick); + this.el.removeEventListener('keypress', this._handleMaterialboxKeypress); + } + _handleMaterialboxClick = () => { + this._handleMaterialboxToggle(); + }; + _handleMaterialboxKeypress = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + this._handleMaterialboxToggle(); + } + }; + _handleMaterialboxToggle = () => { + // 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.scrollY - docElem.clientTop, + left: box.left + window.scrollX - 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'); + if (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', () => { + 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(); + }; +} + +const _defaults$c = { + opacity: 0.5, + inDuration: 250, + outDuration: 250, + onOpenStart: null, + onOpenEnd: null, + onCloseStart: null, + onCloseEnd: null, + preventScrolling: true, + dismissible: true, + startingTop: '4%', + endingTop: '10%' +}; +class Modal extends Component { + constructor(el, options) { + super(el, options, Modal); + this.el['M_Modal'] = this; + this.options = { + ...Modal.defaults, + ...options + }; + this.el.tabIndex = 0; + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$c; + } + static init(els, options = {}) { + return super.init(els, options, Modal); + } + static getInstance(el) { + return el['M_Modal']; + } + destroy() { } + _setupEventHandlers() { } + _removeEventHandlers() { } + _handleTriggerClick() { } + _handleOverlayClick() { } + _handleModalCloseClick() { } + _handleKeydown() { } + _handleFocus() { } + open() { + return this; + } + close() { + return this; + } + // Experimental! + static #createHtml(config) { + return ` + ${config.header ? '
' + config.header + '
' : ''} +
+ ${config.content} +
+ ${config.header ? '
' + config.footer + '
' : ''} + `; + } + static #createHtmlElement(config) { + const dialog = document.createElement('dialog'); + dialog.id = config.id; + return dialog; + } + static create(config) { + return this.#createHtmlElement(config); + } + static { } +} + +const _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++) { + const parallaxInstance = Parallax._parallaxes[i]; + parallaxInstance._updateParallax.call(parallaxInstance); + } + } + static _handleWindowResize() { + for (let i = 0; i < Parallax._parallaxes.length; i++) { + const 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.scrollY - docElem.clientTop, + left: box.left + window.scrollX - docElem.clientLeft + }; + } + _updateParallax() { + const containerHeight = this.el.getBoundingClientRect().height > 0 ? this.el.parentElement.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)`; + } + } +} + +const _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 + const 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 (const elIndex in Pushpin._pushpins) { + const pInstance = Pushpin._pushpins[elIndex]; + pInstance._updatePosition(); + } + } + _setupEventHandlers() { + document.addEventListener('scroll', Pushpin._updateElements); + } + _removeEventHandlers() { + document.removeEventListener('scroll', Pushpin._updateElements); + } + _updatePosition() { + const 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 = []; + } +} + +const _defaults$9 = { + throttle: 100, + scrollOffset: 200, // offset - 200 allows elements near bottom of page to scroll + activeClass: 'active', + getActiveElement: (id) => { + return 'a[href="#' + id + '"]'; + }, + keepTopElementActive: false, + animationDuration: null +}; +class ScrollSpy extends Component { + static _elements; + static _count; + static _increment; + static _elementsInView; + static _visibleElements; + static _ticks; + static _keptTopActiveElement = null; + tickId; + id; + 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.toString(); + 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(); + if (scrollspy.el['M_ScrollSpy'].options.animationDuration) { + ScrollSpy._smoothScrollIntoView(scrollspy.el, scrollspy.el['M_ScrollSpy'].options.animationDuration); + } + else { + scrollspy.el.scrollIntoView({ behavior: 'smooth' }); + } + break; + } + } + }; + _handleWindowScroll = () => { + // unique tick id + ScrollSpy._ticks++; + // viewport rectangle + const top = Utils.getDocumentScrollTop(), left = Utils.getDocumentScrollLeft(), right = left + window.innerWidth, bottom = top + window.innerHeight; + // determine which elements are in view + const intersections = ScrollSpy._findElements(top, right, bottom, left); + for (let i = 0; i < intersections.length; i++) { + const scrollspy = intersections[i]; + const 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++) { + const scrollspy = ScrollSpy._elementsInView[i]; + const 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; + if (ScrollSpy._elements.length) { + const options = ScrollSpy._elements[0].el['M_ScrollSpy'].options; + if (options.keepTopElementActive && ScrollSpy._visibleElements.length === 0) { + this._resetKeptTopActiveElementIfNeeded(); + const topElements = ScrollSpy._elements + .filter((value) => ScrollSpy._getDistanceToViewport(value.el) <= 0) + .sort((a, b) => { + const distanceA = ScrollSpy._getDistanceToViewport(a.el); + const distanceB = ScrollSpy._getDistanceToViewport(b.el); + if (distanceA < distanceB) + return -1; + if (distanceA > distanceB) + return 1; + return 0; + }); + const nearestTopElement = topElements.length + ? topElements[topElements.length - 1] + : ScrollSpy._elements[0]; + const actElem = document.querySelector(options.getActiveElement(nearestTopElement.el.id)); + actElem?.classList.add(options.activeClass); + ScrollSpy._keptTopActiveElement = actElem; + } + } + }; + 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) { + const hits = []; + for (let i = 0; i < ScrollSpy._elements.length; i++) { + const scrollspy = ScrollSpy._elements[i]; + const currTop = top + scrollspy.options.scrollOffset || 200; + if (scrollspy.el.getBoundingClientRect().height > 0) { + const elTop = ScrollSpy._offset(scrollspy.el).top, elLeft = ScrollSpy._offset(scrollspy.el).left, elRight = elLeft + scrollspy.el.getBoundingClientRect().width, elBottom = elTop + scrollspy.el.getBoundingClientRect().height; + const 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); + } + this._resetKeptTopActiveElementIfNeeded(); + 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); + this._resetKeptTopActiveElementIfNeeded(); + } + } + } + _resetKeptTopActiveElementIfNeeded() { + if (ScrollSpy._keptTopActiveElement) { + ScrollSpy._keptTopActiveElement.classList.remove(this.options.activeClass); + ScrollSpy._keptTopActiveElement = null; + } + } + static _getDistanceToViewport(element) { + const rect = element.getBoundingClientRect(); + const distance = rect.top; + return distance; + } + static _smoothScrollIntoView(element, duration = 300) { + const targetPosition = element.getBoundingClientRect().top + (window.scrollY || window.pageYOffset); + const startPosition = window.scrollY || window.pageYOffset; + const distance = targetPosition - startPosition; + const startTime = performance.now(); + function scrollStep(currentTime) { + const elapsed = currentTime - startTime; + const progress = Math.min(elapsed / duration, 1); + const scrollY = startPosition + distance * progress; + if (progress < 1) { + window.scrollTo(0, scrollY); + requestAnimationFrame(scrollStep); + } + else { + window.scrollTo(0, targetPosition); + } + } + requestAnimationFrame(scrollStep); + } + 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); + } + const 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); + } + /* Set aria-hidden state */ + this._setAriaHidden(); + this._setTabIndex(); + } + _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(); + } + 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._isDraggable()) + return; + let totalDeltaX = this._calculateDelta(e); + 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) => { + // Check if open and draggable + if (!this.isOpen || !this._isDraggable()) + return; + let totalDeltaX = this._calculateDelta(e); + // dragDirection is the attempted user drag direction + const dragDirection = totalDeltaX > 0 ? 'right' : 'left'; + 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(); + }; + _calculateDelta = (e) => { + // If not being dragged, set initial drag start variables + if (!this.isDragged) { + this._startDrag(e); + } + // Run touchmove updates + this._dragMoveUpdate(e); + // Calculate raw deltaX + return this._xPos - this._startingXpos; + }; + _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(); + } + _isDraggable() { + return this.options.draggable && !this._isCurrentlyFixed() && !this._verticallyScrolling; + } + _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(); + /* Set aria-hidden state */ + this._setAriaHidden(); + this._setTabIndex(); + } + }; + /** + * 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'; + } + /* Set aria-hidden state */ + this._setAriaHidden(); + this._setTabIndex(); + } + }; + _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; + // let slideOutPercent = 0; + // if (this.isDragged) { + // // @todo unused variable + // slideOutPercent = + // 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); + } + _setAriaHidden = () => { + this.el.ariaHidden = this.isOpen ? 'false' : 'true'; + const navWrapper = document.querySelector('.nav-wrapper ul'); + if (navWrapper) + navWrapper.ariaHidden = this.isOpen.toString(); + }; + _setTabIndex = () => { + const navLinks = document.querySelectorAll('.nav-wrapper ul li a'); + const sideNavLinks = document.querySelectorAll('.sidenav li a'); + if (navLinks) + navLinks.forEach((navLink) => { + navLink.tabIndex = this.isOpen ? -1 : 0; + }); + if (sideNavLinks) + sideNavLinks.forEach((sideNavLink) => { + sideNavLink.tabIndex = this.isOpen ? 0 : -1; + }); + }; + static { + Sidenav._sidenavs = []; + } +} + +const _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) => { + let tabLink = e.target; + if (!tabLink) + return; + let tab = tabLink.parentElement; + while (tab && !tab.classList.contains('tab')) { + tabLink = tabLink.parentElement; + tab = tab.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) { + let activeTabLink = this.el.querySelector('li.tab a.active'); + if (!activeTabLink) { + activeTabLink = this.el.querySelector('li.tab a'); + } + this._activeTabLink = activeTabLink; + } + 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.append(tabsWrapper.parentElement); + 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(); + } +} + +const _defaults$6 = { + onOpen: null, + onClose: null +}; +class TapTarget extends Component { + /** + * If the tap target is open. + */ + isOpen; + static _taptargets; + wrapper; + // private _origin: HTMLElement; + 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.originEl = document.querySelector(`#${el.dataset.target}`); + this.originEl.tabIndex = 0; + this._setup(); + this._calculatePositioning(); + this._setupEventHandlers(); + TapTarget._taptargets.push(this); + } + 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['M_TapTarget'] = undefined; + const index = TapTarget._taptargets.indexOf(this); + if (index >= 0) { + TapTarget._taptargets.splice(index, 1); + } + } + _setupEventHandlers() { + this.originEl.addEventListener('click', this._handleTargetToggle); + this.originEl.addEventListener('keypress', this._handleKeyboardInteraction, true); + // this.originEl.addEventListener('click', this._handleOriginClick); + // Resize + window.addEventListener('resize', this._handleThrottledResize); + } + _removeEventHandlers() { + this.originEl.removeEventListener('click', this._handleTargetToggle); + this.originEl.removeEventListener('keypress', this._handleKeyboardInteraction, true); + // this.originEl.removeEventListener('click', this._handleOriginClick); + window.removeEventListener('resize', this._handleThrottledResize); + } + _handleThrottledResize = Utils.throttle(function () { + this._handleResize(); + }, 200).bind(this); + _handleKeyboardInteraction = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + this._handleTargetToggle(); + } + }; + _handleTargetToggle = () => { + if (!this.isOpen) + this.open(); + else + this.close(); + }; + /*_handleOriginClick = () => { + this.close(); + }*/ + _handleResize = () => { + this._calculatePositioning(); + }; + _handleDocumentClick = (e) => { + if (e.target.closest(`#${this.el.dataset.target}`) !== this.originEl && + !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.el.parentElement.ariaExpanded = 'false'; + this.originEl.style.zIndex = '1002'; + // 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.originEl).position === 'fixed'; + if (!isFixed) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + let currentElem = this.originEl; + 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.originEl.offsetWidth; + const originHeight = this.originEl.offsetHeight; + const originTop = isFixed + ? this._offset(this.originEl).top - Utils.getDocumentScrollTop() + : this._offset(this.originEl).top; + const originLeft = isFixed + ? this._offset(this.originEl).left - Utils.getDocumentScrollLeft() + : this._offset(this.originEl).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.originEl); + } + this.isOpen = true; + this.wrapper.classList.add('open'); + this.wrapper.ariaExpanded = 'true'; + document.body.addEventListener('click', this._handleDocumentClick, true); + document.body.addEventListener('keypress', 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.originEl); + } + this.isOpen = false; + this.wrapper.classList.remove('open'); + this.wrapper.ariaExpanded = 'false'; + document.body.removeEventListener('click', this._handleDocumentClick, true); + document.body.removeEventListener('keypress', this._handleDocumentClick, true); + document.body.removeEventListener('touchend', this._handleDocumentClick); + }; + static { + TapTarget._taptargets = []; + } +} + +const _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, + autoSubmit: true, + // internationalization + i18n: { + cancel: 'Cancel', + clear: 'Clear', + done: 'Ok' + }, + twelveHour: true, // change to 12 hour AM/PM clock from 24 hour + vibrate: true, // vibrate the device when dragging clock hand + // Callbacks + onSelect: null, + onInputInteraction: null, + onDone: null, + onCancel: null, +}; +class Timepicker extends Component { + id; + containerEl; + 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; + /** Vibrate device when dragging clock hand. */ + vibrate; + _canvas; + hoursView; + spanAmPm; + footer; + _amBtn; + _pmBtn; + bg; + bearing; + g; + toggleViewTimer; + 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._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) { + const 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.containerEl.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('focus', () => this.showView('hours')); + this.inputHours.addEventListener('focusout', () => this.formatHours()); + this.inputMinutes.addEventListener('focus', () => this.showView('minutes')); + this.inputMinutes.addEventListener('focusout', () => this.formatMinutes()); + } + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleInputClick); + this.el.removeEventListener('keydown', this._handleInputKeydown); + } + _handleInputClick = () => { + this.inputHours.focus(); + if (typeof this.options.onInputInteraction === 'function') + this.options.onInputInteraction.call(this); + }; + _handleInputKeydown = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + e.preventDefault(); + this.inputHours.focus(); + if (typeof this.options.onInputInteraction === 'function') + this.options.onInputInteraction.call(this); + } + }; + _handleTimeInputEnterKey = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + e.preventDefault(); + this._inputFromTextField(); + } + }; + _handleClockClickStart = (e) => { + e.preventDefault(); + const clockPlateBR = this.plate.getBoundingClientRect(); + const offset = { x: clockPlateBR.left, y: clockPlateBR.top }; + this.x0 = offset.x + this.options.dialRadius; + this.y0 = offset.y + this.options.dialRadius; + this.moved = false; + const 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(); + const clickPos = Timepicker._Pos(e); + const x = clickPos.x - this.x0; + const 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); + const clickPos = Timepicker._Pos(e); + const x = clickPos.x - this.x0; + const y = clickPos.y - this.y0; + if (this.moved && x === this.dx && y === this.dy) { + this.setHand(x, y); + } + if (this.currentView === 'hours') { + this.inputMinutes.focus(); + this.showView('minutes', this.options.duration / 2); + } + else { + // this.minutesView.classList.add('timepicker-dial-out'); + setTimeout(() => { + if (this.options.autoSubmit) + 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.containerEl = template.content.firstChild; + this.containerEl.id = 'container-' + 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.containerEl); + } + else { + this.el.parentElement.appendChild(this.containerEl); + } + } + _setupVariables() { + this.currentView = 'hours'; + this.vibrate = navigator.vibrate + ? 'vibrate' + : navigator['webkitVibrate'] + ? 'webkitVibrate' + : null; + this._canvas = this.containerEl.querySelector('.timepicker-canvas'); + this.plate = this.containerEl.querySelector('.timepicker-plate'); + this.digitalClock = this.containerEl.querySelector('.timepicker-display-column'); + this.hoursView = this.containerEl.querySelector('.timepicker-hours'); + this.minutesView = this.containerEl.querySelector('.timepicker-minutes'); + this.inputHours = this.containerEl.querySelector('.timepicker-input-hours'); + this.inputMinutes = this.containerEl.querySelector('.timepicker-input-minutes'); + this.spanAmPm = this.containerEl.querySelector('.timepicker-span-am-pm'); + this.footer = this.containerEl.querySelector('.timepicker-footer'); + this.amOrPm = 'PM'; + } + _createButton(text, visibility) { + const button = document.createElement('button'); + button.classList.add('btn', 'btn-flat', 'waves-effect', 'text'); + button.style.visibility = visibility; + button.type = 'button'; + button.tabIndex = -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); + if (!this.options.autoSubmit) { + 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); + } + this._updateTimeFromInput(); + this.showView('hours'); + } + _clockSetup() { + if (this.options.twelveHour) { + // AM Button + this._amBtn = document.createElement('div'); + this._amBtn.classList.add('am-btn', 'btn'); + this._amBtn.innerText = 'AM'; + this._amBtn.tabIndex = 0; + this._amBtn.addEventListener('click', this._handleAmPmClick); + this._amBtn.addEventListener('keypress', this._handleAmPmKeypress); + this.spanAmPm.appendChild(this._amBtn); + // PM Button + this._pmBtn = document.createElement('div'); + this._pmBtn.classList.add('pm-btn', 'btn'); + this._pmBtn.innerText = 'PM'; + this._pmBtn.tabIndex = 0; + this._pmBtn.addEventListener('click', this._handleAmPmClick); + this._pmBtn.addEventListener('keypress', this._handleAmPmKeypress); + this.spanAmPm.appendChild(this._pmBtn); + } + this._buildHoursView(); + this._buildMinutesView(); + this._buildSVGClock(); + } + _buildSVGClock() { + // Draw clock hands and others + const dialRadius = this.options.dialRadius; + const tickRadius = this.options.tickRadius; + const diameter = dialRadius * 2; + const svg = Timepicker._createSVGEl('svg'); + svg.setAttribute('class', 'timepicker-svg'); + svg.setAttribute('width', diameter.toString()); + svg.setAttribute('height', diameter.toString()); + const g = Timepicker._createSVGEl('g'); + g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')'); + const bearing = Timepicker._createSVGEl('circle'); + bearing.setAttribute('class', 'timepicker-canvas-bearing'); + bearing.setAttribute('cx', '0'); + bearing.setAttribute('cy', '0'); + bearing.setAttribute('r', '4'); + const hand = Timepicker._createSVGEl('line'); + hand.setAttribute('x1', '0'); + hand.setAttribute('y1', '0'); + const 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; + this._buildHoursTick(i, radian, radius); + } + } + 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; + this._buildHoursTick(i, radian, radius); + } + } + } + _buildHoursTick(i, radian, radius) { + const tick = document.createElement('div'); + tick.classList.add('timepicker-tick'); + 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); + } + _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) => { + this._handleAmPmInteraction(e.target); + }; + _handleAmPmKeypress = (e) => { + if (Utils.keys.ENTER.includes(e.key)) { + this._handleAmPmInteraction(e.target); + } + }; + _handleAmPmInteraction = (e) => { + this.amOrPm = e.classList.contains('am-btn') ? 'AM' : 'PM'; + this._updateAmPmView(); + }; + _updateAmPmView() { + if (this.options.twelveHour) { + if (this.amOrPm === 'PM') { + this._amBtn.classList.remove('filled'); + this._pmBtn.classList.add('filled'); + } + else if (this.amOrPm === 'AM') { + this._amBtn.classList.add('filled'); + this._pmBtn.classList.remove('filled'); + } + } + } + _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') { + const 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 = Timepicker._addLeadingZero(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'. + * @param delay + */ + showView = (view, delay = null) => { + if (view === 'minutes' && getComputedStyle(this.hoursView).visibility === 'visible') ; + const 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) { + const 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; + if (delay) { + this._canvas?.classList.add('timepicker-canvas-out'); + setTimeout(() => { + this._canvas?.classList.remove('timepicker-canvas-out'); + this.setHand(x, y); + }, delay); + } + else { + this.setHand(x, y); + } + } + _inputFromTextField = () => { + const isHours = this.currentView === 'hours'; + if (isHours && this.inputHours.value !== '') { + const value = parseInt(this.inputHours.value); + if (value > 0 && value < (this.options.twelveHour ? 13 : 24)) { + this.hours = value; + } + else { + this.setHoursDefault(); + } + this.drawClockFromTimeInput(this.hours, isHours); + } + else if (!isHours && this.inputMinutes.value !== '') { + const value = parseInt(this.inputMinutes.value); + if (value >= 0 && value < 60) { + this.minutes = value; + } + else { + this.minutes = new Date().getMinutes(); + this.inputMinutes.value = this.minutes.toString(); + } + this.drawClockFromTimeInput(this.minutes, isHours); + } + }; + drawClockFromTimeInput(value, isHours) { + const unit = Math.PI / (isHours ? 6 : 30); + const radian = value * unit; + let radius; + if (this.options.twelveHour) { + radius = this.options.outerRadius; + } + else { + radius = + isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius; + } + this.setClockAttributes(radian, radius); + } + setHand(x, y, roundBy5 = false) { + const 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; + let radian = Math.atan2(x, -y), 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 = Timepicker._addLeadingZero(value); + } + else { + this.inputMinutes.value = Timepicker._addLeadingZero(value); + } + // Set clock hand and others' position + this.setClockAttributes(radian, radius); + } + setClockAttributes(radian, radius) { + const 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()); + } + formatHours() { + if (this.inputHours.value == '') + this.setHoursDefault(); + this.inputHours.value = Timepicker._addLeadingZero(Number(this.inputHours.value)); + } + formatMinutes() { + if (this.inputMinutes.value == '') + this.minutes = new Date().getMinutes(); + this.inputMinutes.value = Timepicker._addLeadingZero(Number(this.inputMinutes.value)); + } + setHoursDefault() { + this.hours = new Date().getHours(); + this.inputHours.value = (this.hours % (this.options.twelveHour ? 12 : 24)).toString(); + } + done = (clearValue = null) => { + // Set input value + const 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 })); + } + }; + confirm = () => { + this.done(); + if (typeof this.options.onDone === 'function') { + setTimeout(() => { + this.options.onDone.call(this); + }, this.options.duration / 2); + } + }; + cancel = () => { + this.clear(); + if (typeof this.options.onDone === 'function') + this.options.onCancel.call(this); + }; + clear = () => { + this.done(true); + }; + // deprecated + open() { + console.warn('Timepicker.close() is deprecated. Remove this method and wrap in modal yourself.'); + return this; + } + close() { + console.warn('Timepicker.close() is deprecated. Remove this method and wrap in modal yourself.'); + return this; + } + static { + Timepicker._template = `
+
+
+
+
+ +
+
+ : +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`; + } +} + +const _defaults$4 = { + exitDelay: 200, + enterDelay: 0, + text: '', + margin: 5, + inDuration: 250, + outDuration: 200, + position: 'bottom', + transitionMovement: 10, + opacity: 1 +}; +class Tooltip extends Component { + /** + * If tooltip is open. + */ + isOpen; + /** + * If tooltip is hovered. + */ + isHovered; + /** + * If tooltip is focused. + */ + isFocused; + tooltipEl; + _exitDelayTimeout; + _enterDelayTimeout; + xMovement; + yMovement; + constructor(el, options) { + super(el, options, Tooltip); + this.el['M_Tooltip'] = this; + this.options = { + ...Tooltip.defaults, + ...this._getAttributeOptions(), + ...options + }; + this.isOpen = false; + this.isHovered = false; + this.isFocused = false; + this._appendTooltipEl(); + this._setupEventHandlers(); + } + static get defaults() { + return _defaults$4; + } + /** + * Initializes instances of Tooltip. + * @param els HTML elements. + * @param options Component options. + */ + static init(els, options = {}) { + return super.init(els, options, Tooltip); + } + static getInstance(el) { + return el['M_Tooltip']; + } + destroy() { + this.tooltipEl.remove(); + this._removeEventHandlers(); + this.el['M_Tooltip'] = undefined; + } + _appendTooltipEl() { + this.tooltipEl = document.createElement('div'); + this.tooltipEl.classList.add('material-tooltip'); + const tooltipContentEl = this.options.tooltipId + ? document.getElementById(this.options.tooltipId) + : document.createElement('div'); + this.tooltipEl.append(tooltipContentEl); + tooltipContentEl.style.display = ''; + tooltipContentEl.classList.add('tooltip-content'); + this._setTooltipContent(tooltipContentEl); + this.tooltipEl.appendChild(tooltipContentEl); + document.body.appendChild(this.tooltipEl); + } + _setTooltipContent(tooltipContentEl) { + if (this.options.tooltipId) + return; + tooltipContentEl.innerText = this.options.text; + } + _updateTooltipContent() { + this._setTooltipContent(this.tooltipEl.querySelector('.tooltip-content')); + } + _setupEventHandlers() { + this.el.addEventListener('mouseenter', this._handleMouseEnter); + this.el.addEventListener('mouseleave', this._handleMouseLeave); + this.el.addEventListener('focus', this._handleFocus, true); + this.el.addEventListener('blur', this._handleBlur, true); + } + _removeEventHandlers() { + this.el.removeEventListener('mouseenter', this._handleMouseEnter); + this.el.removeEventListener('mouseleave', this._handleMouseLeave); + this.el.removeEventListener('focus', this._handleFocus, true); + this.el.removeEventListener('blur', this._handleBlur, true); + } + /** + * Show tooltip. + */ + open = (isManual) => { + 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() { + const 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 = () => { + const 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'); + } + } +} + +const _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); + }; +} + +const _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); + const 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) { + const toast = Toast._draggedToast; + toast.panning = false; + toast.el.classList.remove('panning'); + const totalDeltaX = toast.xPos - toast.startingXPos; + const activationDistance = toast.el.offsetWidth * toast.options.activationPercent; + const 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 (const 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() { + clearInterval(this.counterInterval); + const 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; + } +} + +/* eslint-disable @typescript-eslint/no-unused-vars */ +const version = '2.2.1'; +/** + * Automatically initialize components. + * @param context Root element to initialize. Defaults to `document.body`. + * @param options Options for each component. + */ +function AutoInit(context = document.body, options) { + const registry = { + Autocomplete: context.querySelectorAll('.autocomplete:not(.no-autoinit)'), + Cards: context.querySelectorAll('.cards: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, options?.Autocomplete ?? {}); + Cards.init(registry.Cards, options?.Cards ?? {}); + Carousel.init(registry.Carousel, options?.Carousel ?? {}); + Chips.init(registry.Chips, options?.Chips ?? {}); + Collapsible.init(registry.Collapsible, options?.Collapsible ?? {}); + Datepicker.init(registry.Datepicker, options?.Datepicker ?? {}); + Dropdown.init(registry.Dropdown, options?.Dropdown ?? {}); + Materialbox.init(registry.Materialbox, options?.Materialbox ?? {}); + Modal.init(registry.Modal, options?.Modal ?? {}); + Parallax.init(registry.Parallax, options?.Parallax ?? {}); + Pushpin.init(registry.Pushpin, options?.Pushpin ?? {}); + ScrollSpy.init(registry.ScrollSpy, options?.ScrollSpy ?? {}); + FormSelect.init(registry.FormSelect, options?.FormSelect ?? {}); + Sidenav.init(registry.Sidenav, options?.Sidenav ?? {}); + Tabs.init(registry.Tabs, options?.Tabs ?? {}); + TapTarget.init(registry.TapTarget, options?.TapTarget ?? {}); + Timepicker.init(registry.Timepicker, options?.Timepicker ?? {}); + Tooltip.init(registry.Tooltip, options?.Tooltip ?? {}); + FloatingActionButton.init(registry.FloatingActionButton, options?.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); +} +Forms.Init(); +Chips.Init(); +Waves.Init(); +Range.Init(); + +export { AutoInit, Autocomplete, Cards, Carousel, CharacterCounter, Chips, Collapsible, Datepicker, Dropdown, FloatingActionButton, FormSelect, Forms, Materialbox, Modal, Parallax, Pushpin, Range, ScrollSpy, Sidenav, Slider, Tabs, TapTarget, Timepicker, Toast, Tooltip, Waves, version }; diff --git a/sass/components/_breadcrumb.scss b/sass/components/_breadcrumb.scss new file mode 100644 index 0000000000..7ef883c0a8 --- /dev/null +++ b/sass/components/_breadcrumb.scss @@ -0,0 +1,27 @@ +.breadcrumb-wrapper { + display: flex; + align-items: center; +} + +.breadcrumb { + display: inline-flex; + align-items: center; + + i, + i.material-icons, i.material-symbols-outlined, + i.material-symbols-rounded, i.material-symbols-sharp, + &:before { + font-weight: normal; + font-style: normal; + font-size: 24px; + } + + &:before { + content: '\E5CC'; + font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons'; + } + + &:first-child:before { + visibility: hidden; + } +} diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss index dbf1767a30..c3dad68e2f 100644 --- a/sass/components/_buttons.scss +++ b/sass/components/_buttons.scss @@ -1,4 +1,4 @@ -.btn, .btn-floating, .btn-large, .btn-small, .btn-flat { +:root { --btn-height: 40px; --btn-font-size-icon: 16px; --btn-padding: 24px; @@ -6,23 +6,16 @@ --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: var(--btn-font-size); - font-weight: 500; - text-decoration: none; - display: inline-flex; - align-items: center; - cursor: pointer; - -webkit-tap-highlight-color: transparent; // Gets rid of tap active state - white-space: nowrap; - outline: 0; - user-select: none; - transition: background-color .2s ease-out; +.btn, .btn-floating, .btn-large, .btn-small, .btn-flat { + @include btn( + var(--btn-height), + var(--btn-border-radius), + var(--btn-padding), + var(--btn-padding), + var(--btn-font-size) + ); } // Icon @@ -54,31 +47,23 @@ //------------------ Enabled .btn.filled { - color: var(--md-sys-color-on-primary); - background-color: var(--md-sys-color-primary); + @include btn-filled; } .btn.tonal { - color: var(--md-sys-color-on-secondary-container); - background-color: var(--md-sys-color-secondary-container); + @include btn-tonal; } .btn.elevated { - color: var(--md-sys-color-on-secondary-container); - background-color: var(--md-sys-color-secondary-container); - @extend .z-depth-1; + @include btn-elevated; } .btn.outlined { - background-color: transparent; - color: var(--md-sys-color-primary); - border: 1px solid var(--md-sys-color-outline); + @include btn-outlined; } .btn.text, .btn-flat { - @extend .z-depth-0; - color: var(--md-sys-color-primary); - background-color: transparent; + @include btn-flat; } //------------------ Disabled @@ -86,17 +71,12 @@ .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] { - @extend .z-depth-0; - 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; + @include btn-disabled(); } //------------------ Hover -.btn.elevated:hover { +/*.btn.elevated:hover { @extend .z-depth-2; 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%); @@ -122,11 +102,11 @@ .btn.text:hover { color: var(--md-sys-color-primary); background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent); -} +}*/ //------------------ Focus -.btn:focus { +/*.btn:focus { background-color: var(--md-sys-color-primary-container); } @@ -157,10 +137,10 @@ .btn:focus.text { color: var(--md-sys-color-primary); background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%); -} +}*/ // Focus with Keyboard -.btn:focus-visible { +/*.btn:focus-visible { &.filled, &.elevated, &.tonal, @@ -169,7 +149,7 @@ outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } -} +}*/ //---------- diff --git a/sass/components/_cards.scss b/sass/components/_cards.scss index ff01560383..a02c3be1fd 100644 --- a/sass/components/_cards.scss +++ b/sass/components/_cards.scss @@ -141,6 +141,10 @@ bottom: 0; cursor: pointer; } + + img.activator { + position: relative; + } } .card-content { @@ -171,11 +175,13 @@ border-radius: 0 0 2px 2px; } - border-top: 1px solid var(--md-sys-color-outline-variant); - position: relative; - background-color: inherit; + // position: relative; + padding: 0 1.6rem; + // border-top: 1px solid var(--md-sys-color-outline-variant); + // background-color: inherit; - a { + // Replaced card links with buttons (Accessibility, @see https://github.com/materializecss/materialize/issues/565) + /*a { padding: 16px 24px; display: inline-block; } @@ -187,6 +193,33 @@ &:hover { background-color: rgba(var(--md-sys-color-primary-numeric), 0.06); } + }*/ + + a { + @include btn( + var(--btn-height), + var(--btn-border-radius), + var(--btn-padding), + var(--btn-padding), + var(--btn-font-size) + ); + + &:first-child { + margin-left: -1.6rem; + } + + &:last-child { + margin-right: -1.6rem; + } + } + + .btn { + &.filled, + &.tonal, + &.elevated, + &.outlined { + margin: 0 .26rem 1.6rem 0; + } } } diff --git a/sass/components/_datepicker.scss b/sass/components/_datepicker.scss index be6491e9c3..c8cadfca8e 100644 --- a/sass/components/_datepicker.scss +++ b/sass/components/_datepicker.scss @@ -1,13 +1,16 @@ /* Modal */ -.datepicker-modal { +// @removed since v2.2.1 +/*.datepicker-modal { max-width: 325px; + // @removed since v2.2.1-dev regarding Material M3 standards min-width: 300px; max-height: none; -} +}*/ -.datepicker-container.modal-content { +.datepicker-container { display: flex; flex-direction: column; + max-width: 325px; padding: 0; background-color: var(--md-sys-color-surface); } @@ -43,6 +46,11 @@ vertical-align: middle; } + .select-year input, + .select-month input { + background-color: transparent; + } + .select-year input { width: 50px; } @@ -75,9 +83,11 @@ /* Date Display */ .datepicker-date-display { flex: 1 auto; - background-color: var(--md-sys-color-primary); - color: var(--md-sys-color-on-primary); + // @removed since v2.2.1-dev regarding Material M3 standards + // background-color: var(--md-sys-color-primary); + // color: var(--md-sys-color-on-primary); padding: 20px 22px; + border-bottom: 1px solid var(--md-sys-color-surface-variant-light); font-weight: 500; .year-text { @@ -93,6 +103,12 @@ line-height: 47px; font-weight: 500; } + + .daterange & { + .date-text { + font-size: 1.8rem; + } + } } @@ -124,46 +140,98 @@ color: var(--md-sys-color-on-surface-variant); } - td { + .datepicker-day { color: var(--md-sys-color-on-background); &.is-today { color: var(--md-sys-color-primary); } - &.is-selected { + /*&.is-selected button { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); - } - - &.is-outside-current-month, - &.is-disabled { - color: var(--md-sys-color-on-surface); - pointer-events: none; - } + }*/ - border-radius: 50%; + // border-radius: 50%; padding: 0; } } +// @todo +.datepicker-day.has-event {} +// @todo +.datepicker-day.is-inrange {} +// @todo +.datepicker-day.is-startrange {} +// @todo +.datepicker-day.is-endrange {} + +.datepicker-day.is-daterange-start, +.datepicker-day.is-daterange-end, +.datepicker-day.is-daterange { + position: relative; + + &:before { + position: absolute; + top: 5px; + width: 100%; + height: 34px; + content: ''; + background-color: var(--md-sys-color-primary-container); + z-index: 0; + } +} + +.datepicker-day.is-daterange-start:before, +.datepicker-day.is-daterange-end:before { + width: 50%; +} + +.datepicker-day.is-daterange-start:before { + left: 50%; +} + +.datepicker-day.is-daterange .datepicker-day-button:before { + background-color: var(--md-sys-color-primary-container); +} + .datepicker-day-button { background-color: transparent; border: none; - line-height: 38px; + line-height: 34px; display: block; - width: 100%; + width: 34px; border-radius: 50%; + margin: 5px; padding: 0 5px; cursor: pointer; color: inherit; + position: relative; + z-index: 1; + &:hover { background-color: rgba(var(--md-sys-color-primary-numeric), 0.06); } &:focus { - background-color: rgba(var(--md-sys-color-primary-numeric), 0.18); + border-color: var(--md-sys-color-primary); + } + + .is-selected & { + background-color: var(--md-sys-color-primary); + color: var(--md-sys-color-on-primary); + + &:focus { + background-color: var(--md-sys-color-surface-variant); + color: var(--md-sys-color-primary); + } + } + + &.is-outside-current-month button, + &.is-disabled button { + color: var(--md-sys-color-on-surface); + pointer-events: none; } } @@ -192,7 +260,8 @@ /* Media Queries */ @media #{$medium-and-up} { - .datepicker-modal { + // @removed since v2.2.1-dev regarding Material M3 standards + /*.datepicker-modal { max-width: 625px; } @@ -212,5 +281,5 @@ .datepicker-day-button { line-height: 44px; - } + }*/ } diff --git a/sass/components/_global.scss b/sass/components/_global.scss index e37bbce2b2..85b46f52ea 100644 --- a/sass/components/_global.scss +++ b/sass/components/_global.scss @@ -19,7 +19,7 @@ textarea { font-family: $font-stack; } -a { color: $link-color; text-decoration: none; +a { color: $link-color; text-decoration: none; -webkit-tap-highlight-color: transparent; // Gets rid of tap active state } @@ -117,7 +117,7 @@ i { // Modal html.noscroll { - position: fixed; + position: fixed; overflow-y: scroll; width: 100%; } @@ -129,8 +129,9 @@ video.responsive-video { height: auto; } +// moved to own component styling file @see https://github.com/materializecss/materialize/issues/566 // Pagination -.pagination { +/*.pagination { li { display: inline-block; @@ -192,45 +193,7 @@ video.responsive-video { white-space: nowrap; } } -} - -// Breadcrumbs -.breadcrumb { - display: inline-block; - font-size: 18px; - color: var(--font-on-primary-color-medium); - - i, - [class^="mdi-"], [class*="mdi-"], - i.material-icons, i.material-symbols-outlined, - i.material-symbols-rounded, i.material-symbols-sharp { - display: block; - float: left; - font-size: 24px; - } - - &: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; - } - - &:first-child:before { - display: none; - } - - &:last-child { - color: var(--md-sys-color-on-primary); - } -} +}*/ // Parallax .parallax-container { @@ -526,7 +489,7 @@ $spacing-shortcuts: ("margin": "m", "padding": "p") !default; $spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default; $spacing-horizontal: "x" !default; $spacing-vertical: "y" !default; -$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default; +$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default; @each $property, $shortcut in $spacing-shortcuts{ @each $name, $value in $spacing-values{ @@ -537,7 +500,7 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5 // (t, b, r, l) spacing @each $direction, $suffix in $spacing-directions{ .#{$shortcut}#{$suffix}-#{$name}{ - #{$property}-#{$direction}: $value !important + #{$property}-#{$direction}: $value !important } } // x spacing @@ -552,7 +515,7 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5 .#{$shortcut}#{$spacing-vertical}-#{$name}{ #{$property}-top: $value !important; #{$property}-bottom: $value !important; - } - } + } + } } -} \ No newline at end of file +} diff --git a/sass/components/_pagination.scss b/sass/components/_pagination.scss new file mode 100644 index 0000000000..1b74216609 --- /dev/null +++ b/sass/components/_pagination.scss @@ -0,0 +1,45 @@ +// Pagination +.pagination { + li { + display: inline-block; + vertical-align: top; + + a { + @include btn($height: 2rem, $padding-left: .66rem, $padding-right: .66rem, $font-size: 1.2rem); + } + + &.active a { + @include btn-filled; + } + + &.disabled a { + @include btn-disabled; + } + + i { + font-size: 2rem; + } + } + + li.pages ul li { + display: inline-block; + float: none; + } +} + +@media #{$medium-and-down} { + .pagination { + width: 100%; + + li.prev, + li.next { + width: 10%; + } + + li.pages { + width: 80%; + overflow: hidden; + white-space: nowrap; + } + } +} diff --git a/sass/components/_timepicker.scss b/sass/components/_timepicker.scss index adb2b4cc0c..44516e409a 100644 --- a/sass/components/_timepicker.scss +++ b/sass/components/_timepicker.scss @@ -1,37 +1,40 @@ /* Timepicker Containers */ -.timepicker-modal { +/* modal removed as of v2.2.1 */ +/* .timepicker-modal { max-width: 325px; max-height: none; -} +}*/ -.timepicker-container.modal-content { +.timepicker-container { display: flex; flex-direction: column; + max-width: 325px; padding: 0; + background-color: var(--md-sys-color-inverse-on-surface); } .text-primary { color: var(--md-sys-color-on-primary); } - /* Clock Digital Display */ .timepicker-digital-display { width: auto; flex: 1 auto; - background-color: var(--md-sys-color-primary);; + // background-color: var(--md-sys-color-surface); padding: 2rem .67rem .67rem .67rem; font-weight: 300; } .timepicker-text-container { + display: flex; font-size: 4rem; text-align: left; color: var(--font-on-primary-color-medium); font-weight: 400; - position: relative; + /*position: relative;*/ user-select: none; - padding: 1rem 1rem 1.5rem 1rem; + padding: 1rem 1rem 1.3rem 1rem; input[type=text]{ height: 4rem; @@ -46,10 +49,15 @@ display: inline-flex; } +.timepicker-display-digital-clock { + flex-grow: 1; + display: inline-flex; +} + .timepicker-input-hours-wrapper, .timepicker-input-minutes-wrapper { width: 6.9rem; - height: 5.2rem; + height: 5.75rem; } .timepicker-input-hours, @@ -61,9 +69,15 @@ input[type=text].timepicker-input-hours, input[type=text].timepicker-input-minutes { height: 100%; - padding: .8rem; + padding: 1.33rem .8rem; border: 0; text-align: center; + color: var(--md-sys-color-on-background); + background-color: var(--md-sys-color-surface-variant); + + &:focus { + background-color: var(--md-sys-color-primary-container); + } } .timepicker-input-divider-wrapper { @@ -71,42 +85,42 @@ input[type=text].timepicker-input-minutes { text-align: center; } -input[type=text].text-primary { +/*input[type=text].text-primary { color: var(--md-sys-color-on-background); -} +}*/ .timepicker-display-am-pm { font-size: 1.3rem; - position: absolute; + /*position: absolute; top: 1rem; - right: 1rem; + right: 1rem;*/ font-weight: 400; } .timepicker-span-am-pm { - height: 5.2rem; + height: 5.75rem; max-width: 3.5rem; } -.timepicker-modal .am-btn, -.timepicker-modal .pm-btn { +.timepicker-container .am-btn, +.timepicker-container .pm-btn { width: 3.6rem; height: 50%; - padding-left: calc(var(--btn-padding) / 1.6); - padding-right: calc(var(--btn-padding) / 1.6); + padding-left: calc(var(--btn-padding) / 1.8); + padding-right: calc(var(--btn-padding) / 1.8); line-height: 2rem; vertical-align: middle; text-align: center; - background-color: transparent; + // background-color: transparent; border: 1px solid var(--md-sys-color-outline); } -.timepicker-modal .am-btn { +.timepicker-container .am-btn { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } -.timepicker-modal .pm-btn { +.timepicker-container .pm-btn { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; @@ -116,17 +130,17 @@ input[type=text].text-primary { .timepicker-analog-display { flex: 2.5 auto; padding: .67rem; - background-color: var(--md-sys-color-surface); + // background-color: var(--md-sys-color-surface); } .timepicker-plate { - background-color: rgba(0, 0, 0, 0.09); + background-color: var(--md-sys-color-surface-variant); border-radius: 50%; width: 260px; height: 260px; overflow: visible; position: relative; - margin: 2rem 1.6rem 1.6rem 1.6rem; + margin: 0 1.6rem 1.6rem 1.6rem; user-select: none; } @@ -224,12 +238,12 @@ input[type=text].text-primary { /* Media Queries */ @media #{$large-and-up} { - .timepicker-modal { + .timepicker-container { width: auto; max-width: 620px; } - .timepicker-container.modal-content { + .timepicker-container { flex-direction: row; } @@ -238,42 +252,55 @@ input[type=text].text-primary { } .timepicker-text-container { - top: 31%; + /*top: 31%;*/ + flex-direction: column; + margin-top: 4.8rem; text-align: center; } + .timepicker-display-column { + padding: 0 3%; + } + .timepicker-display-am-pm { - position: relative; + /*position: relative; top: auto; right: auto; - text-align: center; - margin-top: 1.2rem; + text-align: center;*/ + margin-top: 1.1rem; } .timepicker-span-am-pm { + display: flex; + flex-grow: 1; max-width: unset; } - .timepicker-modal .am-btn, - .timepicker-modal .pm-btn { - width: auto; - padding-left: var(--btn-padding); - padding-right: var(--btn-padding); + .timepicker-container .am-btn, + .timepicker-container .pm-btn { + flex-grow: 1; + /*width: auto;*/ + padding-left: calc(var(--btn-padding) / .565); + padding-right: calc(var(--btn-padding) / .565); border-radius: var(--btn-border-radius); border: 1px solid var(--md-sys-color-outline); - line-height: inherit; + /*line-height: inherit; vertical-align: top; - text-align: inherit; + text-align: inherit;*/ } - .timepicker-modal .am-btn { + .timepicker-container .am-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } - .timepicker-modal .pm-btn { + .timepicker-container .pm-btn { border-left: 0; border-bottom-left-radius: 0; border-top-left-radius: 0; } + + .timepicker-plate { + margin-top: 1.6rem; + } } diff --git a/sass/components/mixins.module.scss b/sass/components/mixins.module.scss new file mode 100644 index 0000000000..cdb9f469b6 --- /dev/null +++ b/sass/components/mixins.module.scss @@ -0,0 +1,155 @@ +@mixin btn( + $height: var(--btn-height), + $border-radius: var(--btn-border-radius), + $padding-left: var(--btn-padding), + $padding-right: var(--btn-padding), + $font-size: var(--btn-font-size), +) { + height: $height; + border-radius: $border-radius; + padding-left: $padding-left; + padding-right: $padding-right; + font-size: $font-size; + font-weight: 500; + text-decoration: none; + display: inline-flex; + align-items: center; + cursor: pointer; + -webkit-tap-highlight-color: transparent; // Gets rid of tap active state + white-space: nowrap; + outline: 0; + user-select: none; + transition: background-color .2s ease-out; + + &:focus { + background-color: var(--md-sys-color-primary-container); + } +} + +@mixin btn-filled { + color: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-primary); + + &:hover, + &:focus { + color: var(--md-sys-color-on-primary); + } + + &:hover { + @extend .z-depth-1; + background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%); + } + + &:focus { + @extend .z-depth-0; + background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%); + } + + @include focus-visible(); +} + +@mixin btn-tonal { + color: var(--md-sys-color-on-secondary-container); + background-color: var(--md-sys-color-secondary-container); + + &:hover, + &:focus { + color: var(--md-sys-color-on-secondary-container); + } + + &:hover { + @extend .z-depth-1; + background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%); + } + + &:focus { + @extend .z-depth-0; + background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%); + } + + @include focus-visible(); +} + +@mixin btn-elevated { + color: var(--md-sys-color-on-secondary-container); + background-color: var(--md-sys-color-secondary-container); + @extend .z-depth-1; + + &:hover, + &:focus { + color: var(--md-sys-color-primary); + } + + &:hover { + @extend .z-depth-2; + background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%); + } + + &:focus { + @extend .z-depth-1; + background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%); + } + + @include focus-visible(); +} + +@mixin btn-outlined { + background-color: transparent; + color: var(--md-sys-color-primary); + border: 1px solid var(--md-sys-color-outline); + + &:hover, + &:focus { + color: var(--md-sys-color-primary); + } + + &:hover { + background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%); + } + + &:focus { + background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%); + border: 1px solid var(--md-sys-color-primary); + } + + @include focus-visible(); +} + +@mixin btn-flat { + @extend .z-depth-0; + color: var(--md-sys-color-primary); + background-color: transparent; + + &:hover, + &:focus { + color: var(--md-sys-color-primary); + } + + &:hover { + background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent); + } + + &:focus { + background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%); + } + + @include focus-visible(); +} + +@mixin btn-disabled { + @extend .z-depth-0; + 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; +} + +// Focus with Keyboard +@mixin focus-visible { + &:focus-visible { + outline: 3px solid var(--md-sys-color-secondary); + outline-offset: 2px; + } +} + diff --git a/sass/materialize.scss b/sass/materialize.scss index 523418335f..ab2aea1bab 100644 --- a/sass/materialize.scss +++ b/sass/materialize.scss @@ -5,6 +5,7 @@ //@import "components/_theme_variables"; @import "components/colors.module"; @import "components/typography.module"; +@import "components/mixins.module"; // Color @import "components/color-variables"; @@ -17,6 +18,7 @@ // components @import "components/global"; +@import "components/buttons"; @import "components/collection"; @import "components/badges"; @import "components/icons-material-design"; @@ -28,7 +30,6 @@ @import "components/toast"; @import "components/tabs"; @import "components/tooltip"; -@import "components/buttons"; @import "components/dropdown"; @import "components/modal"; @@ -45,3 +46,5 @@ @import "components/pulse"; @import "components/datepicker"; @import "components/timepicker"; +@import "components/breadcrumb"; +@import "components/pagination"; diff --git a/spec/tests/datepicker/datepickerSpec.js b/spec/tests/datepicker/datepickerSpec.js index 65cd696e76..2ec93cdcab 100644 --- a/spec/tests/datepicker/datepickerSpec.js +++ b/spec/tests/datepicker/datepickerSpec.js @@ -16,11 +16,11 @@ describe('Datepicker Plugin', () => { it('can have a string format', (done) => { const input = document.querySelector('#datepickerInput'); const today = new Date(); - M.Datepicker.init(input, { format: 'mm/dd/yyyy' }); + M.Datepicker.init(input, { format: 'mm/dd/yyyy', openByDefault: true }); const datepicker = M.Datepicker.getInstance(input); //datepicker.open(); setTimeout(() => { - const day1 = document.querySelector('.datepicker-modal button[data-day="1"]'); + const day1 = document.querySelector('.datepicker-container button[data-day="1"]'); day1.click(); document.querySelector('.datepicker-done').click(); setTimeout(() => { @@ -37,11 +37,11 @@ describe('Datepicker Plugin', () => { const input = document.querySelector('#datepickerInput'); const today = new Date(); const formatFn = `${today.getFullYear() - 100}-${today.getMonth() + 1}-99`; - M.Datepicker.init(input, { format: formatFn }); + M.Datepicker.init(input, { format: formatFn, openByDefault: true }); const datepicker = M.Datepicker.getInstance(input); //datepicker.open(); setTimeout(() => { - const day1 = document.querySelector('.datepicker-modal button[data-day="1"]'); + const day1 = document.querySelector('.datepicker-container button[data-day="1"]'); day1.click(); document.querySelector('.datepicker-done').click(); setTimeout(() => { @@ -55,7 +55,7 @@ describe('Datepicker Plugin', () => { it('can change the calendar modal selected date by input', (done) => { const input = document.querySelector('#datepickerInput'); - M.Datepicker.init(input, { format: 'mm/dd/yyyy' }); + M.Datepicker.init(input, { format: 'mm/dd/yyyy', openByDefault: true }); const today = new Date(); const month = today.getMonth(); const year = today.getFullYear() - 44; @@ -84,7 +84,7 @@ describe('Datepicker Plugin', () => { it('should have a date range input field if date range option is enabled', (done) => { const input = document.querySelector('#datepickerInput'); - M.Datepicker.init(input, { isDateRange: true }); + M.Datepicker.init(input, { isDateRange: true, openByDefault: true }); setTimeout(() => { expect(document.querySelector('.datepicker-end-date')).toExist( 'end date input should exist' @@ -95,13 +95,13 @@ describe('Datepicker Plugin', () => { it('should have multiple input fields if multiple select option is enabled and multiple dates are selected', (done) => { const input = document.querySelector('#datepickerInput'); - M.Datepicker.init(input, { isMultipleSelection: true }); + M.Datepicker.init(input, { isMultipleSelection: true, openByDefault: true }); const datepicker = M.Datepicker.getInstance(input); datepicker.open(); setTimeout(() => { - for (let i = 1; i < 4; i++) { + for (let i = 1; i <= 3; i++) { setTimeout(() => { - document.querySelector(`.datepicker-modal button[data-day="${i}"]`).click(); + document.querySelector(`.datepicker-container button[data-day="${i}"]`).click(); }, i * 10); } setTimeout(() => { diff --git a/src/autocomplete.ts b/src/autocomplete.ts index 56619e76aa..376609e729 100644 --- a/src/autocomplete.ts +++ b/src/autocomplete.ts @@ -82,10 +82,11 @@ const _defaults: AutocompleteOptions = { onSearch: (text: string, autocomplete: Autocomplete) => { const normSearch = text.toLocaleLowerCase(); autocomplete.setMenuItems( - autocomplete.options.data.filter( - (option) => - option.id.toString().toLocaleLowerCase().includes(normSearch) || - option.text?.toLocaleLowerCase().includes(normSearch) + + autocomplete.options.data.filter((option) => + option.id.toString().toLocaleLowerCase().includes(normSearch) + || option.text?.toLocaleLowerCase().includes(normSearch) + ) ); }, @@ -207,6 +208,7 @@ export class Autocomplete extends Component { this.container.style.maxHeight = this.options.maxDropDownHeight; this.container.id = `autocomplete-options-${Utils.guid()}`; this.container.classList.add('autocomplete-content', 'dropdown-content'); + this.container.ariaExpanded = 'true'; this.el.setAttribute('data-target', this.container.id); this.menuItems.forEach((menuItem) => { @@ -253,6 +255,7 @@ export class Autocomplete extends Component { } _removeDropdown() { + this.container.ariaExpanded = 'false'; this.container.parentNode.removeChild(this.container); } @@ -377,6 +380,7 @@ export class Autocomplete extends Component { 'style', 'display:grid; grid-auto-flow: column; user-select: none; align-items: center;' ); + item.tabIndex = 0; // Checkbox if (this.options.isMultiSelect) { item.innerHTML = ` diff --git a/src/buttons.ts b/src/buttons.ts index 09d90f9cf0..c15987e6da 100644 --- a/src/buttons.ts +++ b/src/buttons.ts @@ -1,4 +1,5 @@ -import { Component, BaseOptions, InitElements, MElement, Openable } from './component'; +import { Component, BaseOptions, InitElements, MElement, Openable } from "./component"; +import { Utils } from './utils'; export interface FloatingActionButtonOptions extends BaseOptions { /** @@ -62,10 +63,16 @@ export class FloatingActionButton this.offsetX = 0; this.el.classList.add(`direction-${this.options.direction}`); - if (this.options.direction === 'top') this.offsetY = 40; - else if (this.options.direction === 'right') this.offsetX = -40; - else if (this.options.direction === 'bottom') this.offsetY = -40; - else this.offsetX = 40; + this._anchor.tabIndex = 0; + this._menu.ariaExpanded = 'false'; + if (this.options.direction === 'top') + this.offsetY = 40; + else if (this.options.direction === 'right') + this.offsetX = -40; + else if (this.options.direction === 'bottom') + this.offsetY = -40; + else + this.offsetX = 40; this._setupEventHandlers(); } @@ -119,6 +126,7 @@ export class FloatingActionButton } else { this.el.addEventListener('click', this._handleFABClick); } + this.el.addEventListener('keypress', this._handleFABKeyPress); } _removeEventHandlers() { @@ -128,9 +136,20 @@ export class FloatingActionButton } else { this.el.removeEventListener('click', this._handleFABClick); } + this.el.removeEventListener('keypress', this._handleFABKeyPress); } _handleFABClick = () => { + this._handleFABToggle() +} + + _handleFABKeyPress = (e) => { + if(Utils.keys.ENTER.includes(e.key)) { + this._handleFABToggle(); + } + } + + _handleFABToggle = () => { if (this.isOpen) { this.close(); } else { @@ -169,6 +188,7 @@ export class FloatingActionButton _animateInFAB() { this.el.classList.add('active'); + this._menu.ariaExpanded = 'true'; const delayIncrement = 40; const duration = 275; @@ -186,6 +206,7 @@ export class FloatingActionButton el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`; el.style.opacity = '1'; el.style.transform = 'translate(0, 0) scale(1)'; + el.tabIndex = 0; }, 1); }, delay); }); @@ -193,12 +214,16 @@ export class FloatingActionButton _animateOutFAB() { const duration = 175; - setTimeout(() => this.el.classList.remove('active'), duration); + setTimeout(() => { + this.el.classList.remove('active'); + this._menu.ariaExpanded = 'false'; + }, duration); this._floatingBtnsReverse.forEach((el) => { el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`; // to el.style.opacity = '0'; el.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`; + el.tabIndex = -1; }); } @@ -228,6 +253,7 @@ export class FloatingActionButton this.el.style.left = '0'; this.el.style.transform = 'translateX(' + this.offsetX + 'px)'; this.el.style.transition = 'none'; + this._menu.ariaExpanded = 'true'; this._anchor.style.transform = `translateY(${this.offsetY}px`; this._anchor.style.transition = 'none'; @@ -248,9 +274,10 @@ export class FloatingActionButton backdrop.style.transform = 'scale(' + scaleFactor + ')'; backdrop.style.transition = 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'; - this._menu - .querySelectorAll('li > a') - .forEach((a: HTMLAnchorElement) => (a.style.opacity = '1')); + this._menu.querySelectorAll('li > a').forEach((a: HTMLAnchorElement) => { + a.style.opacity = '1'; + a.tabIndex = 0; + }); // Scroll to close. window.addEventListener('scroll', this.close, true); diff --git a/src/cards.ts b/src/cards.ts index 110c80ede5..a6d361fc7e 100644 --- a/src/cards.ts +++ b/src/cards.ts @@ -31,6 +31,8 @@ export class Cards extends Component implements Openable { ...options }; + this._activators = []; + this.cardReveal = this.el.querySelector('.card-reveal'); if (this.cardReveal) { this.initialOverflow = getComputedStyle(this.el).overflow; @@ -173,4 +175,15 @@ export class Cards extends Component implements Openable { } this._removeRevealCloseEventHandlers(); }; + + static Init() { + if (typeof document !== 'undefined') + // Handle initialization of static cards. + document.addEventListener('DOMContentLoaded', () => { + const cards = document.querySelectorAll('.card'); + cards.forEach((el) => { + if (el && (el['M_Card'] == undefined)) this.init((el as HTMLElement)); + }); + }); + } } diff --git a/src/datepicker.ts b/src/datepicker.ts index a29c29204d..a84e567f5e 100644 --- a/src/datepicker.ts +++ b/src/datepicker.ts @@ -30,6 +30,10 @@ export interface DatepickerOptions extends BaseOptions { * @default false */ isDateRange: boolean; + /** + * The selector of the user specified date range end element + */ + dateRangeEndEl: string | null; /** * The initial condition if the datepicker is based on multiple date selection. * @default false @@ -106,6 +110,10 @@ export interface DatepickerOptions extends BaseOptions { * @default false */ showDaysInNextAndPreviousMonths: boolean; + /** + * Specify if the docked datepicker is in open state by default + */ + openByDefault: 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. @@ -143,7 +151,11 @@ export interface DatepickerOptions extends BaseOptions { * @default null */ onDraw: (() => void) | null; - + /** + * Callback function for interaction with input field. + * @default null + */ + onInputInteraction: (() => void) | null; /** Field used for internal calculations DO NOT CHANGE IT */ minYear?: number; /** Field used for internal calculations DO NOT CHANGE IT */ @@ -165,6 +177,8 @@ const _defaults: DatepickerOptions = { parse: null, // The initial condition if the datepicker is based on date range isDateRange: false, + // The selector of the user specified date range end element + dateRangeEndEl: null, // The initial condition if the datepicker is based on multiple date selection isMultipleSelection: false, // The initial date to view when first opened @@ -198,6 +212,8 @@ const _defaults: DatepickerOptions = { showMonthAfterYear: false, // Render days of the calendar grid that fall in the next or previous month showDaysInNextAndPreviousMonths: false, + // Specify if docked picker is in open state by default + openByDefault: false, // Specify a DOM element to render the calendar in container: null, // Show clear button @@ -245,7 +261,8 @@ const _defaults: DatepickerOptions = { events: [], // callback function onSelect: null, - onDraw: null + onDraw: null, + onInputInteraction: null, }; export class Datepicker extends Component { @@ -260,7 +277,7 @@ export class Datepicker extends Component { doneBtn: HTMLElement; cancelBtn: HTMLElement; - modalEl: HTMLElement; + containerEl: HTMLElement; yearTextEl: HTMLElement; dateTextEl: HTMLElement; endDateEl: HTMLInputElement; @@ -409,7 +426,7 @@ export class Datepicker extends Component { destroy() { this._removeEventHandlers(); - this.modalEl.remove(); + this.containerEl.remove(); this.destroySelects(); this.el['M_Datepicker'] = undefined; } @@ -431,9 +448,23 @@ export class Datepicker extends Component { this.el.classList.add('datepicker-date-input'); } + if (!this.el.parentElement.querySelector('.datepicker-format') === null) { + this._renderDateInputFormat(this.el); + } + if (this.options.isDateRange) { - this.endDateEl = this.createDateInput(); - this.endDateEl.classList.add('datepicker-end-date'); + this.containerEl.classList.add('daterange'); + if (!this.options.dateRangeEndEl) { + this.endDateEl = this.createDateInput(); + this.endDateEl.classList.add('datepicker-end-date'); + } else if(document.querySelector(this.options.dateRangeEndEl) as HTMLInputElement === undefined) { + console.warn('Specified date range end input element in dateRangeEndEl not found'); + } else { + this.endDateEl = document.querySelector(this.options.dateRangeEndEl) as HTMLInputElement; + if (!this.endDateEl.parentElement.querySelector('.datepicker-format') === null) { + this._renderDateInputFormat(this.endDateEl); + } + } } if (this.options.showClearBtn) { @@ -447,13 +478,22 @@ export class Datepicker extends Component { const optEl = this.options.container; this.options.container = optEl instanceof HTMLElement ? optEl : (document.querySelector(optEl) as HTMLElement); - this.options.container.append(this.modalEl); + this.options.container.append(this.containerEl); } else { - //this.modalEl.before(this.el); - this.el.parentElement.appendChild(this.modalEl); + //this.containerEl.before(this.el); + const appendTo = !this.endDateEl ? this.el : this.endDateEl; + if (!this.options.openByDefault) (this.containerEl as HTMLElement).setAttribute('style', 'display: none; visibility: hidden;'); + appendTo.parentElement.after(this.containerEl); } } + /** + * Renders the date input format + */ + _renderDateInputFormat(el: HTMLInputElement) { + el.parentElement.querySelector('.datepicker-format').innerHTML = this.options.format.toString(); + } + /** * Gets a string representation of the given date. */ @@ -603,7 +643,6 @@ export class Datepicker extends Component { * Sets given date as the input value on the given element. */ setInputValue(el, date) { - console.log('setinputvalue'); if (el.type == 'date') { this.setDataDate(el, date); el.value = this.formatDate(date, 'yyyy-mm-dd'); @@ -739,6 +778,8 @@ export class Datepicker extends Component { (this.options.maxDate && day > this.options.maxDate) || (this.options.disableWeekends && Datepicker._isWeekend(day)) || (this.options.disableDayFn && this.options.disableDayFn(day)), + isDateRangeStart = this.options.isDateRange && this.date && this.endDate && Datepicker._compareDates(this.date, day), + isDateRangeEnd = this.options.isDateRange && this.endDate && Datepicker._compareDates(this.endDate, day), isDateRange = this.options.isDateRange && Datepicker._isDate(this.endDate) && @@ -788,6 +829,8 @@ export class Datepicker extends Component { isEndRange: isEndRange, isInRange: isInRange, showDaysInNextAndPreviousMonths: this.options.showDaysInNextAndPreviousMonths, + isDateRangeStart: isDateRangeStart, + isDateRangeEnd: isDateRangeEnd, isDateRange: isDateRange }; @@ -804,8 +847,21 @@ export class Datepicker extends Component { } renderDay(opts) { - const arr = []; - let ariaSelected = 'false'; + const classMap = { + isDisabled: 'is-disabled', + isToday: 'is-today', + isSelected: 'is-selected', + hasEvent: 'has-event', + isInRange: 'is-inrange', + isStartRange: 'is-startrange', + isEndRange: 'is-endrange', + isDateRangeStart: 'is-daterange-start', + isDateRangeEnd: 'is-daterange-end', + isDateRange: 'is-daterange' + }, + ariaSelected = !(['isSelected', 'isDateRange'].filter((prop) => !!(opts.hasOwnProperty(prop) && opts[prop] === true)).length === 0), + arr = ['datepicker-day']; + if (opts.isEmpty) { if (opts.showDaysInNextAndPreviousMonths) { arr.push('is-outside-current-month'); @@ -815,44 +871,12 @@ export class Datepicker extends Component { } } - // @todo wouldn't it be better defining opts class mapping and looping trough opts? - if (opts.isDisabled) { - arr.push('is-disabled'); - } - - if (opts.isToday) { - arr.push('is-today'); - } - - if (opts.isSelected) { - arr.push('is-selected'); - ariaSelected = 'true'; - } - - // @todo should we create this additional css class? - if (opts.hasEvent) { - arr.push('has-event'); - } - - // @todo should we create this additional css class? - if (opts.isInRange) { - arr.push('is-inrange'); - } - - // @todo should we create this additional css class? - if (opts.isStartRange) { - arr.push('is-startrange'); - } - - // @todo should we create this additional css class? - if (opts.isEndRange) { - arr.push('is-endrange'); + for (const [property, className] of Object.entries(classMap)) { + if (opts.hasOwnProperty(property) && opts[property]) { + arr.push(className); + } } - // @todo create additional css class - if (opts.isDateRange) { - arr.push('is-daterange'); - } return ( `` + `` + @@ -955,7 +979,8 @@ export class Datepicker extends Component { ''; html += ``; + // @todo remove button class and add scss mixin, current implementation temporary for focus states, @see https://github.com/materializecss/materialize/issues/566 + } btn" type="button">${leftArrow}`; html += '
'; if (opts.showMonthAfterYear) { @@ -977,7 +1002,8 @@ export class Datepicker extends Component { ''; html += ``; + // @todo remove button class and add scss mixin, current implementation temporary for focus states, @see https://github.com/materializecss/materialize/issues/566 + } btn" type="button">${rightArrow}`; return (html += '
'); } @@ -1035,6 +1061,7 @@ export class Datepicker extends Component { // Init Materialize Select const yearSelect = this.calendarEl.querySelector('.orig-select-year') as HTMLSelectElement; const monthSelect = this.calendarEl.querySelector('.orig-select-month') as HTMLSelectElement; + // @todo fix accessibility @see https://github.com/materializecss/materialize/issues/522 FormSelect.init(yearSelect, { classes: 'select-year', dropdownOptions: { container: document.body, constrainWidth: false } @@ -1070,17 +1097,17 @@ export class Datepicker extends Component { const template = document.createElement('template'); template.innerHTML = Datepicker._template.trim(); - this.modalEl = template.content.firstChild; + this.containerEl = template.content.firstChild; - this.calendarEl = this.modalEl.querySelector('.datepicker-calendar'); - this.yearTextEl = this.modalEl.querySelector('.year-text'); - this.dateTextEl = this.modalEl.querySelector('.date-text'); + this.calendarEl = this.containerEl.querySelector('.datepicker-calendar'); + this.yearTextEl = this.containerEl.querySelector('.year-text'); + this.dateTextEl = this.containerEl.querySelector('.date-text'); if (this.options.showClearBtn) { - this.clearBtn = this.modalEl.querySelector('.datepicker-clear'); + this.clearBtn = this.containerEl.querySelector('.datepicker-clear'); } // TODO: This should not be part of the datepicker - this.doneBtn = this.modalEl.querySelector('.datepicker-done'); - this.cancelBtn = this.modalEl.querySelector('.datepicker-cancel'); + this.doneBtn = this.containerEl.querySelector('.datepicker-done'); + this.cancelBtn = this.containerEl.querySelector('.datepicker-cancel'); this.formats = { d: (date: Date) => { @@ -1138,6 +1165,7 @@ export class Datepicker extends Component { this.setDateFromInput(e.target as HTMLInputElement); this.draw(); this.gotoDate(e.target === this.el ? this.date : this.endDate); + if (this.options.onInputInteraction) this.options.onInputInteraction.call(this); }; _handleInputKeydown = (e: KeyboardEvent) => { @@ -1145,6 +1173,7 @@ export class Datepicker extends Component { e.preventDefault(); this.setDateFromInput(e.target as HTMLInputElement); this.draw(); + if (this.options.onInputInteraction) this.options.onInputInteraction.call(this); } }; @@ -1290,8 +1319,7 @@ export class Datepicker extends Component { static { Datepicker._template = ` -
-
+
@@ -1306,7 +1334,6 @@ export class Datepicker extends Component {
-
- `; + `; } } diff --git a/src/index.ts b/src/index.ts index e8b227939a..4842b11aa8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -138,3 +138,4 @@ Forms.Init(); Chips.Init(); Waves.Init(); Range.Init(); +Cards.Init(); diff --git a/src/select.ts b/src/select.ts index 65b7e5f96f..2a681624ff 100644 --- a/src/select.ts +++ b/src/select.ts @@ -44,6 +44,7 @@ export class FormSelect extends Component { wrapper: HTMLDivElement; selectOptions: (HTMLOptionElement | HTMLOptGroupElement)[]; private _values: ValueStruct[]; + nativeTabIndex: number; constructor(el: HTMLSelectElement, options: FormSelectOptions) { super(el, options, FormSelect); @@ -56,6 +57,7 @@ export class FormSelect extends Component { }; this.isMultiple = this.el.multiple; + this.nativeTabIndex = (this.el.tabIndex ?? -1); this.el.tabIndex = -1; this._values = []; this._setupDropdown(); @@ -258,6 +260,7 @@ export class FormSelect extends Component { this.input.ariaReadOnly = 'true'; this.input.ariaRequired = this.el.hasAttribute('required').toString(); //setAttribute("aria-required", this.el.hasAttribute("required")); if (this.el.disabled) this.input.disabled = true; // 'true'); + this.input.setAttribute('tabindex', this.nativeTabIndex.toString()); const attrs = this.el.attributes; for (let i = 0; i < attrs.length; ++i) { diff --git a/src/timepicker.ts b/src/timepicker.ts index c55d6066bd..44e55dbf24 100644 --- a/src/timepicker.ts +++ b/src/timepicker.ts @@ -40,6 +40,11 @@ export interface TimepickerOptions extends BaseOptions { * @default false */ showClearBtn: boolean; + /** + * Autosubmit timepicker selection to input field + * @default true + */ + autoSubmit: true; /** * Default time to set on the timepicker 'now' or '13:14'. * @default 'now'; @@ -69,6 +74,21 @@ export interface TimepickerOptions extends BaseOptions { * @default null */ onSelect: (hour: number, minute: number) => void; + /** + * Callback function for interaction with input field. + * @default null + */ + onInputInteraction: (() => void) | null; + /** + * Callback function for done. + * @default null + */ + onDone: (() => void) | null; + /** + * Callback function for cancel. + * @default null + */ + onCancel: (() => void) | null; } const _defaults: TimepickerOptions = { @@ -81,6 +101,7 @@ const _defaults: TimepickerOptions = { defaultTime: 'now', // default time, 'now' or '13:14' e.g. fromNow: 0, // Millisecond offset from the defaultTime showClearBtn: false, + autoSubmit: true, // internationalization i18n: { cancel: 'Cancel', @@ -90,7 +111,10 @@ const _defaults: TimepickerOptions = { twelveHour: true, // change to 12 hour AM/PM clock from 24 hour vibrate: true, // vibrate the device when dragging clock hand // Callbacks - onSelect: null + onSelect: null, + onInputInteraction: null, + onDone: null, + onCancel: null, }; type Point = { @@ -101,7 +125,7 @@ type Point = { export class Timepicker extends Component { declare el: HTMLInputElement; id: string; - modalEl: HTMLElement; + containerEl: HTMLElement; plate: HTMLElement; digitalClock: HTMLElement; inputHours: HTMLInputElement; @@ -214,7 +238,7 @@ export class Timepicker extends Component { destroy() { this._removeEventHandlers(); - this.modalEl.remove(); + this.containerEl.remove(); this.el['M_Timepicker'] = undefined; } @@ -236,13 +260,15 @@ export class Timepicker extends Component { } _handleInputClick = () => { - this.open(); + this.inputHours.focus(); + if (typeof this.options.onInputInteraction === 'function') this.options.onInputInteraction.call(this); }; _handleInputKeydown = (e: KeyboardEvent) => { if (Utils.keys.ENTER.includes(e.key)) { e.preventDefault(); - this.open(); + this.inputHours.focus(); + if (typeof this.options.onInputInteraction === 'function') this.options.onInputInteraction.call(this); } }; @@ -296,11 +322,12 @@ export class Timepicker extends Component { } if (this.currentView === 'hours') { + this.inputMinutes.focus(); this.showView('minutes', this.options.duration / 2); } else { - this.minutesView.classList.add('timepicker-dial-out'); + // this.minutesView.classList.add('timepicker-dial-out'); setTimeout(() => { - this.done(); + if (this.options.autoSubmit) this.done(); }, this.options.duration / 2); } @@ -316,17 +343,17 @@ export class Timepicker extends Component { const template = document.createElement('template'); template.innerHTML = Timepicker._template.trim(); - this.modalEl = template.content.firstChild; - this.modalEl.id = 'modal-' + this.id; + this.containerEl = template.content.firstChild; + this.containerEl.id = 'container-' + 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); + containerEl.append(this.containerEl); } else { - this.el.parentElement.appendChild(this.modalEl); + this.el.parentElement.appendChild(this.containerEl); } } @@ -337,38 +364,42 @@ export class Timepicker extends Component { : 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._canvas = this.containerEl.querySelector('.timepicker-canvas'); + this.plate = this.containerEl.querySelector('.timepicker-plate'); + this.digitalClock = this.containerEl.querySelector('.timepicker-display-column'); + this.hoursView = this.containerEl.querySelector('.timepicker-hours'); + this.minutesView = this.containerEl.querySelector('.timepicker-minutes'); + this.inputHours = this.containerEl.querySelector('.timepicker-input-hours'); + this.inputMinutes = this.containerEl.querySelector('.timepicker-input-minutes'); + this.spanAmPm = this.containerEl.querySelector('.timepicker-span-am-pm'); + this.footer = this.containerEl.querySelector('.timepicker-footer'); this.amOrPm = 'PM'; } - private _createButton(text: string, visibility: string): HTMLButtonElement { + /*private _createButton(text: string, visibility: string): HTMLButtonElement { const button = document.createElement('button'); - button.classList.add('btn', 'btn-flat', 'waves-effect', 'text'); + button.classList.add('btn', 'waves-effect', 'text'); button.style.visibility = visibility; button.type = 'button'; button.tabIndex = -1; button.innerText = text; return button; - } + }*/ _pickerSetup() { - const clearButton = this._createButton( + // clearButton.classList.add('timepicker-clear'); + // clearButton.addEventListener('click', this.clear); + // this.footer.appendChild(clearButton); + Utils.createButton( + this.footer, this.options.i18n.clear, - this.options.showClearBtn ? '' : 'hidden' + ['timepicker-clear'], + this.options.showClearBtn, + this.clear ); - clearButton.classList.add('timepicker-clear'); - clearButton.addEventListener('click', this.clear); - this.footer.appendChild(clearButton); - const confirmationBtnsContainer = document.createElement('div'); + if (!this.options.autoSubmit) { + /*const confirmationBtnsContainer = document.createElement('div'); confirmationBtnsContainer.classList.add('confirmation-btns'); this.footer.append(confirmationBtnsContainer); @@ -380,7 +411,18 @@ export class Timepicker extends Component { const doneButton = this._createButton(this.options.i18n.done, ''); doneButton.classList.add('timepicker-close'); //doneButton.addEventListener('click', this._finishSelection); - confirmationBtnsContainer.appendChild(doneButton); + confirmationBtnsContainer.appendChild(doneButton);*/ + Utils.createConfirmationContainer( + this.footer, + this.options.i18n.done, + this.options.i18n.cancel, + this.confirm, + this.cancel + ); + } + + this._updateTimeFromInput(); + this.showView('hours'); } _clockSetup() { @@ -389,13 +431,17 @@ export class Timepicker extends Component { this._amBtn = document.createElement('div'); this._amBtn.classList.add('am-btn', 'btn'); this._amBtn.innerText = 'AM'; + this._amBtn.tabIndex = 0; this._amBtn.addEventListener('click', this._handleAmPmClick); + this._amBtn.addEventListener('keypress', this._handleAmPmKeypress); this.spanAmPm.appendChild(this._amBtn); // PM Button this._pmBtn = document.createElement('div'); this._pmBtn.classList.add('pm-btn', 'btn'); this._pmBtn.innerText = 'PM'; + this._pmBtn.tabIndex = 0; this._pmBtn.addEventListener('click', this._handleAmPmClick); + this._pmBtn.addEventListener('keypress', this._handleAmPmKeypress); this.spanAmPm.appendChild(this._pmBtn); } this._buildHoursView(); @@ -491,12 +537,21 @@ export class Timepicker extends Component { } } - _handleAmPmClick = (e) => { - const btnClicked = e.target; - this.amOrPm = btnClicked.classList.contains('am-btn') ? 'AM' : 'PM'; - this._updateAmPmView(); + _handleAmPmClick = (e: MouseEvent) => { + this._handleAmPmInteraction(e.target); }; + _handleAmPmKeypress = (e: KeyboardEvent) => { + if (Utils.keys.ENTER.includes(e.key)) { + this._handleAmPmInteraction(e.target); + } + }; + + _handleAmPmInteraction = (e: HTMLElement) => { + this.amOrPm = e.classList.contains('am-btn') ? 'AM' : 'PM'; + this._updateAmPmView(); + } + _updateAmPmView() { if (this.options.twelveHour) { if (this.amOrPm === 'PM') { @@ -549,13 +604,13 @@ export class Timepicker extends Component { hideView = isHours ? this.minutesView : this.hoursView; this.currentView = view; - if (isHours) { + /*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'); @@ -726,8 +781,7 @@ export class Timepicker extends Component { this.inputHours.value = (this.hours % (this.options.twelveHour ? 12 : 24)).toString(); } - // todo: remove e - done = (e = null, clearValue = null) => { + done = (clearValue = null) => { // Set input value const last = this.el.value; let value = clearValue @@ -744,18 +798,24 @@ export class Timepicker extends Component { new Event('change', { bubbles: true, cancelable: true, composed: true }) ); } - //this.el.focus(); - return e; // just for passing linter, can be removed }; + confirm = () => { + this.done(); + if (typeof this.options.onDone === 'function') this.options.onDone.call(this); + } + + cancel = () => { + this.clear(); + if (typeof this.options.onCancel === 'function') this.options.onCancel.call(this); + } + clear = () => { - this.done(null, true); + this.done(true); }; // deprecated open() { - // this._updateTimeFromInput(); - // this.showView('hours'); console.warn( 'Timepicker.close() is deprecated. Remove this method and wrap in modal yourself.' ); @@ -770,14 +830,12 @@ export class Timepicker extends Component { } static { - Timepicker._template = ` -
-
+ Timepicker._template = `
-
+
- +
: @@ -799,7 +857,6 @@ export class Timepicker extends Component {
-
-
`; +
`; } }