diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index fa2daba006..0000000000 --- a/.eslintrc +++ /dev/null @@ -1,26 +0,0 @@ -{ - "parserOptions": { - "ecmaVersion": 2018 - }, - - "env": { - "browser": true, - "node": true - }, - - "ignores": ["./spec/support/"], - - "rules": { - "semi": "error", - "use-isnan": "error", - "no-unsafe-negation": "error", - "no-cond-assign": "error", - - "no-console": "warn", - "no-var": "warn", - "no-extra-semi": "warn", - "no-unused-vars": "warn", - "no-new-object": "warn", - "no-undef": "error" - } -} diff --git a/.github/workflows/nightly.yml b/.github/workflows/nightly.yml index 3b21993f92..a830e193bb 100644 --- a/.github/workflows/nightly.yml +++ b/.github/workflows/nightly.yml @@ -22,7 +22,7 @@ jobs: run: | npm run release - - uses: actions/upload-artifact@v2 + - uses: actions/upload-artifact@v4 with: name: build path: dist/ diff --git a/.gitignore b/.gitignore index c4e788ec20..4fbac5ff73 100644 --- a/.gitignore +++ b/.gitignore @@ -25,6 +25,7 @@ yarn-error.log* # Dependency directories node_modules/ +dist dist/**/*.* !dist/css/*.css !dist/css/*.css.map diff --git a/.prettierrc b/.prettierrc index 82005a82ac..b9c6c9de98 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,6 +1,6 @@ { "printWidth": 100, - "parser": "flow", + "parser": "typescript", "tabWidth": 2, "useTabs": false, "semi": true, diff --git a/FOR_MAINTAINERS.md b/FOR_MAINTAINERS.md index f2564070e0..37a7874f1c 100644 --- a/FOR_MAINTAINERS.md +++ b/FOR_MAINTAINERS.md @@ -20,12 +20,12 @@ To fully release a new version, you need to have access to the @materializecss o 1. In your local copy of Materialize, go into the dev Branch with `git checkout v2-dev` and pull the newest version with `git pull origin v2-dev` to have the newest version from the server. Run Tests and check if everything works. -2. Create a new Release branch with `git checkout -b release-2.X.X-alpha`. - In case something happend or needs to be changed during the release it is better to keep the release on its own branch. +2. Create a new Release branch with `git checkout -b release-2.X.X`. + In case something happens or needs to be changed during the release it is better to keep the release on its own branch. -3. Run `npm run release -- --oldver= --newver=` - What this command does is that it will replace any occurrences of "" with the "". So for example, if the current release is `1.0.0`, and then the planned release is `1.1.0`, the command would be - ```npm run release -- --oldver=1.0.0 --newver=1.1.0``` +3. Run `npm version ` + Where ` = patch, minor, major`. + [details](https://docs.npmjs.com/updating-your-published-package-version-number) 4. Verify that the version is correctly replaced and files were generated in: * package.json diff --git a/README.md b/README.md index f85d3ca796..9abac543d4 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@

-## Quickstart +## Getting started Read the [getting started guide](https://materializeweb.com/getting-started.html) for more information on how to use materialize. - [Download the latest release](https://github.com/materializecss/materialize/releases/latest) of materialize directly from GitHub. ([Beta](https://github.com/materializecss/materialize/releases/)) @@ -37,23 +37,21 @@ Read the [getting started guide](https://materializeweb.com/getting-started.html - Include the files via [jsDelivr](https://www.jsdelivr.com/package/npm/@materializecss/materialize). - Install with [npm](https://www.npmjs.com): `npm install @materializecss/materialize` (Beta: `npm install @materializecss/materialize@next`) +## Testing +To run tests locally you first have to build the files and then run the tests. This can be done with the command `npm test`; +To get more info and debug information you can do the following: +run `npx jasmine-browser-runner` then go to the url via browser `http://localhost:8888`. The tests will then run and show detailed feedback. + ## Development The documentation can be found at . To run the documentation locally on your machine, you need [Node.js](https://nodejs.org) installed on your computer. - This is the core project with all the components. To see how they are used we recommend using an example project or go to the documentation. -Otherwise, if you want to develop the components itself, the dev process of this core-repo works like this: -```sh -npm install -npm run dev -``` ### Running documentation locally See [Materialize Docs Repo](https://github.com/materializecss/materialize-docs) to see Materialize in Action. -### Documentation for previous releases +### Releases Previous releases are available [here](https://github.com/materializecss/materialize/releases). -## Release If you want to release `materialize.css` or `materialize.js` from the latest commit, you can build the files with the following command after `npm install`. See `package.json` to check the current version like `1.0.0`. ```sh npm run release -- --oldver= --newver= diff --git a/ci/compress.js b/ci/compress.js index 10e2479694..8bbe9f8e35 100644 --- a/ci/compress.js +++ b/ci/compress.js @@ -1,5 +1,5 @@ -const fs = require('fs'); -const archiver = require('archiver'); +import fs from 'fs'; +import archiver from 'archiver'; const packageJson = JSON.parse(fs.readFileSync('./package.json').toString()); diff --git a/dist/css/materialize.css b/dist/css/materialize.css deleted file mode 100644 index 8bc9c1bc6d..0000000000 --- a/dist/css/materialize.css +++ /dev/null @@ -1,8711 +0,0 @@ -/*! -* Materialize v2.1.1 (https://materializeweb.com) -* Copyright 2014-2024 Materialize -* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE) -*/ -@charset "UTF-8"; -:root { - --md-source: #006495; - /* primary */ - --md-ref-palette-primary0: #000000; - --md-ref-palette-primary10: #001e30; - --md-ref-palette-primary20: #003450; - --md-ref-palette-primary25: #003f60; - --md-ref-palette-primary30: #004b71; - --md-ref-palette-primary35: #005783; - --md-ref-palette-primary40: #006495; - --md-ref-palette-primary50: #0f7eb8; - --md-ref-palette-primary60: #3d98d4; - --md-ref-palette-primary70: #5db3f0; - --md-ref-palette-primary80: #8fcdff; - --md-ref-palette-primary90: #cbe6ff; - --md-ref-palette-primary95: #e6f2ff; - --md-ref-palette-primary98: #f7f9ff; - --md-ref-palette-primary99: #fcfcff; - --md-ref-palette-primary100: #ffffff; - /* secondary */ - --md-ref-palette-secondary0: #000000; - --md-ref-palette-secondary10: #0d1d29; - --md-ref-palette-secondary20: #22323f; - --md-ref-palette-secondary25: #2d3d4b; - --md-ref-palette-secondary30: #394856; - --md-ref-palette-secondary35: #445462; - --md-ref-palette-secondary40: #50606f; - --md-ref-palette-secondary50: #697988; - --md-ref-palette-secondary60: #8293a2; - --md-ref-palette-secondary70: #9dadbd; - --md-ref-palette-secondary80: #b8c8d9; - --md-ref-palette-secondary90: #d4e4f6; - --md-ref-palette-secondary95: #e6f2ff; - --md-ref-palette-secondary98: #f7f9ff; - --md-ref-palette-secondary99: #fcfcff; - --md-ref-palette-secondary100: #ffffff; - /* tertiary */ - --md-ref-palette-tertiary0: #000000; - --md-ref-palette-tertiary10: #211634; - --md-ref-palette-tertiary20: #362b4a; - --md-ref-palette-tertiary25: #423656; - --md-ref-palette-tertiary30: #4d4162; - --md-ref-palette-tertiary35: #594c6e; - --md-ref-palette-tertiary40: #66587b; - --md-ref-palette-tertiary50: #7f7195; - --md-ref-palette-tertiary60: #998ab0; - --md-ref-palette-tertiary70: #b4a4cb; - --md-ref-palette-tertiary80: #d0bfe7; - --md-ref-palette-tertiary90: #ecdcff; - --md-ref-palette-tertiary95: #f7edff; - --md-ref-palette-tertiary98: #fef7ff; - --md-ref-palette-tertiary99: #fffbff; - --md-ref-palette-tertiary100: #ffffff; - /* neutral */ - --md-ref-palette-neutral0: #000000; - --md-ref-palette-neutral10: #1a1c1e; - --md-ref-palette-neutral20: #2e3133; - --md-ref-palette-neutral25: #3a3c3e; - --md-ref-palette-neutral30: #454749; - --md-ref-palette-neutral35: #515255; - --md-ref-palette-neutral40: #5d5e61; - --md-ref-palette-neutral50: #76777a; - --md-ref-palette-neutral60: #8f9194; - --md-ref-palette-neutral70: #aaabae; - --md-ref-palette-neutral80: #c6c6c9; - --md-ref-palette-neutral90: #e2e2e5; - --md-ref-palette-neutral95: #f0f0f3; - --md-ref-palette-neutral98: #f9f9fc; - --md-ref-palette-neutral99: #fcfcff; - --md-ref-palette-neutral100: #ffffff; - /* neutral-variant */ - --md-ref-palette-neutral-variant0: #000000; - --md-ref-palette-neutral-variant10: #161c22; - --md-ref-palette-neutral-variant20: #2b3137; - --md-ref-palette-neutral-variant25: #363c42; - --md-ref-palette-neutral-variant30: #41474d; - --md-ref-palette-neutral-variant35: #4d5359; - --md-ref-palette-neutral-variant40: #595f65; - --md-ref-palette-neutral-variant50: #72787e; - --md-ref-palette-neutral-variant60: #8b9198; - --md-ref-palette-neutral-variant70: #a6acb3; - --md-ref-palette-neutral-variant80: #c1c7ce; - --md-ref-palette-neutral-variant90: #dee3ea; - --md-ref-palette-neutral-variant95: #ecf1f9; - --md-ref-palette-neutral-variant98: #f7f9ff; - --md-ref-palette-neutral-variant99: #fcfcff; - --md-ref-palette-neutral-variant100: #ffffff; - /* error */ - --md-ref-palette-error0: #000000; - --md-ref-palette-error10: #410002; - --md-ref-palette-error20: #690005; - --md-ref-palette-error25: #7e0007; - --md-ref-palette-error30: #93000a; - --md-ref-palette-error35: #a80710; - --md-ref-palette-error40: #ba1a1a; - --md-ref-palette-error50: #de3730; - --md-ref-palette-error60: #ff5449; - --md-ref-palette-error70: #ff897d; - --md-ref-palette-error80: #ffb4ab; - --md-ref-palette-error90: #ffdad6; - --md-ref-palette-error95: #ffedea; - --md-ref-palette-error98: #fff8f7; - --md-ref-palette-error99: #fffbff; - --md-ref-palette-error100: #ffffff; - /* light */ - --md-sys-color-primary-light: #006495; - --md-sys-color-on-primary-light: #ffffff; - --md-sys-color-primary-container-light: #cbe6ff; - --md-sys-color-on-primary-container-light: #001e30; - --md-sys-color-secondary-light: #50606f; - --md-sys-color-on-secondary-light: #ffffff; - --md-sys-color-secondary-container-light: #d4e4f6; - --md-sys-color-on-secondary-container-light: #0d1d29; - --md-sys-color-tertiary-light: #66587b; - --md-sys-color-on-tertiary-light: #ffffff; - --md-sys-color-tertiary-container-light: #ecdcff; - --md-sys-color-on-tertiary-container-light: #211634; - --md-sys-color-error-light: #ba1a1a; - --md-sys-color-error-container-light: #ffdad6; - --md-sys-color-on-error-light: #ffffff; - --md-sys-color-on-error-container-light: #410002; - --md-sys-color-background-light: #fcfcff; - --md-sys-color-on-background-light: #1a1c1e; - --md-sys-color-surface-light: #fcfcff; - --md-sys-color-on-surface-light: #1a1c1e; - --md-sys-color-surface-variant-light: #dee3ea; - --md-sys-color-on-surface-variant-light: #41474d; - --md-sys-color-outline-light: #72787e; - --md-sys-color-inverse-on-surface-light: #f0f0f3; - --md-sys-color-inverse-surface-light: #2e3133; - --md-sys-color-inverse-primary-light: #8fcdff; - --md-sys-color-shadow-light: #000000; - --md-sys-color-surface-tint-light: #006495; - --md-sys-color-outline-variant-light: #c1c7ce; - --md-sys-color-scrim-light: #000000; - /* dark */ - --md-sys-color-primary-dark: #8fcdff; - --md-sys-color-on-primary-dark: #003450; - --md-sys-color-primary-container-dark: #004b71; - --md-sys-color-on-primary-container-dark: #cbe6ff; - --md-sys-color-secondary-dark: #b8c8d9; - --md-sys-color-on-secondary-dark: #22323f; - --md-sys-color-secondary-container-dark: #394856; - --md-sys-color-on-secondary-container-dark: #d4e4f6; - --md-sys-color-tertiary-dark: #d0bfe7; - --md-sys-color-on-tertiary-dark: #362b4a; - --md-sys-color-tertiary-container-dark: #4d4162; - --md-sys-color-on-tertiary-container-dark: #ecdcff; - --md-sys-color-error-dark: #ffb4ab; - --md-sys-color-error-container-dark: #93000a; - --md-sys-color-on-error-dark: #690005; - --md-sys-color-on-error-container-dark: #ffdad6; - --md-sys-color-background-dark: #1a1c1e; - --md-sys-color-on-background-dark: #e2e2e5; - --md-sys-color-surface-dark: #1a1c1e; - --md-sys-color-on-surface-dark: #e2e2e5; - --md-sys-color-surface-variant-dark: #41474d; - --md-sys-color-on-surface-variant-dark: #c1c7ce; - --md-sys-color-outline-dark: #8b9198; - --md-sys-color-inverse-on-surface-dark: #1a1c1e; - --md-sys-color-inverse-surface-dark: #e2e2e5; - --md-sys-color-inverse-primary-dark: #006495; - --md-sys-color-shadow-dark: #000000; - --md-sys-color-surface-tint-dark: #8fcdff; - --md-sys-color-outline-variant-dark: #41474d; - --md-sys-color-scrim-dark: #000000; - /* display - large */ - --md-sys-typescale-display-large-font-family-name: Roboto; - --md-sys-typescale-display-large-font-family-style: Regular; - --md-sys-typescale-display-large-font-weight: 400px; - --md-sys-typescale-display-large-font-size: 57px; - --md-sys-typescale-display-large-line-height: 64px; - --md-sys-typescale-display-large-letter-spacing: -0.25px; - /* display - medium */ - --md-sys-typescale-display-medium-font-family-name: Roboto; - --md-sys-typescale-display-medium-font-family-style: Regular; - --md-sys-typescale-display-medium-font-weight: 400px; - --md-sys-typescale-display-medium-font-size: 45px; - --md-sys-typescale-display-medium-line-height: 52px; - --md-sys-typescale-display-medium-letter-spacing: 0px; - /* display - small */ - --md-sys-typescale-display-small-font-family-name: Roboto; - --md-sys-typescale-display-small-font-family-style: Regular; - --md-sys-typescale-display-small-font-weight: 400px; - --md-sys-typescale-display-small-font-size: 36px; - --md-sys-typescale-display-small-line-height: 44px; - --md-sys-typescale-display-small-letter-spacing: 0px; - /* headline - large */ - --md-sys-typescale-headline-large-font-family-name: Roboto; - --md-sys-typescale-headline-large-font-family-style: Regular; - --md-sys-typescale-headline-large-font-weight: 400px; - --md-sys-typescale-headline-large-font-size: 32px; - --md-sys-typescale-headline-large-line-height: 40px; - --md-sys-typescale-headline-large-letter-spacing: 0px; - /* headline - medium */ - --md-sys-typescale-headline-medium-font-family-name: Roboto; - --md-sys-typescale-headline-medium-font-family-style: Regular; - --md-sys-typescale-headline-medium-font-weight: 400px; - --md-sys-typescale-headline-medium-font-size: 28px; - --md-sys-typescale-headline-medium-line-height: 36px; - --md-sys-typescale-headline-medium-letter-spacing: 0px; - /* headline - small */ - --md-sys-typescale-headline-small-font-family-name: Roboto; - --md-sys-typescale-headline-small-font-family-style: Regular; - --md-sys-typescale-headline-small-font-weight: 400px; - --md-sys-typescale-headline-small-font-size: 24px; - --md-sys-typescale-headline-small-line-height: 32px; - --md-sys-typescale-headline-small-letter-spacing: 0px; - /* body - large */ - --md-sys-typescale-body-large-font-family-name: Roboto; - --md-sys-typescale-body-large-font-family-style: Regular; - --md-sys-typescale-body-large-font-weight: 400px; - --md-sys-typescale-body-large-font-size: 16px; - --md-sys-typescale-body-large-line-height: 24px; - --md-sys-typescale-body-large-letter-spacing: 0.50px; - /* body - medium */ - --md-sys-typescale-body-medium-font-family-name: Roboto; - --md-sys-typescale-body-medium-font-family-style: Regular; - --md-sys-typescale-body-medium-font-weight: 400px; - --md-sys-typescale-body-medium-font-size: 14px; - --md-sys-typescale-body-medium-line-height: 20px; - --md-sys-typescale-body-medium-letter-spacing: 0.25px; - /* body - small */ - --md-sys-typescale-body-small-font-family-name: Roboto; - --md-sys-typescale-body-small-font-family-style: Regular; - --md-sys-typescale-body-small-font-weight: 400px; - --md-sys-typescale-body-small-font-size: 12px; - --md-sys-typescale-body-small-line-height: 16px; - --md-sys-typescale-body-small-letter-spacing: 0.40px; - /* label - large */ - --md-sys-typescale-label-large-font-family-name: Roboto; - --md-sys-typescale-label-large-font-family-style: Medium; - --md-sys-typescale-label-large-font-weight: 500px; - --md-sys-typescale-label-large-font-size: 14px; - --md-sys-typescale-label-large-line-height: 20px; - --md-sys-typescale-label-large-letter-spacing: 0.10px; - /* label - medium */ - --md-sys-typescale-label-medium-font-family-name: Roboto; - --md-sys-typescale-label-medium-font-family-style: Medium; - --md-sys-typescale-label-medium-font-weight: 500px; - --md-sys-typescale-label-medium-font-size: 12px; - --md-sys-typescale-label-medium-line-height: 16px; - --md-sys-typescale-label-medium-letter-spacing: 0.50px; - /* label - small */ - --md-sys-typescale-label-small-font-family-name: Roboto; - --md-sys-typescale-label-small-font-family-style: Medium; - --md-sys-typescale-label-small-font-weight: 500px; - --md-sys-typescale-label-small-font-size: 11px; - --md-sys-typescale-label-small-line-height: 16px; - --md-sys-typescale-label-small-letter-spacing: 0.50px; - /* title - large */ - --md-sys-typescale-title-large-font-family-name: Roboto; - --md-sys-typescale-title-large-font-family-style: Regular; - --md-sys-typescale-title-large-font-weight: 400px; - --md-sys-typescale-title-large-font-size: 22px; - --md-sys-typescale-title-large-line-height: 28px; - --md-sys-typescale-title-large-letter-spacing: 0px; - /* title - medium */ - --md-sys-typescale-title-medium-font-family-name: Roboto; - --md-sys-typescale-title-medium-font-family-style: Medium; - --md-sys-typescale-title-medium-font-weight: 500px; - --md-sys-typescale-title-medium-font-size: 16px; - --md-sys-typescale-title-medium-line-height: 24px; - --md-sys-typescale-title-medium-letter-spacing: 0.15px; - /* title - small */ - --md-sys-typescale-title-small-font-family-name: Roboto; - --md-sys-typescale-title-small-font-family-style: Medium; - --md-sys-typescale-title-small-font-weight: 500px; - --md-sys-typescale-title-small-font-size: 14px; - --md-sys-typescale-title-small-line-height: 20px; - --md-sys-typescale-title-small-letter-spacing: 0.10px; -} - -/* System Defaults */ -:root, :host { - color-scheme: light; - --md-sys-color-primary: var(--md-sys-color-primary-light); - --md-sys-color-on-primary: var(--md-sys-color-on-primary-light); - --md-sys-color-primary-container: var(--md-sys-color-primary-container-light); - --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light); - --md-sys-color-secondary: var(--md-sys-color-secondary-light); - --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light); - --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light); - --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light); - --md-sys-color-tertiary: var(--md-sys-color-tertiary-light); - --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light); - --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light); - --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light); - --md-sys-color-error: var(--md-sys-color-error-light); - --md-sys-color-on-error: var(--md-sys-color-on-error-light); - --md-sys-color-error-container: var(--md-sys-color-error-container-light); - --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light); - --md-sys-color-outline: var(--md-sys-color-outline-light); - --md-sys-color-background: var(--md-sys-color-background-light); - --md-sys-color-on-background: var(--md-sys-color-on-background-light); - --md-sys-color-surface: var(--md-sys-color-surface-light); - --md-sys-color-on-surface: var(--md-sys-color-on-surface-light); - --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light); - --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light); - --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light); - --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light); - --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light); - --md-sys-color-shadow: var(--md-sys-color-shadow-light); - --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light); - --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light); - --md-sys-color-scrim: var(--md-sys-color-scrim-light); -} - -@media (prefers-color-scheme: dark) { - :root, :host { - color-scheme: dark; - --md-sys-color-primary: var(--md-sys-color-primary-dark); - --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark); - --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark); - --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark); - --md-sys-color-secondary: var(--md-sys-color-secondary-dark); - --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark); - --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark); - --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark); - --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark); - --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark); - --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark); - --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark); - --md-sys-color-error: var(--md-sys-color-error-dark); - --md-sys-color-on-error: var(--md-sys-color-on-error-dark); - --md-sys-color-error-container: var(--md-sys-color-error-container-dark); - --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark); - --md-sys-color-outline: var(--md-sys-color-outline-dark); - --md-sys-color-background: var(--md-sys-color-background-dark); - --md-sys-color-on-background: var(--md-sys-color-on-background-dark); - --md-sys-color-surface: var(--md-sys-color-surface-dark); - --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark); - --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark); - --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark); - --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark); - --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark); - --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark); - --md-sys-color-shadow: var(--md-sys-color-shadow-dark); - --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark); - --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark); - --md-sys-color-scrim: var(--md-sys-color-scrim-dark); - } -} -/* ===================================================================== Themes */ -:root[theme=light] { - color-scheme: light; - --md-sys-color-primary: var(--md-sys-color-primary-light); - --md-sys-color-on-primary: var(--md-sys-color-on-primary-light); - --md-sys-color-primary-container: var(--md-sys-color-primary-container-light); - --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light); - --md-sys-color-secondary: var(--md-sys-color-secondary-light); - --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light); - --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light); - --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light); - --md-sys-color-tertiary: var(--md-sys-color-tertiary-light); - --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light); - --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light); - --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light); - --md-sys-color-error: var(--md-sys-color-error-light); - --md-sys-color-on-error: var(--md-sys-color-on-error-light); - --md-sys-color-error-container: var(--md-sys-color-error-container-light); - --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light); - --md-sys-color-outline: var(--md-sys-color-outline-light); - --md-sys-color-background: var(--md-sys-color-background-light); - --md-sys-color-on-background: var(--md-sys-color-on-background-light); - --md-sys-color-surface: var(--md-sys-color-surface-light); - --md-sys-color-on-surface: var(--md-sys-color-on-surface-light); - --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light); - --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light); - --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light); - --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light); - --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light); - --md-sys-color-shadow: var(--md-sys-color-shadow-light); - --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light); - --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light); - --md-sys-color-scrim: var(--md-sys-color-scrim-light); -} - -:root[theme=dark] { - color-scheme: dark; - --md-sys-color-primary: var(--md-sys-color-primary-dark); - --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark); - --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark); - --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark); - --md-sys-color-secondary: var(--md-sys-color-secondary-dark); - --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark); - --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark); - --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark); - --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark); - --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark); - --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark); - --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark); - --md-sys-color-error: var(--md-sys-color-error-dark); - --md-sys-color-on-error: var(--md-sys-color-on-error-dark); - --md-sys-color-error-container: var(--md-sys-color-error-container-dark); - --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark); - --md-sys-color-outline: var(--md-sys-color-outline-dark); - --md-sys-color-background: var(--md-sys-color-background-dark); - --md-sys-color-on-background: var(--md-sys-color-on-background-dark); - --md-sys-color-surface: var(--md-sys-color-surface-dark); - --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark); - --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark); - --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark); - --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark); - --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark); - --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark); - --md-sys-color-shadow: var(--md-sys-color-shadow-dark); - --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark); - --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark); - --md-sys-color-scrim: var(--md-sys-color-scrim-dark); -} - -.primary { - background-color: var(--md-sys-color-primary); -} - -.primary-text { - color: var(--md-sys-color-primary); -} - -.on-primary { - background-color: var(--md-sys-color-on-primary); -} - -.on-primary-text { - color: var(--md-sys-color-on-primary); -} - -.primary-container { - background-color: var(--md-sys-color-primary-container); -} - -.primary-container-text { - color: var(--md-sys-color-primary-container); -} - -.on-primary-container { - background-color: var(--md-sys-color-on-primary-container); -} - -.on-primary-container-text { - color: var(--md-sys-color-on-primary-container); -} - -.secondary { - background-color: var(--md-sys-color-secondary); -} - -.secondary-text { - color: var(--md-sys-color-secondary); -} - -.on-secondary { - background-color: var(--md-sys-color-on-secondary); -} - -.on-secondary-text { - color: var(--md-sys-color-on-secondary); -} - -.secondary-container { - background-color: var(--md-sys-color-secondary-container); -} - -.secondary-container-text { - color: var(--md-sys-color-secondary-container); -} - -.on-secondary-container { - background-color: var(--md-sys-color-on-secondary-container); -} - -.on-secondary-container-text { - color: var(--md-sys-color-on-secondary-container); -} - -.tertiary { - background-color: var(--md-sys-color-tertiary); -} - -.tertiary-text { - color: var(--md-sys-color-tertiary); -} - -.on-tertiary { - background-color: var(--md-sys-color-on-tertiary); -} - -.on-tertiary-text { - color: var(--md-sys-color-on-tertiary); -} - -.tertiary-container { - background-color: var(--md-sys-color-tertiary-container); -} - -.tertiary-container-text { - color: var(--md-sys-color-tertiary-container); -} - -.on-tertiary-container { - background-color: var(--md-sys-color-on-tertiary-container); -} - -.on-tertiary-container-text { - color: var(--md-sys-color-on-tertiary-container); -} - -.error { - background-color: var(--md-sys-color-error); -} - -.error-text { - color: var(--md-sys-color-error); -} - -.on-error { - background-color: var(--md-sys-color-on-error); -} - -.on-error-text { - color: var(--md-sys-color-on-error); -} - -.error-container { - background-color: var(--md-sys-color-error-container); -} - -.error-container-text { - color: var(--md-sys-color-error-container); -} - -.on-error-container { - background-color: var(--md-sys-color-on-error-container); -} - -.on-error-container-text { - color: var(--md-sys-color-on-error-container); -} - -.background { - background-color: var(--md-sys-color-background); -} - -.background-text { - color: var(--md-sys-color-background); -} - -.on-background { - background-color: var(--md-sys-color-on-background); -} - -.on-background-text { - color: var(--md-sys-color-on-background); -} - -.surface, .switch label input[type=checkbox]:checked + .lever:after { - background-color: var(--md-sys-color-surface); -} - -.surface-text { - color: var(--md-sys-color-surface); -} - -.on-surface { - background-color: var(--md-sys-color-on-surface); -} - -.on-surface-text { - color: var(--md-sys-color-on-surface); -} - -.surface-variant, .progress, input[type=range]::-moz-range-track, input[type=range]::-webkit-slider-runnable-track { - background-color: var(--md-sys-color-surface-variant); -} - -.surface-variant-text { - color: var(--md-sys-color-surface-variant); -} - -.on-surface-variant { - background-color: var(--md-sys-color-on-surface-variant); -} - -.on-surface-variant-text, .chip > .material-icons { - color: var(--md-sys-color-on-surface-variant); -} - -.outline, .switch label .lever:after { - background-color: var(--md-sys-color-outline); -} - -.outline-text { - color: var(--md-sys-color-outline); -} - -.inverse-on-surface { - background-color: var(--md-sys-color-inverse-on-surface); -} - -.inverse-on-surface-text { - color: var(--md-sys-color-inverse-on-surface); -} - -.inverse-surface { - background-color: var(--md-sys-color-inverse-surface); -} - -.inverse-surface-text { - color: var(--md-sys-color-inverse-surface); -} - -.inverse-primary { - background-color: var(--md-sys-color-inverse-primary); -} - -.inverse-primary-text { - color: var(--md-sys-color-inverse-primary); -} - -.shadow { - background-color: var(--md-sys-color-shadow); -} - -.shadow-text { - color: var(--md-sys-color-shadow); -} - -.surface-tint { - background-color: var(--md-sys-color-surface-tint); -} - -.surface-tint-text { - color: var(--md-sys-color-surface-tint); -} - -.outline-variant { - background-color: var(--md-sys-color-outline-variant); -} - -.outline-variant-text { - color: var(--md-sys-color-outline-variant); -} - -.scrim { - background-color: var(--md-sys-color-scrim); -} - -.scrim-text { - color: var(--md-sys-color-scrim); -} - -.display-large { - font-family: var(--md-sys-typescale-display-large-font-family-name); - font-style: var(--md-sys-typescale-display-large-font-family-style); - font-weight: var(--md-sys-typescale-display-large-font-weight); - font-size: var(--md-sys-typescale-display-large-font-size); - letter-spacing: var(--md-sys-typescale-display-large-tracking); - line-height: var(--md-sys-typescale-display-large-height); - text-transform: var(--md-sys-typescale-display-large-text-transform); - text-decoration: var(--md-sys-typescale-display-large-text-decoration); -} - -.display-medium { - font-family: var(--md-sys-typescale-display-medium-font-family-name); - font-style: var(--md-sys-typescale-display-medium-font-family-style); - font-weight: var(--md-sys-typescale-display-medium-font-weight); - font-size: var(--md-sys-typescale-display-medium-font-size); - letter-spacing: var(--md-sys-typescale-display-medium-tracking); - line-height: var(--md-sys-typescale-display-medium-height); - text-transform: var(--md-sys-typescale-display-medium-text-transform); - text-decoration: var(--md-sys-typescale-display-medium-text-decoration); -} - -.display-small { - font-family: var(--md-sys-typescale-display-small-font-family-name); - font-style: var(--md-sys-typescale-display-small-font-family-style); - font-weight: var(--md-sys-typescale-display-small-font-weight); - font-size: var(--md-sys-typescale-display-small-font-size); - letter-spacing: var(--md-sys-typescale-display-small-tracking); - line-height: var(--md-sys-typescale-display-small-height); - text-transform: var(--md-sys-typescale-display-small-text-transform); - text-decoration: var(--md-sys-typescale-display-small-text-decoration); -} - -.headline-large { - font-family: var(--md-sys-typescale-headline-large-font-family-name); - font-style: var(--md-sys-typescale-headline-large-font-family-style); - font-weight: var(--md-sys-typescale-headline-large-font-weight); - font-size: var(--md-sys-typescale-headline-large-font-size); - letter-spacing: var(--md-sys-typescale-headline-large-tracking); - line-height: var(--md-sys-typescale-headline-large-height); - text-transform: var(--md-sys-typescale-headline-large-text-transform); - text-decoration: var(--md-sys-typescale-headline-large-text-decoration); -} - -.headline-medium { - font-family: var(--md-sys-typescale-headline-medium-font-family-name); - font-style: var(--md-sys-typescale-headline-medium-font-family-style); - font-weight: var(--md-sys-typescale-headline-medium-font-weight); - font-size: var(--md-sys-typescale-headline-medium-font-size); - letter-spacing: var(--md-sys-typescale-headline-medium-tracking); - line-height: var(--md-sys-typescale-headline-medium-height); - text-transform: var(--md-sys-typescale-headline-medium-text-transform); - text-decoration: var(--md-sys-typescale-headline-medium-text-decoration); -} - -.headline-small { - font-family: var(--md-sys-typescale-headline-small-font-family-name); - font-style: var(--md-sys-typescale-headline-small-font-family-style); - font-weight: var(--md-sys-typescale-headline-small-font-weight); - font-size: var(--md-sys-typescale-headline-small-font-size); - letter-spacing: var(--md-sys-typescale-headline-small-tracking); - line-height: var(--md-sys-typescale-headline-small-height); - text-transform: var(--md-sys-typescale-headline-small-text-transform); - text-decoration: var(--md-sys-typescale-headline-small-text-decoration); -} - -.body-large { - font-family: var(--md-sys-typescale-body-large-font-family-name); - font-style: var(--md-sys-typescale-body-large-font-family-style); - font-weight: var(--md-sys-typescale-body-large-font-weight); - font-size: var(--md-sys-typescale-body-large-font-size); - letter-spacing: var(--md-sys-typescale-body-large-tracking); - line-height: var(--md-sys-typescale-body-large-height); - text-transform: var(--md-sys-typescale-body-large-text-transform); - text-decoration: var(--md-sys-typescale-body-large-text-decoration); -} - -.body-medium { - font-family: var(--md-sys-typescale-body-medium-font-family-name); - font-style: var(--md-sys-typescale-body-medium-font-family-style); - font-weight: var(--md-sys-typescale-body-medium-font-weight); - font-size: var(--md-sys-typescale-body-medium-font-size); - letter-spacing: var(--md-sys-typescale-body-medium-tracking); - line-height: var(--md-sys-typescale-body-medium-height); - text-transform: var(--md-sys-typescale-body-medium-text-transform); - text-decoration: var(--md-sys-typescale-body-medium-text-decoration); -} - -.body-small { - font-family: var(--md-sys-typescale-body-small-font-family-name); - font-style: var(--md-sys-typescale-body-small-font-family-style); - font-weight: var(--md-sys-typescale-body-small-font-weight); - font-size: var(--md-sys-typescale-body-small-font-size); - letter-spacing: var(--md-sys-typescale-body-small-tracking); - line-height: var(--md-sys-typescale-body-small-height); - text-transform: var(--md-sys-typescale-body-small-text-transform); - text-decoration: var(--md-sys-typescale-body-small-text-decoration); -} - -.label-large { - font-family: var(--md-sys-typescale-label-large-font-family-name); - font-style: var(--md-sys-typescale-label-large-font-family-style); - font-weight: var(--md-sys-typescale-label-large-font-weight); - font-size: var(--md-sys-typescale-label-large-font-size); - letter-spacing: var(--md-sys-typescale-label-large-tracking); - line-height: var(--md-sys-typescale-label-large-height); - text-transform: var(--md-sys-typescale-label-large-text-transform); - text-decoration: var(--md-sys-typescale-label-large-text-decoration); -} - -.label-medium { - font-family: var(--md-sys-typescale-label-medium-font-family-name); - font-style: var(--md-sys-typescale-label-medium-font-family-style); - font-weight: var(--md-sys-typescale-label-medium-font-weight); - font-size: var(--md-sys-typescale-label-medium-font-size); - letter-spacing: var(--md-sys-typescale-label-medium-tracking); - line-height: var(--md-sys-typescale-label-medium-height); - text-transform: var(--md-sys-typescale-label-medium-text-transform); - text-decoration: var(--md-sys-typescale-label-medium-text-decoration); -} - -.label-small { - font-family: var(--md-sys-typescale-label-small-font-family-name); - font-style: var(--md-sys-typescale-label-small-font-family-style); - font-weight: var(--md-sys-typescale-label-small-font-weight); - font-size: var(--md-sys-typescale-label-small-font-size); - letter-spacing: var(--md-sys-typescale-label-small-tracking); - line-height: var(--md-sys-typescale-label-small-height); - text-transform: var(--md-sys-typescale-label-small-text-transform); - text-decoration: var(--md-sys-typescale-label-small-text-decoration); -} - -.title-large { - font-family: var(--md-sys-typescale-title-large-font-family-name); - font-style: var(--md-sys-typescale-title-large-font-family-style); - font-weight: var(--md-sys-typescale-title-large-font-weight); - font-size: var(--md-sys-typescale-title-large-font-size); - letter-spacing: var(--md-sys-typescale-title-large-tracking); - line-height: var(--md-sys-typescale-title-large-height); - text-transform: var(--md-sys-typescale-title-large-text-transform); - text-decoration: var(--md-sys-typescale-title-large-text-decoration); -} - -.title-medium { - font-family: var(--md-sys-typescale-title-medium-font-family-name); - font-style: var(--md-sys-typescale-title-medium-font-family-style); - font-weight: var(--md-sys-typescale-title-medium-font-weight); - font-size: var(--md-sys-typescale-title-medium-font-size); - letter-spacing: var(--md-sys-typescale-title-medium-tracking); - line-height: var(--md-sys-typescale-title-medium-height); - text-transform: var(--md-sys-typescale-title-medium-text-transform); - text-decoration: var(--md-sys-typescale-title-medium-text-decoration); -} - -.title-small { - font-family: var(--md-sys-typescale-title-small-font-family-name); - font-style: var(--md-sys-typescale-title-small-font-family-style); - font-weight: var(--md-sys-typescale-title-small-font-weight); - font-size: var(--md-sys-typescale-title-small-font-size); - letter-spacing: var(--md-sys-typescale-title-small-tracking); - line-height: var(--md-sys-typescale-title-small-height); - text-transform: var(--md-sys-typescale-title-small-text-transform); - text-decoration: var(--md-sys-typescale-title-small-text-decoration); -} - -.materialize-red { - background-color: #e51c23 !important; -} - -.materialize-red-text { - color: #e51c23 !important; -} - -.materialize-red.lighten-5 { - background-color: #fdeaeb !important; -} - -.materialize-red-text.text-lighten-5 { - color: #fdeaeb !important; -} - -.materialize-red.lighten-4 { - background-color: #f8c1c3 !important; -} - -.materialize-red-text.text-lighten-4 { - color: #f8c1c3 !important; -} - -.materialize-red.lighten-3 { - background-color: #f3989b !important; -} - -.materialize-red-text.text-lighten-3 { - color: #f3989b !important; -} - -.materialize-red.lighten-2 { - background-color: #ee6e73 !important; -} - -.materialize-red-text.text-lighten-2 { - color: #ee6e73 !important; -} - -.materialize-red.lighten-1 { - background-color: #ea454b !important; -} - -.materialize-red-text.text-lighten-1 { - color: #ea454b !important; -} - -.materialize-red.darken-1 { - background-color: #d0181e !important; -} - -.materialize-red-text.text-darken-1 { - color: #d0181e !important; -} - -.materialize-red.darken-2 { - background-color: #b9151b !important; -} - -.materialize-red-text.text-darken-2 { - color: #b9151b !important; -} - -.materialize-red.darken-3 { - background-color: #a21318 !important; -} - -.materialize-red-text.text-darken-3 { - color: #a21318 !important; -} - -.materialize-red.darken-4 { - background-color: #8b1014 !important; -} - -.materialize-red-text.text-darken-4 { - color: #8b1014 !important; -} - -.red { - background-color: #F44336 !important; -} - -.red-text { - color: #F44336 !important; -} - -.red.lighten-5 { - background-color: #FFEBEE !important; -} - -.red-text.text-lighten-5 { - color: #FFEBEE !important; -} - -.red.lighten-4 { - background-color: #FFCDD2 !important; -} - -.red-text.text-lighten-4 { - color: #FFCDD2 !important; -} - -.red.lighten-3 { - background-color: #EF9A9A !important; -} - -.red-text.text-lighten-3 { - color: #EF9A9A !important; -} - -.red.lighten-2 { - background-color: #E57373 !important; -} - -.red-text.text-lighten-2 { - color: #E57373 !important; -} - -.red.lighten-1 { - background-color: #EF5350 !important; -} - -.red-text.text-lighten-1 { - color: #EF5350 !important; -} - -.red.darken-1 { - background-color: #E53935 !important; -} - -.red-text.text-darken-1 { - color: #E53935 !important; -} - -.red.darken-2 { - background-color: #D32F2F !important; -} - -.red-text.text-darken-2 { - color: #D32F2F !important; -} - -.red.darken-3 { - background-color: #C62828 !important; -} - -.red-text.text-darken-3 { - color: #C62828 !important; -} - -.red.darken-4 { - background-color: #B71C1C !important; -} - -.red-text.text-darken-4 { - color: #B71C1C !important; -} - -.red.accent-1 { - background-color: #FF8A80 !important; -} - -.red-text.text-accent-1 { - color: #FF8A80 !important; -} - -.red.accent-2 { - background-color: #FF5252 !important; -} - -.red-text.text-accent-2 { - color: #FF5252 !important; -} - -.red.accent-3 { - background-color: #FF1744 !important; -} - -.red-text.text-accent-3 { - color: #FF1744 !important; -} - -.red.accent-4 { - background-color: #D50000 !important; -} - -.red-text.text-accent-4 { - color: #D50000 !important; -} - -.pink { - background-color: #e91e63 !important; -} - -.pink-text { - color: #e91e63 !important; -} - -.pink.lighten-5 { - background-color: #fce4ec !important; -} - -.pink-text.text-lighten-5 { - color: #fce4ec !important; -} - -.pink.lighten-4 { - background-color: #f8bbd0 !important; -} - -.pink-text.text-lighten-4 { - color: #f8bbd0 !important; -} - -.pink.lighten-3 { - background-color: #f48fb1 !important; -} - -.pink-text.text-lighten-3 { - color: #f48fb1 !important; -} - -.pink.lighten-2 { - background-color: #f06292 !important; -} - -.pink-text.text-lighten-2 { - color: #f06292 !important; -} - -.pink.lighten-1 { - background-color: #ec407a !important; -} - -.pink-text.text-lighten-1 { - color: #ec407a !important; -} - -.pink.darken-1 { - background-color: #d81b60 !important; -} - -.pink-text.text-darken-1 { - color: #d81b60 !important; -} - -.pink.darken-2 { - background-color: #c2185b !important; -} - -.pink-text.text-darken-2 { - color: #c2185b !important; -} - -.pink.darken-3 { - background-color: #ad1457 !important; -} - -.pink-text.text-darken-3 { - color: #ad1457 !important; -} - -.pink.darken-4 { - background-color: #880e4f !important; -} - -.pink-text.text-darken-4 { - color: #880e4f !important; -} - -.pink.accent-1 { - background-color: #ff80ab !important; -} - -.pink-text.text-accent-1 { - color: #ff80ab !important; -} - -.pink.accent-2 { - background-color: #ff4081 !important; -} - -.pink-text.text-accent-2 { - color: #ff4081 !important; -} - -.pink.accent-3 { - background-color: #f50057 !important; -} - -.pink-text.text-accent-3 { - color: #f50057 !important; -} - -.pink.accent-4 { - background-color: #c51162 !important; -} - -.pink-text.text-accent-4 { - color: #c51162 !important; -} - -.purple { - background-color: #9c27b0 !important; -} - -.purple-text { - color: #9c27b0 !important; -} - -.purple.lighten-5 { - background-color: #f3e5f5 !important; -} - -.purple-text.text-lighten-5 { - color: #f3e5f5 !important; -} - -.purple.lighten-4 { - background-color: #e1bee7 !important; -} - -.purple-text.text-lighten-4 { - color: #e1bee7 !important; -} - -.purple.lighten-3 { - background-color: #ce93d8 !important; -} - -.purple-text.text-lighten-3 { - color: #ce93d8 !important; -} - -.purple.lighten-2 { - background-color: #ba68c8 !important; -} - -.purple-text.text-lighten-2 { - color: #ba68c8 !important; -} - -.purple.lighten-1 { - background-color: #ab47bc !important; -} - -.purple-text.text-lighten-1 { - color: #ab47bc !important; -} - -.purple.darken-1 { - background-color: #8e24aa !important; -} - -.purple-text.text-darken-1 { - color: #8e24aa !important; -} - -.purple.darken-2 { - background-color: #7b1fa2 !important; -} - -.purple-text.text-darken-2 { - color: #7b1fa2 !important; -} - -.purple.darken-3 { - background-color: #6a1b9a !important; -} - -.purple-text.text-darken-3 { - color: #6a1b9a !important; -} - -.purple.darken-4 { - background-color: #4a148c !important; -} - -.purple-text.text-darken-4 { - color: #4a148c !important; -} - -.purple.accent-1 { - background-color: #ea80fc !important; -} - -.purple-text.text-accent-1 { - color: #ea80fc !important; -} - -.purple.accent-2 { - background-color: #e040fb !important; -} - -.purple-text.text-accent-2 { - color: #e040fb !important; -} - -.purple.accent-3 { - background-color: #d500f9 !important; -} - -.purple-text.text-accent-3 { - color: #d500f9 !important; -} - -.purple.accent-4 { - background-color: #aa00ff !important; -} - -.purple-text.text-accent-4 { - color: #aa00ff !important; -} - -.deep-purple { - background-color: #673ab7 !important; -} - -.deep-purple-text { - color: #673ab7 !important; -} - -.deep-purple.lighten-5 { - background-color: #ede7f6 !important; -} - -.deep-purple-text.text-lighten-5 { - color: #ede7f6 !important; -} - -.deep-purple.lighten-4 { - background-color: #d1c4e9 !important; -} - -.deep-purple-text.text-lighten-4 { - color: #d1c4e9 !important; -} - -.deep-purple.lighten-3 { - background-color: #b39ddb !important; -} - -.deep-purple-text.text-lighten-3 { - color: #b39ddb !important; -} - -.deep-purple.lighten-2 { - background-color: #9575cd !important; -} - -.deep-purple-text.text-lighten-2 { - color: #9575cd !important; -} - -.deep-purple.lighten-1 { - background-color: #7e57c2 !important; -} - -.deep-purple-text.text-lighten-1 { - color: #7e57c2 !important; -} - -.deep-purple.darken-1 { - background-color: #5e35b1 !important; -} - -.deep-purple-text.text-darken-1 { - color: #5e35b1 !important; -} - -.deep-purple.darken-2 { - background-color: #512da8 !important; -} - -.deep-purple-text.text-darken-2 { - color: #512da8 !important; -} - -.deep-purple.darken-3 { - background-color: #4527a0 !important; -} - -.deep-purple-text.text-darken-3 { - color: #4527a0 !important; -} - -.deep-purple.darken-4 { - background-color: #311b92 !important; -} - -.deep-purple-text.text-darken-4 { - color: #311b92 !important; -} - -.deep-purple.accent-1 { - background-color: #b388ff !important; -} - -.deep-purple-text.text-accent-1 { - color: #b388ff !important; -} - -.deep-purple.accent-2 { - background-color: #7c4dff !important; -} - -.deep-purple-text.text-accent-2 { - color: #7c4dff !important; -} - -.deep-purple.accent-3 { - background-color: #651fff !important; -} - -.deep-purple-text.text-accent-3 { - color: #651fff !important; -} - -.deep-purple.accent-4 { - background-color: #6200ea !important; -} - -.deep-purple-text.text-accent-4 { - color: #6200ea !important; -} - -.indigo { - background-color: #3f51b5 !important; -} - -.indigo-text { - color: #3f51b5 !important; -} - -.indigo.lighten-5 { - background-color: #e8eaf6 !important; -} - -.indigo-text.text-lighten-5 { - color: #e8eaf6 !important; -} - -.indigo.lighten-4 { - background-color: #c5cae9 !important; -} - -.indigo-text.text-lighten-4 { - color: #c5cae9 !important; -} - -.indigo.lighten-3 { - background-color: #9fa8da !important; -} - -.indigo-text.text-lighten-3 { - color: #9fa8da !important; -} - -.indigo.lighten-2 { - background-color: #7986cb !important; -} - -.indigo-text.text-lighten-2 { - color: #7986cb !important; -} - -.indigo.lighten-1 { - background-color: #5c6bc0 !important; -} - -.indigo-text.text-lighten-1 { - color: #5c6bc0 !important; -} - -.indigo.darken-1 { - background-color: #3949ab !important; -} - -.indigo-text.text-darken-1 { - color: #3949ab !important; -} - -.indigo.darken-2 { - background-color: #303f9f !important; -} - -.indigo-text.text-darken-2 { - color: #303f9f !important; -} - -.indigo.darken-3 { - background-color: #283593 !important; -} - -.indigo-text.text-darken-3 { - color: #283593 !important; -} - -.indigo.darken-4 { - background-color: #1a237e !important; -} - -.indigo-text.text-darken-4 { - color: #1a237e !important; -} - -.indigo.accent-1 { - background-color: #8c9eff !important; -} - -.indigo-text.text-accent-1 { - color: #8c9eff !important; -} - -.indigo.accent-2 { - background-color: #536dfe !important; -} - -.indigo-text.text-accent-2 { - color: #536dfe !important; -} - -.indigo.accent-3 { - background-color: #3d5afe !important; -} - -.indigo-text.text-accent-3 { - color: #3d5afe !important; -} - -.indigo.accent-4 { - background-color: #304ffe !important; -} - -.indigo-text.text-accent-4 { - color: #304ffe !important; -} - -.blue { - background-color: #2196F3 !important; -} - -.blue-text { - color: #2196F3 !important; -} - -.blue.lighten-5 { - background-color: #E3F2FD !important; -} - -.blue-text.text-lighten-5 { - color: #E3F2FD !important; -} - -.blue.lighten-4 { - background-color: #BBDEFB !important; -} - -.blue-text.text-lighten-4 { - color: #BBDEFB !important; -} - -.blue.lighten-3 { - background-color: #90CAF9 !important; -} - -.blue-text.text-lighten-3 { - color: #90CAF9 !important; -} - -.blue.lighten-2 { - background-color: #64B5F6 !important; -} - -.blue-text.text-lighten-2 { - color: #64B5F6 !important; -} - -.blue.lighten-1 { - background-color: #42A5F5 !important; -} - -.blue-text.text-lighten-1 { - color: #42A5F5 !important; -} - -.blue.darken-1 { - background-color: #1E88E5 !important; -} - -.blue-text.text-darken-1 { - color: #1E88E5 !important; -} - -.blue.darken-2 { - background-color: #1976D2 !important; -} - -.blue-text.text-darken-2 { - color: #1976D2 !important; -} - -.blue.darken-3 { - background-color: #1565C0 !important; -} - -.blue-text.text-darken-3 { - color: #1565C0 !important; -} - -.blue.darken-4 { - background-color: #0D47A1 !important; -} - -.blue-text.text-darken-4 { - color: #0D47A1 !important; -} - -.blue.accent-1 { - background-color: #82B1FF !important; -} - -.blue-text.text-accent-1 { - color: #82B1FF !important; -} - -.blue.accent-2 { - background-color: #448AFF !important; -} - -.blue-text.text-accent-2 { - color: #448AFF !important; -} - -.blue.accent-3 { - background-color: #2979FF !important; -} - -.blue-text.text-accent-3 { - color: #2979FF !important; -} - -.blue.accent-4 { - background-color: #2962FF !important; -} - -.blue-text.text-accent-4 { - color: #2962FF !important; -} - -.light-blue { - background-color: #03a9f4 !important; -} - -.light-blue-text { - color: #03a9f4 !important; -} - -.light-blue.lighten-5 { - background-color: #e1f5fe !important; -} - -.light-blue-text.text-lighten-5 { - color: #e1f5fe !important; -} - -.light-blue.lighten-4 { - background-color: #b3e5fc !important; -} - -.light-blue-text.text-lighten-4 { - color: #b3e5fc !important; -} - -.light-blue.lighten-3 { - background-color: #81d4fa !important; -} - -.light-blue-text.text-lighten-3 { - color: #81d4fa !important; -} - -.light-blue.lighten-2 { - background-color: #4fc3f7 !important; -} - -.light-blue-text.text-lighten-2 { - color: #4fc3f7 !important; -} - -.light-blue.lighten-1 { - background-color: #29b6f6 !important; -} - -.light-blue-text.text-lighten-1 { - color: #29b6f6 !important; -} - -.light-blue.darken-1 { - background-color: #039be5 !important; -} - -.light-blue-text.text-darken-1 { - color: #039be5 !important; -} - -.light-blue.darken-2 { - background-color: #0288d1 !important; -} - -.light-blue-text.text-darken-2 { - color: #0288d1 !important; -} - -.light-blue.darken-3 { - background-color: #0277bd !important; -} - -.light-blue-text.text-darken-3 { - color: #0277bd !important; -} - -.light-blue.darken-4 { - background-color: #01579b !important; -} - -.light-blue-text.text-darken-4 { - color: #01579b !important; -} - -.light-blue.accent-1 { - background-color: #80d8ff !important; -} - -.light-blue-text.text-accent-1 { - color: #80d8ff !important; -} - -.light-blue.accent-2 { - background-color: #40c4ff !important; -} - -.light-blue-text.text-accent-2 { - color: #40c4ff !important; -} - -.light-blue.accent-3 { - background-color: #00b0ff !important; -} - -.light-blue-text.text-accent-3 { - color: #00b0ff !important; -} - -.light-blue.accent-4 { - background-color: #0091ea !important; -} - -.light-blue-text.text-accent-4 { - color: #0091ea !important; -} - -.cyan { - background-color: #00bcd4 !important; -} - -.cyan-text { - color: #00bcd4 !important; -} - -.cyan.lighten-5 { - background-color: #e0f7fa !important; -} - -.cyan-text.text-lighten-5 { - color: #e0f7fa !important; -} - -.cyan.lighten-4 { - background-color: #b2ebf2 !important; -} - -.cyan-text.text-lighten-4 { - color: #b2ebf2 !important; -} - -.cyan.lighten-3 { - background-color: #80deea !important; -} - -.cyan-text.text-lighten-3 { - color: #80deea !important; -} - -.cyan.lighten-2 { - background-color: #4dd0e1 !important; -} - -.cyan-text.text-lighten-2 { - color: #4dd0e1 !important; -} - -.cyan.lighten-1 { - background-color: #26c6da !important; -} - -.cyan-text.text-lighten-1 { - color: #26c6da !important; -} - -.cyan.darken-1 { - background-color: #00acc1 !important; -} - -.cyan-text.text-darken-1 { - color: #00acc1 !important; -} - -.cyan.darken-2 { - background-color: #0097a7 !important; -} - -.cyan-text.text-darken-2 { - color: #0097a7 !important; -} - -.cyan.darken-3 { - background-color: #00838f !important; -} - -.cyan-text.text-darken-3 { - color: #00838f !important; -} - -.cyan.darken-4 { - background-color: #006064 !important; -} - -.cyan-text.text-darken-4 { - color: #006064 !important; -} - -.cyan.accent-1 { - background-color: #84ffff !important; -} - -.cyan-text.text-accent-1 { - color: #84ffff !important; -} - -.cyan.accent-2 { - background-color: #18ffff !important; -} - -.cyan-text.text-accent-2 { - color: #18ffff !important; -} - -.cyan.accent-3 { - background-color: #00e5ff !important; -} - -.cyan-text.text-accent-3 { - color: #00e5ff !important; -} - -.cyan.accent-4 { - background-color: #00b8d4 !important; -} - -.cyan-text.text-accent-4 { - color: #00b8d4 !important; -} - -.teal { - background-color: #009688 !important; -} - -.teal-text { - color: #009688 !important; -} - -.teal.lighten-5 { - background-color: #e0f2f1 !important; -} - -.teal-text.text-lighten-5 { - color: #e0f2f1 !important; -} - -.teal.lighten-4 { - background-color: #b2dfdb !important; -} - -.teal-text.text-lighten-4 { - color: #b2dfdb !important; -} - -.teal.lighten-3 { - background-color: #80cbc4 !important; -} - -.teal-text.text-lighten-3 { - color: #80cbc4 !important; -} - -.teal.lighten-2 { - background-color: #4db6ac !important; -} - -.teal-text.text-lighten-2 { - color: #4db6ac !important; -} - -.teal.lighten-1 { - background-color: #26a69a !important; -} - -.teal-text.text-lighten-1 { - color: #26a69a !important; -} - -.teal.darken-1 { - background-color: #00897b !important; -} - -.teal-text.text-darken-1 { - color: #00897b !important; -} - -.teal.darken-2 { - background-color: #00796b !important; -} - -.teal-text.text-darken-2 { - color: #00796b !important; -} - -.teal.darken-3 { - background-color: #00695c !important; -} - -.teal-text.text-darken-3 { - color: #00695c !important; -} - -.teal.darken-4 { - background-color: #004d40 !important; -} - -.teal-text.text-darken-4 { - color: #004d40 !important; -} - -.teal.accent-1 { - background-color: #a7ffeb !important; -} - -.teal-text.text-accent-1 { - color: #a7ffeb !important; -} - -.teal.accent-2 { - background-color: #64ffda !important; -} - -.teal-text.text-accent-2 { - color: #64ffda !important; -} - -.teal.accent-3 { - background-color: #1de9b6 !important; -} - -.teal-text.text-accent-3 { - color: #1de9b6 !important; -} - -.teal.accent-4 { - background-color: #00bfa5 !important; -} - -.teal-text.text-accent-4 { - color: #00bfa5 !important; -} - -.green { - background-color: #4CAF50 !important; -} - -.green-text { - color: #4CAF50 !important; -} - -.green.lighten-5 { - background-color: #E8F5E9 !important; -} - -.green-text.text-lighten-5 { - color: #E8F5E9 !important; -} - -.green.lighten-4 { - background-color: #C8E6C9 !important; -} - -.green-text.text-lighten-4 { - color: #C8E6C9 !important; -} - -.green.lighten-3 { - background-color: #A5D6A7 !important; -} - -.green-text.text-lighten-3 { - color: #A5D6A7 !important; -} - -.green.lighten-2 { - background-color: #81C784 !important; -} - -.green-text.text-lighten-2 { - color: #81C784 !important; -} - -.green.lighten-1 { - background-color: #66BB6A !important; -} - -.green-text.text-lighten-1 { - color: #66BB6A !important; -} - -.green.darken-1 { - background-color: #43A047 !important; -} - -.green-text.text-darken-1 { - color: #43A047 !important; -} - -.green.darken-2 { - background-color: #388E3C !important; -} - -.green-text.text-darken-2 { - color: #388E3C !important; -} - -.green.darken-3 { - background-color: #2E7D32 !important; -} - -.green-text.text-darken-3 { - color: #2E7D32 !important; -} - -.green.darken-4 { - background-color: #1B5E20 !important; -} - -.green-text.text-darken-4 { - color: #1B5E20 !important; -} - -.green.accent-1 { - background-color: #B9F6CA !important; -} - -.green-text.text-accent-1 { - color: #B9F6CA !important; -} - -.green.accent-2 { - background-color: #69F0AE !important; -} - -.green-text.text-accent-2 { - color: #69F0AE !important; -} - -.green.accent-3 { - background-color: #00E676 !important; -} - -.green-text.text-accent-3 { - color: #00E676 !important; -} - -.green.accent-4 { - background-color: #00C853 !important; -} - -.green-text.text-accent-4 { - color: #00C853 !important; -} - -.light-green { - background-color: #8bc34a !important; -} - -.light-green-text { - color: #8bc34a !important; -} - -.light-green.lighten-5 { - background-color: #f1f8e9 !important; -} - -.light-green-text.text-lighten-5 { - color: #f1f8e9 !important; -} - -.light-green.lighten-4 { - background-color: #dcedc8 !important; -} - -.light-green-text.text-lighten-4 { - color: #dcedc8 !important; -} - -.light-green.lighten-3 { - background-color: #c5e1a5 !important; -} - -.light-green-text.text-lighten-3 { - color: #c5e1a5 !important; -} - -.light-green.lighten-2 { - background-color: #aed581 !important; -} - -.light-green-text.text-lighten-2 { - color: #aed581 !important; -} - -.light-green.lighten-1 { - background-color: #9ccc65 !important; -} - -.light-green-text.text-lighten-1 { - color: #9ccc65 !important; -} - -.light-green.darken-1 { - background-color: #7cb342 !important; -} - -.light-green-text.text-darken-1 { - color: #7cb342 !important; -} - -.light-green.darken-2 { - background-color: #689f38 !important; -} - -.light-green-text.text-darken-2 { - color: #689f38 !important; -} - -.light-green.darken-3 { - background-color: #558b2f !important; -} - -.light-green-text.text-darken-3 { - color: #558b2f !important; -} - -.light-green.darken-4 { - background-color: #33691e !important; -} - -.light-green-text.text-darken-4 { - color: #33691e !important; -} - -.light-green.accent-1 { - background-color: #ccff90 !important; -} - -.light-green-text.text-accent-1 { - color: #ccff90 !important; -} - -.light-green.accent-2 { - background-color: #b2ff59 !important; -} - -.light-green-text.text-accent-2 { - color: #b2ff59 !important; -} - -.light-green.accent-3 { - background-color: #76ff03 !important; -} - -.light-green-text.text-accent-3 { - color: #76ff03 !important; -} - -.light-green.accent-4 { - background-color: #64dd17 !important; -} - -.light-green-text.text-accent-4 { - color: #64dd17 !important; -} - -.lime { - background-color: #cddc39 !important; -} - -.lime-text { - color: #cddc39 !important; -} - -.lime.lighten-5 { - background-color: #f9fbe7 !important; -} - -.lime-text.text-lighten-5 { - color: #f9fbe7 !important; -} - -.lime.lighten-4 { - background-color: #f0f4c3 !important; -} - -.lime-text.text-lighten-4 { - color: #f0f4c3 !important; -} - -.lime.lighten-3 { - background-color: #e6ee9c !important; -} - -.lime-text.text-lighten-3 { - color: #e6ee9c !important; -} - -.lime.lighten-2 { - background-color: #dce775 !important; -} - -.lime-text.text-lighten-2 { - color: #dce775 !important; -} - -.lime.lighten-1 { - background-color: #d4e157 !important; -} - -.lime-text.text-lighten-1 { - color: #d4e157 !important; -} - -.lime.darken-1 { - background-color: #c0ca33 !important; -} - -.lime-text.text-darken-1 { - color: #c0ca33 !important; -} - -.lime.darken-2 { - background-color: #afb42b !important; -} - -.lime-text.text-darken-2 { - color: #afb42b !important; -} - -.lime.darken-3 { - background-color: #9e9d24 !important; -} - -.lime-text.text-darken-3 { - color: #9e9d24 !important; -} - -.lime.darken-4 { - background-color: #827717 !important; -} - -.lime-text.text-darken-4 { - color: #827717 !important; -} - -.lime.accent-1 { - background-color: #f4ff81 !important; -} - -.lime-text.text-accent-1 { - color: #f4ff81 !important; -} - -.lime.accent-2 { - background-color: #eeff41 !important; -} - -.lime-text.text-accent-2 { - color: #eeff41 !important; -} - -.lime.accent-3 { - background-color: #c6ff00 !important; -} - -.lime-text.text-accent-3 { - color: #c6ff00 !important; -} - -.lime.accent-4 { - background-color: #aeea00 !important; -} - -.lime-text.text-accent-4 { - color: #aeea00 !important; -} - -.yellow { - background-color: #ffeb3b !important; -} - -.yellow-text { - color: #ffeb3b !important; -} - -.yellow.lighten-5 { - background-color: #fffde7 !important; -} - -.yellow-text.text-lighten-5 { - color: #fffde7 !important; -} - -.yellow.lighten-4 { - background-color: #fff9c4 !important; -} - -.yellow-text.text-lighten-4 { - color: #fff9c4 !important; -} - -.yellow.lighten-3 { - background-color: #fff59d !important; -} - -.yellow-text.text-lighten-3 { - color: #fff59d !important; -} - -.yellow.lighten-2 { - background-color: #fff176 !important; -} - -.yellow-text.text-lighten-2 { - color: #fff176 !important; -} - -.yellow.lighten-1 { - background-color: #ffee58 !important; -} - -.yellow-text.text-lighten-1 { - color: #ffee58 !important; -} - -.yellow.darken-1 { - background-color: #fdd835 !important; -} - -.yellow-text.text-darken-1 { - color: #fdd835 !important; -} - -.yellow.darken-2 { - background-color: #fbc02d !important; -} - -.yellow-text.text-darken-2 { - color: #fbc02d !important; -} - -.yellow.darken-3 { - background-color: #f9a825 !important; -} - -.yellow-text.text-darken-3 { - color: #f9a825 !important; -} - -.yellow.darken-4 { - background-color: #f57f17 !important; -} - -.yellow-text.text-darken-4 { - color: #f57f17 !important; -} - -.yellow.accent-1 { - background-color: #ffff8d !important; -} - -.yellow-text.text-accent-1 { - color: #ffff8d !important; -} - -.yellow.accent-2 { - background-color: #ffff00 !important; -} - -.yellow-text.text-accent-2 { - color: #ffff00 !important; -} - -.yellow.accent-3 { - background-color: #ffea00 !important; -} - -.yellow-text.text-accent-3 { - color: #ffea00 !important; -} - -.yellow.accent-4 { - background-color: #ffd600 !important; -} - -.yellow-text.text-accent-4 { - color: #ffd600 !important; -} - -.amber { - background-color: #ffc107 !important; -} - -.amber-text { - color: #ffc107 !important; -} - -.amber.lighten-5 { - background-color: #fff8e1 !important; -} - -.amber-text.text-lighten-5 { - color: #fff8e1 !important; -} - -.amber.lighten-4 { - background-color: #ffecb3 !important; -} - -.amber-text.text-lighten-4 { - color: #ffecb3 !important; -} - -.amber.lighten-3 { - background-color: #ffe082 !important; -} - -.amber-text.text-lighten-3 { - color: #ffe082 !important; -} - -.amber.lighten-2 { - background-color: #ffd54f !important; -} - -.amber-text.text-lighten-2 { - color: #ffd54f !important; -} - -.amber.lighten-1 { - background-color: #ffca28 !important; -} - -.amber-text.text-lighten-1 { - color: #ffca28 !important; -} - -.amber.darken-1 { - background-color: #ffb300 !important; -} - -.amber-text.text-darken-1 { - color: #ffb300 !important; -} - -.amber.darken-2 { - background-color: #ffa000 !important; -} - -.amber-text.text-darken-2 { - color: #ffa000 !important; -} - -.amber.darken-3 { - background-color: #ff8f00 !important; -} - -.amber-text.text-darken-3 { - color: #ff8f00 !important; -} - -.amber.darken-4 { - background-color: #ff6f00 !important; -} - -.amber-text.text-darken-4 { - color: #ff6f00 !important; -} - -.amber.accent-1 { - background-color: #ffe57f !important; -} - -.amber-text.text-accent-1 { - color: #ffe57f !important; -} - -.amber.accent-2 { - background-color: #ffd740 !important; -} - -.amber-text.text-accent-2 { - color: #ffd740 !important; -} - -.amber.accent-3 { - background-color: #ffc400 !important; -} - -.amber-text.text-accent-3 { - color: #ffc400 !important; -} - -.amber.accent-4 { - background-color: #ffab00 !important; -} - -.amber-text.text-accent-4 { - color: #ffab00 !important; -} - -.orange { - background-color: #ff9800 !important; -} - -.orange-text { - color: #ff9800 !important; -} - -.orange.lighten-5 { - background-color: #fff3e0 !important; -} - -.orange-text.text-lighten-5 { - color: #fff3e0 !important; -} - -.orange.lighten-4 { - background-color: #ffe0b2 !important; -} - -.orange-text.text-lighten-4 { - color: #ffe0b2 !important; -} - -.orange.lighten-3 { - background-color: #ffcc80 !important; -} - -.orange-text.text-lighten-3 { - color: #ffcc80 !important; -} - -.orange.lighten-2 { - background-color: #ffb74d !important; -} - -.orange-text.text-lighten-2 { - color: #ffb74d !important; -} - -.orange.lighten-1 { - background-color: #ffa726 !important; -} - -.orange-text.text-lighten-1 { - color: #ffa726 !important; -} - -.orange.darken-1 { - background-color: #fb8c00 !important; -} - -.orange-text.text-darken-1 { - color: #fb8c00 !important; -} - -.orange.darken-2 { - background-color: #f57c00 !important; -} - -.orange-text.text-darken-2 { - color: #f57c00 !important; -} - -.orange.darken-3 { - background-color: #ef6c00 !important; -} - -.orange-text.text-darken-3 { - color: #ef6c00 !important; -} - -.orange.darken-4 { - background-color: #e65100 !important; -} - -.orange-text.text-darken-4 { - color: #e65100 !important; -} - -.orange.accent-1 { - background-color: #ffd180 !important; -} - -.orange-text.text-accent-1 { - color: #ffd180 !important; -} - -.orange.accent-2 { - background-color: #ffab40 !important; -} - -.orange-text.text-accent-2 { - color: #ffab40 !important; -} - -.orange.accent-3 { - background-color: #ff9100 !important; -} - -.orange-text.text-accent-3 { - color: #ff9100 !important; -} - -.orange.accent-4 { - background-color: #ff6d00 !important; -} - -.orange-text.text-accent-4 { - color: #ff6d00 !important; -} - -.deep-orange { - background-color: #ff5722 !important; -} - -.deep-orange-text { - color: #ff5722 !important; -} - -.deep-orange.lighten-5 { - background-color: #fbe9e7 !important; -} - -.deep-orange-text.text-lighten-5 { - color: #fbe9e7 !important; -} - -.deep-orange.lighten-4 { - background-color: #ffccbc !important; -} - -.deep-orange-text.text-lighten-4 { - color: #ffccbc !important; -} - -.deep-orange.lighten-3 { - background-color: #ffab91 !important; -} - -.deep-orange-text.text-lighten-3 { - color: #ffab91 !important; -} - -.deep-orange.lighten-2 { - background-color: #ff8a65 !important; -} - -.deep-orange-text.text-lighten-2 { - color: #ff8a65 !important; -} - -.deep-orange.lighten-1 { - background-color: #ff7043 !important; -} - -.deep-orange-text.text-lighten-1 { - color: #ff7043 !important; -} - -.deep-orange.darken-1 { - background-color: #f4511e !important; -} - -.deep-orange-text.text-darken-1 { - color: #f4511e !important; -} - -.deep-orange.darken-2 { - background-color: #e64a19 !important; -} - -.deep-orange-text.text-darken-2 { - color: #e64a19 !important; -} - -.deep-orange.darken-3 { - background-color: #d84315 !important; -} - -.deep-orange-text.text-darken-3 { - color: #d84315 !important; -} - -.deep-orange.darken-4 { - background-color: #bf360c !important; -} - -.deep-orange-text.text-darken-4 { - color: #bf360c !important; -} - -.deep-orange.accent-1 { - background-color: #ff9e80 !important; -} - -.deep-orange-text.text-accent-1 { - color: #ff9e80 !important; -} - -.deep-orange.accent-2 { - background-color: #ff6e40 !important; -} - -.deep-orange-text.text-accent-2 { - color: #ff6e40 !important; -} - -.deep-orange.accent-3 { - background-color: #ff3d00 !important; -} - -.deep-orange-text.text-accent-3 { - color: #ff3d00 !important; -} - -.deep-orange.accent-4 { - background-color: #dd2c00 !important; -} - -.deep-orange-text.text-accent-4 { - color: #dd2c00 !important; -} - -.brown { - background-color: #795548 !important; -} - -.brown-text { - color: #795548 !important; -} - -.brown.lighten-5 { - background-color: #efebe9 !important; -} - -.brown-text.text-lighten-5 { - color: #efebe9 !important; -} - -.brown.lighten-4 { - background-color: #d7ccc8 !important; -} - -.brown-text.text-lighten-4 { - color: #d7ccc8 !important; -} - -.brown.lighten-3 { - background-color: #bcaaa4 !important; -} - -.brown-text.text-lighten-3 { - color: #bcaaa4 !important; -} - -.brown.lighten-2 { - background-color: #a1887f !important; -} - -.brown-text.text-lighten-2 { - color: #a1887f !important; -} - -.brown.lighten-1 { - background-color: #8d6e63 !important; -} - -.brown-text.text-lighten-1 { - color: #8d6e63 !important; -} - -.brown.darken-1 { - background-color: #6d4c41 !important; -} - -.brown-text.text-darken-1 { - color: #6d4c41 !important; -} - -.brown.darken-2 { - background-color: #5d4037 !important; -} - -.brown-text.text-darken-2 { - color: #5d4037 !important; -} - -.brown.darken-3 { - background-color: #4e342e !important; -} - -.brown-text.text-darken-3 { - color: #4e342e !important; -} - -.brown.darken-4 { - background-color: #3e2723 !important; -} - -.brown-text.text-darken-4 { - color: #3e2723 !important; -} - -.blue-grey { - background-color: #607d8b !important; -} - -.blue-grey-text { - color: #607d8b !important; -} - -.blue-grey.lighten-5 { - background-color: #eceff1 !important; -} - -.blue-grey-text.text-lighten-5 { - color: #eceff1 !important; -} - -.blue-grey.lighten-4 { - background-color: #cfd8dc !important; -} - -.blue-grey-text.text-lighten-4 { - color: #cfd8dc !important; -} - -.blue-grey.lighten-3 { - background-color: #b0bec5 !important; -} - -.blue-grey-text.text-lighten-3 { - color: #b0bec5 !important; -} - -.blue-grey.lighten-2 { - background-color: #90a4ae !important; -} - -.blue-grey-text.text-lighten-2 { - color: #90a4ae !important; -} - -.blue-grey.lighten-1 { - background-color: #78909c !important; -} - -.blue-grey-text.text-lighten-1 { - color: #78909c !important; -} - -.blue-grey.darken-1 { - background-color: #546e7a !important; -} - -.blue-grey-text.text-darken-1 { - color: #546e7a !important; -} - -.blue-grey.darken-2 { - background-color: #455a64 !important; -} - -.blue-grey-text.text-darken-2 { - color: #455a64 !important; -} - -.blue-grey.darken-3 { - background-color: #37474f !important; -} - -.blue-grey-text.text-darken-3 { - color: #37474f !important; -} - -.blue-grey.darken-4 { - background-color: #263238 !important; -} - -.blue-grey-text.text-darken-4 { - color: #263238 !important; -} - -.grey { - background-color: #9e9e9e !important; -} - -.grey-text { - color: #9e9e9e !important; -} - -.grey.lighten-5 { - background-color: #fafafa !important; -} - -.grey-text.text-lighten-5 { - color: #fafafa !important; -} - -.grey.lighten-4 { - background-color: #f5f5f5 !important; -} - -.grey-text.text-lighten-4 { - color: #f5f5f5 !important; -} - -.grey.lighten-3 { - background-color: #eeeeee !important; -} - -.grey-text.text-lighten-3 { - color: #eeeeee !important; -} - -.grey.lighten-2 { - background-color: #e0e0e0 !important; -} - -.grey-text.text-lighten-2 { - color: #e0e0e0 !important; -} - -.grey.lighten-1 { - background-color: #bdbdbd !important; -} - -.grey-text.text-lighten-1 { - color: #bdbdbd !important; -} - -.grey.darken-1 { - background-color: #757575 !important; -} - -.grey-text.text-darken-1 { - color: #757575 !important; -} - -.grey.darken-2 { - background-color: #616161 !important; -} - -.grey-text.text-darken-2 { - color: #616161 !important; -} - -.grey.darken-3 { - background-color: #424242 !important; -} - -.grey-text.text-darken-3 { - color: #424242 !important; -} - -.grey.darken-4 { - background-color: #212121 !important; -} - -.grey-text.text-darken-4 { - color: #212121 !important; -} - -.black { - background-color: #000000 !important; -} - -.black-text { - color: #000000 !important; -} - -.white { - background-color: #FFFFFF !important; -} - -.white-text { - color: #FFFFFF !important; -} - -.transparent { - background-color: transparent !important; -} - -.transparent-text { - color: transparent !important; -} - -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ -/* Document - ========================================================================== */ -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* Sections - ========================================================================== */ -/** - * Remove the margin in all browsers. - */ -body { - margin: 0; -} - -/** - * Render the `main` element consistently in IE. - */ -main { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ -/** - * Remove the gray background on active links in IE 10. - */ -a { - background-color: transparent; -} - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ -/** - * Remove the border on images inside links in IE 10. - */ -img { - border-style: none; -} - -/* Forms - ========================================================================== */ -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ -button, -select { /* 1 */ - text-transform: none; -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ -button, -[type=button], -[type=reset], -[type=submit] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ -button::-moz-focus-inner, -[type=button]::-moz-focus-inner, -[type=reset]::-moz-focus-inner, -[type=submit]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ -button:-moz-focusring, -[type=button]:-moz-focusring, -[type=reset]:-moz-focusring, -[type=submit]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ -progress { - vertical-align: baseline; -} - -/** - * Remove the default vertical scrollbar in IE 10+. - */ -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ -[type=checkbox], -[type=radio] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ -[type=number]::-webkit-inner-spin-button, -[type=number]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ -[type=search] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ -[type=search]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ -details { - display: block; -} - -/* - * Add the correct display in all browsers. - */ -summary { - display: list-item; -} - -/* Misc - ========================================================================== */ -/** - * Add the correct display in IE 10+. - */ -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ -[hidden] { - display: none; -} - -html { - box-sizing: border-box; -} - -*, *:before, *:after { - box-sizing: inherit; -} - -body { - background-color: var(--md-sys-color-background); - color: var(--md-sys-color-on-background); -} - -button, -input, -optgroup, -select, -textarea { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; -} - -a { - color: #039be5; - text-decoration: none; - -webkit-tap-highlight-color: transparent; -} - -.valign-wrapper { - display: flex; - align-items: center; -} - -.clearfix { - clear: both; -} - -.z-depth-0, .btn:focus.tonal, .btn-small:focus.tonal, .btn-large:focus.tonal, .btn:focus.filled, .btn-small:focus.filled, .btn-large:focus.filled, .btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled, -.btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled, -.btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled], .btn.text, .text.btn-small, .text.btn-large, .btn-flat { - box-shadow: none !important; -} - -/* 2dp elevation modified*/ -.z-depth-1, .sidenav, .collapsible, .dropdown-content, .btn-floating, .btn:focus.elevated, .btn-small:focus.elevated, .btn-large:focus.elevated, .btn.tonal:hover, .tonal.btn-small:hover, .tonal.btn-large:hover, .btn.filled:hover, .filled.btn-small:hover, .filled.btn-large:hover, .btn.elevated, .elevated.btn-small, .elevated.btn-large, .card, .card-panel, nav { - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); -} - -.z-depth-1-half, .btn-floating:focus, .btn-floating:hover { - box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2); -} - -/* 6dp elevation modified*/ -.z-depth-2, .btn.elevated:hover, .elevated.btn-small:hover, .elevated.btn-large:hover { - box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); -} - -/* 12dp elevation modified*/ -.z-depth-3, .toast { - box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); -} - -/* 16dp elevation */ -.z-depth-4 { - box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2); -} - -/* 24dp elevation */ -.z-depth-5, .modal { - box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2); -} - -.hoverable { - transition: box-shadow 0.25s; -} -.hoverable:hover { - box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -} - -.divider { - height: 1px; - overflow: hidden; - background-color: var(--md-sys-color-outline-variant); -} - -blockquote { - margin: 20px 0; - padding-left: 1.5rem; - border-left: 5px solid var(--md-sys-color-primary); -} - -i { - line-height: inherit; -} -i.left { - float: left; - margin-left: -8px; -} -i.right { - float: right; -} -i.tiny { - font-size: 1rem; -} -i.small { - font-size: 2rem; -} -i.medium { - font-size: 4rem; -} -i.large { - font-size: 6rem; -} - -html.noscroll { - position: fixed; - overflow-y: scroll; - width: 100%; -} - -img.responsive-img, -video.responsive-video { - max-width: 100%; - height: auto; -} - -.pagination li { - display: inline-block; - border-radius: 2px; - text-align: center; - vertical-align: top; - height: 30px; -} -.pagination li a { - color: var(--md-sys-color-on-surface-variant); - display: inline-block; - font-size: 1.2rem; - padding: 0 10px; - line-height: 30px; -} -.pagination li:hover:not(.disabled) { - background-color: rgba(var(--md-sys-color-primary-numeric), 0.06); -} -.pagination li.active a { - color: var(--md-sys-color-on-primary); -} -.pagination li.active, .pagination li.active:hover { - background-color: var(--md-sys-color-primary); -} -.pagination li.disabled a { - cursor: default; - color: var(--md-sys-color-on-surface); -} -.pagination li i { - font-size: 2rem; -} -.pagination li.pages ul li { - display: inline-block; - float: none; -} - -@media only screen and (max-width : 992.99px) { - .pagination { - width: 100%; - } - .pagination li.prev, - .pagination li.next { - width: 10%; - } - .pagination li.pages { - width: 80%; - overflow: hidden; - white-space: nowrap; - } -} -.breadcrumb { - display: inline-block; - font-size: 18px; - color: var(--font-on-primary-color-medium); -} -.breadcrumb i, -.breadcrumb [class^=mdi-], .breadcrumb [class*=mdi-], -.breadcrumb i.material-icons, .breadcrumb i.material-symbols-outlined, -.breadcrumb i.material-symbols-rounded, .breadcrumb i.material-symbols-sharp { - display: block; - float: left; - font-size: 24px; -} -.breadcrumb:before { - content: "\e5cc"; - color: var(--font-on-primary-color-medium); - vertical-align: top; - display: inline-block; - font-family: "Material Symbols Outlined", "Material Symbols Rounded", "Material Symbols Sharp", "Material Icons"; - font-weight: normal; - font-style: normal; - font-size: 25px; - margin: 0 10px 0 8px; - -webkit-font-smoothing: antialiased; - float: left; -} -.breadcrumb:first-child:before { - display: none; -} -.breadcrumb:last-child { - color: var(--md-sys-color-on-primary); -} - -.parallax-container { - position: relative; - overflow: hidden; - height: 500px; -} -.parallax-container .parallax { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: -1; -} -.parallax-container .parallax img { - opacity: 0; - position: absolute; - left: 50%; - bottom: 0; - min-width: 100%; - min-height: 100%; - transform: translate3d(0, 0, 0); - transform: translateX(-50%); -} - -.pin-top, .pin-bottom { - position: relative; -} - -.pinned { - position: fixed !important; -} - -/********************* - Transition Classes -**********************/ -ul.staggered-list li { - opacity: 0; -} - -.fade-in { - opacity: 0; - transform-origin: 0 50%; -} - -/********************* - Media Query Classes -**********************/ -@media only screen and (max-width : 600.99px) { - .hide-on-small-only, .hide-on-small-and-down { - display: none !important; - } -} - -@media only screen and (max-width : 992.99px) { - .hide-on-med-and-down { - display: none !important; - } -} - -@media only screen and (min-width : 601px) { - .hide-on-med-and-up { - display: none !important; - } -} - -@media only screen and (min-width: 601px) and (max-width: 992.99px) { - .hide-on-med-only { - display: none !important; - } -} - -@media only screen and (min-width : 993px) { - .hide-on-large-only { - display: none !important; - } -} - -@media only screen and (min-width : 1201px) { - .hide-on-extra-large-only { - display: none !important; - } -} - -@media only screen and (min-width : 1201px) { - .show-on-extra-large { - display: block !important; - } -} - -@media only screen and (min-width : 993px) { - .show-on-large { - display: block !important; - } -} - -@media only screen and (min-width: 601px) and (max-width: 992.99px) { - .show-on-medium { - display: block !important; - } -} - -@media only screen and (max-width : 600.99px) { - .show-on-small { - display: block !important; - } -} - -@media only screen and (min-width : 601px) { - .show-on-medium-and-up { - display: block !important; - } -} - -@media only screen and (max-width : 992.99px) { - .show-on-medium-and-down { - display: block !important; - } -} - -@media only screen and (max-width : 600.99px) { - .center-on-small-only { - text-align: center; - } -} - -.page-footer { - margin-top: 5rem; - padding-top: 3rem; - border-top: 1px dashed var(--md-sys-color-outline-variant); -} -.page-footer p { - color: var(--md-sys-color-outline-light); -} -.page-footer a { - color: var(--md-sys-color-primary); -} -.page-footer .footer-copyright, -.page-footer .footer-copyright a { - overflow: hidden; - min-height: 50px; - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 0px; -} - -.page-footer ul { - padding-left: 0; - list-style-type: none; -} - -table, th, td { - border: none; -} - -table { - width: 100%; - display: table; - border-collapse: collapse; - border-spacing: 0; -} -table.striped tr { - border-bottom: none; -} -table.striped tbody > tr:nth-child(odd) { - background-color: rgba(0, 0, 0, 0.08); -} -table.highlight > tbody > tr { - transition: background-color 0.25s ease; -} -table.highlight > tbody > tr:hover { - background-color: rgba(0, 0, 0, 0.04); -} -table thead { - color: var(--md-sys-color-on-surface-variant); -} -table.centered thead tr th, table.centered tbody tr td { - text-align: center; -} - -tr { - border-bottom: 1px solid var(--md-sys-color-outline-variant); -} - -td, th { - padding: 15px 5px; - display: table-cell; - text-align: left; - vertical-align: middle; - border-radius: 0; -} - -@media only screen and (max-width : 992.99px) { - table.responsive-table { - width: 100%; - border-collapse: collapse; - border-spacing: 0; - display: block; - position: relative; - /* sort out borders */ - } - table.responsive-table td:empty:before { - content: " "; - } - table.responsive-table th, - table.responsive-table td { - margin: 0; - vertical-align: top; - } - table.responsive-table th { - text-align: left; - } - table.responsive-table thead { - display: block; - float: left; - } - table.responsive-table thead tr { - display: block; - padding: 0 10px 0 0; - } - table.responsive-table thead tr th::before { - content: " "; - } - table.responsive-table tbody { - display: block; - width: auto; - position: relative; - overflow-x: auto; - white-space: nowrap; - } - table.responsive-table tbody tr { - display: inline-block; - vertical-align: top; - } - table.responsive-table th { - display: block; - text-align: right; - } - table.responsive-table td { - display: block; - min-height: 1.25em; - text-align: left; - } - table.responsive-table tr { - border-bottom: none; - padding: 0 10px; - } - table.responsive-table thead { - border: 0; - border-right: 1px solid var(--md-sys-color-outline-variant); - } -} -.video-container { - position: relative; - padding-bottom: 56.25%; - height: 0; - overflow: hidden; -} -.video-container iframe, .video-container object, .video-container embed { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -/******************* - Utility Classes -*******************/ -.hide { - display: none !important; -} - -.left-align { - text-align: left; -} - -.right-align { - text-align: right; -} - -.center, .center-align { - text-align: center; -} - -.left { - float: left !important; -} - -.right { - float: right !important; -} - -.no-select, input[type=range], -input[type=range] + .thumb { - user-select: none; -} - -.circle { - border-radius: 50%; -} - -.center-block { - display: block; - margin-left: auto; - margin-right: auto; -} - -.truncate { - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.no-padding { - padding: 0 !important; -} - -/************************** - Utility Spacing Classes -**************************/ -.m-0 { - margin: 0 !important; -} - -.mt-0 { - margin-top: 0 !important; -} - -.mr-0 { - margin-right: 0 !important; -} - -.mb-0 { - margin-bottom: 0 !important; -} - -.ml-0 { - margin-left: 0 !important; -} - -.mx-0 { - margin-left: 0 !important; - margin-right: 0 !important; -} - -.my-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; -} - -.m-1 { - margin: 0.25rem !important; -} - -.mt-1 { - margin-top: 0.25rem !important; -} - -.mr-1 { - margin-right: 0.25rem !important; -} - -.mb-1 { - margin-bottom: 0.25rem !important; -} - -.ml-1 { - margin-left: 0.25rem !important; -} - -.mx-1 { - margin-left: 0.25rem !important; - margin-right: 0.25rem !important; -} - -.my-1 { - margin-top: 0.25rem !important; - margin-bottom: 0.25rem !important; -} - -.m-2 { - margin: 0.5rem !important; -} - -.mt-2 { - margin-top: 0.5rem !important; -} - -.mr-2 { - margin-right: 0.5rem !important; -} - -.mb-2 { - margin-bottom: 0.5rem !important; -} - -.ml-2 { - margin-left: 0.5rem !important; -} - -.mx-2 { - margin-left: 0.5rem !important; - margin-right: 0.5rem !important; -} - -.my-2 { - margin-top: 0.5rem !important; - margin-bottom: 0.5rem !important; -} - -.m-3 { - margin: 0.75rem !important; -} - -.mt-3 { - margin-top: 0.75rem !important; -} - -.mr-3 { - margin-right: 0.75rem !important; -} - -.mb-3 { - margin-bottom: 0.75rem !important; -} - -.ml-3 { - margin-left: 0.75rem !important; -} - -.mx-3 { - margin-left: 0.75rem !important; - margin-right: 0.75rem !important; -} - -.my-3 { - margin-top: 0.75rem !important; - margin-bottom: 0.75rem !important; -} - -.m-4 { - margin: 1rem !important; -} - -.mt-4 { - margin-top: 1rem !important; -} - -.mr-4 { - margin-right: 1rem !important; -} - -.mb-4 { - margin-bottom: 1rem !important; -} - -.ml-4 { - margin-left: 1rem !important; -} - -.mx-4 { - margin-left: 1rem !important; - margin-right: 1rem !important; -} - -.my-4 { - margin-top: 1rem !important; - margin-bottom: 1rem !important; -} - -.m-5 { - margin: 1.5rem !important; -} - -.mt-5 { - margin-top: 1.5rem !important; -} - -.mr-5 { - margin-right: 1.5rem !important; -} - -.mb-5 { - margin-bottom: 1.5rem !important; -} - -.ml-5 { - margin-left: 1.5rem !important; -} - -.mx-5 { - margin-left: 1.5rem !important; - margin-right: 1.5rem !important; -} - -.my-5 { - margin-top: 1.5rem !important; - margin-bottom: 1.5rem !important; -} - -.m-6 { - margin: 3rem !important; -} - -.mt-6 { - margin-top: 3rem !important; -} - -.mr-6 { - margin-right: 3rem !important; -} - -.mb-6 { - margin-bottom: 3rem !important; -} - -.ml-6 { - margin-left: 3rem !important; -} - -.mx-6 { - margin-left: 3rem !important; - margin-right: 3rem !important; -} - -.my-6 { - margin-top: 3rem !important; - margin-bottom: 3rem !important; -} - -.m-auto { - margin: auto !important; -} - -.mt-auto { - margin-top: auto !important; -} - -.mr-auto { - margin-right: auto !important; -} - -.mb-auto { - margin-bottom: auto !important; -} - -.ml-auto { - margin-left: auto !important; -} - -.mx-auto { - margin-left: auto !important; - margin-right: auto !important; -} - -.my-auto { - margin-top: auto !important; - margin-bottom: auto !important; -} - -.p-0 { - padding: 0 !important; -} - -.pt-0 { - padding-top: 0 !important; -} - -.pr-0 { - padding-right: 0 !important; -} - -.pb-0 { - padding-bottom: 0 !important; -} - -.pl-0 { - padding-left: 0 !important; -} - -.px-0 { - padding-left: 0 !important; - padding-right: 0 !important; -} - -.py-0 { - padding-top: 0 !important; - padding-bottom: 0 !important; -} - -.p-1 { - padding: 0.25rem !important; -} - -.pt-1 { - padding-top: 0.25rem !important; -} - -.pr-1 { - padding-right: 0.25rem !important; -} - -.pb-1 { - padding-bottom: 0.25rem !important; -} - -.pl-1 { - padding-left: 0.25rem !important; -} - -.px-1 { - padding-left: 0.25rem !important; - padding-right: 0.25rem !important; -} - -.py-1 { - padding-top: 0.25rem !important; - padding-bottom: 0.25rem !important; -} - -.p-2 { - padding: 0.5rem !important; -} - -.pt-2 { - padding-top: 0.5rem !important; -} - -.pr-2 { - padding-right: 0.5rem !important; -} - -.pb-2 { - padding-bottom: 0.5rem !important; -} - -.pl-2 { - padding-left: 0.5rem !important; -} - -.px-2 { - padding-left: 0.5rem !important; - padding-right: 0.5rem !important; -} - -.py-2 { - padding-top: 0.5rem !important; - padding-bottom: 0.5rem !important; -} - -.p-3 { - padding: 0.75rem !important; -} - -.pt-3 { - padding-top: 0.75rem !important; -} - -.pr-3 { - padding-right: 0.75rem !important; -} - -.pb-3 { - padding-bottom: 0.75rem !important; -} - -.pl-3 { - padding-left: 0.75rem !important; -} - -.px-3 { - padding-left: 0.75rem !important; - padding-right: 0.75rem !important; -} - -.py-3 { - padding-top: 0.75rem !important; - padding-bottom: 0.75rem !important; -} - -.p-4 { - padding: 1rem !important; -} - -.pt-4 { - padding-top: 1rem !important; -} - -.pr-4 { - padding-right: 1rem !important; -} - -.pb-4 { - padding-bottom: 1rem !important; -} - -.pl-4 { - padding-left: 1rem !important; -} - -.px-4 { - padding-left: 1rem !important; - padding-right: 1rem !important; -} - -.py-4 { - padding-top: 1rem !important; - padding-bottom: 1rem !important; -} - -.p-5 { - padding: 1.5rem !important; -} - -.pt-5 { - padding-top: 1.5rem !important; -} - -.pr-5 { - padding-right: 1.5rem !important; -} - -.pb-5 { - padding-bottom: 1.5rem !important; -} - -.pl-5 { - padding-left: 1.5rem !important; -} - -.px-5 { - padding-left: 1.5rem !important; - padding-right: 1.5rem !important; -} - -.py-5 { - padding-top: 1.5rem !important; - padding-bottom: 1.5rem !important; -} - -.p-6 { - padding: 3rem !important; -} - -.pt-6 { - padding-top: 3rem !important; -} - -.pr-6 { - padding-right: 3rem !important; -} - -.pb-6 { - padding-bottom: 3rem !important; -} - -.pl-6 { - padding-left: 3rem !important; -} - -.px-6 { - padding-left: 3rem !important; - padding-right: 3rem !important; -} - -.py-6 { - padding-top: 3rem !important; - padding-bottom: 3rem !important; -} - -.p-auto { - padding: auto !important; -} - -.pt-auto { - padding-top: auto !important; -} - -.pr-auto { - padding-right: auto !important; -} - -.pb-auto { - padding-bottom: auto !important; -} - -.pl-auto { - padding-left: auto !important; -} - -.px-auto { - padding-left: auto !important; - padding-right: auto !important; -} - -.py-auto { - padding-top: auto !important; - padding-bottom: auto !important; -} - -.collection { - padding-left: 0; - list-style-type: none; - margin: 0.5rem 0 1rem 0; - border: 1px solid var(--md-sys-color-outline-variant); - border-radius: 2px; - overflow: hidden; - position: relative; -} -.collection .collection-item { - background-color: transparent; - line-height: 1.5rem; - padding: 10px 20px; - margin: 0; - border-bottom: 1px solid var(--md-sys-color-outline-variant); -} -.collection .collection-item.avatar { - min-height: 84px; - padding-left: 72px; - position: relative; -} -.collection .collection-item.avatar:not(.circle-clipper) > .circle, -.collection .collection-item.avatar :not(.circle-clipper) > .circle { - position: absolute; - width: 42px; - height: 42px; - overflow: hidden; - left: 15px; - display: inline-block; - vertical-align: middle; -} -.collection .collection-item.avatar i.circle { - font-size: 18px; - line-height: 42px; - color: #fff; - background-color: var(--md-sys-color-shadow-light); - text-align: center; -} -.collection .collection-item.avatar .title { - font-size: 16px; -} -.collection .collection-item.avatar p { - margin: 0; -} -.collection .collection-item.avatar .secondary-content { - position: absolute; - top: 16px; - right: 16px; -} -.collection .collection-item:last-child { - border-bottom: none; -} -.collection .collection-item.active { - background-color: var(--md-sys-color-primary); - color: var(--md-sys-color-on-primary); -} -.collection .collection-item.active .secondary-content { - color: var(--md-sys-color-on-primary); -} -.collection a.collection-item { - display: block; - transition: 0.25s; - color: var(--md-sys-color-primary); -} -.collection a.collection-item:not(.active):hover { - background-color: rgba(0, 0, 0, 0.04); -} -.collection.with-header .collection-header { - background-color: transparent; - border-bottom: 1px solid var(--md-sys-color-outline-variant); - padding: 10px 20px; -} -.collection.with-header .collection-item { - padding-left: 30px; -} -.collection.with-header .collection-item.avatar { - padding-left: 72px; -} - -.secondary-content { - float: right; - color: var(--md-sys-color-primary); -} - -.collapsible .collection { - margin: 0; - border: none; -} - -:root { - --bagde-height: 22px; -} - -span.badge { - min-width: 3rem; - padding: 0 6px; - margin-left: 14px; - text-align: center; - font-size: 1rem; - line-height: var(--bagde-height); - height: var(--bagde-height); - color: var(--md-sys-color-on-surface-variant); - float: right; - box-sizing: border-box; -} -span.badge.new { - font-weight: 300; - font-size: 0.8rem; - color: var(--md-sys-color-on-primary); - background-color: var(--md-sys-color-primary); - border-radius: 2px; -} -span.badge.new:after { - content: " new"; -} -span.badge[data-badge-caption]::after { - content: " " attr(data-badge-caption); -} - -.active span.badge { - color: var(--md-sys-color-on-primary); -} - -nav ul a span.badge { - display: inline-block; - float: none; - margin-left: 4px; - line-height: var(--bagde-height); - height: var(--bagde-height); - -webkit-font-smoothing: auto; -} - -.collection-item span.badge { - margin-top: calc(0.75rem - var(--bagde-height) * 0.5); -} - -.collapsible span.badge { - margin-left: auto; -} - -.collapsible .active span.badge:not(.new) { - color: var(--md-sys-color-on-surface-variant); -} - -.sidenav span.badge { - margin-top: calc(var(--sidenav-line-height) * 0.5 - 11px); -} - -table span.badge { - display: inline-block; - float: none; - margin-left: auto; -} - -/* This is needed for some mobile phones to display the Google Icon font properly */ -.material-icons, .material-symbols-outlined, -.material-symbols-rounded, .material-symbols-sharp { - text-rendering: optimizeLegibility; - font-feature-settings: "liga"; -} - -.container { - margin: 0 auto; - max-width: 1280px; - width: 90%; -} - -@media only screen and (min-width : 601px) { - .container { - width: 85%; - } -} -@media only screen and (min-width : 993px) { - .container { - width: 70%; - } -} -.section { - padding: 1rem 0; -} - -body { - --gap-size: 1.5rem; -} - -.row { - display: grid; - grid-template-columns: repeat(12, 1fr); - gap: var(--gap-size); -} -.row .s1 { - grid-column: auto/span 1; -} -.row .s2 { - grid-column: auto/span 2; -} -.row .s3 { - grid-column: auto/span 3; -} -.row .s4 { - grid-column: auto/span 4; -} -.row .s5 { - grid-column: auto/span 5; -} -.row .s6 { - grid-column: auto/span 6; -} -.row .s7 { - grid-column: auto/span 7; -} -.row .s8 { - grid-column: auto/span 8; -} -.row .s9 { - grid-column: auto/span 9; -} -.row .s10 { - grid-column: auto/span 10; -} -.row .s11 { - grid-column: auto/span 11; -} -.row .s12 { - grid-column: auto/span 12; -} -.row .offset-s1 { - grid-column-start: 3; -} -.row .offset-s2 { - grid-column-start: 2; -} -.row .offset-s3 { - grid-column-start: 4; -} -.row .offset-s4 { - grid-column-start: 5; -} -.row .offset-s5 { - grid-column-start: 6; -} -.row .offset-s6 { - grid-column-start: 7; -} -.row .offset-s7 { - grid-column-start: 8; -} -.row .offset-s8 { - grid-column-start: 9; -} -.row .offset-s9 { - grid-column-start: 10; -} -.row .offset-s10 { - grid-column-start: 11; -} -.row .offset-s11 { - grid-column-start: 12; -} -@media only screen and (min-width : 601px) { - .row .m1 { - grid-column: auto/span 1; - } - .row .m2 { - grid-column: auto/span 2; - } - .row .m3 { - grid-column: auto/span 3; - } - .row .m4 { - grid-column: auto/span 4; - } - .row .m5 { - grid-column: auto/span 5; - } - .row .m6 { - grid-column: auto/span 6; - } - .row .m7 { - grid-column: auto/span 7; - } - .row .m8 { - grid-column: auto/span 8; - } - .row .m9 { - grid-column: auto/span 9; - } - .row .m10 { - grid-column: auto/span 10; - } - .row .m11 { - grid-column: auto/span 11; - } - .row .m12 { - grid-column: auto/span 12; - } - .row .offset-m1 { - grid-column-start: 2; - } - .row .offset-m2 { - grid-column-start: 3; - } - .row .offset-m3 { - grid-column-start: 4; - } - .row .offset-m4 { - grid-column-start: 5; - } - .row .offset-m5 { - grid-column-start: 6; - } - .row .offset-m6 { - grid-column-start: 7; - } - .row .offset-m7 { - grid-column-start: 8; - } - .row .offset-m8 { - grid-column-start: 9; - } - .row .offset-m9 { - grid-column-start: 10; - } - .row .offset-m10 { - grid-column-start: 11; - } - .row .offset-m11 { - grid-column-start: 12; - } -} -@media only screen and (min-width : 993px) { - .row .l1 { - grid-column: auto/span 1; - } - .row .l2 { - grid-column: auto/span 2; - } - .row .l3 { - grid-column: auto/span 3; - } - .row .l4 { - grid-column: auto/span 4; - } - .row .l5 { - grid-column: auto/span 5; - } - .row .l6 { - grid-column: auto/span 6; - } - .row .l7 { - grid-column: auto/span 7; - } - .row .l8 { - grid-column: auto/span 8; - } - .row .l9 { - grid-column: auto/span 9; - } - .row .l10 { - grid-column: auto/span 10; - } - .row .l11 { - grid-column: auto/span 11; - } - .row .l12 { - grid-column: auto/span 12; - } - .row .offset-l1 { - grid-column-start: 2; - } - .row .offset-l2 { - grid-column-start: 3; - } - .row .offset-l3 { - grid-column-start: 4; - } - .row .offset-l4 { - grid-column-start: 5; - } - .row .offset-l5 { - grid-column-start: 6; - } - .row .offset-l6 { - grid-column-start: 7; - } - .row .offset-l7 { - grid-column-start: 8; - } - .row .offset-l8 { - grid-column-start: 9; - } - .row .offset-l9 { - grid-column-start: 10; - } - .row .offset-l10 { - grid-column-start: 11; - } - .row .offset-l11 { - grid-column-start: 12; - } -} -@media only screen and (min-width : 1201px) { - .row .xl1 { - grid-column: auto/span 1; - } - .row .xl2 { - grid-column: auto/span 2; - } - .row .xl3 { - grid-column: auto/span 3; - } - .row .xl4 { - grid-column: auto/span 4; - } - .row .xl5 { - grid-column: auto/span 5; - } - .row .xl6 { - grid-column: auto/span 6; - } - .row .xl7 { - grid-column: auto/span 7; - } - .row .xl8 { - grid-column: auto/span 8; - } - .row .xl9 { - grid-column: auto/span 9; - } - .row .xl10 { - grid-column: auto/span 10; - } - .row .xl11 { - grid-column: auto/span 11; - } - .row .xl12 { - grid-column: auto/span 12; - } - .row .offset-xl1 { - grid-column-start: 2; - } - .row .offset-xl2 { - grid-column-start: 3; - } - .row .offset-xl3 { - grid-column-start: 4; - } - .row .offset-xl4 { - grid-column-start: 5; - } - .row .offset-xl5 { - grid-column-start: 6; - } - .row .offset-xl6 { - grid-column-start: 7; - } - .row .offset-xl7 { - grid-column-start: 8; - } - .row .offset-xl8 { - grid-column-start: 9; - } - .row .offset-xl9 { - grid-column-start: 10; - } - .row .offset-xl10 { - grid-column-start: 11; - } - .row .offset-xl11 { - grid-column-start: 12; - } -} - -.g-0 { - gap: 0; -} - -.g-1 { - gap: calc(0.25 * var(--gap-size)); -} - -.g-2 { - gap: calc(0.5 * var(--gap-size)); -} - -.g-3 { - gap: calc(1 * var(--gap-size)); -} - -.g-4 { - gap: calc(1.5 * var(--gap-size)); -} - -.g-5 { - gap: calc(3 * var(--gap-size)); -} - -:root { - --navbar-height: 64px; - --navbar-height-mobile: 56px; -} - -nav { - color: var(--md-sys-color-on-primary); - background-color: var(--md-sys-color-secondary-container); - width: 100%; - height: var(--navbar-height-mobile); - line-height: var(--navbar-height-mobile); -} -nav.nav-extended { - height: auto; -} -nav.nav-extended .nav-wrapper { - min-height: var(--navbar-height-mobile); - height: auto; -} -nav.nav-extended .nav-content { - position: relative; - line-height: normal; -} -nav a { - color: var(--md-sys-color-on-primary); -} -nav i, -nav [class^=mdi-], nav [class*=mdi-], -nav i.material-icons, nav i.material-symbols-outlined, -nav i.material-symbols-rounded, nav i.material-symbols-sharp { - display: block; - font-size: 24px; - height: var(--navbar-height-mobile); - line-height: var(--navbar-height-mobile); -} -nav .nav-wrapper { - position: relative; - height: 100%; -} -@media only screen and (min-width : 993px) { - nav a.sidenav-trigger { - display: none; - } -} -nav .sidenav-trigger { - float: left; - position: relative; - z-index: 1; - height: var(--navbar-height-mobile); - margin: 0 18px; -} -nav .sidenav-trigger i { - height: var(--navbar-height-mobile); - line-height: var(--navbar-height-mobile); -} -nav .brand-logo { - position: absolute; - color: var(--md-sys-color-on-primary); - display: inline-block; - font-size: 2.1rem; - padding: 0; -} -nav .brand-logo.center { - left: 50%; - transform: translateX(-50%); -} -@media only screen and (max-width : 992.99px) { - nav .brand-logo { - left: 50%; - transform: translateX(-50%); - } - nav .brand-logo.left, nav .brand-logo.right { - padding: 0; - transform: none; - } - nav .brand-logo.left { - left: 0.5rem; - } - nav .brand-logo.right { - right: 0.5rem; - left: auto; - } -} -nav .brand-logo.right { - right: 0.5rem; - padding: 0; -} -nav .brand-logo i, -nav .brand-logo [class^=mdi-], nav .brand-logo [class*=mdi-], -nav .brand-logo i.material-icons, nav .brand-logo i.material-symbols-outlined, -nav .brand-logo i.material-symbols-rounded, nav .brand-logo i.material-symbols-sharp { - float: left; - margin-right: 15px; -} -nav .nav-title { - display: inline-block; - font-size: 32px; - padding: 28px 0; -} -nav ul:not(.dropdown-content) { - list-style-type: none; - margin: 0; -} -nav ul:not(.dropdown-content) > li { - transition: background-color 0.3s; - float: left; - padding: 0; -} -nav ul:not(.dropdown-content) > li > a { - transition: background-color 0.3s; - font-size: 1rem; - color: var(--md-sys-color-on-primary); - display: block; - padding: 0 15px; - cursor: pointer; -} -nav ul:not(.dropdown-content) > li > a.active { - background-color: var(--md-ref-palette-primary80); -} -nav ul:not(.dropdown-content) > li > a:hover:not(.active) { - background-color: var(--md-ref-palette-primary70); -} -nav ul:not(.dropdown-content) > li > a.btn, nav ul:not(.dropdown-content) > li > a.btn-small, nav ul:not(.dropdown-content) > li > a.btn-large, nav ul:not(.dropdown-content) > li > a.btn-flat, nav ul:not(.dropdown-content) > li > a.btn-floating { - margin-top: -2px; - margin-left: 15px; - margin-right: 15px; - display: inline-block; -} -nav ul:not(.dropdown-content) > li > a.btn > .material-icons, nav ul:not(.dropdown-content) > li > a.btn-small > .material-icons, nav ul:not(.dropdown-content) > li > a.btn > .material-symbols-outlined, nav ul:not(.dropdown-content) > li > a.btn-small > .material-symbols-outlined, nav ul:not(.dropdown-content) > li > a.btn > .material-symbols-rounded, nav ul:not(.dropdown-content) > li > a.btn-small > .material-symbols-rounded, nav ul:not(.dropdown-content) > li > a.btn > .material-symbols-sharp, nav ul:not(.dropdown-content) > li > a.btn-small > .material-symbols-sharp, nav ul:not(.dropdown-content) > li > a.btn-large > .material-icons, nav ul:not(.dropdown-content) > li > a.btn-large > .material-symbols-outlined, nav ul:not(.dropdown-content) > li > a.btn-large > .material-symbols-rounded, nav ul:not(.dropdown-content) > li > a.btn-large > .material-symbols-sharp, nav ul:not(.dropdown-content) > li > a.btn-flat > .material-icons, nav ul:not(.dropdown-content) > li > a.btn-flat > .material-symbols-outlined, nav ul:not(.dropdown-content) > li > a.btn-flat > .material-symbols-rounded, nav ul:not(.dropdown-content) > li > a.btn-flat > .material-symbols-sharp, nav ul:not(.dropdown-content) > li > a.btn-floating > .material-icons, nav ul:not(.dropdown-content) > li > a.btn-floating > .material-symbols-outlined, nav ul:not(.dropdown-content) > li > a.btn-floating > .material-symbols-rounded, nav ul:not(.dropdown-content) > li > a.btn-floating > .material-symbols-sharp { - height: inherit; - line-height: inherit; -} -nav ul:not(.dropdown-content).left { - float: left; -} -nav form { - height: 100%; -} -nav .input-field { - margin: 0; - height: 100%; -} -nav .input-field input[type=search] { - height: 100%; - font-size: 1.2rem; - border: none; - padding-left: 2rem; - color: var(--md-sys-color-on-primary); -} -nav .input-field input[type=search]:focus, nav .input-field input[type=search][type=text]:valid, nav .input-field input[type=search][type=password]:valid, nav .input-field input[type=search][type=email]:valid, nav .input-field input[type=search][type=url]:valid, nav .input-field input[type=search][type=date]:valid { - border: none; - box-shadow: none; -} -nav .input-field label { - top: 0; - left: 0; -} -nav .input-field label i { - color: var(--font-on-primary-color-medium); - transition: color 0.3s; -} -nav .input-field label.active i { - color: var(--md-sys-color-on-primary); -} - -.navbar-fixed { - position: relative; - height: var(--navbar-height-mobile); - z-index: 997; -} -.navbar-fixed nav { - position: fixed; - right: 0; -} - -@media only screen and (min-width : 601px) { - nav.nav-extended .nav-wrapper { - min-height: var(--navbar-height-mobile); - } - nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i { - height: var(--navbar-height); - line-height: var(--navbar-height); - } - .navbar-fixed { - height: var(--navbar-height); - } -} -a { - text-decoration: none; -} - -html { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; - color: var(--md-sys-color-on-background); -} -@media only screen and (min-width: 0) { - html { - font-size: 14px; - } -} -@media only screen and (min-width: 993px) { - html { - font-size: 14.5px; - } -} -@media only screen and (min-width: 1201px) { - html { - font-size: 15px; - } -} - -h1, h2, h3, h4, h5, h6 { - font-weight: 400; - line-height: 1.3; -} - -h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { - font-weight: inherit; -} - -h1 { - font-size: 4.2rem; - line-height: 110%; - margin: 2.8rem 0 1.68rem 0; -} - -h2 { - font-size: 3.56rem; - line-height: 110%; - margin: 2.3733333333rem 0 1.424rem 0; -} - -h3 { - font-size: 2.92rem; - line-height: 110%; - margin: 1.9466666667rem 0 1.168rem 0; -} - -h4 { - font-size: 2.28rem; - line-height: 110%; - margin: 1.52rem 0 0.912rem 0; -} - -h5 { - font-size: 1.64rem; - line-height: 110%; - margin: 1.0933333333rem 0 0.656rem 0; -} - -h6 { - font-size: 1.15rem; - line-height: 110%; - margin: 0.7666666667rem 0 0.46rem 0; -} - -em { - font-style: italic; -} - -strong { - font-weight: 500; -} - -small { - font-size: 75%; -} - -.light { - font-weight: 300; -} - -.thin { - font-weight: 200; -} - -@media only screen and (min-width: 360px) { - .flow-text { - font-size: 1.2rem; - } -} -@media only screen and (min-width: 390px) { - .flow-text { - font-size: 1.224rem; - } -} -@media only screen and (min-width: 420px) { - .flow-text { - font-size: 1.248rem; - } -} -@media only screen and (min-width: 450px) { - .flow-text { - font-size: 1.272rem; - } -} -@media only screen and (min-width: 480px) { - .flow-text { - font-size: 1.296rem; - } -} -@media only screen and (min-width: 510px) { - .flow-text { - font-size: 1.32rem; - } -} -@media only screen and (min-width: 540px) { - .flow-text { - font-size: 1.344rem; - } -} -@media only screen and (min-width: 570px) { - .flow-text { - font-size: 1.368rem; - } -} -@media only screen and (min-width: 600px) { - .flow-text { - font-size: 1.392rem; - } -} -@media only screen and (min-width: 630px) { - .flow-text { - font-size: 1.416rem; - } -} -@media only screen and (min-width: 660px) { - .flow-text { - font-size: 1.44rem; - } -} -@media only screen and (min-width: 690px) { - .flow-text { - font-size: 1.464rem; - } -} -@media only screen and (min-width: 720px) { - .flow-text { - font-size: 1.488rem; - } -} -@media only screen and (min-width: 750px) { - .flow-text { - font-size: 1.512rem; - } -} -@media only screen and (min-width: 780px) { - .flow-text { - font-size: 1.536rem; - } -} -@media only screen and (min-width: 810px) { - .flow-text { - font-size: 1.56rem; - } -} -@media only screen and (min-width: 840px) { - .flow-text { - font-size: 1.584rem; - } -} -@media only screen and (min-width: 870px) { - .flow-text { - font-size: 1.608rem; - } -} -@media only screen and (min-width: 900px) { - .flow-text { - font-size: 1.632rem; - } -} -@media only screen and (min-width: 930px) { - .flow-text { - font-size: 1.656rem; - } -} -@media only screen and (min-width: 960px) { - .flow-text { - font-size: 1.68rem; - } -} -@media only screen and (max-width: 360px) { - .flow-text { - font-size: 1.2rem; - } -} - -.scale-transition { - transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important; -} -.scale-transition.scale-out { - transform: scale(0); - transition: transform 0.2s !important; -} -.scale-transition.scale-in { - transform: scale(1); -} - -.card-panel { - transition: box-shadow 0.25s; - padding: 24px; - margin: 0.5rem 0 1rem 0; - border-radius: 12px; - background-color: var(--md-sys-color-surface); -} - -.card { - overflow: hidden; - position: relative; - background-color: var(--md-sys-color-surface); - transition: box-shadow 0.25s; - border-radius: 12px; -} -.card .card-title { - font-size: 24px; - font-weight: 300; -} -.card .card-title.activator { - cursor: pointer; -} -.card.small, .card.medium, .card.large { - position: relative; -} -.card.small .card-image, .card.medium .card-image, .card.large .card-image { - max-height: 60%; - overflow: hidden; -} -.card.small .card-image + .card-content, .card.medium .card-image + .card-content, .card.large .card-image + .card-content { - max-height: 40%; -} -.card.small .card-content, .card.medium .card-content, .card.large .card-content { - max-height: 100%; - overflow: hidden; -} -.card.small .card-action, .card.medium .card-action, .card.large .card-action { - position: absolute; - bottom: 0; - left: 0; - right: 0; -} -.card.small { - height: 300px; -} -.card.medium { - height: 400px; -} -.card.large { - height: 500px; -} -.card.horizontal { - display: flex; -} -.card.horizontal.small .card-image, .card.horizontal.medium .card-image, .card.horizontal.large .card-image { - height: 100%; - max-height: none; - overflow: visible; -} -.card.horizontal.small .card-image img, .card.horizontal.medium .card-image img, .card.horizontal.large .card-image img { - height: 100%; -} -.card.horizontal .card-image { - max-width: 50%; -} -.card.horizontal .card-image img { - border-radius: 2px 0 0 2px; - max-width: 100%; - width: auto; -} -.card.horizontal .card-stacked { - display: flex; - flex-direction: column; - flex: 1; - position: relative; -} -.card.horizontal .card-stacked .card-content { - flex-grow: 1; -} -.card.sticky-action .card-action { - z-index: 2; -} -.card.sticky-action .card-reveal { - z-index: 1; - padding-bottom: 64px; -} -.card .card-image { - position: relative; -} -.card .card-image img { - display: block; - border-radius: 2px 2px 0 0; - position: relative; - left: 0; - right: 0; - top: 0; - bottom: 0; - width: 100%; -} -.card .card-image .card-title { - color: var(--md-sys-color-surface); - position: absolute; - bottom: 0; - left: 0; - max-width: 100%; - padding: 24px; -} -.card .card-content { - padding: 24px; - border-radius: 0 0 2px 2px; -} -.card .card-content p { - margin: 0; -} -.card .card-content .card-title { - display: block; - line-height: 32px; - margin-bottom: 8px; -} -.card .card-content .card-title i { - line-height: 32px; -} -.card .card-action { - border-top: 1px solid var(--md-sys-color-outline-variant); - position: relative; - background-color: inherit; -} -.card .card-action:last-child { - border-radius: 0 0 2px 2px; -} -.card .card-action a { - padding: 16px 24px; - display: inline-block; -} -.card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating) { - color: var(--md-sys-color-primary); - transition: color 0.3s ease; -} -.card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating):hover { - background-color: rgba(var(--md-sys-color-primary-numeric), 0.06); -} -.card .card-reveal { - padding: 24px; - position: absolute; - background-color: var(--md-sys-color-surface); - width: 100%; - overflow-y: auto; - left: 0; - top: 100%; - height: 100%; - z-index: 3; - display: none; -} -.card .card-reveal .card-title { - cursor: pointer; - display: block; -} - -#toast-container { - display: block; - position: fixed; - z-index: 10000; -} -@media only screen and (max-width : 600.99px) { - #toast-container { - min-width: 100%; - bottom: 0%; - } -} -@media only screen and (min-width : 601px) and (max-width : 992.99px) { - #toast-container { - left: 5%; - bottom: 7%; - max-width: 90%; - } -} -@media only screen and (min-width : 993px) { - #toast-container { - top: 10%; - right: 7%; - max-width: 86%; - } -} - -.toast { - border-radius: 4px; - top: 35px; - width: auto; - margin-top: 10px; - position: relative; - max-width: 100%; - height: auto; - min-height: 48px; - padding-left: 16px; - padding-right: 12px; - font-size: 14px; - font-weight: 500; - line-height: 20px; - color: var(--md-sys-color-inverse-on-surface); - background-color: var(--md-sys-color-inverse-surface); - display: flex; - align-items: center; - justify-content: space-between; - cursor: default; -} -.toast .toast-action { - color: var(--md-sys-color-inverse-primary); - font-weight: 500; - margin-right: -25px; - margin-left: 3rem; -} -.toast.rounded { - border-radius: 24px; -} -@media only screen and (max-width : 600.99px) { - .toast { - width: 100%; - border-radius: 0; - } -} - -.tabs { - padding-left: 0; - list-style-type: none; - position: relative; - overflow-x: auto; - overflow-y: hidden; - height: 48px; - width: 100%; - background-color: var(--md-sys-color-surface); - margin: 0 auto; - white-space: nowrap; -} -.tabs.tabs-transparent { - background-color: transparent; -} -.tabs.tabs-transparent .tab a { - color: var(--font-on-primary-color-medium); -} -.tabs.tabs-transparent .tab.disabled a, -.tabs.tabs-transparent .tab.disabled a:hover, -.tabs.tabs-transparent .tab.disabled a:focus { - color: rgba(255, 255, 255, 0.38); -} -.tabs.tabs-transparent .tab a:hover { - background-color: rgba(0, 0, 0, 0.04); -} -.tabs.tabs-transparent .tab a.active, -.tabs.tabs-transparent .tab a:focus { - background-color: transparent; -} -.tabs.tabs-transparent .tab a:hover, -.tabs.tabs-transparent .tab a.active, -.tabs.tabs-transparent .tab a:focus { - color: var(--md-sys-color-on-primary); -} -.tabs.tabs-transparent .indicator { - background-color: var(--md-sys-color-on-primary); -} -.tabs.tabs-fixed-width { - display: flex; -} -.tabs.tabs-fixed-width .tab { - flex-grow: 1; -} -.tabs .tab { - padding-left: 0; - list-style-type: none; - display: inline-block; - text-align: center; - line-height: 48px; - height: 48px; - padding: 0; - margin: 0; -} -.tabs .tab a { - color: var(--md-sys-color-on-surface-variant); - display: block; - width: 100%; - height: 100%; - padding: 0 24px; - font-size: 14px; - text-overflow: ellipsis; - overflow: hidden; - transition: color 0.28s ease, background-color 0.28s ease; -} -.tabs .tab a.active { - background-color: transparent; -} -.tabs .tab a.active, .tabs .tab a:focus, .tabs .tab a:hover { - color: var(--md-sys-color-primary); -} -.tabs .tab a:hover { - background-color: rgba(var(--md-sys-color-primary-numeric), 0.06); -} -.tabs .tab a:focus, .tabs .tab a.active { - background-color: rgba(var(--md-sys-color-primary-numeric), 0.18); - outline: none; -} -.tabs .tab.disabled a, .tabs .tab.disabled a:hover { - color: var(--md-sys-color-on-surface); - cursor: default; - background-color: transparent; -} -.tabs .tab.disabled a:not(:focus), .tabs .tab.disabled a:hover:not(:focus) { - background-color: transparent; -} -.tabs .indicator { - position: absolute; - bottom: 0; - height: 3px; - background-color: var(--md-sys-color-primary); - will-change: left, right; - border-radius: 3px 3px 0 0; -} - -/* Fixed Sidenav hide on smaller */ -@media only screen and (max-width : 992.99px) { - .tabs { - display: flex; - } - .tabs .tab { - flex-grow: 1; - } - .tabs .tab a { - padding: 0 12px; - } -} -.material-tooltip { - padding: 0 8px; - border-radius: 4px; - color: var(--md-sys-color-inverse-on-surface); - background-color: var(--md-sys-color-inverse-surface); - font-family: var(--md-sys-typescale-body-small-font-family-name); - font-size: var(--md-sys-typescale-body-small-font-size); - line-height: var(--md-sys-typescale-body-small-line-height); - font-weight: var(--md-sys-typescale-body-small-font-weight); - min-height: 24px; - opacity: 0; - padding-top: 6px; - padding-bottom: 6px; - font-size: 12px; - line-height: 16px; - font-weight: 400; - letter-spacing: 0.4px; - position: absolute; - max-width: 300px; - overflow: hidden; - left: 0; - top: 0; - pointer-events: none; - display: flex; - align-items: center; - visibility: hidden; - z-index: 2000; -} - -.backdrop { - position: absolute; - opacity: 0; - height: 7px; - width: 14px; - border-radius: 0 0 50% 50%; - background-color: var(--md-sys-color-inverse-surface); - z-index: -1; - transform-origin: 50% 0; - visibility: hidden; -} - -.btn, .btn-small, .btn-large, .btn-floating, .btn-flat { - --btn-height: 40px; - --btn-font-size-icon: 16px; - --btn-padding: 24px; - --btn-padding-icon: 16px; - --btn-gap-icon: 8px; - --btn-border-radius: 4px; - --btn-font-size: 14px; - height: var(--btn-height); - border: none; - border-radius: var(--btn-border-radius); - padding-left: var(--btn-padding); - padding-right: var(--btn-padding); - font-size: ver(--btn-font-size); - font-weight: 500; - text-decoration: none; - display: inline-flex; - align-items: center; - cursor: pointer; - -webkit-tap-highlight-color: transparent; - white-space: nowrap; - outline: 0; - user-select: none; - transition: background-color 0.2s ease-out; -} - -.btn.icon-left, .icon-left.btn-small, .icon-left.btn-large, .btn.icon-right, .icon-right.btn-small, .icon-right.btn-large { - position: relative; -} - -.btn.icon-left, .icon-left.btn-small, .icon-left.btn-large { - padding-left: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon)); -} - -.btn.icon-right, .icon-right.btn-small, .icon-right.btn-large { - padding-right: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon)); -} - -.btn.icon-left i, .icon-left.btn-small i, .icon-left.btn-large i, .btn.icon-right i, .icon-right.btn-small i, .icon-right.btn-large i { - position: absolute; - font-size: var(--btn-font-size-icon); -} - -.btn.icon-left i, .icon-left.btn-small i, .icon-left.btn-large i { - left: var(--btn-padding-icon); -} - -.btn.icon-right i, .icon-right.btn-small i, .icon-right.btn-large i { - right: var(--btn-padding-icon); -} - -.btn.filled, .filled.btn-small, .filled.btn-large { - color: var(--md-sys-color-on-primary); - background-color: var(--md-sys-color-primary); -} - -.btn.tonal, .tonal.btn-small, .tonal.btn-large { - color: var(--md-sys-color-on-secondary-container); - background-color: var(--md-sys-color-secondary-container); -} - -.btn.elevated, .elevated.btn-small, .elevated.btn-large { - color: var(--md-sys-color-on-secondary-container); - background-color: var(--md-sys-color-secondary-container); -} - -.btn.outlined, .outlined.btn-small, .outlined.btn-large { - background-color: transparent; - color: var(--md-sys-color-primary); - border: 1px solid var(--md-sys-color-outline); -} - -.btn.text, .text.btn-small, .text.btn-large, .btn-flat { - color: var(--md-sys-color-primary); - background-color: transparent; -} - -.btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled, -.btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled, -.btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] { - color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%); - background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%); - pointer-events: none; - box-shadow: none; - cursor: default; -} - -.btn.elevated:hover, .elevated.btn-small:hover, .elevated.btn-large:hover { - color: var(--md-sys-color-primary); - background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%); -} - -.btn.filled:hover, .filled.btn-small:hover, .filled.btn-large:hover { - color: var(--md-sys-color-on-primary); - background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%); -} - -.btn.tonal:hover, .tonal.btn-small:hover, .tonal.btn-large:hover { - color: var(--md-sys-color-on-secondary-container); - background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%); -} - -.btn.outlined:hover, .outlined.btn-small:hover, .outlined.btn-large:hover { - color: var(--md-sys-color-primary); - background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%); -} - -.btn.text:hover, .text.btn-small:hover, .text.btn-large:hover { - color: var(--md-sys-color-primary); - background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent); -} - -.btn:focus.elevated, .btn-small:focus.elevated, .btn-large:focus.elevated { - color: var(--md-sys-color-primary); - background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%); -} - -.btn:focus.filled, .btn-small:focus.filled, .btn-large:focus.filled { - color: var(--md-sys-color-on-primary); - background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%); -} - -.btn:focus.tonal, .btn-small:focus.tonal, .btn-large:focus.tonal { - color: var(--md-sys-color-on-secondary-container); - background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%); -} - -.btn:focus.outlined, .btn-small:focus.outlined, .btn-large:focus.outlined { - color: var(--md-sys-color-primary); - background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%); - border: 1px solid var(--md-sys-color-primary); -} - -.btn:focus.text, .btn-small:focus.text, .btn-large:focus.text { - color: var(--md-sys-color-primary); - background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%); -} - -.btn:focus-visible.filled, .btn-small:focus-visible.filled, .btn-large:focus-visible.filled, .btn:focus-visible.elevated, .btn-small:focus-visible.elevated, .btn-large:focus-visible.elevated, .btn:focus-visible.tonal, .btn-small:focus-visible.tonal, .btn-large:focus-visible.tonal, .btn:focus-visible.outlined, .btn-small:focus-visible.outlined, .btn-large:focus-visible.outlined, .btn:focus-visible.text, .btn-small:focus-visible.text, .btn-large:focus-visible.text { - outline: 3px solid var(--md-sys-color-secondary); - outline-offset: 2px; -} - -.btn-floating { - width: 40px; - height: 40px; - color: var(--md-sys-color-on-primary-container); - background-color: var(--md-sys-color-primary-container); - border-radius: 16px; - padding: 0; - display: grid; - grid-auto-flow: column; - align-items: center; - position: relative; - overflow: hidden; - z-index: 1; - transition: background-color 0.3s; - cursor: pointer; - vertical-align: middle; -} -.btn-floating:hover { - background-color: color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 16%); -} -.btn-floating:focus { - background-color: var(--md-ref-palette-secondary80); -} -.btn-floating:before { - border-radius: 0; -} -.btn-floating.btn-large { - width: 56px; - height: 56px; - padding: 0; -} -.btn-floating.btn-large.halfway-fab { - bottom: -28px; -} -.btn-floating.btn-small { - --btn-small-height: calc(0.75 * var(--btn-height)); - width: var(--btn-small-height) e; - height: var(--btn-small-height); -} -.btn-floating.btn-small.halfway-fab { - bottom: calc(var(--btn-small-height) * -0.5); -} -.btn-floating.halfway-fab { - position: absolute; - right: 24px; - bottom: -20px; -} -.btn-floating.halfway-fab.left { - right: auto; - left: 24px; -} -.btn-floating i { - color: var(--md-sys-color-on-secondary); - font-size: 1.6rem; - width: inherit; - display: inline-block; - text-align: center; -} - -button.btn-floating { - border: none; -} - -.fixed-action-btn { - position: fixed; - right: 23px; - bottom: 23px; - padding-top: 15px; - margin-bottom: 0; - z-index: 997; -} -.fixed-action-btn.active ul { - visibility: visible; - padding-left: 0; - list-style-type: none; -} -.fixed-action-btn.direction-left, .fixed-action-btn.direction-right { - padding: 0 0 0 15px; -} -.fixed-action-btn.direction-left ul, .fixed-action-btn.direction-right ul { - text-align: right; - right: 64px; - top: 50%; - transform: translateY(-50%); - height: 100%; - left: auto; - /*width 100% only goes to width of button container */ - width: 500px; -} -.fixed-action-btn.direction-left ul li, .fixed-action-btn.direction-right ul li { - display: inline-block; - margin: 7.5px 15px 0 0; -} -.fixed-action-btn.direction-right { - padding: 0 15px 0 0; -} -.fixed-action-btn.direction-right ul { - text-align: left; - direction: rtl; - left: 64px; - right: auto; -} -.fixed-action-btn.direction-right ul li { - margin: 7.5px 0 0 15px; -} -.fixed-action-btn.direction-bottom { - padding: 0 0 15px 0; -} -.fixed-action-btn.direction-bottom ul { - top: 64px; - bottom: auto; - display: flex; - flex-direction: column-reverse; -} -.fixed-action-btn.direction-bottom ul li { - margin: 15px 0 0 0; -} -.fixed-action-btn.toolbar { - padding: 0; - height: 56px; -} -.fixed-action-btn.toolbar.active > a i { - opacity: 0; -} -.fixed-action-btn.toolbar ul { - display: flex; - top: 0; - bottom: 0; - z-index: 1; -} -.fixed-action-btn.toolbar ul li { - flex: 1; - display: inline-block; - margin: 0; - height: 100%; - transition: none; -} -.fixed-action-btn.toolbar ul li a { - display: block; - overflow: hidden; - position: relative; - width: 100%; - height: 100%; - background-color: transparent; - box-shadow: none; - color: var(--md-sys-color-on-secondary); - line-height: 56px; - z-index: 1; -} -.fixed-action-btn.toolbar ul li a i { - line-height: inherit; -} -.fixed-action-btn ul { - left: 0; - right: 0; - text-align: center; - position: absolute; - bottom: 64px; - margin: 0; - visibility: hidden; -} -.fixed-action-btn ul li { - margin-bottom: 15px; -} -.fixed-action-btn ul a.btn-floating { - opacity: 0; -} -.fixed-action-btn .fab-backdrop { - position: absolute; - top: 0; - left: 0; - z-index: -1; - width: 40px; - height: 40px; - background-color: var(--md-sys-color-secondary); - border-radius: 16px; - transform: scale(0); -} - -.btn-large { - height: calc(1.5 * var(--btn-height)); - font-size: 18px; - padding: 0 28px; -} -.btn-large i { - font-size: 1.6rem; -} - -.btn-small { - height: calc(0.75 * var(--btn-height)); - font-size: 13px; -} -.btn-small i { - font-size: 1.2rem; -} - -.btn-block { - display: block; -} - -.btn.rounded, .rounded.btn-large, .rounded.btn-small { - border-radius: 99999px; -} - -[popover] { - outline: none; - padding: 0; - border: none; -} - -.dropdown-content { - padding-left: 0; - list-style-type: none; - background-color: var(--md-sys-color-surface); - margin: 0; - display: none; - min-width: 100px; - overflow-y: auto; - opacity: 0; - position: absolute; - left: 0; - top: 0; - z-index: 9999; - transform-origin: 0 0; - user-select: none; -} -.dropdown-content li { - clear: both; - color: var(--md-sys-color-on-background); - cursor: pointer; - min-height: 50px; - line-height: 1.5rem; - width: 100%; - text-align: left; -} -.dropdown-content li.divider { - min-height: 0; - height: 1px; -} -.dropdown-content li > a, .dropdown-content li > span { - font-size: 16px; - color: var(--md-sys-color-primary); - display: block; - line-height: 22px; - padding: 14px 16px; -} -.dropdown-content li > span > label { - top: 1px; - left: 0; - height: 18px; -} -.dropdown-content li > a > i { - height: inherit; - line-height: inherit; - float: left; - margin: 0 24px 0 0; - width: 24px; -} -.dropdown-content li:not(.disabled):hover, .dropdown-content li.active { - background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%); -} - -body.keyboard-focused .dropdown-content li:focus { - background-color: rgba(0, 0, 0, 0.12); -} - -.input-field.col .dropdown-content [type=checkbox] + label { - top: 1px; - left: 0; - height: 18px; - transform: none; -} - -.dropdown-trigger { - cursor: pointer; -} - -.modal { - --modal-footer-height: 56px; - --modal-footer-divider-height: 1px; - --modal-border-radius: 28px; - --modal-padding: 24px; - display: none; - position: fixed; - left: 0; - right: 0; - background-color: var(--md-sys-color-surface); - padding: 0; - max-height: 70%; - width: 55%; - margin: auto; - overflow-y: auto; - border-radius: var(--modal-border-radius); - will-change: top, opacity; -} -.modal:focus { - outline: none; -} -@media only screen and (max-width : 992.99px) { - .modal { - width: 80%; - } -} -.modal h1, .modal h2, .modal h3, .modal h4 { - margin-top: 0; -} -.modal .modal-content { - padding: var(--modal-padding); - overflow-y: hidden; -} -.modal .modal-close { - cursor: pointer; -} -.modal .modal-footer { - border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius); - background-color: var(--md-sys-color-surface); - padding: 4px 6px; - height: var(--modal-footer-height); - width: 100%; - text-align: right; -} -.modal .modal-footer .btn, .modal .modal-footer .btn-large, .modal .modal-footer .btn-small, .modal .modal-footer .btn-flat { - margin: 6px 0; -} - -.modal-overlay { - position: fixed; - z-index: 999; - top: -25%; - left: 0; - bottom: 0; - right: 0; - height: 125%; - width: 100%; - background: #000; - display: none; - will-change: opacity; -} - -.modal.modal-fixed-footer { - padding: 0; - height: 70%; -} -.modal.modal-fixed-footer .modal-content { - position: absolute; - height: calc(100% - var(--modal-footer-height)); - max-height: 100%; - width: 100%; - overflow-y: auto; -} -.modal.modal-fixed-footer .modal-footer { - border-top: var(--modal-footer-divider-height) solid var(--md-sys-color-outline-variant); - position: absolute; - bottom: var(--modal-footer-divider-height); -} - -.modal.bottom-sheet { - top: auto; - bottom: -100%; - margin: 0; - width: 100%; - max-height: 45%; - border-radius: 0; - will-change: bottom, opacity; -} - -.collapsible { - padding-left: 0; - list-style-type: none; - border-top: 1px solid var(--md-sys-color-outline-variant); - border-right: 1px solid var(--md-sys-color-outline-variant); - border-left: 1px solid var(--md-sys-color-outline-variant); - margin: 0.5rem 0 1rem 0; -} - -.collapsible-header { - display: flex; - cursor: pointer; - -webkit-tap-highlight-color: transparent; - line-height: 1.5; - padding: 1rem; - border-bottom: 1px solid var(--md-sys-color-outline-variant); -} -.collapsible-header:focus { - outline: 0; -} -.collapsible-header i { - width: 2rem; - font-size: 1.6rem; - display: inline-block; - text-align: center; - margin-right: 1rem; -} - -.collapsible-header::after { - content: "▾"; - text-align: right; - margin-right: 0.25rem; - width: 100%; -} - -.active .collapsible-header::after { - content: "▴"; -} - -.keyboard-focused .collapsible-header:focus { - background-color: rgba(0, 0, 0, 0.12); -} - -.collapsible-body { - max-height: 0; - border-bottom: 1px solid var(--md-sys-color-outline-variant); - box-sizing: border-box; - padding: 0 2rem; - overflow: hidden; -} - -.collapsible.popout { - border: none; - box-shadow: none; -} -.collapsible.popout > li { - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); - margin: 0 24px; - transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); -} -.collapsible.popout > li.active { - box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); - margin: 16px 0; -} - -.chip { - --font-size: 14px; - --font-size-icon: 18px; - --padding: 8px; - color: var(--md-sys-color-on-surface-variant); - background-color: rgba(0, 0, 0, 0.09); - display: inline-flex; - white-space: nowrap; - gap: 8px; - margin: 0; - height: 32px; - padding-left: var(--padding); - padding-right: var(--padding); - font-size: var(--font-size); - font-weight: 500; - border-radius: 8px; - align-items: center; - user-select: none; - vertical-align: top; -} -.chip:focus { - outline: none; - background-color: var(--md-sys-color-primary); - color: var(--md-sys-color-on-primary); -} - -.chip.outlined { - background-color: transparent; - border-color: var(--md-sys-color-outline); - border-width: 1px; - border-style: solid; -} - -.chip > img { - margin: 0; - width: 24px; - height: 24px; - object-fit: cover; - border-radius: 12px; -} - -.chip > .material-icons { - font-size: var(--font-size-icon); -} - -.chip .close { - border-radius: 50%; - height: 24px; - width: 24px; - padding: 0; - display: grid; - justify-content: center; - align-content: center; - cursor: pointer; -} - -.chip .close:hover { - background-color: rgba(136, 136, 136, 0.5333333333); -} - -.chips { - display: flex; - gap: 4px; - flex-wrap: wrap; - border: none; - border-bottom: 1px solid var(--md-sys-color-on-surface-variant); - box-shadow: none; - margin: 0 0 8px 0; - padding: 4px; - outline: none; - transition: all 0.3s; -} -.chips.focus { - border-bottom: 1px solid var(--md-sys-color-primary); - box-shadow: 0 1px 0 0 var(--md-sys-color-primary); -} -.chips:hover { - cursor: text; -} -.chips input:not([type]):not(.browser-default).input { - background: none; - border: 0; - color: var(--md-sys-color-on-background); - display: inline-block; - font-size: 16px; - height: 32px; - outline: 0; - margin: 0; - padding: 0; - width: 120px; -} -.chips input:not([type]):not(.browser-default).input:focus { - border: 0; - box-shadow: none; -} -.chips .autocomplete-content { - margin-top: 0; - margin-bottom: 0; -} - -.prefix ~ .chips { - margin-left: 3rem; - width: 92%; - width: calc(100% - 3rem); -} - -.suffix ~ .chips { - margin-right: 3rem; - width: 92%; - width: calc(100% - 3rem); -} - -.chips:empty ~ label { - font-size: 0.8rem; - transform: translateY(-140%); -} - -.materialboxed { - display: block; - cursor: zoom-in; - position: relative; - transition: opacity 0.4s; - -webkit-backface-visibility: hidden; -} -.materialboxed:hover:not(.active) { - opacity: 0.8; -} -.materialboxed.active { - cursor: zoom-out; -} - -#materialbox-overlay { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: var(--md-sys-color-background); - z-index: 1000; - will-change: opacity; -} - -.materialbox-caption { - position: fixed; - display: none; - color: var(--md-sys-color-on-background); - line-height: 50px; - bottom: 0; - left: 0; - width: 100%; - text-align: center; - padding: 0% 15%; - height: 50px; - z-index: 1000; - -webkit-font-smoothing: antialiased; -} - -select:focus { - outline: 1px solid var(--md-ref-palette-primary80); -} - -/* -button:focus { - outline: none; - background-color: $button-background-focus; -} -*/ -label { - font-size: 0.8rem; - color: var(--md-sys-color-on-surface-variant); -} - -/* Style Placeholders */ -::placeholder { - color: var(--md-sys-color-on-surface-variant); -} - -/* Text inputs */ -input:not([type]):not(.browser-default), -input[type=text]:not(.browser-default), -input[type=password]:not(.browser-default), -input[type=email]:not(.browser-default), -input[type=url]:not(.browser-default), -input[type=time]:not(.browser-default), -input[type=date]:not(.browser-default), -input[type=datetime]:not(.browser-default), -input[type=datetime-local]:not(.browser-default), -input[type=month]:not(.browser-default), -input[type=tel]:not(.browser-default), -input[type=number]:not(.browser-default), -input[type=search]:not(.browser-default), -textarea.materialize-textarea { - outline: none; - color: var(--md-sys-color-on-background); - width: 100%; - font-size: 16px; - height: 56px; -} - -/* Validation Sass Placeholders */ -/* -%custom-success-message { - content: attr(data-success); - color: $success-color; -} -%custom-error-message { - content: attr(data-error); - color: var(--md-sys-color-error); -} -*/ -.input-field { - --input-color: var(--md-sys-color-primary); - position: relative; - clear: both; -} -.input-field input, .input-field textarea { - box-sizing: border-box; /* https://stackoverflow.com/questions/1377719/padding-within-inputs-breaks-width-100*/ - padding: 0 16px; - padding-top: 20px; - background-color: var(--md-sys-color-surface); - border: none; - border-radius: 4px; - border-bottom: 1px solid var(--md-sys-color-on-surface-variant); - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} -.input-field input:focus:not([readonly]), .input-field textarea:focus:not([readonly]) { - border-bottom: 2px solid var(--input-color); - padding-top: 21px; -} -.input-field input:disabled, .input-field input[readonly=readonly], .input-field textarea:disabled, .input-field textarea[readonly=readonly] { - color: rgba(var(--md_sys_color_on-surface), 0.38); - border-color: rgba(var(--md_sys_color_on-surface), 0.12); - background-color: rgba(var(--md_sys_color_on-surface), 0.04); -} -.input-field input:focus:not([readonly]) + label, .input-field textarea:focus:not([readonly]) + label { - color: var(--input-color); -} -.input-field input:focus:not([readonly]) + label, .input-field input:not([placeholder=" "]) + label, .input-field input:not(:placeholder-shown) + label, .input-field textarea:focus:not([readonly]) + label, .input-field textarea:not([placeholder=" "]) + label, .input-field textarea:not(:placeholder-shown) + label { - transform: scale(0.75); - top: 8px; -} -.input-field input:disabled + label, .input-field input[readonly=readonly] + label, .input-field textarea:disabled + label, .input-field textarea[readonly=readonly] + label { - color: rgba(var(--md_sys_color_on-surface), 0.38); -} -.input-field input::placeholder { - user-select: none; -} -.input-field > label { - color: var(--md-sys-color-on-surface-variant); - user-select: none; - font-size: 16px; - position: absolute; - left: 16px; - top: 16px; - cursor: text; - transform-origin: top left; - transition: left 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out; -} -.input-field .supporting-text { - color: var(--md-sys-color-on-surface-variant); - font-size: 12px; - padding: 0 16px; - margin-top: 4px; -} -.input-field .character-counter { - color: var(--md-sys-color-on-surface-variant); - font-size: 12px; - float: right; - padding: 0 16px; - margin-top: 4px; -} -.input-field .prefix { - position: absolute; - left: 12px; - top: 16px; - user-select: none; - display: flex; - align-self: center; -} -.input-field .suffix { - position: absolute; - right: 12px; - top: 16px; - user-select: none; -} -.input-field .prefix ~ input, .input-field .prefix ~ textarea { - padding-left: 52px; -} -.input-field .suffix ~ input, .input-field .suffix ~ textarea { - padding-right: 52px; -} -.input-field .prefix ~ label { - left: 52px; -} -.input-field.outlined input, .input-field.outlined textarea { - padding-top: 0; - background-color: var(--md-sys-color-background); - border: 1px solid var(--md-sys-color-on-surface-variant); - border-radius: 4px; -} -.input-field.outlined input:focus:not([readonly]), .input-field.outlined textarea:focus:not([readonly]) { - border: 2px solid var(--input-color); - padding-top: 0; - margin-left: -1px; -} -.input-field.outlined input:focus:not([readonly]) + label, .input-field.outlined textarea:focus:not([readonly]) + label { - color: var(--input-color); -} -.input-field.outlined input:focus:not([readonly]) + label, .input-field.outlined input:not([placeholder=" "]) + label, .input-field.outlined input:not(:placeholder-shown) + label, .input-field.outlined textarea:focus:not([readonly]) + label, .input-field.outlined textarea:not([placeholder=" "]) + label, .input-field.outlined textarea:not(:placeholder-shown) + label { - top: -8px; - left: 16px; - margin-left: -4px; - padding: 0 4px; - background-color: var(--md-sys-color-background); -} -.input-field.outlined input:disabled, .input-field.outlined input[readonly=readonly], .input-field.outlined textarea:disabled, .input-field.outlined textarea[readonly=readonly] { - color: rgba(var(--md_sys_color_on-surface), 0.38); - border-color: rgba(var(--md_sys_color_on-surface), 0.12); -} -.input-field.error input, .input-field.error textarea { - border-color: var(--md-sys-color-error); -} -.input-field.error input:focus:not([readonly]), .input-field.error textarea:focus:not([readonly]) { - border-color: var(--md-sys-color-error); -} -.input-field.error input:focus:not([readonly]) + label, .input-field.error textarea:focus:not([readonly]) + label { - color: var(--md-sys-color-error); -} -.input-field.error label { - color: var(--md-sys-color-error); -} -.input-field.error .supporting-text { - color: var(--md-sys-color-error); -} -.input-field.error .suffix { - color: var(--md-sys-color-error); -} - -/* Search Field */ -.searchbar .prefix { - position: absolute; - padding-left: 1rem; - top: 0; - user-select: none; - display: flex; - align-self: center; -} -.searchbar > input { - border-width: 0; - background-color: transparent; - padding-left: 3rem; -} - -.searchbar.has-sidebar { - margin-left: 0; -} -@media only screen and (min-width : 993px) { - .searchbar.has-sidebar { - margin-left: 300px; - } -} - -/* -.input-field input[type=search] { - display: block; - line-height: inherit; - - .nav-wrapper & { - height: inherit; - padding-left: 4rem; - width: calc(100% - 4rem); - border: 0; - box-shadow: none; - } - &:focus:not(.browser-default) { - border: 0; - box-shadow: none; - } - & + .label-icon { - transform: none; - left: 1rem; - } -} -*/ -/* Textarea */ -textarea { - width: 100%; - height: 3rem; - background-color: transparent; -} -textarea.materialize-textarea { - padding-top: 26px !important; - padding-bottom: 4px !important; - line-height: normal; - overflow-y: hidden; /* prevents scroll bar flash */ - resize: none; - min-height: 3rem; - box-sizing: border-box; -} - -.hiddendiv { - visibility: hidden; - white-space: pre-wrap; - word-wrap: break-word; - overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */ - padding-top: 1.2rem; /* prevents text jump on Enter keypress */ - position: absolute; - top: 0; - z-index: -1; -} - -/* Autocomplete Items */ -.autocomplete-content li .highlight { - color: var(--md-sys-color-on-background); -} -.autocomplete-content li img { - height: 40px; - width: 40px; - margin: 5px 15px; -} - -[type=radio]:not(:checked), -[type=radio]:checked { - position: absolute; - opacity: 0; - pointer-events: none; -} - -[type=radio]:not(:checked) + span, -[type=radio]:checked + span { - position: relative; - padding-left: 35px; - cursor: pointer; - display: inline-block; - height: 25px; - line-height: 25px; - font-size: 1rem; - transition: 0.28s ease; - user-select: none; -} - -[type=radio] + span:before, -[type=radio] + span:after { - content: ""; - position: absolute; - left: 0; - top: 0; - margin: 4px; - width: 16px; - height: 16px; - z-index: 0; - transition: 0.28s ease; -} - -/* Unchecked styles */ -[type=radio]:not(:checked) + span:before, -[type=radio]:not(:checked) + span:after, -[type=radio]:checked + span:before, -[type=radio]:checked + span:after, -[type=radio].with-gap:checked + span:before, -[type=radio].with-gap:checked + span:after { - border-radius: 50%; -} - -[type=radio]:not(:checked) + span:before, -[type=radio]:not(:checked) + span:after { - border: 2px solid var(--md-sys-color-on-surface-variant); -} - -[type=radio]:not(:checked) + span:after { - transform: scale(0); -} - -/* Checked styles */ -[type=radio]:checked + span:before { - border: 2px solid transparent; -} - -[type=radio]:checked + span:after, -[type=radio].with-gap:checked + span:before, -[type=radio].with-gap:checked + span:after { - border: 2px solid var(--md-sys-color-primary); -} - -[type=radio]:checked + span:after, -[type=radio].with-gap:checked + span:after { - background-color: var(--md-sys-color-primary); -} - -[type=radio]:checked + span:after { - transform: scale(1.02); -} - -/* Radio With gap */ -[type=radio].with-gap:checked + span:after { - transform: scale(0.5); -} - -/* Focused styles */ -[type=radio].tabbed:focus + span:before { - box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18); -} - -/* Disabled Radio With gap */ -[type=radio].with-gap:disabled:checked + span:before { - border: 2px solid var(--md-sys-color-on-surface); -} - -[type=radio].with-gap:disabled:checked + span:after { - border: none; - background-color: var(--md-sys-color-on-surface); -} - -/* Disabled style */ -[type=radio]:disabled:not(:checked) + span:before, -[type=radio]:disabled:checked + span:before { - background-color: transparent; - border-color: var(--md-sys-color-on-surface); -} - -[type=radio]:disabled + span { - color: var(--md-sys-color-on-surface); -} - -[type=radio]:disabled:not(:checked) + span:before { - border-color: var(--md-sys-color-on-surface); -} - -[type=radio]:disabled:checked + span:after { - background-color: var(--md-sys-color-on-surface); - border-color: var(--md-sys-color-on-surface); -} - -/* Checkboxes - ========================================================================== */ -/* Remove default checkbox */ -[type=checkbox]:not(:checked), -[type=checkbox]:checked { - position: absolute; - opacity: 0; - pointer-events: none; -} - -[type=checkbox] { - /* checkbox aspect */ -} -[type=checkbox] + span:not(.lever) { - position: relative; - padding-left: 35px; - cursor: pointer; - display: inline-block; - height: 25px; - line-height: 25px; - font-size: 1rem; - user-select: none; -} -[type=checkbox] + span:not(.lever):before, [type=checkbox]:not(.filled-in) + span:not(.lever):after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 18px; - height: 18px; - z-index: 0; - border: 2px solid var(--md-sys-color-on-surface-variant); - border-radius: 1px; - margin-top: 3px; - transition: 0.2s; -} -[type=checkbox]:not(.filled-in) + span:not(.lever):after { - border: 0; - transform: scale(0); -} -[type=checkbox]:not(:checked):disabled + span:not(.lever):before { - border: none; - background-color: var(--md-sys-color-on-surface); -} -[type=checkbox].tabbed:focus + span:not(.lever):after { - transform: scale(1); - border: 0; - border-radius: 50%; - box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.12); - background-color: rgba(0, 0, 0, 0.12); -} - -[type=checkbox]:checked + span:not(.lever):before { - top: -4px; - left: -5px; - width: 12px; - height: 22px; - border-top: 2px solid transparent; - border-left: 2px solid transparent; - border-right: 2px solid var(--md-sys-color-primary); - border-bottom: 2px solid var(--md-sys-color-primary); - transform: rotate(40deg); - backface-visibility: hidden; - transform-origin: 100% 100%; -} -[type=checkbox]:checked:disabled + span:before { - border-right: 2px solid var(--md-sys-color-on-surface); - border-bottom: 2px solid var(--md-sys-color-on-surface); -} - -/* Indeterminate checkbox */ -[type=checkbox]:indeterminate + span:not(.lever):before { - top: -11px; - left: -12px; - width: 10px; - height: 22px; - border-top: none; - border-left: none; - border-right: 2px solid var(--md-sys-color-primary); - border-bottom: none; - transform: rotate(90deg); - backface-visibility: hidden; - transform-origin: 100% 100%; -} -[type=checkbox]:indeterminate:disabled + span:not(.lever):before { - border-right: 2px solid var(--md-sys-color-on-surface); - background-color: transparent; -} - -[type=checkbox].filled-in + span:not(.lever):after { - border-radius: 2px; -} -[type=checkbox].filled-in + span:not(.lever):before, -[type=checkbox].filled-in + span:not(.lever):after { - content: ""; - left: 0; - position: absolute; - /* .1s delay is for check animation */ - transition: border 0.25s, background-color 0.25s, width 0.2s 0.1s, height 0.2s 0.1s, top 0.2s 0.1s, left 0.2s 0.1s; - z-index: 1; -} -[type=checkbox].filled-in:not(:checked) + span:not(.lever):before { - width: 0; - height: 0; - border: 3px solid transparent; - left: 6px; - top: 10px; - transform: rotateZ(37deg); - transform-origin: 100% 100%; -} -[type=checkbox].filled-in:not(:checked) + span:not(.lever):after { - height: 20px; - width: 20px; - background-color: transparent; - border: 2px solid var(--md-sys-color-on-surface-variant); - top: 0px; - z-index: 0; -} -[type=checkbox].filled-in:checked + span:not(.lever):before { - top: 0; - left: 1px; - width: 8px; - height: 13px; - border-top: 2px solid transparent; - border-left: 2px solid transparent; - border-right: 2px solid var(--md-sys-color-on-primary); - border-bottom: 2px solid var(--md-sys-color-on-primary); - transform: rotateZ(37deg); - transform-origin: 100% 100%; -} -[type=checkbox].filled-in:checked + span:not(.lever):after { - top: 0; - width: 20px; - height: 20px; - border: 2px solid var(--md-sys-color-primary); - background-color: var(--md-sys-color-primary); - z-index: 0; -} -[type=checkbox].filled-in.tabbed:focus + span:not(.lever):after { - border-radius: 2px; - border-color: var(--md-sys-color-on-surface-variant) r; - background-color: rgba(0, 0, 0, 0.12); -} -[type=checkbox].filled-in.tabbed:checked:focus + span:not(.lever):after { - border-radius: 2px; - background-color: var(--md-sys-color-primary); - border-color: var(--md-sys-color-primary); -} -[type=checkbox].filled-in:disabled:not(:checked) + span:not(.lever):before { - background-color: transparent; - border: 2px solid transparent; -} -[type=checkbox].filled-in:disabled:not(:checked) + span:not(.lever):after { - border-color: transparent; - background-color: var(--md-sys-color-on-surface); -} -[type=checkbox].filled-in:disabled:checked + span:not(.lever):before { - background-color: transparent; -} -[type=checkbox].filled-in:disabled:checked + span:not(.lever):after { - background-color: var(--md-sys-color-on-surface); - border-color: var(--md-sys-color-on-surface); -} - -.switch { - --track-height: 32px; - --track-width: 52px; - --border-width: 2px; - --size-off: 16px; - --size-on: 24px; - --icon-size: 16px; - --gap-on: calc(((var(--track-height) - var(--size-on)) / 2) - var(--border-width)); - --gap-off: calc(((var(--track-height) - var(--size-off)) / 2) - var(--border-width)); -} - -.switch, -.switch * { - -webkit-tap-highlight-color: transparent; - user-select: none; -} - -.switch label { - cursor: pointer; -} - -.switch label input[type=checkbox] { - opacity: 0; - width: 0; - height: 0; -} -.switch label input[type=checkbox]:checked + .lever { - background-color: var(--md-sys-color-primary); - border-color: var(--md-sys-color-primary); -} -.switch label input[type=checkbox]:checked + .lever:before, .switch label input[type=checkbox]:checked + .lever:after { - top: var(--gap-on); - left: calc(var(--track-width) - var(--size-on) - var(--gap-on) - 2 * var(--border-width)); - width: var(--size-on); - height: var(--size-on); -} -.switch label .lever { - content: ""; - display: inline-block; - position: relative; - width: var(--track-width); - height: var(--track-height); - border-style: solid; - border-width: 2px; - border-color: var(--md-sys-color-outline); - background-color: var(--md-sys-color-surface-variant); - border-radius: 15px; - margin-right: 10px; - transition: background 0.3s ease; - vertical-align: middle; - margin: 0 16px; -} -.switch label .lever:before, .switch label .lever:after { - content: ""; - position: absolute; - display: inline-block; - width: var(--size-off); - height: var(--size-off); - border-radius: 50%; - left: var(--gap-off); - top: var(--gap-off); - transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease, transform 0.1s ease; -} -.switch label .lever:after { - height: var(--size-off); - width: var(--size-off); -} - -input[type=checkbox]:not(:disabled) ~ .lever:active:before, -input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before, -input[type=checkbox]:not(:disabled) ~ .lever:hover::before { - transform: scale(2.4); -} - -input[type=checkbox]:checked:not(:disabled) ~ .lever:hover::before { - background-color: rgba(var(--md-sys-color-primary-numeric), 0.06); -} - -input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before, -input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before { - background-color: rgba(var(--md-sys-color-primary-numeric), 0.18); -} - -input[type=checkbox]:not(:disabled) ~ .lever:hover::before { - background-color: rgba(0, 0, 0, 0.04); -} - -input[type=checkbox]:not(:disabled) ~ .lever:active:before, -input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before { - background-color: rgba(0, 0, 0, 0.12); -} - -.switch input[type=checkbox][disabled] + .lever { - cursor: default; - opacity: 0.5; -} - -select.browser-default { - opacity: 1; - color: var(--md-sys-color-on-background); -} - -select { - opacity: 0; - background-color: var(--md-sys-color-surface); - width: 100%; - padding: 5px; - border: 1px solid var(--md-sys-color-outline-variant); - border-radius: 2px; - height: 3rem; -} - -.select-wrapper { - /* - &.valid .helper-text[data-success], - &.invalid ~ .helper-text[data-error] { - @extend %hidden-text; - } - - &.valid { - & > input.select-dropdown { - @extend %valid-input-style; - } - & ~ .helper-text:after { - //@extend %custom-success-message; - } - } - - &.invalid { - & > input.select-dropdown, - & > input.select-dropdown:focus { - @extend %invalid-input-style; - } - & ~ .helper-text:after { - //@extend %custom-error-message; - } - } - - &.valid + label, - &.invalid + label { - width: 100%; - pointer-events: none; - } - & + label:after { - //@extend %input-after-style; - } - */ - position: relative; - /* - input.select-dropdown { - &:focus { - border-bottom: 1px solid var(--md-sys-color-primary); - } - position: relative; - cursor: pointer; - background-color: transparent; - border: none; - border-bottom: 2px solid var(--md-sys-color-on-surface-variant); - outline: none; - height: 3rem; - line-height: 3rem; - width: 100%; - font-size: 16px; - margin: 0 0 8px 0; - padding: 0; - display: block; - user-select:none; - z-index: 1; - color: var(--md-sys-color-on-background); - } - */ -} -.select-wrapper .caret { - position: absolute; - right: 0; - top: 0; - bottom: 0; - margin: auto 0; - z-index: 0; - fill: var(--md-sys-color-on-background); -} -.select-wrapper .hide-select { - width: 0; - height: 0; - overflow: hidden; - position: absolute; - top: 0; - z-index: -1; -} - -select:disabled { - color: var(--md-sys-color-on-surface); -} - -.select-wrapper.disabled + label { - color: var(--md-sys-color-on-surface); -} -.select-wrapper.disabled .caret { - fill: var(--md-sys-color-on-surface); -} - -.select-wrapper input.select-dropdown:disabled { - color: var(--md-sys-color-on-surface); - cursor: default; - user-select: none; -} - -.select-wrapper i { - color: var(--md-sys-color-on-surface); -} - -.select-dropdown li.disabled, -.select-dropdown li.disabled > span, -.select-dropdown li.optgroup { - color: var(--md-sys-color-on-surface); -} - -/* -body.keyboard-focused { - .select-dropdown.dropdown-content li:focus { - //background-color: $select-option-focus; - } -} - -.select-dropdown.dropdown-content { - li { - &:hover:not(.disabled) { - //background-color: $select-option-hover; - } - - &.selected:not(.disabled) { - //background-color: $select-option-selected; - } - } -} -*/ -/* -// Prefix Icons -.prefix ~ .select-wrapper { - margin-left: 3rem; - width: 92%; - width: calc(100% - 3rem); -} -.prefix ~ label { margin-left: 3rem; } -// Suffix Icons -.suffix ~ .select-wrapper { - margin-right: 3rem; - width: 92%; - width: calc(100% - 3rem); -} -.suffix ~ label { margin-right: 3rem; } -*/ -.select-dropdown li img { - height: 40px; - width: 40px; - margin: 5px 15px; - float: right; -} - -.select-dropdown li.optgroup { - border-top: 1px solid rgba(0, 0, 0, 0.04); -} -.select-dropdown li.optgroup.selected > span { - color: var(--md-sys-color-on-background); -} -.select-dropdown li.optgroup > span { - color: var(--md-sys-color-on-surface-variant); -} -.select-dropdown li.optgroup ~ li.optgroup-option { - padding-left: 1rem; -} - -/* -.select-dropdown .selected { - color: red; -} -*/ -.file-field { - display: grid; - grid-template-columns: min-content auto; - gap: 10px; -} -.file-field .file-path-wrapper { - overflow: hidden; -} -.file-field input.file-path { - width: 100%; -} -.file-field .btn, .file-field .btn-large, .file-field .btn-small { - height: 3rem; - line-height: 3rem; -} -.file-field span { - cursor: pointer; -} -.file-field input[type=file] { - position: absolute; - top: 0; - right: 0; - left: 0; - bottom: 0; - cursor: pointer; - width: 100%; - margin: 0; - padding: 0; - opacity: 0; - font-size: 20px; - filter: alpha(opacity=0); -} -.file-field input[type=file]::-webkit-file-upload-button { - display: none; -} - -.range-field { - position: relative; -} - -input[type=range], -input[type=range] + .thumb { - cursor: pointer; -} - -input[type=range] { - position: relative; - background-color: transparent; - border: none; - outline: none; - width: 100%; - margin: 15px 0; - padding: 0; -} -input[type=range]:focus { - outline: none; -} - -input[type=range] + .thumb { - position: absolute; - top: 10px; - left: 0; - border: none; - height: 0; - width: 0; - border-radius: 50%; - background-color: var(--md-sys-color-primary); - margin-left: 7px; - transform-origin: 50% 50%; - transform: rotate(-45deg); -} -input[type=range] + .thumb .value { - display: block; - width: 30px; - text-align: center; - color: var(--md-sys-color-primary); - font-size: 0; - transform: rotate(45deg); -} -input[type=range] + .thumb.active { - border-radius: 50% 50% 50% 0; -} -input[type=range] + .thumb.active .value { - color: var(--md-sys-color-on-primary); - margin-left: -1px; - margin-top: 8px; - font-size: 10px; -} - -input[type=range] { - -webkit-appearance: none; -} - -input[type=range]::-webkit-slider-runnable-track { - height: 3px; - border: none; -} - -input[type=range]::-webkit-slider-thumb { - border: none; - height: 14px; - width: 14px; - border-radius: 50%; - background: var(--md-sys-color-primary); - transition: box-shadow 0.3s; - -webkit-appearance: none; - background-color: var(--md-sys-color-primary); - transform-origin: 50% 50%; - margin: -5px 0 0 0; -} - -.keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb { - box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18); -} - -input[type=range] { - /*required for proper track sizing in FF*/ -} - -input[type=range]::-moz-range-track { - height: 3px; - border: none; -} - -input[type=range]::-moz-focus-inner { - border: 0; -} - -input[type=range]::-moz-range-thumb { - border: none; - height: 14px; - width: 14px; - border-radius: 50%; - background: var(--md-sys-color-primary); - transition: box-shadow 0.3s; - margin-top: -5px; -} - -input[type=range]:-moz-focusring { - outline: 1px solid #fff; - outline-offset: -1px; -} - -.keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb { - box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18); -} - -input[type=range]::-ms-track { - height: 3px; - background: transparent; - border-color: transparent; - border-width: 6px 0; - /*remove default tick marks*/ - color: transparent; -} - -input[type=range]::-ms-fill-lower, -input[type=range]::-moz-range-progress { - background: var(--md-sys-color-primary); -} - -input[type=range]::-ms-fill-upper, -input[type=range]::-moz-range-track { - background: var(--md-sys-color-shadow-light); -} - -input[type=range]::-ms-thumb { - border: none; - height: 14px; - width: 14px; - border-radius: 50%; - background: var(--md-sys-color-primary); - transition: box-shadow 0.3s; -} - -.keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb { - box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18); -} - -.table-of-contents { - list-style: none; -} -.table-of-contents.fixed { - position: fixed; -} -.table-of-contents li { - padding: 0; -} -.table-of-contents a { - display: inline-block; - font-weight: 400; - color: var(--md-sys-color-secondary); - padding-left: 16px; - height: 2rem; - line-height: 2rem; - border-left: 1px solid var(--md-sys-color-outline-variant); -} -.table-of-contents a:hover { - color: var(--md-sys-color-on-background); - padding-left: 15px; -} -.table-of-contents a.active { - color: var(--md-sys-color-primary); - font-weight: 500; - padding-left: 14px; - border-left: 2px solid var(--md-sys-color-primary); -} - -/* This should be an UL-Element*/ -.sidenav { - --sidenav-width: 300px; - --sidenav-font-size: 14px; - --sidenav-padding: 16px; - --sidenav-item-height: 48px; - --sidenav-line-height: var(--sidenav-item-height); - position: fixed; - width: var(--sidenav-width); - left: 0; - top: 0; - margin: 0; - transform: translateX(-100%); - height: 100vh; - padding: 0; - z-index: 999; - overflow-y: auto; - will-change: transform; - backface-visibility: hidden; - transform: translateX(-105%); - user-select: none; - color: var(--md-sys-color-on-secondary-container); - background-color: var(--md-sys-color-surface); - /* Hover only on top row */ - /*a:hover { - //color: red; - //background-color: var(--md-sys-color-on-secondary-container); - //md.sys.color.on-secondary-container - }*/ -} -.sidenav.right-aligned { - right: 0; - transform: translateX(105%); - left: auto; - transform: translateX(100%); -} -.sidenav .collapsible { - margin: 0; -} -.sidenav a:focus { - background-color: rgba(0, 0, 0, 0.12); -} -.sidenav li.active > a:not(.collapsible-header):not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating) { - background-color: color-mix(in srgb, var(--md-sys-color-secondary) 10%, transparent); -} -.sidenav .collapsible-body > ul { - padding-left: 10px; -} -.sidenav li { - list-style: none; - display: grid; - align-content: center; -} -.sidenav li > a { - /* https://stackoverflow.com/questions/5848090/full-width-hover-background-for-nested-lists */ - margin: 0 12px; - padding: 0 var(--sidenav-padding); - /* - min-width: 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - */ - display: flex; - height: var(--sidenav-item-height); - font-size: var(--sidenav-font-size); - font-weight: 500; - align-items: center; - overflow: hidden; - border-radius: 100px; - /* TODO: Use special class in future like "mw-icon" */ -} -.sidenav li > a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating) { - color: var(--md-sys-color-on-secondary-container); -} -.sidenav li > a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating):hover { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); -} -.sidenav li > a.btn, .sidenav li > a.btn-small, .sidenav li > a.btn-large, .sidenav li > a.btn-flat, .sidenav li > a.btn-floating { - margin: 10px 15px; -} -.sidenav li > a > .material-icons, .sidenav li > a > .material-symbols-outlined, .sidenav li > a > .material-symbols-rounded, .sidenav li > a > .material-symbols-sharp { - display: inline-flex; - vertical-align: middle; - margin-right: 12px; -} -.sidenav .divider { - margin: calc(var(--sidenav-padding) * 0.5) 0 0 0; -} -.sidenav .subheader { - cursor: initial; - pointer-events: none; - color: red; - font-size: var(--sidenav-font-size); - font-weight: 500; - line-height: var(--sidenav-line-height); -} -.sidenav .user-view { - position: relative; - padding: calc(var(--sidenav-padding) * 2) calc(var(--sidenav-padding) * 2) 0; - margin-bottom: calc(var(--sidenav-padding) * 0.5); -} -.sidenav .user-view > a { - height: auto; - padding: 0; -} -.sidenav .user-view > a:hover { - background-color: transparent; -} -.sidenav .user-view .background { - overflow: hidden; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: -1; -} -.sidenav .user-view .circle, .sidenav .user-view .name, .sidenav .user-view .email { - display: block; -} -.sidenav .user-view .circle { - height: 64px; - width: 64px; -} -.sidenav .user-view .name, -.sidenav .user-view .email { - font-size: var(--sidenav-font-size); - line-height: calc(var(--sidenav-line-height) * 0.5); -} -.sidenav .user-view .name { - margin-top: 16px; - font-weight: 500; -} -.sidenav .user-view .email { - padding-bottom: 16px; - font-weight: 400; -} - -.drag-target { - height: 100%; - position: fixed; - top: 0; - left: 0; - z-index: 998; -} -.drag-target.right-aligned { - right: 0; -} - -.sidenav.sidenav-fixed { - left: 0; - transform: translateX(0); - position: fixed; -} -.sidenav.sidenav-fixed.right-aligned { - right: 0; - left: auto; -} - -@media only screen and (max-width : 992.99px) { - .sidenav.sidenav-fixed { - transform: translateX(-105%); - } - .sidenav.sidenav-fixed.right-aligned { - transform: translateX(105%); - } - .sidenav > a { - padding: 0 var(--sidenav-padding); - } - .sidenav .user-view { - padding: var(--sidenav-padding) var(--sidenav-padding) 0; - } -} -.sidenav .collapsible-body { - padding: 0; -} - -.sidenav-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - opacity: 0; - height: 120vh; - background-color: rgba(0, 0, 0, 0.5); - z-index: 997; - display: none; -} - -.sidenav .collapsible, -.sidenav.sidenav-fixed .collapsible { - border: none; - box-shadow: none; -} -.sidenav .collapsible-header, -.sidenav.sidenav-fixed .collapsible-header { - border: none; -} -.sidenav .collapsible-body, -.sidenav.sidenav-fixed .collapsible-body { - border: none; -} - -.progress { - position: relative; - height: 4px; - display: block; - width: 100%; - border-radius: 4px; - margin: 0.5rem 0 1rem 0; - overflow: hidden; - background-color: var(--md-sys-color-secondary-container); -} -.progress .determinate { - position: absolute; - top: 0; - left: 0; - bottom: 0; - background-color: var(--md-sys-color-primary); - transition: width 0.3s linear; -} -.progress .indeterminate { - background-color: var(--md-sys-color-primary); -} -.progress .indeterminate:before { - content: ""; - position: absolute; - background-color: inherit; - top: 0; - left: 0; - bottom: 0; - will-change: left, right; - animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; -} -.progress .indeterminate:after { - content: ""; - position: absolute; - background-color: inherit; - top: 0; - left: 0; - bottom: 0; - will-change: left, right; - animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; - animation-delay: 1.15s; -} - -@keyframes indeterminate { - 0% { - left: -35%; - right: 100%; - } - 60% { - left: 100%; - right: -90%; - } - 100% { - left: 100%; - right: -90%; - } -} -@keyframes indeterminate-short { - 0% { - left: -200%; - right: 100%; - } - 60% { - left: 107%; - right: -8%; - } - 100% { - left: 107%; - right: -8%; - } -} -/* - @license - Copyright (c) 2014 The Polymer Project Authors. All rights reserved. - This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt - The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt - The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt - Code distributed by Google as part of the polymer project is also - subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt - */ -/**************************/ -/* STYLES FOR THE SPINNER */ -/**************************/ -/* - * Constants: - * STROKEWIDTH = 3px - * ARCSIZE = 270 degrees (amount of circle the arc takes up) - * ARCTIME = 1333ms (time it takes to expand and contract arc) - * ARCSTARTROT = 216 degrees (how much the start location of the arc - * should rotate each time, 216 gives us a - * 5 pointed star shape (it's 360/5 * 3). - * For a 7 pointed star, we might do - * 360/7 * 3 = 154.286) - * CONTAINERWIDTH = 28px - * SHRINK_TIME = 400ms - */ -.preloader-wrapper { - display: inline-block; - position: relative; - width: 50px; - height: 50px; -} -.preloader-wrapper.small { - width: 36px; - height: 36px; -} -.preloader-wrapper.big { - width: 64px; - height: 64px; -} -.preloader-wrapper.active { - /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */ - -webkit-animation: container-rotate 1568ms linear infinite; - animation: container-rotate 1568ms linear infinite; -} - -@-webkit-keyframes container-rotate { - to { - -webkit-transform: rotate(360deg); - } -} -@keyframes container-rotate { - to { - transform: rotate(360deg); - } -} -.spinner-layer { - position: absolute; - width: 100%; - height: 100%; - opacity: 0; - border-color: var(--md-sys-color-primary); -} - -.spinner-blue, -.spinner-blue-only { - border-color: #4285f4; -} - -.spinner-red, -.spinner-red-only { - border-color: #db4437; -} - -.spinner-yellow, -.spinner-yellow-only { - border-color: #f4b400; -} - -.spinner-green, -.spinner-green-only { - border-color: #0f9d58; -} - -/** - * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): - * - * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't - * guarantee that the animation will start _exactly_ after that value. So we avoid using - * animation-delay and instead set custom keyframes for each color (as redundant as it - * seems). - * - * We write out each animation in full (instead of separating animation-name, - * animation-duration, etc.) because under the polyfill, Safari does not recognize those - * specific properties properly, treats them as -webkit-animation, and overrides the - * other animation rules. See https://github.com/Polymer/platform/issues/53. - */ -.active .spinner-layer.spinner-blue { - /* durations: 4 * ARCTIME */ - -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; - animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -} - -.active .spinner-layer.spinner-red { - /* durations: 4 * ARCTIME */ - -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; - animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -} - -.active .spinner-layer.spinner-yellow { - /* durations: 4 * ARCTIME */ - -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; - animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -} - -.active .spinner-layer.spinner-green { - /* durations: 4 * ARCTIME */ - -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; - animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -} - -.active .spinner-layer, -.active .spinner-layer.spinner-blue-only, -.active .spinner-layer.spinner-red-only, -.active .spinner-layer.spinner-yellow-only, -.active .spinner-layer.spinner-green-only { - /* durations: 4 * ARCTIME */ - opacity: 1; - -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; - animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -} - -@-webkit-keyframes fill-unfill-rotate { - 12.5% { - -webkit-transform: rotate(135deg); - } /* 0.5 * ARCSIZE */ - 25% { - -webkit-transform: rotate(270deg); - } /* 1 * ARCSIZE */ - 37.5% { - -webkit-transform: rotate(405deg); - } /* 1.5 * ARCSIZE */ - 50% { - -webkit-transform: rotate(540deg); - } /* 2 * ARCSIZE */ - 62.5% { - -webkit-transform: rotate(675deg); - } /* 2.5 * ARCSIZE */ - 75% { - -webkit-transform: rotate(810deg); - } /* 3 * ARCSIZE */ - 87.5% { - -webkit-transform: rotate(945deg); - } /* 3.5 * ARCSIZE */ - to { - -webkit-transform: rotate(1080deg); - } /* 4 * ARCSIZE */ -} -@keyframes fill-unfill-rotate { - 12.5% { - transform: rotate(135deg); - } /* 0.5 * ARCSIZE */ - 25% { - transform: rotate(270deg); - } /* 1 * ARCSIZE */ - 37.5% { - transform: rotate(405deg); - } /* 1.5 * ARCSIZE */ - 50% { - transform: rotate(540deg); - } /* 2 * ARCSIZE */ - 62.5% { - transform: rotate(675deg); - } /* 2.5 * ARCSIZE */ - 75% { - transform: rotate(810deg); - } /* 3 * ARCSIZE */ - 87.5% { - transform: rotate(945deg); - } /* 3.5 * ARCSIZE */ - to { - transform: rotate(1080deg); - } /* 4 * ARCSIZE */ -} -@-webkit-keyframes blue-fade-in-out { - from { - opacity: 1; - } - 25% { - opacity: 1; - } - 26% { - opacity: 0; - } - 89% { - opacity: 0; - } - 90% { - opacity: 1; - } - 100% { - opacity: 1; - } -} -@keyframes blue-fade-in-out { - from { - opacity: 1; - } - 25% { - opacity: 1; - } - 26% { - opacity: 0; - } - 89% { - opacity: 0; - } - 90% { - opacity: 1; - } - 100% { - opacity: 1; - } -} -@-webkit-keyframes red-fade-in-out { - from { - opacity: 0; - } - 15% { - opacity: 0; - } - 25% { - opacity: 1; - } - 50% { - opacity: 1; - } - 51% { - opacity: 0; - } -} -@keyframes red-fade-in-out { - from { - opacity: 0; - } - 15% { - opacity: 0; - } - 25% { - opacity: 1; - } - 50% { - opacity: 1; - } - 51% { - opacity: 0; - } -} -@-webkit-keyframes yellow-fade-in-out { - from { - opacity: 0; - } - 40% { - opacity: 0; - } - 50% { - opacity: 1; - } - 75% { - opacity: 1; - } - 76% { - opacity: 0; - } -} -@keyframes yellow-fade-in-out { - from { - opacity: 0; - } - 40% { - opacity: 0; - } - 50% { - opacity: 1; - } - 75% { - opacity: 1; - } - 76% { - opacity: 0; - } -} -@-webkit-keyframes green-fade-in-out { - from { - opacity: 0; - } - 65% { - opacity: 0; - } - 75% { - opacity: 1; - } - 90% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -@keyframes green-fade-in-out { - from { - opacity: 0; - } - 65% { - opacity: 0; - } - 75% { - opacity: 1; - } - 90% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -/** - * Patch the gap that appear between the two adjacent div.circle-clipper while the - * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11). - */ -.gap-patch { - position: absolute; - top: 0; - left: 45%; - width: 10%; - height: 100%; - overflow: hidden; - border-color: inherit; -} - -.gap-patch .circle { - width: 1000%; - left: -450%; -} - -.circle-clipper { - display: inline-block; - position: relative; - width: 50%; - height: 100%; - overflow: hidden; - border-color: inherit; -} -.circle-clipper .circle { - width: 200%; - height: 100%; - border-width: 3px; /* STROKEWIDTH */ - border-style: solid; - border-color: inherit; - border-bottom-color: transparent !important; - border-radius: 50%; - -webkit-animation: none; - animation: none; - position: absolute; - top: 0; - right: 0; - bottom: 0; -} -.circle-clipper.left .circle { - left: 0; - border-right-color: transparent !important; - -webkit-transform: rotate(129deg); - transform: rotate(129deg); -} -.circle-clipper.right .circle { - left: -100%; - border-left-color: transparent !important; - -webkit-transform: rotate(-129deg); - transform: rotate(-129deg); -} - -.active .circle-clipper.left .circle { - /* duration: ARCTIME */ - -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; - animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -} - -.active .circle-clipper.right .circle { - /* duration: ARCTIME */ - -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; - animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -} - -@-webkit-keyframes left-spin { - from { - -webkit-transform: rotate(130deg); - } - 50% { - -webkit-transform: rotate(-5deg); - } - to { - -webkit-transform: rotate(130deg); - } -} -@keyframes left-spin { - from { - transform: rotate(130deg); - } - 50% { - transform: rotate(-5deg); - } - to { - transform: rotate(130deg); - } -} -@-webkit-keyframes right-spin { - from { - -webkit-transform: rotate(-130deg); - } - 50% { - -webkit-transform: rotate(5deg); - } - to { - -webkit-transform: rotate(-130deg); - } -} -@keyframes right-spin { - from { - transform: rotate(-130deg); - } - 50% { - transform: rotate(5deg); - } - to { - transform: rotate(-130deg); - } -} -#spinnerContainer.cooldown { - /* duration: SHRINK_TIME */ - -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1); - animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1); -} - -@-webkit-keyframes fade-out { - from { - opacity: 1; - } - to { - opacity: 0; - } -} -@keyframes fade-out { - from { - opacity: 1; - } - to { - opacity: 0; - } -} -.slider { - position: relative; - height: 400px; - width: 100%; -} -.slider.fullscreen { - height: 100%; - width: 100%; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; -} -.slider.fullscreen ul.slides { - padding-left: 0; - list-style-type: none; - height: 100%; -} -.slider.fullscreen ul.indicators { - padding-left: 0; - list-style-type: none; - z-index: 2; - bottom: 30px; -} -.slider.fullscreen ul.indicators .indicator-item { - background-color: rgba(255, 255, 255, 0.45); -} -.slider.fullscreen ul.indicators .indicator-item.active { - background-color: var(--md-ref-palette-primary100); -} -.slider .slides { - background-color: var(--md-sys-color-surface); - margin: 0; - height: 400px; - padding-left: 0; - list-style-type: none; -} -.slider .slides li { - padding-left: 0; - list-style-type: none; - opacity: 0; - position: absolute; - top: 0; - left: 0; - z-index: 1; - width: 100%; - height: inherit; - overflow: hidden; -} -.slider .slides li img { - height: 100%; - width: 100%; - background-size: cover; - background-position: center; -} -.slider .slides li .caption { - color: #fff; - position: absolute; - top: 15%; - left: 15%; - width: 70%; - opacity: 0; -} -.slider .slides li .caption p { - color: rgba(255, 255, 255, 0.75); -} -.slider .slides li.active { - z-index: 2; -} -.slider .indicators { - padding-left: 0; - list-style-type: none; - position: absolute; - text-align: center; - left: 0; - right: 0; - bottom: 0; - margin: 0; -} -.slider .indicators .indicator-item { - display: inline-block; - position: relative; - height: 16px; - width: 16px; - margin: 0 12px; -} -.slider .indicators .indicator-item-btn { - position: absolute; - top: 0; - left: 0; - cursor: pointer; - background-color: var(--md-sys-color-shadow-light); - transition: background-color 0.3s; - border-radius: 50%; - border-width: 0; - width: 100%; - height: 100%; -} -.slider .indicators .indicator-item-btn.active { - background-color: var(--md-sys-color-primary); -} - -.carousel { - --carousel-height: 400px; - overflow: hidden; - position: relative; - width: 100%; - height: var(--carousel-height); - perspective: 500px; - transform-style: preserve-3d; - transform-origin: 0% 50%; -} -.carousel.carousel-slider { - top: 0; - left: 0; -} -.carousel.carousel-slider .carousel-fixed-item { - position: absolute; - left: 0; - right: 0; - bottom: 20px; - z-index: 1; -} -.carousel.carousel-slider .carousel-fixed-item.with-indicators { - bottom: 68px; -} -.carousel.carousel-slider .carousel-item { - width: 100%; - height: 100%; - min-height: var(--carousel-height); - position: absolute; - top: 0; - left: 0; -} -.carousel.carousel-slider .carousel-item h2 { - font-size: 24px; - font-weight: 500; - line-height: 32px; -} -.carousel.carousel-slider .carousel-item p { - font-size: 15px; -} -.carousel .carousel-item { - visibility: hidden; - width: calc(var(--carousel-height) * 0.5); - height: calc(var(--carousel-height) * 0.5); - position: absolute; - top: 0; - left: 0; -} -.carousel .carousel-item > img { - width: 100%; -} -.carousel .indicators { - padding-left: 0; - list-style-type: none; - position: absolute; - text-align: center; - left: 0; - right: 0; - bottom: 0; - margin: 0; -} -.carousel .indicators .indicator-item { - display: inline-block; - position: relative; - cursor: pointer; - height: 8px; - width: 8px; - margin: 24px 4px; - background-color: rgba(255, 255, 255, 0.45); - transition: background-color 0.3s; - border-radius: 50%; -} -.carousel .indicators .indicator-item.active { - background-color: var(--md-ref-palette-primary100); -} -.carousel.scrolling .carousel-item .materialboxed, -.carousel .carousel-item:not(.active) .materialboxed { - pointer-events: none; -} - -.tap-target-wrapper { - width: 800px; - height: 800px; - position: fixed; - z-index: 1000; - visibility: hidden; - transition: visibility 0s 0.3s; -} - -.tap-target-wrapper.open { - visibility: visible; - transition: visibility 0s; -} -.tap-target-wrapper.open .tap-target { - transform: scale(1); - opacity: 0.95; - transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1); -} -.tap-target-wrapper.open .tap-target-wave::before { - transform: scale(1); -} -.tap-target-wrapper.open .tap-target-wave::after { - visibility: visible; - animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; - transition: opacity 0.3s, transform 0.3s, visibility 0s 1s; -} - -.tap-target { - position: absolute; - font-size: 1rem; - border-radius: 50%; - background-color: var(--md-sys-color-primary-container); - color: var(--md-sys-color-primary); - box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2); - width: 100%; - height: 100%; - opacity: 0; - transform: scale(0); - transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1); -} - -.tap-target-content { - position: relative; - display: table-cell; -} - -.tap-target-wave { - position: absolute; - border-radius: 50%; - z-index: 10001; -} -.tap-target-wave::before, .tap-target-wave::after { - content: ""; - display: block; - position: absolute; - width: 100%; - height: 100%; - border-radius: 50%; - background-color: var(--md-sys-color-surface); -} -.tap-target-wave::before { - transform: scale(0); - transition: transform 0.3s; -} -.tap-target-wave::after { - visibility: hidden; - transition: opacity 0.3s, transform 0.3s, visibility 0s; - z-index: -1; -} - -.tap-target-origin { - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 10002; - position: absolute !important; -} -.tap-target-origin:not(.btn):not(.btn-large):not(.btn-small), .tap-target-origin:not(.btn):not(.btn-large):not(.btn-small):hover { - background: none; -} - -@media only screen and (max-width: 600px) { - .tap-target, .tap-target-wrapper { - width: 600px; - height: 600px; - } -} -.pulse { - overflow: visible; - position: relative; -} -.pulse::before { - content: ""; - display: block; - position: absolute; - pointer-events: none; - width: 100%; - height: 100%; - top: 0; - left: 0; - background-color: inherit; - border-radius: inherit; - transition: opacity 0.3s, transform 0.3s; - animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; - z-index: -1; -} - -@keyframes pulse-animation { - 0% { - opacity: 1; - transform: scale(1); - } - 50% { - opacity: 0; - transform: scale(1.5); - } - 100% { - opacity: 0; - transform: scale(1.5); - } -} -/* Modal */ -.datepicker-modal { - max-width: 325px; - min-width: 300px; - max-height: none; -} - -.datepicker-container.modal-content { - display: flex; - flex-direction: column; - padding: 0; - background-color: var(--md-sys-color-surface); -} - -.datepicker-controls { - display: flex; - justify-content: space-between; - width: 280px; - margin: 0 auto; -} -.datepicker-controls .selects-container { - display: flex; -} -.datepicker-controls .select-wrapper input { - border-bottom: none; - text-align: center; - margin: 0; -} -.datepicker-controls .select-wrapper input:focus { - border-bottom: none; -} -.datepicker-controls .select-wrapper .caret { - display: none; -} -.datepicker-controls .select-year input { - width: 50px; -} -.datepicker-controls .select-month input { - width: 80px; -} -.datepicker-controls .month-prev, -.datepicker-controls .month-next { - display: inline-flex; - align-items: center; -} -.datepicker-controls .month-prev > svg, -.datepicker-controls .month-next > svg { - fill: var(--md-sys-color-on-surface-variant); -} - -.month-prev, .month-next { - margin-top: 4px; - cursor: pointer; - background-color: transparent; - border: none; -} - -/* Date Display */ -.datepicker-date-display { - flex: 1 auto; - background-color: var(--md-sys-color-primary); - color: var(--md-sys-color-on-primary); - padding: 20px 22px; - font-weight: 500; -} -.datepicker-date-display .year-text { - display: block; - font-size: 1.5rem; - line-height: 25px; - color: var(--md-sys-color-on-primary); -} -.datepicker-date-display .date-text { - display: block; - font-size: 2.8rem; - line-height: 47px; - font-weight: 500; -} - -/* Calendar */ -.datepicker-calendar-container { - flex: 2.5 auto; -} - -.datepicker-table { - width: 280px; - font-size: 1rem; - margin: 0 auto; -} -.datepicker-table thead { - border-bottom: none; -} -.datepicker-table th { - padding: 10px 5px; - text-align: center; -} -.datepicker-table tr { - border: none; -} -.datepicker-table abbr { - text-decoration: none; - color: var(--md-sys-color-on-surface-variant); -} -.datepicker-table td { - color: var(--md-sys-color-on-background); - border-radius: 50%; - padding: 0; -} -.datepicker-table td.is-today { - color: var(--md-sys-color-primary); -} -.datepicker-table td.is-selected { - background-color: var(--md-sys-color-primary); - color: var(--md-sys-color-on-primary); -} -.datepicker-table td.is-outside-current-month, .datepicker-table td.is-disabled { - color: var(--md-sys-color-on-surface); - pointer-events: none; -} - -.datepicker-day-button { - background-color: transparent; - border: none; - line-height: 38px; - display: block; - width: 100%; - border-radius: 50%; - padding: 0 5px; - cursor: pointer; - color: inherit; -} -.datepicker-day-button:hover { - background-color: rgba(var(--md-sys-color-primary-numeric), 0.06); -} -.datepicker-day-button:focus { - background-color: rgba(var(--md-sys-color-primary-numeric), 0.18); -} - -/* Footer */ -.datepicker-footer { - width: 280px; - margin: 0 auto; - padding-bottom: 5px; - display: flex; - justify-content: space-between; -} - -.datepicker-cancel, -.datepicker-clear, -.datepicker-today, -.datepicker-done { - color: var(--md-sys-color-primary); - padding: 0 1rem; -} - -.datepicker-clear { - color: var(--md-sys-color-error); -} - -/* Media Queries */ -@media only screen and (min-width : 601px) { - .datepicker-modal { - max-width: 625px; - } - .datepicker-container.modal-content { - flex-direction: row; - } - .datepicker-date-display { - flex: 0 1 270px; - } - .datepicker-controls, - .datepicker-table, - .datepicker-footer { - width: 320px; - } - .datepicker-day-button { - line-height: 44px; - } -} -/* Timepicker Containers */ -.timepicker-modal { - max-width: 325px; - max-height: none; -} - -.timepicker-container.modal-content { - display: flex; - flex-direction: column; - padding: 0; -} - -.text-primary { - color: var(--md-sys-color-on-primary); -} - -/* Clock Digital Display */ -.timepicker-digital-display { - width: 200px; - flex: 1 auto; - background-color: var(--md-sys-color-primary); - padding: 10px; - font-weight: 300; -} - -.timepicker-text-container { - font-size: 4rem; - font-weight: bold; - text-align: center; - color: var(--font-on-primary-color-medium); - font-weight: 400; - position: relative; - user-select: none; -} -.timepicker-text-container input[type=text] { - height: 4rem; - color: rgba(255, 255, 255, 0.6); - border-bottom: 0px; - font-size: 4rem; - direction: ltr; -} - -.timepicker-input-hours, -.timepicker-input-minutes, -.timepicker-span-am-pm div { - cursor: pointer; -} - -input[type=text].timepicker-input-hours { - text-align: right; - width: 28%; - margin-right: 3px; -} - -input[type=text].timepicker-input-minutes { - width: 33%; - margin-left: 3px; -} - -input[type=text].text-primary { - color: rgb(255, 255, 255); -} - -.timepicker-display-am-pm { - font-size: 1.3rem; - position: absolute; - right: 1rem; - bottom: 1rem; - font-weight: 400; -} - -/* Analog Clock Display */ -.timepicker-analog-display { - flex: 2.5 auto; - background-color: var(--md-sys-color-surface); -} - -.timepicker-plate { - background-color: rgba(0, 0, 0, 0.09); - border-radius: 50%; - width: 270px; - height: 270px; - overflow: visible; - position: relative; - margin: auto; - margin-top: 25px; - margin-bottom: 5px; - user-select: none; -} - -.timepicker-canvas, -.timepicker-dial { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; -} - -.timepicker-minutes { - visibility: hidden; -} - -.timepicker-tick { - border-radius: 50%; - color: var(--md-sys-color-on-background); - line-height: 40px; - text-align: center; - width: 40px; - height: 40px; - position: absolute; - cursor: pointer; - font-size: 15px; -} - -.timepicker-tick.active, -.timepicker-tick:hover { - background-color: rgba(var(--md-sys-color-primary-numeric), 0.06); -} - -.timepicker-dial { - transition: transform 350ms, opacity 350ms; -} - -.timepicker-dial-out { - opacity: 0; -} -.timepicker-dial-out.timepicker-hours { - transform: scale(1.1, 1.1); -} -.timepicker-dial-out.timepicker-minutes { - transform: scale(0.8, 0.8); -} - -.timepicker-canvas { - transition: opacity 175ms; -} -.timepicker-canvas line { - stroke: var(--md-sys-color-primary); - stroke-width: 4; - stroke-linecap: round; -} - -.timepicker-canvas-out { - opacity: 0.25; -} - -.timepicker-canvas-bearing { - stroke: none; - fill: var(--md-sys-color-primary); -} - -.timepicker-canvas-bg { - stroke: none; - fill: var(--md-sys-color-primary); -} - -/* Footer */ -.timepicker-footer { - margin: 0 auto; - padding: 5px 1rem; - display: flex; - justify-content: space-between; -} - -.timepicker-clear { - color: var(--md-sys-color-error); -} - -.timepicker-close { - color: var(--md-sys-color-primary); -} - -.timepicker-clear, -.timepicker-close { - padding: 0 20px; -} - -/* Media Queries */ -@media only screen and (min-width : 601px) { - .timepicker-modal { - max-width: 600px; - } - .timepicker-container.modal-content { - flex-direction: row; - } - .timepicker-text-container { - top: 32%; - } - .timepicker-display-am-pm { - position: relative; - right: auto; - bottom: auto; - text-align: center; - margin-top: 1.2rem; - } -} \ No newline at end of file diff --git a/dist/css/materialize.min.css b/dist/css/materialize.min.css deleted file mode 100644 index 3707ba1b78..0000000000 --- a/dist/css/materialize.min.css +++ /dev/null @@ -1,8 +0,0 @@ -/*! -* Materialize v2.1.1 (https://materializeweb.com) -* Copyright 2014-2024 Materialize -* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE) -*/ -:root{--md-source: #006495;--md-ref-palette-primary0: #000000;--md-ref-palette-primary10: #001e30;--md-ref-palette-primary20: #003450;--md-ref-palette-primary25: #003f60;--md-ref-palette-primary30: #004b71;--md-ref-palette-primary35: #005783;--md-ref-palette-primary40: #006495;--md-ref-palette-primary50: #0f7eb8;--md-ref-palette-primary60: #3d98d4;--md-ref-palette-primary70: #5db3f0;--md-ref-palette-primary80: #8fcdff;--md-ref-palette-primary90: #cbe6ff;--md-ref-palette-primary95: #e6f2ff;--md-ref-palette-primary98: #f7f9ff;--md-ref-palette-primary99: #fcfcff;--md-ref-palette-primary100: #ffffff;--md-ref-palette-secondary0: #000000;--md-ref-palette-secondary10: #0d1d29;--md-ref-palette-secondary20: #22323f;--md-ref-palette-secondary25: #2d3d4b;--md-ref-palette-secondary30: #394856;--md-ref-palette-secondary35: #445462;--md-ref-palette-secondary40: #50606f;--md-ref-palette-secondary50: #697988;--md-ref-palette-secondary60: #8293a2;--md-ref-palette-secondary70: #9dadbd;--md-ref-palette-secondary80: #b8c8d9;--md-ref-palette-secondary90: #d4e4f6;--md-ref-palette-secondary95: #e6f2ff;--md-ref-palette-secondary98: #f7f9ff;--md-ref-palette-secondary99: #fcfcff;--md-ref-palette-secondary100: #ffffff;--md-ref-palette-tertiary0: #000000;--md-ref-palette-tertiary10: #211634;--md-ref-palette-tertiary20: #362b4a;--md-ref-palette-tertiary25: #423656;--md-ref-palette-tertiary30: #4d4162;--md-ref-palette-tertiary35: #594c6e;--md-ref-palette-tertiary40: #66587b;--md-ref-palette-tertiary50: #7f7195;--md-ref-palette-tertiary60: #998ab0;--md-ref-palette-tertiary70: #b4a4cb;--md-ref-palette-tertiary80: #d0bfe7;--md-ref-palette-tertiary90: #ecdcff;--md-ref-palette-tertiary95: #f7edff;--md-ref-palette-tertiary98: #fef7ff;--md-ref-palette-tertiary99: #fffbff;--md-ref-palette-tertiary100: #ffffff;--md-ref-palette-neutral0: #000000;--md-ref-palette-neutral10: #1a1c1e;--md-ref-palette-neutral20: #2e3133;--md-ref-palette-neutral25: #3a3c3e;--md-ref-palette-neutral30: #454749;--md-ref-palette-neutral35: #515255;--md-ref-palette-neutral40: #5d5e61;--md-ref-palette-neutral50: #76777a;--md-ref-palette-neutral60: #8f9194;--md-ref-palette-neutral70: #aaabae;--md-ref-palette-neutral80: #c6c6c9;--md-ref-palette-neutral90: #e2e2e5;--md-ref-palette-neutral95: #f0f0f3;--md-ref-palette-neutral98: #f9f9fc;--md-ref-palette-neutral99: #fcfcff;--md-ref-palette-neutral100: #ffffff;--md-ref-palette-neutral-variant0: #000000;--md-ref-palette-neutral-variant10: #161c22;--md-ref-palette-neutral-variant20: #2b3137;--md-ref-palette-neutral-variant25: #363c42;--md-ref-palette-neutral-variant30: #41474d;--md-ref-palette-neutral-variant35: #4d5359;--md-ref-palette-neutral-variant40: #595f65;--md-ref-palette-neutral-variant50: #72787e;--md-ref-palette-neutral-variant60: #8b9198;--md-ref-palette-neutral-variant70: #a6acb3;--md-ref-palette-neutral-variant80: #c1c7ce;--md-ref-palette-neutral-variant90: #dee3ea;--md-ref-palette-neutral-variant95: #ecf1f9;--md-ref-palette-neutral-variant98: #f7f9ff;--md-ref-palette-neutral-variant99: #fcfcff;--md-ref-palette-neutral-variant100: #ffffff;--md-ref-palette-error0: #000000;--md-ref-palette-error10: #410002;--md-ref-palette-error20: #690005;--md-ref-palette-error25: #7e0007;--md-ref-palette-error30: #93000a;--md-ref-palette-error35: #a80710;--md-ref-palette-error40: #ba1a1a;--md-ref-palette-error50: #de3730;--md-ref-palette-error60: #ff5449;--md-ref-palette-error70: #ff897d;--md-ref-palette-error80: #ffb4ab;--md-ref-palette-error90: #ffdad6;--md-ref-palette-error95: #ffedea;--md-ref-palette-error98: #fff8f7;--md-ref-palette-error99: #fffbff;--md-ref-palette-error100: #ffffff;--md-sys-color-primary-light: #006495;--md-sys-color-on-primary-light: #ffffff;--md-sys-color-primary-container-light: #cbe6ff;--md-sys-color-on-primary-container-light: #001e30;--md-sys-color-secondary-light: #50606f;--md-sys-color-on-secondary-light: #ffffff;--md-sys-color-secondary-container-light: #d4e4f6;--md-sys-color-on-secondary-container-light: #0d1d29;--md-sys-color-tertiary-light: #66587b;--md-sys-color-on-tertiary-light: #ffffff;--md-sys-color-tertiary-container-light: #ecdcff;--md-sys-color-on-tertiary-container-light: #211634;--md-sys-color-error-light: #ba1a1a;--md-sys-color-error-container-light: #ffdad6;--md-sys-color-on-error-light: #ffffff;--md-sys-color-on-error-container-light: #410002;--md-sys-color-background-light: #fcfcff;--md-sys-color-on-background-light: #1a1c1e;--md-sys-color-surface-light: #fcfcff;--md-sys-color-on-surface-light: #1a1c1e;--md-sys-color-surface-variant-light: #dee3ea;--md-sys-color-on-surface-variant-light: #41474d;--md-sys-color-outline-light: #72787e;--md-sys-color-inverse-on-surface-light: #f0f0f3;--md-sys-color-inverse-surface-light: #2e3133;--md-sys-color-inverse-primary-light: #8fcdff;--md-sys-color-shadow-light: #000000;--md-sys-color-surface-tint-light: #006495;--md-sys-color-outline-variant-light: #c1c7ce;--md-sys-color-scrim-light: #000000;--md-sys-color-primary-dark: #8fcdff;--md-sys-color-on-primary-dark: #003450;--md-sys-color-primary-container-dark: #004b71;--md-sys-color-on-primary-container-dark: #cbe6ff;--md-sys-color-secondary-dark: #b8c8d9;--md-sys-color-on-secondary-dark: #22323f;--md-sys-color-secondary-container-dark: #394856;--md-sys-color-on-secondary-container-dark: #d4e4f6;--md-sys-color-tertiary-dark: #d0bfe7;--md-sys-color-on-tertiary-dark: #362b4a;--md-sys-color-tertiary-container-dark: #4d4162;--md-sys-color-on-tertiary-container-dark: #ecdcff;--md-sys-color-error-dark: #ffb4ab;--md-sys-color-error-container-dark: #93000a;--md-sys-color-on-error-dark: #690005;--md-sys-color-on-error-container-dark: #ffdad6;--md-sys-color-background-dark: #1a1c1e;--md-sys-color-on-background-dark: #e2e2e5;--md-sys-color-surface-dark: #1a1c1e;--md-sys-color-on-surface-dark: #e2e2e5;--md-sys-color-surface-variant-dark: #41474d;--md-sys-color-on-surface-variant-dark: #c1c7ce;--md-sys-color-outline-dark: #8b9198;--md-sys-color-inverse-on-surface-dark: #1a1c1e;--md-sys-color-inverse-surface-dark: #e2e2e5;--md-sys-color-inverse-primary-dark: #006495;--md-sys-color-shadow-dark: #000000;--md-sys-color-surface-tint-dark: #8fcdff;--md-sys-color-outline-variant-dark: #41474d;--md-sys-color-scrim-dark: #000000;--md-sys-typescale-display-large-font-family-name: Roboto;--md-sys-typescale-display-large-font-family-style: Regular;--md-sys-typescale-display-large-font-weight: 400px;--md-sys-typescale-display-large-font-size: 57px;--md-sys-typescale-display-large-line-height: 64px;--md-sys-typescale-display-large-letter-spacing: -0.25px;--md-sys-typescale-display-medium-font-family-name: Roboto;--md-sys-typescale-display-medium-font-family-style: Regular;--md-sys-typescale-display-medium-font-weight: 400px;--md-sys-typescale-display-medium-font-size: 45px;--md-sys-typescale-display-medium-line-height: 52px;--md-sys-typescale-display-medium-letter-spacing: 0px;--md-sys-typescale-display-small-font-family-name: Roboto;--md-sys-typescale-display-small-font-family-style: Regular;--md-sys-typescale-display-small-font-weight: 400px;--md-sys-typescale-display-small-font-size: 36px;--md-sys-typescale-display-small-line-height: 44px;--md-sys-typescale-display-small-letter-spacing: 0px;--md-sys-typescale-headline-large-font-family-name: Roboto;--md-sys-typescale-headline-large-font-family-style: Regular;--md-sys-typescale-headline-large-font-weight: 400px;--md-sys-typescale-headline-large-font-size: 32px;--md-sys-typescale-headline-large-line-height: 40px;--md-sys-typescale-headline-large-letter-spacing: 0px;--md-sys-typescale-headline-medium-font-family-name: Roboto;--md-sys-typescale-headline-medium-font-family-style: Regular;--md-sys-typescale-headline-medium-font-weight: 400px;--md-sys-typescale-headline-medium-font-size: 28px;--md-sys-typescale-headline-medium-line-height: 36px;--md-sys-typescale-headline-medium-letter-spacing: 0px;--md-sys-typescale-headline-small-font-family-name: Roboto;--md-sys-typescale-headline-small-font-family-style: Regular;--md-sys-typescale-headline-small-font-weight: 400px;--md-sys-typescale-headline-small-font-size: 24px;--md-sys-typescale-headline-small-line-height: 32px;--md-sys-typescale-headline-small-letter-spacing: 0px;--md-sys-typescale-body-large-font-family-name: Roboto;--md-sys-typescale-body-large-font-family-style: Regular;--md-sys-typescale-body-large-font-weight: 400px;--md-sys-typescale-body-large-font-size: 16px;--md-sys-typescale-body-large-line-height: 24px;--md-sys-typescale-body-large-letter-spacing: 0.50px;--md-sys-typescale-body-medium-font-family-name: Roboto;--md-sys-typescale-body-medium-font-family-style: Regular;--md-sys-typescale-body-medium-font-weight: 400px;--md-sys-typescale-body-medium-font-size: 14px;--md-sys-typescale-body-medium-line-height: 20px;--md-sys-typescale-body-medium-letter-spacing: 0.25px;--md-sys-typescale-body-small-font-family-name: Roboto;--md-sys-typescale-body-small-font-family-style: Regular;--md-sys-typescale-body-small-font-weight: 400px;--md-sys-typescale-body-small-font-size: 12px;--md-sys-typescale-body-small-line-height: 16px;--md-sys-typescale-body-small-letter-spacing: 0.40px;--md-sys-typescale-label-large-font-family-name: Roboto;--md-sys-typescale-label-large-font-family-style: Medium;--md-sys-typescale-label-large-font-weight: 500px;--md-sys-typescale-label-large-font-size: 14px;--md-sys-typescale-label-large-line-height: 20px;--md-sys-typescale-label-large-letter-spacing: 0.10px;--md-sys-typescale-label-medium-font-family-name: Roboto;--md-sys-typescale-label-medium-font-family-style: Medium;--md-sys-typescale-label-medium-font-weight: 500px;--md-sys-typescale-label-medium-font-size: 12px;--md-sys-typescale-label-medium-line-height: 16px;--md-sys-typescale-label-medium-letter-spacing: 0.50px;--md-sys-typescale-label-small-font-family-name: Roboto;--md-sys-typescale-label-small-font-family-style: Medium;--md-sys-typescale-label-small-font-weight: 500px;--md-sys-typescale-label-small-font-size: 11px;--md-sys-typescale-label-small-line-height: 16px;--md-sys-typescale-label-small-letter-spacing: 0.50px;--md-sys-typescale-title-large-font-family-name: Roboto;--md-sys-typescale-title-large-font-family-style: Regular;--md-sys-typescale-title-large-font-weight: 400px;--md-sys-typescale-title-large-font-size: 22px;--md-sys-typescale-title-large-line-height: 28px;--md-sys-typescale-title-large-letter-spacing: 0px;--md-sys-typescale-title-medium-font-family-name: Roboto;--md-sys-typescale-title-medium-font-family-style: Medium;--md-sys-typescale-title-medium-font-weight: 500px;--md-sys-typescale-title-medium-font-size: 16px;--md-sys-typescale-title-medium-line-height: 24px;--md-sys-typescale-title-medium-letter-spacing: 0.15px;--md-sys-typescale-title-small-font-family-name: Roboto;--md-sys-typescale-title-small-font-family-style: Medium;--md-sys-typescale-title-small-font-weight: 500px;--md-sys-typescale-title-small-font-size: 14px;--md-sys-typescale-title-small-line-height: 20px;--md-sys-typescale-title-small-letter-spacing: 0.10px}:root,:host{color-scheme:light;--md-sys-color-primary: var(--md-sys-color-primary-light);--md-sys-color-on-primary: var(--md-sys-color-on-primary-light);--md-sys-color-primary-container: var(--md-sys-color-primary-container-light);--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);--md-sys-color-secondary: var(--md-sys-color-secondary-light);--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);--md-sys-color-tertiary: var(--md-sys-color-tertiary-light);--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);--md-sys-color-error: var(--md-sys-color-error-light);--md-sys-color-on-error: var(--md-sys-color-on-error-light);--md-sys-color-error-container: var(--md-sys-color-error-container-light);--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);--md-sys-color-outline: var(--md-sys-color-outline-light);--md-sys-color-background: var(--md-sys-color-background-light);--md-sys-color-on-background: var(--md-sys-color-on-background-light);--md-sys-color-surface: var(--md-sys-color-surface-light);--md-sys-color-on-surface: var(--md-sys-color-on-surface-light);--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);--md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);--md-sys-color-shadow: var(--md-sys-color-shadow-light);--md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);--md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);--md-sys-color-scrim: var(--md-sys-color-scrim-light)}@media(prefers-color-scheme: dark){:root,:host{color-scheme:dark;--md-sys-color-primary: var(--md-sys-color-primary-dark);--md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);--md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);--md-sys-color-secondary: var(--md-sys-color-secondary-dark);--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);--md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);--md-sys-color-error: var(--md-sys-color-error-dark);--md-sys-color-on-error: var(--md-sys-color-on-error-dark);--md-sys-color-error-container: var(--md-sys-color-error-container-dark);--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);--md-sys-color-outline: var(--md-sys-color-outline-dark);--md-sys-color-background: var(--md-sys-color-background-dark);--md-sys-color-on-background: var(--md-sys-color-on-background-dark);--md-sys-color-surface: var(--md-sys-color-surface-dark);--md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);--md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);--md-sys-color-shadow: var(--md-sys-color-shadow-dark);--md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);--md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);--md-sys-color-scrim: var(--md-sys-color-scrim-dark)}}:root[theme=light]{color-scheme:light;--md-sys-color-primary: var(--md-sys-color-primary-light);--md-sys-color-on-primary: var(--md-sys-color-on-primary-light);--md-sys-color-primary-container: var(--md-sys-color-primary-container-light);--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);--md-sys-color-secondary: var(--md-sys-color-secondary-light);--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);--md-sys-color-tertiary: var(--md-sys-color-tertiary-light);--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);--md-sys-color-error: var(--md-sys-color-error-light);--md-sys-color-on-error: var(--md-sys-color-on-error-light);--md-sys-color-error-container: var(--md-sys-color-error-container-light);--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);--md-sys-color-outline: var(--md-sys-color-outline-light);--md-sys-color-background: var(--md-sys-color-background-light);--md-sys-color-on-background: var(--md-sys-color-on-background-light);--md-sys-color-surface: var(--md-sys-color-surface-light);--md-sys-color-on-surface: var(--md-sys-color-on-surface-light);--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);--md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);--md-sys-color-shadow: var(--md-sys-color-shadow-light);--md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);--md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);--md-sys-color-scrim: var(--md-sys-color-scrim-light)}:root[theme=dark]{color-scheme:dark;--md-sys-color-primary: var(--md-sys-color-primary-dark);--md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);--md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);--md-sys-color-secondary: var(--md-sys-color-secondary-dark);--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);--md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);--md-sys-color-error: var(--md-sys-color-error-dark);--md-sys-color-on-error: var(--md-sys-color-on-error-dark);--md-sys-color-error-container: var(--md-sys-color-error-container-dark);--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);--md-sys-color-outline: var(--md-sys-color-outline-dark);--md-sys-color-background: var(--md-sys-color-background-dark);--md-sys-color-on-background: var(--md-sys-color-on-background-dark);--md-sys-color-surface: var(--md-sys-color-surface-dark);--md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);--md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);--md-sys-color-shadow: var(--md-sys-color-shadow-dark);--md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);--md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);--md-sys-color-scrim: var(--md-sys-color-scrim-dark)}.primary{background-color:var(--md-sys-color-primary)}.primary-text{color:var(--md-sys-color-primary)}.on-primary{background-color:var(--md-sys-color-on-primary)}.on-primary-text{color:var(--md-sys-color-on-primary)}.primary-container{background-color:var(--md-sys-color-primary-container)}.primary-container-text{color:var(--md-sys-color-primary-container)}.on-primary-container{background-color:var(--md-sys-color-on-primary-container)}.on-primary-container-text{color:var(--md-sys-color-on-primary-container)}.secondary{background-color:var(--md-sys-color-secondary)}.secondary-text{color:var(--md-sys-color-secondary)}.on-secondary{background-color:var(--md-sys-color-on-secondary)}.on-secondary-text{color:var(--md-sys-color-on-secondary)}.secondary-container{background-color:var(--md-sys-color-secondary-container)}.secondary-container-text{color:var(--md-sys-color-secondary-container)}.on-secondary-container{background-color:var(--md-sys-color-on-secondary-container)}.on-secondary-container-text{color:var(--md-sys-color-on-secondary-container)}.tertiary{background-color:var(--md-sys-color-tertiary)}.tertiary-text{color:var(--md-sys-color-tertiary)}.on-tertiary{background-color:var(--md-sys-color-on-tertiary)}.on-tertiary-text{color:var(--md-sys-color-on-tertiary)}.tertiary-container{background-color:var(--md-sys-color-tertiary-container)}.tertiary-container-text{color:var(--md-sys-color-tertiary-container)}.on-tertiary-container{background-color:var(--md-sys-color-on-tertiary-container)}.on-tertiary-container-text{color:var(--md-sys-color-on-tertiary-container)}.error{background-color:var(--md-sys-color-error)}.error-text{color:var(--md-sys-color-error)}.on-error{background-color:var(--md-sys-color-on-error)}.on-error-text{color:var(--md-sys-color-on-error)}.error-container{background-color:var(--md-sys-color-error-container)}.error-container-text{color:var(--md-sys-color-error-container)}.on-error-container{background-color:var(--md-sys-color-on-error-container)}.on-error-container-text{color:var(--md-sys-color-on-error-container)}.background{background-color:var(--md-sys-color-background)}.background-text{color:var(--md-sys-color-background)}.on-background{background-color:var(--md-sys-color-on-background)}.on-background-text{color:var(--md-sys-color-on-background)}.surface,.switch label input[type=checkbox]:checked+.lever:after{background-color:var(--md-sys-color-surface)}.surface-text{color:var(--md-sys-color-surface)}.on-surface{background-color:var(--md-sys-color-on-surface)}.on-surface-text{color:var(--md-sys-color-on-surface)}.surface-variant,.progress,input[type=range]::-moz-range-track,input[type=range]::-webkit-slider-runnable-track{background-color:var(--md-sys-color-surface-variant)}.surface-variant-text{color:var(--md-sys-color-surface-variant)}.on-surface-variant{background-color:var(--md-sys-color-on-surface-variant)}.on-surface-variant-text,.chip>.material-icons{color:var(--md-sys-color-on-surface-variant)}.outline,.switch label .lever:after{background-color:var(--md-sys-color-outline)}.outline-text{color:var(--md-sys-color-outline)}.inverse-on-surface{background-color:var(--md-sys-color-inverse-on-surface)}.inverse-on-surface-text{color:var(--md-sys-color-inverse-on-surface)}.inverse-surface{background-color:var(--md-sys-color-inverse-surface)}.inverse-surface-text{color:var(--md-sys-color-inverse-surface)}.inverse-primary{background-color:var(--md-sys-color-inverse-primary)}.inverse-primary-text{color:var(--md-sys-color-inverse-primary)}.shadow{background-color:var(--md-sys-color-shadow)}.shadow-text{color:var(--md-sys-color-shadow)}.surface-tint{background-color:var(--md-sys-color-surface-tint)}.surface-tint-text{color:var(--md-sys-color-surface-tint)}.outline-variant{background-color:var(--md-sys-color-outline-variant)}.outline-variant-text{color:var(--md-sys-color-outline-variant)}.scrim{background-color:var(--md-sys-color-scrim)}.scrim-text{color:var(--md-sys-color-scrim)}.display-large{font-family:var(--md-sys-typescale-display-large-font-family-name);font-style:var(--md-sys-typescale-display-large-font-family-style);font-weight:var(--md-sys-typescale-display-large-font-weight);font-size:var(--md-sys-typescale-display-large-font-size);letter-spacing:var(--md-sys-typescale-display-large-tracking);line-height:var(--md-sys-typescale-display-large-height);text-transform:var(--md-sys-typescale-display-large-text-transform);text-decoration:var(--md-sys-typescale-display-large-text-decoration)}.display-medium{font-family:var(--md-sys-typescale-display-medium-font-family-name);font-style:var(--md-sys-typescale-display-medium-font-family-style);font-weight:var(--md-sys-typescale-display-medium-font-weight);font-size:var(--md-sys-typescale-display-medium-font-size);letter-spacing:var(--md-sys-typescale-display-medium-tracking);line-height:var(--md-sys-typescale-display-medium-height);text-transform:var(--md-sys-typescale-display-medium-text-transform);text-decoration:var(--md-sys-typescale-display-medium-text-decoration)}.display-small{font-family:var(--md-sys-typescale-display-small-font-family-name);font-style:var(--md-sys-typescale-display-small-font-family-style);font-weight:var(--md-sys-typescale-display-small-font-weight);font-size:var(--md-sys-typescale-display-small-font-size);letter-spacing:var(--md-sys-typescale-display-small-tracking);line-height:var(--md-sys-typescale-display-small-height);text-transform:var(--md-sys-typescale-display-small-text-transform);text-decoration:var(--md-sys-typescale-display-small-text-decoration)}.headline-large{font-family:var(--md-sys-typescale-headline-large-font-family-name);font-style:var(--md-sys-typescale-headline-large-font-family-style);font-weight:var(--md-sys-typescale-headline-large-font-weight);font-size:var(--md-sys-typescale-headline-large-font-size);letter-spacing:var(--md-sys-typescale-headline-large-tracking);line-height:var(--md-sys-typescale-headline-large-height);text-transform:var(--md-sys-typescale-headline-large-text-transform);text-decoration:var(--md-sys-typescale-headline-large-text-decoration)}.headline-medium{font-family:var(--md-sys-typescale-headline-medium-font-family-name);font-style:var(--md-sys-typescale-headline-medium-font-family-style);font-weight:var(--md-sys-typescale-headline-medium-font-weight);font-size:var(--md-sys-typescale-headline-medium-font-size);letter-spacing:var(--md-sys-typescale-headline-medium-tracking);line-height:var(--md-sys-typescale-headline-medium-height);text-transform:var(--md-sys-typescale-headline-medium-text-transform);text-decoration:var(--md-sys-typescale-headline-medium-text-decoration)}.headline-small{font-family:var(--md-sys-typescale-headline-small-font-family-name);font-style:var(--md-sys-typescale-headline-small-font-family-style);font-weight:var(--md-sys-typescale-headline-small-font-weight);font-size:var(--md-sys-typescale-headline-small-font-size);letter-spacing:var(--md-sys-typescale-headline-small-tracking);line-height:var(--md-sys-typescale-headline-small-height);text-transform:var(--md-sys-typescale-headline-small-text-transform);text-decoration:var(--md-sys-typescale-headline-small-text-decoration)}.body-large{font-family:var(--md-sys-typescale-body-large-font-family-name);font-style:var(--md-sys-typescale-body-large-font-family-style);font-weight:var(--md-sys-typescale-body-large-font-weight);font-size:var(--md-sys-typescale-body-large-font-size);letter-spacing:var(--md-sys-typescale-body-large-tracking);line-height:var(--md-sys-typescale-body-large-height);text-transform:var(--md-sys-typescale-body-large-text-transform);text-decoration:var(--md-sys-typescale-body-large-text-decoration)}.body-medium{font-family:var(--md-sys-typescale-body-medium-font-family-name);font-style:var(--md-sys-typescale-body-medium-font-family-style);font-weight:var(--md-sys-typescale-body-medium-font-weight);font-size:var(--md-sys-typescale-body-medium-font-size);letter-spacing:var(--md-sys-typescale-body-medium-tracking);line-height:var(--md-sys-typescale-body-medium-height);text-transform:var(--md-sys-typescale-body-medium-text-transform);text-decoration:var(--md-sys-typescale-body-medium-text-decoration)}.body-small{font-family:var(--md-sys-typescale-body-small-font-family-name);font-style:var(--md-sys-typescale-body-small-font-family-style);font-weight:var(--md-sys-typescale-body-small-font-weight);font-size:var(--md-sys-typescale-body-small-font-size);letter-spacing:var(--md-sys-typescale-body-small-tracking);line-height:var(--md-sys-typescale-body-small-height);text-transform:var(--md-sys-typescale-body-small-text-transform);text-decoration:var(--md-sys-typescale-body-small-text-decoration)}.label-large{font-family:var(--md-sys-typescale-label-large-font-family-name);font-style:var(--md-sys-typescale-label-large-font-family-style);font-weight:var(--md-sys-typescale-label-large-font-weight);font-size:var(--md-sys-typescale-label-large-font-size);letter-spacing:var(--md-sys-typescale-label-large-tracking);line-height:var(--md-sys-typescale-label-large-height);text-transform:var(--md-sys-typescale-label-large-text-transform);text-decoration:var(--md-sys-typescale-label-large-text-decoration)}.label-medium{font-family:var(--md-sys-typescale-label-medium-font-family-name);font-style:var(--md-sys-typescale-label-medium-font-family-style);font-weight:var(--md-sys-typescale-label-medium-font-weight);font-size:var(--md-sys-typescale-label-medium-font-size);letter-spacing:var(--md-sys-typescale-label-medium-tracking);line-height:var(--md-sys-typescale-label-medium-height);text-transform:var(--md-sys-typescale-label-medium-text-transform);text-decoration:var(--md-sys-typescale-label-medium-text-decoration)}.label-small{font-family:var(--md-sys-typescale-label-small-font-family-name);font-style:var(--md-sys-typescale-label-small-font-family-style);font-weight:var(--md-sys-typescale-label-small-font-weight);font-size:var(--md-sys-typescale-label-small-font-size);letter-spacing:var(--md-sys-typescale-label-small-tracking);line-height:var(--md-sys-typescale-label-small-height);text-transform:var(--md-sys-typescale-label-small-text-transform);text-decoration:var(--md-sys-typescale-label-small-text-decoration)}.title-large{font-family:var(--md-sys-typescale-title-large-font-family-name);font-style:var(--md-sys-typescale-title-large-font-family-style);font-weight:var(--md-sys-typescale-title-large-font-weight);font-size:var(--md-sys-typescale-title-large-font-size);letter-spacing:var(--md-sys-typescale-title-large-tracking);line-height:var(--md-sys-typescale-title-large-height);text-transform:var(--md-sys-typescale-title-large-text-transform);text-decoration:var(--md-sys-typescale-title-large-text-decoration)}.title-medium{font-family:var(--md-sys-typescale-title-medium-font-family-name);font-style:var(--md-sys-typescale-title-medium-font-family-style);font-weight:var(--md-sys-typescale-title-medium-font-weight);font-size:var(--md-sys-typescale-title-medium-font-size);letter-spacing:var(--md-sys-typescale-title-medium-tracking);line-height:var(--md-sys-typescale-title-medium-height);text-transform:var(--md-sys-typescale-title-medium-text-transform);text-decoration:var(--md-sys-typescale-title-medium-text-decoration)}.title-small{font-family:var(--md-sys-typescale-title-small-font-family-name);font-style:var(--md-sys-typescale-title-small-font-family-style);font-weight:var(--md-sys-typescale-title-small-font-weight);font-size:var(--md-sys-typescale-title-small-font-size);letter-spacing:var(--md-sys-typescale-title-small-tracking);line-height:var(--md-sys-typescale-title-small-height);text-transform:var(--md-sys-typescale-title-small-text-transform);text-decoration:var(--md-sys-typescale-title-small-text-decoration)}.materialize-red{background-color:#e51c23 !important}.materialize-red-text{color:#e51c23 !important}.materialize-red.lighten-5{background-color:#fdeaeb !important}.materialize-red-text.text-lighten-5{color:#fdeaeb !important}.materialize-red.lighten-4{background-color:#f8c1c3 !important}.materialize-red-text.text-lighten-4{color:#f8c1c3 !important}.materialize-red.lighten-3{background-color:#f3989b !important}.materialize-red-text.text-lighten-3{color:#f3989b !important}.materialize-red.lighten-2{background-color:#ee6e73 !important}.materialize-red-text.text-lighten-2{color:#ee6e73 !important}.materialize-red.lighten-1{background-color:#ea454b !important}.materialize-red-text.text-lighten-1{color:#ea454b !important}.materialize-red.darken-1{background-color:#d0181e !important}.materialize-red-text.text-darken-1{color:#d0181e !important}.materialize-red.darken-2{background-color:#b9151b !important}.materialize-red-text.text-darken-2{color:#b9151b !important}.materialize-red.darken-3{background-color:#a21318 !important}.materialize-red-text.text-darken-3{color:#a21318 !important}.materialize-red.darken-4{background-color:#8b1014 !important}.materialize-red-text.text-darken-4{color:#8b1014 !important}.red{background-color:#f44336 !important}.red-text{color:#f44336 !important}.red.lighten-5{background-color:#ffebee !important}.red-text.text-lighten-5{color:#ffebee !important}.red.lighten-4{background-color:#ffcdd2 !important}.red-text.text-lighten-4{color:#ffcdd2 !important}.red.lighten-3{background-color:#ef9a9a !important}.red-text.text-lighten-3{color:#ef9a9a !important}.red.lighten-2{background-color:#e57373 !important}.red-text.text-lighten-2{color:#e57373 !important}.red.lighten-1{background-color:#ef5350 !important}.red-text.text-lighten-1{color:#ef5350 !important}.red.darken-1{background-color:#e53935 !important}.red-text.text-darken-1{color:#e53935 !important}.red.darken-2{background-color:#d32f2f !important}.red-text.text-darken-2{color:#d32f2f !important}.red.darken-3{background-color:#c62828 !important}.red-text.text-darken-3{color:#c62828 !important}.red.darken-4{background-color:#b71c1c !important}.red-text.text-darken-4{color:#b71c1c !important}.red.accent-1{background-color:#ff8a80 !important}.red-text.text-accent-1{color:#ff8a80 !important}.red.accent-2{background-color:#ff5252 !important}.red-text.text-accent-2{color:#ff5252 !important}.red.accent-3{background-color:#ff1744 !important}.red-text.text-accent-3{color:#ff1744 !important}.red.accent-4{background-color:#d50000 !important}.red-text.text-accent-4{color:#d50000 !important}.pink{background-color:#e91e63 !important}.pink-text{color:#e91e63 !important}.pink.lighten-5{background-color:#fce4ec !important}.pink-text.text-lighten-5{color:#fce4ec !important}.pink.lighten-4{background-color:#f8bbd0 !important}.pink-text.text-lighten-4{color:#f8bbd0 !important}.pink.lighten-3{background-color:#f48fb1 !important}.pink-text.text-lighten-3{color:#f48fb1 !important}.pink.lighten-2{background-color:#f06292 !important}.pink-text.text-lighten-2{color:#f06292 !important}.pink.lighten-1{background-color:#ec407a !important}.pink-text.text-lighten-1{color:#ec407a !important}.pink.darken-1{background-color:#d81b60 !important}.pink-text.text-darken-1{color:#d81b60 !important}.pink.darken-2{background-color:#c2185b !important}.pink-text.text-darken-2{color:#c2185b !important}.pink.darken-3{background-color:#ad1457 !important}.pink-text.text-darken-3{color:#ad1457 !important}.pink.darken-4{background-color:#880e4f !important}.pink-text.text-darken-4{color:#880e4f !important}.pink.accent-1{background-color:#ff80ab !important}.pink-text.text-accent-1{color:#ff80ab !important}.pink.accent-2{background-color:#ff4081 !important}.pink-text.text-accent-2{color:#ff4081 !important}.pink.accent-3{background-color:#f50057 !important}.pink-text.text-accent-3{color:#f50057 !important}.pink.accent-4{background-color:#c51162 !important}.pink-text.text-accent-4{color:#c51162 !important}.purple{background-color:#9c27b0 !important}.purple-text{color:#9c27b0 !important}.purple.lighten-5{background-color:#f3e5f5 !important}.purple-text.text-lighten-5{color:#f3e5f5 !important}.purple.lighten-4{background-color:#e1bee7 !important}.purple-text.text-lighten-4{color:#e1bee7 !important}.purple.lighten-3{background-color:#ce93d8 !important}.purple-text.text-lighten-3{color:#ce93d8 !important}.purple.lighten-2{background-color:#ba68c8 !important}.purple-text.text-lighten-2{color:#ba68c8 !important}.purple.lighten-1{background-color:#ab47bc !important}.purple-text.text-lighten-1{color:#ab47bc !important}.purple.darken-1{background-color:#8e24aa !important}.purple-text.text-darken-1{color:#8e24aa !important}.purple.darken-2{background-color:#7b1fa2 !important}.purple-text.text-darken-2{color:#7b1fa2 !important}.purple.darken-3{background-color:#6a1b9a !important}.purple-text.text-darken-3{color:#6a1b9a !important}.purple.darken-4{background-color:#4a148c !important}.purple-text.text-darken-4{color:#4a148c !important}.purple.accent-1{background-color:#ea80fc !important}.purple-text.text-accent-1{color:#ea80fc !important}.purple.accent-2{background-color:#e040fb !important}.purple-text.text-accent-2{color:#e040fb !important}.purple.accent-3{background-color:#d500f9 !important}.purple-text.text-accent-3{color:#d500f9 !important}.purple.accent-4{background-color:#a0f !important}.purple-text.text-accent-4{color:#a0f !important}.deep-purple{background-color:#673ab7 !important}.deep-purple-text{color:#673ab7 !important}.deep-purple.lighten-5{background-color:#ede7f6 !important}.deep-purple-text.text-lighten-5{color:#ede7f6 !important}.deep-purple.lighten-4{background-color:#d1c4e9 !important}.deep-purple-text.text-lighten-4{color:#d1c4e9 !important}.deep-purple.lighten-3{background-color:#b39ddb !important}.deep-purple-text.text-lighten-3{color:#b39ddb !important}.deep-purple.lighten-2{background-color:#9575cd !important}.deep-purple-text.text-lighten-2{color:#9575cd !important}.deep-purple.lighten-1{background-color:#7e57c2 !important}.deep-purple-text.text-lighten-1{color:#7e57c2 !important}.deep-purple.darken-1{background-color:#5e35b1 !important}.deep-purple-text.text-darken-1{color:#5e35b1 !important}.deep-purple.darken-2{background-color:#512da8 !important}.deep-purple-text.text-darken-2{color:#512da8 !important}.deep-purple.darken-3{background-color:#4527a0 !important}.deep-purple-text.text-darken-3{color:#4527a0 !important}.deep-purple.darken-4{background-color:#311b92 !important}.deep-purple-text.text-darken-4{color:#311b92 !important}.deep-purple.accent-1{background-color:#b388ff !important}.deep-purple-text.text-accent-1{color:#b388ff !important}.deep-purple.accent-2{background-color:#7c4dff !important}.deep-purple-text.text-accent-2{color:#7c4dff !important}.deep-purple.accent-3{background-color:#651fff !important}.deep-purple-text.text-accent-3{color:#651fff !important}.deep-purple.accent-4{background-color:#6200ea !important}.deep-purple-text.text-accent-4{color:#6200ea !important}.indigo{background-color:#3f51b5 !important}.indigo-text{color:#3f51b5 !important}.indigo.lighten-5{background-color:#e8eaf6 !important}.indigo-text.text-lighten-5{color:#e8eaf6 !important}.indigo.lighten-4{background-color:#c5cae9 !important}.indigo-text.text-lighten-4{color:#c5cae9 !important}.indigo.lighten-3{background-color:#9fa8da !important}.indigo-text.text-lighten-3{color:#9fa8da !important}.indigo.lighten-2{background-color:#7986cb !important}.indigo-text.text-lighten-2{color:#7986cb !important}.indigo.lighten-1{background-color:#5c6bc0 !important}.indigo-text.text-lighten-1{color:#5c6bc0 !important}.indigo.darken-1{background-color:#3949ab !important}.indigo-text.text-darken-1{color:#3949ab !important}.indigo.darken-2{background-color:#303f9f !important}.indigo-text.text-darken-2{color:#303f9f !important}.indigo.darken-3{background-color:#283593 !important}.indigo-text.text-darken-3{color:#283593 !important}.indigo.darken-4{background-color:#1a237e !important}.indigo-text.text-darken-4{color:#1a237e !important}.indigo.accent-1{background-color:#8c9eff !important}.indigo-text.text-accent-1{color:#8c9eff !important}.indigo.accent-2{background-color:#536dfe !important}.indigo-text.text-accent-2{color:#536dfe !important}.indigo.accent-3{background-color:#3d5afe !important}.indigo-text.text-accent-3{color:#3d5afe !important}.indigo.accent-4{background-color:#304ffe !important}.indigo-text.text-accent-4{color:#304ffe !important}.blue{background-color:#2196f3 !important}.blue-text{color:#2196f3 !important}.blue.lighten-5{background-color:#e3f2fd !important}.blue-text.text-lighten-5{color:#e3f2fd !important}.blue.lighten-4{background-color:#bbdefb !important}.blue-text.text-lighten-4{color:#bbdefb !important}.blue.lighten-3{background-color:#90caf9 !important}.blue-text.text-lighten-3{color:#90caf9 !important}.blue.lighten-2{background-color:#64b5f6 !important}.blue-text.text-lighten-2{color:#64b5f6 !important}.blue.lighten-1{background-color:#42a5f5 !important}.blue-text.text-lighten-1{color:#42a5f5 !important}.blue.darken-1{background-color:#1e88e5 !important}.blue-text.text-darken-1{color:#1e88e5 !important}.blue.darken-2{background-color:#1976d2 !important}.blue-text.text-darken-2{color:#1976d2 !important}.blue.darken-3{background-color:#1565c0 !important}.blue-text.text-darken-3{color:#1565c0 !important}.blue.darken-4{background-color:#0d47a1 !important}.blue-text.text-darken-4{color:#0d47a1 !important}.blue.accent-1{background-color:#82b1ff !important}.blue-text.text-accent-1{color:#82b1ff !important}.blue.accent-2{background-color:#448aff !important}.blue-text.text-accent-2{color:#448aff !important}.blue.accent-3{background-color:#2979ff !important}.blue-text.text-accent-3{color:#2979ff !important}.blue.accent-4{background-color:#2962ff !important}.blue-text.text-accent-4{color:#2962ff !important}.light-blue{background-color:#03a9f4 !important}.light-blue-text{color:#03a9f4 !important}.light-blue.lighten-5{background-color:#e1f5fe !important}.light-blue-text.text-lighten-5{color:#e1f5fe !important}.light-blue.lighten-4{background-color:#b3e5fc !important}.light-blue-text.text-lighten-4{color:#b3e5fc !important}.light-blue.lighten-3{background-color:#81d4fa !important}.light-blue-text.text-lighten-3{color:#81d4fa !important}.light-blue.lighten-2{background-color:#4fc3f7 !important}.light-blue-text.text-lighten-2{color:#4fc3f7 !important}.light-blue.lighten-1{background-color:#29b6f6 !important}.light-blue-text.text-lighten-1{color:#29b6f6 !important}.light-blue.darken-1{background-color:#039be5 !important}.light-blue-text.text-darken-1{color:#039be5 !important}.light-blue.darken-2{background-color:#0288d1 !important}.light-blue-text.text-darken-2{color:#0288d1 !important}.light-blue.darken-3{background-color:#0277bd !important}.light-blue-text.text-darken-3{color:#0277bd !important}.light-blue.darken-4{background-color:#01579b !important}.light-blue-text.text-darken-4{color:#01579b !important}.light-blue.accent-1{background-color:#80d8ff !important}.light-blue-text.text-accent-1{color:#80d8ff !important}.light-blue.accent-2{background-color:#40c4ff !important}.light-blue-text.text-accent-2{color:#40c4ff !important}.light-blue.accent-3{background-color:#00b0ff !important}.light-blue-text.text-accent-3{color:#00b0ff !important}.light-blue.accent-4{background-color:#0091ea !important}.light-blue-text.text-accent-4{color:#0091ea !important}.cyan{background-color:#00bcd4 !important}.cyan-text{color:#00bcd4 !important}.cyan.lighten-5{background-color:#e0f7fa !important}.cyan-text.text-lighten-5{color:#e0f7fa !important}.cyan.lighten-4{background-color:#b2ebf2 !important}.cyan-text.text-lighten-4{color:#b2ebf2 !important}.cyan.lighten-3{background-color:#80deea !important}.cyan-text.text-lighten-3{color:#80deea !important}.cyan.lighten-2{background-color:#4dd0e1 !important}.cyan-text.text-lighten-2{color:#4dd0e1 !important}.cyan.lighten-1{background-color:#26c6da !important}.cyan-text.text-lighten-1{color:#26c6da !important}.cyan.darken-1{background-color:#00acc1 !important}.cyan-text.text-darken-1{color:#00acc1 !important}.cyan.darken-2{background-color:#0097a7 !important}.cyan-text.text-darken-2{color:#0097a7 !important}.cyan.darken-3{background-color:#00838f !important}.cyan-text.text-darken-3{color:#00838f !important}.cyan.darken-4{background-color:#006064 !important}.cyan-text.text-darken-4{color:#006064 !important}.cyan.accent-1{background-color:#84ffff !important}.cyan-text.text-accent-1{color:#84ffff !important}.cyan.accent-2{background-color:#18ffff !important}.cyan-text.text-accent-2{color:#18ffff !important}.cyan.accent-3{background-color:#00e5ff !important}.cyan-text.text-accent-3{color:#00e5ff !important}.cyan.accent-4{background-color:#00b8d4 !important}.cyan-text.text-accent-4{color:#00b8d4 !important}.teal{background-color:#009688 !important}.teal-text{color:#009688 !important}.teal.lighten-5{background-color:#e0f2f1 !important}.teal-text.text-lighten-5{color:#e0f2f1 !important}.teal.lighten-4{background-color:#b2dfdb !important}.teal-text.text-lighten-4{color:#b2dfdb !important}.teal.lighten-3{background-color:#80cbc4 !important}.teal-text.text-lighten-3{color:#80cbc4 !important}.teal.lighten-2{background-color:#4db6ac !important}.teal-text.text-lighten-2{color:#4db6ac !important}.teal.lighten-1{background-color:#26a69a !important}.teal-text.text-lighten-1{color:#26a69a !important}.teal.darken-1{background-color:#00897b !important}.teal-text.text-darken-1{color:#00897b !important}.teal.darken-2{background-color:#00796b !important}.teal-text.text-darken-2{color:#00796b !important}.teal.darken-3{background-color:#00695c !important}.teal-text.text-darken-3{color:#00695c !important}.teal.darken-4{background-color:#004d40 !important}.teal-text.text-darken-4{color:#004d40 !important}.teal.accent-1{background-color:#a7ffeb !important}.teal-text.text-accent-1{color:#a7ffeb !important}.teal.accent-2{background-color:#64ffda !important}.teal-text.text-accent-2{color:#64ffda !important}.teal.accent-3{background-color:#1de9b6 !important}.teal-text.text-accent-3{color:#1de9b6 !important}.teal.accent-4{background-color:#00bfa5 !important}.teal-text.text-accent-4{color:#00bfa5 !important}.green{background-color:#4caf50 !important}.green-text{color:#4caf50 !important}.green.lighten-5{background-color:#e8f5e9 !important}.green-text.text-lighten-5{color:#e8f5e9 !important}.green.lighten-4{background-color:#c8e6c9 !important}.green-text.text-lighten-4{color:#c8e6c9 !important}.green.lighten-3{background-color:#a5d6a7 !important}.green-text.text-lighten-3{color:#a5d6a7 !important}.green.lighten-2{background-color:#81c784 !important}.green-text.text-lighten-2{color:#81c784 !important}.green.lighten-1{background-color:#66bb6a !important}.green-text.text-lighten-1{color:#66bb6a !important}.green.darken-1{background-color:#43a047 !important}.green-text.text-darken-1{color:#43a047 !important}.green.darken-2{background-color:#388e3c !important}.green-text.text-darken-2{color:#388e3c !important}.green.darken-3{background-color:#2e7d32 !important}.green-text.text-darken-3{color:#2e7d32 !important}.green.darken-4{background-color:#1b5e20 !important}.green-text.text-darken-4{color:#1b5e20 !important}.green.accent-1{background-color:#b9f6ca !important}.green-text.text-accent-1{color:#b9f6ca !important}.green.accent-2{background-color:#69f0ae !important}.green-text.text-accent-2{color:#69f0ae !important}.green.accent-3{background-color:#00e676 !important}.green-text.text-accent-3{color:#00e676 !important}.green.accent-4{background-color:#00c853 !important}.green-text.text-accent-4{color:#00c853 !important}.light-green{background-color:#8bc34a !important}.light-green-text{color:#8bc34a !important}.light-green.lighten-5{background-color:#f1f8e9 !important}.light-green-text.text-lighten-5{color:#f1f8e9 !important}.light-green.lighten-4{background-color:#dcedc8 !important}.light-green-text.text-lighten-4{color:#dcedc8 !important}.light-green.lighten-3{background-color:#c5e1a5 !important}.light-green-text.text-lighten-3{color:#c5e1a5 !important}.light-green.lighten-2{background-color:#aed581 !important}.light-green-text.text-lighten-2{color:#aed581 !important}.light-green.lighten-1{background-color:#9ccc65 !important}.light-green-text.text-lighten-1{color:#9ccc65 !important}.light-green.darken-1{background-color:#7cb342 !important}.light-green-text.text-darken-1{color:#7cb342 !important}.light-green.darken-2{background-color:#689f38 !important}.light-green-text.text-darken-2{color:#689f38 !important}.light-green.darken-3{background-color:#558b2f !important}.light-green-text.text-darken-3{color:#558b2f !important}.light-green.darken-4{background-color:#33691e !important}.light-green-text.text-darken-4{color:#33691e !important}.light-green.accent-1{background-color:#ccff90 !important}.light-green-text.text-accent-1{color:#ccff90 !important}.light-green.accent-2{background-color:#b2ff59 !important}.light-green-text.text-accent-2{color:#b2ff59 !important}.light-green.accent-3{background-color:#76ff03 !important}.light-green-text.text-accent-3{color:#76ff03 !important}.light-green.accent-4{background-color:#64dd17 !important}.light-green-text.text-accent-4{color:#64dd17 !important}.lime{background-color:#cddc39 !important}.lime-text{color:#cddc39 !important}.lime.lighten-5{background-color:#f9fbe7 !important}.lime-text.text-lighten-5{color:#f9fbe7 !important}.lime.lighten-4{background-color:#f0f4c3 !important}.lime-text.text-lighten-4{color:#f0f4c3 !important}.lime.lighten-3{background-color:#e6ee9c !important}.lime-text.text-lighten-3{color:#e6ee9c !important}.lime.lighten-2{background-color:#dce775 !important}.lime-text.text-lighten-2{color:#dce775 !important}.lime.lighten-1{background-color:#d4e157 !important}.lime-text.text-lighten-1{color:#d4e157 !important}.lime.darken-1{background-color:#c0ca33 !important}.lime-text.text-darken-1{color:#c0ca33 !important}.lime.darken-2{background-color:#afb42b !important}.lime-text.text-darken-2{color:#afb42b !important}.lime.darken-3{background-color:#9e9d24 !important}.lime-text.text-darken-3{color:#9e9d24 !important}.lime.darken-4{background-color:#827717 !important}.lime-text.text-darken-4{color:#827717 !important}.lime.accent-1{background-color:#f4ff81 !important}.lime-text.text-accent-1{color:#f4ff81 !important}.lime.accent-2{background-color:#eeff41 !important}.lime-text.text-accent-2{color:#eeff41 !important}.lime.accent-3{background-color:#c6ff00 !important}.lime-text.text-accent-3{color:#c6ff00 !important}.lime.accent-4{background-color:#aeea00 !important}.lime-text.text-accent-4{color:#aeea00 !important}.yellow{background-color:#ffeb3b !important}.yellow-text{color:#ffeb3b !important}.yellow.lighten-5{background-color:#fffde7 !important}.yellow-text.text-lighten-5{color:#fffde7 !important}.yellow.lighten-4{background-color:#fff9c4 !important}.yellow-text.text-lighten-4{color:#fff9c4 !important}.yellow.lighten-3{background-color:#fff59d !important}.yellow-text.text-lighten-3{color:#fff59d !important}.yellow.lighten-2{background-color:#fff176 !important}.yellow-text.text-lighten-2{color:#fff176 !important}.yellow.lighten-1{background-color:#ffee58 !important}.yellow-text.text-lighten-1{color:#ffee58 !important}.yellow.darken-1{background-color:#fdd835 !important}.yellow-text.text-darken-1{color:#fdd835 !important}.yellow.darken-2{background-color:#fbc02d !important}.yellow-text.text-darken-2{color:#fbc02d !important}.yellow.darken-3{background-color:#f9a825 !important}.yellow-text.text-darken-3{color:#f9a825 !important}.yellow.darken-4{background-color:#f57f17 !important}.yellow-text.text-darken-4{color:#f57f17 !important}.yellow.accent-1{background-color:#ffff8d !important}.yellow-text.text-accent-1{color:#ffff8d !important}.yellow.accent-2{background-color:#ff0 !important}.yellow-text.text-accent-2{color:#ff0 !important}.yellow.accent-3{background-color:#ffea00 !important}.yellow-text.text-accent-3{color:#ffea00 !important}.yellow.accent-4{background-color:#ffd600 !important}.yellow-text.text-accent-4{color:#ffd600 !important}.amber{background-color:#ffc107 !important}.amber-text{color:#ffc107 !important}.amber.lighten-5{background-color:#fff8e1 !important}.amber-text.text-lighten-5{color:#fff8e1 !important}.amber.lighten-4{background-color:#ffecb3 !important}.amber-text.text-lighten-4{color:#ffecb3 !important}.amber.lighten-3{background-color:#ffe082 !important}.amber-text.text-lighten-3{color:#ffe082 !important}.amber.lighten-2{background-color:#ffd54f !important}.amber-text.text-lighten-2{color:#ffd54f !important}.amber.lighten-1{background-color:#ffca28 !important}.amber-text.text-lighten-1{color:#ffca28 !important}.amber.darken-1{background-color:#ffb300 !important}.amber-text.text-darken-1{color:#ffb300 !important}.amber.darken-2{background-color:#ffa000 !important}.amber-text.text-darken-2{color:#ffa000 !important}.amber.darken-3{background-color:#ff8f00 !important}.amber-text.text-darken-3{color:#ff8f00 !important}.amber.darken-4{background-color:#ff6f00 !important}.amber-text.text-darken-4{color:#ff6f00 !important}.amber.accent-1{background-color:#ffe57f !important}.amber-text.text-accent-1{color:#ffe57f !important}.amber.accent-2{background-color:#ffd740 !important}.amber-text.text-accent-2{color:#ffd740 !important}.amber.accent-3{background-color:#ffc400 !important}.amber-text.text-accent-3{color:#ffc400 !important}.amber.accent-4{background-color:#ffab00 !important}.amber-text.text-accent-4{color:#ffab00 !important}.orange{background-color:#ff9800 !important}.orange-text{color:#ff9800 !important}.orange.lighten-5{background-color:#fff3e0 !important}.orange-text.text-lighten-5{color:#fff3e0 !important}.orange.lighten-4{background-color:#ffe0b2 !important}.orange-text.text-lighten-4{color:#ffe0b2 !important}.orange.lighten-3{background-color:#ffcc80 !important}.orange-text.text-lighten-3{color:#ffcc80 !important}.orange.lighten-2{background-color:#ffb74d !important}.orange-text.text-lighten-2{color:#ffb74d !important}.orange.lighten-1{background-color:#ffa726 !important}.orange-text.text-lighten-1{color:#ffa726 !important}.orange.darken-1{background-color:#fb8c00 !important}.orange-text.text-darken-1{color:#fb8c00 !important}.orange.darken-2{background-color:#f57c00 !important}.orange-text.text-darken-2{color:#f57c00 !important}.orange.darken-3{background-color:#ef6c00 !important}.orange-text.text-darken-3{color:#ef6c00 !important}.orange.darken-4{background-color:#e65100 !important}.orange-text.text-darken-4{color:#e65100 !important}.orange.accent-1{background-color:#ffd180 !important}.orange-text.text-accent-1{color:#ffd180 !important}.orange.accent-2{background-color:#ffab40 !important}.orange-text.text-accent-2{color:#ffab40 !important}.orange.accent-3{background-color:#ff9100 !important}.orange-text.text-accent-3{color:#ff9100 !important}.orange.accent-4{background-color:#ff6d00 !important}.orange-text.text-accent-4{color:#ff6d00 !important}.deep-orange{background-color:#ff5722 !important}.deep-orange-text{color:#ff5722 !important}.deep-orange.lighten-5{background-color:#fbe9e7 !important}.deep-orange-text.text-lighten-5{color:#fbe9e7 !important}.deep-orange.lighten-4{background-color:#ffccbc !important}.deep-orange-text.text-lighten-4{color:#ffccbc !important}.deep-orange.lighten-3{background-color:#ffab91 !important}.deep-orange-text.text-lighten-3{color:#ffab91 !important}.deep-orange.lighten-2{background-color:#ff8a65 !important}.deep-orange-text.text-lighten-2{color:#ff8a65 !important}.deep-orange.lighten-1{background-color:#ff7043 !important}.deep-orange-text.text-lighten-1{color:#ff7043 !important}.deep-orange.darken-1{background-color:#f4511e !important}.deep-orange-text.text-darken-1{color:#f4511e !important}.deep-orange.darken-2{background-color:#e64a19 !important}.deep-orange-text.text-darken-2{color:#e64a19 !important}.deep-orange.darken-3{background-color:#d84315 !important}.deep-orange-text.text-darken-3{color:#d84315 !important}.deep-orange.darken-4{background-color:#bf360c !important}.deep-orange-text.text-darken-4{color:#bf360c !important}.deep-orange.accent-1{background-color:#ff9e80 !important}.deep-orange-text.text-accent-1{color:#ff9e80 !important}.deep-orange.accent-2{background-color:#ff6e40 !important}.deep-orange-text.text-accent-2{color:#ff6e40 !important}.deep-orange.accent-3{background-color:#ff3d00 !important}.deep-orange-text.text-accent-3{color:#ff3d00 !important}.deep-orange.accent-4{background-color:#dd2c00 !important}.deep-orange-text.text-accent-4{color:#dd2c00 !important}.brown{background-color:#795548 !important}.brown-text{color:#795548 !important}.brown.lighten-5{background-color:#efebe9 !important}.brown-text.text-lighten-5{color:#efebe9 !important}.brown.lighten-4{background-color:#d7ccc8 !important}.brown-text.text-lighten-4{color:#d7ccc8 !important}.brown.lighten-3{background-color:#bcaaa4 !important}.brown-text.text-lighten-3{color:#bcaaa4 !important}.brown.lighten-2{background-color:#a1887f !important}.brown-text.text-lighten-2{color:#a1887f !important}.brown.lighten-1{background-color:#8d6e63 !important}.brown-text.text-lighten-1{color:#8d6e63 !important}.brown.darken-1{background-color:#6d4c41 !important}.brown-text.text-darken-1{color:#6d4c41 !important}.brown.darken-2{background-color:#5d4037 !important}.brown-text.text-darken-2{color:#5d4037 !important}.brown.darken-3{background-color:#4e342e !important}.brown-text.text-darken-3{color:#4e342e !important}.brown.darken-4{background-color:#3e2723 !important}.brown-text.text-darken-4{color:#3e2723 !important}.blue-grey{background-color:#607d8b !important}.blue-grey-text{color:#607d8b !important}.blue-grey.lighten-5{background-color:#eceff1 !important}.blue-grey-text.text-lighten-5{color:#eceff1 !important}.blue-grey.lighten-4{background-color:#cfd8dc !important}.blue-grey-text.text-lighten-4{color:#cfd8dc !important}.blue-grey.lighten-3{background-color:#b0bec5 !important}.blue-grey-text.text-lighten-3{color:#b0bec5 !important}.blue-grey.lighten-2{background-color:#90a4ae !important}.blue-grey-text.text-lighten-2{color:#90a4ae !important}.blue-grey.lighten-1{background-color:#78909c !important}.blue-grey-text.text-lighten-1{color:#78909c !important}.blue-grey.darken-1{background-color:#546e7a !important}.blue-grey-text.text-darken-1{color:#546e7a !important}.blue-grey.darken-2{background-color:#455a64 !important}.blue-grey-text.text-darken-2{color:#455a64 !important}.blue-grey.darken-3{background-color:#37474f !important}.blue-grey-text.text-darken-3{color:#37474f !important}.blue-grey.darken-4{background-color:#263238 !important}.blue-grey-text.text-darken-4{color:#263238 !important}.grey{background-color:#9e9e9e !important}.grey-text{color:#9e9e9e !important}.grey.lighten-5{background-color:#fafafa !important}.grey-text.text-lighten-5{color:#fafafa !important}.grey.lighten-4{background-color:#f5f5f5 !important}.grey-text.text-lighten-4{color:#f5f5f5 !important}.grey.lighten-3{background-color:#eee !important}.grey-text.text-lighten-3{color:#eee !important}.grey.lighten-2{background-color:#e0e0e0 !important}.grey-text.text-lighten-2{color:#e0e0e0 !important}.grey.lighten-1{background-color:#bdbdbd !important}.grey-text.text-lighten-1{color:#bdbdbd !important}.grey.darken-1{background-color:#757575 !important}.grey-text.text-darken-1{color:#757575 !important}.grey.darken-2{background-color:#616161 !important}.grey-text.text-darken-2{color:#616161 !important}.grey.darken-3{background-color:#424242 !important}.grey-text.text-darken-3{color:#424242 !important}.grey.darken-4{background-color:#212121 !important}.grey-text.text-darken-4{color:#212121 !important}.black{background-color:#000 !important}.black-text{color:#000 !important}.white{background-color:#fff !important}.white-text{color:#fff !important}.transparent{background-color:rgba(0,0,0,0) !important}.transparent-text{color:rgba(0,0,0,0) !important}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{background-color:var(--md-sys-color-background);color:var(--md-sys-color-on-background)}button,input,optgroup,select,textarea{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}a{color:#039be5;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.valign-wrapper{display:flex;align-items:center}.clearfix{clear:both}.z-depth-0,.btn:focus.tonal,.btn-small:focus.tonal,.btn-large:focus.tonal,.btn:focus.filled,.btn-small:focus.filled,.btn-large:focus.filled,.btn.disabled,.btn-floating.disabled,.btn-large.disabled,.btn-small.disabled,.btn-flat.disabled,.btn:disabled,.btn-floating:disabled,.btn-large:disabled,.btn-small:disabled,.btn-flat:disabled,.btn[disabled],.btn-floating[disabled],.btn-large[disabled],.btn-small[disabled],.btn-flat[disabled],.btn.text,.text.btn-small,.text.btn-large,.btn-flat{box-shadow:none !important}.z-depth-1,.sidenav,.collapsible,.dropdown-content,.btn-floating,.btn:focus.elevated,.btn-small:focus.elevated,.btn-large:focus.elevated,.btn.tonal:hover,.tonal.btn-small:hover,.tonal.btn-large:hover,.btn.filled:hover,.filled.btn-small:hover,.filled.btn-large:hover,.btn.elevated,.elevated.btn-small,.elevated.btn-large,.card,.card-panel,nav{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2)}.z-depth-1-half,.btn-floating:focus,.btn-floating:hover{box-shadow:0 3px 3px 0 rgba(0,0,0,.14),0 1px 7px 0 rgba(0,0,0,.12),0 3px 1px -1px rgba(0,0,0,.2)}.z-depth-2,.btn.elevated:hover,.elevated.btn-small:hover,.elevated.btn-large:hover{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.3)}.z-depth-3,.toast{box-shadow:0 8px 17px 2px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2)}.z-depth-4{box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -7px rgba(0,0,0,.2)}.z-depth-5,.modal{box-shadow:0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12),0 11px 15px -7px rgba(0,0,0,.2)}.hoverable{transition:box-shadow .25s}.hoverable:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.divider{height:1px;overflow:hidden;background-color:var(--md-sys-color-outline-variant)}blockquote{margin:20px 0;padding-left:1.5rem;border-left:5px solid var(--md-sys-color-primary)}i{line-height:inherit}i.left{float:left;margin-left:-8px}i.right{float:right}i.tiny{font-size:1rem}i.small{font-size:2rem}i.medium{font-size:4rem}i.large{font-size:6rem}html.noscroll{position:fixed;overflow-y:scroll;width:100%}img.responsive-img,video.responsive-video{max-width:100%;height:auto}.pagination li{display:inline-block;border-radius:2px;text-align:center;vertical-align:top;height:30px}.pagination li a{color:var(--md-sys-color-on-surface-variant);display:inline-block;font-size:1.2rem;padding:0 10px;line-height:30px}.pagination li:hover:not(.disabled){background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.pagination li.active a{color:var(--md-sys-color-on-primary)}.pagination li.active,.pagination li.active:hover{background-color:var(--md-sys-color-primary)}.pagination li.disabled a{cursor:default;color:var(--md-sys-color-on-surface)}.pagination li i{font-size:2rem}.pagination li.pages ul li{display:inline-block;float:none}@media only screen and (max-width : 992.99px){.pagination{width:100%}.pagination li.prev,.pagination li.next{width:10%}.pagination li.pages{width:80%;overflow:hidden;white-space:nowrap}}.breadcrumb{display:inline-block;font-size:18px;color:var(--font-on-primary-color-medium)}.breadcrumb i,.breadcrumb [class^=mdi-],.breadcrumb [class*=mdi-],.breadcrumb i.material-icons,.breadcrumb i.material-symbols-outlined,.breadcrumb i.material-symbols-rounded,.breadcrumb i.material-symbols-sharp{display:block;float:left;font-size:24px}.breadcrumb:before{content:"";color:var(--font-on-primary-color-medium);vertical-align:top;display:inline-block;font-family:"Material Symbols Outlined","Material Symbols Rounded","Material Symbols Sharp","Material Icons";font-weight:normal;font-style:normal;font-size:25px;margin:0 10px 0 8px;-webkit-font-smoothing:antialiased;float:left}.breadcrumb:first-child:before{display:none}.breadcrumb:last-child{color:var(--md-sys-color-on-primary)}.parallax-container{position:relative;overflow:hidden;height:500px}.parallax-container .parallax{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1}.parallax-container .parallax img{opacity:0;position:absolute;left:50%;bottom:0;min-width:100%;min-height:100%;transform:translate3d(0, 0, 0);transform:translateX(-50%)}.pin-top,.pin-bottom{position:relative}.pinned{position:fixed !important}ul.staggered-list li{opacity:0}.fade-in{opacity:0;transform-origin:0 50%}@media only screen and (max-width : 600.99px){.hide-on-small-only,.hide-on-small-and-down{display:none !important}}@media only screen and (max-width : 992.99px){.hide-on-med-and-down{display:none !important}}@media only screen and (min-width : 601px){.hide-on-med-and-up{display:none !important}}@media only screen and (min-width: 601px)and (max-width: 992.99px){.hide-on-med-only{display:none !important}}@media only screen and (min-width : 993px){.hide-on-large-only{display:none !important}}@media only screen and (min-width : 1201px){.hide-on-extra-large-only{display:none !important}}@media only screen and (min-width : 1201px){.show-on-extra-large{display:block !important}}@media only screen and (min-width : 993px){.show-on-large{display:block !important}}@media only screen and (min-width: 601px)and (max-width: 992.99px){.show-on-medium{display:block !important}}@media only screen and (max-width : 600.99px){.show-on-small{display:block !important}}@media only screen and (min-width : 601px){.show-on-medium-and-up{display:block !important}}@media only screen and (max-width : 992.99px){.show-on-medium-and-down{display:block !important}}@media only screen and (max-width : 600.99px){.center-on-small-only{text-align:center}}.page-footer{margin-top:5rem;padding-top:3rem;border-top:1px dashed var(--md-sys-color-outline-variant)}.page-footer p{color:var(--md-sys-color-outline-light)}.page-footer a{color:var(--md-sys-color-primary)}.page-footer .footer-copyright,.page-footer .footer-copyright a{overflow:hidden;min-height:50px;display:flex;align-items:center;justify-content:space-between;padding:10px 0px}.page-footer ul{padding-left:0;list-style-type:none}table,th,td{border:none}table{width:100%;display:table;border-collapse:collapse;border-spacing:0}table.striped tr{border-bottom:none}table.striped tbody>tr:nth-child(odd){background-color:rgba(0,0,0,.08)}table.highlight>tbody>tr{transition:background-color .25s ease}table.highlight>tbody>tr:hover{background-color:rgba(0,0,0,.04)}table thead{color:var(--md-sys-color-on-surface-variant)}table.centered thead tr th,table.centered tbody tr td{text-align:center}tr{border-bottom:1px solid var(--md-sys-color-outline-variant)}td,th{padding:15px 5px;display:table-cell;text-align:left;vertical-align:middle;border-radius:0}@media only screen and (max-width : 992.99px){table.responsive-table{width:100%;border-collapse:collapse;border-spacing:0;display:block;position:relative}table.responsive-table td:empty:before{content:" "}table.responsive-table th,table.responsive-table td{margin:0;vertical-align:top}table.responsive-table th{text-align:left}table.responsive-table thead{display:block;float:left}table.responsive-table thead tr{display:block;padding:0 10px 0 0}table.responsive-table thead tr th::before{content:" "}table.responsive-table tbody{display:block;width:auto;position:relative;overflow-x:auto;white-space:nowrap}table.responsive-table tbody tr{display:inline-block;vertical-align:top}table.responsive-table th{display:block;text-align:right}table.responsive-table td{display:block;min-height:1.25em;text-align:left}table.responsive-table tr{border-bottom:none;padding:0 10px}table.responsive-table thead{border:0;border-right:1px solid var(--md-sys-color-outline-variant)}}.video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%}.hide{display:none !important}.left-align{text-align:left}.right-align{text-align:right}.center,.center-align{text-align:center}.left{float:left !important}.right{float:right !important}.no-select,input[type=range],input[type=range]+.thumb{user-select:none}.circle{border-radius:50%}.center-block{display:block;margin-left:auto;margin-right:auto}.truncate{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-padding{padding:0 !important}.m-0{margin:0 !important}.mt-0{margin-top:0 !important}.mr-0{margin-right:0 !important}.mb-0{margin-bottom:0 !important}.ml-0{margin-left:0 !important}.mx-0{margin-left:0 !important;margin-right:0 !important}.my-0{margin-top:0 !important;margin-bottom:0 !important}.m-1{margin:.25rem !important}.mt-1{margin-top:.25rem !important}.mr-1{margin-right:.25rem !important}.mb-1{margin-bottom:.25rem !important}.ml-1{margin-left:.25rem !important}.mx-1{margin-left:.25rem !important;margin-right:.25rem !important}.my-1{margin-top:.25rem !important;margin-bottom:.25rem !important}.m-2{margin:.5rem !important}.mt-2{margin-top:.5rem !important}.mr-2{margin-right:.5rem !important}.mb-2{margin-bottom:.5rem !important}.ml-2{margin-left:.5rem !important}.mx-2{margin-left:.5rem !important;margin-right:.5rem !important}.my-2{margin-top:.5rem !important;margin-bottom:.5rem !important}.m-3{margin:.75rem !important}.mt-3{margin-top:.75rem !important}.mr-3{margin-right:.75rem !important}.mb-3{margin-bottom:.75rem !important}.ml-3{margin-left:.75rem !important}.mx-3{margin-left:.75rem !important;margin-right:.75rem !important}.my-3{margin-top:.75rem !important;margin-bottom:.75rem !important}.m-4{margin:1rem !important}.mt-4{margin-top:1rem !important}.mr-4{margin-right:1rem !important}.mb-4{margin-bottom:1rem !important}.ml-4{margin-left:1rem !important}.mx-4{margin-left:1rem !important;margin-right:1rem !important}.my-4{margin-top:1rem !important;margin-bottom:1rem !important}.m-5{margin:1.5rem !important}.mt-5{margin-top:1.5rem !important}.mr-5{margin-right:1.5rem !important}.mb-5{margin-bottom:1.5rem !important}.ml-5{margin-left:1.5rem !important}.mx-5{margin-left:1.5rem !important;margin-right:1.5rem !important}.my-5{margin-top:1.5rem !important;margin-bottom:1.5rem !important}.m-6{margin:3rem !important}.mt-6{margin-top:3rem !important}.mr-6{margin-right:3rem !important}.mb-6{margin-bottom:3rem !important}.ml-6{margin-left:3rem !important}.mx-6{margin-left:3rem !important;margin-right:3rem !important}.my-6{margin-top:3rem !important;margin-bottom:3rem !important}.m-auto{margin:auto !important}.mt-auto{margin-top:auto !important}.mr-auto{margin-right:auto !important}.mb-auto{margin-bottom:auto !important}.ml-auto{margin-left:auto !important}.mx-auto{margin-left:auto !important;margin-right:auto !important}.my-auto{margin-top:auto !important;margin-bottom:auto !important}.p-0{padding:0 !important}.pt-0{padding-top:0 !important}.pr-0{padding-right:0 !important}.pb-0{padding-bottom:0 !important}.pl-0{padding-left:0 !important}.px-0{padding-left:0 !important;padding-right:0 !important}.py-0{padding-top:0 !important;padding-bottom:0 !important}.p-1{padding:.25rem !important}.pt-1{padding-top:.25rem !important}.pr-1{padding-right:.25rem !important}.pb-1{padding-bottom:.25rem !important}.pl-1{padding-left:.25rem !important}.px-1{padding-left:.25rem !important;padding-right:.25rem !important}.py-1{padding-top:.25rem !important;padding-bottom:.25rem !important}.p-2{padding:.5rem !important}.pt-2{padding-top:.5rem !important}.pr-2{padding-right:.5rem !important}.pb-2{padding-bottom:.5rem !important}.pl-2{padding-left:.5rem !important}.px-2{padding-left:.5rem !important;padding-right:.5rem !important}.py-2{padding-top:.5rem !important;padding-bottom:.5rem !important}.p-3{padding:.75rem !important}.pt-3{padding-top:.75rem !important}.pr-3{padding-right:.75rem !important}.pb-3{padding-bottom:.75rem !important}.pl-3{padding-left:.75rem !important}.px-3{padding-left:.75rem !important;padding-right:.75rem !important}.py-3{padding-top:.75rem !important;padding-bottom:.75rem !important}.p-4{padding:1rem !important}.pt-4{padding-top:1rem !important}.pr-4{padding-right:1rem !important}.pb-4{padding-bottom:1rem !important}.pl-4{padding-left:1rem !important}.px-4{padding-left:1rem !important;padding-right:1rem !important}.py-4{padding-top:1rem !important;padding-bottom:1rem !important}.p-5{padding:1.5rem !important}.pt-5{padding-top:1.5rem !important}.pr-5{padding-right:1.5rem !important}.pb-5{padding-bottom:1.5rem !important}.pl-5{padding-left:1.5rem !important}.px-5{padding-left:1.5rem !important;padding-right:1.5rem !important}.py-5{padding-top:1.5rem !important;padding-bottom:1.5rem !important}.p-6{padding:3rem !important}.pt-6{padding-top:3rem !important}.pr-6{padding-right:3rem !important}.pb-6{padding-bottom:3rem !important}.pl-6{padding-left:3rem !important}.px-6{padding-left:3rem !important;padding-right:3rem !important}.py-6{padding-top:3rem !important;padding-bottom:3rem !important}.p-auto{padding:auto !important}.pt-auto{padding-top:auto !important}.pr-auto{padding-right:auto !important}.pb-auto{padding-bottom:auto !important}.pl-auto{padding-left:auto !important}.px-auto{padding-left:auto !important;padding-right:auto !important}.py-auto{padding-top:auto !important;padding-bottom:auto !important}.collection{padding-left:0;list-style-type:none;margin:.5rem 0 1rem 0;border:1px solid var(--md-sys-color-outline-variant);border-radius:2px;overflow:hidden;position:relative}.collection .collection-item{background-color:rgba(0,0,0,0);line-height:1.5rem;padding:10px 20px;margin:0;border-bottom:1px solid var(--md-sys-color-outline-variant)}.collection .collection-item.avatar{min-height:84px;padding-left:72px;position:relative}.collection .collection-item.avatar:not(.circle-clipper)>.circle,.collection .collection-item.avatar :not(.circle-clipper)>.circle{position:absolute;width:42px;height:42px;overflow:hidden;left:15px;display:inline-block;vertical-align:middle}.collection .collection-item.avatar i.circle{font-size:18px;line-height:42px;color:#fff;background-color:var(--md-sys-color-shadow-light);text-align:center}.collection .collection-item.avatar .title{font-size:16px}.collection .collection-item.avatar p{margin:0}.collection .collection-item.avatar .secondary-content{position:absolute;top:16px;right:16px}.collection .collection-item:last-child{border-bottom:none}.collection .collection-item.active{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.collection .collection-item.active .secondary-content{color:var(--md-sys-color-on-primary)}.collection a.collection-item{display:block;transition:.25s;color:var(--md-sys-color-primary)}.collection a.collection-item:not(.active):hover{background-color:rgba(0,0,0,.04)}.collection.with-header .collection-header{background-color:rgba(0,0,0,0);border-bottom:1px solid var(--md-sys-color-outline-variant);padding:10px 20px}.collection.with-header .collection-item{padding-left:30px}.collection.with-header .collection-item.avatar{padding-left:72px}.secondary-content{float:right;color:var(--md-sys-color-primary)}.collapsible .collection{margin:0;border:none}:root{--bagde-height: 22px}span.badge{min-width:3rem;padding:0 6px;margin-left:14px;text-align:center;font-size:1rem;line-height:var(--bagde-height);height:var(--bagde-height);color:var(--md-sys-color-on-surface-variant);float:right;box-sizing:border-box}span.badge.new{font-weight:300;font-size:.8rem;color:var(--md-sys-color-on-primary);background-color:var(--md-sys-color-primary);border-radius:2px}span.badge.new:after{content:" new"}span.badge[data-badge-caption]::after{content:" " attr(data-badge-caption)}.active span.badge{color:var(--md-sys-color-on-primary)}nav ul a span.badge{display:inline-block;float:none;margin-left:4px;line-height:var(--bagde-height);height:var(--bagde-height);-webkit-font-smoothing:auto}.collection-item span.badge{margin-top:calc(.75rem - var(--bagde-height)*.5)}.collapsible span.badge{margin-left:auto}.collapsible .active span.badge:not(.new){color:var(--md-sys-color-on-surface-variant)}.sidenav span.badge{margin-top:calc(var(--sidenav-line-height)*.5 - 11px)}table span.badge{display:inline-block;float:none;margin-left:auto}.material-icons,.material-symbols-outlined,.material-symbols-rounded,.material-symbols-sharp{text-rendering:optimizeLegibility;font-feature-settings:"liga"}.container{margin:0 auto;max-width:1280px;width:90%}@media only screen and (min-width : 601px){.container{width:85%}}@media only screen and (min-width : 993px){.container{width:70%}}.section{padding:1rem 0}body{--gap-size: 1.5rem}.row{display:grid;grid-template-columns:repeat(12, 1fr);gap:var(--gap-size)}.row .s1{grid-column:auto/span 1}.row .s2{grid-column:auto/span 2}.row .s3{grid-column:auto/span 3}.row .s4{grid-column:auto/span 4}.row .s5{grid-column:auto/span 5}.row .s6{grid-column:auto/span 6}.row .s7{grid-column:auto/span 7}.row .s8{grid-column:auto/span 8}.row .s9{grid-column:auto/span 9}.row .s10{grid-column:auto/span 10}.row .s11{grid-column:auto/span 11}.row .s12{grid-column:auto/span 12}.row .offset-s1{grid-column-start:3}.row .offset-s2{grid-column-start:2}.row .offset-s3{grid-column-start:4}.row .offset-s4{grid-column-start:5}.row .offset-s5{grid-column-start:6}.row .offset-s6{grid-column-start:7}.row .offset-s7{grid-column-start:8}.row .offset-s8{grid-column-start:9}.row .offset-s9{grid-column-start:10}.row .offset-s10{grid-column-start:11}.row .offset-s11{grid-column-start:12}@media only screen and (min-width : 601px){.row .m1{grid-column:auto/span 1}.row .m2{grid-column:auto/span 2}.row .m3{grid-column:auto/span 3}.row .m4{grid-column:auto/span 4}.row .m5{grid-column:auto/span 5}.row .m6{grid-column:auto/span 6}.row .m7{grid-column:auto/span 7}.row .m8{grid-column:auto/span 8}.row .m9{grid-column:auto/span 9}.row .m10{grid-column:auto/span 10}.row .m11{grid-column:auto/span 11}.row .m12{grid-column:auto/span 12}.row .offset-m1{grid-column-start:2}.row .offset-m2{grid-column-start:3}.row .offset-m3{grid-column-start:4}.row .offset-m4{grid-column-start:5}.row .offset-m5{grid-column-start:6}.row .offset-m6{grid-column-start:7}.row .offset-m7{grid-column-start:8}.row .offset-m8{grid-column-start:9}.row .offset-m9{grid-column-start:10}.row .offset-m10{grid-column-start:11}.row .offset-m11{grid-column-start:12}}@media only screen and (min-width : 993px){.row .l1{grid-column:auto/span 1}.row .l2{grid-column:auto/span 2}.row .l3{grid-column:auto/span 3}.row .l4{grid-column:auto/span 4}.row .l5{grid-column:auto/span 5}.row .l6{grid-column:auto/span 6}.row .l7{grid-column:auto/span 7}.row .l8{grid-column:auto/span 8}.row .l9{grid-column:auto/span 9}.row .l10{grid-column:auto/span 10}.row .l11{grid-column:auto/span 11}.row .l12{grid-column:auto/span 12}.row .offset-l1{grid-column-start:2}.row .offset-l2{grid-column-start:3}.row .offset-l3{grid-column-start:4}.row .offset-l4{grid-column-start:5}.row .offset-l5{grid-column-start:6}.row .offset-l6{grid-column-start:7}.row .offset-l7{grid-column-start:8}.row .offset-l8{grid-column-start:9}.row .offset-l9{grid-column-start:10}.row .offset-l10{grid-column-start:11}.row .offset-l11{grid-column-start:12}}@media only screen and (min-width : 1201px){.row .xl1{grid-column:auto/span 1}.row .xl2{grid-column:auto/span 2}.row .xl3{grid-column:auto/span 3}.row .xl4{grid-column:auto/span 4}.row .xl5{grid-column:auto/span 5}.row .xl6{grid-column:auto/span 6}.row .xl7{grid-column:auto/span 7}.row .xl8{grid-column:auto/span 8}.row .xl9{grid-column:auto/span 9}.row .xl10{grid-column:auto/span 10}.row .xl11{grid-column:auto/span 11}.row .xl12{grid-column:auto/span 12}.row .offset-xl1{grid-column-start:2}.row .offset-xl2{grid-column-start:3}.row .offset-xl3{grid-column-start:4}.row .offset-xl4{grid-column-start:5}.row .offset-xl5{grid-column-start:6}.row .offset-xl6{grid-column-start:7}.row .offset-xl7{grid-column-start:8}.row .offset-xl8{grid-column-start:9}.row .offset-xl9{grid-column-start:10}.row .offset-xl10{grid-column-start:11}.row .offset-xl11{grid-column-start:12}}.g-0{gap:0}.g-1{gap:calc(.25*var(--gap-size))}.g-2{gap:calc(.5*var(--gap-size))}.g-3{gap:calc(1*var(--gap-size))}.g-4{gap:calc(1.5*var(--gap-size))}.g-5{gap:calc(3*var(--gap-size))}:root{--navbar-height: 64px;--navbar-height-mobile: 56px}nav{color:var(--md-sys-color-on-primary);background-color:var(--md-sys-color-secondary-container);width:100%;height:var(--navbar-height-mobile);line-height:var(--navbar-height-mobile)}nav.nav-extended{height:auto}nav.nav-extended .nav-wrapper{min-height:var(--navbar-height-mobile);height:auto}nav.nav-extended .nav-content{position:relative;line-height:normal}nav a{color:var(--md-sys-color-on-primary)}nav i,nav [class^=mdi-],nav [class*=mdi-],nav i.material-icons,nav i.material-symbols-outlined,nav i.material-symbols-rounded,nav i.material-symbols-sharp{display:block;font-size:24px;height:var(--navbar-height-mobile);line-height:var(--navbar-height-mobile)}nav .nav-wrapper{position:relative;height:100%}@media only screen and (min-width : 993px){nav a.sidenav-trigger{display:none}}nav .sidenav-trigger{float:left;position:relative;z-index:1;height:var(--navbar-height-mobile);margin:0 18px}nav .sidenav-trigger i{height:var(--navbar-height-mobile);line-height:var(--navbar-height-mobile)}nav .brand-logo{position:absolute;color:var(--md-sys-color-on-primary);display:inline-block;font-size:2.1rem;padding:0}nav .brand-logo.center{left:50%;transform:translateX(-50%)}@media only screen and (max-width : 992.99px){nav .brand-logo{left:50%;transform:translateX(-50%)}nav .brand-logo.left,nav .brand-logo.right{padding:0;transform:none}nav .brand-logo.left{left:.5rem}nav .brand-logo.right{right:.5rem;left:auto}}nav .brand-logo.right{right:.5rem;padding:0}nav .brand-logo i,nav .brand-logo [class^=mdi-],nav .brand-logo [class*=mdi-],nav .brand-logo i.material-icons,nav .brand-logo i.material-symbols-outlined,nav .brand-logo i.material-symbols-rounded,nav .brand-logo i.material-symbols-sharp{float:left;margin-right:15px}nav .nav-title{display:inline-block;font-size:32px;padding:28px 0}nav ul:not(.dropdown-content){list-style-type:none;margin:0}nav ul:not(.dropdown-content)>li{transition:background-color .3s;float:left;padding:0}nav ul:not(.dropdown-content)>li>a{transition:background-color .3s;font-size:1rem;color:var(--md-sys-color-on-primary);display:block;padding:0 15px;cursor:pointer}nav ul:not(.dropdown-content)>li>a.active{background-color:var(--md-ref-palette-primary80)}nav ul:not(.dropdown-content)>li>a:hover:not(.active){background-color:var(--md-ref-palette-primary70)}nav ul:not(.dropdown-content)>li>a.btn,nav ul:not(.dropdown-content)>li>a.btn-small,nav ul:not(.dropdown-content)>li>a.btn-large,nav ul:not(.dropdown-content)>li>a.btn-flat,nav ul:not(.dropdown-content)>li>a.btn-floating{margin-top:-2px;margin-left:15px;margin-right:15px;display:inline-block}nav ul:not(.dropdown-content)>li>a.btn>.material-icons,nav ul:not(.dropdown-content)>li>a.btn-small>.material-icons,nav ul:not(.dropdown-content)>li>a.btn>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn-small>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn-small>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn>.material-symbols-sharp,nav ul:not(.dropdown-content)>li>a.btn-small>.material-symbols-sharp,nav ul:not(.dropdown-content)>li>a.btn-large>.material-icons,nav ul:not(.dropdown-content)>li>a.btn-large>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn-large>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn-large>.material-symbols-sharp,nav ul:not(.dropdown-content)>li>a.btn-flat>.material-icons,nav ul:not(.dropdown-content)>li>a.btn-flat>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn-flat>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn-flat>.material-symbols-sharp,nav ul:not(.dropdown-content)>li>a.btn-floating>.material-icons,nav ul:not(.dropdown-content)>li>a.btn-floating>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn-floating>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn-floating>.material-symbols-sharp{height:inherit;line-height:inherit}nav ul:not(.dropdown-content).left{float:left}nav form{height:100%}nav .input-field{margin:0;height:100%}nav .input-field input[type=search]{height:100%;font-size:1.2rem;border:none;padding-left:2rem;color:var(--md-sys-color-on-primary)}nav .input-field input[type=search]:focus,nav .input-field input[type=search][type=text]:valid,nav .input-field input[type=search][type=password]:valid,nav .input-field input[type=search][type=email]:valid,nav .input-field input[type=search][type=url]:valid,nav .input-field input[type=search][type=date]:valid{border:none;box-shadow:none}nav .input-field label{top:0;left:0}nav .input-field label i{color:var(--font-on-primary-color-medium);transition:color .3s}nav .input-field label.active i{color:var(--md-sys-color-on-primary)}.navbar-fixed{position:relative;height:var(--navbar-height-mobile);z-index:997}.navbar-fixed nav{position:fixed;right:0}@media only screen and (min-width : 601px){nav.nav-extended .nav-wrapper{min-height:var(--navbar-height-mobile)}nav,nav .nav-wrapper i,nav a.sidenav-trigger,nav a.sidenav-trigger i{height:var(--navbar-height);line-height:var(--navbar-height)}.navbar-fixed{height:var(--navbar-height)}}a{text-decoration:none}html{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-weight:normal;color:var(--md-sys-color-on-background)}@media only screen and (min-width: 0){html{font-size:14px}}@media only screen and (min-width: 993px){html{font-size:14.5px}}@media only screen and (min-width: 1201px){html{font-size:15px}}h1,h2,h3,h4,h5,h6{font-weight:400;line-height:1.3}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}h1{font-size:4.2rem;line-height:110%;margin:2.8rem 0 1.68rem 0}h2{font-size:3.56rem;line-height:110%;margin:2.3733333333rem 0 1.424rem 0}h3{font-size:2.92rem;line-height:110%;margin:1.9466666667rem 0 1.168rem 0}h4{font-size:2.28rem;line-height:110%;margin:1.52rem 0 .912rem 0}h5{font-size:1.64rem;line-height:110%;margin:1.0933333333rem 0 .656rem 0}h6{font-size:1.15rem;line-height:110%;margin:.7666666667rem 0 .46rem 0}em{font-style:italic}strong{font-weight:500}small{font-size:75%}.light{font-weight:300}.thin{font-weight:200}@media only screen and (min-width: 360px){.flow-text{font-size:1.2rem}}@media only screen and (min-width: 390px){.flow-text{font-size:1.224rem}}@media only screen and (min-width: 420px){.flow-text{font-size:1.248rem}}@media only screen and (min-width: 450px){.flow-text{font-size:1.272rem}}@media only screen and (min-width: 480px){.flow-text{font-size:1.296rem}}@media only screen and (min-width: 510px){.flow-text{font-size:1.32rem}}@media only screen and (min-width: 540px){.flow-text{font-size:1.344rem}}@media only screen and (min-width: 570px){.flow-text{font-size:1.368rem}}@media only screen and (min-width: 600px){.flow-text{font-size:1.392rem}}@media only screen and (min-width: 630px){.flow-text{font-size:1.416rem}}@media only screen and (min-width: 660px){.flow-text{font-size:1.44rem}}@media only screen and (min-width: 690px){.flow-text{font-size:1.464rem}}@media only screen and (min-width: 720px){.flow-text{font-size:1.488rem}}@media only screen and (min-width: 750px){.flow-text{font-size:1.512rem}}@media only screen and (min-width: 780px){.flow-text{font-size:1.536rem}}@media only screen and (min-width: 810px){.flow-text{font-size:1.56rem}}@media only screen and (min-width: 840px){.flow-text{font-size:1.584rem}}@media only screen and (min-width: 870px){.flow-text{font-size:1.608rem}}@media only screen and (min-width: 900px){.flow-text{font-size:1.632rem}}@media only screen and (min-width: 930px){.flow-text{font-size:1.656rem}}@media only screen and (min-width: 960px){.flow-text{font-size:1.68rem}}@media only screen and (max-width: 360px){.flow-text{font-size:1.2rem}}.scale-transition{transition:transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important}.scale-transition.scale-out{transform:scale(0);transition:transform .2s !important}.scale-transition.scale-in{transform:scale(1)}.card-panel{transition:box-shadow .25s;padding:24px;margin:.5rem 0 1rem 0;border-radius:12px;background-color:var(--md-sys-color-surface)}.card{overflow:hidden;position:relative;background-color:var(--md-sys-color-surface);transition:box-shadow .25s;border-radius:12px}.card .card-title{font-size:24px;font-weight:300}.card .card-title.activator{cursor:pointer}.card.small,.card.medium,.card.large{position:relative}.card.small .card-image,.card.medium .card-image,.card.large .card-image{max-height:60%;overflow:hidden}.card.small .card-image+.card-content,.card.medium .card-image+.card-content,.card.large .card-image+.card-content{max-height:40%}.card.small .card-content,.card.medium .card-content,.card.large .card-content{max-height:100%;overflow:hidden}.card.small .card-action,.card.medium .card-action,.card.large .card-action{position:absolute;bottom:0;left:0;right:0}.card.small{height:300px}.card.medium{height:400px}.card.large{height:500px}.card.horizontal{display:flex}.card.horizontal.small .card-image,.card.horizontal.medium .card-image,.card.horizontal.large .card-image{height:100%;max-height:none;overflow:visible}.card.horizontal.small .card-image img,.card.horizontal.medium .card-image img,.card.horizontal.large .card-image img{height:100%}.card.horizontal .card-image{max-width:50%}.card.horizontal .card-image img{border-radius:2px 0 0 2px;max-width:100%;width:auto}.card.horizontal .card-stacked{display:flex;flex-direction:column;flex:1;position:relative}.card.horizontal .card-stacked .card-content{flex-grow:1}.card.sticky-action .card-action{z-index:2}.card.sticky-action .card-reveal{z-index:1;padding-bottom:64px}.card .card-image{position:relative}.card .card-image img{display:block;border-radius:2px 2px 0 0;position:relative;left:0;right:0;top:0;bottom:0;width:100%}.card .card-image .card-title{color:var(--md-sys-color-surface);position:absolute;bottom:0;left:0;max-width:100%;padding:24px}.card .card-content{padding:24px;border-radius:0 0 2px 2px}.card .card-content p{margin:0}.card .card-content .card-title{display:block;line-height:32px;margin-bottom:8px}.card .card-content .card-title i{line-height:32px}.card .card-action{border-top:1px solid var(--md-sys-color-outline-variant);position:relative;background-color:inherit}.card .card-action:last-child{border-radius:0 0 2px 2px}.card .card-action a{padding:16px 24px;display:inline-block}.card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating){color:var(--md-sys-color-primary);transition:color .3s ease}.card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating):hover{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.card .card-reveal{padding:24px;position:absolute;background-color:var(--md-sys-color-surface);width:100%;overflow-y:auto;left:0;top:100%;height:100%;z-index:3;display:none}.card .card-reveal .card-title{cursor:pointer;display:block}#toast-container{display:block;position:fixed;z-index:10000}@media only screen and (max-width : 600.99px){#toast-container{min-width:100%;bottom:0%}}@media only screen and (min-width : 601px)and (max-width : 992.99px){#toast-container{left:5%;bottom:7%;max-width:90%}}@media only screen and (min-width : 993px){#toast-container{top:10%;right:7%;max-width:86%}}.toast{border-radius:4px;top:35px;width:auto;margin-top:10px;position:relative;max-width:100%;height:auto;min-height:48px;padding-left:16px;padding-right:12px;font-size:14px;font-weight:500;line-height:20px;color:var(--md-sys-color-inverse-on-surface);background-color:var(--md-sys-color-inverse-surface);display:flex;align-items:center;justify-content:space-between;cursor:default}.toast .toast-action{color:var(--md-sys-color-inverse-primary);font-weight:500;margin-right:-25px;margin-left:3rem}.toast.rounded{border-radius:24px}@media only screen and (max-width : 600.99px){.toast{width:100%;border-radius:0}}.tabs{padding-left:0;list-style-type:none;position:relative;overflow-x:auto;overflow-y:hidden;height:48px;width:100%;background-color:var(--md-sys-color-surface);margin:0 auto;white-space:nowrap}.tabs.tabs-transparent{background-color:rgba(0,0,0,0)}.tabs.tabs-transparent .tab a{color:var(--font-on-primary-color-medium)}.tabs.tabs-transparent .tab.disabled a,.tabs.tabs-transparent .tab.disabled a:hover,.tabs.tabs-transparent .tab.disabled a:focus{color:rgba(255,255,255,.38)}.tabs.tabs-transparent .tab a:hover{background-color:rgba(0,0,0,.04)}.tabs.tabs-transparent .tab a.active,.tabs.tabs-transparent .tab a:focus{background-color:rgba(0,0,0,0)}.tabs.tabs-transparent .tab a:hover,.tabs.tabs-transparent .tab a.active,.tabs.tabs-transparent .tab a:focus{color:var(--md-sys-color-on-primary)}.tabs.tabs-transparent .indicator{background-color:var(--md-sys-color-on-primary)}.tabs.tabs-fixed-width{display:flex}.tabs.tabs-fixed-width .tab{flex-grow:1}.tabs .tab{padding-left:0;list-style-type:none;display:inline-block;text-align:center;line-height:48px;height:48px;padding:0;margin:0}.tabs .tab a{color:var(--md-sys-color-on-surface-variant);display:block;width:100%;height:100%;padding:0 24px;font-size:14px;text-overflow:ellipsis;overflow:hidden;transition:color .28s ease,background-color .28s ease}.tabs .tab a.active{background-color:rgba(0,0,0,0)}.tabs .tab a.active,.tabs .tab a:focus,.tabs .tab a:hover{color:var(--md-sys-color-primary)}.tabs .tab a:hover{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.tabs .tab a:focus,.tabs .tab a.active{background-color:rgba(var(--md-sys-color-primary-numeric), 0.18);outline:none}.tabs .tab.disabled a,.tabs .tab.disabled a:hover{color:var(--md-sys-color-on-surface);cursor:default;background-color:rgba(0,0,0,0)}.tabs .tab.disabled a:not(:focus),.tabs .tab.disabled a:hover:not(:focus){background-color:rgba(0,0,0,0)}.tabs .indicator{position:absolute;bottom:0;height:3px;background-color:var(--md-sys-color-primary);will-change:left,right;border-radius:3px 3px 0 0}@media only screen and (max-width : 992.99px){.tabs{display:flex}.tabs .tab{flex-grow:1}.tabs .tab a{padding:0 12px}}.material-tooltip{padding:0 8px;border-radius:4px;color:var(--md-sys-color-inverse-on-surface);background-color:var(--md-sys-color-inverse-surface);font-family:var(--md-sys-typescale-body-small-font-family-name);font-size:var(--md-sys-typescale-body-small-font-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-font-weight);min-height:24px;opacity:0;padding-top:6px;padding-bottom:6px;font-size:12px;line-height:16px;font-weight:400;letter-spacing:.4px;position:absolute;max-width:300px;overflow:hidden;left:0;top:0;pointer-events:none;display:flex;align-items:center;visibility:hidden;z-index:2000}.backdrop{position:absolute;opacity:0;height:7px;width:14px;border-radius:0 0 50% 50%;background-color:var(--md-sys-color-inverse-surface);z-index:-1;transform-origin:50% 0;visibility:hidden}.btn,.btn-small,.btn-large,.btn-floating,.btn-flat{--btn-height: 40px;--btn-font-size-icon: 16px;--btn-padding: 24px;--btn-padding-icon: 16px;--btn-gap-icon: 8px;--btn-border-radius: 4px;--btn-font-size: 14px;height:var(--btn-height);border:none;border-radius:var(--btn-border-radius);padding-left:var(--btn-padding);padding-right:var(--btn-padding);font-size:ver(--btn-font-size);font-weight:500;text-decoration:none;display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);white-space:nowrap;outline:0;user-select:none;transition:background-color .2s ease-out}.btn.icon-left,.icon-left.btn-small,.icon-left.btn-large,.btn.icon-right,.icon-right.btn-small,.icon-right.btn-large{position:relative}.btn.icon-left,.icon-left.btn-small,.icon-left.btn-large{padding-left:calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon))}.btn.icon-right,.icon-right.btn-small,.icon-right.btn-large{padding-right:calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon))}.btn.icon-left i,.icon-left.btn-small i,.icon-left.btn-large i,.btn.icon-right i,.icon-right.btn-small i,.icon-right.btn-large i{position:absolute;font-size:var(--btn-font-size-icon)}.btn.icon-left i,.icon-left.btn-small i,.icon-left.btn-large i{left:var(--btn-padding-icon)}.btn.icon-right i,.icon-right.btn-small i,.icon-right.btn-large i{right:var(--btn-padding-icon)}.btn.filled,.filled.btn-small,.filled.btn-large{color:var(--md-sys-color-on-primary);background-color:var(--md-sys-color-primary)}.btn.tonal,.tonal.btn-small,.tonal.btn-large{color:var(--md-sys-color-on-secondary-container);background-color:var(--md-sys-color-secondary-container)}.btn.elevated,.elevated.btn-small,.elevated.btn-large{color:var(--md-sys-color-on-secondary-container);background-color:var(--md-sys-color-secondary-container)}.btn.outlined,.outlined.btn-small,.outlined.btn-large{background-color:rgba(0,0,0,0);color:var(--md-sys-color-primary);border:1px solid var(--md-sys-color-outline)}.btn.text,.text.btn-small,.text.btn-large,.btn-flat{color:var(--md-sys-color-primary);background-color:rgba(0,0,0,0)}.btn.disabled,.btn-floating.disabled,.btn-large.disabled,.btn-small.disabled,.btn-flat.disabled,.btn:disabled,.btn-floating:disabled,.btn-large:disabled,.btn-small:disabled,.btn-flat:disabled,.btn[disabled],.btn-floating[disabled],.btn-large[disabled],.btn-small[disabled],.btn-flat[disabled]{color:color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);background-color:color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);pointer-events:none;box-shadow:none;cursor:default}.btn.elevated:hover,.elevated.btn-small:hover,.elevated.btn-large:hover{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%)}.btn.filled:hover,.filled.btn-small:hover,.filled.btn-large:hover{color:var(--md-sys-color-on-primary);background-color:color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%)}.btn.tonal:hover,.tonal.btn-small:hover,.tonal.btn-large:hover{color:var(--md-sys-color-on-secondary-container);background-color:color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%)}.btn.outlined:hover,.outlined.btn-small:hover,.outlined.btn-large:hover{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%)}.btn.text:hover,.text.btn-small:hover,.text.btn-large:hover{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent)}.btn:focus.elevated,.btn-small:focus.elevated,.btn-large:focus.elevated{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%)}.btn:focus.filled,.btn-small:focus.filled,.btn-large:focus.filled{color:var(--md-sys-color-on-primary);background-color:color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%)}.btn:focus.tonal,.btn-small:focus.tonal,.btn-large:focus.tonal{color:var(--md-sys-color-on-secondary-container);background-color:color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%)}.btn:focus.outlined,.btn-small:focus.outlined,.btn-large:focus.outlined{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);border:1px solid var(--md-sys-color-primary)}.btn:focus.text,.btn-small:focus.text,.btn-large:focus.text{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%)}.btn:focus-visible.filled,.btn-small:focus-visible.filled,.btn-large:focus-visible.filled,.btn:focus-visible.elevated,.btn-small:focus-visible.elevated,.btn-large:focus-visible.elevated,.btn:focus-visible.tonal,.btn-small:focus-visible.tonal,.btn-large:focus-visible.tonal,.btn:focus-visible.outlined,.btn-small:focus-visible.outlined,.btn-large:focus-visible.outlined,.btn:focus-visible.text,.btn-small:focus-visible.text,.btn-large:focus-visible.text{outline:3px solid var(--md-sys-color-secondary);outline-offset:2px}.btn-floating{width:40px;height:40px;color:var(--md-sys-color-on-primary-container);background-color:var(--md-sys-color-primary-container);border-radius:16px;padding:0;display:grid;grid-auto-flow:column;align-items:center;position:relative;overflow:hidden;z-index:1;transition:background-color .3s;cursor:pointer;vertical-align:middle}.btn-floating:hover{background-color:color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 16%)}.btn-floating:focus{background-color:var(--md-ref-palette-secondary80)}.btn-floating:before{border-radius:0}.btn-floating.btn-large{width:56px;height:56px;padding:0}.btn-floating.btn-large.halfway-fab{bottom:-28px}.btn-floating.btn-small{--btn-small-height: calc(0.75 * var(--btn-height));width:var(--btn-small-height) e;height:var(--btn-small-height)}.btn-floating.btn-small.halfway-fab{bottom:calc(var(--btn-small-height)*-0.5)}.btn-floating.halfway-fab{position:absolute;right:24px;bottom:-20px}.btn-floating.halfway-fab.left{right:auto;left:24px}.btn-floating i{color:var(--md-sys-color-on-secondary);font-size:1.6rem;width:inherit;display:inline-block;text-align:center}button.btn-floating{border:none}.fixed-action-btn{position:fixed;right:23px;bottom:23px;padding-top:15px;margin-bottom:0;z-index:997}.fixed-action-btn.active ul{visibility:visible;padding-left:0;list-style-type:none}.fixed-action-btn.direction-left,.fixed-action-btn.direction-right{padding:0 0 0 15px}.fixed-action-btn.direction-left ul,.fixed-action-btn.direction-right ul{text-align:right;right:64px;top:50%;transform:translateY(-50%);height:100%;left:auto;width:500px}.fixed-action-btn.direction-left ul li,.fixed-action-btn.direction-right ul li{display:inline-block;margin:7.5px 15px 0 0}.fixed-action-btn.direction-right{padding:0 15px 0 0}.fixed-action-btn.direction-right ul{text-align:left;direction:rtl;left:64px;right:auto}.fixed-action-btn.direction-right ul li{margin:7.5px 0 0 15px}.fixed-action-btn.direction-bottom{padding:0 0 15px 0}.fixed-action-btn.direction-bottom ul{top:64px;bottom:auto;display:flex;flex-direction:column-reverse}.fixed-action-btn.direction-bottom ul li{margin:15px 0 0 0}.fixed-action-btn.toolbar{padding:0;height:56px}.fixed-action-btn.toolbar.active>a i{opacity:0}.fixed-action-btn.toolbar ul{display:flex;top:0;bottom:0;z-index:1}.fixed-action-btn.toolbar ul li{flex:1;display:inline-block;margin:0;height:100%;transition:none}.fixed-action-btn.toolbar ul li a{display:block;overflow:hidden;position:relative;width:100%;height:100%;background-color:rgba(0,0,0,0);box-shadow:none;color:var(--md-sys-color-on-secondary);line-height:56px;z-index:1}.fixed-action-btn.toolbar ul li a i{line-height:inherit}.fixed-action-btn ul{left:0;right:0;text-align:center;position:absolute;bottom:64px;margin:0;visibility:hidden}.fixed-action-btn ul li{margin-bottom:15px}.fixed-action-btn ul a.btn-floating{opacity:0}.fixed-action-btn .fab-backdrop{position:absolute;top:0;left:0;z-index:-1;width:40px;height:40px;background-color:var(--md-sys-color-secondary);border-radius:16px;transform:scale(0)}.btn-large{height:calc(1.5*var(--btn-height));font-size:18px;padding:0 28px}.btn-large i{font-size:1.6rem}.btn-small{height:calc(.75*var(--btn-height));font-size:13px}.btn-small i{font-size:1.2rem}.btn-block{display:block}.btn.rounded,.rounded.btn-large,.rounded.btn-small{border-radius:99999px}[popover]{outline:none;padding:0;border:none}.dropdown-content{padding-left:0;list-style-type:none;background-color:var(--md-sys-color-surface);margin:0;display:none;min-width:100px;overflow-y:auto;opacity:0;position:absolute;left:0;top:0;z-index:9999;transform-origin:0 0;user-select:none}.dropdown-content li{clear:both;color:var(--md-sys-color-on-background);cursor:pointer;min-height:50px;line-height:1.5rem;width:100%;text-align:left}.dropdown-content li.divider{min-height:0;height:1px}.dropdown-content li>a,.dropdown-content li>span{font-size:16px;color:var(--md-sys-color-primary);display:block;line-height:22px;padding:14px 16px}.dropdown-content li>span>label{top:1px;left:0;height:18px}.dropdown-content li>a>i{height:inherit;line-height:inherit;float:left;margin:0 24px 0 0;width:24px}.dropdown-content li:not(.disabled):hover,.dropdown-content li.active{background-color:color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%)}body.keyboard-focused .dropdown-content li:focus{background-color:rgba(0,0,0,.12)}.input-field.col .dropdown-content [type=checkbox]+label{top:1px;left:0;height:18px;transform:none}.dropdown-trigger{cursor:pointer}.modal{--modal-footer-height: 56px;--modal-footer-divider-height: 1px;--modal-border-radius: 28px;--modal-padding: 24px;display:none;position:fixed;left:0;right:0;background-color:var(--md-sys-color-surface);padding:0;max-height:70%;width:55%;margin:auto;overflow-y:auto;border-radius:var(--modal-border-radius);will-change:top,opacity}.modal:focus{outline:none}@media only screen and (max-width : 992.99px){.modal{width:80%}}.modal h1,.modal h2,.modal h3,.modal h4{margin-top:0}.modal .modal-content{padding:var(--modal-padding);overflow-y:hidden}.modal .modal-close{cursor:pointer}.modal .modal-footer{border-radius:0 0 var(--modal-border-radius) var(--modal-border-radius);background-color:var(--md-sys-color-surface);padding:4px 6px;height:var(--modal-footer-height);width:100%;text-align:right}.modal .modal-footer .btn,.modal .modal-footer .btn-large,.modal .modal-footer .btn-small,.modal .modal-footer .btn-flat{margin:6px 0}.modal-overlay{position:fixed;z-index:999;top:-25%;left:0;bottom:0;right:0;height:125%;width:100%;background:#000;display:none;will-change:opacity}.modal.modal-fixed-footer{padding:0;height:70%}.modal.modal-fixed-footer .modal-content{position:absolute;height:calc(100% - var(--modal-footer-height));max-height:100%;width:100%;overflow-y:auto}.modal.modal-fixed-footer .modal-footer{border-top:var(--modal-footer-divider-height) solid var(--md-sys-color-outline-variant);position:absolute;bottom:var(--modal-footer-divider-height)}.modal.bottom-sheet{top:auto;bottom:-100%;margin:0;width:100%;max-height:45%;border-radius:0;will-change:bottom,opacity}.collapsible{padding-left:0;list-style-type:none;border-top:1px solid var(--md-sys-color-outline-variant);border-right:1px solid var(--md-sys-color-outline-variant);border-left:1px solid var(--md-sys-color-outline-variant);margin:.5rem 0 1rem 0}.collapsible-header{display:flex;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);line-height:1.5;padding:1rem;border-bottom:1px solid var(--md-sys-color-outline-variant)}.collapsible-header:focus{outline:0}.collapsible-header i{width:2rem;font-size:1.6rem;display:inline-block;text-align:center;margin-right:1rem}.collapsible-header::after{content:"▾";text-align:right;margin-right:.25rem;width:100%}.active .collapsible-header::after{content:"▴"}.keyboard-focused .collapsible-header:focus{background-color:rgba(0,0,0,.12)}.collapsible-body{max-height:0;border-bottom:1px solid var(--md-sys-color-outline-variant);box-sizing:border-box;padding:0 2rem;overflow:hidden}.collapsible.popout{border:none;box-shadow:none}.collapsible.popout>li{box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);margin:0 24px;transition:margin .35s cubic-bezier(0.25, 0.46, 0.45, 0.94)}.collapsible.popout>li.active{box-shadow:0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);margin:16px 0}.chip{--font-size: 14px;--font-size-icon: 18px;--padding: 8px;color:var(--md-sys-color-on-surface-variant);background-color:rgba(0,0,0,.09);display:inline-flex;white-space:nowrap;gap:8px;margin:0;height:32px;padding-left:var(--padding);padding-right:var(--padding);font-size:var(--font-size);font-weight:500;border-radius:8px;align-items:center;user-select:none;vertical-align:top}.chip:focus{outline:none;background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.chip.outlined{background-color:rgba(0,0,0,0);border-color:var(--md-sys-color-outline);border-width:1px;border-style:solid}.chip>img{margin:0;width:24px;height:24px;object-fit:cover;border-radius:12px}.chip>.material-icons{font-size:var(--font-size-icon)}.chip .close{border-radius:50%;height:24px;width:24px;padding:0;display:grid;justify-content:center;align-content:center;cursor:pointer}.chip .close:hover{background-color:rgba(136,136,136,.5333333333)}.chips{display:flex;gap:4px;flex-wrap:wrap;border:none;border-bottom:1px solid var(--md-sys-color-on-surface-variant);box-shadow:none;margin:0 0 8px 0;padding:4px;outline:none;transition:all .3s}.chips.focus{border-bottom:1px solid var(--md-sys-color-primary);box-shadow:0 1px 0 0 var(--md-sys-color-primary)}.chips:hover{cursor:text}.chips input:not([type]):not(.browser-default).input{background:none;border:0;color:var(--md-sys-color-on-background);display:inline-block;font-size:16px;height:32px;outline:0;margin:0;padding:0;width:120px}.chips input:not([type]):not(.browser-default).input:focus{border:0;box-shadow:none}.chips .autocomplete-content{margin-top:0;margin-bottom:0}.prefix~.chips{margin-left:3rem;width:92%;width:calc(100% - 3rem)}.suffix~.chips{margin-right:3rem;width:92%;width:calc(100% - 3rem)}.chips:empty~label{font-size:.8rem;transform:translateY(-140%)}.materialboxed{display:block;cursor:zoom-in;position:relative;transition:opacity .4s;-webkit-backface-visibility:hidden}.materialboxed:hover:not(.active){opacity:.8}.materialboxed.active{cursor:zoom-out}#materialbox-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--md-sys-color-background);z-index:1000;will-change:opacity}.materialbox-caption{position:fixed;display:none;color:var(--md-sys-color-on-background);line-height:50px;bottom:0;left:0;width:100%;text-align:center;padding:0% 15%;height:50px;z-index:1000;-webkit-font-smoothing:antialiased}select:focus{outline:1px solid var(--md-ref-palette-primary80)}label{font-size:.8rem;color:var(--md-sys-color-on-surface-variant)}::placeholder{color:var(--md-sys-color-on-surface-variant)}input:not([type]):not(.browser-default),input[type=text]:not(.browser-default),input[type=password]:not(.browser-default),input[type=email]:not(.browser-default),input[type=url]:not(.browser-default),input[type=time]:not(.browser-default),input[type=date]:not(.browser-default),input[type=datetime]:not(.browser-default),input[type=datetime-local]:not(.browser-default),input[type=month]:not(.browser-default),input[type=tel]:not(.browser-default),input[type=number]:not(.browser-default),input[type=search]:not(.browser-default),textarea.materialize-textarea{outline:none;color:var(--md-sys-color-on-background);width:100%;font-size:16px;height:56px}.input-field{--input-color: var(--md-sys-color-primary);position:relative;clear:both}.input-field input,.input-field textarea{box-sizing:border-box;padding:0 16px;padding-top:20px;background-color:var(--md-sys-color-surface);border:none;border-radius:4px;border-bottom:1px solid var(--md-sys-color-on-surface-variant);border-bottom-left-radius:0;border-bottom-right-radius:0}.input-field input:focus:not([readonly]),.input-field textarea:focus:not([readonly]){border-bottom:2px solid var(--input-color);padding-top:21px}.input-field input:disabled,.input-field input[readonly=readonly],.input-field textarea:disabled,.input-field textarea[readonly=readonly]{color:rgba(var(--md_sys_color_on-surface), 0.38);border-color:rgba(var(--md_sys_color_on-surface), 0.12);background-color:rgba(var(--md_sys_color_on-surface), 0.04)}.input-field input:focus:not([readonly])+label,.input-field textarea:focus:not([readonly])+label{color:var(--input-color)}.input-field input:focus:not([readonly])+label,.input-field input:not([placeholder=" "])+label,.input-field input:not(:placeholder-shown)+label,.input-field textarea:focus:not([readonly])+label,.input-field textarea:not([placeholder=" "])+label,.input-field textarea:not(:placeholder-shown)+label{transform:scale(0.75);top:8px}.input-field input:disabled+label,.input-field input[readonly=readonly]+label,.input-field textarea:disabled+label,.input-field textarea[readonly=readonly]+label{color:rgba(var(--md_sys_color_on-surface), 0.38)}.input-field input::placeholder{user-select:none}.input-field>label{color:var(--md-sys-color-on-surface-variant);user-select:none;font-size:16px;position:absolute;left:16px;top:16px;cursor:text;transform-origin:top left;transition:left .2s ease-out,top .2s ease-out,transform .2s ease-out}.input-field .supporting-text{color:var(--md-sys-color-on-surface-variant);font-size:12px;padding:0 16px;margin-top:4px}.input-field .character-counter{color:var(--md-sys-color-on-surface-variant);font-size:12px;float:right;padding:0 16px;margin-top:4px}.input-field .prefix{position:absolute;left:12px;top:16px;user-select:none;display:flex;align-self:center}.input-field .suffix{position:absolute;right:12px;top:16px;user-select:none}.input-field .prefix~input,.input-field .prefix~textarea{padding-left:52px}.input-field .suffix~input,.input-field .suffix~textarea{padding-right:52px}.input-field .prefix~label{left:52px}.input-field.outlined input,.input-field.outlined textarea{padding-top:0;background-color:var(--md-sys-color-background);border:1px solid var(--md-sys-color-on-surface-variant);border-radius:4px}.input-field.outlined input:focus:not([readonly]),.input-field.outlined textarea:focus:not([readonly]){border:2px solid var(--input-color);padding-top:0;margin-left:-1px}.input-field.outlined input:focus:not([readonly])+label,.input-field.outlined textarea:focus:not([readonly])+label{color:var(--input-color)}.input-field.outlined input:focus:not([readonly])+label,.input-field.outlined input:not([placeholder=" "])+label,.input-field.outlined input:not(:placeholder-shown)+label,.input-field.outlined textarea:focus:not([readonly])+label,.input-field.outlined textarea:not([placeholder=" "])+label,.input-field.outlined textarea:not(:placeholder-shown)+label{top:-8px;left:16px;margin-left:-4px;padding:0 4px;background-color:var(--md-sys-color-background)}.input-field.outlined input:disabled,.input-field.outlined input[readonly=readonly],.input-field.outlined textarea:disabled,.input-field.outlined textarea[readonly=readonly]{color:rgba(var(--md_sys_color_on-surface), 0.38);border-color:rgba(var(--md_sys_color_on-surface), 0.12)}.input-field.error input,.input-field.error textarea{border-color:var(--md-sys-color-error)}.input-field.error input:focus:not([readonly]),.input-field.error textarea:focus:not([readonly]){border-color:var(--md-sys-color-error)}.input-field.error input:focus:not([readonly])+label,.input-field.error textarea:focus:not([readonly])+label{color:var(--md-sys-color-error)}.input-field.error label{color:var(--md-sys-color-error)}.input-field.error .supporting-text{color:var(--md-sys-color-error)}.input-field.error .suffix{color:var(--md-sys-color-error)}.searchbar .prefix{position:absolute;padding-left:1rem;top:0;user-select:none;display:flex;align-self:center}.searchbar>input{border-width:0;background-color:rgba(0,0,0,0);padding-left:3rem}.searchbar.has-sidebar{margin-left:0}@media only screen and (min-width : 993px){.searchbar.has-sidebar{margin-left:300px}}textarea{width:100%;height:3rem;background-color:rgba(0,0,0,0)}textarea.materialize-textarea{padding-top:26px !important;padding-bottom:4px !important;line-height:normal;overflow-y:hidden;resize:none;min-height:3rem;box-sizing:border-box}.hiddendiv{visibility:hidden;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;padding-top:1.2rem;position:absolute;top:0;z-index:-1}.autocomplete-content li .highlight{color:var(--md-sys-color-on-background)}.autocomplete-content li img{height:40px;width:40px;margin:5px 15px}[type=radio]:not(:checked),[type=radio]:checked{position:absolute;opacity:0;pointer-events:none}[type=radio]:not(:checked)+span,[type=radio]:checked+span{position:relative;padding-left:35px;cursor:pointer;display:inline-block;height:25px;line-height:25px;font-size:1rem;transition:.28s ease;user-select:none}[type=radio]+span:before,[type=radio]+span:after{content:"";position:absolute;left:0;top:0;margin:4px;width:16px;height:16px;z-index:0;transition:.28s ease}[type=radio]:not(:checked)+span:before,[type=radio]:not(:checked)+span:after,[type=radio]:checked+span:before,[type=radio]:checked+span:after,[type=radio].with-gap:checked+span:before,[type=radio].with-gap:checked+span:after{border-radius:50%}[type=radio]:not(:checked)+span:before,[type=radio]:not(:checked)+span:after{border:2px solid var(--md-sys-color-on-surface-variant)}[type=radio]:not(:checked)+span:after{transform:scale(0)}[type=radio]:checked+span:before{border:2px solid rgba(0,0,0,0)}[type=radio]:checked+span:after,[type=radio].with-gap:checked+span:before,[type=radio].with-gap:checked+span:after{border:2px solid var(--md-sys-color-primary)}[type=radio]:checked+span:after,[type=radio].with-gap:checked+span:after{background-color:var(--md-sys-color-primary)}[type=radio]:checked+span:after{transform:scale(1.02)}[type=radio].with-gap:checked+span:after{transform:scale(0.5)}[type=radio].tabbed:focus+span:before{box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18)}[type=radio].with-gap:disabled:checked+span:before{border:2px solid var(--md-sys-color-on-surface)}[type=radio].with-gap:disabled:checked+span:after{border:none;background-color:var(--md-sys-color-on-surface)}[type=radio]:disabled:not(:checked)+span:before,[type=radio]:disabled:checked+span:before{background-color:rgba(0,0,0,0);border-color:var(--md-sys-color-on-surface)}[type=radio]:disabled+span{color:var(--md-sys-color-on-surface)}[type=radio]:disabled:not(:checked)+span:before{border-color:var(--md-sys-color-on-surface)}[type=radio]:disabled:checked+span:after{background-color:var(--md-sys-color-on-surface);border-color:var(--md-sys-color-on-surface)}[type=checkbox]:not(:checked),[type=checkbox]:checked{position:absolute;opacity:0;pointer-events:none}[type=checkbox]+span:not(.lever){position:relative;padding-left:35px;cursor:pointer;display:inline-block;height:25px;line-height:25px;font-size:1rem;user-select:none}[type=checkbox]+span:not(.lever):before,[type=checkbox]:not(.filled-in)+span:not(.lever):after{content:"";position:absolute;top:0;left:0;width:18px;height:18px;z-index:0;border:2px solid var(--md-sys-color-on-surface-variant);border-radius:1px;margin-top:3px;transition:.2s}[type=checkbox]:not(.filled-in)+span:not(.lever):after{border:0;transform:scale(0)}[type=checkbox]:not(:checked):disabled+span:not(.lever):before{border:none;background-color:var(--md-sys-color-on-surface)}[type=checkbox].tabbed:focus+span:not(.lever):after{transform:scale(1);border:0;border-radius:50%;box-shadow:0 0 0 10px rgba(0,0,0,.12);background-color:rgba(0,0,0,.12)}[type=checkbox]:checked+span:not(.lever):before{top:-4px;left:-5px;width:12px;height:22px;border-top:2px solid rgba(0,0,0,0);border-left:2px solid rgba(0,0,0,0);border-right:2px solid var(--md-sys-color-primary);border-bottom:2px solid var(--md-sys-color-primary);transform:rotate(40deg);backface-visibility:hidden;transform-origin:100% 100%}[type=checkbox]:checked:disabled+span:before{border-right:2px solid var(--md-sys-color-on-surface);border-bottom:2px solid var(--md-sys-color-on-surface)}[type=checkbox]:indeterminate+span:not(.lever):before{top:-11px;left:-12px;width:10px;height:22px;border-top:none;border-left:none;border-right:2px solid var(--md-sys-color-primary);border-bottom:none;transform:rotate(90deg);backface-visibility:hidden;transform-origin:100% 100%}[type=checkbox]:indeterminate:disabled+span:not(.lever):before{border-right:2px solid var(--md-sys-color-on-surface);background-color:rgba(0,0,0,0)}[type=checkbox].filled-in+span:not(.lever):after{border-radius:2px}[type=checkbox].filled-in+span:not(.lever):before,[type=checkbox].filled-in+span:not(.lever):after{content:"";left:0;position:absolute;transition:border .25s,background-color .25s,width .2s .1s,height .2s .1s,top .2s .1s,left .2s .1s;z-index:1}[type=checkbox].filled-in:not(:checked)+span:not(.lever):before{width:0;height:0;border:3px solid rgba(0,0,0,0);left:6px;top:10px;transform:rotateZ(37deg);transform-origin:100% 100%}[type=checkbox].filled-in:not(:checked)+span:not(.lever):after{height:20px;width:20px;background-color:rgba(0,0,0,0);border:2px solid var(--md-sys-color-on-surface-variant);top:0px;z-index:0}[type=checkbox].filled-in:checked+span:not(.lever):before{top:0;left:1px;width:8px;height:13px;border-top:2px solid rgba(0,0,0,0);border-left:2px solid rgba(0,0,0,0);border-right:2px solid var(--md-sys-color-on-primary);border-bottom:2px solid var(--md-sys-color-on-primary);transform:rotateZ(37deg);transform-origin:100% 100%}[type=checkbox].filled-in:checked+span:not(.lever):after{top:0;width:20px;height:20px;border:2px solid var(--md-sys-color-primary);background-color:var(--md-sys-color-primary);z-index:0}[type=checkbox].filled-in.tabbed:focus+span:not(.lever):after{border-radius:2px;border-color:var(--md-sys-color-on-surface-variant) r;background-color:rgba(0,0,0,.12)}[type=checkbox].filled-in.tabbed:checked:focus+span:not(.lever):after{border-radius:2px;background-color:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary)}[type=checkbox].filled-in:disabled:not(:checked)+span:not(.lever):before{background-color:rgba(0,0,0,0);border:2px solid rgba(0,0,0,0)}[type=checkbox].filled-in:disabled:not(:checked)+span:not(.lever):after{border-color:rgba(0,0,0,0);background-color:var(--md-sys-color-on-surface)}[type=checkbox].filled-in:disabled:checked+span:not(.lever):before{background-color:rgba(0,0,0,0)}[type=checkbox].filled-in:disabled:checked+span:not(.lever):after{background-color:var(--md-sys-color-on-surface);border-color:var(--md-sys-color-on-surface)}.switch{--track-height: 32px;--track-width: 52px;--border-width: 2px;--size-off: 16px;--size-on: 24px;--icon-size: 16px;--gap-on: calc(((var(--track-height) - var(--size-on)) / 2) - var(--border-width));--gap-off: calc(((var(--track-height) - var(--size-off)) / 2) - var(--border-width))}.switch,.switch *{-webkit-tap-highlight-color:rgba(0,0,0,0);user-select:none}.switch label{cursor:pointer}.switch label input[type=checkbox]{opacity:0;width:0;height:0}.switch label input[type=checkbox]:checked+.lever{background-color:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary)}.switch label input[type=checkbox]:checked+.lever:before,.switch label input[type=checkbox]:checked+.lever:after{top:var(--gap-on);left:calc(var(--track-width) - var(--size-on) - var(--gap-on) - 2*var(--border-width));width:var(--size-on);height:var(--size-on)}.switch label .lever{content:"";display:inline-block;position:relative;width:var(--track-width);height:var(--track-height);border-style:solid;border-width:2px;border-color:var(--md-sys-color-outline);background-color:var(--md-sys-color-surface-variant);border-radius:15px;margin-right:10px;transition:background .3s ease;vertical-align:middle;margin:0 16px}.switch label .lever:before,.switch label .lever:after{content:"";position:absolute;display:inline-block;width:var(--size-off);height:var(--size-off);border-radius:50%;left:var(--gap-off);top:var(--gap-off);transition:left .3s ease,background .3s ease,box-shadow .1s ease,transform .1s ease}.switch label .lever:after{height:var(--size-off);width:var(--size-off)}input[type=checkbox]:not(:disabled)~.lever:active:before,input[type=checkbox]:not(:disabled).tabbed:focus~.lever::before,input[type=checkbox]:not(:disabled)~.lever:hover::before{transform:scale(2.4)}input[type=checkbox]:checked:not(:disabled)~.lever:hover::before{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}input[type=checkbox]:checked:not(:disabled)~.lever:active::before,input[type=checkbox]:checked:not(:disabled).tabbed:focus~.lever::before{background-color:rgba(var(--md-sys-color-primary-numeric), 0.18)}input[type=checkbox]:not(:disabled)~.lever:hover::before{background-color:rgba(0,0,0,.04)}input[type=checkbox]:not(:disabled)~.lever:active:before,input[type=checkbox]:not(:disabled).tabbed:focus~.lever::before{background-color:rgba(0,0,0,.12)}.switch input[type=checkbox][disabled]+.lever{cursor:default;opacity:.5}select.browser-default{opacity:1;color:var(--md-sys-color-on-background)}select{opacity:0;background-color:var(--md-sys-color-surface);width:100%;padding:5px;border:1px solid var(--md-sys-color-outline-variant);border-radius:2px;height:3rem}.select-wrapper{position:relative}.select-wrapper .caret{position:absolute;right:0;top:0;bottom:0;margin:auto 0;z-index:0;fill:var(--md-sys-color-on-background)}.select-wrapper .hide-select{width:0;height:0;overflow:hidden;position:absolute;top:0;z-index:-1}select:disabled{color:var(--md-sys-color-on-surface)}.select-wrapper.disabled+label{color:var(--md-sys-color-on-surface)}.select-wrapper.disabled .caret{fill:var(--md-sys-color-on-surface)}.select-wrapper input.select-dropdown:disabled{color:var(--md-sys-color-on-surface);cursor:default;user-select:none}.select-wrapper i{color:var(--md-sys-color-on-surface)}.select-dropdown li.disabled,.select-dropdown li.disabled>span,.select-dropdown li.optgroup{color:var(--md-sys-color-on-surface)}.select-dropdown li img{height:40px;width:40px;margin:5px 15px;float:right}.select-dropdown li.optgroup{border-top:1px solid rgba(0,0,0,.04)}.select-dropdown li.optgroup.selected>span{color:var(--md-sys-color-on-background)}.select-dropdown li.optgroup>span{color:var(--md-sys-color-on-surface-variant)}.select-dropdown li.optgroup~li.optgroup-option{padding-left:1rem}.file-field{display:grid;grid-template-columns:min-content auto;gap:10px}.file-field .file-path-wrapper{overflow:hidden}.file-field input.file-path{width:100%}.file-field .btn,.file-field .btn-large,.file-field .btn-small{height:3rem;line-height:3rem}.file-field span{cursor:pointer}.file-field input[type=file]{position:absolute;top:0;right:0;left:0;bottom:0;cursor:pointer;width:100%;margin:0;padding:0;opacity:0;font-size:20px;filter:alpha(opacity=0)}.file-field input[type=file]::-webkit-file-upload-button{display:none}.range-field{position:relative}input[type=range],input[type=range]+.thumb{cursor:pointer}input[type=range]{position:relative;background-color:rgba(0,0,0,0);border:none;outline:none;width:100%;margin:15px 0;padding:0}input[type=range]:focus{outline:none}input[type=range]+.thumb{position:absolute;top:10px;left:0;border:none;height:0;width:0;border-radius:50%;background-color:var(--md-sys-color-primary);margin-left:7px;transform-origin:50% 50%;transform:rotate(-45deg)}input[type=range]+.thumb .value{display:block;width:30px;text-align:center;color:var(--md-sys-color-primary);font-size:0;transform:rotate(45deg)}input[type=range]+.thumb.active{border-radius:50% 50% 50% 0}input[type=range]+.thumb.active .value{color:var(--md-sys-color-on-primary);margin-left:-1px;margin-top:8px;font-size:10px}input[type=range]{-webkit-appearance:none}input[type=range]::-webkit-slider-runnable-track{height:3px;border:none}input[type=range]::-webkit-slider-thumb{border:none;height:14px;width:14px;border-radius:50%;background:var(--md-sys-color-primary);transition:box-shadow .3s;-webkit-appearance:none;background-color:var(--md-sys-color-primary);transform-origin:50% 50%;margin:-5px 0 0 0}.keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18)}input[type=range]::-moz-range-track{height:3px;border:none}input[type=range]::-moz-focus-inner{border:0}input[type=range]::-moz-range-thumb{border:none;height:14px;width:14px;border-radius:50%;background:var(--md-sys-color-primary);transition:box-shadow .3s;margin-top:-5px}input[type=range]:-moz-focusring{outline:1px solid #fff;outline-offset:-1px}.keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb{box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18)}input[type=range]::-ms-track{height:3px;background:rgba(0,0,0,0);border-color:rgba(0,0,0,0);border-width:6px 0;color:rgba(0,0,0,0)}input[type=range]::-ms-fill-lower,input[type=range]::-moz-range-progress{background:var(--md-sys-color-primary)}input[type=range]::-ms-fill-upper,input[type=range]::-moz-range-track{background:var(--md-sys-color-shadow-light)}input[type=range]::-ms-thumb{border:none;height:14px;width:14px;border-radius:50%;background:var(--md-sys-color-primary);transition:box-shadow .3s}.keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb{box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18)}.table-of-contents{list-style:none}.table-of-contents.fixed{position:fixed}.table-of-contents li{padding:0}.table-of-contents a{display:inline-block;font-weight:400;color:var(--md-sys-color-secondary);padding-left:16px;height:2rem;line-height:2rem;border-left:1px solid var(--md-sys-color-outline-variant)}.table-of-contents a:hover{color:var(--md-sys-color-on-background);padding-left:15px}.table-of-contents a.active{color:var(--md-sys-color-primary);font-weight:500;padding-left:14px;border-left:2px solid var(--md-sys-color-primary)}.sidenav{--sidenav-width: 300px;--sidenav-font-size: 14px;--sidenav-padding: 16px;--sidenav-item-height: 48px;--sidenav-line-height: var(--sidenav-item-height);position:fixed;width:var(--sidenav-width);left:0;top:0;margin:0;transform:translateX(-100%);height:100vh;padding:0;z-index:999;overflow-y:auto;will-change:transform;backface-visibility:hidden;transform:translateX(-105%);user-select:none;color:var(--md-sys-color-on-secondary-container);background-color:var(--md-sys-color-surface)}.sidenav.right-aligned{right:0;transform:translateX(105%);left:auto;transform:translateX(100%)}.sidenav .collapsible{margin:0}.sidenav a:focus{background-color:rgba(0,0,0,.12)}.sidenav li.active>a:not(.collapsible-header):not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating){background-color:color-mix(in srgb, var(--md-sys-color-secondary) 10%, transparent)}.sidenav .collapsible-body>ul{padding-left:10px}.sidenav li{list-style:none;display:grid;align-content:center}.sidenav li>a{margin:0 12px;padding:0 var(--sidenav-padding);display:flex;height:var(--sidenav-item-height);font-size:var(--sidenav-font-size);font-weight:500;align-items:center;overflow:hidden;border-radius:100px}.sidenav li>a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating){color:var(--md-sys-color-on-secondary-container)}.sidenav li>a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating):hover{background-color:color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)}.sidenav li>a.btn,.sidenav li>a.btn-small,.sidenav li>a.btn-large,.sidenav li>a.btn-flat,.sidenav li>a.btn-floating{margin:10px 15px}.sidenav li>a>.material-icons,.sidenav li>a>.material-symbols-outlined,.sidenav li>a>.material-symbols-rounded,.sidenav li>a>.material-symbols-sharp{display:inline-flex;vertical-align:middle;margin-right:12px}.sidenav .divider{margin:calc(var(--sidenav-padding)*.5) 0 0 0}.sidenav .subheader{cursor:initial;pointer-events:none;color:red;font-size:var(--sidenav-font-size);font-weight:500;line-height:var(--sidenav-line-height)}.sidenav .user-view{position:relative;padding:calc(var(--sidenav-padding)*2) calc(var(--sidenav-padding)*2) 0;margin-bottom:calc(var(--sidenav-padding)*.5)}.sidenav .user-view>a{height:auto;padding:0}.sidenav .user-view>a:hover{background-color:rgba(0,0,0,0)}.sidenav .user-view .background{overflow:hidden;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}.sidenav .user-view .circle,.sidenav .user-view .name,.sidenav .user-view .email{display:block}.sidenav .user-view .circle{height:64px;width:64px}.sidenav .user-view .name,.sidenav .user-view .email{font-size:var(--sidenav-font-size);line-height:calc(var(--sidenav-line-height)*.5)}.sidenav .user-view .name{margin-top:16px;font-weight:500}.sidenav .user-view .email{padding-bottom:16px;font-weight:400}.drag-target{height:100%;position:fixed;top:0;left:0;z-index:998}.drag-target.right-aligned{right:0}.sidenav.sidenav-fixed{left:0;transform:translateX(0);position:fixed}.sidenav.sidenav-fixed.right-aligned{right:0;left:auto}@media only screen and (max-width : 992.99px){.sidenav.sidenav-fixed{transform:translateX(-105%)}.sidenav.sidenav-fixed.right-aligned{transform:translateX(105%)}.sidenav>a{padding:0 var(--sidenav-padding)}.sidenav .user-view{padding:var(--sidenav-padding) var(--sidenav-padding) 0}}.sidenav .collapsible-body{padding:0}.sidenav-overlay{position:fixed;top:0;left:0;right:0;opacity:0;height:120vh;background-color:rgba(0,0,0,.5);z-index:997;display:none}.sidenav .collapsible,.sidenav.sidenav-fixed .collapsible{border:none;box-shadow:none}.sidenav .collapsible-header,.sidenav.sidenav-fixed .collapsible-header{border:none}.sidenav .collapsible-body,.sidenav.sidenav-fixed .collapsible-body{border:none}.progress{position:relative;height:4px;display:block;width:100%;border-radius:4px;margin:.5rem 0 1rem 0;overflow:hidden;background-color:var(--md-sys-color-secondary-container)}.progress .determinate{position:absolute;top:0;left:0;bottom:0;background-color:var(--md-sys-color-primary);transition:width .3s linear}.progress .indeterminate{background-color:var(--md-sys-color-primary)}.progress .indeterminate:before{content:"";position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left,right;animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite}.progress .indeterminate:after{content:"";position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left,right;animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;animation-delay:1.15s}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}.preloader-wrapper{display:inline-block;position:relative;width:50px;height:50px}.preloader-wrapper.small{width:36px;height:36px}.preloader-wrapper.big{width:64px;height:64px}.preloader-wrapper.active{-webkit-animation:container-rotate 1568ms linear infinite;animation:container-rotate 1568ms linear infinite}@-webkit-keyframes container-rotate{to{-webkit-transform:rotate(360deg)}}@keyframes container-rotate{to{transform:rotate(360deg)}}.spinner-layer{position:absolute;width:100%;height:100%;opacity:0;border-color:var(--md-sys-color-primary)}.spinner-blue,.spinner-blue-only{border-color:#4285f4}.spinner-red,.spinner-red-only{border-color:#db4437}.spinner-yellow,.spinner-yellow-only{border-color:#f4b400}.spinner-green,.spinner-green-only{border-color:#0f9d58}.active .spinner-layer.spinner-blue{-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer.spinner-red{-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer.spinner-yellow{-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer.spinner-green{-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer,.active .spinner-layer.spinner-blue-only,.active .spinner-layer.spinner-red-only,.active .spinner-layer.spinner-yellow-only,.active .spinner-layer.spinner-green-only{opacity:1;-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}@-webkit-keyframes fill-unfill-rotate{12.5%{-webkit-transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg)}to{-webkit-transform:rotate(1080deg)}}@keyframes fill-unfill-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@-webkit-keyframes blue-fade-in-out{from{opacity:1}25%{opacity:1}26%{opacity:0}89%{opacity:0}90%{opacity:1}100%{opacity:1}}@keyframes blue-fade-in-out{from{opacity:1}25%{opacity:1}26%{opacity:0}89%{opacity:0}90%{opacity:1}100%{opacity:1}}@-webkit-keyframes red-fade-in-out{from{opacity:0}15%{opacity:0}25%{opacity:1}50%{opacity:1}51%{opacity:0}}@keyframes red-fade-in-out{from{opacity:0}15%{opacity:0}25%{opacity:1}50%{opacity:1}51%{opacity:0}}@-webkit-keyframes yellow-fade-in-out{from{opacity:0}40%{opacity:0}50%{opacity:1}75%{opacity:1}76%{opacity:0}}@keyframes yellow-fade-in-out{from{opacity:0}40%{opacity:0}50%{opacity:1}75%{opacity:1}76%{opacity:0}}@-webkit-keyframes green-fade-in-out{from{opacity:0}65%{opacity:0}75%{opacity:1}90%{opacity:1}100%{opacity:0}}@keyframes green-fade-in-out{from{opacity:0}65%{opacity:0}75%{opacity:1}90%{opacity:1}100%{opacity:0}}.gap-patch{position:absolute;top:0;left:45%;width:10%;height:100%;overflow:hidden;border-color:inherit}.gap-patch .circle{width:1000%;left:-450%}.circle-clipper{display:inline-block;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit}.circle-clipper .circle{width:200%;height:100%;border-width:3px;border-style:solid;border-color:inherit;border-bottom-color:rgba(0,0,0,0) !important;border-radius:50%;-webkit-animation:none;animation:none;position:absolute;top:0;right:0;bottom:0}.circle-clipper.left .circle{left:0;border-right-color:rgba(0,0,0,0) !important;-webkit-transform:rotate(129deg);transform:rotate(129deg)}.circle-clipper.right .circle{left:-100%;border-left-color:rgba(0,0,0,0) !important;-webkit-transform:rotate(-129deg);transform:rotate(-129deg)}.active .circle-clipper.left .circle{-webkit-animation:left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .circle-clipper.right .circle{-webkit-animation:right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}@-webkit-keyframes left-spin{from{-webkit-transform:rotate(130deg)}50%{-webkit-transform:rotate(-5deg)}to{-webkit-transform:rotate(130deg)}}@keyframes left-spin{from{transform:rotate(130deg)}50%{transform:rotate(-5deg)}to{transform:rotate(130deg)}}@-webkit-keyframes right-spin{from{-webkit-transform:rotate(-130deg)}50%{-webkit-transform:rotate(5deg)}to{-webkit-transform:rotate(-130deg)}}@keyframes right-spin{from{transform:rotate(-130deg)}50%{transform:rotate(5deg)}to{transform:rotate(-130deg)}}#spinnerContainer.cooldown{-webkit-animation:container-rotate 1568ms linear infinite,fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);animation:container-rotate 1568ms linear infinite,fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1)}@-webkit-keyframes fade-out{from{opacity:1}to{opacity:0}}@keyframes fade-out{from{opacity:1}to{opacity:0}}.slider{position:relative;height:400px;width:100%}.slider.fullscreen{height:100%;width:100%;position:absolute;top:0;left:0;right:0;bottom:0}.slider.fullscreen ul.slides{padding-left:0;list-style-type:none;height:100%}.slider.fullscreen ul.indicators{padding-left:0;list-style-type:none;z-index:2;bottom:30px}.slider.fullscreen ul.indicators .indicator-item{background-color:rgba(255,255,255,.45)}.slider.fullscreen ul.indicators .indicator-item.active{background-color:var(--md-ref-palette-primary100)}.slider .slides{background-color:var(--md-sys-color-surface);margin:0;height:400px;padding-left:0;list-style-type:none}.slider .slides li{padding-left:0;list-style-type:none;opacity:0;position:absolute;top:0;left:0;z-index:1;width:100%;height:inherit;overflow:hidden}.slider .slides li img{height:100%;width:100%;background-size:cover;background-position:center}.slider .slides li .caption{color:#fff;position:absolute;top:15%;left:15%;width:70%;opacity:0}.slider .slides li .caption p{color:rgba(255,255,255,.75)}.slider .slides li.active{z-index:2}.slider .indicators{padding-left:0;list-style-type:none;position:absolute;text-align:center;left:0;right:0;bottom:0;margin:0}.slider .indicators .indicator-item{display:inline-block;position:relative;height:16px;width:16px;margin:0 12px}.slider .indicators .indicator-item-btn{position:absolute;top:0;left:0;cursor:pointer;background-color:var(--md-sys-color-shadow-light);transition:background-color .3s;border-radius:50%;border-width:0;width:100%;height:100%}.slider .indicators .indicator-item-btn.active{background-color:var(--md-sys-color-primary)}.carousel{--carousel-height: 400px;overflow:hidden;position:relative;width:100%;height:var(--carousel-height);perspective:500px;transform-style:preserve-3d;transform-origin:0% 50%}.carousel.carousel-slider{top:0;left:0}.carousel.carousel-slider .carousel-fixed-item{position:absolute;left:0;right:0;bottom:20px;z-index:1}.carousel.carousel-slider .carousel-fixed-item.with-indicators{bottom:68px}.carousel.carousel-slider .carousel-item{width:100%;height:100%;min-height:var(--carousel-height);position:absolute;top:0;left:0}.carousel.carousel-slider .carousel-item h2{font-size:24px;font-weight:500;line-height:32px}.carousel.carousel-slider .carousel-item p{font-size:15px}.carousel .carousel-item{visibility:hidden;width:calc(var(--carousel-height)*.5);height:calc(var(--carousel-height)*.5);position:absolute;top:0;left:0}.carousel .carousel-item>img{width:100%}.carousel .indicators{padding-left:0;list-style-type:none;position:absolute;text-align:center;left:0;right:0;bottom:0;margin:0}.carousel .indicators .indicator-item{display:inline-block;position:relative;cursor:pointer;height:8px;width:8px;margin:24px 4px;background-color:rgba(255,255,255,.45);transition:background-color .3s;border-radius:50%}.carousel .indicators .indicator-item.active{background-color:var(--md-ref-palette-primary100)}.carousel.scrolling .carousel-item .materialboxed,.carousel .carousel-item:not(.active) .materialboxed{pointer-events:none}.tap-target-wrapper{width:800px;height:800px;position:fixed;z-index:1000;visibility:hidden;transition:visibility 0s .3s}.tap-target-wrapper.open{visibility:visible;transition:visibility 0s}.tap-target-wrapper.open .tap-target{transform:scale(1);opacity:.95;transition:transform .3s cubic-bezier(0.42, 0, 0.58, 1),opacity .3s cubic-bezier(0.42, 0, 0.58, 1)}.tap-target-wrapper.open .tap-target-wave::before{transform:scale(1)}.tap-target-wrapper.open .tap-target-wave::after{visibility:visible;animation:pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;transition:opacity .3s,transform .3s,visibility 0s 1s}.tap-target{position:absolute;font-size:1rem;border-radius:50%;background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);box-shadow:0 20px 20px 0 rgba(0,0,0,.14),0 10px 50px 0 rgba(0,0,0,.12),0 30px 10px -20px rgba(0,0,0,.2);width:100%;height:100%;opacity:0;transform:scale(0);transition:transform .3s cubic-bezier(0.42, 0, 0.58, 1),opacity .3s cubic-bezier(0.42, 0, 0.58, 1)}.tap-target-content{position:relative;display:table-cell}.tap-target-wave{position:absolute;border-radius:50%;z-index:10001}.tap-target-wave::before,.tap-target-wave::after{content:"";display:block;position:absolute;width:100%;height:100%;border-radius:50%;background-color:var(--md-sys-color-surface)}.tap-target-wave::before{transform:scale(0);transition:transform .3s}.tap-target-wave::after{visibility:hidden;transition:opacity .3s,transform .3s,visibility 0s;z-index:-1}.tap-target-origin{top:50%;left:50%;transform:translate(-50%, -50%);z-index:10002;position:absolute !important}.tap-target-origin:not(.btn):not(.btn-large):not(.btn-small),.tap-target-origin:not(.btn):not(.btn-large):not(.btn-small):hover{background:none}@media only screen and (max-width: 600px){.tap-target,.tap-target-wrapper{width:600px;height:600px}}.pulse{overflow:visible;position:relative}.pulse::before{content:"";display:block;position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;background-color:inherit;border-radius:inherit;transition:opacity .3s,transform .3s;animation:pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;z-index:-1}@keyframes pulse-animation{0%{opacity:1;transform:scale(1)}50%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}.datepicker-modal{max-width:325px;min-width:300px;max-height:none}.datepicker-container.modal-content{display:flex;flex-direction:column;padding:0;background-color:var(--md-sys-color-surface)}.datepicker-controls{display:flex;justify-content:space-between;width:280px;margin:0 auto}.datepicker-controls .selects-container{display:flex}.datepicker-controls .select-wrapper input{border-bottom:none;text-align:center;margin:0}.datepicker-controls .select-wrapper input:focus{border-bottom:none}.datepicker-controls .select-wrapper .caret{display:none}.datepicker-controls .select-year input{width:50px}.datepicker-controls .select-month input{width:80px}.datepicker-controls .month-prev,.datepicker-controls .month-next{display:inline-flex;align-items:center}.datepicker-controls .month-prev>svg,.datepicker-controls .month-next>svg{fill:var(--md-sys-color-on-surface-variant)}.month-prev,.month-next{margin-top:4px;cursor:pointer;background-color:rgba(0,0,0,0);border:none}.datepicker-date-display{flex:1 auto;background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);padding:20px 22px;font-weight:500}.datepicker-date-display .year-text{display:block;font-size:1.5rem;line-height:25px;color:var(--md-sys-color-on-primary)}.datepicker-date-display .date-text{display:block;font-size:2.8rem;line-height:47px;font-weight:500}.datepicker-calendar-container{flex:2.5 auto}.datepicker-table{width:280px;font-size:1rem;margin:0 auto}.datepicker-table thead{border-bottom:none}.datepicker-table th{padding:10px 5px;text-align:center}.datepicker-table tr{border:none}.datepicker-table abbr{text-decoration:none;color:var(--md-sys-color-on-surface-variant)}.datepicker-table td{color:var(--md-sys-color-on-background);border-radius:50%;padding:0}.datepicker-table td.is-today{color:var(--md-sys-color-primary)}.datepicker-table td.is-selected{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.datepicker-table td.is-outside-current-month,.datepicker-table td.is-disabled{color:var(--md-sys-color-on-surface);pointer-events:none}.datepicker-day-button{background-color:rgba(0,0,0,0);border:none;line-height:38px;display:block;width:100%;border-radius:50%;padding:0 5px;cursor:pointer;color:inherit}.datepicker-day-button:hover{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.datepicker-day-button:focus{background-color:rgba(var(--md-sys-color-primary-numeric), 0.18)}.datepicker-footer{width:280px;margin:0 auto;padding-bottom:5px;display:flex;justify-content:space-between}.datepicker-cancel,.datepicker-clear,.datepicker-today,.datepicker-done{color:var(--md-sys-color-primary);padding:0 1rem}.datepicker-clear{color:var(--md-sys-color-error)}@media only screen and (min-width : 601px){.datepicker-modal{max-width:625px}.datepicker-container.modal-content{flex-direction:row}.datepicker-date-display{flex:0 1 270px}.datepicker-controls,.datepicker-table,.datepicker-footer{width:320px}.datepicker-day-button{line-height:44px}}.timepicker-modal{max-width:325px;max-height:none}.timepicker-container.modal-content{display:flex;flex-direction:column;padding:0}.text-primary{color:var(--md-sys-color-on-primary)}.timepicker-digital-display{width:200px;flex:1 auto;background-color:var(--md-sys-color-primary);padding:10px;font-weight:300}.timepicker-text-container{font-size:4rem;font-weight:bold;text-align:center;color:var(--font-on-primary-color-medium);font-weight:400;position:relative;user-select:none}.timepicker-text-container input[type=text]{height:4rem;color:rgba(255,255,255,.6);border-bottom:0px;font-size:4rem;direction:ltr}.timepicker-input-hours,.timepicker-input-minutes,.timepicker-span-am-pm div{cursor:pointer}input[type=text].timepicker-input-hours{text-align:right;width:28%;margin-right:3px}input[type=text].timepicker-input-minutes{width:33%;margin-left:3px}input[type=text].text-primary{color:#fff}.timepicker-display-am-pm{font-size:1.3rem;position:absolute;right:1rem;bottom:1rem;font-weight:400}.timepicker-analog-display{flex:2.5 auto;background-color:var(--md-sys-color-surface)}.timepicker-plate{background-color:rgba(0,0,0,.09);border-radius:50%;width:270px;height:270px;overflow:visible;position:relative;margin:auto;margin-top:25px;margin-bottom:5px;user-select:none}.timepicker-canvas,.timepicker-dial{position:absolute;left:0;right:0;top:0;bottom:0}.timepicker-minutes{visibility:hidden}.timepicker-tick{border-radius:50%;color:var(--md-sys-color-on-background);line-height:40px;text-align:center;width:40px;height:40px;position:absolute;cursor:pointer;font-size:15px}.timepicker-tick.active,.timepicker-tick:hover{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.timepicker-dial{transition:transform 350ms,opacity 350ms}.timepicker-dial-out{opacity:0}.timepicker-dial-out.timepicker-hours{transform:scale(1.1, 1.1)}.timepicker-dial-out.timepicker-minutes{transform:scale(0.8, 0.8)}.timepicker-canvas{transition:opacity 175ms}.timepicker-canvas line{stroke:var(--md-sys-color-primary);stroke-width:4;stroke-linecap:round}.timepicker-canvas-out{opacity:.25}.timepicker-canvas-bearing{stroke:none;fill:var(--md-sys-color-primary)}.timepicker-canvas-bg{stroke:none;fill:var(--md-sys-color-primary)}.timepicker-footer{margin:0 auto;padding:5px 1rem;display:flex;justify-content:space-between}.timepicker-clear{color:var(--md-sys-color-error)}.timepicker-close{color:var(--md-sys-color-primary)}.timepicker-clear,.timepicker-close{padding:0 20px}@media only screen and (min-width : 601px){.timepicker-modal{max-width:600px}.timepicker-container.modal-content{flex-direction:row}.timepicker-text-container{top:32%}.timepicker-display-am-pm{position:relative;right:auto;bottom:auto;text-align:center;margin-top:1.2rem}} - -/*# sourceMappingURL=materialize.min.css.map */ \ No newline at end of file diff --git a/dist/css/materialize.min.css.map b/dist/css/materialize.min.css.map deleted file mode 100644 index 512eb1c495..0000000000 --- a/dist/css/materialize.min.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["file:///Users/wuda/Projects/materialize/sass/components/tokens.module.scss","file:///Users/wuda/Projects/materialize/sass/components/theme.module.scss","file:///Users/wuda/Projects/materialize/sass/components/colors.module.scss","file:///Users/wuda/Projects/materialize/sass/components/typography.module.scss","file:///Users/wuda/Projects/materialize/sass/components/_color-classes.scss","file:///Users/wuda/Projects/materialize/sass/components/_normalize.scss","file:///Users/wuda/Projects/materialize/sass/components/_global.scss","file:///Users/wuda/Projects/materialize/sass/components/_variables.scss","file:///Users/wuda/Projects/materialize/sass/components/_collection.scss","file:///Users/wuda/Projects/materialize/sass/components/_badges.scss","file:///Users/wuda/Projects/materialize/sass/components/_icons-material-design.scss","file:///Users/wuda/Projects/materialize/sass/components/_grid.scss","file:///Users/wuda/Projects/materialize/sass/components/_navbar.scss","file:///Users/wuda/Projects/materialize/sass/components/_typography.scss","file:///Users/wuda/Projects/materialize/sass/components/_transitions.scss","file:///Users/wuda/Projects/materialize/sass/components/_cards.scss","file:///Users/wuda/Projects/materialize/sass/components/_toast.scss","file:///Users/wuda/Projects/materialize/sass/components/_tabs.scss","file:///Users/wuda/Projects/materialize/sass/components/_tooltip.scss","file:///Users/wuda/Projects/materialize/sass/components/_buttons.scss","file:///Users/wuda/Projects/materialize/sass/components/_dropdown.scss","file:///Users/wuda/Projects/materialize/sass/components/_modal.scss","file:///Users/wuda/Projects/materialize/sass/components/_collapsible.scss","file:///Users/wuda/Projects/materialize/sass/components/_chips.scss","file:///Users/wuda/Projects/materialize/sass/components/_materialbox.scss","file:///Users/wuda/Projects/materialize/sass/components/forms/_forms.scss","file:///Users/wuda/Projects/materialize/sass/components/forms/_input-fields.scss","file:///Users/wuda/Projects/materialize/sass/components/forms/_radio-buttons.scss","file:///Users/wuda/Projects/materialize/sass/components/forms/_checkboxes.scss","file:///Users/wuda/Projects/materialize/sass/components/forms/_switches.scss","file:///Users/wuda/Projects/materialize/sass/components/forms/_select.scss","file:///Users/wuda/Projects/materialize/sass/components/forms/_file-input.scss","file:///Users/wuda/Projects/materialize/sass/components/forms/_range.scss","file:///Users/wuda/Projects/materialize/sass/components/_table_of_contents.scss","file:///Users/wuda/Projects/materialize/sass/components/_sidenav.scss","file:///Users/wuda/Projects/materialize/sass/components/_preloader.scss","file:///Users/wuda/Projects/materialize/sass/components/_slider.scss","file:///Users/wuda/Projects/materialize/sass/components/_carousel.scss","file:///Users/wuda/Projects/materialize/sass/components/_tapTarget.scss","file:///Users/wuda/Projects/materialize/sass/components/_pulse.scss","file:///Users/wuda/Projects/materialize/sass/components/_datepicker.scss","file:///Users/wuda/Projects/materialize/sass/components/_timepicker.scss"],"names":[],"mappings":"CAAA,MACE,qBAEA,mCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,qCAEA,qCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,uCAEA,oCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,sCAEA,mCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,qCAEA,2CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,6CAEA,iCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,mCAEA,sCACA,yCACA,gDACA,mDACA,wCACA,2CACA,kDACA,qDACA,uCACA,0CACA,iDACA,oDACA,oCACA,8CACA,uCACA,iDACA,yCACA,4CACA,sCACA,yCACA,8CACA,iDACA,sCACA,iDACA,8CACA,8CACA,qCACA,2CACA,8CACA,oCAEA,qCACA,wCACA,+CACA,kDACA,uCACA,0CACA,iDACA,oDACA,sCACA,yCACA,gDACA,mDACA,mCACA,6CACA,sCACA,gDACA,wCACA,2CACA,qCACA,wCACA,6CACA,gDACA,qCACA,gDACA,6CACA,6CACA,oCACA,0CACA,6CACA,mCAEA,0DACA,4DACA,oDACA,iDACA,mDACA,yDAEA,2DACA,6DACA,qDACA,kDACA,oDACA,sDAEA,0DACA,4DACA,oDACA,iDACA,mDACA,qDAEA,2DACA,6DACA,qDACA,kDACA,oDACA,sDAEA,4DACA,8DACA,sDACA,mDACA,qDACA,uDAEA,2DACA,6DACA,qDACA,kDACA,oDACA,sDAEA,uDACA,yDACA,iDACA,8CACA,gDACA,qDAEA,wDACA,0DACA,kDACA,+CACA,iDACA,sDAEA,uDACA,yDACA,iDACA,8CACA,gDACA,qDAEA,wDACA,yDACA,kDACA,+CACA,iDACA,sDAEA,yDACA,0DACA,mDACA,gDACA,kDACA,uDAEA,wDACA,yDACA,kDACA,+CACA,iDACA,sDAEA,wDACA,0DACA,kDACA,+CACA,iDACA,mDAEA,yDACA,0DACA,mDACA,gDACA,kDACA,uDAEA,wDACA,yDACA,kDACA,+CACA,iDACA,sDC7QF,YACE,mBACA,0DACA,gEACA,8EACA,oFACA,8DACA,oEACA,kFACA,wFACA,4DACA,kEACA,gFACA,sFACA,sDACA,4DACA,0EACA,gFACA,0DACA,gEACA,sEACA,0DACA,gEACA,0EACA,gFACA,0EACA,gFACA,0EACA,wDACA,oEACA,0EACA,sDAGF,mCACE,YACE,kBACA,yDACA,+DACA,6EACA,mFACA,6DACA,mEACA,iFACA,uFACA,2DACA,iEACA,+EACA,qFACA,qDACA,2DACA,yEACA,+EACA,yDACA,+DACA,qEACA,yDACA,+DACA,yEACA,+EACA,yEACA,+EACA,yEACA,uDACA,mEACA,yEACA,sDAMJ,mBACE,mBACA,0DACA,gEACA,8EACA,oFACA,8DACA,oEACA,kFACA,wFACA,4DACA,kEACA,gFACA,sFACA,sDACA,4DACA,0EACA,gFACA,0DACA,gEACA,sEACA,0DACA,gEACA,0EACA,gFACA,0EACA,gFACA,0EACA,wDACA,oEACA,0EACA,sDAGF,kBACE,kBACA,yDACA,+DACA,6EACA,mFACA,6DACA,mEACA,iFACA,uFACA,2DACA,iEACA,+EACA,qFACA,qDACA,2DACA,yEACA,+EACA,yDACA,+DACA,qEACA,yDACA,+DACA,yEACA,+EACA,yEACA,+EACA,yEACA,uDACA,mEACA,yEACA,qDC1IF,sDACA,gDACA,4DACA,sDACA,0EACA,oEACA,gFACA,0EAEA,0DACA,oDACA,gEACA,0DACA,8EACA,wEACA,oFACA,8EAEA,wDACA,kDACA,8DACA,wDACA,4EACA,sEACA,kFACA,4EAEA,kDACA,4CACA,wDACA,kDACA,sEACA,gEACA,4EACA,sEAEA,4DACA,sDACA,kEACA,4DAEA,8GACA,gDACA,4DACA,sDAEA,qKACA,gEACA,4EACA,4FAEA,iFACA,gDAEA,4EACA,sEAEA,sEACA,gEAEA,sEACA,gEAEA,oDACA,8CAEA,gEACA,0DAEA,sEACA,gEAEA,kDACA,4CCzEA,eACE,mEACA,mEACA,8DACA,0DACA,8DACA,yDACA,oEACA,sEAEF,gBACE,oEACA,oEACA,+DACA,2DACA,+DACA,0DACA,qEACA,uEAEF,eACE,mEACA,mEACA,8DACA,0DACA,8DACA,yDACA,oEACA,sEAEF,gBACE,oEACA,oEACA,+DACA,2DACA,+DACA,0DACA,qEACA,uEAEF,iBACE,qEACA,qEACA,gEACA,4DACA,gEACA,2DACA,sEACA,wEAEF,gBACE,oEACA,oEACA,+DACA,2DACA,+DACA,0DACA,qEACA,uEAEF,YACE,gEACA,gEACA,2DACA,uDACA,2DACA,sDACA,iEACA,mEAEF,aACE,iEACA,iEACA,4DACA,wDACA,4DACA,uDACA,kEACA,oEAEF,YACE,gEACA,gEACA,2DACA,uDACA,2DACA,sDACA,iEACA,mEAEF,aACE,iEACA,iEACA,4DACA,wDACA,4DACA,uDACA,kEACA,oEAEF,cACE,kEACA,kEACA,6DACA,yDACA,6DACA,wDACA,mEACA,qEAEF,aACE,iEACA,iEACA,4DACA,wDACA,4DACA,uDACA,kEACA,oEAEF,aACE,iEACA,iEACA,4DACA,wDACA,4DACA,uDACA,kEACA,oEAEF,cACE,kEACA,kEACA,6DACA,yDACA,6DACA,wDACA,mEACA,qEAEF,aACE,iEACA,iEACA,4DACA,wDACA,4DACA,uDACA,kEACA,oEC/II,iBACE,oCAEF,sBACE,yBAIF,2BACE,oCAEF,qCACE,yBAJF,2BACE,oCAEF,qCACE,yBAJF,2BACE,oCAEF,qCACE,yBAJF,2BACE,oCAEF,qCACE,yBAJF,2BACE,oCAEF,qCACE,yBAJF,0BACE,oCAEF,oCACE,yBAJF,0BACE,oCAEF,oCACE,yBAJF,0BACE,oCAEF,oCACE,yBAJF,0BACE,oCAEF,oCACE,yBAZF,KACE,oCAEF,UACE,yBAIF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAZF,MACE,oCAEF,WACE,yBAIF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAZF,QACE,oCAEF,aACE,yBAIF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,iCAEF,2BACE,sBAZF,aACE,oCAEF,kBACE,yBAIF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAZF,QACE,oCAEF,aACE,yBAIF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAZF,MACE,oCAEF,WACE,yBAIF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAZF,YACE,oCAEF,iBACE,yBAIF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAZF,MACE,oCAEF,WACE,yBAIF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAZF,MACE,oCAEF,WACE,yBAIF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAZF,OACE,oCAEF,YACE,yBAIF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAZF,aACE,oCAEF,kBACE,yBAIF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAZF,MACE,oCAEF,WACE,yBAIF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAZF,QACE,oCAEF,aACE,yBAIF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,iCAEF,2BACE,sBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAZF,OACE,oCAEF,YACE,yBAIF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAZF,QACE,oCAEF,aACE,yBAIF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAZF,aACE,oCAEF,kBACE,yBAIF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAZF,OACE,oCAEF,YACE,yBAIF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAZF,WACE,oCAEF,gBACE,yBAIF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,oBACE,oCAEF,8BACE,yBAJF,oBACE,oCAEF,8BACE,yBAJF,oBACE,oCAEF,8BACE,yBAJF,oBACE,oCAEF,8BACE,yBAZF,MACE,oCAEF,WACE,yBAIF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,iCAEF,0BACE,sBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAQN,OACE,iCAEF,YACE,sBAJF,OACE,iCAEF,YACE,sBAJF,aACE,0CAEF,kBACE,+BC7BJ,4EAUA,KACE,iBACA,8BAUF,KACE,SAOF,KACE,cAQF,GACE,cACA,eAWF,GACE,uBACA,SACA,iBAQF,IACE,gCACA,cAUF,EACE,+BAQF,YACE,mBACA,0BACA,iCAOF,SAEE,mBAQF,cAGE,gCACA,cAOF,MACE,cAQF,QAEE,cACA,cACA,kBACA,wBAGF,IACE,eAGF,IACE,WAUF,IACE,kBAWF,sCAKE,oBACA,eACA,iBACA,SAQF,aAEE,iBAQF,cAEE,oBAOF,gDAIE,0BAOF,wHAIE,kBACA,UAOF,4GAIE,8BAOF,SACE,2BAUF,OACE,sBACA,cACA,cACA,eACA,UACA,mBAOF,SACE,wBAOF,SACE,cAQF,6BAEE,sBACA,UAOF,kFAEE,YAQF,cACE,6BACA,oBAOF,yCACE,wBAQF,6BACE,0BACA,aAUF,QACE,cAOF,QACE,kBAUF,SACE,aAOF,SACE,aC3VF,KACE,sBAGF,mBACE,mBAGF,KACE,gDACA,wCAGF,sCAKE,YCwBW,4GDrBb,QCda,QDcW,qBACrB,0CAIH,gDAEA,qBAGA,qeACE,2BAIF,sVACE,iGAKF,wDACE,iGAIF,mFACE,kGAMF,kBACE,uGAMF,WACE,yGAMF,kBACE,0GAKF,WACE,2BACA,iBACE,oEAKJ,SACE,WACA,gBACA,qDAIF,+FAGA,EACE,oBACA,OACE,WACA,iBAGF,QACE,YAGF,OACE,eAEF,QACE,eAEF,SACE,eAEF,QACE,eAKJ,cACE,eACA,kBACA,WAIF,0CAEE,eACA,YAMA,eACE,qBACA,kBACA,kBACA,mBACA,YAEA,iBACE,6CACA,qBACA,iBACA,eACA,iBAGF,oCACE,iEAGF,wBACE,qCAGF,kDAEE,6CAGF,0BACE,eACA,qCAGF,iBACE,eAKJ,2BACE,qBACA,WAIJ,8CACE,YACE,WAEA,wCAEE,UAGF,qBACE,UACA,gBACA,oBAMN,YACE,qBACA,eACA,0CAEA,mNAIE,cACA,WACA,eAGF,mBACE,YACA,0CACA,mBACA,qBACA,6GACA,mBACA,kBACA,eACA,oBACA,mCACA,WAGF,+BACE,aAGF,uBACE,qCAKJ,oBACE,kBACA,gBACA,aAEA,8BACE,kBACA,MACA,OACA,QACA,SACA,WAEA,kCACE,UACA,kBACA,SACA,SACA,eACA,gBACA,+BACA,2BAMN,qBACE,kBAGF,QACE,0BAOF,+BACA,0CAME,8CADF,4CAC8B,yBAI5B,8CADF,sBAC+B,yBAI7B,2CADF,oBAC6B,yBAI3B,mEADF,kBAEI,yBAKF,2CADF,oBAC4B,yBAI1B,4CADF,0BACkC,yBAIhC,4CADF,qBACkC,0BAIhC,2CADF,eAC4B,0BAI1B,mEADF,gBAEI,0BAKF,8CADF,eAC8B,0BAI5B,2CADF,uBAC6B,0BAI3B,8CADF,yBAC+B,0BAM7B,8CADF,sBAC8B,mBAI9B,aACE,gBACA,iBACA,0DACA,eACE,wCAEF,eACE,kCAEF,gEAEE,gBACA,gBACA,aACA,mBACA,8BACA,iBAGJ,gBACE,eACA,qBAIF,YACE,YAGF,MACE,WACA,cACA,yBACA,iBAGE,iBACE,mBAEF,sCACE,iCAIJ,yBACE,sCAEA,+BACE,iCAIJ,YACE,6CAIA,sDACE,kBAKN,GACE,4DAGF,MACE,iBACA,mBACA,gBACA,sBACA,gBAIF,8CAEE,uBACE,WACA,yBACA,iBACA,cACA,kBAEA,uCACE,YAEF,oDAEE,SACA,mBAEF,0BACE,gBAEF,6BACE,cACA,WAEA,gCACE,cACA,mBAEA,2CACE,YAIN,6BACE,cACA,WACA,kBACA,gBACA,mBAEA,gCACE,qBACA,mBAGJ,0BACE,cACA,iBAEF,0BACE,cACA,kBACA,gBAEF,0BACE,mBACA,eAGF,6BACE,SACA,4DAMN,iBACE,kBACA,sBACA,SACA,gBAEA,uEACE,kBACA,MACA,OACA,WACA,YAQJ,8BAGA,4BACA,8BACA,wCAGA,4BACA,8BAGA,uEACA,0BACA,+DACA,kFACA,iCAeI,KACE,oBAIA,MACE,wBADF,MACE,0BADF,MACE,2BADF,MACE,yBAKD,MACE,yBACA,0BAKH,MACE,wBACA,2BApBJ,KACE,yBAIA,MACE,6BADF,MACE,+BADF,MACE,gCADF,MACE,8BAKD,MACE,8BACA,+BAKH,MACE,6BACA,gCApBJ,KACE,wBAIA,MACE,4BADF,MACE,8BADF,MACE,+BADF,MACE,6BAKD,MACE,6BACA,8BAKH,MACE,4BACA,+BApBJ,KACE,yBAIA,MACE,6BADF,MACE,+BADF,MACE,gCADF,MACE,8BAKD,MACE,8BACA,+BAKH,MACE,6BACA,gCApBJ,KACE,uBAIA,MACE,2BADF,MACE,6BADF,MACE,8BADF,MACE,4BAKD,MACE,4BACA,6BAKH,MACE,2BACA,8BApBJ,KACE,yBAIA,MACE,6BADF,MACE,+BADF,MACE,gCADF,MACE,8BAKD,MACE,8BACA,+BAKH,MACE,6BACA,gCApBJ,KACE,uBAIA,MACE,2BADF,MACE,6BADF,MACE,8BADF,MACE,4BAKD,MACE,4BACA,6BAKH,MACE,2BACA,8BApBJ,QACE,uBAIA,SACE,2BADF,SACE,6BADF,SACE,8BADF,SACE,4BAKD,SACE,4BACA,6BAKH,SACE,2BACA,8BApBJ,KACE,qBAIA,MACE,yBADF,MACE,2BADF,MACE,4BADF,MACE,0BAKD,MACE,0BACA,2BAKH,MACE,yBACA,4BApBJ,KACE,0BAIA,MACE,8BADF,MACE,gCADF,MACE,iCADF,MACE,+BAKD,MACE,+BACA,gCAKH,MACE,8BACA,iCApBJ,KACE,yBAIA,MACE,6BADF,MACE,+BADF,MACE,gCADF,MACE,8BAKD,MACE,8BACA,+BAKH,MACE,6BACA,gCApBJ,KACE,0BAIA,MACE,8BADF,MACE,gCADF,MACE,iCADF,MACE,+BAKD,MACE,+BACA,gCAKH,MACE,8BACA,iCApBJ,KACE,wBAIA,MACE,4BADF,MACE,8BADF,MACE,+BADF,MACE,6BAKD,MACE,6BACA,8BAKH,MACE,4BACA,+BApBJ,KACE,0BAIA,MACE,8BADF,MACE,gCADF,MACE,iCADF,MACE,+BAKD,MACE,+BACA,gCAKH,MACE,8BACA,iCApBJ,KACE,wBAIA,MACE,4BADF,MACE,8BADF,MACE,+BADF,MACE,6BAKD,MACE,6BACA,8BAKH,MACE,4BACA,+BApBJ,QACE,wBAIA,SACE,4BADF,SACE,8BADF,SACE,+BADF,SACE,6BAKD,SACE,6BACA,8BAKH,SACE,4BACA,+BExiBR,YACE,eACA,qBACA,sBACA,qDACA,kBACA,gBACA,kBAEA,6BACE,+BACA,mBACA,kBACA,SACA,4DAGA,oCACE,gBACA,kBACA,kBAGA,mIAEE,kBACA,WACA,YACA,gBACA,UACA,qBACA,sBAGF,6CACE,eACA,iBACA,WACA,kDACA,kBAIF,2CACE,eAGF,sCACE,SAGF,uDACE,kBACA,SACA,WAMJ,wCACE,mBAGF,oCACE,6CACA,qCAEA,uDACE,qCAKN,8BACE,cACA,gBACA,kCAGE,iDACE,iCAMJ,2CACE,+BACA,4DACA,kBAGF,yCACE,kBAGF,gDACE,kBAON,mBACE,YACA,kCAGF,yBACE,SACA,YChHF,MACE,qBAGF,WACE,eACA,cACA,iBACA,kBACA,eACA,gCACA,2BACA,6CACA,YACA,sBAEA,eACE,gBACA,gBACA,qCACA,6CACA,kBAEF,qBACE,eAGF,sCACE,qCAIJ,mBACE,qCAKF,oBACE,qBACA,WACA,gBACA,gCACA,2BACA,4BAIF,4BACE,iDAGF,wBACE,iBAGF,0CACE,6CAGF,oBACE,sDAGF,iBACE,qBACA,WACA,iBCnEF,6FAEE,kCACA,6BCDF,WACE,cACA,iBACA,UAEF,2CACE,WACE,WAGJ,2CACE,WACE,WAIJ,SACE,eAsBF,KACE,mBAGF,KACE,aACA,sCACA,oBAGA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,mCACA,mCACA,mCAEA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,qCACA,sCACA,sCAGA,2CACE,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,mCACA,mCACA,mCAEA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,qCACA,sCACA,uCAIF,2CACE,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,mCACA,mCACA,mCAEA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,qCACA,sCACA,uCAIF,4CACE,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,oCACA,oCACA,oCAEA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,sCACA,uCACA,wCAMJ,WACA,mCACA,kCACA,iCACA,mCACA,iCCxKA,MACE,sBACA,6BAGF,IAeE,qCAEA,yDAEA,WACA,mCACA,wCApBA,iBACE,YAEA,8BACE,uCACA,YAGF,8BACE,kBACA,mBAYJ,MACE,qCAGF,2JAIE,cACA,eACA,mCACA,wCAGF,iBACE,kBACA,YAGF,2CACE,sBACE,cAKJ,qBACE,WACA,kBACA,UACA,mCACA,cAEA,uBACE,mCACA,wCAKJ,gBACE,kBACA,qCACA,qBACA,iBACA,UAEA,uBACE,SACA,2BAGF,8CAZF,gBAaI,SACA,2BAEA,2CACE,UACA,eAGF,qBACE,WAEF,sBACE,YACA,WAIJ,sBACE,YACA,UAGF,+OAIE,WACA,kBAMJ,eACE,qBACA,eACA,eAKF,8BACE,qBACA,SAEA,iCACE,gCACA,WACA,UAEA,mCACE,gCACA,eACA,qCACA,cACA,eACA,eAEA,0CACE,iDAGF,sDACE,iDAGF,6NACE,gBACA,iBACA,kBACA,qBAEA,q0CAEE,eACA,oBAMR,mCACE,WAKJ,SACE,YAGF,iBACE,SACA,YAEA,oCACE,YACA,iBACA,YACA,kBACA,qCAEA,uTAEE,YACA,gBAIJ,uBACE,MACA,OAEA,yBACE,0CACA,qBAGF,gCACE,qCAOR,cACE,kBACA,mCACA,YAEA,kBACE,eACA,QAIJ,2CACE,8BACE,uCAEF,qEACE,4BACA,iCAEF,cACE,6BCjOJ,EACE,qBAGF,KAeE,YNoBW,4GMnBX,mBACA,MNmBW,kCMjCX,sCAHF,KAII,gBAGF,0CAPF,KAQI,kBAGF,2CAXF,KAYI,gBAQJ,kBACC,gBACA,gBAID,kDACA,aNYc,OMZgB,2CAC9B,aNYc,QMZgB,qDAC9B,aNYc,QMZgB,qDAC9B,aNYc,QMZgB,4CAC9B,aNYc,QMZgB,oDAC9B,aNYc,QMZgB,kDAG9B,qBACA,uBACA,oBACA,uBACA,sBAKI,0CAHJ,WAIM,kBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,mBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,mBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,mBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,mBAMJ,0CAVF,WAWI,kBC1DJ,kBAUE,yEATA,4BACE,mBACA,oCAGF,2BACE,mBCRJ,YACE,2BACA,aACA,sBACA,mBAEA,6CAGF,MACE,gBACA,kBAEA,6CACA,2BACA,mBAGA,kBACE,eACA,gBACA,4BACE,eAKJ,qCACE,kBAEA,yEACE,eACA,gBAEF,mHACE,eAEF,+EACE,gBACA,gBAEF,4EACE,kBACA,SACA,OACA,QAIJ,YACE,aAGF,aACE,aAGF,YACE,aAIF,iBAaE,aAXE,0GACE,YACA,gBACA,iBAEA,sHACE,YAON,6BACE,cACA,iCACE,0BACA,eACA,WAIJ,+BACE,aACA,sBACA,OACA,kBAEA,6CACE,YAOJ,iCACE,UAGF,iCACE,UACA,oBAOJ,kBACE,kBAGA,sBACE,cACA,0BACA,kBACA,OACA,QACA,MACA,SACA,WAGF,8BACE,kCACA,kBACA,SACA,OACA,eACA,aAIJ,oBACE,aACA,0BAEA,sBACE,SAEF,gCACE,cACA,iBACA,kBAEA,kCACE,iBAKN,mBAKE,yDACA,kBACA,yBANA,8BACE,0BAOF,qBACE,kBACA,qBAGF,kGACE,kCACA,0BAEA,wGACE,iEAKN,mBACE,aACA,kBACA,6CACA,WACA,gBACA,OACA,SACA,YACA,UACA,aAEA,+BACE,eACA,cClMN,iBACE,cACA,eACA,cAEA,8CALF,iBAMI,eACA,WAEF,qEATF,iBAUI,QACA,UACA,eAEF,2CAdF,iBAeI,QACA,SACA,eAIJ,OAEE,kBACA,SACA,WACA,gBACA,kBACA,eACA,YACA,gBAIA,kBACA,mBAEA,eACA,gBACA,iBAEA,6CACA,qDAEA,aACA,mBACA,8BACA,eAEA,qBACE,0CACA,gBACA,mBACA,iBAGF,eACE,mBAGF,8CAvCF,OAwCI,WACA,iBC9DJ,MACE,eACA,qBA0CA,kBACA,gBACA,kBACA,YACA,WACA,6CACA,cACA,mBA/CA,uBACE,+BAEA,8BACE,0CAGF,iIAGE,4BAGF,oCACE,iCAGF,yEAEE,+BAGF,6GAGE,qCAGF,kCACE,gDAIJ,uBACE,aACA,4BACE,YAaJ,WACE,eACA,qBACA,qBACA,kBACA,iBACA,YACA,UACA,SAEA,aAqBE,6CACA,cACA,WACA,YACA,eACA,eACA,uBACA,gBACA,sDA5BA,oBACE,+BAGF,0DAGE,kCAGF,mBACE,iEAGF,uCAEE,iEACA,aAcJ,kDAKE,qCACA,eACA,+BALA,0EACE,+BAQN,iBACE,kBACA,SACA,WACA,6CACA,uBACA,0BAMJ,8CACE,MACE,aACA,WACE,YACA,aACE,gBC5HR,kBACE,cACA,kBAEA,6CACA,qDAEA,gEACA,uDACA,2DACA,2DAEA,gBACA,UAEA,gBACA,mBAEA,eACA,iBACA,gBACA,oBAEA,kBACA,gBACA,gBACA,OACA,MACA,oBAEA,aACA,mBAEA,kBACA,aAGF,UACE,kBACA,UACA,WACA,WACA,0BACA,qDACA,WACA,uBACA,kBC9CF,mDACE,mBACA,2BACA,oBACA,yBACA,oBACA,yBACA,sBAEA,yBACA,YACA,uCACA,gCACA,iCACA,+BACA,gBACA,qBACA,oBACA,mBACA,eACA,0CACA,mBACA,UACA,iBACA,yCAIF,qHACE,kBAEF,yDACE,6FAEF,4DACE,8FAEF,iIACE,kBACA,oCAEF,+DACE,6BAEF,kEACE,8BAKF,gDACE,qCACA,6CAGF,6CACE,iDACA,yDAGF,sDACE,iDACA,yDAIF,sDACE,+BACA,kCACA,6CAGF,oDAEE,kCACA,+BAKF,qSAKE,0EACA,qFAEA,oBACA,gBACA,eAKF,wEAEE,kCACA,6HAGF,kEAEE,qCACA,qGAGF,+DAEE,iDACA,6HAGF,wEACE,kCACA,kFAGF,4DACE,kCACA,kFAKF,wEAEE,kCACA,8GAGF,kEAEE,qCACA,qGAGF,+DAEE,iDACA,6HAGF,wEACE,kCACA,kFACA,6CAGF,4DACE,kCACA,kFAKA,qcAME,gDACA,mBAwBJ,cAoDE,MZjOqB,KYkOrB,OZlOqB,KYmOrB,+CACA,uDACA,cZpOuB,KYqOvB,UACA,aACA,sBACA,mBACA,kBACA,gBACA,UAEA,gCACA,eACA,sBAlEA,oBAEE,yHAEF,oBACE,iBZrL+B,kCYwLjC,qBACE,gBAGF,wBAIE,WACA,YACA,UALA,oCACE,aAWJ,wBACE,mDAIA,gCACA,+BAJA,oCACE,0CASJ,0BAKE,kBACA,WACA,aANA,+BACE,WACA,UA4BJ,gBACE,MZpPoB,iCYqPpB,iBACA,cACA,qBACA,kBAIJ,oBACE,YAGF,kBAyFE,eACA,WACA,YACA,iBACA,gBACA,YA5FE,4BACE,mBACA,eACA,qBAKJ,mEAEE,mBACA,yEACE,iBACA,WACA,QACA,2BACA,YACA,UAEA,YACA,+EACE,qBACA,sBAIN,kCACE,mBACA,qCACE,gBACA,cACA,UACA,WACA,wCACE,sBAIN,mCACE,mBACA,sCACE,SACA,YACA,aACA,8BACA,yCACE,kBAIN,0BAME,UACA,YALE,qCACE,UAKJ,6BACE,aACA,MACA,SACA,UACA,gCACE,OACA,qBACA,SACA,YACA,gBACA,kCACE,cACA,gBACA,kBACA,WACA,YACA,+BACA,gBACA,MZ/Uc,iCYgVd,iBACA,UACA,oCACE,oBAYV,qBACE,OACA,QACA,kBACA,kBACA,YACA,SACA,kBACA,wBACE,mBAEF,oCACE,UAGJ,gCACE,kBACA,MACA,OACA,WACA,MZlXmB,KYmXnB,OZnXmB,KYoXnB,iBZxXyB,8BYyXzB,cZpXqB,KYqXrB,mBAOJ,WAEE,mCACA,eACA,eACA,aACE,iBAKJ,WAEE,mCACA,eACA,aACE,iBAKJ,WACE,cAGF,mDACE,sBCraF,UACE,aACA,UACA,YAGF,kBACE,eACA,qBAEA,6CACA,SACA,aACA,gBACA,gBACA,UACA,kBACA,OACA,MACA,aACA,qBACA,iBAEA,qBAyBE,WACA,wCACA,eACA,WbjCmB,KakCnB,mBACA,WACA,gBA9BA,6BACE,aACA,WAEF,iDACE,eACA,kCACA,cACA,iBACA,kBAEF,gCACE,QACA,OACA,YAGF,yBACE,eACA,oBACA,WACA,kBACA,WAUJ,sEACE,oGAKF,iDACE,iCAKJ,yDACE,QACA,OACA,YACA,eAGF,kBACE,eC5EF,OACE,4BACA,mCACA,4BACA,sBAQA,aACA,eACA,OACA,QACA,6CACA,UACA,eACA,UACA,YACA,gBAEA,yCACA,wBAlBA,aACE,aAmBF,8CA1BF,OA2BI,WAGF,wCACE,aAGF,sBACE,6BACA,kBAGF,oBACE,eAGF,qBACE,wEACA,6CACA,gBACA,kCACA,WACA,iBAEA,yHACE,aAKN,eACE,eACA,YACA,SACA,OACA,SACA,QACA,YACA,WACA,gBACA,aACA,oBAIF,0BACE,UACA,WAEA,yCACE,kBACA,+CACA,gBACA,WACA,gBAGF,wCACE,wFACA,kBACA,0CAKJ,oBACE,SACA,aACA,SACA,WACA,eACA,gBACA,2BCnGF,aACE,eACA,qBAEA,yDACA,2DACA,0DACA,sBAIF,oBAKE,aACA,eACA,0CACA,gBACA,aACA,4DATA,0BACE,UAUF,sBACE,WACA,iBACA,qBACA,kBACA,kBAIJ,2BACE,YACA,iBACA,oBACA,WAEF,mCACE,YAIF,4CACE,iCAGF,kBACE,aACA,4DACA,sBACA,eACA,gBAKF,oBACE,YACA,gBAEA,uBACE,oEAEA,cACA,4DAGF,8BACE,qEACA,cCtEJ,MACE,kBACA,uBACA,eAEA,6CACA,iCAEA,oBACA,mBACA,QAEA,SACA,YAEA,4BACA,6BAEA,2BACA,gBAEA,kBAEA,mBACA,iBACA,mBAEA,YACE,aACA,6CACA,qCAIJ,eACE,+BACA,yCACA,iBACA,mBAGF,UACE,SACA,WACA,YACA,iBACA,mBAGF,sBACE,gCAIF,aACE,kBACA,YACA,WACA,UACA,aACA,uBACA,qBACA,eAGF,mBACE,+CAKF,OACE,aACA,QACA,eAEA,YACA,+DACA,gBACA,iBAEA,YAGA,aACA,mBAEA,aACE,oDACA,iDAGF,aACE,YAGF,qDACE,gBACA,SACA,wCACA,qBACA,eAIA,YAEA,UACA,SACA,UACA,YAGA,2DACE,SACA,gBAKJ,6BACE,aACA,gBAKJ,eACE,iBACA,UACA,wBAGF,eACE,kBACA,UACA,wBAEF,mBACE,gBACA,4BC5IF,eAOE,cACA,eACA,kBACA,uBACA,mCATE,kCACE,WAUJ,sBACE,gBAIJ,qBACE,eACA,MACA,QACA,SACA,OACA,gDACA,aACA,oBAGF,qBACE,eACA,aACA,wCACA,iBACA,SACA,OACA,WACA,kBACA,eACA,YACA,aACA,mCCxCF,aACE,kDAUF,MACE,gBACA,6CCbF,cACE,6CAIF,gjBAcE,aACA,wCACA,WACA,UnBtBiC,KmBuBjC,YA4BF,aACE,2CAEA,kBACA,WAIA,yCACE,sBAEA,eACA,iBAEA,6CAEA,YACA,kBACA,+DACA,4BACA,6BAEA,qFACE,2CACA,iBAGF,0IACE,iDACA,wDACA,4DAIF,iGACE,yBAEF,ySAKE,sBACA,QAGF,kKACE,iDAIJ,gCACE,iBAGF,mBACE,6CACA,iBACA,eACA,kBACA,UACA,SACA,YACA,0BACA,WACE,0DAQJ,8BACE,6CACA,eACA,eACA,eAGF,gCACE,6CACA,eACA,YACA,eACA,eAGF,qBACE,kBACA,UACA,SACA,iBACA,aACA,kBAGF,qBACE,kBACA,WACA,SACA,iBAGF,yDACE,kBAEF,yDACE,mBAEF,2BACE,UAOA,2DACE,cAEA,gDAEA,wDACA,kBAEA,uGACE,oCACA,cACA,iBAIF,mHACE,yBAEF,+VAGE,SACA,UACA,iBACA,cACA,gDAGF,8KACE,iDACA,wDAQJ,qDACE,uCAEF,iGACE,uCAEF,6GACE,gCAEF,yBACE,gCAEF,oCACE,gCAEF,2BACE,gCAOJ,mBACE,kBAEA,kBACA,MACA,iBACA,aACA,kBAGF,iBACE,eACA,+BACA,kBAGJ,uBACE,cACA,2CAFF,uBAGI,mBA6BJ,SACE,WACA,YACA,+BAEA,8BACE,4BACA,8BACA,mBACA,kBACA,YACA,gBACA,sBAKJ,WACE,kBACA,qBACA,qBACA,yBACA,mBAGA,kBACA,MACA,WAME,4EACA,6BACE,YACA,WACA,gBC3TN,gDAEE,kBACA,UACA,oBAGF,0DAEE,kBACA,kBACA,eACA,qBACA,YACA,iBACA,eACA,qBACA,iBAGF,iDAEE,WACA,kBACA,OACA,MACA,WACA,WACA,YACA,UACA,qBAIF,iOAME,kBAGF,6EAEE,wDAGF,sCACE,mBAIF,iCACE,+BAGF,mHAGE,6CAGF,yEAEE,6CAGF,gCACE,sBAIF,yCACE,qBAIF,sCACE,sEAIF,mDACE,gDAGF,kDACE,YACA,gDAIF,0FAEE,+BACA,4CAGF,2BACE,qCAGF,gDACE,4CAGF,yCACE,gDACA,4CC1GF,sDAEE,kBACA,UACA,oBAMA,iCACE,kBACA,kBACA,eACA,qBACA,YACA,iBACA,eACA,iBAIF,+FAEE,WACA,kBACA,MACA,OACA,WACA,YACA,UACA,wDACA,kBACA,eACA,eAGF,uDACE,SACA,mBAGF,+DACE,YACA,gDAIF,oDACE,mBACA,SACA,kBACA,sCACA,iCAKF,gDACE,SACA,UACA,WACA,YACA,mCACA,oCACA,mDACA,oDACA,wBACA,2BACA,2BAGF,6CACE,sDACA,uDAMF,sDACE,UACA,WACA,WACA,YACA,gBACA,iBACA,mDACA,mBACA,wBACA,2BACA,2BAIF,+DACE,sDACA,+BAOF,iDACE,kBAGF,mGAEE,WACA,OACA,kBAEA,mGACA,UAIF,gEACE,QACA,SACA,+BACA,SACA,SACA,yBACA,2BAGF,+DACE,YACA,WACA,+BACA,wDACA,QACA,UAKA,0DACE,MACA,SACA,UACA,YACA,mCACA,oCACA,sDACA,uDACA,yBACA,2BAGF,yDACE,MACA,WACA,YACA,6CACA,6CACA,UAKJ,8DACE,kBACA,sDACA,iCAGF,sEACE,kBACA,6CACA,yCAIF,yEACE,+BACA,+BAGF,wEACE,2BACA,gDAGF,mEACE,+BAGF,kEACE,gDACA,4CCrMJ,QACE,qBACA,oBACA,oBACA,iBACA,gBACA,kBACA,mFACA,qFAGF,kBAEE,0CACA,iBAGF,cACE,eAGF,mCACE,UACA,QACA,SAIA,kDACE,6CACA,yCAIA,iHACE,kBACA,uFACA,qBACA,sBAQN,qBACE,WACA,qBACA,kBACA,yBACA,2BACA,mBACA,iBACA,yCAGA,qDAEA,mBACA,kBACA,+BACA,sBACA,cAGA,uDACE,WACA,kBACA,qBACA,sBACA,uBACA,kBAEA,oBACA,mBAEA,oFAIF,2BAEE,uBACA,sBAOJ,kLAGI,qBAGJ,iEACE,iEAIF,0IAEE,iEAGF,yDACE,iCAGF,yHAEE,iCAIF,8CACE,eACA,WCvHF,uBACE,UACA,wCAGF,OACE,UACA,6CACA,WACA,YACA,qDACA,kBACA,YAGF,gBAoCE,kBA0BA,uBACE,kBACA,QACA,MACA,SACA,cACA,UACA,uCAKF,6BACE,QACA,SACA,gBACA,kBACA,MACA,WAIJ,gBACE,qCAIA,+BACE,qCAEF,gCACE,oCAIJ,+CACE,qCACA,eACA,iBAGF,kBACE,qCAGF,4FAGE,qCA2CA,wBACE,YACA,WACA,gBACA,YAKJ,6BACE,qCACA,2CACE,wCAEF,kCACE,6CAEF,gDACE,kBC1LJ,YAEE,aACA,uCACA,SAGA,+BACE,gBAGF,uCAEA,+DACE,YACA,iBAGF,iBACE,eAGF,6BAME,kBACA,MACA,QACA,OACA,SAEA,eACA,WACA,SACA,UACA,UACA,eACA,wBAhBA,yDACE,aCzBN,aACE,kBAGF,2CAGE,eAGF,kBACE,kBACA,+BACA,YACA,aACA,WACA,cACA,UAEA,wBACE,aAIJ,yBACE,kBACA,SACA,OACA,YACA,SACA,QACA,kBACA,6CACA,gBAEA,yBACA,yBAEA,gCACE,cACA,WACA,kBACA,kCACA,YACA,wBAGF,gCACE,4BAEA,uCACE,qCACA,iBACA,eACA,eAsBN,kBACE,wBAGF,iDAnBE,WAEA,YAqBF,wCAjBE,YACA,YACA,WACA,kBACA,uCACA,0BAcA,wBACA,6CACA,yBACA,kBAIF,6EACE,sEAQF,oCAzCE,WAEA,YA2CF,oCACE,SAGF,oCA3CE,YACA,YACA,WACA,kBACA,uCACA,0BAwCA,gBAIF,iCACE,uBACA,oBAGF,yEACE,sEAKF,6BACE,WAEA,yBAEA,2BACA,mBAEA,oBAEF,yEAEE,uCAEF,sEAEE,4CAEF,6BA9EE,YACA,YACA,WACA,kBACA,uCACA,0BA8EF,kEACE,sECvJF,mBACE,gBAEA,yBACE,eAGF,sBACE,UAGF,qBACE,qBACA,gBACA,oCACA,kBACA,YACA,iBACA,0DAEA,2BACE,wCACA,kBAEF,4BACE,kCACA,gBACA,kBACA,kDC3BN,SACE,uBACA,0BACA,wBACA,4BACA,kDAEA,eACA,2BACA,OACA,MACA,SACA,4BACA,aACA,UACA,YACA,gBACA,sBACA,2BACA,4BACA,iBAEA,iDACA,6CAIA,uBACE,QACA,2BACA,UACA,2BAGF,sBACE,SASF,iBACE,iCAGF,0KAGE,oFAGF,gDAEA,YACE,gBACA,aACA,qBAEF,cAIE,cACA,iCAWA,aACA,kCACA,mCACA,gBACA,mBACA,gBACA,oBAEA,0GACE,iDAEA,gHAGE,oFAIJ,oHACE,iBAIF,qJAEE,oBACA,sBAEA,kBAIJ,kBACE,6CAGF,oBACE,eACA,oBACA,UACA,mCACA,gBACA,uCAIF,oBACE,kBACA,wEACA,8CAEA,sBAKE,YACA,UALA,4BACE,+BAOJ,gCACE,gBACA,kBACA,MACA,QACA,SACA,OACA,WAGF,iFACE,cAGF,4BACE,YACA,WAGF,qDAEE,mCACA,gDAGF,0BACE,gBACA,gBAGF,2BACE,oBACA,gBAMN,aAKE,YACA,eACA,MACA,OACA,YAPA,2BACE,QAUJ,uBAME,OACA,wBACA,eANA,qCACE,QACA,UAQJ,8CAEI,uBACE,4BAEA,qCACE,2BAGJ,WACE,iCAEF,oBACE,yDAKN,2BACE,UAGF,iBACE,eACA,MACA,OACA,QACA,UACA,aACA,gCACA,YACA,aAMA,0DACE,YACA,gBAEF,wEACE,YAEF,oEACE,YCrPJ,UACE,kBACA,WACA,cACA,WAEA,kBACA,sBACA,gBACA,yDAEA,uBACE,kBACA,MACA,OACA,SACA,6CACA,4BAGF,yBACE,6CAEA,gCACE,WACA,kBACA,yBACA,MACA,OACA,SACA,uBAEA,8EAIF,+BACE,WACA,kBACA,yBACA,MACA,OACA,SACA,uBAEA,+EACA,sBAKN,yBACE,GACE,UACA,WAEF,IACE,UACA,WAEF,KACE,UACA,YAIJ,+BACE,GACE,WACA,WAEF,IACE,UACA,UAEF,KACE,UACA,WAmCJ,mBACE,qBACA,kBACA,WACA,YAEA,yBACE,WACA,YAGF,uBACE,WACA,YAGF,0BAEE,0DACA,kDAIJ,oCACE,qCAGF,4BACE,6BAGF,eACE,kBACA,WACA,YACA,UACA,yCAGF,iCAEE,qBAGF,+BAEE,qBAGF,qCAEE,qBAGF,mCAEE,qBAgBF,oCAEE,0JACA,kJAGF,mCAEE,yJACA,iJAGF,sCAEE,4JACA,oJAGF,qCAEE,2JACA,mJAGF,6LAME,UACA,uFACA,+EAGF,sCACE,uCACA,qCACA,uCACA,qCACA,uCACA,qCACA,uCACA,sCAGF,8BACE,+BACA,6BACA,+BACA,6BACA,+BACA,6BACA,+BACA,8BAGF,oCACE,eACA,cACA,cACA,cACA,cACA,gBAGF,4BACE,eACA,cACA,cACA,cACA,cACA,gBAGF,mCACE,eACA,cACA,cACA,cACA,eAGF,2BACE,eACA,cACA,cACA,cACA,eAGF,sCACE,eACA,cACA,cACA,cACA,eAGF,8BACE,eACA,cACA,cACA,cACA,eAGF,qCACE,eACA,cACA,cACA,cACA,gBAGF,6BACE,eACA,cACA,cACA,cACA,gBAOF,WACE,kBACA,MACA,SACA,UACA,YACA,gBACA,qBAGF,mBACE,YACA,WAGF,gBACE,qBACA,kBACA,UACA,YACA,gBACA,qBAEA,wBACE,WACA,YACA,iBACA,mBACA,qBACA,6CACA,kBACA,uBACA,eACA,kBACA,MACA,QACA,SAGF,6BACE,OACA,4CACA,iCACA,yBAEF,8BACE,WACA,2CACA,kCACA,0BAMJ,qCAEE,8EACA,sEAGF,sCAEE,+EACA,uEAGF,6BACE,sCACA,oCACA,qCAGF,qBACE,8BACA,4BACA,6BAGF,8BACE,uCACA,mCACA,sCAGF,sBACE,+BACA,2BACA,8BAGF,2BAEE,sGACA,8FAGF,4BACE,eACA,cAGF,oBACE,eACA,cChaF,QACE,kBACA,aACA,WAGA,mBACE,YACA,WACA,kBACA,MACA,OACA,QACA,SAEA,6BACE,eACA,qBACA,YAGF,iCACE,eACA,qBACA,UACA,YAEA,iDACE,uCAEA,wDACE,kDAOR,gBACE,6CACA,SACA,aACA,eACA,qBAEA,mBACE,eACA,qBACA,UACA,kBACA,MACA,OACA,UACA,WACA,eACA,gBAEA,uBACE,YACA,WACA,sBACA,2BAGF,4BACE,WACA,kBACA,QACA,SACA,UACA,UAEA,8BACE,4BAIJ,0BACE,UAKN,oBACE,eACA,qBACA,kBACA,kBACA,OACA,QACA,SACA,SAEA,oCACE,qBACA,kBACA,YACA,WACA,cAGF,wCACE,kBACA,MACA,OACA,eACA,kDAEA,gCACA,kBACA,eAMA,WACA,YALA,+CACE,6CCjHR,UACE,yBAsCA,gBACA,kBACA,WACA,8BACA,kBACA,4BACA,wBA1CA,0BACE,MACA,OAEA,+CAKE,kBACA,OACA,QACA,YACA,UARA,+DACE,YAUJ,yCACE,WACA,YACA,kCACA,kBACA,MACA,OAEA,4CACE,eACA,gBACA,iBAGF,2CACE,eAaN,yBACE,kBACA,sCACA,uCACA,kBACA,MACA,OAEA,6BACE,WAIJ,sBACE,eACA,qBAEA,kBACA,kBACA,OACA,QACA,SACA,SAEA,sCAKE,qBACA,kBACA,eACA,WACA,UACA,gBACA,uCAEA,gCACA,kBAbA,6CACE,kDAiBN,uGAEE,oBC5FJ,oBACE,YACA,aACA,eACA,aACA,kBACA,6BAGF,yBACE,mBACA,yBAEA,qCACE,mBACA,YACA,WACE,wFAIJ,kDACE,mBAEF,iDACE,mBACA,qEACA,WACE,2CAMN,YACE,kBACA,eACA,kBACA,uDACA,kCACA,wGACA,WACA,YACA,UACA,mBACA,mGAIF,oBACE,kBACA,mBAGF,iBAwBE,kBACA,kBACA,cAzBA,iDAEE,WACA,cACA,kBACA,WACA,YACA,kBACA,6CAEF,yBACE,mBACA,yBAEF,wBACE,kBACA,WACE,wCAGF,WAQJ,mBAME,QACA,SACA,gCAEA,cACA,6BAVA,gIAEE,gBAWJ,0CACE,gCACE,YACA,cCpGJ,OAiBE,iBACA,kBAjBA,eACE,WACA,cACA,kBACA,oBACA,WACA,YACA,MACA,OACA,yBACA,sBACA,qCACA,qEACA,WAOJ,2BACE,GACE,UACA,mBAEF,IACE,UACA,qBAEF,KACE,UACA,sBC/BJ,kBACE,gBACA,gBACA,gBAGF,oCACE,aACA,sBACA,UACA,6CAGF,qBACE,aACA,8BACA,YACA,cAEA,wCACE,aAIA,2CAKE,mBACA,kBACA,SANA,iDACE,mBAQJ,4CACE,aAIJ,wCACE,WAGF,yCACE,WAGF,kEAEE,oBACA,mBAGF,0EAEE,4CAIJ,wBACE,eACA,eACA,+BACA,YAKF,yBACE,YACA,6CACA,qCACA,kBACA,gBAEA,oCACE,cACA,iBACA,iBACA,qCAGF,oCACE,cACA,iBACA,iBACA,gBAMJ,+BACE,cAGF,kBACE,YACA,eACA,cAEA,wBACE,mBAGF,qBACE,iBACA,kBAGF,qBACE,YAGF,uBACE,qBACA,6CAGF,qBACE,wCAiBA,kBACA,UAhBA,8BACE,kCAGF,iCACE,6CACA,qCAGF,+EAEE,qCACA,oBAQN,uBACE,+BACA,YACA,iBACA,cACA,WACA,kBACA,cACA,eACA,cAEA,6BACE,iEAGF,6BACE,iEAMJ,mBACE,YACA,cACA,mBACA,aACA,8BAGF,wEAIE,kCACA,eAGF,kBACE,gCAKF,2CACE,kBACE,gBAGF,oCACE,mBAGF,yBACE,eAGF,0DAGE,YAGF,uBACE,kBC9MJ,kBACE,gBACA,gBAGF,oCACE,aACA,sBACA,UAGF,cACE,qCAKF,4BACE,YACA,YACA,6CACA,aACA,gBAGF,2BACE,eACA,iBACA,kBACA,0CACA,gBACA,kBACA,iBAEA,4CACE,YACA,2BACA,kBACA,eACA,cAIJ,6EAGE,eAGF,wCACE,iBACA,UACA,iBAGF,0CACE,UACA,gBAGF,8BACE,WAGF,0BACE,iBACA,kBACA,WACA,YACA,gBAKF,2BACE,cACA,6CAGF,kBACE,iCACA,kBACA,YACA,aACA,iBACA,kBACA,YACA,gBACA,kBACA,iBAGF,oCAEE,kBACA,OACA,QACA,MACA,SAGF,oBACE,kBAGF,iBACE,kBACA,wCACA,iBACA,kBACA,WACA,YACA,kBACA,eACA,eAGF,+CAEE,iEAGF,iBACE,yCAGF,qBASE,UARA,sCACE,0BAGF,wCACE,0BAMJ,mBACE,yBAEA,wBACE,mCACA,eACA,qBAIJ,uBACE,YAGF,2BACE,YACA,iCAGF,sBACE,YACA,iCAKF,mBACE,cACA,iBACA,aACA,8BAGF,kBACE,gCAGF,kBACE,kCAGF,oCAEE,eAIF,2CACE,kBACE,gBAGF,oCACE,mBAGF,2BACE,QAGF,0BACE,kBACA,WACA,YACA,kBACA","file":"materialize.min.css"} \ No newline at end of file diff --git a/dist/js/materialize.cjs.js b/dist/js/materialize.cjs.js deleted file mode 100644 index 39e26a5890..0000000000 --- a/dist/js/materialize.cjs.js +++ /dev/null @@ -1,7593 +0,0 @@ -/*! -* Materialize v2.1.1 (https://materializeweb.com) -* Copyright 2014-2024 Materialize -* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE) -*/ -'use strict'; - -/** - * Class with utilitary functions for global usage. - */ -class Utils { - /** Specifies wether tab is pressed or not. */ - static tabPressed = false; - /** Specifies wether there is a key pressed. */ - static keyDown = false; - /** - * Key maps. - */ - static keys = { - TAB: ['Tab'], - ENTER: ['Enter'], - ESC: ['Escape', 'Esc'], - BACKSPACE: ['Backspace'], - ARROW_UP: ['ArrowUp', 'Up'], - ARROW_DOWN: ['ArrowDown', 'Down'], - ARROW_LEFT: ['ArrowLeft', 'Left'], - ARROW_RIGHT: ['ArrowRight', 'Right'], - DELETE: ['Delete', 'Del'], - }; - /** - * Detects when a key is pressed. - * @param e Event instance. - */ - static docHandleKeydown(e) { - Utils.keyDown = true; - if ([...Utils.keys.TAB, ...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP].includes(e.key)) { - Utils.tabPressed = true; - } - } - /** - * Detects when a key is released. - * @param e Event instance. - */ - static docHandleKeyup(e) { - Utils.keyDown = false; - if ([...Utils.keys.TAB, ...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP].includes(e.key)) { - Utils.tabPressed = false; - } - } - /** - * Detects when document is focused. - * @param e Event instance. - */ - static docHandleFocus(e) { - if (Utils.keyDown) { - document.body.classList.add('keyboard-focused'); - } - } - /** - * Detects when document is not focused. - * @param e Event instance. - */ - static docHandleBlur(e) { - document.body.classList.remove('keyboard-focused'); - } - /** - * Generates a unique string identifier. - */ - static guid() { - const s4 = () => { - return Math.floor((1 + Math.random()) * 0x10000) - .toString(16) - .substring(1); - }; - return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); - } - /** - * Checks for exceeded edges - * @param container Container element. - * @param bounding Bounding rect. - * @param offset Element offset. - */ - static checkWithinContainer(container, bounding, offset) { - let edges = { - top: false, - right: false, - bottom: false, - left: false - }; - let containerRect = container.getBoundingClientRect(); - // If body element is smaller than viewport, use viewport height instead. - let containerBottom = container === document.body - ? Math.max(containerRect.bottom, window.innerHeight) - : containerRect.bottom; - let scrollLeft = container.scrollLeft; - let scrollTop = container.scrollTop; - let scrolledX = bounding.left - scrollLeft; - let scrolledY = bounding.top - scrollTop; - // Check for container and viewport for each edge - if (scrolledX < containerRect.left + offset || scrolledX < offset) { - edges.left = true; - } - if (scrolledX + bounding.width > containerRect.right - offset || - scrolledX + bounding.width > window.innerWidth - offset) { - edges.right = true; - } - if (scrolledY < containerRect.top + offset || scrolledY < offset) { - edges.top = true; - } - if (scrolledY + bounding.height > containerBottom - offset || - scrolledY + bounding.height > window.innerHeight - offset) { - edges.bottom = true; - } - return edges; - } - /** - * Checks if element can be aligned in multiple directions. - * @param el Element to be inspected. - * @param container Container element. - * @param bounding Bounding rect. - * @param offset Element offset. - */ - static checkPossibleAlignments(el, container, bounding, offset) { - let canAlign = { - top: true, - right: true, - bottom: true, - left: true, - spaceOnTop: null, - spaceOnRight: null, - spaceOnBottom: null, - spaceOnLeft: null - }; - let containerAllowsOverflow = getComputedStyle(container).overflow === 'visible'; - let containerRect = container.getBoundingClientRect(); - let containerHeight = Math.min(containerRect.height, window.innerHeight); - let containerWidth = Math.min(containerRect.width, window.innerWidth); - let elOffsetRect = el.getBoundingClientRect(); - let scrollLeft = container.scrollLeft; - let scrollTop = container.scrollTop; - let scrolledX = bounding.left - scrollLeft; - let scrolledYTopEdge = bounding.top - scrollTop; - let scrolledYBottomEdge = bounding.top + elOffsetRect.height - scrollTop; - // Check for container and viewport for left - canAlign.spaceOnRight = !containerAllowsOverflow - ? containerWidth - (scrolledX + bounding.width) - : window.innerWidth - (elOffsetRect.left + bounding.width); - if (canAlign.spaceOnRight < 0) { - canAlign.left = false; - } - // Check for container and viewport for Right - canAlign.spaceOnLeft = !containerAllowsOverflow - ? scrolledX - bounding.width + elOffsetRect.width - : elOffsetRect.right - bounding.width; - if (canAlign.spaceOnLeft < 0) { - canAlign.right = false; - } - // Check for container and viewport for Top - canAlign.spaceOnBottom = !containerAllowsOverflow - ? containerHeight - (scrolledYTopEdge + bounding.height + offset) - : window.innerHeight - (elOffsetRect.top + bounding.height + offset); - if (canAlign.spaceOnBottom < 0) { - canAlign.top = false; - } - // Check for container and viewport for Bottom - canAlign.spaceOnTop = !containerAllowsOverflow - ? scrolledYBottomEdge - (bounding.height - offset) - : elOffsetRect.bottom - (bounding.height + offset); - if (canAlign.spaceOnTop < 0) { - canAlign.bottom = false; - } - return canAlign; - } - /** - * Retrieves target element id from trigger. - * @param trigger Trigger element. - */ - static getIdFromTrigger(trigger) { - let id = trigger.dataset.target; - if (!id) { - id = trigger.getAttribute('href'); - return id ? id.slice(1) : ''; - } - return id; - } - /** - * Retrieves document scroll postion from top. - */ - static getDocumentScrollTop() { - return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0; - } - ; - /** - * Retrieves document scroll postion from left. - */ - static getDocumentScrollLeft() { - return window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft || 0; - } - /** - * Fires the given function after a certain ammount of time. - * @param func Function to be fired. - * @param wait Wait time. - * @param options Additional options. - */ - static throttle(func, wait, options = null) { - let context, args, result; - let timeout = null; - let previous = 0; - options || (options = {}); - let later = function () { - previous = options.leading === false ? 0 : new Date().getTime(); - timeout = null; - result = func.apply(context, args); - context = args = null; - }; - return function () { - let now = new Date().getTime(); - if (!previous && options.leading === false) - previous = now; - let remaining = wait - (now - previous); - context = this; - args = arguments; - if (remaining <= 0) { - clearTimeout(timeout); - timeout = null; - previous = now; - result = func.apply(context, args); - context = args = null; - } - else if (!timeout && options.trailing !== false) { - timeout = setTimeout(later, remaining); - } - return result; - }; - } -} - -/** - * Base class implementation for Materialize components. - */ -class Component { - /** - * The DOM element the plugin was initialized with. - */ - el; - /** - * The options the instance was initialized with. - */ - options; - /** - * Constructs component instance and set everything up. - */ - constructor(el, options, classDef) { - // Display error if el is not a valid HTML Element - if (!(el instanceof HTMLElement)) { - console.error(Error(el + ' is not an HTML Element')); - } - // If exists, destroy and reinitialize in child - let ins = classDef.getInstance(el); - if (!!ins) { - ins.destroy(); - } - this.el = el; - } - /** - * Initializes component instances. - * @param els HTML elements. - * @param options Component options. - * @param classDef Class definition. - */ - static init(els, options, classDef) { - let instances = null; - if (els instanceof Element) { - instances = new classDef(els, options); - } - else if (!!els && els.length) { - instances = []; - for (let i = 0; i < els.length; i++) { - instances.push(new classDef(els[i], options)); - } - } - return instances; - } - /** - * @returns default options for component instance. - */ - static get defaults() { return {}; } - /** - * Retrieves component instance for the given element. - * @param el Associated HTML Element. - */ - static getInstance(el) { - throw new Error("This method must be implemented."); - } - /** - * Destroy plugin instance and teardown. - */ - destroy() { throw new Error("This method must be implemented."); } -} - -const _defaults$l = { - alignment: 'left', - autoFocus: true, - constrainWidth: true, - container: null, - coverTrigger: true, - closeOnClick: true, - hover: false, - inDuration: 150, - outDuration: 250, - onOpenStart: null, - onOpenEnd: null, - onCloseStart: null, - onCloseEnd: null, - onItemClick: null -}; -class Dropdown extends Component { - static _dropdowns = []; - /** ID of the dropdown element. */ - id; - /** The DOM element of the dropdown. */ - dropdownEl; - /** If the dropdown is open. */ - isOpen; - /** If the dropdown content is scrollable. */ - isScrollable; - isTouchMoving; - /** The index of the item focused. */ - focusedIndex; - filterQuery; - filterTimeout; - constructor(el, options) { - super(el, options, Dropdown); - this.el.M_Dropdown = this; - Dropdown._dropdowns.push(this); - this.id = Utils.getIdFromTrigger(el); - this.dropdownEl = document.getElementById(this.id); - this.options = { - ...Dropdown.defaults, - ...options - }; - this.isOpen = false; - this.isScrollable = false; - this.isTouchMoving = false; - this.focusedIndex = -1; - this.filterQuery = []; - // Move dropdown-content after dropdown-trigger - this._moveDropdown(); - this._makeDropdownFocusable(); - this._setupEventHandlers(); - } - static get defaults() { - return _defaults$l; - } - /** - * Initializes instances of Dropdown. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, Dropdown); - } - static getInstance(el) { - return el.M_Dropdown; - } - destroy() { - this._resetDropdownStyles(); - this._removeEventHandlers(); - Dropdown._dropdowns.splice(Dropdown._dropdowns.indexOf(this), 1); - this.el.M_Dropdown = undefined; - } - _setupEventHandlers() { - // Trigger keydown handler - this.el.addEventListener('keydown', this._handleTriggerKeydown); - // Item click handler - this.dropdownEl?.addEventListener('click', this._handleDropdownClick); - // Hover event handlers - if (this.options.hover) { - this.el.addEventListener('mouseenter', this._handleMouseEnter); - this.el.addEventListener('mouseleave', this._handleMouseLeave); - this.dropdownEl.addEventListener('mouseleave', this._handleMouseLeave); - // Click event handlers - } - else { - this.el.addEventListener('click', this._handleClick); - } - } - _removeEventHandlers() { - this.el.removeEventListener('keydown', this._handleTriggerKeydown); - this.dropdownEl.removeEventListener('click', this._handleDropdownClick); - if (this.options.hover) { - this.el.removeEventListener('mouseenter', this._handleMouseEnter); - this.el.removeEventListener('mouseleave', this._handleMouseLeave); - this.dropdownEl.removeEventListener('mouseleave', this._handleMouseLeave); - } - else { - this.el.removeEventListener('click', this._handleClick); - } - } - _setupTemporaryEventHandlers() { - document.body.addEventListener('click', this._handleDocumentClick); - document.body.addEventListener('touchmove', this._handleDocumentTouchmove); - this.dropdownEl.addEventListener('keydown', this._handleDropdownKeydown); - window.addEventListener('resize', this._handleWindowResize); - } - _removeTemporaryEventHandlers() { - document.body.removeEventListener('click', this._handleDocumentClick); - document.body.removeEventListener('touchmove', this._handleDocumentTouchmove); - this.dropdownEl.removeEventListener('keydown', this._handleDropdownKeydown); - window.removeEventListener('resize', this._handleWindowResize); - } - _handleClick = (e) => { - e.preventDefault(); - if (this.isOpen) { - this.close(); - } - else { - this.open(); - } - }; - _handleMouseEnter = () => { - this.open(); - }; - _handleMouseLeave = (e) => { - const toEl = e.relatedTarget; - const leaveToDropdownContent = !!toEl.closest('.dropdown-content'); - let leaveToActiveDropdownTrigger = false; - const closestTrigger = toEl.closest('.dropdown-trigger'); - if (closestTrigger && - !!closestTrigger.M_Dropdown && - closestTrigger.M_Dropdown.isOpen) { - leaveToActiveDropdownTrigger = true; - } - // Close hover dropdown if mouse did not leave to either active dropdown-trigger or dropdown-content - if (!leaveToActiveDropdownTrigger && !leaveToDropdownContent) { - this.close(); - } - }; - _handleDocumentClick = (e) => { - const target = e.target; - if (this.options.closeOnClick && - target.closest('.dropdown-content') && - !this.isTouchMoving) { - // isTouchMoving to check if scrolling on mobile. - this.close(); - } - else if (!target.closest('.dropdown-content')) { - // Do this one frame later so that if the element clicked also triggers _handleClick - // For example, if a label for a select was clicked, that we don't close/open the dropdown - setTimeout(() => { - if (this.isOpen) { - this.close(); - } - }, 0); - } - this.isTouchMoving = false; - }; - _handleTriggerKeydown = (e) => { - // ARROW DOWN OR ENTER WHEN SELECT IS CLOSED - open Dropdown - const arrowDownOrEnter = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ENTER.includes(e.key); - if (arrowDownOrEnter && !this.isOpen) { - e.preventDefault(); - this.open(); - } - }; - _handleDocumentTouchmove = (e) => { - const target = e.target; - if (target.closest('.dropdown-content')) { - this.isTouchMoving = true; - } - }; - _handleDropdownClick = (e) => { - // onItemClick callback - if (typeof this.options.onItemClick === 'function') { - const itemEl = e.target.closest('li'); - this.options.onItemClick.call(this, itemEl); - } - }; - _handleDropdownKeydown = (e) => { - const arrowUpOrDown = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ARROW_UP.includes(e.key); - if (Utils.keys.TAB.includes(e.key)) { - e.preventDefault(); - this.close(); - } - // Navigate down dropdown list - else if (arrowUpOrDown && this.isOpen) { - e.preventDefault(); - const direction = Utils.keys.ARROW_DOWN.includes(e.key) ? 1 : -1; - let newFocusedIndex = this.focusedIndex; - let hasFoundNewIndex = false; - do { - newFocusedIndex = newFocusedIndex + direction; - if (!!this.dropdownEl.children[newFocusedIndex] && - this.dropdownEl.children[newFocusedIndex].tabIndex !== -1) { - hasFoundNewIndex = true; - break; - } - } while (newFocusedIndex < this.dropdownEl.children.length && newFocusedIndex >= 0); - if (hasFoundNewIndex) { - // Remove active class from old element - if (this.focusedIndex >= 0) - this.dropdownEl.children[this.focusedIndex].classList.remove('active'); - this.focusedIndex = newFocusedIndex; - this._focusFocusedItem(); - } - } - // ENTER selects choice on focused item - else if (Utils.keys.ENTER.includes(e.key) && this.isOpen) { - // Search for and ` + - ''); - } - renderRow(days, isRTL, isRowSelected) { - return ('' + - (isRTL ? days.reverse() : days).join('') + - ''); - } - renderTable(opts, data, randId) { - return ('
' + - this.renderHead(opts) + - this.renderBody(data) + - '
'); - } - renderHead(opts) { - let i, arr = []; - for (i = 0; i < 7; i++) { - arr.push(`${this.renderDayName(opts, i, true)}`); - } - return '' + (opts.isRTL ? arr.reverse() : arr).join('') + ''; - } - renderBody(rows) { - return '' + rows.join('') + ''; - } - renderTitle(instance, c, year, month, refYear, randId) { - let i, j, arr, opts = this.options, isMinYear = year === opts.minYear, isMaxYear = year === opts.maxYear, html = '
', monthHtml, yearHtml, prev = true, next = true; - for (arr = [], i = 0; i < 12; i++) { - arr.push(''); - } - monthHtml = ''; - if (Array.isArray(opts.yearRange)) { - i = opts.yearRange[0]; - j = opts.yearRange[1] + 1; - } - else { - i = year - opts.yearRange; - j = 1 + year + opts.yearRange; - } - for (arr = []; i < j && i <= opts.maxYear; i++) { - if (i >= opts.minYear) { - arr.push(``); - } - } - if (opts.yearRangeReverse) - arr.reverse(); - yearHtml = ``; - let leftArrow = ''; - html += ``; - html += '
'; - if (opts.showMonthAfterYear) { - html += yearHtml + monthHtml; - } - else { - html += monthHtml + yearHtml; - } - html += '
'; - if (isMinYear && (month === 0 || opts.minMonth >= month)) { - prev = false; - } - if (isMaxYear && (month === 11 || opts.maxMonth <= month)) { - next = false; - } - let rightArrow = ''; - html += ``; - return (html += '
'); - } - // refresh HTML - draw(force = false) { - if (!this.isOpen && !force) - return; - let opts = this.options, minYear = opts.minYear, maxYear = opts.maxYear, minMonth = opts.minMonth, maxMonth = opts.maxMonth, html = '', randId; - if (this._y <= minYear) { - this._y = minYear; - if (!isNaN(minMonth) && this._m < minMonth) { - this._m = minMonth; - } - } - if (this._y >= maxYear) { - this._y = maxYear; - if (!isNaN(maxMonth) && this._m > maxMonth) { - this._m = maxMonth; - } - } - randId = - 'datepicker-title-' + - Math.random() - .toString(36) - .replace(/[^a-z]+/g, '') - .substr(0, 2); - for (let c = 0; c < 1; c++) { - this._renderDateDisplay(); - html += - this.renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year, randId) + this.render(this.calendars[c].year, this.calendars[c].month, randId); - } - this.destroySelects(); - this.calendarEl.innerHTML = html; - // Init Materialize Select - let yearSelect = this.calendarEl.querySelector('.orig-select-year'); - let monthSelect = this.calendarEl.querySelector('.orig-select-month'); - FormSelect.init(yearSelect, { - classes: 'select-year', - dropdownOptions: { container: document.body, constrainWidth: false } - }); - FormSelect.init(monthSelect, { - classes: 'select-month', - dropdownOptions: { container: document.body, constrainWidth: false } - }); - // Add change handlers for select - yearSelect.addEventListener('change', this._handleYearChange); - monthSelect.addEventListener('change', this._handleMonthChange); - if (typeof this.options.onDraw === 'function') { - this.options.onDraw.call(this); - } - } - _setupEventHandlers() { - this.el.addEventListener('click', this._handleInputClick); - this.el.addEventListener('keydown', this._handleInputKeydown); - this.el.addEventListener('change', this._handleInputChange); - this.calendarEl.addEventListener('click', this._handleCalendarClick); - this.doneBtn.addEventListener('click', this._finishSelection); - this.cancelBtn.addEventListener('click', this.close); - if (this.options.showClearBtn) { - this.clearBtn.addEventListener('click', this._handleClearClick); - } - } - _setupVariables() { - const template = document.createElement('template'); - template.innerHTML = Datepicker._template.trim(); - this.modalEl = template.content.firstChild; - this.calendarEl = this.modalEl.querySelector('.datepicker-calendar'); - this.yearTextEl = this.modalEl.querySelector('.year-text'); - this.dateTextEl = this.modalEl.querySelector('.date-text'); - if (this.options.showClearBtn) { - this.clearBtn = this.modalEl.querySelector('.datepicker-clear'); - } - this.doneBtn = this.modalEl.querySelector('.datepicker-done'); - this.cancelBtn = this.modalEl.querySelector('.datepicker-cancel'); - this.formats = { - d: () => { - return this.date.getDate(); - }, - dd: () => { - let d = this.date.getDate(); - return (d < 10 ? '0' : '') + d; - }, - ddd: () => { - return this.options.i18n.weekdaysShort[this.date.getDay()]; - }, - dddd: () => { - return this.options.i18n.weekdays[this.date.getDay()]; - }, - m: () => { - return this.date.getMonth() + 1; - }, - mm: () => { - let m = this.date.getMonth() + 1; - return (m < 10 ? '0' : '') + m; - }, - mmm: () => { - return this.options.i18n.monthsShort[this.date.getMonth()]; - }, - mmmm: () => { - return this.options.i18n.months[this.date.getMonth()]; - }, - yy: () => { - return ('' + this.date.getFullYear()).slice(2); - }, - yyyy: () => { - return this.date.getFullYear(); - } - }; - } - _removeEventHandlers() { - this.el.removeEventListener('click', this._handleInputClick); - this.el.removeEventListener('keydown', this._handleInputKeydown); - this.el.removeEventListener('change', this._handleInputChange); - this.calendarEl.removeEventListener('click', this._handleCalendarClick); - } - _handleInputClick = () => { - this.open(); - }; - _handleInputKeydown = (e) => { - if (Utils.keys.ENTER.includes(e.key)) { - e.preventDefault(); - this.open(); - } - }; - _handleCalendarClick = (e) => { - if (!this.isOpen) - return; - const target = (e.target); - if (!target.classList.contains('is-disabled')) { - if (target.classList.contains('datepicker-day-button') && - !target.classList.contains('is-empty') && - !target.parentElement.classList.contains('is-disabled')) { - this.setDate(new Date(e.target.getAttribute('data-year'), e.target.getAttribute('data-month'), e.target.getAttribute('data-day'))); - if (this.options.autoClose) { - this._finishSelection(); - } - } - else if (target.closest('.month-prev')) { - this.prevMonth(); - } - else if (target.closest('.month-next')) { - this.nextMonth(); - } - } - }; - _handleClearClick = () => { - this.date = null; - this.setInputValue(); - this.close(); - }; - _handleMonthChange = (e) => { - this.gotoMonth(e.target.value); - }; - _handleYearChange = (e) => { - this.gotoYear(e.target.value); - }; - // change view to a specific month (zero-index, e.g. 0: January) - gotoMonth(month) { - if (!isNaN(month)) { - this.calendars[0].month = parseInt(month, 10); - this.adjustCalendars(); - } - } - // change view to a specific full year (e.g. "2012") - gotoYear(year) { - if (!isNaN(year)) { - this.calendars[0].year = parseInt(year, 10); - this.adjustCalendars(); - } - } - _handleInputChange = (e) => { - let date; - // Prevent change event from being fired when triggered by the plugin - if (e['detail']?.firedBy === this) - return; - if (this.options.parse) { - date = this.options.parse(this.el.value, typeof this.options.format === "function" - ? this.options.format(new Date(this.el.value)) - : this.options.format); - } - else { - date = new Date(Date.parse(this.el.value)); - } - if (Datepicker._isDate(date)) - this.setDate(date); - }; - renderDayName(opts, day, abbr = false) { - day += opts.firstDay; - while (day >= 7) { - day -= 7; - } - return abbr ? opts.i18n.weekdaysAbbrev[day] : opts.i18n.weekdays[day]; - } - // Set input value to the selected date and close Datepicker - _finishSelection = () => { - this.setInputValue(); - this.close(); - }; - /** - * Open datepicker. - */ - open = () => { - if (this.isOpen) - return; - this.isOpen = true; - if (typeof this.options.onOpen === 'function') { - this.options.onOpen.call(this); - } - this.draw(); - this.modal.open(undefined); - return this; - }; - /** - * Close datepicker. - */ - close = () => { - if (!this.isOpen) - return; - this.isOpen = false; - if (typeof this.options.onClose === 'function') { - this.options.onClose.call(this); - } - this.modal.close(); - return this; - }; - static { - Datepicker._template = ` -
-
-
- - -
-
-
-
- -
- - -
-
-
-
-
`; - } -} - -class Forms { - /** - * Resizes the given TextArea after updating the - * value content dynamically. - * @param textarea TextArea to be resized - */ - static textareaAutoResize(textarea) { - if (!textarea) { - console.error('No textarea element found'); - return; - } - // Textarea Auto Resize - let hiddenDiv = document.querySelector('.hiddendiv'); - if (!hiddenDiv) { - hiddenDiv = document.createElement('div'); - hiddenDiv.classList.add('hiddendiv', 'common'); - document.body.append(hiddenDiv); - } - const style = getComputedStyle(textarea); - // Set font properties of hiddenDiv - const fontFamily = style.fontFamily; //textarea.css('font-family'); - const fontSize = style.fontSize; //textarea.css('font-size'); - const lineHeight = style.lineHeight; //textarea.css('line-height'); - // Firefox can't handle padding shorthand. - const paddingTop = style.paddingTop; //getComputedStyle(textarea).css('padding-top'); - const paddingRight = style.paddingRight; //textarea.css('padding-right'); - const paddingBottom = style.paddingBottom; //textarea.css('padding-bottom'); - const paddingLeft = style.paddingLeft; //textarea.css('padding-left'); - if (fontSize) - hiddenDiv.style.fontSize = fontSize; //('font-size', fontSize); - if (fontFamily) - hiddenDiv.style.fontFamily = fontFamily; //css('font-family', fontFamily); - if (lineHeight) - hiddenDiv.style.lineHeight = lineHeight; //css('line-height', lineHeight); - if (paddingTop) - hiddenDiv.style.paddingTop = paddingTop; //ss('padding-top', paddingTop); - if (paddingRight) - hiddenDiv.style.paddingRight = paddingRight; //css('padding-right', paddingRight); - if (paddingBottom) - hiddenDiv.style.paddingBottom = paddingBottom; //css('padding-bottom', paddingBottom); - if (paddingLeft) - hiddenDiv.style.paddingLeft = paddingLeft; //css('padding-left', paddingLeft); - // Set original-height, if none - if (!textarea.hasAttribute('original-height')) - textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString()); - if (textarea.getAttribute('wrap') === 'off') { - hiddenDiv.style.overflowWrap = 'normal'; // ('overflow-wrap', 'normal') - hiddenDiv.style.whiteSpace = 'pre'; //.css('white-space', 'pre'); - } - hiddenDiv.innerText = textarea.value + '\n'; - const content = hiddenDiv.innerHTML.replace(/\n/g, '
'); - hiddenDiv.innerHTML = content; - // When textarea is hidden, width goes crazy. - // Approximate with half of window size - if (textarea.offsetWidth > 0 && textarea.offsetHeight > 0) { - hiddenDiv.style.width = textarea.getBoundingClientRect().width + 'px'; // ('width', textarea.width() + 'px'); - } - else { - hiddenDiv.style.width = (window.innerWidth / 2) + 'px'; //css('width', window.innerWidth / 2 + 'px'); - } - // Resize if the new height is greater than the - // original height of the textarea - const originalHeight = parseInt(textarea.getAttribute('original-height')); - const prevLength = parseInt(textarea.getAttribute('previous-length')); - if (isNaN(originalHeight)) - return; - if (originalHeight <= hiddenDiv.clientHeight) { - textarea.style.height = hiddenDiv.clientHeight + 'px'; //css('height', hiddenDiv.innerHeight() + 'px'); - } - else if (textarea.value.length < prevLength) { - // In case the new height is less than original height, it - // means the textarea has less text than before - // So we set the height to the original one - textarea.style.height = originalHeight + 'px'; - } - textarea.setAttribute('previous-length', textarea.value.length.toString()); - } - ; - static Init() { - if (typeof document !== 'undefined') - document?.addEventListener("DOMContentLoaded", () => { - document.addEventListener('keyup', (e) => { - const target = e.target; - // Radio and Checkbox focus class - if (target instanceof HTMLInputElement && ['radio', 'checkbox'].includes(target.type)) { - // TAB, check if tabbing to radio or checkbox. - if (Utils.keys.TAB.includes(e.key)) { - target.classList.add('tabbed'); - target.addEventListener('blur', e => target.classList.remove('tabbed'), { once: true }); - } - } - }); - document.querySelectorAll('.materialize-textarea').forEach((textArea) => { - Forms.InitTextarea(textArea); - }); - // File Input Path - document.querySelectorAll('.file-field input[type="file"]').forEach((fileInput) => { - Forms.InitFileInputPath(fileInput); - }); - }); - } - static InitTextarea(textarea) { - // Save Data in Element - textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString()); - textarea.setAttribute('previous-length', textarea.value.length.toString()); - Forms.textareaAutoResize(textarea); - textarea.addEventListener('keyup', e => Forms.textareaAutoResize(textarea)); - textarea.addEventListener('keydown', e => Forms.textareaAutoResize(textarea)); - } - static InitFileInputPath(fileInput) { - fileInput.addEventListener('change', e => { - const fileField = fileInput.closest('.file-field'); - const pathInput = fileField.querySelector('input.file-path'); - const files = fileInput.files; - const filenames = []; - for (let i = 0; i < files.length; i++) { - filenames.push(files[i].name); - } - pathInput.value = filenames.join(', '); - pathInput.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true })); - }); - } -} - -const _defaults$c = { - inDuration: 275, - outDuration: 200, - onOpenStart: null, - onOpenEnd: null, - onCloseStart: null, - onCloseEnd: null -}; -class Materialbox extends Component { - /** If the materialbox overlay is showing. */ - overlayActive; - /** If the materialbox is no longer being animated. */ - doneAnimating; - /** Caption, if specified. */ - caption; - /** Original width of image. */ - originalWidth; - /** Original height of image. */ - originalHeight; - originInlineStyles; - placeholder; - _changedAncestorList; - newHeight; - newWidth; - windowWidth; - windowHeight; - attrWidth; - attrHeight; - _overlay; - _photoCaption; - constructor(el, options) { - super(el, options, Materialbox); - this.el.M_Materialbox = this; - this.options = { - ...Materialbox.defaults, - ...options - }; - this.overlayActive = false; - this.doneAnimating = true; - this.placeholder = document.createElement('div'); - this.placeholder.classList.add('material-placeholder'); - this.originalWidth = 0; - this.originalHeight = 0; - this.originInlineStyles = this.el.getAttribute('style'); - this.caption = this.el.getAttribute('data-caption') || ''; - // Wrap - this.el.before(this.placeholder); - this.placeholder.append(this.el); - this._setupEventHandlers(); - } - static get defaults() { - return _defaults$c; - } - /** - * Initializes instances of MaterialBox. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, Materialbox); - } - static getInstance(el) { - return el.M_Materialbox; - } - destroy() { - this._removeEventHandlers(); - this.el.M_Materialbox = undefined; - // Unwrap image - //this.placeholder.after(this.el).remove(); - this.placeholder.remove(); - this.el.removeAttribute('style'); - } - _setupEventHandlers() { - this.el.addEventListener('click', this._handleMaterialboxClick); - } - _removeEventHandlers() { - this.el.removeEventListener('click', this._handleMaterialboxClick); - } - _handleMaterialboxClick = () => { - // If already modal, return to original - if (this.doneAnimating === false || (this.overlayActive && this.doneAnimating)) - this.close(); - else - this.open(); - }; - _handleWindowScroll = () => { - if (this.overlayActive) - this.close(); - }; - _handleWindowResize = () => { - if (this.overlayActive) - this.close(); - }; - _handleWindowEscape = (e) => { - if (Utils.keys.ESC.includes(e.key) && this.doneAnimating && this.overlayActive) - this.close(); - }; - _makeAncestorsOverflowVisible() { - this._changedAncestorList = []; - let ancestor = this.placeholder.parentNode; - while (ancestor !== null && ancestor !== document) { - const curr = ancestor; - if (curr.style.overflow !== 'visible') { - curr.style.overflow = 'visible'; - this._changedAncestorList.push(curr); - } - ancestor = ancestor.parentNode; - } - } - _offset(el) { - const box = el.getBoundingClientRect(); - const docElem = document.documentElement; - return { - top: box.top + window.pageYOffset - docElem.clientTop, - left: box.left + window.pageXOffset - docElem.clientLeft - }; - } - _updateVars() { - this.windowWidth = window.innerWidth; - this.windowHeight = window.innerHeight; - this.caption = this.el.getAttribute('data-caption') || ''; - } - // Image - _animateImageIn() { - this.el.style.maxHeight = this.newHeight.toString() + 'px'; - this.el.style.maxWidth = this.newWidth.toString() + 'px'; - const duration = this.options.inDuration; - // from - this.el.style.transition = 'none'; - this.el.style.height = this.originalHeight + 'px'; - this.el.style.width = this.originalWidth + 'px'; - setTimeout(() => { - // easeOutQuad - this.el.style.transition = `height ${duration}ms ease, - width ${duration}ms ease, - left ${duration}ms ease, - top ${duration}ms ease - `; - // to - this.el.style.height = this.newHeight + 'px'; - this.el.style.width = this.newWidth + 'px'; - this.el.style.left = (Utils.getDocumentScrollLeft() + - this.windowWidth / 2 - - this._offset(this.placeholder).left - - this.newWidth / 2) + 'px'; - this.el.style.top = (Utils.getDocumentScrollTop() + - this.windowHeight / 2 - - this._offset(this.placeholder).top - - this.newHeight / 2) + 'px'; - }, 1); - setTimeout(() => { - this.doneAnimating = true; - if (typeof this.options.onOpenEnd === 'function') - this.options.onOpenEnd.call(this, this.el); - }, duration); - /* - anim({ - targets: this.el, // image - height: [this.originalHeight, this.newHeight], - width: [this.originalWidth, this.newWidth], - left: - Utils.getDocumentScrollLeft() + - this.windowWidth / 2 - - this._offset(this.placeholder).left - - this.newWidth / 2, - top: - Utils.getDocumentScrollTop() + - this.windowHeight / 2 - - this._offset(this.placeholder).top - - this.newHeight / 2, - - duration: this.options.inDuration, - easing: 'easeOutQuad', - complete: () => { - this.doneAnimating = true; - if (typeof this.options.onOpenEnd === 'function') this.options.onOpenEnd.call(this, this.el); - } - }); - */ - } - _animateImageOut() { - const duration = this.options.outDuration; - // easeOutQuad - this.el.style.transition = `height ${duration}ms ease, - width ${duration}ms ease, - left ${duration}ms ease, - top ${duration}ms ease - `; - // to - this.el.style.height = this.originalWidth + 'px'; - this.el.style.width = this.originalWidth + 'px'; - this.el.style.left = '0'; - this.el.style.top = '0'; - setTimeout(() => { - this.placeholder.style.height = ''; - this.placeholder.style.width = ''; - this.placeholder.style.position = ''; - this.placeholder.style.top = ''; - this.placeholder.style.left = ''; - // Revert to width or height attribute - if (this.attrWidth) - this.el.setAttribute('width', this.attrWidth.toString()); - if (this.attrHeight) - this.el.setAttribute('height', this.attrHeight.toString()); - this.el.removeAttribute('style'); - this.originInlineStyles && this.el.setAttribute('style', this.originInlineStyles); - // Remove class - this.el.classList.remove('active'); - this.doneAnimating = true; - // Remove overflow overrides on ancestors - this._changedAncestorList.forEach(anchestor => anchestor.style.overflow = ''); - // onCloseEnd callback - if (typeof this.options.onCloseEnd === 'function') - this.options.onCloseEnd.call(this, this.el); - }, duration); - } - // Caption - _addCaption() { - this._photoCaption = document.createElement('div'); - this._photoCaption.classList.add('materialbox-caption'); - this._photoCaption.innerText = this.caption; - document.body.append(this._photoCaption); - this._photoCaption.style.display = 'inline'; - // Animate - this._photoCaption.style.transition = 'none'; - this._photoCaption.style.opacity = '0'; - const duration = this.options.inDuration; - setTimeout(() => { - this._photoCaption.style.transition = `opacity ${duration}ms ease`; - this._photoCaption.style.opacity = '1'; - }, 1); - } - _removeCaption() { - const duration = this.options.outDuration; - this._photoCaption.style.transition = `opacity ${duration}ms ease`; - this._photoCaption.style.opacity = '0'; - setTimeout(() => { - this._photoCaption.remove(); - }, duration); - } - // Overlay - _addOverlay() { - this._overlay = document.createElement('div'); - this._overlay.id = 'materialbox-overlay'; - this._overlay.addEventListener('click', e => { - if (this.doneAnimating) - this.close(); - }, { once: true }); - // Put before in origin image to preserve z-index layering. - this.el.before(this._overlay); - // Set dimensions if needed - const overlayOffset = this._overlay.getBoundingClientRect(); - this._overlay.style.width = this.windowWidth + 'px'; - this._overlay.style.height = this.windowHeight + 'px'; - this._overlay.style.left = -1 * overlayOffset.left + 'px'; - this._overlay.style.top = -1 * overlayOffset.top + 'px'; - // Animate - this._overlay.style.transition = 'none'; - this._overlay.style.opacity = '0'; - const duration = this.options.inDuration; - setTimeout(() => { - this._overlay.style.transition = `opacity ${duration}ms ease`; - this._overlay.style.opacity = '1'; - }, 1); - } - _removeOverlay() { - const duration = this.options.outDuration; - this._overlay.style.transition = `opacity ${duration}ms ease`; - this._overlay.style.opacity = '0'; - setTimeout(() => { - this.overlayActive = false; - this._overlay.remove(); - }, duration); - } - /** - * Open materialbox. - */ - open = () => { - this._updateVars(); - this.originalWidth = this.el.getBoundingClientRect().width; - this.originalHeight = this.el.getBoundingClientRect().height; - // Set states - this.doneAnimating = false; - this.el.classList.add('active'); - this.overlayActive = true; - // onOpenStart callback - if (typeof this.options.onOpenStart === 'function') - this.options.onOpenStart.call(this, this.el); - // Set positioning for placeholder - this.placeholder.style.width = this.placeholder.getBoundingClientRect().width + 'px'; - this.placeholder.style.height = this.placeholder.getBoundingClientRect().height + 'px'; - this.placeholder.style.position = 'relative'; - this.placeholder.style.top = '0'; - this.placeholder.style.left = '0'; - this._makeAncestorsOverflowVisible(); - // Set css on origin - this.el.style.position = 'absolute'; - this.el.style.zIndex = '1000'; - this.el.style.willChange = 'left, top, width, height'; - // Change from width or height attribute to css - this.attrWidth = this.el.getAttribute('width'); - this.attrHeight = this.el.getAttribute('height'); - if (this.attrWidth) { - this.el.style.width = this.attrWidth + 'px'; - this.el.removeAttribute('width'); - } - if (this.attrHeight) { - this.el.style.width = this.attrHeight + 'px'; - this.el.removeAttribute('height'); - } - this._addOverlay(); - // Add and animate caption if it exists - if (this.caption !== '') - this._addCaption(); - // Resize Image - const widthPercent = this.originalWidth / this.windowWidth; - const heightPercent = this.originalHeight / this.windowHeight; - this.newWidth = 0; - this.newHeight = 0; - if (widthPercent > heightPercent) { - // Width first - const ratio = this.originalHeight / this.originalWidth; - this.newWidth = this.windowWidth * 0.9; - this.newHeight = this.windowWidth * 0.9 * ratio; - } - else { - // Height first - const ratio = this.originalWidth / this.originalHeight; - this.newWidth = this.windowHeight * 0.9 * ratio; - this.newHeight = this.windowHeight * 0.9; - } - this._animateImageIn(); - // Handle Exit triggers - window.addEventListener('scroll', this._handleWindowScroll); - window.addEventListener('resize', this._handleWindowResize); - window.addEventListener('keyup', this._handleWindowEscape); - }; - /** - * Close materialbox. - */ - close = () => { - this._updateVars(); - this.doneAnimating = false; - // onCloseStart callback - if (typeof this.options.onCloseStart === 'function') - this.options.onCloseStart.call(this, this.el); - //anim.remove(this.el); - //anim.remove(this._overlay); - //if (this.caption !== '') anim.remove(this._photoCaption); - // disable exit handlers - window.removeEventListener('scroll', this._handleWindowScroll); - window.removeEventListener('resize', this._handleWindowResize); - window.removeEventListener('keyup', this._handleWindowEscape); - this._removeOverlay(); - this._animateImageOut(); - if (this.caption !== '') - this._removeCaption(); - }; -} - -let _defaults$b = { - responsiveThreshold: 0 // breakpoint for swipeable -}; -class Parallax extends Component { - _enabled; - _img; - static _parallaxes = []; - static _handleScrollThrottled; - static _handleWindowResizeThrottled; - constructor(el, options) { - super(el, options, Parallax); - this.el.M_Parallax = this; - this.options = { - ...Parallax.defaults, - ...options - }; - this._enabled = window.innerWidth > this.options.responsiveThreshold; - this._img = this.el.querySelector('img'); - this._updateParallax(); - this._setupEventHandlers(); - this._setupStyles(); - Parallax._parallaxes.push(this); - } - static get defaults() { - return _defaults$b; - } - /** - * Initializes instances of Parallax. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, Parallax); - } - static getInstance(el) { - return el.M_Parallax; - } - destroy() { - Parallax._parallaxes.splice(Parallax._parallaxes.indexOf(this), 1); - this._img.style.transform = ''; - this._removeEventHandlers(); - this.el.M_Parallax = undefined; - } - static _handleScroll() { - for (let i = 0; i < Parallax._parallaxes.length; i++) { - let parallaxInstance = Parallax._parallaxes[i]; - parallaxInstance._updateParallax.call(parallaxInstance); - } - } - static _handleWindowResize() { - for (let i = 0; i < Parallax._parallaxes.length; i++) { - let parallaxInstance = Parallax._parallaxes[i]; - parallaxInstance._enabled = - window.innerWidth > parallaxInstance.options.responsiveThreshold; - } - } - _setupEventHandlers() { - this._img.addEventListener('load', this._handleImageLoad); - if (Parallax._parallaxes.length === 0) { - if (!Parallax._handleScrollThrottled) { - Parallax._handleScrollThrottled = Utils.throttle(Parallax._handleScroll, 5); - } - if (!Parallax._handleWindowResizeThrottled) { - Parallax._handleWindowResizeThrottled = Utils.throttle(Parallax._handleWindowResize, 5); - } - window.addEventListener('scroll', Parallax._handleScrollThrottled); - window.addEventListener('resize', Parallax._handleWindowResizeThrottled); - } - } - _removeEventHandlers() { - this._img.removeEventListener('load', this._handleImageLoad); - if (Parallax._parallaxes.length === 0) { - window.removeEventListener('scroll', Parallax._handleScrollThrottled); - window.removeEventListener('resize', Parallax._handleWindowResizeThrottled); - } - } - _setupStyles() { - this._img.style.opacity = '1'; - } - _handleImageLoad = () => { - this._updateParallax(); - }; - _offset(el) { - const box = el.getBoundingClientRect(); - const docElem = document.documentElement; - return { - top: box.top + window.pageYOffset - docElem.clientTop, - left: box.left + window.pageXOffset - docElem.clientLeft - }; - } - _updateParallax() { - const containerHeight = this.el.getBoundingClientRect().height > 0 ? this.el.parentNode.offsetHeight : 500; - const imgHeight = this._img.offsetHeight; - const parallaxDist = imgHeight - containerHeight; - const bottom = this._offset(this.el).top + containerHeight; - const top = this._offset(this.el).top; - const scrollTop = Utils.getDocumentScrollTop(); - const windowHeight = window.innerHeight; - const windowBottom = scrollTop + windowHeight; - const percentScrolled = (windowBottom - top) / (containerHeight + windowHeight); - const parallax = parallaxDist * percentScrolled; - if (!this._enabled) { - this._img.style.transform = ''; - } - else if (bottom > scrollTop && top < scrollTop + windowHeight) { - this._img.style.transform = `translate3D(-50%, ${parallax}px, 0)`; - } - } -} - -let _defaults$a = { - top: 0, - bottom: Infinity, - offset: 0, - onPositionChange: null -}; -class Pushpin extends Component { - static _pushpins; - originalOffset; - constructor(el, options) { - super(el, options, Pushpin); - this.el.M_Pushpin = this; - this.options = { - ...Pushpin.defaults, - ...options - }; - this.originalOffset = this.el.offsetTop; - Pushpin._pushpins.push(this); - this._setupEventHandlers(); - this._updatePosition(); - } - static get defaults() { - return _defaults$a; - } - /** - * Initializes instances of Pushpin. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, Pushpin); - } - static getInstance(el) { - return el.M_Pushpin; - } - destroy() { - this.el.style.top = null; - this._removePinClasses(); - // Remove pushpin Inst - let index = Pushpin._pushpins.indexOf(this); - Pushpin._pushpins.splice(index, 1); - if (Pushpin._pushpins.length === 0) { - this._removeEventHandlers(); - } - this.el.M_Pushpin = undefined; - } - static _updateElements() { - for (let elIndex in Pushpin._pushpins) { - let pInstance = Pushpin._pushpins[elIndex]; - pInstance._updatePosition(); - } - } - _setupEventHandlers() { - document.addEventListener('scroll', Pushpin._updateElements); - } - _removeEventHandlers() { - document.removeEventListener('scroll', Pushpin._updateElements); - } - _updatePosition() { - let scrolled = Utils.getDocumentScrollTop() + this.options.offset; - if (this.options.top <= scrolled && - this.options.bottom >= scrolled && - !this.el.classList.contains('pinned')) { - this._removePinClasses(); - this.el.style.top = `${this.options.offset}px`; - this.el.classList.add('pinned'); - // onPositionChange callback - if (typeof this.options.onPositionChange === 'function') { - this.options.onPositionChange.call(this, 'pinned'); - } - } - // Add pin-top (when scrolled position is above top) - if (scrolled < this.options.top && !this.el.classList.contains('pin-top')) { - this._removePinClasses(); - this.el.style.top = '0'; - this.el.classList.add('pin-top'); - // onPositionChange callback - if (typeof this.options.onPositionChange === 'function') { - this.options.onPositionChange.call(this, 'pin-top'); - } - } - // Add pin-bottom (when scrolled position is below bottom) - if (scrolled > this.options.bottom && !this.el.classList.contains('pin-bottom')) { - this._removePinClasses(); - this.el.classList.add('pin-bottom'); - this.el.style.top = `${this.options.bottom - this.originalOffset}px`; - // onPositionChange callback - if (typeof this.options.onPositionChange === 'function') { - this.options.onPositionChange.call(this, 'pin-bottom'); - } - } - } - _removePinClasses() { - // IE 11 bug (can't remove multiple classes in one line) - this.el.classList.remove('pin-top'); - this.el.classList.remove('pinned'); - this.el.classList.remove('pin-bottom'); - } - static { - Pushpin._pushpins = []; - } -} - -let _defaults$9 = { - throttle: 100, - scrollOffset: 200, // offset - 200 allows elements near bottom of page to scroll - activeClass: 'active', - getActiveElement: (id) => { return 'a[href="#' + id + '"]'; } -}; -class ScrollSpy extends Component { - static _elements; - static _count; - static _increment; - tickId; - id; - static _elementsInView; - static _visibleElements; - static _ticks; - constructor(el, options) { - super(el, options, ScrollSpy); - this.el.M_ScrollSpy = this; - this.options = { - ...ScrollSpy.defaults, - ...options - }; - ScrollSpy._elements.push(this); - ScrollSpy._count++; - ScrollSpy._increment++; - this.tickId = -1; - this.id = ScrollSpy._increment; - this._setupEventHandlers(); - this._handleWindowScroll(); - } - static get defaults() { - return _defaults$9; - } - /** - * Initializes instances of ScrollSpy. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, ScrollSpy); - } - static getInstance(el) { - return el.M_ScrollSpy; - } - destroy() { - ScrollSpy._elements.splice(ScrollSpy._elements.indexOf(this), 1); - ScrollSpy._elementsInView.splice(ScrollSpy._elementsInView.indexOf(this), 1); - ScrollSpy._visibleElements.splice(ScrollSpy._visibleElements.indexOf(this.el), 1); - ScrollSpy._count--; - this._removeEventHandlers(); - const actElem = document.querySelector(this.options.getActiveElement(this.el.id)); - actElem.classList.remove(this.options.activeClass); - this.el.M_ScrollSpy = undefined; - } - _setupEventHandlers() { - if (ScrollSpy._count === 1) { - window.addEventListener('scroll', this._handleWindowScroll); - window.addEventListener('resize', this._handleThrottledResize); - document.body.addEventListener('click', this._handleTriggerClick); - } - } - _removeEventHandlers() { - if (ScrollSpy._count === 0) { - window.removeEventListener('scroll', this._handleWindowScroll); - window.removeEventListener('resize', this._handleThrottledResize); - document.body.removeEventListener('click', this._handleTriggerClick); - } - } - _handleThrottledResize = Utils.throttle(function () { this._handleWindowScroll(); }, 200).bind(this); - _handleTriggerClick = (e) => { - const trigger = e.target; - for (let i = ScrollSpy._elements.length - 1; i >= 0; i--) { - const scrollspy = ScrollSpy._elements[i]; - const x = document.querySelector('a[href="#' + scrollspy.el.id + '"]'); - if (trigger === x) { - e.preventDefault(); - scrollspy.el.scrollIntoView({ behavior: 'smooth' }); - break; - } - } - }; - _handleWindowScroll = () => { - // unique tick id - ScrollSpy._ticks++; - // viewport rectangle - let top = Utils.getDocumentScrollTop(), left = Utils.getDocumentScrollLeft(), right = left + window.innerWidth, bottom = top + window.innerHeight; - // determine which elements are in view - let intersections = ScrollSpy._findElements(top, right, bottom, left); - for (let i = 0; i < intersections.length; i++) { - let scrollspy = intersections[i]; - let lastTick = scrollspy.tickId; - if (lastTick < 0) { - // entered into view - scrollspy._enter(); - } - // update tick id - scrollspy.tickId = ScrollSpy._ticks; - } - for (let i = 0; i < ScrollSpy._elementsInView.length; i++) { - let scrollspy = ScrollSpy._elementsInView[i]; - let lastTick = scrollspy.tickId; - if (lastTick >= 0 && lastTick !== ScrollSpy._ticks) { - // exited from view - scrollspy._exit(); - scrollspy.tickId = -1; - } - } - // remember elements in view for next tick - ScrollSpy._elementsInView = intersections; - }; - static _offset(el) { - const box = el.getBoundingClientRect(); - const docElem = document.documentElement; - return { - top: box.top + window.pageYOffset - docElem.clientTop, - left: box.left + window.pageXOffset - docElem.clientLeft - }; - } - static _findElements(top, right, bottom, left) { - let hits = []; - for (let i = 0; i < ScrollSpy._elements.length; i++) { - let scrollspy = ScrollSpy._elements[i]; - let currTop = top + scrollspy.options.scrollOffset || 200; - if (scrollspy.el.getBoundingClientRect().height > 0) { - let elTop = ScrollSpy._offset(scrollspy.el).top, elLeft = ScrollSpy._offset(scrollspy.el).left, elRight = elLeft + scrollspy.el.getBoundingClientRect().width, elBottom = elTop + scrollspy.el.getBoundingClientRect().height; - let isIntersect = !(elLeft > right || - elRight < left || - elTop > bottom || - elBottom < currTop); - if (isIntersect) { - hits.push(scrollspy); - } - } - } - return hits; - } - _enter() { - ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0); - if (ScrollSpy._visibleElements[0]) { - const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id)); - actElem?.classList.remove(this.options.activeClass); - if (ScrollSpy._visibleElements[0].M_ScrollSpy && this.id < ScrollSpy._visibleElements[0].M_ScrollSpy.id) { - ScrollSpy._visibleElements.unshift(this.el); - } - else { - ScrollSpy._visibleElements.push(this.el); - } - } - else { - ScrollSpy._visibleElements.push(this.el); - } - const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id); - document.querySelector(selector)?.classList.add(this.options.activeClass); - } - _exit() { - ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0); - if (ScrollSpy._visibleElements[0]) { - const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id)); - actElem?.classList.remove(this.options.activeClass); - ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((x) => x.id != this.el.id); - if (ScrollSpy._visibleElements[0]) { - // Check if empty - const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id); - document.querySelector(selector)?.classList.add(this.options.activeClass); - } - } - } - static { - ScrollSpy._elements = []; - ScrollSpy._elementsInView = []; - ScrollSpy._visibleElements = []; // Array. - ScrollSpy._count = 0; - ScrollSpy._increment = 0; - ScrollSpy._ticks = 0; - } -} - -const _defaults$8 = { - edge: 'left', - draggable: true, - dragTargetWidth: '10px', - inDuration: 250, - outDuration: 200, - onOpenStart: null, - onOpenEnd: null, - onCloseStart: null, - onCloseEnd: null, - preventScrolling: true -}; -class Sidenav extends Component { - id; - /** Describes open/close state of Sidenav. */ - isOpen; - /** Describes if sidenav is fixed. */ - isFixed; - /** Describes if Sidenav is being dragged. */ - isDragged; - lastWindowWidth; - lastWindowHeight; - static _sidenavs; - _overlay; - dragTarget; - _startingXpos; - _xPos; - _time; - _width; - _initialScrollTop; - _verticallyScrolling; - deltaX; - velocityX; - percentOpen; - constructor(el, options) { - super(el, options, Sidenav); - this.el.M_Sidenav = this; - this.options = { - ...Sidenav.defaults, - ...options - }; - this.id = this.el.id; - this.isOpen = false; - this.isFixed = this.el.classList.contains('sidenav-fixed'); - this.isDragged = false; - // Window size variables for window resize checks - this.lastWindowWidth = window.innerWidth; - this.lastWindowHeight = window.innerHeight; - this._createOverlay(); - this._createDragTarget(); - this._setupEventHandlers(); - this._setupClasses(); - this._setupFixed(); - Sidenav._sidenavs.push(this); - } - static get defaults() { - return _defaults$8; - } - /** - * Initializes instances of Sidenav. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, Sidenav); - } - static getInstance(el) { - return el.M_Sidenav; - } - destroy() { - this._removeEventHandlers(); - this._enableBodyScrolling(); - this._overlay.parentNode.removeChild(this._overlay); - this.dragTarget.parentNode.removeChild(this.dragTarget); - this.el.M_Sidenav = undefined; - this.el.style.transform = ''; - const index = Sidenav._sidenavs.indexOf(this); - if (index >= 0) { - Sidenav._sidenavs.splice(index, 1); - } - } - _createOverlay() { - this._overlay = document.createElement('div'); - this._overlay.classList.add('sidenav-overlay'); - this._overlay.addEventListener('click', this.close); - document.body.appendChild(this._overlay); - } - _setupEventHandlers() { - if (Sidenav._sidenavs.length === 0) { - document.body.addEventListener('click', this._handleTriggerClick); - } - var passiveIfSupported = null; - this.dragTarget.addEventListener('touchmove', this._handleDragTargetDrag, passiveIfSupported); - this.dragTarget.addEventListener('touchend', this._handleDragTargetRelease); - this._overlay.addEventListener('touchmove', this._handleCloseDrag, passiveIfSupported); - this._overlay.addEventListener('touchend', this._handleCloseRelease); - this.el.addEventListener('touchmove', this._handleCloseDrag, passiveIfSupported); - this.el.addEventListener('touchend', this._handleCloseRelease); - this.el.addEventListener('click', this._handleCloseTriggerClick); - // Add resize for side nav fixed - if (this.isFixed) { - window.addEventListener('resize', this._handleWindowResize); - } - } - _removeEventHandlers() { - if (Sidenav._sidenavs.length === 1) { - document.body.removeEventListener('click', this._handleTriggerClick); - } - this.dragTarget.removeEventListener('touchmove', this._handleDragTargetDrag); - this.dragTarget.removeEventListener('touchend', this._handleDragTargetRelease); - this._overlay.removeEventListener('touchmove', this._handleCloseDrag); - this._overlay.removeEventListener('touchend', this._handleCloseRelease); - this.el.removeEventListener('touchmove', this._handleCloseDrag); - this.el.removeEventListener('touchend', this._handleCloseRelease); - this.el.removeEventListener('click', this._handleCloseTriggerClick); - // Remove resize for side nav fixed - if (this.isFixed) { - window.removeEventListener('resize', this._handleWindowResize); - } - } - _handleTriggerClick(e) { - const trigger = e.target.closest('.sidenav-trigger'); - if (e.target && trigger) { - const sidenavId = Utils.getIdFromTrigger(trigger); - const sidenavInstance = document.getElementById(sidenavId).M_Sidenav; - if (sidenavInstance) { - sidenavInstance.open(trigger); - } - e.preventDefault(); - } - } - // Set variables needed at the beginning of drag and stop any current transition. - _startDrag(e) { - const clientX = e.targetTouches[0].clientX; - this.isDragged = true; - this._startingXpos = clientX; - this._xPos = this._startingXpos; - this._time = Date.now(); - this._width = this.el.getBoundingClientRect().width; - this._overlay.style.display = 'block'; - this._initialScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop(); - this._verticallyScrolling = false; - } - //Set variables needed at each drag move update tick - _dragMoveUpdate(e) { - const clientX = e.targetTouches[0].clientX; - const currentScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop(); - this.deltaX = Math.abs(this._xPos - clientX); - this._xPos = clientX; - this.velocityX = this.deltaX / (Date.now() - this._time); - this._time = Date.now(); - if (this._initialScrollTop !== currentScrollTop) { - this._verticallyScrolling = true; - } - } - _handleDragTargetDrag = (e) => { - // Check if draggable - if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) { - return; - } - // If not being dragged, set initial drag start variables - if (!this.isDragged) { - this._startDrag(e); - } - // Run touchmove updates - this._dragMoveUpdate(e); - // Calculate raw deltaX - let totalDeltaX = this._xPos - this._startingXpos; - // dragDirection is the attempted user drag direction - const dragDirection = totalDeltaX > 0 ? 'right' : 'left'; - // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction - totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX)); - if (this.options.edge === dragDirection) { - totalDeltaX = 0; - } - /** - * transformX is the drag displacement - * transformPrefix is the initial transform placement - * Invert values if Sidenav is right edge - */ - let transformX = totalDeltaX; - let transformPrefix = 'translateX(-100%)'; - if (this.options.edge === 'right') { - transformPrefix = 'translateX(100%)'; - transformX = -transformX; - } - // Calculate open/close percentage of sidenav, with open = 1 and close = 0 - this.percentOpen = Math.min(1, totalDeltaX / this._width); - // Set transform and opacity styles - this.el.style.transform = `${transformPrefix} translateX(${transformX}px)`; - this._overlay.style.opacity = this.percentOpen.toString(); - }; - _handleDragTargetRelease = () => { - if (this.isDragged) { - if (this.percentOpen > 0.2) { - this.open(); - } - else { - this._animateOut(); - } - this.isDragged = false; - this._verticallyScrolling = false; - } - }; - _handleCloseDrag = (e) => { - if (this.isOpen) { - // Check if draggable - if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) { - return; - } - // If not being dragged, set initial drag start variables - if (!this.isDragged) { - this._startDrag(e); - } - // Run touchmove updates - this._dragMoveUpdate(e); - // Calculate raw deltaX - let totalDeltaX = this._xPos - this._startingXpos; - // dragDirection is the attempted user drag direction - let dragDirection = totalDeltaX > 0 ? 'right' : 'left'; - // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction - totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX)); - if (this.options.edge !== dragDirection) { - totalDeltaX = 0; - } - let transformX = -totalDeltaX; - if (this.options.edge === 'right') { - transformX = -transformX; - } - // Calculate open/close percentage of sidenav, with open = 1 and close = 0 - this.percentOpen = Math.min(1, 1 - totalDeltaX / this._width); - // Set transform and opacity styles - this.el.style.transform = `translateX(${transformX}px)`; - this._overlay.style.opacity = this.percentOpen.toString(); - } - }; - _handleCloseRelease = () => { - if (this.isOpen && this.isDragged) { - if (this.percentOpen > 0.8) { - this._animateIn(); - } - else { - this.close(); - } - this.isDragged = false; - this._verticallyScrolling = false; - } - }; - // Handles closing of Sidenav when element with class .sidenav-close - _handleCloseTriggerClick = (e) => { - const closeTrigger = e.target.closest('.sidenav-close'); - if (closeTrigger && !this._isCurrentlyFixed()) { - this.close(); - } - }; - _handleWindowResize = () => { - // Only handle horizontal resizes - if (this.lastWindowWidth !== window.innerWidth) { - if (window.innerWidth > 992) { - this.open(); - } - else { - this.close(); - } - } - this.lastWindowWidth = window.innerWidth; - this.lastWindowHeight = window.innerHeight; - }; - _setupClasses() { - if (this.options.edge === 'right') { - this.el.classList.add('right-aligned'); - this.dragTarget.classList.add('right-aligned'); - } - } - _removeClasses() { - this.el.classList.remove('right-aligned'); - this.dragTarget.classList.remove('right-aligned'); - } - _setupFixed() { - if (this._isCurrentlyFixed()) - this.open(); - } - _isCurrentlyFixed() { - return this.isFixed && window.innerWidth > 992; - } - _createDragTarget() { - const dragTarget = document.createElement('div'); - dragTarget.classList.add('drag-target'); - dragTarget.style.width = this.options.dragTargetWidth; - document.body.appendChild(dragTarget); - this.dragTarget = dragTarget; - } - _preventBodyScrolling() { - document.body.style.overflow = 'hidden'; - } - _enableBodyScrolling() { - document.body.style.overflow = ''; - } - /** - * Opens Sidenav. - */ - open = () => { - if (this.isOpen === true) - return; - this.isOpen = true; - // Run onOpenStart callback - if (typeof this.options.onOpenStart === 'function') { - this.options.onOpenStart.call(this, this.el); - } - // Handle fixed Sidenav - if (this._isCurrentlyFixed()) { - // Show if fixed - this.el.style.transform = 'translateX(0)'; - this._enableBodyScrolling(); - this._overlay.style.display = 'none'; - } - // Handle non-fixed Sidenav - else { - if (this.options.preventScrolling) - this._preventBodyScrolling(); - if (!this.isDragged || this.percentOpen != 1) - this._animateIn(); - } - }; - /** - * Closes Sidenav. - */ - close = () => { - if (this.isOpen === false) - return; - this.isOpen = false; - // Run onCloseStart callback - if (typeof this.options.onCloseStart === 'function') { - this.options.onCloseStart.call(this, this.el); - } - // Handle fixed Sidenav - if (this._isCurrentlyFixed()) { - const transformX = this.options.edge === 'left' ? '-105%' : '105%'; - this.el.style.transform = `translateX(${transformX})`; - } - // Handle non-fixed Sidenav - else { - this._enableBodyScrolling(); - if (!this.isDragged || this.percentOpen != 0) { - this._animateOut(); - } - else { - this._overlay.style.display = 'none'; - } - } - }; - _animateIn() { - this._animateSidenavIn(); - this._animateOverlayIn(); - } - _animateOut() { - this._animateSidenavOut(); - this._animateOverlayOut(); - } - _animateSidenavIn() { - let slideOutPercent = this.options.edge === 'left' ? -1 : 1; - if (this.isDragged) { - slideOutPercent = - this.options.edge === 'left' - ? slideOutPercent + this.percentOpen - : slideOutPercent - this.percentOpen; - } - const duration = this.options.inDuration; - // from - this.el.style.transition = 'none'; - this.el.style.transform = 'translateX(' + (slideOutPercent * 100) + '%)'; - setTimeout(() => { - this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad - // to - this.el.style.transform = 'translateX(0)'; - }, 1); - setTimeout(() => { - if (typeof this.options.onOpenEnd === 'function') - this.options.onOpenEnd.call(this, this.el); - }, duration); - } - _animateSidenavOut() { - const endPercent = this.options.edge === 'left' ? -1 : 1; - if (this.isDragged) { - this.options.edge === 'left' - ? endPercent + this.percentOpen - : endPercent - this.percentOpen; - } - const duration = this.options.outDuration; - this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad - // to - this.el.style.transform = 'translateX(' + (endPercent * 100) + '%)'; - setTimeout(() => { - if (typeof this.options.onCloseEnd === 'function') - this.options.onCloseEnd.call(this, this.el); - }, duration); - } - _animateOverlayIn() { - let start = 0; - if (this.isDragged) - start = this.percentOpen; - else - this._overlay.style.display = 'block'; - // Animation - const duration = this.options.inDuration; - // from - this._overlay.style.transition = 'none'; - this._overlay.style.opacity = start.toString(); - // easeOutQuad - setTimeout(() => { - this._overlay.style.transition = `opacity ${duration}ms ease`; - // to - this._overlay.style.opacity = '1'; - }, 1); - } - _animateOverlayOut() { - const duration = this.options.outDuration; - // easeOutQuad - this._overlay.style.transition = `opacity ${duration}ms ease`; - // to - this._overlay.style.opacity = '0'; - setTimeout(() => { - this._overlay.style.display = 'none'; - }, duration); - } - static { - Sidenav._sidenavs = []; - } -} - -let _defaults$7 = { - duration: 300, - onShow: null, - swipeable: false, - responsiveThreshold: Infinity // breakpoint for swipeable -}; -class Tabs extends Component { - _tabLinks; - _index; - _indicator; - _tabWidth; - _tabsWidth; - _tabsCarousel; - _activeTabLink; - _content; - constructor(el, options) { - super(el, options, Tabs); - this.el.M_Tabs = this; - this.options = { - ...Tabs.defaults, - ...options - }; - this._tabLinks = this.el.querySelectorAll('li.tab > a'); - this._index = 0; - this._setupActiveTabLink(); - if (this.options.swipeable) { - this._setupSwipeableTabs(); - } - else { - this._setupNormalTabs(); - } - // Setup tabs indicator after content to ensure accurate widths - this._setTabsAndTabWidth(); - this._createIndicator(); - this._setupEventHandlers(); - } - static get defaults() { - return _defaults$7; - } - /** - * Initializes instances of Tabs. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, Tabs); - } - static getInstance(el) { - return el.M_Tabs; - } - destroy() { - this._removeEventHandlers(); - this._indicator.parentNode.removeChild(this._indicator); - if (this.options.swipeable) { - this._teardownSwipeableTabs(); - } - else { - this._teardownNormalTabs(); - } - this.el.M_Tabs = undefined; - } - /** - * The index of tab that is currently shown. - */ - get index() { return this._index; } - _setupEventHandlers() { - window.addEventListener('resize', this._handleWindowResize); - this.el.addEventListener('click', this._handleTabClick); - } - _removeEventHandlers() { - window.removeEventListener('resize', this._handleWindowResize); - this.el.removeEventListener('click', this._handleTabClick); - } - _handleWindowResize = () => { - this._setTabsAndTabWidth(); - if (this._tabWidth !== 0 && this._tabsWidth !== 0) { - this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px'; - this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px'; - } - }; - _handleTabClick = (e) => { - const tabLink = e.target; - const tab = tabLink.parentElement; - // Handle click on tab link only - if (!tabLink || !tab.classList.contains('tab')) - return; - // is disabled? - if (tab.classList.contains('disabled')) { - e.preventDefault(); - return; - } - // Act as regular link if target attribute is specified. - if (tabLink.hasAttribute('target')) - return; - // Make the old tab inactive. - this._activeTabLink.classList.remove('active'); - const _oldContent = this._content; - // Update the variables with the new link and content - this._activeTabLink = tabLink; - if (tabLink.hash) - this._content = document.querySelector(tabLink.hash); - this._tabLinks = this.el.querySelectorAll('li.tab > a'); - // Make the tab active - this._activeTabLink.classList.add('active'); - const prevIndex = this._index; - this._index = Math.max(Array.from(this._tabLinks).indexOf(tabLink), 0); - // Swap content - if (this.options.swipeable) { - if (this._tabsCarousel) { - this._tabsCarousel.set(this._index, () => { - if (typeof this.options.onShow === 'function') - this.options.onShow.call(this, this._content); - }); - } - } - else { - if (this._content) { - this._content.style.display = 'block'; - this._content.classList.add('active'); - if (typeof this.options.onShow === 'function') - this.options.onShow.call(this, this._content); - if (_oldContent && _oldContent !== this._content) { - _oldContent.style.display = 'none'; - _oldContent.classList.remove('active'); - } - } - } - // Update widths after content is swapped (scrollbar bugfix) - this._setTabsAndTabWidth(); - this._animateIndicator(prevIndex); - e.preventDefault(); - }; - _createIndicator() { - const indicator = document.createElement('li'); - indicator.classList.add('indicator'); - this.el.appendChild(indicator); - this._indicator = indicator; - this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px'; - this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px'; - } - _setupActiveTabLink() { - // If the location.hash matches one of the links, use that as the active tab. - this._activeTabLink = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === location.hash); - // If no match is found, use the first link or any with class 'active' as the initial active tab. - if (!this._activeTabLink) { - this._activeTabLink = this.el.querySelector('li.tab a.active'); - } - if (this._activeTabLink.length === 0) { - this._activeTabLink = this.el.querySelector('li.tab a'); - } - Array.from(this._tabLinks).forEach((a) => a.classList.remove('active')); - this._activeTabLink.classList.add('active'); - this._index = Math.max(Array.from(this._tabLinks).indexOf(this._activeTabLink), 0); - if (this._activeTabLink && this._activeTabLink.hash) { - this._content = document.querySelector(this._activeTabLink.hash); - if (this._content) - this._content.classList.add('active'); - } - } - _setupSwipeableTabs() { - // Change swipeable according to responsive threshold - if (window.innerWidth > this.options.responsiveThreshold) - this.options.swipeable = false; - const tabsContent = []; - this._tabLinks.forEach(a => { - if (a.hash) { - const currContent = document.querySelector(a.hash); - currContent.classList.add('carousel-item'); - tabsContent.push(currContent); - } - }); - // Create Carousel-Wrapper around Tab-Contents - const tabsWrapper = document.createElement('div'); - tabsWrapper.classList.add('tabs-content', 'carousel', 'carousel-slider'); - // Wrap around - tabsContent[0].parentElement.insertBefore(tabsWrapper, tabsContent[0]); - tabsContent.forEach(tabContent => { - tabsWrapper.appendChild(tabContent); - tabContent.style.display = ''; - }); - // Keep active tab index to set initial carousel slide - const tab = this._activeTabLink.parentElement; - const activeTabIndex = Array.from(tab.parentNode.children).indexOf(tab); - this._tabsCarousel = Carousel.init(tabsWrapper, { - fullWidth: true, - noWrap: true, - onCycleTo: (item) => { - const prevIndex = this._index; - this._index = Array.from(item.parentNode.children).indexOf(item); - this._activeTabLink.classList.remove('active'); - this._activeTabLink = Array.from(this._tabLinks)[this._index]; - this._activeTabLink.classList.add('active'); - this._animateIndicator(prevIndex); - if (typeof this.options.onShow === 'function') - this.options.onShow.call(this, this._content); - } - }); - // Set initial carousel slide to active tab - this._tabsCarousel.set(activeTabIndex); - } - _teardownSwipeableTabs() { - const tabsWrapper = this._tabsCarousel.el; - this._tabsCarousel.destroy(); - // Unwrap - tabsWrapper.after(tabsWrapper.children); - tabsWrapper.remove(); - } - _setupNormalTabs() { - // Hide Tabs Content - Array.from(this._tabLinks).forEach((a) => { - if (a === this._activeTabLink) - return; - if (a.hash) { - const currContent = document.querySelector(a.hash); - if (currContent) - currContent.style.display = 'none'; - } - }); - } - _teardownNormalTabs() { - // show Tabs Content - this._tabLinks.forEach((a) => { - if (a.hash) { - const currContent = document.querySelector(a.hash); - if (currContent) - currContent.style.display = ''; - } - }); - } - _setTabsAndTabWidth() { - this._tabsWidth = this.el.getBoundingClientRect().width; - this._tabWidth = Math.max(this._tabsWidth, this.el.scrollWidth) / this._tabLinks.length; - } - _calcRightPos(el) { - return Math.ceil(this._tabsWidth - el.offsetLeft - el.getBoundingClientRect().width); - } - _calcLeftPos(el) { - return Math.floor(el.offsetLeft); - } - /** - * Recalculate tab indicator position. This is useful when - * the indicator position is not correct. - */ - updateTabIndicator() { - this._setTabsAndTabWidth(); - this._animateIndicator(this._index); - } - _animateIndicator(prevIndex) { - let leftDelay = 0, rightDelay = 0; - const isMovingLeftOrStaying = (this._index - prevIndex >= 0); - if (isMovingLeftOrStaying) - leftDelay = 90; - else - rightDelay = 90; - // in v1: easeOutQuad - this._indicator.style.transition = ` - left ${this.options.duration}ms ease-out ${leftDelay}ms, - right ${this.options.duration}ms ease-out ${rightDelay}ms`; - this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px'; - this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px'; - } - /** - * Show tab content that corresponds to the tab with the id. - * @param tabId The id of the tab that you want to switch to. - */ - select(tabId) { - const tab = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === '#' + tabId); - if (tab) - tab.click(); - } -} - -let _defaults$6 = { - onOpen: null, - onClose: null -}; -class TapTarget extends Component { - /** - * If the tap target is open. - */ - isOpen; - wrapper; - _origin; - originEl; - waveEl; - contentEl; - constructor(el, options) { - super(el, options, TapTarget); - this.el.M_TapTarget = this; - this.options = { - ...TapTarget.defaults, - ...options - }; - this.isOpen = false; - // setup - this._origin = document.querySelector(`#${el.dataset.target}`); - this._setup(); - this._calculatePositioning(); - this._setupEventHandlers(); - } - static get defaults() { - return _defaults$6; - } - /** - * Initializes instances of TapTarget. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, TapTarget); - } - static getInstance(el) { - return el.M_TapTarget; - } - destroy() { - this._removeEventHandlers(); - this.el.TapTarget = undefined; - } - _setupEventHandlers() { - this.el.addEventListener('click', this._handleTargetClick); - this.originEl.addEventListener('click', this._handleOriginClick); - // Resize - window.addEventListener('resize', this._handleThrottledResize); - } - _removeEventHandlers() { - this.el.removeEventListener('click', this._handleTargetClick); - this.originEl.removeEventListener('click', this._handleOriginClick); - window.removeEventListener('resize', this._handleThrottledResize); - } - _handleThrottledResize = Utils.throttle(function () { this._handleResize(); }, 200).bind(this); - _handleTargetClick = () => { - this.open(); - }; - _handleOriginClick = () => { - this.close(); - }; - _handleResize = () => { - this._calculatePositioning(); - }; - _handleDocumentClick = (e) => { - if (!e.target.closest('.tap-target-wrapper')) { - this.close(); - e.preventDefault(); - e.stopPropagation(); - } - }; - _setup() { - // Creating tap target - this.wrapper = this.el.parentElement; - this.waveEl = this.wrapper.querySelector('.tap-target-wave'); - this.originEl = this.wrapper.querySelector('.tap-target-origin'); - this.contentEl = this.el.querySelector('.tap-target-content'); - // Creating wrapper - if (!this.wrapper.classList.contains('.tap-target-wrapper')) { - this.wrapper = document.createElement('div'); - this.wrapper.classList.add('tap-target-wrapper'); - this.el.before(this.wrapper); - this.wrapper.append(this.el); - } - // Creating content - if (!this.contentEl) { - this.contentEl = document.createElement('div'); - this.contentEl.classList.add('tap-target-content'); - this.el.append(this.contentEl); - } - // Creating foreground wave - if (!this.waveEl) { - this.waveEl = document.createElement('div'); - this.waveEl.classList.add('tap-target-wave'); - // Creating origin - if (!this.originEl) { - this.originEl = this._origin.cloneNode(true); // .clone(true, true); - this.originEl.classList.add('tap-target-origin'); - this.originEl.removeAttribute('id'); - this.originEl.removeAttribute('style'); - this.waveEl.append(this.originEl); - } - this.wrapper.append(this.waveEl); - } - } - _offset(el) { - const box = el.getBoundingClientRect(); - const docElem = document.documentElement; - return { - top: box.top + window.pageYOffset - docElem.clientTop, - left: box.left + window.pageXOffset - docElem.clientLeft - }; - } - _calculatePositioning() { - // Element or parent is fixed position? - let isFixed = getComputedStyle(this._origin).position === 'fixed'; - if (!isFixed) { - let currentElem = this._origin; - const parents = []; - while ((currentElem = currentElem.parentNode) && currentElem !== document) - parents.push(currentElem); - for (let i = 0; i < parents.length; i++) { - isFixed = getComputedStyle(parents[i]).position === 'fixed'; - if (isFixed) - break; - } - } - // Calculating origin - const originWidth = this._origin.offsetWidth; - const originHeight = this._origin.offsetHeight; - const originTop = isFixed ? this._offset(this._origin).top - Utils.getDocumentScrollTop() : this._offset(this._origin).top; - const originLeft = isFixed ? this._offset(this._origin).left - Utils.getDocumentScrollLeft() : this._offset(this._origin).left; - // Calculating screen - const windowWidth = window.innerWidth; - const windowHeight = window.innerHeight; - const scrollBarWidth = windowWidth - document.documentElement.clientWidth; - const centerX = windowWidth / 2; - const centerY = windowHeight / 2; - const isLeft = originLeft <= centerX; - const isRight = originLeft > centerX; - const isTop = originTop <= centerY; - const isBottom = originTop > centerY; - const isCenterX = originLeft >= windowWidth * 0.25 && originLeft <= windowWidth * 0.75; - // Calculating tap target - const tapTargetWidth = this.el.offsetWidth; - const tapTargetHeight = this.el.offsetHeight; - const tapTargetTop = originTop + originHeight / 2 - tapTargetHeight / 2; - const tapTargetLeft = originLeft + originWidth / 2 - tapTargetWidth / 2; - const tapTargetPosition = isFixed ? 'fixed' : 'absolute'; - // Calculating content - const tapTargetTextWidth = isCenterX ? tapTargetWidth : tapTargetWidth / 2 + originWidth; - const tapTargetTextHeight = tapTargetHeight / 2; - const tapTargetTextTop = isTop ? tapTargetHeight / 2 : 0; - const tapTargetTextBottom = 0; - const tapTargetTextLeft = isLeft && !isCenterX ? tapTargetWidth / 2 - originWidth : 0; - const tapTargetTextRight = 0; - const tapTargetTextPadding = originWidth; - const tapTargetTextAlign = isBottom ? 'bottom' : 'top'; - // Calculating wave - const tapTargetWaveWidth = originWidth > originHeight ? originWidth * 2 : originWidth * 2; - const tapTargetWaveHeight = tapTargetWaveWidth; - const tapTargetWaveTop = tapTargetHeight / 2 - tapTargetWaveHeight / 2; - const tapTargetWaveLeft = tapTargetWidth / 2 - tapTargetWaveWidth / 2; - // Setting tap target - this.wrapper.style.top = isTop ? tapTargetTop + 'px' : ''; - this.wrapper.style.right = isRight ? windowWidth - tapTargetLeft - tapTargetWidth - scrollBarWidth + 'px' : ''; - this.wrapper.style.bottom = isBottom ? windowHeight - tapTargetTop - tapTargetHeight + 'px' : ''; - this.wrapper.style.left = isLeft ? tapTargetLeft + 'px' : ''; - this.wrapper.style.position = tapTargetPosition; - // Setting content - this.contentEl.style.width = tapTargetTextWidth + 'px'; - this.contentEl.style.height = tapTargetTextHeight + 'px'; - this.contentEl.style.top = tapTargetTextTop + 'px'; - this.contentEl.style.right = tapTargetTextRight + 'px'; - this.contentEl.style.bottom = tapTargetTextBottom + 'px'; - this.contentEl.style.left = tapTargetTextLeft + 'px'; - this.contentEl.style.padding = tapTargetTextPadding + 'px'; - this.contentEl.style.verticalAlign = tapTargetTextAlign; - // Setting wave - this.waveEl.style.top = tapTargetWaveTop + 'px'; - this.waveEl.style.left = tapTargetWaveLeft + 'px'; - this.waveEl.style.width = tapTargetWaveWidth + 'px'; - this.waveEl.style.height = tapTargetWaveHeight + 'px'; - } - /** - * Open Tap Target. - */ - open = () => { - if (this.isOpen) - return; - // onOpen callback - if (typeof this.options.onOpen === 'function') { - this.options.onOpen.call(this, this._origin); - } - this.isOpen = true; - this.wrapper.classList.add('open'); - document.body.addEventListener('click', this._handleDocumentClick, true); - document.body.addEventListener('touchend', this._handleDocumentClick); - }; - /** - * Close Tap Target. - */ - close = () => { - if (!this.isOpen) - return; - // onClose callback - if (typeof this.options.onClose === 'function') { - this.options.onClose.call(this, this._origin); - } - this.isOpen = false; - this.wrapper.classList.remove('open'); - document.body.removeEventListener('click', this._handleDocumentClick, true); - document.body.removeEventListener('touchend', this._handleDocumentClick); - }; -} - -let _defaults$5 = { - dialRadius: 135, - outerRadius: 105, - innerRadius: 70, - tickRadius: 20, - duration: 350, - container: null, - defaultTime: 'now', // default time, 'now' or '13:14' e.g. - fromNow: 0, // Millisecond offset from the defaultTime - showClearBtn: false, - // internationalization - i18n: { - cancel: 'Cancel', - clear: 'Clear', - done: 'Ok' - }, - autoClose: false, // auto close when minute is selected - twelveHour: true, // change to 12 hour AM/PM clock from 24 hour - vibrate: true, // vibrate the device when dragging clock hand - // Callbacks - onOpenStart: null, - onOpenEnd: null, - onCloseStart: null, - onCloseEnd: null, - onSelect: null -}; -class Timepicker extends Component { - id; - modal; - modalEl; - plate; - digitalClock; - inputHours; - inputMinutes; - x0; - y0; - moved; - dx; - dy; - /** - * Current view on the timepicker. - * @default 'hours' - */ - currentView; - hand; - minutesView; - hours; - minutes; - /** The selected time. */ - time; - /** - * If the time is AM or PM on twelve-hour clock. - * @default 'PM' - */ - amOrPm; - static _template; - /** If the picker is open. */ - isOpen; - /** Vibrate device when dragging clock hand. */ - vibrate; - _canvas; - hoursView; - spanAmPm; - footer; - _amBtn; - _pmBtn; - bg; - bearing; - g; - toggleViewTimer; - canvas; - vibrateTimer; - constructor(el, options) { - super(el, options, Timepicker); - this.el.M_Timepicker = this; - this.options = { - ...Timepicker.defaults, - ...options - }; - this.id = Utils.guid(); - this._insertHTMLIntoDOM(); - this._setupModal(); - this._setupVariables(); - this._setupEventHandlers(); - this._clockSetup(); - this._pickerSetup(); - } - static get defaults() { - return _defaults$5; - } - /** - * Initializes instances of Timepicker. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, Timepicker); - } - static _addLeadingZero(num) { - return (num < 10 ? '0' : '') + num; - } - static _createSVGEl(name) { - let svgNS = 'http://www.w3.org/2000/svg'; - return document.createElementNS(svgNS, name); - } - static _Pos(e) { - if (e.type.startsWith("touch") && e.targetTouches.length >= 1) { - return { x: e.targetTouches[0].clientX, y: e.targetTouches[0].clientY }; - } - // mouse event - return { x: e.clientX, y: e.clientY }; - } - static getInstance(el) { - return el.M_Timepicker; - } - destroy() { - this._removeEventHandlers(); - this.modal.destroy(); - this.modalEl.remove(); - this.el.M_Timepicker = undefined; - } - _setupEventHandlers() { - this.el.addEventListener('click', this._handleInputClick); - this.el.addEventListener('keydown', this._handleInputKeydown); - this.plate.addEventListener('mousedown', this._handleClockClickStart); - this.plate.addEventListener('touchstart', this._handleClockClickStart); - this.digitalClock.addEventListener('keyup', this._inputFromTextField); - this.inputHours.addEventListener('click', () => this.showView('hours')); - this.inputMinutes.addEventListener('click', () => this.showView('minutes')); - } - _removeEventHandlers() { - this.el.removeEventListener('click', this._handleInputClick); - this.el.removeEventListener('keydown', this._handleInputKeydown); - } - _handleInputClick = () => { - this.open(); - }; - _handleInputKeydown = (e) => { - if (Utils.keys.ENTER.includes(e.key)) { - e.preventDefault(); - this.open(); - } - }; - _handleTimeInputEnterKey = (e) => { - if (Utils.keys.ENTER.includes(e.key)) { - e.preventDefault(); - this._inputFromTextField(); - } - }; - _handleClockClickStart = (e) => { - e.preventDefault(); - let clockPlateBR = this.plate.getBoundingClientRect(); - let offset = { x: clockPlateBR.left, y: clockPlateBR.top }; - this.x0 = offset.x + this.options.dialRadius; - this.y0 = offset.y + this.options.dialRadius; - this.moved = false; - let clickPos = Timepicker._Pos(e); - this.dx = clickPos.x - this.x0; - this.dy = clickPos.y - this.y0; - // Set clock hands - this.setHand(this.dx, this.dy, false); - // Mousemove on document - document.addEventListener('mousemove', this._handleDocumentClickMove); - document.addEventListener('touchmove', this._handleDocumentClickMove); - // Mouseup on document - document.addEventListener('mouseup', this._handleDocumentClickEnd); - document.addEventListener('touchend', this._handleDocumentClickEnd); - }; - _handleDocumentClickMove = (e) => { - e.preventDefault(); - let clickPos = Timepicker._Pos(e); - let x = clickPos.x - this.x0; - let y = clickPos.y - this.y0; - this.moved = true; - this.setHand(x, y, false); - }; - _handleDocumentClickEnd = (e) => { - e.preventDefault(); - document.removeEventListener('mouseup', this._handleDocumentClickEnd); - document.removeEventListener('touchend', this._handleDocumentClickEnd); - let clickPos = Timepicker._Pos(e); - let x = clickPos.x - this.x0; - let y = clickPos.y - this.y0; - if (this.moved && x === this.dx && y === this.dy) { - this.setHand(x, y); - } - if (this.currentView === 'hours') { - this.showView('minutes', this.options.duration / 2); - } - else if (this.options.autoClose) { - this.minutesView.classList.add('timepicker-dial-out'); - setTimeout(() => { - this.done(); - }, this.options.duration / 2); - } - if (typeof this.options.onSelect === 'function') { - this.options.onSelect.call(this, this.hours, this.minutes); - } - // Unbind mousemove event - document.removeEventListener('mousemove', this._handleDocumentClickMove); - document.removeEventListener('touchmove', this._handleDocumentClickMove); - }; - _insertHTMLIntoDOM() { - const template = document.createElement('template'); - template.innerHTML = Timepicker._template.trim(); - this.modalEl = template.content.firstChild; - this.modalEl.id = 'modal-' + this.id; - // Append popover to input by default - const optEl = this.options.container; - const containerEl = optEl instanceof HTMLElement ? optEl : document.querySelector(optEl); - if (this.options.container && !!containerEl) { - containerEl.append(this.modalEl); - } - else { - this.el.parentElement.appendChild(this.modalEl); - } - } - _setupModal() { - this.modal = Modal.init(this.modalEl, { - onOpenStart: this.options.onOpenStart, - onOpenEnd: this.options.onOpenEnd, - onCloseStart: this.options.onCloseStart, - onCloseEnd: () => { - if (typeof this.options.onCloseEnd === 'function') { - this.options.onCloseEnd.call(this); - } - this.isOpen = false; - } - }); - } - _setupVariables() { - this.currentView = 'hours'; - this.vibrate = navigator.vibrate - ? 'vibrate' - : navigator.webkitVibrate - ? 'webkitVibrate' - : null; - this._canvas = this.modalEl.querySelector('.timepicker-canvas'); - this.plate = this.modalEl.querySelector('.timepicker-plate'); - this.digitalClock = this.modalEl.querySelector('.timepicker-display-column'); - this.hoursView = this.modalEl.querySelector('.timepicker-hours'); - this.minutesView = this.modalEl.querySelector('.timepicker-minutes'); - this.inputHours = this.modalEl.querySelector('.timepicker-input-hours'); - this.inputMinutes = this.modalEl.querySelector('.timepicker-input-minutes'); - this.spanAmPm = this.modalEl.querySelector('.timepicker-span-am-pm'); - this.footer = this.modalEl.querySelector('.timepicker-footer'); - this.amOrPm = 'PM'; - } - _createButton(text, visibility) { - const button = document.createElement('button'); - button.classList.add('btn-flat', 'waves-effect'); - button.style.visibility = visibility; - button.type = 'button'; - button.tabIndex = this.options.twelveHour ? 3 : 1; - button.innerText = text; - return button; - } - _pickerSetup() { - const clearButton = this._createButton(this.options.i18n.clear, this.options.showClearBtn ? '' : 'hidden'); - clearButton.classList.add('timepicker-clear'); - clearButton.addEventListener('click', this.clear); - this.footer.appendChild(clearButton); - const confirmationBtnsContainer = document.createElement('div'); - confirmationBtnsContainer.classList.add('confirmation-btns'); - this.footer.append(confirmationBtnsContainer); - const cancelButton = this._createButton(this.options.i18n.cancel, ''); - cancelButton.classList.add('timepicker-close'); - cancelButton.addEventListener('click', this.close); - confirmationBtnsContainer.appendChild(cancelButton); - const doneButton = this._createButton(this.options.i18n.done, ''); - doneButton.classList.add('timepicker-close'); - doneButton.addEventListener('click', this.done); - confirmationBtnsContainer.appendChild(doneButton); - } - _clockSetup() { - if (this.options.twelveHour) { - // AM Button - this._amBtn = document.createElement('div'); - this._amBtn.classList.add('am-btn'); - this._amBtn.innerText = 'AM'; - this._amBtn.addEventListener('click', this._handleAmPmClick); - this.spanAmPm.appendChild(this._amBtn); - // PM Button - this._pmBtn = document.createElement('div'); - this._pmBtn.classList.add('pm-btn'); - this._pmBtn.innerText = 'PM'; - this._pmBtn.addEventListener('click', this._handleAmPmClick); - this.spanAmPm.appendChild(this._pmBtn); - } - this._buildHoursView(); - this._buildMinutesView(); - this._buildSVGClock(); - } - _buildSVGClock() { - // Draw clock hands and others - let dialRadius = this.options.dialRadius; - let tickRadius = this.options.tickRadius; - let diameter = dialRadius * 2; - let svg = Timepicker._createSVGEl('svg'); - svg.setAttribute('class', 'timepicker-svg'); - svg.setAttribute('width', diameter.toString()); - svg.setAttribute('height', diameter.toString()); - let g = Timepicker._createSVGEl('g'); - g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')'); - let bearing = Timepicker._createSVGEl('circle'); - bearing.setAttribute('class', 'timepicker-canvas-bearing'); - bearing.setAttribute('cx', '0'); - bearing.setAttribute('cy', '0'); - bearing.setAttribute('r', '4'); - let hand = Timepicker._createSVGEl('line'); - hand.setAttribute('x1', '0'); - hand.setAttribute('y1', '0'); - let bg = Timepicker._createSVGEl('circle'); - bg.setAttribute('class', 'timepicker-canvas-bg'); - bg.setAttribute('r', tickRadius.toString()); - g.appendChild(hand); - g.appendChild(bg); - g.appendChild(bearing); - svg.appendChild(g); - this._canvas.appendChild(svg); - this.hand = hand; - this.bg = bg; - this.bearing = bearing; - this.g = g; - } - _buildHoursView() { - const $tick = document.createElement('div'); - $tick.classList.add('timepicker-tick'); - // Hours view - if (this.options.twelveHour) { - for (let i = 1; i < 13; i += 1) { - const tick = $tick.cloneNode(true); - const radian = (i / 6) * Math.PI; - const radius = this.options.outerRadius; - tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px'; - tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px'; - tick.innerHTML = i === 0 ? '00' : i.toString(); - this.hoursView.appendChild(tick); - // tick.on(mousedownEvent, mousedown); - } - } - else { - for (let i = 0; i < 24; i += 1) { - const tick = $tick.cloneNode(true); - const radian = (i / 6) * Math.PI; - const inner = i > 0 && i < 13; - const radius = inner ? this.options.innerRadius : this.options.outerRadius; - tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px'; - tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px'; - tick.innerHTML = i === 0 ? '00' : i.toString(); - this.hoursView.appendChild(tick); - // tick.on(mousedownEvent, mousedown); - } - } - } - _buildMinutesView() { - const _tick = document.createElement('div'); - _tick.classList.add('timepicker-tick'); - // Minutes view - for (let i = 0; i < 60; i += 5) { - const tick = _tick.cloneNode(true); - const radian = (i / 30) * Math.PI; - tick.style.left = - this.options.dialRadius + - Math.sin(radian) * this.options.outerRadius - - this.options.tickRadius + - 'px'; - tick.style.top = - this.options.dialRadius - - Math.cos(radian) * this.options.outerRadius - - this.options.tickRadius + - 'px'; - tick.innerHTML = Timepicker._addLeadingZero(i); - this.minutesView.appendChild(tick); - } - } - _handleAmPmClick = (e) => { - const btnClicked = e.target; - this.amOrPm = btnClicked.classList.contains('am-btn') ? 'AM' : 'PM'; - this._updateAmPmView(); - }; - _updateAmPmView() { - if (this.options.twelveHour) { - if (this.amOrPm === 'PM') { - this._amBtn.classList.remove('text-primary'); - this._pmBtn.classList.add('text-primary'); - } - else if (this.amOrPm === 'AM') { - this._amBtn.classList.add('text-primary'); - this._pmBtn.classList.remove('text-primary'); - } - } - } - _updateTimeFromInput() { - // Get the time - let value = ((this.el.value || this.options.defaultTime || '') + '').split(':'); - if (this.options.twelveHour && !(typeof value[1] === 'undefined')) { - if (value[1].toUpperCase().indexOf('AM') > 0) { - this.amOrPm = 'AM'; - } - else { - this.amOrPm = 'PM'; - } - value[1] = value[1].replace('AM', '').replace('PM', ''); - } - if (value[0] === 'now') { - let now = new Date(+new Date() + this.options.fromNow); - value = [now.getHours().toString(), now.getMinutes().toString()]; - if (this.options.twelveHour) { - this.amOrPm = parseInt(value[0]) >= 12 && parseInt(value[0]) < 24 ? 'PM' : 'AM'; - } - } - this.hours = +value[0] || 0; - this.minutes = +value[1] || 0; - this.inputHours.value = this.hours; - this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes); - this._updateAmPmView(); - } - /** - * Show hours or minutes view on timepicker. - * @param view The name of the view you want to switch to, 'hours' or 'minutes'. - */ - showView = (view, delay = null) => { - if (view === 'minutes' && getComputedStyle(this.hoursView).visibility === 'visible') ; - let isHours = view === 'hours', nextView = isHours ? this.hoursView : this.minutesView, hideView = isHours ? this.minutesView : this.hoursView; - this.currentView = view; - if (isHours) { - this.inputHours.classList.add('text-primary'); - this.inputMinutes.classList.remove('text-primary'); - } - else { - this.inputHours.classList.remove('text-primary'); - this.inputMinutes.classList.add('text-primary'); - } - // Transition view - hideView.classList.add('timepicker-dial-out'); - nextView.style.visibility = 'visible'; - nextView.classList.remove('timepicker-dial-out'); - // Reset clock hand - this.resetClock(delay); - // After transitions ended - clearTimeout(this.toggleViewTimer); - this.toggleViewTimer = setTimeout(() => { - hideView.style.visibility = 'hidden'; - }, this.options.duration); - }; - resetClock(delay) { - let view = this.currentView, value = this[view], isHours = view === 'hours', unit = Math.PI / (isHours ? 6 : 30), radian = value * unit, radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius, x = Math.sin(radian) * radius, y = -Math.cos(radian) * radius, self = this; - if (delay) { - this.canvas?.classList.add('timepicker-canvas-out'); - setTimeout(() => { - self.canvas?.classList.remove('timepicker-canvas-out'); - self.setHand(x, y); - }, delay); - } - else { - this.setHand(x, y); - } - } - _inputFromTextField = () => { - const isHours = this.currentView === 'hours'; - if (isHours) { - const value = parseInt(this.inputHours.value); - if (value > 0 && value < 13) { - this.drawClockFromTimeInput(value, isHours); - this.showView('minutes', this.options.duration / 2); - this.hours = value; - this.inputMinutes.focus(); - } - else { - const hour = new Date().getHours(); - this.inputHours.value = (hour % 12).toString(); - } - } - else { - const value = parseInt(this.inputMinutes.value); - if (value >= 0 && value < 60) { - this.inputMinutes.value = Timepicker._addLeadingZero(value); - this.drawClockFromTimeInput(value, isHours); - this.minutes = value; - this.modalEl.querySelector('.confirmation-btns :nth-child(2)').focus(); - } - else { - const minutes = new Date().getMinutes(); - this.inputMinutes.value = Timepicker._addLeadingZero(minutes); - } - } - }; - drawClockFromTimeInput(value, isHours) { - const unit = Math.PI / (isHours ? 6 : 30); - const radian = value * unit; - let radius; - if (this.options.twelveHour) { - radius = this.options.outerRadius; - } - let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius; - this.hand.setAttribute('x2', cx1.toString()); - this.hand.setAttribute('y2', cy1.toString()); - this.bg.setAttribute('cx', cx2.toString()); - this.bg.setAttribute('cy', cy2.toString()); - } - setHand(x, y, roundBy5 = false) { - let radian = Math.atan2(x, -y), isHours = this.currentView === 'hours', unit = Math.PI / (isHours || roundBy5 ? 6 : 30), z = Math.sqrt(x * x + y * y), inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2, radius = inner ? this.options.innerRadius : this.options.outerRadius; - if (this.options.twelveHour) { - radius = this.options.outerRadius; - } - // Radian should in range [0, 2PI] - if (radian < 0) { - radian = Math.PI * 2 + radian; - } - // Get the round value - let value = Math.round(radian / unit); - // Get the round radian - radian = value * unit; - // Correct the hours or minutes - if (this.options.twelveHour) { - if (isHours) { - if (value === 0) - value = 12; - } - else { - if (roundBy5) - value *= 5; - if (value === 60) - value = 0; - } - } - else { - if (isHours) { - if (value === 12) { - value = 0; - } - value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12; - } - else { - if (roundBy5) { - value *= 5; - } - if (value === 60) { - value = 0; - } - } - } - // Once hours or minutes changed, vibrate the device - if (this[this.currentView] !== value) { - if (this.vibrate && this.options.vibrate) { - // Do not vibrate too frequently - if (!this.vibrateTimer) { - navigator[this.vibrate](10); - this.vibrateTimer = setTimeout(() => { - this.vibrateTimer = null; - }, 100); - } - } - } - this[this.currentView] = value; - if (isHours) { - this.inputHours.value = value.toString(); - } - else { - this.inputMinutes.value = Timepicker._addLeadingZero(value); - } - // Set clock hand and others' position - let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius; - this.hand.setAttribute('x2', cx1.toString()); - this.hand.setAttribute('y2', cy1.toString()); - this.bg.setAttribute('cx', cx2.toString()); - this.bg.setAttribute('cy', cy2.toString()); - } - /** - * Open timepicker. - */ - open = () => { - if (this.isOpen) - return; - this.isOpen = true; - this._updateTimeFromInput(); - this.showView('hours'); - this.modal.open(undefined); - }; - /** - * Close timepicker. - */ - close = () => { - if (!this.isOpen) - return; - this.isOpen = false; - this.modal.close(); - }; - done = (e = null, clearValue = null) => { - // Set input value - let last = this.el.value; - let value = clearValue - ? '' - : Timepicker._addLeadingZero(this.hours) + ':' + Timepicker._addLeadingZero(this.minutes); - this.time = value; - if (!clearValue && this.options.twelveHour) { - value = `${value} ${this.amOrPm}`; - } - this.el.value = value; - // Trigger change event - if (value !== last) { - this.el.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true })); - } - this.close(); - this.el.focus(); - }; - clear = () => { - this.done(null, true); - }; - static { - Timepicker._template = ` -
-
-
-
-
- - : - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- { - if (this.isOpen) - return; - isManual = isManual === undefined ? true : undefined; // Default value true - this.isOpen = true; - // Update tooltip content with HTML attribute options - this.options = { ...this.options, ...this._getAttributeOptions() }; - this._updateTooltipContent(); - this._setEnterDelayTimeout(isManual); - }; - /** - * Hide tooltip. - */ - close = () => { - if (!this.isOpen) - return; - this.isHovered = false; - this.isFocused = false; - this.isOpen = false; - this._setExitDelayTimeout(); - }; - _setExitDelayTimeout() { - clearTimeout(this._exitDelayTimeout); - this._exitDelayTimeout = setTimeout(() => { - if (this.isHovered || this.isFocused) - return; - this._animateOut(); - }, this.options.exitDelay); - } - _setEnterDelayTimeout(isManual) { - clearTimeout(this._enterDelayTimeout); - this._enterDelayTimeout = setTimeout(() => { - if (!this.isHovered && !this.isFocused && !isManual) - return; - this._animateIn(); - }, this.options.enterDelay); - } - _positionTooltip() { - const tooltip = this.tooltipEl; - const origin = this.el, originHeight = origin.offsetHeight, originWidth = origin.offsetWidth, tooltipHeight = tooltip.offsetHeight, tooltipWidth = tooltip.offsetWidth, margin = this.options.margin; - (this.xMovement = 0), (this.yMovement = 0); - let targetTop = origin.getBoundingClientRect().top + Utils.getDocumentScrollTop(); - let targetLeft = origin.getBoundingClientRect().left + Utils.getDocumentScrollLeft(); - if (this.options.position === 'top') { - targetTop += -tooltipHeight - margin; - targetLeft += originWidth / 2 - tooltipWidth / 2; - this.yMovement = -this.options.transitionMovement; - } - else if (this.options.position === 'right') { - targetTop += originHeight / 2 - tooltipHeight / 2; - targetLeft += originWidth + margin; - this.xMovement = this.options.transitionMovement; - } - else if (this.options.position === 'left') { - targetTop += originHeight / 2 - tooltipHeight / 2; - targetLeft += -tooltipWidth - margin; - this.xMovement = -this.options.transitionMovement; - } - else { - targetTop += originHeight + margin; - targetLeft += originWidth / 2 - tooltipWidth / 2; - this.yMovement = this.options.transitionMovement; - } - const newCoordinates = this._repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight); - tooltip.style.top = newCoordinates.y + 'px'; - tooltip.style.left = newCoordinates.x + 'px'; - } - _repositionWithinScreen(x, y, width, height) { - const scrollLeft = Utils.getDocumentScrollLeft(); - const scrollTop = Utils.getDocumentScrollTop(); - let newX = x - scrollLeft; - let newY = y - scrollTop; - const bounding = { - left: newX, - top: newY, - width: width, - height: height - }; - const offset = this.options.margin + this.options.transitionMovement; - const edges = Utils.checkWithinContainer(document.body, bounding, offset); - if (edges.left) { - newX = offset; - } - else if (edges.right) { - newX -= newX + width - window.innerWidth; - } - if (edges.top) { - newY = offset; - } - else if (edges.bottom) { - newY -= newY + height - window.innerHeight; - } - return { - x: newX + scrollLeft, - y: newY + scrollTop - }; - } - _animateIn() { - this._positionTooltip(); - this.tooltipEl.style.visibility = 'visible'; - const duration = this.options.inDuration; - // easeOutCubic - this.tooltipEl.style.transition = ` - transform ${duration}ms ease-out, - opacity ${duration}ms ease-out`; - setTimeout(() => { - this.tooltipEl.style.transform = `translateX(${this.xMovement}px) translateY(${this.yMovement}px)`; - this.tooltipEl.style.opacity = (this.options.opacity || 1).toString(); - }, 1); - } - _animateOut() { - const duration = this.options.outDuration; - // easeOutCubic - this.tooltipEl.style.transition = ` - transform ${duration}ms ease-out, - opacity ${duration}ms ease-out`; - setTimeout(() => { - this.tooltipEl.style.transform = `translateX(0px) translateY(0px)`; - this.tooltipEl.style.opacity = '0'; - }, 1); - /* - anim.remove(this.tooltipEl); - anim({ - targets: this.tooltipEl, - opacity: 0, - translateX: 0, - translateY: 0, - duration: this.options.outDuration, - easing: 'easeOutCubic' - }); - */ - } - _handleMouseEnter = () => { - this.isHovered = true; - this.isFocused = false; // Allows close of tooltip when opened by focus. - this.open(false); - }; - _handleMouseLeave = () => { - this.isHovered = false; - this.isFocused = false; // Allows close of tooltip when opened by focus. - this.close(); - }; - _handleFocus = () => { - if (Utils.tabPressed) { - this.isFocused = true; - this.open(false); - } - }; - _handleBlur = () => { - this.isFocused = false; - this.close(); - }; - _getAttributeOptions() { - let attributeOptions = {}; - const tooltipTextOption = this.el.getAttribute('data-tooltip'); - const tooltipId = this.el.getAttribute('data-tooltip-id'); - const positionOption = this.el.getAttribute('data-position'); - if (tooltipTextOption) { - attributeOptions.text = tooltipTextOption; - } - if (positionOption) { - attributeOptions.position = positionOption; - } - if (tooltipId) { - attributeOptions.tooltipId = tooltipId; - } - return attributeOptions; - } -} - -class Waves { - static _offset(el) { - const box = el.getBoundingClientRect(); - const docElem = document.documentElement; - return { - top: box.top + window.pageYOffset - docElem.clientTop, - left: box.left + window.pageXOffset - docElem.clientLeft - }; - } - // https://phoenix-dx.com/css-techniques-for-material-ripple-effect/ - static renderWaveEffect(targetElement, position = null, color = null) { - const isCentered = position === null; - const duration = 500; - let animationFrame, animationStart; - const animationStep = function (timestamp) { - if (!animationStart) { - animationStart = timestamp; - } - const frame = timestamp - animationStart; - if (frame < duration) { - const easing = (frame / duration) * (2 - (frame / duration)); - const circle = isCentered ? 'circle at 50% 50%' : `circle at ${position.x}px ${position.y}px`; - const waveColor = `rgba(${color?.r || 0}, ${color?.g || 0}, ${color?.b || 0}, ${0.3 * (1 - easing)})`; - const stop = 90 * easing + "%"; - targetElement.style.backgroundImage = "radial-gradient(" + circle + ", " + waveColor + " " + stop + ", transparent " + stop + ")"; - animationFrame = window.requestAnimationFrame(animationStep); - } - else { - targetElement.style.backgroundImage = 'none'; - window.cancelAnimationFrame(animationFrame); - } - }; - animationFrame = window.requestAnimationFrame(animationStep); - } - static Init() { - if (typeof document !== 'undefined') - document?.addEventListener("DOMContentLoaded", () => { - document.body.addEventListener('click', e => { - const trigger = e.target; - const el = trigger.closest('.waves-effect'); - if (el && el.contains(trigger)) { - const isCircular = el.classList.contains('waves-circle'); - const x = e.pageX - Waves._offset(el).left; - const y = e.pageY - Waves._offset(el).top; - let color = null; - if (el.classList.contains('waves-light')) - color = { r: 255, g: 255, b: 255 }; - Waves.renderWaveEffect(el, isCircular ? null : { x, y }, color); - } - }); - }); - } -} - -const _defaults$3 = {}; -// TODO: !!!!! -class Range extends Component { - _mousedown; - value; - thumb; - constructor(el, options) { - super(el, options, Range); - this.el.M_Range = this; - this.options = { - ...Range.defaults, - ...options - }; - this._mousedown = false; - this._setupThumb(); - this._setupEventHandlers(); - } - static get defaults() { - return _defaults$3; - } - /** - * Initializes instances of Range. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, Range); - } - static getInstance(el) { - return el.M_Range; - } - destroy() { - this._removeEventHandlers(); - this._removeThumb(); - this.el.M_Range = undefined; - } - _setupEventHandlers() { - this.el.addEventListener('change', this._handleRangeChange); - this.el.addEventListener('mousedown', this._handleRangeMousedownTouchstart); - this.el.addEventListener('touchstart', this._handleRangeMousedownTouchstart); - this.el.addEventListener('input', this._handleRangeInputMousemoveTouchmove); - this.el.addEventListener('mousemove', this._handleRangeInputMousemoveTouchmove); - this.el.addEventListener('touchmove', this._handleRangeInputMousemoveTouchmove); - this.el.addEventListener('mouseup', this._handleRangeMouseupTouchend); - this.el.addEventListener('touchend', this._handleRangeMouseupTouchend); - this.el.addEventListener('blur', this._handleRangeBlurMouseoutTouchleave); - this.el.addEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave); - this.el.addEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave); - } - _removeEventHandlers() { - this.el.removeEventListener('change', this._handleRangeChange); - this.el.removeEventListener('mousedown', this._handleRangeMousedownTouchstart); - this.el.removeEventListener('touchstart', this._handleRangeMousedownTouchstart); - this.el.removeEventListener('input', this._handleRangeInputMousemoveTouchmove); - this.el.removeEventListener('mousemove', this._handleRangeInputMousemoveTouchmove); - this.el.removeEventListener('touchmove', this._handleRangeInputMousemoveTouchmove); - this.el.removeEventListener('mouseup', this._handleRangeMouseupTouchend); - this.el.removeEventListener('touchend', this._handleRangeMouseupTouchend); - this.el.removeEventListener('blur', this._handleRangeBlurMouseoutTouchleave); - this.el.removeEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave); - this.el.removeEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave); - } - _handleRangeChange = () => { - this.value.innerHTML = this.el.value; - if (!this.thumb.classList.contains('active')) { - this._showRangeBubble(); - } - const offsetLeft = this._calcRangeOffset(); - this.thumb.classList.add('active'); - this.thumb.style.left = offsetLeft + 'px'; - }; - _handleRangeMousedownTouchstart = (e) => { - // Set indicator value - this.value.innerHTML = this.el.value; - this._mousedown = true; - this.el.classList.add('active'); - if (!this.thumb.classList.contains('active')) { - this._showRangeBubble(); - } - if (e.type !== 'input') { - const offsetLeft = this._calcRangeOffset(); - this.thumb.classList.add('active'); - this.thumb.style.left = offsetLeft + 'px'; - } - }; - _handleRangeInputMousemoveTouchmove = () => { - if (this._mousedown) { - if (!this.thumb.classList.contains('active')) { - this._showRangeBubble(); - } - const offsetLeft = this._calcRangeOffset(); - this.thumb.classList.add('active'); - this.thumb.style.left = offsetLeft + 'px'; - this.value.innerHTML = this.el.value; - } - }; - _handleRangeMouseupTouchend = () => { - this._mousedown = false; - this.el.classList.remove('active'); - }; - _handleRangeBlurMouseoutTouchleave = () => { - if (!this._mousedown) { - const paddingLeft = parseInt(getComputedStyle(this.el).paddingLeft); - const marginLeftText = 7 + paddingLeft + 'px'; - if (this.thumb.classList.contains('active')) { - const duration = 100; - // from - this.thumb.style.transition = 'none'; - setTimeout(() => { - this.thumb.style.transition = ` - height ${duration}ms ease, - width ${duration}ms ease, - top ${duration}ms ease, - margin ${duration}ms ease - `; - // to - this.thumb.style.height = '0'; - this.thumb.style.width = '0'; - this.thumb.style.top = '0'; - this.thumb.style.marginLeft = marginLeftText; - }, 1); - } - this.thumb.classList.remove('active'); - } - }; - _setupThumb() { - this.thumb = document.createElement('span'); - this.value = document.createElement('span'); - this.thumb.classList.add('thumb'); - this.value.classList.add('value'); - this.thumb.append(this.value); - this.el.after(this.thumb); - } - _removeThumb() { - this.thumb.remove(); - } - _showRangeBubble() { - const paddingLeft = parseInt(getComputedStyle(this.thumb.parentElement).paddingLeft); - const marginLeftText = -7 + paddingLeft + 'px'; // TODO: fix magic number? - const duration = 300; - // easeOutQuint - this.thumb.style.transition = ` - height ${duration}ms ease, - width ${duration}ms ease, - top ${duration}ms ease, - margin ${duration}ms ease - `; - // to - this.thumb.style.height = '30px'; - this.thumb.style.width = '30px'; - this.thumb.style.top = '-30px'; - this.thumb.style.marginLeft = marginLeftText; - } - _calcRangeOffset() { - const width = this.el.getBoundingClientRect().width - 15; - const max = parseFloat(this.el.getAttribute('max')) || 100; // Range default max - const min = parseFloat(this.el.getAttribute('min')) || 0; // Range default min - const percent = (parseFloat(this.el.value) - min) / (max - min); - return percent * width; - } - /** - * Initializes every range input in the current document. - */ - static Init() { - if (typeof document !== 'undefined') - Range.init((document?.querySelectorAll('input[type=range]')), {}); - } -} - -const _defaults$2 = Object.freeze({}); -class CharacterCounter extends Component { - /** Stores the reference to the counter HTML element. */ - counterEl; - /** Specifies whether the input is valid or not. */ - isInvalid; - /** Specifies whether the input text has valid length or not. */ - isValidLength; - constructor(el, options) { - super(el, {}, CharacterCounter); - this.el.M_CharacterCounter = this; - this.options = { - ...CharacterCounter.defaults, - ...options - }; - this.isInvalid = false; - this.isValidLength = false; - this._setupCounter(); - this._setupEventHandlers(); - } - static get defaults() { - return _defaults$2; - } - /** - * Initializes instances of CharacterCounter. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, CharacterCounter); - } - static getInstance(el) { - return el.M_CharacterCounter; - } - destroy() { - this._removeEventHandlers(); - this.el.CharacterCounter = undefined; - this._removeCounter(); - } - _setupEventHandlers() { - this.el.addEventListener('focus', this.updateCounter, true); - this.el.addEventListener('input', this.updateCounter, true); - } - _removeEventHandlers() { - this.el.removeEventListener('focus', this.updateCounter, true); - this.el.removeEventListener('input', this.updateCounter, true); - } - _setupCounter() { - this.counterEl = document.createElement('span'); - this.counterEl.classList.add('character-counter'); - this.counterEl.style.float = 'right'; - this.counterEl.style.fontSize = '12px'; - this.counterEl.style.height = '1'; - this.el.parentElement.appendChild(this.counterEl); - } - _removeCounter() { - this.counterEl.remove(); - } - updateCounter = () => { - let maxLength = parseInt(this.el.getAttribute('maxlength')), actualLength = this.el.value.length; - this.isValidLength = actualLength <= maxLength; - let counterString = actualLength.toString(); - if (maxLength) { - counterString += '/' + maxLength; - this._validateInput(); - } - this.counterEl.innerHTML = counterString; - }; - _validateInput() { - if (this.isValidLength && this.isInvalid) { - this.isInvalid = false; - this.el.classList.remove('invalid'); - } - else if (!this.isValidLength && !this.isInvalid) { - this.isInvalid = true; - this.el.classList.remove('valid'); - this.el.classList.add('invalid'); - } - } -} - -let _defaults$1 = { - indicators: true, - height: 400, - duration: 500, - interval: 6000, - pauseOnFocus: true, - pauseOnHover: true, - indicatorLabelFunc: null // Function which will generate a label for the indicators (ARIA) -}; -class Slider extends Component { - /** Index of current slide. */ - activeIndex; - interval; - eventPause; - _slider; - _slides; - _activeSlide; - _indicators; - _hovered; - _focused; - _focusCurrent; - _sliderId; - constructor(el, options) { - super(el, options, Slider); - this.el.M_Slider = this; - this.options = { - ...Slider.defaults, - ...options - }; - // init props - this.interval = null; - this.eventPause = false; - this._hovered = false; - this._focused = false; - this._focusCurrent = false; - // setup - this._slider = this.el.querySelector('.slides'); - this._slides = Array.from(this._slider.querySelectorAll('li')); - this.activeIndex = this._slides.findIndex(li => li.classList.contains('active')); - if (this.activeIndex !== -1) { - this._activeSlide = this._slides[this.activeIndex]; - } - this._setSliderHeight(); - // Sets element id if it does not have one - if (this._slider.hasAttribute('id')) - this._sliderId = this._slider.getAttribute('id'); - else { - this._sliderId = 'slider-' + Utils.guid(); - this._slider.setAttribute('id', this._sliderId); - } - const placeholderBase64 = 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; - // Set initial positions of captions - this._slides.forEach(slide => { - // Caption - //const caption = slide.querySelector('.caption'); - //if (caption) this._animateCaptionIn(caption, 0); - // Set Images as Background Images - const img = slide.querySelector('img'); - if (img) { - if (img.src !== placeholderBase64) { - img.style.backgroundImage = 'url(' + img.src + ')'; - img.src = placeholderBase64; - } - } - // Sets slide as focusable by code - if (!slide.hasAttribute('tabindex')) - slide.setAttribute('tabindex', '-1'); - // Removes initial visibility from "inactive" slides - slide.style.visibility = 'hidden'; - }); - this._setupIndicators(); - // Show active slide - if (this._activeSlide) { - this._activeSlide.style.display = 'block'; - this._activeSlide.style.visibility = 'visible'; - } - else { - this.activeIndex = 0; - this._slides[0].classList.add('active'); - this._slides[0].style.visibility = 'visible'; - this._activeSlide = this._slides[0]; - this._animateSlide(this._slides[0], true); - // Update indicators - if (this.options.indicators) { - this._indicators[this.activeIndex].children[0].classList.add('active'); - } - } - this._setupEventHandlers(); - // auto scroll - this.start(); - } - static get defaults() { - return _defaults$1; - } - /** - * Initializes instances of Slider. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, Slider); - } - static getInstance(el) { - return el.M_Slider; - } - destroy() { - this.pause(); - this._removeIndicators(); - this._removeEventHandlers(); - this.el.M_Slider = undefined; - } - _setupEventHandlers() { - if (this.options.pauseOnFocus) { - this.el.addEventListener('focusin', this._handleAutoPauseFocus); - this.el.addEventListener('focusout', this._handleAutoStartFocus); - } - if (this.options.pauseOnHover) { - this.el.addEventListener('mouseenter', this._handleAutoPauseHover); - this.el.addEventListener('mouseleave', this._handleAutoStartHover); - } - if (this.options.indicators) { - this._indicators.forEach((el) => { - el.addEventListener('click', this._handleIndicatorClick); - }); - } - } - _removeEventHandlers() { - if (this.options.pauseOnFocus) { - this.el.removeEventListener('focusin', this._handleAutoPauseFocus); - this.el.removeEventListener('focusout', this._handleAutoStartFocus); - } - if (this.options.pauseOnHover) { - this.el.removeEventListener('mouseenter', this._handleAutoPauseHover); - this.el.removeEventListener('mouseleave', this._handleAutoStartHover); - } - if (this.options.indicators) { - this._indicators.forEach((el) => { - el.removeEventListener('click', this._handleIndicatorClick); - }); - } - } - _handleIndicatorClick = (e) => { - const el = e.target.parentElement; - const currIndex = [...el.parentNode.children].indexOf(el); - this._focusCurrent = true; - this.set(currIndex); - }; - _handleAutoPauseHover = () => { - this._hovered = true; - if (this.interval != null) { - this._pause(true); - } - }; - _handleAutoPauseFocus = () => { - this._focused = true; - if (this.interval != null) { - this._pause(true); - } - }; - _handleAutoStartHover = () => { - this._hovered = false; - if (!(this.options.pauseOnFocus && this._focused) && this.eventPause) { - this.start(); - } - }; - _handleAutoStartFocus = () => { - this._focused = false; - if (!(this.options.pauseOnHover && this._hovered) && this.eventPause) { - this.start(); - } - }; - _handleInterval = () => { - const activeElem = this._slider.querySelector('.active'); - let newActiveIndex = [...activeElem.parentNode.children].indexOf(activeElem); - if (this._slides.length === newActiveIndex + 1) - newActiveIndex = 0; // loop to start - else - newActiveIndex += 1; - this.set(newActiveIndex); - }; - _animateSlide(slide, isDirectionIn) { - let dx = 0, dy = 0; - // from - slide.style.opacity = isDirectionIn ? '0' : '1'; - setTimeout(() => { - slide.style.transition = `opacity ${this.options.duration}ms ease`; - // to - slide.style.opacity = isDirectionIn ? '1' : '0'; - }, 1); - // Caption - const caption = slide.querySelector('.caption'); - if (!caption) - return; - if (caption.classList.contains('center-align')) - dy = -100; - else if (caption.classList.contains('right-align')) - dx = 100; - else if (caption.classList.contains('left-align')) - dx = -100; - // from - caption.style.opacity = isDirectionIn ? '0' : '1'; - caption.style.transform = isDirectionIn ? `translate(${dx}px, ${dy}px)` : `translate(0, 0)`; - setTimeout(() => { - caption.style.transition = `opacity ${this.options.duration}ms ease, transform ${this.options.duration}ms ease`; - // to - caption.style.opacity = isDirectionIn ? '1' : '0'; - caption.style.transform = isDirectionIn ? `translate(0, 0)` : `translate(${dx}px, ${dy}px)`; - }, this.options.duration); // delay - } - _setSliderHeight() { - // If fullscreen, do nothing - if (!this.el.classList.contains('fullscreen')) { - if (this.options.indicators) { - // Add height if indicators are present - this.el.style.height = (this.options.height + 40) + 'px'; //.css('height', this.options.height + 40 + 'px'); - } - else { - this.el.style.height = this.options.height + 'px'; - } - this._slider.style.height = this.options.height + 'px'; - } - } - _setupIndicators() { - if (this.options.indicators) { - const ul = document.createElement('ul'); - ul.classList.add('indicators'); - const arrLi = []; - this._slides.forEach((el, i) => { - const label = this.options.indicatorLabelFunc - ? this.options.indicatorLabelFunc.call(this, i + 1, i === 0) - : `${i + 1}`; - const li = document.createElement('li'); - li.classList.add('indicator-item'); - li.innerHTML = ``; - arrLi.push(li); - ul.append(li); - }); - this.el.append(ul); - this._indicators = arrLi; - } - } - _removeIndicators() { - this.el.querySelector('ul.indicators').remove(); //find('ul.indicators').remove(); - } - set(index) { - // Wrap around indices. - if (index >= this._slides.length) - index = 0; - else if (index < 0) - index = this._slides.length - 1; - // Only do if index changes - if (this.activeIndex === index) - return; - this._activeSlide = this._slides[this.activeIndex]; - const _caption = this._activeSlide.querySelector('.caption'); - this._activeSlide.classList.remove('active'); - // Enables every slide - this._slides.forEach(slide => slide.style.visibility = 'visible'); - //--- Hide active Slide + Caption - this._activeSlide.style.opacity = '0'; - setTimeout(() => { - this._slides.forEach(slide => { - if (slide.classList.contains('active')) - return; - slide.style.opacity = '0'; - slide.style.transform = 'translate(0, 0)'; - // Disables invisible slides (for assistive technologies) - slide.style.visibility = 'hidden'; - }); - }, this.options.duration); - // Hide active Caption - //this._animateCaptionIn(_caption, this.options.duration); - _caption.style.opacity = '0'; - // Update indicators - if (this.options.indicators) { - const activeIndicator = this._indicators[this.activeIndex].children[0]; - const nextIndicator = this._indicators[index].children[0]; - activeIndicator.classList.remove('active'); - nextIndicator.classList.add('active'); - if (typeof this.options.indicatorLabelFunc === "function") { - activeIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, this.activeIndex, false); - nextIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, index, true); - } - } - //--- Show new Slide + Caption - this._animateSlide(this._slides[index], true); - this._slides[index].classList.add('active'); - this.activeIndex = index; - // Reset interval, if allowed. This check prevents autostart - // when slider is paused, since it can be changed though indicators. - if (this.interval != null) { - this.start(); - } - } - _pause(fromEvent) { - clearInterval(this.interval); - this.eventPause = fromEvent; - this.interval = null; - } - /** - * Pause slider autoslide. - */ - pause = () => { - this._pause(false); - }; - /** - * Start slider autoslide. - */ - start = () => { - clearInterval(this.interval); - this.interval = setInterval(this._handleInterval, this.options.duration + this.options.interval); - this.eventPause = false; - }; - /** - * Move to next slider. - */ - next = () => { - let newIndex = this.activeIndex + 1; - // Wrap around indices. - if (newIndex >= this._slides.length) - newIndex = 0; - else if (newIndex < 0) - newIndex = this._slides.length - 1; - this.set(newIndex); - }; - /** - * Move to prev slider. - */ - prev = () => { - let newIndex = this.activeIndex - 1; - // Wrap around indices. - if (newIndex >= this._slides.length) - newIndex = 0; - else if (newIndex < 0) - newIndex = this._slides.length - 1; - this.set(newIndex); - }; -} - -let _defaults = { - text: '', - displayLength: 4000, - inDuration: 300, - outDuration: 375, - classes: '', - completeCallback: null, - activationPercent: 0.8 -}; -class Toast { - /** The toast element. */ - el; - /** - * The remaining amount of time in ms that the toast - * will stay before dismissal. - */ - timeRemaining; - /** - * Describes the current pan state of the Toast. - */ - panning; - options; - message; - counterInterval; - wasSwiped; - startingXPos; - xPos; - time; - deltaX; - velocityX; - static _toasts; - static _container; - static _draggedToast; - constructor(options) { - this.options = { - ...Toast.defaults, - ...options - }; - this.message = this.options.text; - this.panning = false; - this.timeRemaining = this.options.displayLength; - if (Toast._toasts.length === 0) { - Toast._createContainer(); - } - // Create new toast - Toast._toasts.push(this); - let toastElement = this._createToast(); - toastElement.M_Toast = this; - this.el = toastElement; - this._animateIn(); - this._setTimer(); - } - static get defaults() { - return _defaults; - } - static getInstance(el) { - return el.M_Toast; - } - static _createContainer() { - const container = document.createElement('div'); - container.setAttribute('id', 'toast-container'); - // Add event handler - container.addEventListener('touchstart', Toast._onDragStart); - container.addEventListener('touchmove', Toast._onDragMove); - container.addEventListener('touchend', Toast._onDragEnd); - container.addEventListener('mousedown', Toast._onDragStart); - document.addEventListener('mousemove', Toast._onDragMove); - document.addEventListener('mouseup', Toast._onDragEnd); - document.body.appendChild(container); - Toast._container = container; - } - static _removeContainer() { - document.removeEventListener('mousemove', Toast._onDragMove); - document.removeEventListener('mouseup', Toast._onDragEnd); - Toast._container.remove(); - Toast._container = null; - } - static _onDragStart(e) { - if (e.target && e.target.closest('.toast')) { - const toastElem = e.target.closest('.toast'); - const toast = toastElem.M_Toast; - toast.panning = true; - Toast._draggedToast = toast; - toast.el.classList.add('panning'); - toast.el.style.transition = ''; - toast.startingXPos = Toast._xPos(e); - toast.time = Date.now(); - toast.xPos = Toast._xPos(e); - } - } - static _onDragMove(e) { - if (!!Toast._draggedToast) { - e.preventDefault(); - const toast = Toast._draggedToast; - toast.deltaX = Math.abs(toast.xPos - Toast._xPos(e)); - toast.xPos = Toast._xPos(e); - toast.velocityX = toast.deltaX / (Date.now() - toast.time); - toast.time = Date.now(); - const totalDeltaX = toast.xPos - toast.startingXPos; - const activationDistance = toast.el.offsetWidth * toast.options.activationPercent; - toast.el.style.transform = `translateX(${totalDeltaX}px)`; - toast.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString(); - } - } - static _onDragEnd() { - if (!!Toast._draggedToast) { - let toast = Toast._draggedToast; - toast.panning = false; - toast.el.classList.remove('panning'); - let totalDeltaX = toast.xPos - toast.startingXPos; - let activationDistance = toast.el.offsetWidth * toast.options.activationPercent; - let shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1; - // Remove toast - if (shouldBeDismissed) { - toast.wasSwiped = true; - toast.dismiss(); - // Animate toast back to original position - } - else { - toast.el.style.transition = 'transform .2s, opacity .2s'; - toast.el.style.transform = ''; - toast.el.style.opacity = ''; - } - Toast._draggedToast = null; - } - } - static _xPos(e) { - if (e.type.startsWith("touch") && e.targetTouches.length >= 1) { - return e.targetTouches[0].clientX; - } - // mouse event - return e.clientX; - } - /** - * dismiss all toasts. - */ - static dismissAll() { - for (let toastIndex in Toast._toasts) { - Toast._toasts[toastIndex].dismiss(); - } - } - _createToast() { - let toast = this.options.toastId - ? document.getElementById(this.options.toastId) - : document.createElement('div'); - if (toast instanceof HTMLTemplateElement) { - const node = toast.content.cloneNode(true); - toast = node.firstElementChild; - } - toast.classList.add('toast'); - toast.setAttribute('role', 'alert'); - toast.setAttribute('aria-live', 'assertive'); - toast.setAttribute('aria-atomic', 'true'); - // Add custom classes onto toast - if (this.options.classes.length > 0) { - toast.classList.add(...this.options.classes.split(' ')); - } - if (this.message) - toast.innerText = this.message; - Toast._container.appendChild(toast); - return toast; - } - _animateIn() { - // Animate toast in - this.el.style.display = ""; - this.el.style.opacity = '0'; - // easeOutCubic - this.el.style.transition = ` - top ${this.options.inDuration}ms ease, - opacity ${this.options.inDuration}ms ease - `; - setTimeout(() => { - this.el.style.top = '0'; - this.el.style.opacity = '1'; - }, 1); - } - /** - * Create setInterval which automatically removes toast when timeRemaining >= 0 - * has been reached. - */ - _setTimer() { - if (this.timeRemaining !== Infinity) { - this.counterInterval = setInterval(() => { - // If toast is not being dragged, decrease its time remaining - if (!this.panning) { - this.timeRemaining -= 20; - } - // Animate toast out - if (this.timeRemaining <= 0) { - this.dismiss(); - } - }, 20); - } - } - /** - * Dismiss toast with animation. - */ - dismiss() { - window.clearInterval(this.counterInterval); - let activationDistance = this.el.offsetWidth * this.options.activationPercent; - if (this.wasSwiped) { - this.el.style.transition = 'transform .05s, opacity .05s'; - this.el.style.transform = `translateX(${activationDistance}px)`; - this.el.style.opacity = '0'; - } - // easeOutExpo - this.el.style.transition = ` - margin ${this.options.outDuration}ms ease, - opacity ${this.options.outDuration}ms ease`; - setTimeout(() => { - this.el.style.opacity = '0'; - this.el.style.marginTop = '-40px'; - }, 1); - setTimeout(() => { - // Call the optional callback - if (typeof this.options.completeCallback === 'function') { - this.options.completeCallback(); - } - // Remove toast from DOM - if (this.el.id != this.options.toastId) { - this.el.remove(); - Toast._toasts.splice(Toast._toasts.indexOf(this), 1); - if (Toast._toasts.length === 0) { - Toast._removeContainer(); - } - } - }, this.options.outDuration); - } - static { - Toast._toasts = []; - Toast._container = null; - Toast._draggedToast = null; - } -} - -const version = '2.1.1'; -const Grid = (children = '') => { - return `
${children}`; -}; -function Button(children = '') { - return ``; -} -/** - * Automatically initialize components. - * @param context Root element to initialize. Defaults to `document.body`. - */ -function AutoInit(context = document.body) { - let registry = { - Autocomplete: context.querySelectorAll('.autocomplete:not(.no-autoinit)'), - Carousel: context.querySelectorAll('.carousel:not(.no-autoinit)'), - Chips: context.querySelectorAll('.chips:not(.no-autoinit)'), - Collapsible: context.querySelectorAll('.collapsible:not(.no-autoinit)'), - Datepicker: context.querySelectorAll('.datepicker:not(.no-autoinit)'), - Dropdown: context.querySelectorAll('.dropdown-trigger:not(.no-autoinit)'), - Materialbox: context.querySelectorAll('.materialboxed:not(.no-autoinit)'), - Modal: context.querySelectorAll('.modal:not(.no-autoinit)'), - Parallax: context.querySelectorAll('.parallax:not(.no-autoinit)'), - Pushpin: context.querySelectorAll('.pushpin:not(.no-autoinit)'), - ScrollSpy: context.querySelectorAll('.scrollspy:not(.no-autoinit)'), - FormSelect: context.querySelectorAll('select:not(.no-autoinit)'), - Sidenav: context.querySelectorAll('.sidenav:not(.no-autoinit)'), - Tabs: context.querySelectorAll('.tabs:not(.no-autoinit)'), - TapTarget: context.querySelectorAll('.tap-target:not(.no-autoinit)'), - Timepicker: context.querySelectorAll('.timepicker:not(.no-autoinit)'), - Tooltip: context.querySelectorAll('.tooltipped:not(.no-autoinit)'), - FloatingActionButton: context.querySelectorAll('.fixed-action-btn:not(.no-autoinit)') - }; - Autocomplete.init(registry.Autocomplete, {}); - Carousel.init(registry.Carousel, {}); - Chips.init(registry.Chips, {}); - Collapsible.init(registry.Collapsible, {}); - Datepicker.init(registry.Datepicker, {}); - Dropdown.init(registry.Dropdown, {}); - Materialbox.init(registry.Materialbox, {}); - Modal.init(registry.Modal, {}); - Parallax.init(registry.Parallax, {}); - Pushpin.init(registry.Pushpin, {}); - ScrollSpy.init(registry.ScrollSpy, {}); - FormSelect.init(registry.FormSelect, {}); - Sidenav.init(registry.Sidenav, {}); - Tabs.init(registry.Tabs, {}); - TapTarget.init(registry.TapTarget, {}); - Timepicker.init(registry.Timepicker, {}); - Tooltip.init(registry.Tooltip, {}); - FloatingActionButton.init(registry.FloatingActionButton, {}); -} -// Init -if (typeof document !== 'undefined') { - document.addEventListener('keydown', Utils.docHandleKeydown, true); - document.addEventListener('keyup', Utils.docHandleKeyup, true); - document.addEventListener('focus', Utils.docHandleFocus, true); - document.addEventListener('blur', Utils.docHandleBlur, true); -} -Cards.Init(); -Forms.Init(); -Chips.Init(); -Waves.Init(); -Range.Init(); - -exports.AutoInit = AutoInit; -exports.Autocomplete = Autocomplete; -exports.Button = Button; -exports.Cards = Cards; -exports.Carousel = Carousel; -exports.CharacterCounter = CharacterCounter; -exports.Chips = Chips; -exports.Collapsible = Collapsible; -exports.Datepicker = Datepicker; -exports.Dropdown = Dropdown; -exports.FloatingActionButton = FloatingActionButton; -exports.FormSelect = FormSelect; -exports.Forms = Forms; -exports.Grid = Grid; -exports.Materialbox = Materialbox; -exports.Modal = Modal; -exports.Parallax = Parallax; -exports.Pushpin = Pushpin; -exports.Range = Range; -exports.ScrollSpy = ScrollSpy; -exports.Sidenav = Sidenav; -exports.Slider = Slider; -exports.Tabs = Tabs; -exports.TapTarget = TapTarget; -exports.Timepicker = Timepicker; -exports.Toast = Toast; -exports.Tooltip = Tooltip; -exports.Waves = Waves; -exports.version = version; diff --git a/dist/js/materialize.d.ts b/dist/js/materialize.d.ts deleted file mode 100644 index 7b46de6fc7..0000000000 --- a/dist/js/materialize.d.ts +++ /dev/null @@ -1,2333 +0,0 @@ -/** - * Base options for component initialization. - */ -interface BaseOptions { -} -type MElement = HTMLElement | Element; -type InitElements = NodeListOf | HTMLCollectionOf; -type ComponentConstructor, O extends BaseOptions> = { - new (el: HTMLElement, options: Partial): T; -}; -type ComponentType, O extends BaseOptions> = ComponentConstructor & typeof Component; -interface I18nOptions { - cancel: string; - clear: string; - done: string; -} -interface Openable { - isOpen: boolean; - open(): void; - close(): void; -} -/** - * Base class implementation for Materialize components. - */ -declare class Component { - /** - * The DOM element the plugin was initialized with. - */ - el: HTMLElement; - /** - * The options the instance was initialized with. - */ - options: O; - /** - * Constructs component instance and set everything up. - */ - constructor(el: HTMLElement, options: Partial, classDef: ComponentType, O>); - /** - * Initializes component instance. - * @param el HTML element. - * @param options Component options. - * @param classDef Class definition. - */ - protected static init>(el: I, options: O, classDef: ComponentType): C; - /** - * Initializes component instances. - * @param els HTML elements. - * @param options Component options. - * @param classDef Class definition. - */ - protected static init>(els: InitElements, options: Partial, classDef: ComponentType): C[]; - /** - * Initializes component instances. - * @param els HTML elements. - * @param options Component options. - * @param classDef Class definition. - */ - protected static init>(els: I | InitElements, options: Partial, classDef: ComponentType): C | C[]; - /** - * @returns default options for component instance. - */ - static get defaults(): BaseOptions; - /** - * Retrieves component instance for the given element. - * @param el Associated HTML Element. - */ - static getInstance(el: HTMLElement): Component; - /** - * Destroy plugin instance and teardown. - */ - destroy(): void; -} - -interface DropdownOptions extends BaseOptions { - /** - * Defines the edge the menu is aligned to. - * @default 'left' - */ - alignment: 'left' | 'right'; - /** - * If true, automatically focus dropdown el for keyboard. - * @default true - */ - autoFocus: boolean; - /** - * If true, constrainWidth to the size of the dropdown activator. - * @default true - */ - constrainWidth: boolean; - /** - * Provide an element that will be the bounding container of the dropdown. - * @default null - */ - container: Element; - /** - * If false, the dropdown will show below the trigger. - * @default true - */ - coverTrigger: boolean; - /** - * If true, close dropdown on item click. - * @default true - */ - closeOnClick: boolean; - /** - * If true, the dropdown will open on hover. - * @default false - */ - hover: boolean; - /** - * The duration of the transition enter in milliseconds. - * @default 150 - */ - inDuration: number; - /** - * The duration of the transition out in milliseconds. - * @default 250 - */ - outDuration: number; - /** - * Function called when dropdown starts entering. - * @default null - */ - onOpenStart: (el: HTMLElement) => void; - /** - * Function called when dropdown finishes entering. - * @default null - */ - onOpenEnd: (el: HTMLElement) => void; - /** - * Function called when dropdown starts exiting. - * @default null - */ - onCloseStart: (el: HTMLElement) => void; - /** - * Function called when dropdown finishes exiting. - * @default null - */ - onCloseEnd: (el: HTMLElement) => void; - /** - * Function called when item is clicked. - * @default null - */ - onItemClick: (el: HTMLLIElement) => void; -} -declare class Dropdown extends Component implements Openable { - static _dropdowns: Dropdown[]; - /** ID of the dropdown element. */ - id: string; - /** The DOM element of the dropdown. */ - dropdownEl: HTMLElement; - /** If the dropdown is open. */ - isOpen: boolean; - /** If the dropdown content is scrollable. */ - isScrollable: boolean; - isTouchMoving: boolean; - /** The index of the item focused. */ - focusedIndex: number; - filterQuery: any[]; - filterTimeout: NodeJS.Timeout; - constructor(el: HTMLElement, options: Partial); - static get defaults(): DropdownOptions; - /** - * Initializes instance of Dropdown. - * @param el HTML element. - * @param options Component options. - */ - static init(el: HTMLElement, options?: Partial): Dropdown; - /** - * Initializes instances of Dropdown. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): Dropdown[]; - static getInstance(el: HTMLElement): Dropdown; - destroy(): void; - _setupEventHandlers(): void; - _removeEventHandlers(): void; - _setupTemporaryEventHandlers(): void; - _removeTemporaryEventHandlers(): void; - _handleClick: (e: MouseEvent) => void; - _handleMouseEnter: () => void; - _handleMouseLeave: (e: MouseEvent) => void; - _handleDocumentClick: (e: MouseEvent) => void; - _handleTriggerKeydown: (e: KeyboardEvent) => void; - _handleDocumentTouchmove: (e: TouchEvent) => void; - _handleDropdownClick: (e: MouseEvent) => void; - _handleDropdownKeydown: (e: KeyboardEvent) => void; - _handleWindowResize: (e: Event) => void; - _resetFilterQuery: () => void; - _resetDropdownStyles(): void; - _moveDropdown(containerEl?: HTMLElement): void; - _makeDropdownFocusable(): void; - _focusFocusedItem(): void; - _getDropdownPosition(closestOverflowParent: HTMLElement): { - x: number; - y: number; - verticalAlignment: string; - horizontalAlignment: "left" | "right"; - height: number; - width: number; - }; - _animateIn(): void; - _animateOut(): void; - private _getClosestAncestor; - _placeDropdown(): void; - /** - * Open dropdown. - */ - open: () => void; - /** - * Close dropdown. - */ - close: () => void; - /** - * While dropdown is open, you can recalculate its dimensions if its contents have changed. - */ - recalculateDimensions: () => void; -} - -interface AutocompleteData { - /** - * A primitive value that can be converted to string. - * If "text" is not provided, it will also be used as "option text" as well - */ - id: string | number; - /** - * This optional attribute is used as "display value" for the current entry. - * When provided, it will also be taken into consideration by the standard search function. - */ - text?: string; - /** - * This optional attribute is used to provide a valid image URL to the current option. - */ - image?: string; - /** - * Optional attributes which describes the option. - */ - description?: string; -} -interface AutocompleteOptions extends BaseOptions { - /** - * Data object defining autocomplete options with - * optional icon strings. - */ - data: AutocompleteData[]; - /** - * Flag which can be set if multiple values can be selected. The Result will be an Array. - * @default false - */ - isMultiSelect: boolean; - /** - * Callback for when autocompleted. - */ - onAutocomplete: (entries: AutocompleteData[]) => void; - /** - * Minimum number of characters before autocomplete starts. - * @default 1 - */ - minLength: number; - /** - * The height of the Menu which can be set via css-property. - * @default '300px' - */ - maxDropDownHeight: string; - /** - * Function is called when the input text is altered and data can also be loaded asynchronously. - * If the results are collected the items in the list can be updated via the function setMenuItems(collectedItems). - * @param text Searched text. - * @param autocomplete Current autocomplete instance. - */ - onSearch: (text: string, autocomplete: Autocomplete) => void; - /** - * If true will render the key from each item directly as HTML. - * User input MUST be properly sanitized first. - * @default false - */ - allowUnsafeHTML: boolean; - /** - * Pass options object to select dropdown initialization. - * @default {} - */ - dropdownOptions: Partial; -} -declare class Autocomplete extends Component { - el: HTMLInputElement; - /** If the autocomplete is open. */ - isOpen: boolean; - /** Number of matching autocomplete options. */ - count: number; - /** Index of the current selected option. */ - activeIndex: number; - private oldVal; - private $active; - private _mousedown; - container: HTMLElement; - /** Instance of the dropdown plugin for this autocomplete. */ - dropdown: Dropdown; - static _keydown: boolean; - selectedValues: AutocompleteData[]; - menuItems: AutocompleteData[]; - constructor(el: HTMLInputElement, options: Partial); - static get defaults(): AutocompleteOptions; - /** - * Initializes instance of Autocomplete. - * @param el HTML element. - * @param options Component options. - */ - static init(el: HTMLInputElement, options?: Partial): Autocomplete; - /** - * Initializes instances of Autocomplete. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): Autocomplete[]; - static getInstance(el: HTMLElement): Autocomplete; - destroy(): void; - _setupEventHandlers(): void; - _removeEventHandlers(): void; - _setupDropdown(): void; - _removeDropdown(): void; - _handleInputBlur: () => void; - _handleInputKeyupAndFocus: (e: KeyboardEvent) => void; - _handleInputKeydown: (e: KeyboardEvent) => void; - _handleInputClick: () => void; - _handleContainerMousedownAndTouchstart: () => void; - _handleContainerMouseupAndTouchend: () => void; - _resetCurrentElementPosition(): void; - _resetAutocomplete(): void; - _highlightPartialText(input: string, label: string): string[]; - _createDropdownItem(entry: AutocompleteData): HTMLLIElement; - _renderDropdown(): void; - _setStatusLoading(): void; - _updateSelectedInfo(): void; - _refreshInputText(): void; - _triggerChanged(): void; - /** - * Show autocomplete. - */ - open: () => void; - /** - * Hide autocomplete. - */ - close: () => void; - /** - * Updates the visible or selectable items shown in the menu. - * @param menuItems Items to be available. - */ - setMenuItems(menuItems: AutocompleteData[]): void; - /** - * Sets selected values. - * @param entries - */ - setValues(entries: AutocompleteData[]): void; - /** - * Select a specific autocomplete option via id-property. - * @param id The id of a data-entry. - */ - selectOption(id: number | string): void; -} - -interface FloatingActionButtonOptions extends BaseOptions { - /** - * Direction FAB menu opens. - * @default "top" - */ - direction: "top" | "right" | "bottom" | "left"; - /** - * true: FAB menu appears on hover, false: FAB menu appears on click. - * @default true - */ - hoverEnabled: boolean; - /** - * Enable transit the FAB into a toolbar on click. - * @default false - */ - toolbarEnabled: boolean; -} -declare class FloatingActionButton extends Component implements Openable { - /** - * Describes open/close state of FAB. - */ - isOpen: boolean; - private _anchor; - private _menu; - private _floatingBtns; - private _floatingBtnsReverse; - offsetY: number; - offsetX: number; - btnBottom: number; - btnLeft: number; - btnWidth: number; - constructor(el: HTMLElement, options: Partial); - static get defaults(): FloatingActionButtonOptions; - /** - * Initializes instance of FloatingActionButton. - * @param el HTML element. - * @param options Component options. - */ - static init(el: HTMLElement, options?: Partial): FloatingActionButton; - /** - * Initializes instances of FloatingActionButton. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): FloatingActionButton[]; - static getInstance(el: HTMLElement): FloatingActionButton; - destroy(): void; - _setupEventHandlers(): void; - _removeEventHandlers(): void; - _handleFABClick: () => void; - _handleDocumentClick: (e: MouseEvent) => void; - /** - * Open FAB. - */ - open: () => void; - /** - * Close FAB. - */ - close: () => void; - _animateInFAB(): void; - _animateOutFAB(): void; - _animateInToolbar(): void; -} - -declare class Cards { - static Init(): void; -} - -interface CarouselOptions extends BaseOptions { - /** - * Transition duration in milliseconds. - * @default 200 - */ - duration: number; - /** - * Perspective zoom. If 0, all items are the same size. - * @default -100 - */ - dist: number; - /** - * Set the spacing of the center item. - * @default 0 - */ - shift: number; - /** - * Set the padding between non center items. - * @default 0 - */ - padding: number; - /** - * Set the number of visible items. - * @default 5 - */ - numVisible: number; - /** - * Make the carousel a full width slider like the second example. - * @default false - */ - fullWidth: boolean; - /** - * Set to true to show indicators. - * @default false - */ - indicators: boolean; - /** - * Don't wrap around and cycle through items. - * @default false - */ - noWrap: boolean; - /** - * Callback for when a new slide is cycled to. - * @default null - */ - onCycleTo: (current: Element, dragged: boolean) => void; -} -declare class Carousel extends Component { - hasMultipleSlides: boolean; - showIndicators: boolean; - noWrap: boolean; - /** If the carousel is being clicked or tapped. */ - pressed: boolean; - /** If the carousel is currently being dragged. */ - dragged: boolean; - offset: number; - target: number; - images: HTMLElement[]; - itemWidth: any; - itemHeight: any; - dim: number; - _indicators: any; - count: number; - xform: string; - verticalDragged: boolean; - reference: any; - referenceY: any; - velocity: number; - frame: number; - timestamp: number; - ticker: string | number | NodeJS.Timeout; - amplitude: number; - /** The index of the center carousel item. */ - center: number; - imageHeight: any; - scrollingTimeout: any; - oneTimeCallback: any; - constructor(el: HTMLElement, options: Partial); - static get defaults(): CarouselOptions; - /** - * Initializes instance of Carousel. - * @param el HTML element. - * @param options Component options. - */ - static init(el: HTMLElement, options?: Partial): Carousel; - /** - * Initializes instances of Carousel. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): Carousel[]; - static getInstance(el: HTMLElement): Carousel; - destroy(): void; - _setupEventHandlers(): void; - _removeEventHandlers(): void; - _handleThrottledResize: () => void; - _handleCarouselTap: (e: MouseEvent | TouchEvent) => void; - _handleCarouselDrag: (e: MouseEvent | TouchEvent) => boolean; - _handleCarouselRelease: (e: MouseEvent | TouchEvent) => boolean; - _handleCarouselClick: (e: MouseEvent | TouchEvent) => boolean; - _handleIndicatorClick: (e: Event) => void; - _handleResize: () => void; - _setCarouselHeight(imageOnly?: boolean): void; - _xpos(e: MouseEvent | TouchEvent): number; - _ypos(e: MouseEvent | TouchEvent): number; - _wrap(x: number): any; - _track: () => void; - _autoScroll: () => void; - _scroll(x?: number): void; - _updateItemStyle(el: HTMLElement, opacity: number, zIndex: number, transform: string): void; - _cycleTo(n: number, callback?: CarouselOptions["onCycleTo"]): void; - /** - * Move carousel to next slide or go forward a given amount of slides. - * @param n How many times the carousel slides. - */ - next(n?: number): void; - /** - * Move carousel to previous slide or go back a given amount of slides. - * @param n How many times the carousel slides. - */ - prev(n?: number): void; - /** - * Move carousel to nth slide. - * @param n Index of slide. - * @param callback "onCycleTo" optional callback. - */ - set(n: number, callback?: CarouselOptions["onCycleTo"]): void; -} - -interface CharacterCounterOptions extends BaseOptions { -} -type InputElement = HTMLInputElement | HTMLTextAreaElement; -declare class CharacterCounter extends Component<{}> { - el: InputElement; - /** Stores the reference to the counter HTML element. */ - counterEl: HTMLSpanElement; - /** Specifies whether the input is valid or not. */ - isInvalid: boolean; - /** Specifies whether the input text has valid length or not. */ - isValidLength: boolean; - constructor(el: HTMLInputElement | HTMLTextAreaElement, options: Partial); - static get defaults(): CharacterCounterOptions; - /** - * Initializes instance of CharacterCounter. - * @param el HTML element. - * @param options Component options. - */ - static init(el: InputElement, options?: Partial): CharacterCounter; - /** - * Initializes instances of CharacterCounter. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): CharacterCounter[]; - static getInstance(el: InputElement): CharacterCounter; - destroy(): void; - _setupEventHandlers(): void; - _removeEventHandlers(): void; - _setupCounter(): void; - _removeCounter(): void; - updateCounter: () => void; - _validateInput(): void; -} - -interface ChipData { - /** - * Unique identifier. - */ - id: number | string; - /** - * Chip text. If not specified, "id" will be used. - */ - text?: string; - /** - * Chip image (URL). - */ - image?: string; -} -interface ChipsOptions extends BaseOptions { - /** - * Set the chip data. - * @default [] - */ - data: ChipData[]; - /** - * Set first placeholder when there are no tags. - * @default "" - */ - placeholder: string; - /** - * Set second placeholder when adding additional tags. - * @default "" - */ - secondaryPlaceholder: string; - /** - * Set autocomplete options. - * @default {} - */ - autocompleteOptions: Partial; - /** - * Toggles abililty to add custom value not in autocomplete list. - * @default false - */ - autocompleteOnly: boolean; - /** - * Set chips limit. - * @default Infinity - */ - limit: number; - /** - * Specifies class to be used in "close" button (useful when working with Material Symbols icon set). - * @default 'material-icons' - */ - closeIconClass: string; - /** - * Callback for chip add. - * @default null - */ - onChipAdd: (element: HTMLElement, chip: HTMLElement) => void; - /** - * Callback for chip select. - * @default null - */ - onChipSelect: (element: HTMLElement, chip: HTMLElement) => void; - /** - * Callback for chip delete. - * @default null - */ - onChipDelete: (element: HTMLElement, chip: HTMLElement) => void; -} -declare class Chips extends Component { - /** Array of the current chips data. */ - chipsData: ChipData[]; - /** If the chips has autocomplete enabled. */ - hasAutocomplete: boolean; - /** Autocomplete instance, if any. */ - autocomplete: Autocomplete; - _input: HTMLInputElement; - _label: any; - _chips: HTMLElement[]; - static _keydown: boolean; - private _selectedChip; - constructor(el: HTMLElement, options: Partial); - static get defaults(): ChipsOptions; - /** - * Initializes instance of Chips. - * @param el HTML element. - * @param options Component options. - */ - static init(el: InitElements, options?: Partial): Chips; - /** - * Initializes instances of Chips. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): Chips[]; - static getInstance(el: HTMLElement): Chips; - getData(): ChipData[]; - destroy(): void; - _setupEventHandlers(): void; - _removeEventHandlers(): void; - _handleChipClick: (e: MouseEvent) => void; - static _handleChipsKeydown(e: KeyboardEvent): void; - static _handleChipsKeyup(e: Event): void; - static _handleChipsBlur(e: Event): void; - _handleInputFocus: () => void; - _handleInputBlur: () => void; - _handleInputKeydown: (e: KeyboardEvent) => void; - _renderChip(chip: ChipData): HTMLDivElement; - _renderChips(): void; - _setupAutocomplete(): void; - _setupInput(): void; - _setupLabel(): void; - _setPlaceholder(): void; - _isValidAndNotExist(chip: ChipData): boolean; - /** - * Add chip to input. - * @param chip Chip data object - */ - addChip(chip: ChipData): void; - /** - * Delete nth chip. - * @param chipIndex Index of chip - */ - deleteChip(chipIndex: number): void; - /** - * Select nth chip. - * @param chipIndex Index of chip - */ - selectChip(chipIndex: number): void; - static Init(): void; -} - -interface CollapsibleOptions extends BaseOptions { - /** - * If accordion versus collapsible. - * @default true - */ - accordion: boolean; - /** - * Transition in duration in milliseconds. - * @default 300 - */ - inDuration: number; - /** - * Transition out duration in milliseconds. - * @default 300 - */ - outDuration: number; - /** - * Callback function called before collapsible is opened. - * @default null - */ - onOpenStart: (el: Element) => void; - /** - * Callback function called after collapsible is opened. - * @default null - */ - onOpenEnd: (el: Element) => void; - /** - * Callback function called before collapsible is closed. - * @default null - */ - onCloseStart: (el: Element) => void; - /** - * Callback function called after collapsible is closed. - * @default null - */ - onCloseEnd: (el: Element) => void; -} -declare class Collapsible extends Component { - private _headers; - constructor(el: HTMLElement, options: Partial); - static get defaults(): CollapsibleOptions; - /** - * Initializes instance of Collapsible. - * @param el HTML element. - * @param options Component options. - */ - static init(el: HTMLElement, options?: Partial): Collapsible; - /** - * Initializes instances of Collapsible. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): Collapsible[]; - static getInstance(el: HTMLElement): Collapsible; - destroy(): void; - _setupEventHandlers(): void; - _removeEventHandlers(): void; - _handleCollapsibleClick: (e: MouseEvent | KeyboardEvent) => void; - _handleCollapsibleKeydown: (e: KeyboardEvent) => void; - private _setExpanded; - _animateIn(index: number): void; - _animateOut(index: number): void; - /** - * Open collapsible section. - * @param n Nth section to open. - */ - open: (index: number) => void; - /** - * Close collapsible section. - * @param n Nth section to close. - */ - close: (index: number) => void; -} - -interface ModalOptions extends BaseOptions { - /** - * Opacity of the modal overlay. - * @default 0.5 - */ - opacity: number; - /** - * Transition in duration in milliseconds. - * @default 250 - */ - inDuration: number; - /** - * Transition out duration in milliseconds. - * @default 250 - */ - outDuration: number; - /** - * Prevent page from scrolling while modal is open. - * @default true - */ - preventScrolling: boolean; - /** - * Callback function called before modal is opened. - * @default null - */ - onOpenStart: (this: Modal, el: HTMLElement) => void; - /** - * Callback function called after modal is opened. - * @default null - */ - onOpenEnd: (this: Modal, el: HTMLElement) => void; - /** - * Callback function called before modal is closed. - * @default null - */ - onCloseStart: (el: HTMLElement) => void; - /** - * Callback function called after modal is closed. - * @default null - */ - onCloseEnd: (el: HTMLElement) => void; - /** - * Allow modal to be dismissed by keyboard or overlay click. - * @default true - */ - dismissible: boolean; - /** - * Starting top offset. - * @default '4%' - */ - startingTop: string; - /** - * Ending top offset. - * @default '10%' - */ - endingTop: string; -} -declare class Modal extends Component { - static _modalsOpen: number; - static _count: number; - /** - * ID of the modal element. - */ - id: string; - /** - * If the modal is open. - */ - isOpen: boolean; - private _openingTrigger; - private _overlay; - private _nthModalOpened; - constructor(el: HTMLElement, options: Partial); - static get defaults(): { - opacity: number; - inDuration: number; - outDuration: number; - onOpenStart: any; - onOpenEnd: any; - onCloseStart: any; - onCloseEnd: any; - preventScrolling: boolean; - dismissible: boolean; - startingTop: string; - endingTop: string; - }; - /** - * Initializes instance of Modal. - * @param el HTML element. - * @param options Component options. - * @returns {Modal} - */ - static init(el: HTMLElement, options?: Partial): Modal; - /** - * Initializes instances of Modal. - * @param els HTML elements. - * @param options Component options. - * @returns {Modal[]} - */ - static init(els: InitElements, options?: Partial): Modal[]; - static getInstance(el: HTMLElement): Modal; - destroy(): void; - _setupEventHandlers(): void; - _removeEventHandlers(): void; - _handleTriggerClick: (e: MouseEvent) => void; - _handleOverlayClick: () => void; - _handleModalCloseClick: (e: MouseEvent) => void; - _handleKeydown: (e: KeyboardEvent) => void; - _handleFocus: (e: FocusEvent) => void; - _animateIn(): void; - _animateOut(): void; - /** - * Open modal. - */ - open: (trigger?: HTMLElement) => Modal; - /** - * Close modal. - */ - close: () => this; - static create(children?: string): string; -} - -interface DateI18nOptions extends I18nOptions { - previousMonth: string; - nextMonth: string; - months: string[]; - monthsShort: string[]; - weekdays: string[]; - weekdaysShort: string[]; - weekdaysAbbrev: string[]; -} -interface DatepickerOptions extends BaseOptions { - /** - * Automatically close picker when date is selected. - * @default false - */ - autoClose: boolean; - /** - * The date output format for the input field value - * or a function taking the date and outputting the - * formatted date string. - * @default 'mmm dd, yyyy' - */ - format: string | ((d: Date) => string); - /** - * Used to create date object from current input string. - * @default null - */ - parse: ((value: string, format: string) => Date) | null; - /** - * The initial date to view when first opened. - * @default null - */ - defaultDate: Date | null; - /** - * Make the `defaultDate` the initial selected value. - * @default false - */ - setDefaultDate: boolean; - /** - * Prevent selection of any date on the weekend. - * @default false - */ - disableWeekends: boolean; - /** - * Custom function to disable certain days. - * @default null - */ - disableDayFn: ((day: Date) => boolean) | null; - /** - * First day of week (0: Sunday, 1: Monday etc). - * @default 0 - */ - firstDay: number; - /** - * The earliest date that can be selected. - * @default null - */ - minDate: Date | null; - /** - * The latest date that can be selected. - * @default null - */ - maxDate: Date | null; - /** - * Number of years either side, or array of upper/lower range. - * @default 10 - */ - yearRange: number | number[]; - /** - * Sort year range in reverse order. - * @default false - */ - yearRangeReverse: boolean; - /** - * Changes Datepicker to RTL. - * @default false - */ - isRTL: boolean; - /** - * Show month after year in Datepicker title. - * @default false - */ - showMonthAfterYear: boolean; - /** - * Render days of the calendar grid that fall in the next - * or previous month. - * @default false - */ - showDaysInNextAndPreviousMonths: boolean; - /** - * Specify a DOM element OR selector for a DOM element to render - * the calendar in, by default it will be placed before the input. - * @default null - */ - container: HTMLElement | string | null; - /** - * Show the clear button in the datepicker. - * @default false - */ - showClearBtn: boolean; - /** - * Internationalization options. - */ - i18n: Partial; - /** - * An array of string returned by `Date.toDateString()`, - * indicating there are events in the specified days. - * @default [] - */ - events: string[]; - /** - * Callback function when date is selected, - * first parameter is the newly selected date. - * @default null - */ - onSelect: ((selectedDate: Date) => void) | null; - /** - * Callback function when Datepicker is opened. - * @default null - */ - onOpen: (() => void) | null; - /** - * Callback function when Datepicker is closed. - * @default null - */ - onClose: (() => void) | null; - /** - * Callback function when Datepicker HTML is refreshed. - * @default null - */ - onDraw: (() => void) | null; - /** Field used for internal calculations DO NOT CHANGE IT */ - minYear?: any; - /** Field used for internal calculations DO NOT CHANGE IT */ - maxYear?: any; - /** Field used for internal calculations DO NOT CHANGE IT */ - minMonth?: any; - /** Field used for internal calculations DO NOT CHANGE IT */ - maxMonth?: any; - /** Field used for internal calculations DO NOT CHANGE IT */ - startRange?: any; - /** Field used for internal calculations DO NOT CHANGE IT */ - endRange?: any; -} -declare class Datepicker extends Component { - el: HTMLInputElement; - id: string; - /** If the picker is open. */ - isOpen: boolean; - modal: Modal; - calendarEl: HTMLElement; - /** CLEAR button instance. */ - clearBtn: HTMLElement; - /** DONE button instance */ - doneBtn: HTMLElement; - cancelBtn: HTMLElement; - modalEl: HTMLElement; - yearTextEl: HTMLElement; - dateTextEl: HTMLElement; - /** The selected Date. */ - date: Date; - formats: any; - calendars: any; - private _y; - private _m; - static _template: string; - constructor(el: HTMLInputElement, options: Partial); - static get defaults(): DatepickerOptions; - /** - * Initializes instance of Datepicker. - * @param el HTML element. - * @param options Component options. - */ - static init(el: HTMLInputElement, options?: Partial): Datepicker; - /** - * Initializes instances of Datepicker. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): Datepicker[]; - static _isDate(obj: any): boolean; - static _isWeekend(date: any): boolean; - static _setToStartOfDay(date: any): void; - static _getDaysInMonth(year: any, month: any): number; - static _isLeapYear(year: any): boolean; - static _compareDates(a: any, b: any): boolean; - static getInstance(el: HTMLElement): Datepicker; - destroy(): void; - destroySelects(): void; - _insertHTMLIntoDOM(): void; - _setupModal(): void; - /** - * Gets a string representation of the selected date. - */ - toString(format?: string | ((d: Date) => string)): string; - /** - * Set a date on the datepicker. - * @param date Date to set on the datepicker. - * @param preventOnSelect Undocumented as of 5 March 2018. - */ - setDate(date?: Date | string, preventOnSelect?: boolean): void; - /** - * Sets current date as the input value. - */ - setInputValue(): void; - _renderDateDisplay(): void; - /** - * Change date view to a specific date on the datepicker. - * @param date Date to show on the datepicker. - */ - gotoDate(date: Date): void; - adjustCalendars(): void; - adjustCalendar(calendar: any): any; - nextMonth(): void; - prevMonth(): void; - render(year: any, month: any, randId: any): string; - renderDay(opts: any): string; - renderRow(days: any, isRTL: any, isRowSelected: any): string; - renderTable(opts: any, data: any, randId: any): string; - renderHead(opts: any): string; - renderBody(rows: any): string; - renderTitle(instance: any, c: any, year: any, month: any, refYear: any, randId: any): string; - draw(force?: boolean): void; - _setupEventHandlers(): void; - _setupVariables(): void; - _removeEventHandlers(): void; - _handleInputClick: () => void; - _handleInputKeydown: (e: KeyboardEvent) => void; - _handleCalendarClick: (e: any) => void; - _handleClearClick: () => void; - _handleMonthChange: (e: any) => void; - _handleYearChange: (e: any) => void; - gotoMonth(month: any): void; - gotoYear(year: any): void; - _handleInputChange: (e: Event) => void; - renderDayName(opts: any, day: any, abbr?: boolean): any; - _finishSelection: () => void; - /** - * Open datepicker. - */ - open: () => this; - /** - * Close datepicker. - */ - close: () => this; -} - -declare class Forms { - /** - * Resizes the given TextArea after updating the - * value content dynamically. - * @param textarea TextArea to be resized - */ - static textareaAutoResize(textarea: HTMLTextAreaElement): void; - static Init(): void; - static InitTextarea(textarea: HTMLTextAreaElement): void; - static InitFileInputPath(fileInput: HTMLInputElement): void; -} - -interface MaterialboxOptions extends BaseOptions { - /** - * Transition in duration in milliseconds. - * @default 275 - */ - inDuration: number; - /** - * Transition out duration in milliseconds. - * @default 200 - */ - outDuration: number; - /** - * Callback function called before materialbox is opened. - * @default null - */ - onOpenStart: (el: Element) => void; - /** - * Callback function called after materialbox is opened. - * @default null - */ - onOpenEnd: (el: Element) => void; - /** - * Callback function called before materialbox is closed. - * @default null - */ - onCloseStart: (el: Element) => void; - /** - * Callback function called after materialbox is closed. - * @default null - */ - onCloseEnd: (el: Element) => void; -} -declare class Materialbox extends Component { - /** If the materialbox overlay is showing. */ - overlayActive: boolean; - /** If the materialbox is no longer being animated. */ - doneAnimating: boolean; - /** Caption, if specified. */ - caption: string; - /** Original width of image. */ - originalWidth: number; - /** Original height of image. */ - originalHeight: number; - private originInlineStyles; - private placeholder; - private _changedAncestorList; - private newHeight; - private newWidth; - private windowWidth; - private windowHeight; - private attrWidth; - private attrHeight; - private _overlay; - private _photoCaption; - constructor(el: HTMLElement, options: Partial); - static get defaults(): MaterialboxOptions; - /** - * Initializes instance of MaterialBox. - * @param el HTML element. - * @param options Component options. - */ - static init(el: HTMLElement, options?: Partial): Materialbox; - /** - * Initializes instances of MaterialBox. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): Materialbox[]; - static getInstance(el: HTMLElement): Materialbox; - destroy(): void; - private _setupEventHandlers; - private _removeEventHandlers; - private _handleMaterialboxClick; - private _handleWindowScroll; - private _handleWindowResize; - private _handleWindowEscape; - private _makeAncestorsOverflowVisible; - private _offset; - private _updateVars; - private _animateImageIn; - private _animateImageOut; - private _addCaption; - private _removeCaption; - private _addOverlay; - private _removeOverlay; - /** - * Open materialbox. - */ - open: () => void; - /** - * Close materialbox. - */ - close: () => void; -} - -interface ParallaxOptions extends BaseOptions { - /** - * The minimum width of the screen, in pixels, where the parallax functionality starts working. - * @default 0 - */ - responsiveThreshold: number; -} -declare class Parallax extends Component { - private _enabled; - private _img; - static _parallaxes: Parallax[]; - static _handleScrollThrottled: () => any; - static _handleWindowResizeThrottled: () => any; - constructor(el: HTMLElement, options: Partial); - static get defaults(): ParallaxOptions; - /** - * Initializes instance of Parallax. - * @param el HTML element. - * @param options Component options. - */ - static init(el: HTMLElement, options?: Partial): Parallax; - /** - * Initializes instances of Parallax. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): Parallax[]; - static getInstance(el: HTMLElement): Parallax; - destroy(): void; - static _handleScroll(): void; - static _handleWindowResize(): void; - _setupEventHandlers(): void; - _removeEventHandlers(): void; - _setupStyles(): void; - _handleImageLoad: () => void; - private _offset; - _updateParallax(): void; -} - -interface PushpinOptions extends BaseOptions { - /** - * The distance in pixels from the top of the page where - * the element becomes fixed. - * @default 0 - */ - top: number; - /** - * The distance in pixels from the top of the page where - * the elements stops being fixed. - * @default Infinity - */ - bottom: number; - /** - * The offset from the top the element will be fixed at. - * @default 0 - */ - offset: number; - /** - * Callback function called when pushpin position changes. - * You are provided with a position string. - * @default null - */ - onPositionChange: (position: "pinned" | "pin-top" | "pin-bottom") => void; -} -declare class Pushpin extends Component { - static _pushpins: any[]; - originalOffset: any; - constructor(el: HTMLElement, options: Partial); - static get defaults(): PushpinOptions; - /** - * Initializes instance of Pushpin. - * @param el HTML element. - * @param options Component options. - */ - static init(el: HTMLElement, options?: Partial): Pushpin; - /** - * Initializes instances of Pushpin. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): Pushpin[]; - static getInstance(el: HTMLElement): Pushpin; - destroy(): void; - static _updateElements(): void; - _setupEventHandlers(): void; - _removeEventHandlers(): void; - _updatePosition(): void; - _removePinClasses(): void; -} - -interface ScrollSpyOptions extends BaseOptions { - /** - * Throttle of scroll handler. - * @default 100 - */ - throttle: number; - /** - * Offset for centering element when scrolled to. - * @default 200 - */ - scrollOffset: number; - /** - * Class applied to active elements. - * @default 'active' - */ - activeClass: string; - /** - * Used to find active element. - * @default id => 'a[href="#' + id + '"]' - */ - getActiveElement: (id: string) => string; -} -declare class ScrollSpy extends Component { - static _elements: ScrollSpy[]; - static _count: number; - static _increment: number; - tickId: number; - id: any; - static _elementsInView: ScrollSpy[]; - static _visibleElements: any[]; - static _ticks: number; - constructor(el: HTMLElement, options: Partial); - static get defaults(): ScrollSpyOptions; - /** - * Initializes instance of ScrollSpy. - * @param el HTML element. - * @param options Component options. - */ - static init(el: HTMLElement, options?: Partial): ScrollSpy; - /** - * Initializes instances of ScrollSpy. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): ScrollSpy[]; - static getInstance(el: HTMLElement): ScrollSpy; - destroy(): void; - _setupEventHandlers(): void; - _removeEventHandlers(): void; - _handleThrottledResize: () => void; - _handleTriggerClick: (e: MouseEvent) => void; - _handleWindowScroll: () => void; - static _offset(el: any): { - top: number; - left: number; - }; - static _findElements(top: number, right: number, bottom: number, left: number): ScrollSpy[]; - _enter(): void; - _exit(): void; -} - -interface FormSelectOptions extends BaseOptions { - /** - * Classes to be added to the select wrapper element. - * @default "" - */ - classes: string; - /** - * Pass options object to select dropdown initialization. - * @default {} - */ - dropdownOptions: Partial; -} -type ValueStruct = { - el: HTMLOptionElement; - optionEl: HTMLElement; -}; -declare class FormSelect extends Component { - el: HTMLSelectElement; - /** If this is a multiple select. */ - isMultiple: boolean; - /** - * Label associated with the current select element. - * Is "null", if not detected. - */ - labelEl: HTMLLabelElement; - /** Dropdown UL element. */ - dropdownOptions: HTMLUListElement; - /** Text input that shows current selected option. */ - input: HTMLInputElement; - /** Instance of the dropdown plugin for this select. */ - dropdown: Dropdown; - /** The select wrapper element. */ - wrapper: HTMLDivElement; - selectOptions: (HTMLOptionElement | HTMLOptGroupElement)[]; - private _values; - constructor(el: HTMLSelectElement, options: FormSelectOptions); - static get defaults(): FormSelectOptions; - /** - * Initializes instance of FormSelect. - * @param el HTML element. - * @param options Component options. - */ - static init(el: HTMLSelectElement, options?: Partial): FormSelect; - /** - * Initializes instances of FormSelect. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): FormSelect[]; - static getInstance(el: HTMLElement): FormSelect; - destroy(): void; - _setupEventHandlers(): void; - _removeEventHandlers(): void; - _handleSelectChange: () => void; - _handleOptionClick: (e: MouseEvent | KeyboardEvent) => void; - _arraysEqual(a: T[], b: (E | T)[]): boolean; - _selectOptionElement(virtualOption: HTMLElement): void; - _handleInputClick: () => void; - _setupDropdown(): void; - _addOptionToValues(realOption: HTMLOptionElement, virtualOption: HTMLElement): void; - _removeDropdown(): void; - _createAndAppendOptionWithIcon(realOption: HTMLOptionElement | HTMLOptGroupElement, type: string): HTMLLIElement; - _selectValue(value: ValueStruct): void; - _deselectValue(value: ValueStruct): void; - _deselectAll(): void; - _isValueSelected(value: ValueStruct): boolean; - _toggleEntryFromArray(value: ValueStruct): void; - _getSelectedOptions(): HTMLOptionElement[]; - _setValueToInput(): void; - _setSelectedStates(): void; - _activateOption(ul: HTMLElement, li: HTMLElement): void; - getSelectedValues(): string[]; -} - -interface SidenavOptions extends BaseOptions { - /** - * Side of screen on which Sidenav appears. - * @default 'left' - */ - edge: 'left' | 'right'; - /** - * Allow swipe gestures to open/close Sidenav. - * @default true - */ - draggable: boolean; - /** - * Width of the area where you can start dragging. - * @default '10px' - */ - dragTargetWidth: string; - /** - * Length in ms of enter transition. - * @default 250 - */ - inDuration: number; - /** - * Length in ms of exit transition. - * @default 200 - */ - outDuration: number; - /** - * Prevent page from scrolling while sidenav is open. - * @default true - */ - preventScrolling: boolean; - /** - * Function called when sidenav starts entering. - */ - onOpenStart: (elem: HTMLElement) => void; - /** - * Function called when sidenav finishes entering. - */ - onOpenEnd: (elem: HTMLElement) => void; - /** - * Function called when sidenav starts exiting. - */ - onCloseStart: (elem: HTMLElement) => void; - /** - * Function called when sidenav finishes exiting. - */ - onCloseEnd: (elem: HTMLElement) => void; -} -declare class Sidenav extends Component implements Openable { - id: string; - /** Describes open/close state of Sidenav. */ - isOpen: boolean; - /** Describes if sidenav is fixed. */ - isFixed: boolean; - /** Describes if Sidenav is being dragged. */ - isDragged: boolean; - lastWindowWidth: number; - lastWindowHeight: number; - static _sidenavs: Sidenav[]; - private _overlay; - dragTarget: Element; - private _startingXpos; - private _xPos; - private _time; - private _width; - private _initialScrollTop; - private _verticallyScrolling; - private deltaX; - private velocityX; - private percentOpen; - constructor(el: HTMLElement, options: Partial); - static get defaults(): SidenavOptions; - /** - * Initializes instance of Sidenav. - * @param el HTML element. - * @param options Component options. - */ - static init(el: HTMLElement, options?: Partial): Sidenav; - /** - * Initializes instances of Sidenav. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): Sidenav[]; - static getInstance(el: HTMLElement): Sidenav; - destroy(): void; - private _createOverlay; - private _setupEventHandlers; - private _removeEventHandlers; - private _handleTriggerClick; - private _startDrag; - private _dragMoveUpdate; - private _handleDragTargetDrag; - private _handleDragTargetRelease; - private _handleCloseDrag; - private _handleCloseRelease; - private _handleCloseTriggerClick; - private _handleWindowResize; - private _setupClasses; - private _removeClasses; - private _setupFixed; - private _isCurrentlyFixed; - private _createDragTarget; - private _preventBodyScrolling; - private _enableBodyScrolling; - /** - * Opens Sidenav. - */ - open: () => void; - /** - * Closes Sidenav. - */ - close: () => void; - private _animateIn; - private _animateOut; - private _animateSidenavIn; - private _animateSidenavOut; - private _animateOverlayIn; - private _animateOverlayOut; -} - -interface SliderOptions extends BaseOptions { - /** - * Set to false to hide slide indicators. - * @default true - */ - indicators: boolean; - /** - * Set height of slider. - * @default 400 - */ - height: number; - /** - * Set the duration of the transition animation in ms. - * @default 500 - */ - duration: number; - /** - * Set the duration between transitions in ms. - * @default 6000 - */ - interval: number; - /** - * If slider should pause when keyboard focus is received. - * @default true - */ - pauseOnFocus: boolean; - /** - * If slider should pause when is hovered by a pointer. - * @default true - */ - pauseOnHover: boolean; - /** - * Optional function used to generate ARIA label to indicators (for accessibility purposes). - * @param index Current index, starting from "1". - * @param current A which indicates whether it is the current element or not - * @returns a string to be used as label indicator. - * @default null - */ - indicatorLabelFunc: (index: number, current: boolean) => string; -} -declare class Slider extends Component { - /** Index of current slide. */ - activeIndex: number; - interval: string | number | NodeJS.Timeout; - eventPause: boolean; - _slider: HTMLUListElement; - _slides: HTMLLIElement[]; - _activeSlide: HTMLLIElement; - _indicators: HTMLLIElement[]; - _hovered: boolean; - _focused: boolean; - _focusCurrent: boolean; - _sliderId: string; - constructor(el: HTMLElement, options: Partial); - static get defaults(): SliderOptions; - /** - * Initializes instance of Slider. - * @param el HTML element. - * @param options Component options. - */ - static init(el: HTMLElement, options?: Partial): Slider; - /** - * Initializes instances of Slider. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): Slider[]; - static getInstance(el: HTMLElement): Slider; - destroy(): void; - private _setupEventHandlers; - private _removeEventHandlers; - private _handleIndicatorClick; - private _handleAutoPauseHover; - private _handleAutoPauseFocus; - private _handleAutoStartHover; - private _handleAutoStartFocus; - private _handleInterval; - private _animateSlide; - private _setSliderHeight; - private _setupIndicators; - private _removeIndicators; - set(index: number): void; - _pause(fromEvent: boolean): void; - /** - * Pause slider autoslide. - */ - pause: () => void; - /** - * Start slider autoslide. - */ - start: () => void; - /** - * Move to next slider. - */ - next: () => void; - /** - * Move to prev slider. - */ - prev: () => void; -} - -interface TabsOptions extends BaseOptions { - /** - * Transition duration in milliseconds. - * @default 300 - */ - duration: number; - /** - * Callback for when a new tab content is shown. - * @default null - */ - onShow: (newContent: Element) => void; - /** - * Set to true to enable swipeable tabs. - * This also uses the responsiveThreshold option. - * @default false - */ - swipeable: boolean; - /** - * The maximum width of the screen, in pixels, - * where the swipeable functionality initializes. - * @default infinity - */ - responsiveThreshold: number; -} -declare class Tabs extends Component { - _tabLinks: NodeListOf; - _index: number; - _indicator: HTMLLIElement; - _tabWidth: number; - _tabsWidth: number; - _tabsCarousel: any; - _activeTabLink: any; - _content: any; - constructor(el: HTMLElement, options: Partial); - static get defaults(): TabsOptions; - /** - * Initializes instance of Tabs. - * @param el HTML element. - * @param options Component options. - */ - static init(el: HTMLElement, options?: Partial): Tabs; - /** - * Initializes instances of Tabs. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): Tabs[]; - static getInstance(el: HTMLElement): Tabs; - destroy(): void; - /** - * The index of tab that is currently shown. - */ - get index(): number; - _setupEventHandlers(): void; - _removeEventHandlers(): void; - _handleWindowResize: () => void; - _handleTabClick: (e: MouseEvent) => void; - _createIndicator(): void; - _setupActiveTabLink(): void; - _setupSwipeableTabs(): void; - _teardownSwipeableTabs(): void; - _setupNormalTabs(): void; - _teardownNormalTabs(): void; - _setTabsAndTabWidth(): void; - _calcRightPos(el: any): number; - _calcLeftPos(el: any): number; - /** - * Recalculate tab indicator position. This is useful when - * the indicator position is not correct. - */ - updateTabIndicator(): void; - _animateIndicator(prevIndex: any): void; - /** - * Show tab content that corresponds to the tab with the id. - * @param tabId The id of the tab that you want to switch to. - */ - select(tabId: string): void; -} - -interface TapTargetOptions extends BaseOptions { - /** - * Callback function called when Tap Target is opened. - * @default null - */ - onOpen: (origin: HTMLElement) => void; - /** - * Callback function called when Tap Target is closed. - * @default null - */ - onClose: (origin: HTMLElement) => void; -} -declare class TapTarget extends Component implements Openable { - /** - * If the tap target is open. - */ - isOpen: boolean; - private wrapper; - private _origin; - private originEl; - private waveEl; - private contentEl; - constructor(el: HTMLElement, options: Partial); - static get defaults(): TapTargetOptions; - /** - * Initializes instance of TapTarget. - * @param el HTML element. - * @param options Component options. - */ - static init(el: HTMLElement, options?: Partial): TapTarget; - /** - * Initializes instances of TapTarget. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): TapTarget[]; - static getInstance(el: HTMLElement): TapTarget; - destroy(): void; - _setupEventHandlers(): void; - _removeEventHandlers(): void; - _handleThrottledResize: () => void; - _handleTargetClick: () => void; - _handleOriginClick: () => void; - _handleResize: () => void; - _handleDocumentClick: (e: MouseEvent | TouchEvent) => void; - _setup(): void; - private _offset; - _calculatePositioning(): void; - /** - * Open Tap Target. - */ - open: () => void; - /** - * Close Tap Target. - */ - close: () => void; -} - -type Views = "hours" | "minutes"; -interface TimepickerOptions extends BaseOptions { - /** - * Dial radius. - * @default 135 - */ - dialRadius: number; - /** - * Outer radius. - * @default 105 - */ - outerRadius: number; - /** - * Inner radius. - * @default 70 - */ - innerRadius: number; - /** - * Tick radius. - * @default 20 - */ - tickRadius: number; - /** - * Duration of the transition from/to the hours/minutes view. - * @default 350 - */ - duration: number; - /** - * Specify a DOM element OR selector for a DOM element to render - * the time picker in, by default it will be placed before the input. - * @default null - */ - container: HTMLElement | string | null; - /** - * Show the clear button in the Timepicker. - * @default false - */ - showClearBtn: boolean; - /** - * Default time to set on the timepicker 'now' or '13:14'. - * @default 'now'; - */ - defaultTime: string; - /** - * Millisecond offset from the defaultTime. - * @default 0 - */ - fromNow: number; - /** - * Internationalization options. - */ - i18n: Partial; - /** - * Automatically close picker when minute is selected. - * @default false; - */ - autoClose: boolean; - /** - * Use 12 hour AM/PM clock instead of 24 hour clock. - * @default true - */ - twelveHour: boolean; - /** - * Vibrate device when dragging clock hand. - * @default true - */ - vibrate: boolean; - /** - * Callback function called before modal is opened. - * @default null - */ - onOpenStart: (el: HTMLElement) => void; - /** - * Callback function called after modal is opened. - * @default null - */ - onOpenEnd: (el: HTMLElement) => void; - /** - * Callback function called before modal is closed. - * @default null - */ - onCloseStart: (el: HTMLElement) => void; - /** - * Callback function called after modal is closed. - * @default null - */ - onCloseEnd: (el: HTMLElement) => void; - /** - * Callback function when a time is selected. - * @default null - */ - onSelect: (hour: number, minute: number) => void; -} -type Point = { - x: number; - y: number; -}; -declare class Timepicker extends Component { - el: HTMLInputElement; - id: string; - modal: Modal; - modalEl: HTMLElement; - plate: any; - digitalClock: any; - inputHours: HTMLInputElement; - inputMinutes: HTMLInputElement; - x0: number; - y0: number; - moved: boolean; - dx: number; - dy: number; - /** - * Current view on the timepicker. - * @default 'hours' - */ - currentView: Views; - hand: any; - minutesView: HTMLElement; - hours: any; - minutes: any; - /** The selected time. */ - time: string; - /** - * If the time is AM or PM on twelve-hour clock. - * @default 'PM' - */ - amOrPm: "AM" | "PM"; - static _template: any; - /** If the picker is open. */ - isOpen: boolean; - /** Vibrate device when dragging clock hand. */ - vibrate: "vibrate" | "webkitVibrate" | null; - _canvas: HTMLElement; - hoursView: any; - spanAmPm: HTMLSpanElement; - footer: HTMLElement; - private _amBtn; - private _pmBtn; - bg: Element; - bearing: Element; - g: Element; - toggleViewTimer: string | number | NodeJS.Timeout; - canvas: any; - vibrateTimer: any; - constructor(el: HTMLInputElement, options: Partial); - static get defaults(): TimepickerOptions; - /** - * Initializes instance of Timepicker. - * @param el HTML element. - * @param options Component options. - */ - static init(el: HTMLInputElement, options?: Partial): Timepicker; - /** - * Initializes instances of Timepicker. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): Timepicker[]; - static _addLeadingZero(num: number): string; - static _createSVGEl(name: string): Element; - static _Pos(e: TouchEvent | MouseEvent): Point; - static getInstance(el: HTMLElement): Timepicker; - destroy(): void; - _setupEventHandlers(): void; - _removeEventHandlers(): void; - _handleInputClick: () => void; - _handleInputKeydown: (e: KeyboardEvent) => void; - _handleTimeInputEnterKey: (e: KeyboardEvent) => void; - _handleClockClickStart: (e: any) => void; - _handleDocumentClickMove: (e: any) => void; - _handleDocumentClickEnd: (e: any) => void; - _insertHTMLIntoDOM(): void; - _setupModal(): void; - _setupVariables(): void; - private _createButton; - _pickerSetup(): void; - _clockSetup(): void; - _buildSVGClock(): void; - _buildHoursView(): void; - _buildMinutesView(): void; - _handleAmPmClick: (e: any) => void; - _updateAmPmView(): void; - _updateTimeFromInput(): void; - /** - * Show hours or minutes view on timepicker. - * @param view The name of the view you want to switch to, 'hours' or 'minutes'. - */ - showView: (view: Views, delay?: number) => void; - resetClock(delay: any): void; - _inputFromTextField: () => void; - drawClockFromTimeInput(value: any, isHours: any): void; - setHand(x: any, y: any, roundBy5?: boolean): void; - /** - * Open timepicker. - */ - open: () => void; - /** - * Close timepicker. - */ - close: () => void; - done: (e?: any, clearValue?: any) => void; - clear: () => void; -} - -interface ToastOptions extends BaseOptions { - /** - * The content of the Toast. - * @default "" - */ - text: string; - /** - * Element Id for the tooltip. - * @default "" - */ - toastId?: string; - /** - * Length in ms the Toast stays before dismissal. - * @default 4000 - */ - displayLength: number; - /** - * Transition in duration in milliseconds. - * @default 300 - */ - inDuration: number; - /** - * Transition out duration in milliseconds. - * @default 375 - */ - outDuration: number; - /** - * Classes to be added to the toast element. - * @default "" - */ - classes: string; - /** - * Callback function called when toast is dismissed. - * @default null - */ - completeCallback: () => void; - /** - * The percentage of the toast's width it takes fora drag - * to dismiss a Toast. - * @default 0.8 - */ - activationPercent: number; -} -declare class Toast { - /** The toast element. */ - el: HTMLElement; - /** - * The remaining amount of time in ms that the toast - * will stay before dismissal. - */ - timeRemaining: number; - /** - * Describes the current pan state of the Toast. - */ - panning: boolean; - options: ToastOptions; - message: string; - counterInterval: NodeJS.Timeout; - wasSwiped: boolean; - startingXPos: number; - xPos: number; - time: number; - deltaX: number; - velocityX: number; - static _toasts: Toast[]; - static _container: any; - static _draggedToast: Toast; - constructor(options: Partial); - static get defaults(): ToastOptions; - static getInstance(el: HTMLElement): Toast; - static _createContainer(): void; - static _removeContainer(): void; - static _onDragStart(e: TouchEvent | MouseEvent): void; - static _onDragMove(e: TouchEvent | MouseEvent): void; - static _onDragEnd(): void; - static _xPos(e: TouchEvent | MouseEvent): number; - /** - * dismiss all toasts. - */ - static dismissAll(): void; - _createToast(): HTMLElement; - _animateIn(): void; - /** - * Create setInterval which automatically removes toast when timeRemaining >= 0 - * has been reached. - */ - _setTimer(): void; - /** - * Dismiss toast with animation. - */ - dismiss(): void; -} - -type TooltipPosition = 'top' | 'right' | 'bottom' | 'left'; -interface TooltipOptions extends BaseOptions { - /** - * Delay time before tooltip disappears. - * @default 200 - */ - exitDelay: number; - /** - * Delay time before tooltip appears. - * @default 0 - */ - enterDelay: number; - /** - * Element Id for the tooltip. - * @default "" - */ - tooltipId?: string; - /** - * Text string for the tooltip. - * @default "" - */ - text: string; - /** - * Set distance tooltip appears away from its activator - * excluding transitionMovement. - * @default 5 - */ - margin: number; - /** - * Enter transition duration. - * @default 300 - */ - inDuration: number; - /** - * Opacity of the tooltip. - * @default 1 - */ - opacity: number; - /** - * Exit transition duration. - * @default 250 - */ - outDuration: number; - /** - * Set the direction of the tooltip. - * @default 'bottom' - */ - position: TooltipPosition; - /** - * Amount in px that the tooltip moves during its transition. - * @default 10 - */ - transitionMovement: number; -} -declare class Tooltip extends Component { - /** - * If tooltip is open. - */ - isOpen: boolean; - /** - * If tooltip is hovered. - */ - isHovered: boolean; - /** - * If tooltip is focused. - */ - isFocused: boolean; - tooltipEl: HTMLElement; - private _exitDelayTimeout; - private _enterDelayTimeout; - xMovement: number; - yMovement: number; - constructor(el: HTMLElement, options: Partial); - static get defaults(): TooltipOptions; - /** - * Initializes instance of Tooltip. - * @param el HTML element. - * @param options Component options. - */ - static init(el: HTMLElement, options?: Partial): Tooltip; - /** - * Initializes instances of Tooltip. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): Tooltip[]; - static getInstance(el: HTMLElement): Tooltip; - destroy(): void; - _appendTooltipEl(): void; - _setTooltipContent(tooltipContentEl: HTMLElement): void; - _updateTooltipContent(): void; - _setupEventHandlers(): void; - _removeEventHandlers(): void; - /** - * Show tooltip. - */ - open: (isManual: boolean) => void; - /** - * Hide tooltip. - */ - close: () => void; - _setExitDelayTimeout(): void; - _setEnterDelayTimeout(isManual: any): void; - _positionTooltip(): void; - _repositionWithinScreen(x: number, y: number, width: number, height: number): { - x: number; - y: number; - }; - _animateIn(): void; - _animateOut(): void; - _handleMouseEnter: () => void; - _handleMouseLeave: () => void; - _handleFocus: () => void; - _handleBlur: () => void; - _getAttributeOptions(): Partial; -} - -type RGBColor = { - r: number; - g: number; - b: number; -}; -type Position = { - x: number; - y: number; -}; -declare class Waves { - private static _offset; - static renderWaveEffect(targetElement: HTMLElement, position?: Position | null, color?: RGBColor | null): void; - static Init(): void; -} - -interface RangeOptions extends BaseOptions { -} -declare class Range extends Component { - el: HTMLInputElement; - private _mousedown; - value: HTMLElement; - thumb: HTMLElement; - constructor(el: HTMLInputElement, options: Partial); - static get defaults(): RangeOptions; - /** - * Initializes instance of Range. - * @param el HTML element. - * @param options Component options. - */ - static init(el: HTMLInputElement, options?: Partial): Range; - /** - * Initializes instances of Range. - * @param els HTML elements. - * @param options Component options. - */ - static init(els: InitElements, options?: Partial): Range[]; - static getInstance(el: HTMLInputElement): Range; - destroy(): void; - _setupEventHandlers(): void; - _removeEventHandlers(): void; - _handleRangeChange: () => void; - _handleRangeMousedownTouchstart: (e: MouseEvent | TouchEvent) => void; - _handleRangeInputMousemoveTouchmove: () => void; - _handleRangeMouseupTouchend: () => void; - _handleRangeBlurMouseoutTouchleave: () => void; - _setupThumb(): void; - _removeThumb(): void; - _showRangeBubble(): void; - _calcRangeOffset(): number; - /** - * Initializes every range input in the current document. - */ - static Init(): void; -} - -declare const version = "2.1.1"; -declare const Grid: (children?: any) => string; -declare function Button(children?: any): string; -/** - * Automatically initialize components. - * @param context Root element to initialize. Defaults to `document.body`. - */ -declare function AutoInit(context?: HTMLElement): void; - -export { AutoInit, Autocomplete, Button, Cards, Carousel, CharacterCounter, Chips, Collapsible, Datepicker, Dropdown, FloatingActionButton, FormSelect, Forms, Grid, Materialbox, Modal, Parallax, Pushpin, Range, ScrollSpy, Sidenav, Slider, Tabs, TapTarget, Timepicker, Toast, Tooltip, Waves, version }; diff --git a/dist/js/materialize.js b/dist/js/materialize.js deleted file mode 100644 index 4e8241506f..0000000000 --- a/dist/js/materialize.js +++ /dev/null @@ -1,7598 +0,0 @@ -/*! -* Materialize v2.1.1 (https://materializeweb.com) -* Copyright 2014-2024 Materialize -* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE) -*/ -var M = (function (exports) { - 'use strict'; - - /** - * Class with utilitary functions for global usage. - */ - class Utils { - /** Specifies wether tab is pressed or not. */ - static tabPressed = false; - /** Specifies wether there is a key pressed. */ - static keyDown = false; - /** - * Key maps. - */ - static keys = { - TAB: ['Tab'], - ENTER: ['Enter'], - ESC: ['Escape', 'Esc'], - BACKSPACE: ['Backspace'], - ARROW_UP: ['ArrowUp', 'Up'], - ARROW_DOWN: ['ArrowDown', 'Down'], - ARROW_LEFT: ['ArrowLeft', 'Left'], - ARROW_RIGHT: ['ArrowRight', 'Right'], - DELETE: ['Delete', 'Del'], - }; - /** - * Detects when a key is pressed. - * @param e Event instance. - */ - static docHandleKeydown(e) { - Utils.keyDown = true; - if ([...Utils.keys.TAB, ...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP].includes(e.key)) { - Utils.tabPressed = true; - } - } - /** - * Detects when a key is released. - * @param e Event instance. - */ - static docHandleKeyup(e) { - Utils.keyDown = false; - if ([...Utils.keys.TAB, ...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP].includes(e.key)) { - Utils.tabPressed = false; - } - } - /** - * Detects when document is focused. - * @param e Event instance. - */ - static docHandleFocus(e) { - if (Utils.keyDown) { - document.body.classList.add('keyboard-focused'); - } - } - /** - * Detects when document is not focused. - * @param e Event instance. - */ - static docHandleBlur(e) { - document.body.classList.remove('keyboard-focused'); - } - /** - * Generates a unique string identifier. - */ - static guid() { - const s4 = () => { - return Math.floor((1 + Math.random()) * 0x10000) - .toString(16) - .substring(1); - }; - return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); - } - /** - * Checks for exceeded edges - * @param container Container element. - * @param bounding Bounding rect. - * @param offset Element offset. - */ - static checkWithinContainer(container, bounding, offset) { - let edges = { - top: false, - right: false, - bottom: false, - left: false - }; - let containerRect = container.getBoundingClientRect(); - // If body element is smaller than viewport, use viewport height instead. - let containerBottom = container === document.body - ? Math.max(containerRect.bottom, window.innerHeight) - : containerRect.bottom; - let scrollLeft = container.scrollLeft; - let scrollTop = container.scrollTop; - let scrolledX = bounding.left - scrollLeft; - let scrolledY = bounding.top - scrollTop; - // Check for container and viewport for each edge - if (scrolledX < containerRect.left + offset || scrolledX < offset) { - edges.left = true; - } - if (scrolledX + bounding.width > containerRect.right - offset || - scrolledX + bounding.width > window.innerWidth - offset) { - edges.right = true; - } - if (scrolledY < containerRect.top + offset || scrolledY < offset) { - edges.top = true; - } - if (scrolledY + bounding.height > containerBottom - offset || - scrolledY + bounding.height > window.innerHeight - offset) { - edges.bottom = true; - } - return edges; - } - /** - * Checks if element can be aligned in multiple directions. - * @param el Element to be inspected. - * @param container Container element. - * @param bounding Bounding rect. - * @param offset Element offset. - */ - static checkPossibleAlignments(el, container, bounding, offset) { - let canAlign = { - top: true, - right: true, - bottom: true, - left: true, - spaceOnTop: null, - spaceOnRight: null, - spaceOnBottom: null, - spaceOnLeft: null - }; - let containerAllowsOverflow = getComputedStyle(container).overflow === 'visible'; - let containerRect = container.getBoundingClientRect(); - let containerHeight = Math.min(containerRect.height, window.innerHeight); - let containerWidth = Math.min(containerRect.width, window.innerWidth); - let elOffsetRect = el.getBoundingClientRect(); - let scrollLeft = container.scrollLeft; - let scrollTop = container.scrollTop; - let scrolledX = bounding.left - scrollLeft; - let scrolledYTopEdge = bounding.top - scrollTop; - let scrolledYBottomEdge = bounding.top + elOffsetRect.height - scrollTop; - // Check for container and viewport for left - canAlign.spaceOnRight = !containerAllowsOverflow - ? containerWidth - (scrolledX + bounding.width) - : window.innerWidth - (elOffsetRect.left + bounding.width); - if (canAlign.spaceOnRight < 0) { - canAlign.left = false; - } - // Check for container and viewport for Right - canAlign.spaceOnLeft = !containerAllowsOverflow - ? scrolledX - bounding.width + elOffsetRect.width - : elOffsetRect.right - bounding.width; - if (canAlign.spaceOnLeft < 0) { - canAlign.right = false; - } - // Check for container and viewport for Top - canAlign.spaceOnBottom = !containerAllowsOverflow - ? containerHeight - (scrolledYTopEdge + bounding.height + offset) - : window.innerHeight - (elOffsetRect.top + bounding.height + offset); - if (canAlign.spaceOnBottom < 0) { - canAlign.top = false; - } - // Check for container and viewport for Bottom - canAlign.spaceOnTop = !containerAllowsOverflow - ? scrolledYBottomEdge - (bounding.height - offset) - : elOffsetRect.bottom - (bounding.height + offset); - if (canAlign.spaceOnTop < 0) { - canAlign.bottom = false; - } - return canAlign; - } - /** - * Retrieves target element id from trigger. - * @param trigger Trigger element. - */ - static getIdFromTrigger(trigger) { - let id = trigger.dataset.target; - if (!id) { - id = trigger.getAttribute('href'); - return id ? id.slice(1) : ''; - } - return id; - } - /** - * Retrieves document scroll postion from top. - */ - static getDocumentScrollTop() { - return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0; - } - ; - /** - * Retrieves document scroll postion from left. - */ - static getDocumentScrollLeft() { - return window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft || 0; - } - /** - * Fires the given function after a certain ammount of time. - * @param func Function to be fired. - * @param wait Wait time. - * @param options Additional options. - */ - static throttle(func, wait, options = null) { - let context, args, result; - let timeout = null; - let previous = 0; - options || (options = {}); - let later = function () { - previous = options.leading === false ? 0 : new Date().getTime(); - timeout = null; - result = func.apply(context, args); - context = args = null; - }; - return function () { - let now = new Date().getTime(); - if (!previous && options.leading === false) - previous = now; - let remaining = wait - (now - previous); - context = this; - args = arguments; - if (remaining <= 0) { - clearTimeout(timeout); - timeout = null; - previous = now; - result = func.apply(context, args); - context = args = null; - } - else if (!timeout && options.trailing !== false) { - timeout = setTimeout(later, remaining); - } - return result; - }; - } - } - - /** - * Base class implementation for Materialize components. - */ - class Component { - /** - * The DOM element the plugin was initialized with. - */ - el; - /** - * The options the instance was initialized with. - */ - options; - /** - * Constructs component instance and set everything up. - */ - constructor(el, options, classDef) { - // Display error if el is not a valid HTML Element - if (!(el instanceof HTMLElement)) { - console.error(Error(el + ' is not an HTML Element')); - } - // If exists, destroy and reinitialize in child - let ins = classDef.getInstance(el); - if (!!ins) { - ins.destroy(); - } - this.el = el; - } - /** - * Initializes component instances. - * @param els HTML elements. - * @param options Component options. - * @param classDef Class definition. - */ - static init(els, options, classDef) { - let instances = null; - if (els instanceof Element) { - instances = new classDef(els, options); - } - else if (!!els && els.length) { - instances = []; - for (let i = 0; i < els.length; i++) { - instances.push(new classDef(els[i], options)); - } - } - return instances; - } - /** - * @returns default options for component instance. - */ - static get defaults() { return {}; } - /** - * Retrieves component instance for the given element. - * @param el Associated HTML Element. - */ - static getInstance(el) { - throw new Error("This method must be implemented."); - } - /** - * Destroy plugin instance and teardown. - */ - destroy() { throw new Error("This method must be implemented."); } - } - - const _defaults$l = { - alignment: 'left', - autoFocus: true, - constrainWidth: true, - container: null, - coverTrigger: true, - closeOnClick: true, - hover: false, - inDuration: 150, - outDuration: 250, - onOpenStart: null, - onOpenEnd: null, - onCloseStart: null, - onCloseEnd: null, - onItemClick: null - }; - class Dropdown extends Component { - static _dropdowns = []; - /** ID of the dropdown element. */ - id; - /** The DOM element of the dropdown. */ - dropdownEl; - /** If the dropdown is open. */ - isOpen; - /** If the dropdown content is scrollable. */ - isScrollable; - isTouchMoving; - /** The index of the item focused. */ - focusedIndex; - filterQuery; - filterTimeout; - constructor(el, options) { - super(el, options, Dropdown); - this.el.M_Dropdown = this; - Dropdown._dropdowns.push(this); - this.id = Utils.getIdFromTrigger(el); - this.dropdownEl = document.getElementById(this.id); - this.options = { - ...Dropdown.defaults, - ...options - }; - this.isOpen = false; - this.isScrollable = false; - this.isTouchMoving = false; - this.focusedIndex = -1; - this.filterQuery = []; - // Move dropdown-content after dropdown-trigger - this._moveDropdown(); - this._makeDropdownFocusable(); - this._setupEventHandlers(); - } - static get defaults() { - return _defaults$l; - } - /** - * Initializes instances of Dropdown. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, Dropdown); - } - static getInstance(el) { - return el.M_Dropdown; - } - destroy() { - this._resetDropdownStyles(); - this._removeEventHandlers(); - Dropdown._dropdowns.splice(Dropdown._dropdowns.indexOf(this), 1); - this.el.M_Dropdown = undefined; - } - _setupEventHandlers() { - // Trigger keydown handler - this.el.addEventListener('keydown', this._handleTriggerKeydown); - // Item click handler - this.dropdownEl?.addEventListener('click', this._handleDropdownClick); - // Hover event handlers - if (this.options.hover) { - this.el.addEventListener('mouseenter', this._handleMouseEnter); - this.el.addEventListener('mouseleave', this._handleMouseLeave); - this.dropdownEl.addEventListener('mouseleave', this._handleMouseLeave); - // Click event handlers - } - else { - this.el.addEventListener('click', this._handleClick); - } - } - _removeEventHandlers() { - this.el.removeEventListener('keydown', this._handleTriggerKeydown); - this.dropdownEl.removeEventListener('click', this._handleDropdownClick); - if (this.options.hover) { - this.el.removeEventListener('mouseenter', this._handleMouseEnter); - this.el.removeEventListener('mouseleave', this._handleMouseLeave); - this.dropdownEl.removeEventListener('mouseleave', this._handleMouseLeave); - } - else { - this.el.removeEventListener('click', this._handleClick); - } - } - _setupTemporaryEventHandlers() { - document.body.addEventListener('click', this._handleDocumentClick); - document.body.addEventListener('touchmove', this._handleDocumentTouchmove); - this.dropdownEl.addEventListener('keydown', this._handleDropdownKeydown); - window.addEventListener('resize', this._handleWindowResize); - } - _removeTemporaryEventHandlers() { - document.body.removeEventListener('click', this._handleDocumentClick); - document.body.removeEventListener('touchmove', this._handleDocumentTouchmove); - this.dropdownEl.removeEventListener('keydown', this._handleDropdownKeydown); - window.removeEventListener('resize', this._handleWindowResize); - } - _handleClick = (e) => { - e.preventDefault(); - if (this.isOpen) { - this.close(); - } - else { - this.open(); - } - }; - _handleMouseEnter = () => { - this.open(); - }; - _handleMouseLeave = (e) => { - const toEl = e.relatedTarget; - const leaveToDropdownContent = !!toEl.closest('.dropdown-content'); - let leaveToActiveDropdownTrigger = false; - const closestTrigger = toEl.closest('.dropdown-trigger'); - if (closestTrigger && - !!closestTrigger.M_Dropdown && - closestTrigger.M_Dropdown.isOpen) { - leaveToActiveDropdownTrigger = true; - } - // Close hover dropdown if mouse did not leave to either active dropdown-trigger or dropdown-content - if (!leaveToActiveDropdownTrigger && !leaveToDropdownContent) { - this.close(); - } - }; - _handleDocumentClick = (e) => { - const target = e.target; - if (this.options.closeOnClick && - target.closest('.dropdown-content') && - !this.isTouchMoving) { - // isTouchMoving to check if scrolling on mobile. - this.close(); - } - else if (!target.closest('.dropdown-content')) { - // Do this one frame later so that if the element clicked also triggers _handleClick - // For example, if a label for a select was clicked, that we don't close/open the dropdown - setTimeout(() => { - if (this.isOpen) { - this.close(); - } - }, 0); - } - this.isTouchMoving = false; - }; - _handleTriggerKeydown = (e) => { - // ARROW DOWN OR ENTER WHEN SELECT IS CLOSED - open Dropdown - const arrowDownOrEnter = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ENTER.includes(e.key); - if (arrowDownOrEnter && !this.isOpen) { - e.preventDefault(); - this.open(); - } - }; - _handleDocumentTouchmove = (e) => { - const target = e.target; - if (target.closest('.dropdown-content')) { - this.isTouchMoving = true; - } - }; - _handleDropdownClick = (e) => { - // onItemClick callback - if (typeof this.options.onItemClick === 'function') { - const itemEl = e.target.closest('li'); - this.options.onItemClick.call(this, itemEl); - } - }; - _handleDropdownKeydown = (e) => { - const arrowUpOrDown = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ARROW_UP.includes(e.key); - if (Utils.keys.TAB.includes(e.key)) { - e.preventDefault(); - this.close(); - } - // Navigate down dropdown list - else if (arrowUpOrDown && this.isOpen) { - e.preventDefault(); - const direction = Utils.keys.ARROW_DOWN.includes(e.key) ? 1 : -1; - let newFocusedIndex = this.focusedIndex; - let hasFoundNewIndex = false; - do { - newFocusedIndex = newFocusedIndex + direction; - if (!!this.dropdownEl.children[newFocusedIndex] && - this.dropdownEl.children[newFocusedIndex].tabIndex !== -1) { - hasFoundNewIndex = true; - break; - } - } while (newFocusedIndex < this.dropdownEl.children.length && newFocusedIndex >= 0); - if (hasFoundNewIndex) { - // Remove active class from old element - if (this.focusedIndex >= 0) - this.dropdownEl.children[this.focusedIndex].classList.remove('active'); - this.focusedIndex = newFocusedIndex; - this._focusFocusedItem(); - } - } - // ENTER selects choice on focused item - else if (Utils.keys.ENTER.includes(e.key) && this.isOpen) { - // Search for and ` + - ''); - } - renderRow(days, isRTL, isRowSelected) { - return ('' + - (isRTL ? days.reverse() : days).join('') + - ''); - } - renderTable(opts, data, randId) { - return ('
' + - this.renderHead(opts) + - this.renderBody(data) + - '
'); - } - renderHead(opts) { - let i, arr = []; - for (i = 0; i < 7; i++) { - arr.push(`${this.renderDayName(opts, i, true)}`); - } - return '' + (opts.isRTL ? arr.reverse() : arr).join('') + ''; - } - renderBody(rows) { - return '' + rows.join('') + ''; - } - renderTitle(instance, c, year, month, refYear, randId) { - let i, j, arr, opts = this.options, isMinYear = year === opts.minYear, isMaxYear = year === opts.maxYear, html = '
', monthHtml, yearHtml, prev = true, next = true; - for (arr = [], i = 0; i < 12; i++) { - arr.push(''); - } - monthHtml = ''; - if (Array.isArray(opts.yearRange)) { - i = opts.yearRange[0]; - j = opts.yearRange[1] + 1; - } - else { - i = year - opts.yearRange; - j = 1 + year + opts.yearRange; - } - for (arr = []; i < j && i <= opts.maxYear; i++) { - if (i >= opts.minYear) { - arr.push(``); - } - } - if (opts.yearRangeReverse) - arr.reverse(); - yearHtml = ``; - let leftArrow = ''; - html += ``; - html += '
'; - if (opts.showMonthAfterYear) { - html += yearHtml + monthHtml; - } - else { - html += monthHtml + yearHtml; - } - html += '
'; - if (isMinYear && (month === 0 || opts.minMonth >= month)) { - prev = false; - } - if (isMaxYear && (month === 11 || opts.maxMonth <= month)) { - next = false; - } - let rightArrow = ''; - html += ``; - return (html += '
'); - } - // refresh HTML - draw(force = false) { - if (!this.isOpen && !force) - return; - let opts = this.options, minYear = opts.minYear, maxYear = opts.maxYear, minMonth = opts.minMonth, maxMonth = opts.maxMonth, html = '', randId; - if (this._y <= minYear) { - this._y = minYear; - if (!isNaN(minMonth) && this._m < minMonth) { - this._m = minMonth; - } - } - if (this._y >= maxYear) { - this._y = maxYear; - if (!isNaN(maxMonth) && this._m > maxMonth) { - this._m = maxMonth; - } - } - randId = - 'datepicker-title-' + - Math.random() - .toString(36) - .replace(/[^a-z]+/g, '') - .substr(0, 2); - for (let c = 0; c < 1; c++) { - this._renderDateDisplay(); - html += - this.renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year, randId) + this.render(this.calendars[c].year, this.calendars[c].month, randId); - } - this.destroySelects(); - this.calendarEl.innerHTML = html; - // Init Materialize Select - let yearSelect = this.calendarEl.querySelector('.orig-select-year'); - let monthSelect = this.calendarEl.querySelector('.orig-select-month'); - FormSelect.init(yearSelect, { - classes: 'select-year', - dropdownOptions: { container: document.body, constrainWidth: false } - }); - FormSelect.init(monthSelect, { - classes: 'select-month', - dropdownOptions: { container: document.body, constrainWidth: false } - }); - // Add change handlers for select - yearSelect.addEventListener('change', this._handleYearChange); - monthSelect.addEventListener('change', this._handleMonthChange); - if (typeof this.options.onDraw === 'function') { - this.options.onDraw.call(this); - } - } - _setupEventHandlers() { - this.el.addEventListener('click', this._handleInputClick); - this.el.addEventListener('keydown', this._handleInputKeydown); - this.el.addEventListener('change', this._handleInputChange); - this.calendarEl.addEventListener('click', this._handleCalendarClick); - this.doneBtn.addEventListener('click', this._finishSelection); - this.cancelBtn.addEventListener('click', this.close); - if (this.options.showClearBtn) { - this.clearBtn.addEventListener('click', this._handleClearClick); - } - } - _setupVariables() { - const template = document.createElement('template'); - template.innerHTML = Datepicker._template.trim(); - this.modalEl = template.content.firstChild; - this.calendarEl = this.modalEl.querySelector('.datepicker-calendar'); - this.yearTextEl = this.modalEl.querySelector('.year-text'); - this.dateTextEl = this.modalEl.querySelector('.date-text'); - if (this.options.showClearBtn) { - this.clearBtn = this.modalEl.querySelector('.datepicker-clear'); - } - this.doneBtn = this.modalEl.querySelector('.datepicker-done'); - this.cancelBtn = this.modalEl.querySelector('.datepicker-cancel'); - this.formats = { - d: () => { - return this.date.getDate(); - }, - dd: () => { - let d = this.date.getDate(); - return (d < 10 ? '0' : '') + d; - }, - ddd: () => { - return this.options.i18n.weekdaysShort[this.date.getDay()]; - }, - dddd: () => { - return this.options.i18n.weekdays[this.date.getDay()]; - }, - m: () => { - return this.date.getMonth() + 1; - }, - mm: () => { - let m = this.date.getMonth() + 1; - return (m < 10 ? '0' : '') + m; - }, - mmm: () => { - return this.options.i18n.monthsShort[this.date.getMonth()]; - }, - mmmm: () => { - return this.options.i18n.months[this.date.getMonth()]; - }, - yy: () => { - return ('' + this.date.getFullYear()).slice(2); - }, - yyyy: () => { - return this.date.getFullYear(); - } - }; - } - _removeEventHandlers() { - this.el.removeEventListener('click', this._handleInputClick); - this.el.removeEventListener('keydown', this._handleInputKeydown); - this.el.removeEventListener('change', this._handleInputChange); - this.calendarEl.removeEventListener('click', this._handleCalendarClick); - } - _handleInputClick = () => { - this.open(); - }; - _handleInputKeydown = (e) => { - if (Utils.keys.ENTER.includes(e.key)) { - e.preventDefault(); - this.open(); - } - }; - _handleCalendarClick = (e) => { - if (!this.isOpen) - return; - const target = (e.target); - if (!target.classList.contains('is-disabled')) { - if (target.classList.contains('datepicker-day-button') && - !target.classList.contains('is-empty') && - !target.parentElement.classList.contains('is-disabled')) { - this.setDate(new Date(e.target.getAttribute('data-year'), e.target.getAttribute('data-month'), e.target.getAttribute('data-day'))); - if (this.options.autoClose) { - this._finishSelection(); - } - } - else if (target.closest('.month-prev')) { - this.prevMonth(); - } - else if (target.closest('.month-next')) { - this.nextMonth(); - } - } - }; - _handleClearClick = () => { - this.date = null; - this.setInputValue(); - this.close(); - }; - _handleMonthChange = (e) => { - this.gotoMonth(e.target.value); - }; - _handleYearChange = (e) => { - this.gotoYear(e.target.value); - }; - // change view to a specific month (zero-index, e.g. 0: January) - gotoMonth(month) { - if (!isNaN(month)) { - this.calendars[0].month = parseInt(month, 10); - this.adjustCalendars(); - } - } - // change view to a specific full year (e.g. "2012") - gotoYear(year) { - if (!isNaN(year)) { - this.calendars[0].year = parseInt(year, 10); - this.adjustCalendars(); - } - } - _handleInputChange = (e) => { - let date; - // Prevent change event from being fired when triggered by the plugin - if (e['detail']?.firedBy === this) - return; - if (this.options.parse) { - date = this.options.parse(this.el.value, typeof this.options.format === "function" - ? this.options.format(new Date(this.el.value)) - : this.options.format); - } - else { - date = new Date(Date.parse(this.el.value)); - } - if (Datepicker._isDate(date)) - this.setDate(date); - }; - renderDayName(opts, day, abbr = false) { - day += opts.firstDay; - while (day >= 7) { - day -= 7; - } - return abbr ? opts.i18n.weekdaysAbbrev[day] : opts.i18n.weekdays[day]; - } - // Set input value to the selected date and close Datepicker - _finishSelection = () => { - this.setInputValue(); - this.close(); - }; - /** - * Open datepicker. - */ - open = () => { - if (this.isOpen) - return; - this.isOpen = true; - if (typeof this.options.onOpen === 'function') { - this.options.onOpen.call(this); - } - this.draw(); - this.modal.open(undefined); - return this; - }; - /** - * Close datepicker. - */ - close = () => { - if (!this.isOpen) - return; - this.isOpen = false; - if (typeof this.options.onClose === 'function') { - this.options.onClose.call(this); - } - this.modal.close(); - return this; - }; - static { - Datepicker._template = ` -
-
-
- - -
-
-
-
- -
- - -
-
-
-
-
`; - } - } - - class Forms { - /** - * Resizes the given TextArea after updating the - * value content dynamically. - * @param textarea TextArea to be resized - */ - static textareaAutoResize(textarea) { - if (!textarea) { - console.error('No textarea element found'); - return; - } - // Textarea Auto Resize - let hiddenDiv = document.querySelector('.hiddendiv'); - if (!hiddenDiv) { - hiddenDiv = document.createElement('div'); - hiddenDiv.classList.add('hiddendiv', 'common'); - document.body.append(hiddenDiv); - } - const style = getComputedStyle(textarea); - // Set font properties of hiddenDiv - const fontFamily = style.fontFamily; //textarea.css('font-family'); - const fontSize = style.fontSize; //textarea.css('font-size'); - const lineHeight = style.lineHeight; //textarea.css('line-height'); - // Firefox can't handle padding shorthand. - const paddingTop = style.paddingTop; //getComputedStyle(textarea).css('padding-top'); - const paddingRight = style.paddingRight; //textarea.css('padding-right'); - const paddingBottom = style.paddingBottom; //textarea.css('padding-bottom'); - const paddingLeft = style.paddingLeft; //textarea.css('padding-left'); - if (fontSize) - hiddenDiv.style.fontSize = fontSize; //('font-size', fontSize); - if (fontFamily) - hiddenDiv.style.fontFamily = fontFamily; //css('font-family', fontFamily); - if (lineHeight) - hiddenDiv.style.lineHeight = lineHeight; //css('line-height', lineHeight); - if (paddingTop) - hiddenDiv.style.paddingTop = paddingTop; //ss('padding-top', paddingTop); - if (paddingRight) - hiddenDiv.style.paddingRight = paddingRight; //css('padding-right', paddingRight); - if (paddingBottom) - hiddenDiv.style.paddingBottom = paddingBottom; //css('padding-bottom', paddingBottom); - if (paddingLeft) - hiddenDiv.style.paddingLeft = paddingLeft; //css('padding-left', paddingLeft); - // Set original-height, if none - if (!textarea.hasAttribute('original-height')) - textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString()); - if (textarea.getAttribute('wrap') === 'off') { - hiddenDiv.style.overflowWrap = 'normal'; // ('overflow-wrap', 'normal') - hiddenDiv.style.whiteSpace = 'pre'; //.css('white-space', 'pre'); - } - hiddenDiv.innerText = textarea.value + '\n'; - const content = hiddenDiv.innerHTML.replace(/\n/g, '
'); - hiddenDiv.innerHTML = content; - // When textarea is hidden, width goes crazy. - // Approximate with half of window size - if (textarea.offsetWidth > 0 && textarea.offsetHeight > 0) { - hiddenDiv.style.width = textarea.getBoundingClientRect().width + 'px'; // ('width', textarea.width() + 'px'); - } - else { - hiddenDiv.style.width = (window.innerWidth / 2) + 'px'; //css('width', window.innerWidth / 2 + 'px'); - } - // Resize if the new height is greater than the - // original height of the textarea - const originalHeight = parseInt(textarea.getAttribute('original-height')); - const prevLength = parseInt(textarea.getAttribute('previous-length')); - if (isNaN(originalHeight)) - return; - if (originalHeight <= hiddenDiv.clientHeight) { - textarea.style.height = hiddenDiv.clientHeight + 'px'; //css('height', hiddenDiv.innerHeight() + 'px'); - } - else if (textarea.value.length < prevLength) { - // In case the new height is less than original height, it - // means the textarea has less text than before - // So we set the height to the original one - textarea.style.height = originalHeight + 'px'; - } - textarea.setAttribute('previous-length', textarea.value.length.toString()); - } - ; - static Init() { - if (typeof document !== 'undefined') - document?.addEventListener("DOMContentLoaded", () => { - document.addEventListener('keyup', (e) => { - const target = e.target; - // Radio and Checkbox focus class - if (target instanceof HTMLInputElement && ['radio', 'checkbox'].includes(target.type)) { - // TAB, check if tabbing to radio or checkbox. - if (Utils.keys.TAB.includes(e.key)) { - target.classList.add('tabbed'); - target.addEventListener('blur', e => target.classList.remove('tabbed'), { once: true }); - } - } - }); - document.querySelectorAll('.materialize-textarea').forEach((textArea) => { - Forms.InitTextarea(textArea); - }); - // File Input Path - document.querySelectorAll('.file-field input[type="file"]').forEach((fileInput) => { - Forms.InitFileInputPath(fileInput); - }); - }); - } - static InitTextarea(textarea) { - // Save Data in Element - textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString()); - textarea.setAttribute('previous-length', textarea.value.length.toString()); - Forms.textareaAutoResize(textarea); - textarea.addEventListener('keyup', e => Forms.textareaAutoResize(textarea)); - textarea.addEventListener('keydown', e => Forms.textareaAutoResize(textarea)); - } - static InitFileInputPath(fileInput) { - fileInput.addEventListener('change', e => { - const fileField = fileInput.closest('.file-field'); - const pathInput = fileField.querySelector('input.file-path'); - const files = fileInput.files; - const filenames = []; - for (let i = 0; i < files.length; i++) { - filenames.push(files[i].name); - } - pathInput.value = filenames.join(', '); - pathInput.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true })); - }); - } - } - - const _defaults$c = { - inDuration: 275, - outDuration: 200, - onOpenStart: null, - onOpenEnd: null, - onCloseStart: null, - onCloseEnd: null - }; - class Materialbox extends Component { - /** If the materialbox overlay is showing. */ - overlayActive; - /** If the materialbox is no longer being animated. */ - doneAnimating; - /** Caption, if specified. */ - caption; - /** Original width of image. */ - originalWidth; - /** Original height of image. */ - originalHeight; - originInlineStyles; - placeholder; - _changedAncestorList; - newHeight; - newWidth; - windowWidth; - windowHeight; - attrWidth; - attrHeight; - _overlay; - _photoCaption; - constructor(el, options) { - super(el, options, Materialbox); - this.el.M_Materialbox = this; - this.options = { - ...Materialbox.defaults, - ...options - }; - this.overlayActive = false; - this.doneAnimating = true; - this.placeholder = document.createElement('div'); - this.placeholder.classList.add('material-placeholder'); - this.originalWidth = 0; - this.originalHeight = 0; - this.originInlineStyles = this.el.getAttribute('style'); - this.caption = this.el.getAttribute('data-caption') || ''; - // Wrap - this.el.before(this.placeholder); - this.placeholder.append(this.el); - this._setupEventHandlers(); - } - static get defaults() { - return _defaults$c; - } - /** - * Initializes instances of MaterialBox. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, Materialbox); - } - static getInstance(el) { - return el.M_Materialbox; - } - destroy() { - this._removeEventHandlers(); - this.el.M_Materialbox = undefined; - // Unwrap image - //this.placeholder.after(this.el).remove(); - this.placeholder.remove(); - this.el.removeAttribute('style'); - } - _setupEventHandlers() { - this.el.addEventListener('click', this._handleMaterialboxClick); - } - _removeEventHandlers() { - this.el.removeEventListener('click', this._handleMaterialboxClick); - } - _handleMaterialboxClick = () => { - // If already modal, return to original - if (this.doneAnimating === false || (this.overlayActive && this.doneAnimating)) - this.close(); - else - this.open(); - }; - _handleWindowScroll = () => { - if (this.overlayActive) - this.close(); - }; - _handleWindowResize = () => { - if (this.overlayActive) - this.close(); - }; - _handleWindowEscape = (e) => { - if (Utils.keys.ESC.includes(e.key) && this.doneAnimating && this.overlayActive) - this.close(); - }; - _makeAncestorsOverflowVisible() { - this._changedAncestorList = []; - let ancestor = this.placeholder.parentNode; - while (ancestor !== null && ancestor !== document) { - const curr = ancestor; - if (curr.style.overflow !== 'visible') { - curr.style.overflow = 'visible'; - this._changedAncestorList.push(curr); - } - ancestor = ancestor.parentNode; - } - } - _offset(el) { - const box = el.getBoundingClientRect(); - const docElem = document.documentElement; - return { - top: box.top + window.pageYOffset - docElem.clientTop, - left: box.left + window.pageXOffset - docElem.clientLeft - }; - } - _updateVars() { - this.windowWidth = window.innerWidth; - this.windowHeight = window.innerHeight; - this.caption = this.el.getAttribute('data-caption') || ''; - } - // Image - _animateImageIn() { - this.el.style.maxHeight = this.newHeight.toString() + 'px'; - this.el.style.maxWidth = this.newWidth.toString() + 'px'; - const duration = this.options.inDuration; - // from - this.el.style.transition = 'none'; - this.el.style.height = this.originalHeight + 'px'; - this.el.style.width = this.originalWidth + 'px'; - setTimeout(() => { - // easeOutQuad - this.el.style.transition = `height ${duration}ms ease, - width ${duration}ms ease, - left ${duration}ms ease, - top ${duration}ms ease - `; - // to - this.el.style.height = this.newHeight + 'px'; - this.el.style.width = this.newWidth + 'px'; - this.el.style.left = (Utils.getDocumentScrollLeft() + - this.windowWidth / 2 - - this._offset(this.placeholder).left - - this.newWidth / 2) + 'px'; - this.el.style.top = (Utils.getDocumentScrollTop() + - this.windowHeight / 2 - - this._offset(this.placeholder).top - - this.newHeight / 2) + 'px'; - }, 1); - setTimeout(() => { - this.doneAnimating = true; - if (typeof this.options.onOpenEnd === 'function') - this.options.onOpenEnd.call(this, this.el); - }, duration); - /* - anim({ - targets: this.el, // image - height: [this.originalHeight, this.newHeight], - width: [this.originalWidth, this.newWidth], - left: - Utils.getDocumentScrollLeft() + - this.windowWidth / 2 - - this._offset(this.placeholder).left - - this.newWidth / 2, - top: - Utils.getDocumentScrollTop() + - this.windowHeight / 2 - - this._offset(this.placeholder).top - - this.newHeight / 2, - - duration: this.options.inDuration, - easing: 'easeOutQuad', - complete: () => { - this.doneAnimating = true; - if (typeof this.options.onOpenEnd === 'function') this.options.onOpenEnd.call(this, this.el); - } - }); - */ - } - _animateImageOut() { - const duration = this.options.outDuration; - // easeOutQuad - this.el.style.transition = `height ${duration}ms ease, - width ${duration}ms ease, - left ${duration}ms ease, - top ${duration}ms ease - `; - // to - this.el.style.height = this.originalWidth + 'px'; - this.el.style.width = this.originalWidth + 'px'; - this.el.style.left = '0'; - this.el.style.top = '0'; - setTimeout(() => { - this.placeholder.style.height = ''; - this.placeholder.style.width = ''; - this.placeholder.style.position = ''; - this.placeholder.style.top = ''; - this.placeholder.style.left = ''; - // Revert to width or height attribute - if (this.attrWidth) - this.el.setAttribute('width', this.attrWidth.toString()); - if (this.attrHeight) - this.el.setAttribute('height', this.attrHeight.toString()); - this.el.removeAttribute('style'); - this.originInlineStyles && this.el.setAttribute('style', this.originInlineStyles); - // Remove class - this.el.classList.remove('active'); - this.doneAnimating = true; - // Remove overflow overrides on ancestors - this._changedAncestorList.forEach(anchestor => anchestor.style.overflow = ''); - // onCloseEnd callback - if (typeof this.options.onCloseEnd === 'function') - this.options.onCloseEnd.call(this, this.el); - }, duration); - } - // Caption - _addCaption() { - this._photoCaption = document.createElement('div'); - this._photoCaption.classList.add('materialbox-caption'); - this._photoCaption.innerText = this.caption; - document.body.append(this._photoCaption); - this._photoCaption.style.display = 'inline'; - // Animate - this._photoCaption.style.transition = 'none'; - this._photoCaption.style.opacity = '0'; - const duration = this.options.inDuration; - setTimeout(() => { - this._photoCaption.style.transition = `opacity ${duration}ms ease`; - this._photoCaption.style.opacity = '1'; - }, 1); - } - _removeCaption() { - const duration = this.options.outDuration; - this._photoCaption.style.transition = `opacity ${duration}ms ease`; - this._photoCaption.style.opacity = '0'; - setTimeout(() => { - this._photoCaption.remove(); - }, duration); - } - // Overlay - _addOverlay() { - this._overlay = document.createElement('div'); - this._overlay.id = 'materialbox-overlay'; - this._overlay.addEventListener('click', e => { - if (this.doneAnimating) - this.close(); - }, { once: true }); - // Put before in origin image to preserve z-index layering. - this.el.before(this._overlay); - // Set dimensions if needed - const overlayOffset = this._overlay.getBoundingClientRect(); - this._overlay.style.width = this.windowWidth + 'px'; - this._overlay.style.height = this.windowHeight + 'px'; - this._overlay.style.left = -1 * overlayOffset.left + 'px'; - this._overlay.style.top = -1 * overlayOffset.top + 'px'; - // Animate - this._overlay.style.transition = 'none'; - this._overlay.style.opacity = '0'; - const duration = this.options.inDuration; - setTimeout(() => { - this._overlay.style.transition = `opacity ${duration}ms ease`; - this._overlay.style.opacity = '1'; - }, 1); - } - _removeOverlay() { - const duration = this.options.outDuration; - this._overlay.style.transition = `opacity ${duration}ms ease`; - this._overlay.style.opacity = '0'; - setTimeout(() => { - this.overlayActive = false; - this._overlay.remove(); - }, duration); - } - /** - * Open materialbox. - */ - open = () => { - this._updateVars(); - this.originalWidth = this.el.getBoundingClientRect().width; - this.originalHeight = this.el.getBoundingClientRect().height; - // Set states - this.doneAnimating = false; - this.el.classList.add('active'); - this.overlayActive = true; - // onOpenStart callback - if (typeof this.options.onOpenStart === 'function') - this.options.onOpenStart.call(this, this.el); - // Set positioning for placeholder - this.placeholder.style.width = this.placeholder.getBoundingClientRect().width + 'px'; - this.placeholder.style.height = this.placeholder.getBoundingClientRect().height + 'px'; - this.placeholder.style.position = 'relative'; - this.placeholder.style.top = '0'; - this.placeholder.style.left = '0'; - this._makeAncestorsOverflowVisible(); - // Set css on origin - this.el.style.position = 'absolute'; - this.el.style.zIndex = '1000'; - this.el.style.willChange = 'left, top, width, height'; - // Change from width or height attribute to css - this.attrWidth = this.el.getAttribute('width'); - this.attrHeight = this.el.getAttribute('height'); - if (this.attrWidth) { - this.el.style.width = this.attrWidth + 'px'; - this.el.removeAttribute('width'); - } - if (this.attrHeight) { - this.el.style.width = this.attrHeight + 'px'; - this.el.removeAttribute('height'); - } - this._addOverlay(); - // Add and animate caption if it exists - if (this.caption !== '') - this._addCaption(); - // Resize Image - const widthPercent = this.originalWidth / this.windowWidth; - const heightPercent = this.originalHeight / this.windowHeight; - this.newWidth = 0; - this.newHeight = 0; - if (widthPercent > heightPercent) { - // Width first - const ratio = this.originalHeight / this.originalWidth; - this.newWidth = this.windowWidth * 0.9; - this.newHeight = this.windowWidth * 0.9 * ratio; - } - else { - // Height first - const ratio = this.originalWidth / this.originalHeight; - this.newWidth = this.windowHeight * 0.9 * ratio; - this.newHeight = this.windowHeight * 0.9; - } - this._animateImageIn(); - // Handle Exit triggers - window.addEventListener('scroll', this._handleWindowScroll); - window.addEventListener('resize', this._handleWindowResize); - window.addEventListener('keyup', this._handleWindowEscape); - }; - /** - * Close materialbox. - */ - close = () => { - this._updateVars(); - this.doneAnimating = false; - // onCloseStart callback - if (typeof this.options.onCloseStart === 'function') - this.options.onCloseStart.call(this, this.el); - //anim.remove(this.el); - //anim.remove(this._overlay); - //if (this.caption !== '') anim.remove(this._photoCaption); - // disable exit handlers - window.removeEventListener('scroll', this._handleWindowScroll); - window.removeEventListener('resize', this._handleWindowResize); - window.removeEventListener('keyup', this._handleWindowEscape); - this._removeOverlay(); - this._animateImageOut(); - if (this.caption !== '') - this._removeCaption(); - }; - } - - let _defaults$b = { - responsiveThreshold: 0 // breakpoint for swipeable - }; - class Parallax extends Component { - _enabled; - _img; - static _parallaxes = []; - static _handleScrollThrottled; - static _handleWindowResizeThrottled; - constructor(el, options) { - super(el, options, Parallax); - this.el.M_Parallax = this; - this.options = { - ...Parallax.defaults, - ...options - }; - this._enabled = window.innerWidth > this.options.responsiveThreshold; - this._img = this.el.querySelector('img'); - this._updateParallax(); - this._setupEventHandlers(); - this._setupStyles(); - Parallax._parallaxes.push(this); - } - static get defaults() { - return _defaults$b; - } - /** - * Initializes instances of Parallax. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, Parallax); - } - static getInstance(el) { - return el.M_Parallax; - } - destroy() { - Parallax._parallaxes.splice(Parallax._parallaxes.indexOf(this), 1); - this._img.style.transform = ''; - this._removeEventHandlers(); - this.el.M_Parallax = undefined; - } - static _handleScroll() { - for (let i = 0; i < Parallax._parallaxes.length; i++) { - let parallaxInstance = Parallax._parallaxes[i]; - parallaxInstance._updateParallax.call(parallaxInstance); - } - } - static _handleWindowResize() { - for (let i = 0; i < Parallax._parallaxes.length; i++) { - let parallaxInstance = Parallax._parallaxes[i]; - parallaxInstance._enabled = - window.innerWidth > parallaxInstance.options.responsiveThreshold; - } - } - _setupEventHandlers() { - this._img.addEventListener('load', this._handleImageLoad); - if (Parallax._parallaxes.length === 0) { - if (!Parallax._handleScrollThrottled) { - Parallax._handleScrollThrottled = Utils.throttle(Parallax._handleScroll, 5); - } - if (!Parallax._handleWindowResizeThrottled) { - Parallax._handleWindowResizeThrottled = Utils.throttle(Parallax._handleWindowResize, 5); - } - window.addEventListener('scroll', Parallax._handleScrollThrottled); - window.addEventListener('resize', Parallax._handleWindowResizeThrottled); - } - } - _removeEventHandlers() { - this._img.removeEventListener('load', this._handleImageLoad); - if (Parallax._parallaxes.length === 0) { - window.removeEventListener('scroll', Parallax._handleScrollThrottled); - window.removeEventListener('resize', Parallax._handleWindowResizeThrottled); - } - } - _setupStyles() { - this._img.style.opacity = '1'; - } - _handleImageLoad = () => { - this._updateParallax(); - }; - _offset(el) { - const box = el.getBoundingClientRect(); - const docElem = document.documentElement; - return { - top: box.top + window.pageYOffset - docElem.clientTop, - left: box.left + window.pageXOffset - docElem.clientLeft - }; - } - _updateParallax() { - const containerHeight = this.el.getBoundingClientRect().height > 0 ? this.el.parentNode.offsetHeight : 500; - const imgHeight = this._img.offsetHeight; - const parallaxDist = imgHeight - containerHeight; - const bottom = this._offset(this.el).top + containerHeight; - const top = this._offset(this.el).top; - const scrollTop = Utils.getDocumentScrollTop(); - const windowHeight = window.innerHeight; - const windowBottom = scrollTop + windowHeight; - const percentScrolled = (windowBottom - top) / (containerHeight + windowHeight); - const parallax = parallaxDist * percentScrolled; - if (!this._enabled) { - this._img.style.transform = ''; - } - else if (bottom > scrollTop && top < scrollTop + windowHeight) { - this._img.style.transform = `translate3D(-50%, ${parallax}px, 0)`; - } - } - } - - let _defaults$a = { - top: 0, - bottom: Infinity, - offset: 0, - onPositionChange: null - }; - class Pushpin extends Component { - static _pushpins; - originalOffset; - constructor(el, options) { - super(el, options, Pushpin); - this.el.M_Pushpin = this; - this.options = { - ...Pushpin.defaults, - ...options - }; - this.originalOffset = this.el.offsetTop; - Pushpin._pushpins.push(this); - this._setupEventHandlers(); - this._updatePosition(); - } - static get defaults() { - return _defaults$a; - } - /** - * Initializes instances of Pushpin. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, Pushpin); - } - static getInstance(el) { - return el.M_Pushpin; - } - destroy() { - this.el.style.top = null; - this._removePinClasses(); - // Remove pushpin Inst - let index = Pushpin._pushpins.indexOf(this); - Pushpin._pushpins.splice(index, 1); - if (Pushpin._pushpins.length === 0) { - this._removeEventHandlers(); - } - this.el.M_Pushpin = undefined; - } - static _updateElements() { - for (let elIndex in Pushpin._pushpins) { - let pInstance = Pushpin._pushpins[elIndex]; - pInstance._updatePosition(); - } - } - _setupEventHandlers() { - document.addEventListener('scroll', Pushpin._updateElements); - } - _removeEventHandlers() { - document.removeEventListener('scroll', Pushpin._updateElements); - } - _updatePosition() { - let scrolled = Utils.getDocumentScrollTop() + this.options.offset; - if (this.options.top <= scrolled && - this.options.bottom >= scrolled && - !this.el.classList.contains('pinned')) { - this._removePinClasses(); - this.el.style.top = `${this.options.offset}px`; - this.el.classList.add('pinned'); - // onPositionChange callback - if (typeof this.options.onPositionChange === 'function') { - this.options.onPositionChange.call(this, 'pinned'); - } - } - // Add pin-top (when scrolled position is above top) - if (scrolled < this.options.top && !this.el.classList.contains('pin-top')) { - this._removePinClasses(); - this.el.style.top = '0'; - this.el.classList.add('pin-top'); - // onPositionChange callback - if (typeof this.options.onPositionChange === 'function') { - this.options.onPositionChange.call(this, 'pin-top'); - } - } - // Add pin-bottom (when scrolled position is below bottom) - if (scrolled > this.options.bottom && !this.el.classList.contains('pin-bottom')) { - this._removePinClasses(); - this.el.classList.add('pin-bottom'); - this.el.style.top = `${this.options.bottom - this.originalOffset}px`; - // onPositionChange callback - if (typeof this.options.onPositionChange === 'function') { - this.options.onPositionChange.call(this, 'pin-bottom'); - } - } - } - _removePinClasses() { - // IE 11 bug (can't remove multiple classes in one line) - this.el.classList.remove('pin-top'); - this.el.classList.remove('pinned'); - this.el.classList.remove('pin-bottom'); - } - static { - Pushpin._pushpins = []; - } - } - - let _defaults$9 = { - throttle: 100, - scrollOffset: 200, // offset - 200 allows elements near bottom of page to scroll - activeClass: 'active', - getActiveElement: (id) => { return 'a[href="#' + id + '"]'; } - }; - class ScrollSpy extends Component { - static _elements; - static _count; - static _increment; - tickId; - id; - static _elementsInView; - static _visibleElements; - static _ticks; - constructor(el, options) { - super(el, options, ScrollSpy); - this.el.M_ScrollSpy = this; - this.options = { - ...ScrollSpy.defaults, - ...options - }; - ScrollSpy._elements.push(this); - ScrollSpy._count++; - ScrollSpy._increment++; - this.tickId = -1; - this.id = ScrollSpy._increment; - this._setupEventHandlers(); - this._handleWindowScroll(); - } - static get defaults() { - return _defaults$9; - } - /** - * Initializes instances of ScrollSpy. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, ScrollSpy); - } - static getInstance(el) { - return el.M_ScrollSpy; - } - destroy() { - ScrollSpy._elements.splice(ScrollSpy._elements.indexOf(this), 1); - ScrollSpy._elementsInView.splice(ScrollSpy._elementsInView.indexOf(this), 1); - ScrollSpy._visibleElements.splice(ScrollSpy._visibleElements.indexOf(this.el), 1); - ScrollSpy._count--; - this._removeEventHandlers(); - const actElem = document.querySelector(this.options.getActiveElement(this.el.id)); - actElem.classList.remove(this.options.activeClass); - this.el.M_ScrollSpy = undefined; - } - _setupEventHandlers() { - if (ScrollSpy._count === 1) { - window.addEventListener('scroll', this._handleWindowScroll); - window.addEventListener('resize', this._handleThrottledResize); - document.body.addEventListener('click', this._handleTriggerClick); - } - } - _removeEventHandlers() { - if (ScrollSpy._count === 0) { - window.removeEventListener('scroll', this._handleWindowScroll); - window.removeEventListener('resize', this._handleThrottledResize); - document.body.removeEventListener('click', this._handleTriggerClick); - } - } - _handleThrottledResize = Utils.throttle(function () { this._handleWindowScroll(); }, 200).bind(this); - _handleTriggerClick = (e) => { - const trigger = e.target; - for (let i = ScrollSpy._elements.length - 1; i >= 0; i--) { - const scrollspy = ScrollSpy._elements[i]; - const x = document.querySelector('a[href="#' + scrollspy.el.id + '"]'); - if (trigger === x) { - e.preventDefault(); - scrollspy.el.scrollIntoView({ behavior: 'smooth' }); - break; - } - } - }; - _handleWindowScroll = () => { - // unique tick id - ScrollSpy._ticks++; - // viewport rectangle - let top = Utils.getDocumentScrollTop(), left = Utils.getDocumentScrollLeft(), right = left + window.innerWidth, bottom = top + window.innerHeight; - // determine which elements are in view - let intersections = ScrollSpy._findElements(top, right, bottom, left); - for (let i = 0; i < intersections.length; i++) { - let scrollspy = intersections[i]; - let lastTick = scrollspy.tickId; - if (lastTick < 0) { - // entered into view - scrollspy._enter(); - } - // update tick id - scrollspy.tickId = ScrollSpy._ticks; - } - for (let i = 0; i < ScrollSpy._elementsInView.length; i++) { - let scrollspy = ScrollSpy._elementsInView[i]; - let lastTick = scrollspy.tickId; - if (lastTick >= 0 && lastTick !== ScrollSpy._ticks) { - // exited from view - scrollspy._exit(); - scrollspy.tickId = -1; - } - } - // remember elements in view for next tick - ScrollSpy._elementsInView = intersections; - }; - static _offset(el) { - const box = el.getBoundingClientRect(); - const docElem = document.documentElement; - return { - top: box.top + window.pageYOffset - docElem.clientTop, - left: box.left + window.pageXOffset - docElem.clientLeft - }; - } - static _findElements(top, right, bottom, left) { - let hits = []; - for (let i = 0; i < ScrollSpy._elements.length; i++) { - let scrollspy = ScrollSpy._elements[i]; - let currTop = top + scrollspy.options.scrollOffset || 200; - if (scrollspy.el.getBoundingClientRect().height > 0) { - let elTop = ScrollSpy._offset(scrollspy.el).top, elLeft = ScrollSpy._offset(scrollspy.el).left, elRight = elLeft + scrollspy.el.getBoundingClientRect().width, elBottom = elTop + scrollspy.el.getBoundingClientRect().height; - let isIntersect = !(elLeft > right || - elRight < left || - elTop > bottom || - elBottom < currTop); - if (isIntersect) { - hits.push(scrollspy); - } - } - } - return hits; - } - _enter() { - ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0); - if (ScrollSpy._visibleElements[0]) { - const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id)); - actElem?.classList.remove(this.options.activeClass); - if (ScrollSpy._visibleElements[0].M_ScrollSpy && this.id < ScrollSpy._visibleElements[0].M_ScrollSpy.id) { - ScrollSpy._visibleElements.unshift(this.el); - } - else { - ScrollSpy._visibleElements.push(this.el); - } - } - else { - ScrollSpy._visibleElements.push(this.el); - } - const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id); - document.querySelector(selector)?.classList.add(this.options.activeClass); - } - _exit() { - ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0); - if (ScrollSpy._visibleElements[0]) { - const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id)); - actElem?.classList.remove(this.options.activeClass); - ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((x) => x.id != this.el.id); - if (ScrollSpy._visibleElements[0]) { - // Check if empty - const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id); - document.querySelector(selector)?.classList.add(this.options.activeClass); - } - } - } - static { - ScrollSpy._elements = []; - ScrollSpy._elementsInView = []; - ScrollSpy._visibleElements = []; // Array. - ScrollSpy._count = 0; - ScrollSpy._increment = 0; - ScrollSpy._ticks = 0; - } - } - - const _defaults$8 = { - edge: 'left', - draggable: true, - dragTargetWidth: '10px', - inDuration: 250, - outDuration: 200, - onOpenStart: null, - onOpenEnd: null, - onCloseStart: null, - onCloseEnd: null, - preventScrolling: true - }; - class Sidenav extends Component { - id; - /** Describes open/close state of Sidenav. */ - isOpen; - /** Describes if sidenav is fixed. */ - isFixed; - /** Describes if Sidenav is being dragged. */ - isDragged; - lastWindowWidth; - lastWindowHeight; - static _sidenavs; - _overlay; - dragTarget; - _startingXpos; - _xPos; - _time; - _width; - _initialScrollTop; - _verticallyScrolling; - deltaX; - velocityX; - percentOpen; - constructor(el, options) { - super(el, options, Sidenav); - this.el.M_Sidenav = this; - this.options = { - ...Sidenav.defaults, - ...options - }; - this.id = this.el.id; - this.isOpen = false; - this.isFixed = this.el.classList.contains('sidenav-fixed'); - this.isDragged = false; - // Window size variables for window resize checks - this.lastWindowWidth = window.innerWidth; - this.lastWindowHeight = window.innerHeight; - this._createOverlay(); - this._createDragTarget(); - this._setupEventHandlers(); - this._setupClasses(); - this._setupFixed(); - Sidenav._sidenavs.push(this); - } - static get defaults() { - return _defaults$8; - } - /** - * Initializes instances of Sidenav. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, Sidenav); - } - static getInstance(el) { - return el.M_Sidenav; - } - destroy() { - this._removeEventHandlers(); - this._enableBodyScrolling(); - this._overlay.parentNode.removeChild(this._overlay); - this.dragTarget.parentNode.removeChild(this.dragTarget); - this.el.M_Sidenav = undefined; - this.el.style.transform = ''; - const index = Sidenav._sidenavs.indexOf(this); - if (index >= 0) { - Sidenav._sidenavs.splice(index, 1); - } - } - _createOverlay() { - this._overlay = document.createElement('div'); - this._overlay.classList.add('sidenav-overlay'); - this._overlay.addEventListener('click', this.close); - document.body.appendChild(this._overlay); - } - _setupEventHandlers() { - if (Sidenav._sidenavs.length === 0) { - document.body.addEventListener('click', this._handleTriggerClick); - } - var passiveIfSupported = null; - this.dragTarget.addEventListener('touchmove', this._handleDragTargetDrag, passiveIfSupported); - this.dragTarget.addEventListener('touchend', this._handleDragTargetRelease); - this._overlay.addEventListener('touchmove', this._handleCloseDrag, passiveIfSupported); - this._overlay.addEventListener('touchend', this._handleCloseRelease); - this.el.addEventListener('touchmove', this._handleCloseDrag, passiveIfSupported); - this.el.addEventListener('touchend', this._handleCloseRelease); - this.el.addEventListener('click', this._handleCloseTriggerClick); - // Add resize for side nav fixed - if (this.isFixed) { - window.addEventListener('resize', this._handleWindowResize); - } - } - _removeEventHandlers() { - if (Sidenav._sidenavs.length === 1) { - document.body.removeEventListener('click', this._handleTriggerClick); - } - this.dragTarget.removeEventListener('touchmove', this._handleDragTargetDrag); - this.dragTarget.removeEventListener('touchend', this._handleDragTargetRelease); - this._overlay.removeEventListener('touchmove', this._handleCloseDrag); - this._overlay.removeEventListener('touchend', this._handleCloseRelease); - this.el.removeEventListener('touchmove', this._handleCloseDrag); - this.el.removeEventListener('touchend', this._handleCloseRelease); - this.el.removeEventListener('click', this._handleCloseTriggerClick); - // Remove resize for side nav fixed - if (this.isFixed) { - window.removeEventListener('resize', this._handleWindowResize); - } - } - _handleTriggerClick(e) { - const trigger = e.target.closest('.sidenav-trigger'); - if (e.target && trigger) { - const sidenavId = Utils.getIdFromTrigger(trigger); - const sidenavInstance = document.getElementById(sidenavId).M_Sidenav; - if (sidenavInstance) { - sidenavInstance.open(trigger); - } - e.preventDefault(); - } - } - // Set variables needed at the beginning of drag and stop any current transition. - _startDrag(e) { - const clientX = e.targetTouches[0].clientX; - this.isDragged = true; - this._startingXpos = clientX; - this._xPos = this._startingXpos; - this._time = Date.now(); - this._width = this.el.getBoundingClientRect().width; - this._overlay.style.display = 'block'; - this._initialScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop(); - this._verticallyScrolling = false; - } - //Set variables needed at each drag move update tick - _dragMoveUpdate(e) { - const clientX = e.targetTouches[0].clientX; - const currentScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop(); - this.deltaX = Math.abs(this._xPos - clientX); - this._xPos = clientX; - this.velocityX = this.deltaX / (Date.now() - this._time); - this._time = Date.now(); - if (this._initialScrollTop !== currentScrollTop) { - this._verticallyScrolling = true; - } - } - _handleDragTargetDrag = (e) => { - // Check if draggable - if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) { - return; - } - // If not being dragged, set initial drag start variables - if (!this.isDragged) { - this._startDrag(e); - } - // Run touchmove updates - this._dragMoveUpdate(e); - // Calculate raw deltaX - let totalDeltaX = this._xPos - this._startingXpos; - // dragDirection is the attempted user drag direction - const dragDirection = totalDeltaX > 0 ? 'right' : 'left'; - // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction - totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX)); - if (this.options.edge === dragDirection) { - totalDeltaX = 0; - } - /** - * transformX is the drag displacement - * transformPrefix is the initial transform placement - * Invert values if Sidenav is right edge - */ - let transformX = totalDeltaX; - let transformPrefix = 'translateX(-100%)'; - if (this.options.edge === 'right') { - transformPrefix = 'translateX(100%)'; - transformX = -transformX; - } - // Calculate open/close percentage of sidenav, with open = 1 and close = 0 - this.percentOpen = Math.min(1, totalDeltaX / this._width); - // Set transform and opacity styles - this.el.style.transform = `${transformPrefix} translateX(${transformX}px)`; - this._overlay.style.opacity = this.percentOpen.toString(); - }; - _handleDragTargetRelease = () => { - if (this.isDragged) { - if (this.percentOpen > 0.2) { - this.open(); - } - else { - this._animateOut(); - } - this.isDragged = false; - this._verticallyScrolling = false; - } - }; - _handleCloseDrag = (e) => { - if (this.isOpen) { - // Check if draggable - if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) { - return; - } - // If not being dragged, set initial drag start variables - if (!this.isDragged) { - this._startDrag(e); - } - // Run touchmove updates - this._dragMoveUpdate(e); - // Calculate raw deltaX - let totalDeltaX = this._xPos - this._startingXpos; - // dragDirection is the attempted user drag direction - let dragDirection = totalDeltaX > 0 ? 'right' : 'left'; - // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction - totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX)); - if (this.options.edge !== dragDirection) { - totalDeltaX = 0; - } - let transformX = -totalDeltaX; - if (this.options.edge === 'right') { - transformX = -transformX; - } - // Calculate open/close percentage of sidenav, with open = 1 and close = 0 - this.percentOpen = Math.min(1, 1 - totalDeltaX / this._width); - // Set transform and opacity styles - this.el.style.transform = `translateX(${transformX}px)`; - this._overlay.style.opacity = this.percentOpen.toString(); - } - }; - _handleCloseRelease = () => { - if (this.isOpen && this.isDragged) { - if (this.percentOpen > 0.8) { - this._animateIn(); - } - else { - this.close(); - } - this.isDragged = false; - this._verticallyScrolling = false; - } - }; - // Handles closing of Sidenav when element with class .sidenav-close - _handleCloseTriggerClick = (e) => { - const closeTrigger = e.target.closest('.sidenav-close'); - if (closeTrigger && !this._isCurrentlyFixed()) { - this.close(); - } - }; - _handleWindowResize = () => { - // Only handle horizontal resizes - if (this.lastWindowWidth !== window.innerWidth) { - if (window.innerWidth > 992) { - this.open(); - } - else { - this.close(); - } - } - this.lastWindowWidth = window.innerWidth; - this.lastWindowHeight = window.innerHeight; - }; - _setupClasses() { - if (this.options.edge === 'right') { - this.el.classList.add('right-aligned'); - this.dragTarget.classList.add('right-aligned'); - } - } - _removeClasses() { - this.el.classList.remove('right-aligned'); - this.dragTarget.classList.remove('right-aligned'); - } - _setupFixed() { - if (this._isCurrentlyFixed()) - this.open(); - } - _isCurrentlyFixed() { - return this.isFixed && window.innerWidth > 992; - } - _createDragTarget() { - const dragTarget = document.createElement('div'); - dragTarget.classList.add('drag-target'); - dragTarget.style.width = this.options.dragTargetWidth; - document.body.appendChild(dragTarget); - this.dragTarget = dragTarget; - } - _preventBodyScrolling() { - document.body.style.overflow = 'hidden'; - } - _enableBodyScrolling() { - document.body.style.overflow = ''; - } - /** - * Opens Sidenav. - */ - open = () => { - if (this.isOpen === true) - return; - this.isOpen = true; - // Run onOpenStart callback - if (typeof this.options.onOpenStart === 'function') { - this.options.onOpenStart.call(this, this.el); - } - // Handle fixed Sidenav - if (this._isCurrentlyFixed()) { - // Show if fixed - this.el.style.transform = 'translateX(0)'; - this._enableBodyScrolling(); - this._overlay.style.display = 'none'; - } - // Handle non-fixed Sidenav - else { - if (this.options.preventScrolling) - this._preventBodyScrolling(); - if (!this.isDragged || this.percentOpen != 1) - this._animateIn(); - } - }; - /** - * Closes Sidenav. - */ - close = () => { - if (this.isOpen === false) - return; - this.isOpen = false; - // Run onCloseStart callback - if (typeof this.options.onCloseStart === 'function') { - this.options.onCloseStart.call(this, this.el); - } - // Handle fixed Sidenav - if (this._isCurrentlyFixed()) { - const transformX = this.options.edge === 'left' ? '-105%' : '105%'; - this.el.style.transform = `translateX(${transformX})`; - } - // Handle non-fixed Sidenav - else { - this._enableBodyScrolling(); - if (!this.isDragged || this.percentOpen != 0) { - this._animateOut(); - } - else { - this._overlay.style.display = 'none'; - } - } - }; - _animateIn() { - this._animateSidenavIn(); - this._animateOverlayIn(); - } - _animateOut() { - this._animateSidenavOut(); - this._animateOverlayOut(); - } - _animateSidenavIn() { - let slideOutPercent = this.options.edge === 'left' ? -1 : 1; - if (this.isDragged) { - slideOutPercent = - this.options.edge === 'left' - ? slideOutPercent + this.percentOpen - : slideOutPercent - this.percentOpen; - } - const duration = this.options.inDuration; - // from - this.el.style.transition = 'none'; - this.el.style.transform = 'translateX(' + (slideOutPercent * 100) + '%)'; - setTimeout(() => { - this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad - // to - this.el.style.transform = 'translateX(0)'; - }, 1); - setTimeout(() => { - if (typeof this.options.onOpenEnd === 'function') - this.options.onOpenEnd.call(this, this.el); - }, duration); - } - _animateSidenavOut() { - const endPercent = this.options.edge === 'left' ? -1 : 1; - if (this.isDragged) { - this.options.edge === 'left' - ? endPercent + this.percentOpen - : endPercent - this.percentOpen; - } - const duration = this.options.outDuration; - this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad - // to - this.el.style.transform = 'translateX(' + (endPercent * 100) + '%)'; - setTimeout(() => { - if (typeof this.options.onCloseEnd === 'function') - this.options.onCloseEnd.call(this, this.el); - }, duration); - } - _animateOverlayIn() { - let start = 0; - if (this.isDragged) - start = this.percentOpen; - else - this._overlay.style.display = 'block'; - // Animation - const duration = this.options.inDuration; - // from - this._overlay.style.transition = 'none'; - this._overlay.style.opacity = start.toString(); - // easeOutQuad - setTimeout(() => { - this._overlay.style.transition = `opacity ${duration}ms ease`; - // to - this._overlay.style.opacity = '1'; - }, 1); - } - _animateOverlayOut() { - const duration = this.options.outDuration; - // easeOutQuad - this._overlay.style.transition = `opacity ${duration}ms ease`; - // to - this._overlay.style.opacity = '0'; - setTimeout(() => { - this._overlay.style.display = 'none'; - }, duration); - } - static { - Sidenav._sidenavs = []; - } - } - - let _defaults$7 = { - duration: 300, - onShow: null, - swipeable: false, - responsiveThreshold: Infinity // breakpoint for swipeable - }; - class Tabs extends Component { - _tabLinks; - _index; - _indicator; - _tabWidth; - _tabsWidth; - _tabsCarousel; - _activeTabLink; - _content; - constructor(el, options) { - super(el, options, Tabs); - this.el.M_Tabs = this; - this.options = { - ...Tabs.defaults, - ...options - }; - this._tabLinks = this.el.querySelectorAll('li.tab > a'); - this._index = 0; - this._setupActiveTabLink(); - if (this.options.swipeable) { - this._setupSwipeableTabs(); - } - else { - this._setupNormalTabs(); - } - // Setup tabs indicator after content to ensure accurate widths - this._setTabsAndTabWidth(); - this._createIndicator(); - this._setupEventHandlers(); - } - static get defaults() { - return _defaults$7; - } - /** - * Initializes instances of Tabs. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, Tabs); - } - static getInstance(el) { - return el.M_Tabs; - } - destroy() { - this._removeEventHandlers(); - this._indicator.parentNode.removeChild(this._indicator); - if (this.options.swipeable) { - this._teardownSwipeableTabs(); - } - else { - this._teardownNormalTabs(); - } - this.el.M_Tabs = undefined; - } - /** - * The index of tab that is currently shown. - */ - get index() { return this._index; } - _setupEventHandlers() { - window.addEventListener('resize', this._handleWindowResize); - this.el.addEventListener('click', this._handleTabClick); - } - _removeEventHandlers() { - window.removeEventListener('resize', this._handleWindowResize); - this.el.removeEventListener('click', this._handleTabClick); - } - _handleWindowResize = () => { - this._setTabsAndTabWidth(); - if (this._tabWidth !== 0 && this._tabsWidth !== 0) { - this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px'; - this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px'; - } - }; - _handleTabClick = (e) => { - const tabLink = e.target; - const tab = tabLink.parentElement; - // Handle click on tab link only - if (!tabLink || !tab.classList.contains('tab')) - return; - // is disabled? - if (tab.classList.contains('disabled')) { - e.preventDefault(); - return; - } - // Act as regular link if target attribute is specified. - if (tabLink.hasAttribute('target')) - return; - // Make the old tab inactive. - this._activeTabLink.classList.remove('active'); - const _oldContent = this._content; - // Update the variables with the new link and content - this._activeTabLink = tabLink; - if (tabLink.hash) - this._content = document.querySelector(tabLink.hash); - this._tabLinks = this.el.querySelectorAll('li.tab > a'); - // Make the tab active - this._activeTabLink.classList.add('active'); - const prevIndex = this._index; - this._index = Math.max(Array.from(this._tabLinks).indexOf(tabLink), 0); - // Swap content - if (this.options.swipeable) { - if (this._tabsCarousel) { - this._tabsCarousel.set(this._index, () => { - if (typeof this.options.onShow === 'function') - this.options.onShow.call(this, this._content); - }); - } - } - else { - if (this._content) { - this._content.style.display = 'block'; - this._content.classList.add('active'); - if (typeof this.options.onShow === 'function') - this.options.onShow.call(this, this._content); - if (_oldContent && _oldContent !== this._content) { - _oldContent.style.display = 'none'; - _oldContent.classList.remove('active'); - } - } - } - // Update widths after content is swapped (scrollbar bugfix) - this._setTabsAndTabWidth(); - this._animateIndicator(prevIndex); - e.preventDefault(); - }; - _createIndicator() { - const indicator = document.createElement('li'); - indicator.classList.add('indicator'); - this.el.appendChild(indicator); - this._indicator = indicator; - this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px'; - this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px'; - } - _setupActiveTabLink() { - // If the location.hash matches one of the links, use that as the active tab. - this._activeTabLink = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === location.hash); - // If no match is found, use the first link or any with class 'active' as the initial active tab. - if (!this._activeTabLink) { - this._activeTabLink = this.el.querySelector('li.tab a.active'); - } - if (this._activeTabLink.length === 0) { - this._activeTabLink = this.el.querySelector('li.tab a'); - } - Array.from(this._tabLinks).forEach((a) => a.classList.remove('active')); - this._activeTabLink.classList.add('active'); - this._index = Math.max(Array.from(this._tabLinks).indexOf(this._activeTabLink), 0); - if (this._activeTabLink && this._activeTabLink.hash) { - this._content = document.querySelector(this._activeTabLink.hash); - if (this._content) - this._content.classList.add('active'); - } - } - _setupSwipeableTabs() { - // Change swipeable according to responsive threshold - if (window.innerWidth > this.options.responsiveThreshold) - this.options.swipeable = false; - const tabsContent = []; - this._tabLinks.forEach(a => { - if (a.hash) { - const currContent = document.querySelector(a.hash); - currContent.classList.add('carousel-item'); - tabsContent.push(currContent); - } - }); - // Create Carousel-Wrapper around Tab-Contents - const tabsWrapper = document.createElement('div'); - tabsWrapper.classList.add('tabs-content', 'carousel', 'carousel-slider'); - // Wrap around - tabsContent[0].parentElement.insertBefore(tabsWrapper, tabsContent[0]); - tabsContent.forEach(tabContent => { - tabsWrapper.appendChild(tabContent); - tabContent.style.display = ''; - }); - // Keep active tab index to set initial carousel slide - const tab = this._activeTabLink.parentElement; - const activeTabIndex = Array.from(tab.parentNode.children).indexOf(tab); - this._tabsCarousel = Carousel.init(tabsWrapper, { - fullWidth: true, - noWrap: true, - onCycleTo: (item) => { - const prevIndex = this._index; - this._index = Array.from(item.parentNode.children).indexOf(item); - this._activeTabLink.classList.remove('active'); - this._activeTabLink = Array.from(this._tabLinks)[this._index]; - this._activeTabLink.classList.add('active'); - this._animateIndicator(prevIndex); - if (typeof this.options.onShow === 'function') - this.options.onShow.call(this, this._content); - } - }); - // Set initial carousel slide to active tab - this._tabsCarousel.set(activeTabIndex); - } - _teardownSwipeableTabs() { - const tabsWrapper = this._tabsCarousel.el; - this._tabsCarousel.destroy(); - // Unwrap - tabsWrapper.after(tabsWrapper.children); - tabsWrapper.remove(); - } - _setupNormalTabs() { - // Hide Tabs Content - Array.from(this._tabLinks).forEach((a) => { - if (a === this._activeTabLink) - return; - if (a.hash) { - const currContent = document.querySelector(a.hash); - if (currContent) - currContent.style.display = 'none'; - } - }); - } - _teardownNormalTabs() { - // show Tabs Content - this._tabLinks.forEach((a) => { - if (a.hash) { - const currContent = document.querySelector(a.hash); - if (currContent) - currContent.style.display = ''; - } - }); - } - _setTabsAndTabWidth() { - this._tabsWidth = this.el.getBoundingClientRect().width; - this._tabWidth = Math.max(this._tabsWidth, this.el.scrollWidth) / this._tabLinks.length; - } - _calcRightPos(el) { - return Math.ceil(this._tabsWidth - el.offsetLeft - el.getBoundingClientRect().width); - } - _calcLeftPos(el) { - return Math.floor(el.offsetLeft); - } - /** - * Recalculate tab indicator position. This is useful when - * the indicator position is not correct. - */ - updateTabIndicator() { - this._setTabsAndTabWidth(); - this._animateIndicator(this._index); - } - _animateIndicator(prevIndex) { - let leftDelay = 0, rightDelay = 0; - const isMovingLeftOrStaying = (this._index - prevIndex >= 0); - if (isMovingLeftOrStaying) - leftDelay = 90; - else - rightDelay = 90; - // in v1: easeOutQuad - this._indicator.style.transition = ` - left ${this.options.duration}ms ease-out ${leftDelay}ms, - right ${this.options.duration}ms ease-out ${rightDelay}ms`; - this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px'; - this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px'; - } - /** - * Show tab content that corresponds to the tab with the id. - * @param tabId The id of the tab that you want to switch to. - */ - select(tabId) { - const tab = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === '#' + tabId); - if (tab) - tab.click(); - } - } - - let _defaults$6 = { - onOpen: null, - onClose: null - }; - class TapTarget extends Component { - /** - * If the tap target is open. - */ - isOpen; - wrapper; - _origin; - originEl; - waveEl; - contentEl; - constructor(el, options) { - super(el, options, TapTarget); - this.el.M_TapTarget = this; - this.options = { - ...TapTarget.defaults, - ...options - }; - this.isOpen = false; - // setup - this._origin = document.querySelector(`#${el.dataset.target}`); - this._setup(); - this._calculatePositioning(); - this._setupEventHandlers(); - } - static get defaults() { - return _defaults$6; - } - /** - * Initializes instances of TapTarget. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, TapTarget); - } - static getInstance(el) { - return el.M_TapTarget; - } - destroy() { - this._removeEventHandlers(); - this.el.TapTarget = undefined; - } - _setupEventHandlers() { - this.el.addEventListener('click', this._handleTargetClick); - this.originEl.addEventListener('click', this._handleOriginClick); - // Resize - window.addEventListener('resize', this._handleThrottledResize); - } - _removeEventHandlers() { - this.el.removeEventListener('click', this._handleTargetClick); - this.originEl.removeEventListener('click', this._handleOriginClick); - window.removeEventListener('resize', this._handleThrottledResize); - } - _handleThrottledResize = Utils.throttle(function () { this._handleResize(); }, 200).bind(this); - _handleTargetClick = () => { - this.open(); - }; - _handleOriginClick = () => { - this.close(); - }; - _handleResize = () => { - this._calculatePositioning(); - }; - _handleDocumentClick = (e) => { - if (!e.target.closest('.tap-target-wrapper')) { - this.close(); - e.preventDefault(); - e.stopPropagation(); - } - }; - _setup() { - // Creating tap target - this.wrapper = this.el.parentElement; - this.waveEl = this.wrapper.querySelector('.tap-target-wave'); - this.originEl = this.wrapper.querySelector('.tap-target-origin'); - this.contentEl = this.el.querySelector('.tap-target-content'); - // Creating wrapper - if (!this.wrapper.classList.contains('.tap-target-wrapper')) { - this.wrapper = document.createElement('div'); - this.wrapper.classList.add('tap-target-wrapper'); - this.el.before(this.wrapper); - this.wrapper.append(this.el); - } - // Creating content - if (!this.contentEl) { - this.contentEl = document.createElement('div'); - this.contentEl.classList.add('tap-target-content'); - this.el.append(this.contentEl); - } - // Creating foreground wave - if (!this.waveEl) { - this.waveEl = document.createElement('div'); - this.waveEl.classList.add('tap-target-wave'); - // Creating origin - if (!this.originEl) { - this.originEl = this._origin.cloneNode(true); // .clone(true, true); - this.originEl.classList.add('tap-target-origin'); - this.originEl.removeAttribute('id'); - this.originEl.removeAttribute('style'); - this.waveEl.append(this.originEl); - } - this.wrapper.append(this.waveEl); - } - } - _offset(el) { - const box = el.getBoundingClientRect(); - const docElem = document.documentElement; - return { - top: box.top + window.pageYOffset - docElem.clientTop, - left: box.left + window.pageXOffset - docElem.clientLeft - }; - } - _calculatePositioning() { - // Element or parent is fixed position? - let isFixed = getComputedStyle(this._origin).position === 'fixed'; - if (!isFixed) { - let currentElem = this._origin; - const parents = []; - while ((currentElem = currentElem.parentNode) && currentElem !== document) - parents.push(currentElem); - for (let i = 0; i < parents.length; i++) { - isFixed = getComputedStyle(parents[i]).position === 'fixed'; - if (isFixed) - break; - } - } - // Calculating origin - const originWidth = this._origin.offsetWidth; - const originHeight = this._origin.offsetHeight; - const originTop = isFixed ? this._offset(this._origin).top - Utils.getDocumentScrollTop() : this._offset(this._origin).top; - const originLeft = isFixed ? this._offset(this._origin).left - Utils.getDocumentScrollLeft() : this._offset(this._origin).left; - // Calculating screen - const windowWidth = window.innerWidth; - const windowHeight = window.innerHeight; - const scrollBarWidth = windowWidth - document.documentElement.clientWidth; - const centerX = windowWidth / 2; - const centerY = windowHeight / 2; - const isLeft = originLeft <= centerX; - const isRight = originLeft > centerX; - const isTop = originTop <= centerY; - const isBottom = originTop > centerY; - const isCenterX = originLeft >= windowWidth * 0.25 && originLeft <= windowWidth * 0.75; - // Calculating tap target - const tapTargetWidth = this.el.offsetWidth; - const tapTargetHeight = this.el.offsetHeight; - const tapTargetTop = originTop + originHeight / 2 - tapTargetHeight / 2; - const tapTargetLeft = originLeft + originWidth / 2 - tapTargetWidth / 2; - const tapTargetPosition = isFixed ? 'fixed' : 'absolute'; - // Calculating content - const tapTargetTextWidth = isCenterX ? tapTargetWidth : tapTargetWidth / 2 + originWidth; - const tapTargetTextHeight = tapTargetHeight / 2; - const tapTargetTextTop = isTop ? tapTargetHeight / 2 : 0; - const tapTargetTextBottom = 0; - const tapTargetTextLeft = isLeft && !isCenterX ? tapTargetWidth / 2 - originWidth : 0; - const tapTargetTextRight = 0; - const tapTargetTextPadding = originWidth; - const tapTargetTextAlign = isBottom ? 'bottom' : 'top'; - // Calculating wave - const tapTargetWaveWidth = originWidth > originHeight ? originWidth * 2 : originWidth * 2; - const tapTargetWaveHeight = tapTargetWaveWidth; - const tapTargetWaveTop = tapTargetHeight / 2 - tapTargetWaveHeight / 2; - const tapTargetWaveLeft = tapTargetWidth / 2 - tapTargetWaveWidth / 2; - // Setting tap target - this.wrapper.style.top = isTop ? tapTargetTop + 'px' : ''; - this.wrapper.style.right = isRight ? windowWidth - tapTargetLeft - tapTargetWidth - scrollBarWidth + 'px' : ''; - this.wrapper.style.bottom = isBottom ? windowHeight - tapTargetTop - tapTargetHeight + 'px' : ''; - this.wrapper.style.left = isLeft ? tapTargetLeft + 'px' : ''; - this.wrapper.style.position = tapTargetPosition; - // Setting content - this.contentEl.style.width = tapTargetTextWidth + 'px'; - this.contentEl.style.height = tapTargetTextHeight + 'px'; - this.contentEl.style.top = tapTargetTextTop + 'px'; - this.contentEl.style.right = tapTargetTextRight + 'px'; - this.contentEl.style.bottom = tapTargetTextBottom + 'px'; - this.contentEl.style.left = tapTargetTextLeft + 'px'; - this.contentEl.style.padding = tapTargetTextPadding + 'px'; - this.contentEl.style.verticalAlign = tapTargetTextAlign; - // Setting wave - this.waveEl.style.top = tapTargetWaveTop + 'px'; - this.waveEl.style.left = tapTargetWaveLeft + 'px'; - this.waveEl.style.width = tapTargetWaveWidth + 'px'; - this.waveEl.style.height = tapTargetWaveHeight + 'px'; - } - /** - * Open Tap Target. - */ - open = () => { - if (this.isOpen) - return; - // onOpen callback - if (typeof this.options.onOpen === 'function') { - this.options.onOpen.call(this, this._origin); - } - this.isOpen = true; - this.wrapper.classList.add('open'); - document.body.addEventListener('click', this._handleDocumentClick, true); - document.body.addEventListener('touchend', this._handleDocumentClick); - }; - /** - * Close Tap Target. - */ - close = () => { - if (!this.isOpen) - return; - // onClose callback - if (typeof this.options.onClose === 'function') { - this.options.onClose.call(this, this._origin); - } - this.isOpen = false; - this.wrapper.classList.remove('open'); - document.body.removeEventListener('click', this._handleDocumentClick, true); - document.body.removeEventListener('touchend', this._handleDocumentClick); - }; - } - - let _defaults$5 = { - dialRadius: 135, - outerRadius: 105, - innerRadius: 70, - tickRadius: 20, - duration: 350, - container: null, - defaultTime: 'now', // default time, 'now' or '13:14' e.g. - fromNow: 0, // Millisecond offset from the defaultTime - showClearBtn: false, - // internationalization - i18n: { - cancel: 'Cancel', - clear: 'Clear', - done: 'Ok' - }, - autoClose: false, // auto close when minute is selected - twelveHour: true, // change to 12 hour AM/PM clock from 24 hour - vibrate: true, // vibrate the device when dragging clock hand - // Callbacks - onOpenStart: null, - onOpenEnd: null, - onCloseStart: null, - onCloseEnd: null, - onSelect: null - }; - class Timepicker extends Component { - id; - modal; - modalEl; - plate; - digitalClock; - inputHours; - inputMinutes; - x0; - y0; - moved; - dx; - dy; - /** - * Current view on the timepicker. - * @default 'hours' - */ - currentView; - hand; - minutesView; - hours; - minutes; - /** The selected time. */ - time; - /** - * If the time is AM or PM on twelve-hour clock. - * @default 'PM' - */ - amOrPm; - static _template; - /** If the picker is open. */ - isOpen; - /** Vibrate device when dragging clock hand. */ - vibrate; - _canvas; - hoursView; - spanAmPm; - footer; - _amBtn; - _pmBtn; - bg; - bearing; - g; - toggleViewTimer; - canvas; - vibrateTimer; - constructor(el, options) { - super(el, options, Timepicker); - this.el.M_Timepicker = this; - this.options = { - ...Timepicker.defaults, - ...options - }; - this.id = Utils.guid(); - this._insertHTMLIntoDOM(); - this._setupModal(); - this._setupVariables(); - this._setupEventHandlers(); - this._clockSetup(); - this._pickerSetup(); - } - static get defaults() { - return _defaults$5; - } - /** - * Initializes instances of Timepicker. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, Timepicker); - } - static _addLeadingZero(num) { - return (num < 10 ? '0' : '') + num; - } - static _createSVGEl(name) { - let svgNS = 'http://www.w3.org/2000/svg'; - return document.createElementNS(svgNS, name); - } - static _Pos(e) { - if (e.type.startsWith("touch") && e.targetTouches.length >= 1) { - return { x: e.targetTouches[0].clientX, y: e.targetTouches[0].clientY }; - } - // mouse event - return { x: e.clientX, y: e.clientY }; - } - static getInstance(el) { - return el.M_Timepicker; - } - destroy() { - this._removeEventHandlers(); - this.modal.destroy(); - this.modalEl.remove(); - this.el.M_Timepicker = undefined; - } - _setupEventHandlers() { - this.el.addEventListener('click', this._handleInputClick); - this.el.addEventListener('keydown', this._handleInputKeydown); - this.plate.addEventListener('mousedown', this._handleClockClickStart); - this.plate.addEventListener('touchstart', this._handleClockClickStart); - this.digitalClock.addEventListener('keyup', this._inputFromTextField); - this.inputHours.addEventListener('click', () => this.showView('hours')); - this.inputMinutes.addEventListener('click', () => this.showView('minutes')); - } - _removeEventHandlers() { - this.el.removeEventListener('click', this._handleInputClick); - this.el.removeEventListener('keydown', this._handleInputKeydown); - } - _handleInputClick = () => { - this.open(); - }; - _handleInputKeydown = (e) => { - if (Utils.keys.ENTER.includes(e.key)) { - e.preventDefault(); - this.open(); - } - }; - _handleTimeInputEnterKey = (e) => { - if (Utils.keys.ENTER.includes(e.key)) { - e.preventDefault(); - this._inputFromTextField(); - } - }; - _handleClockClickStart = (e) => { - e.preventDefault(); - let clockPlateBR = this.plate.getBoundingClientRect(); - let offset = { x: clockPlateBR.left, y: clockPlateBR.top }; - this.x0 = offset.x + this.options.dialRadius; - this.y0 = offset.y + this.options.dialRadius; - this.moved = false; - let clickPos = Timepicker._Pos(e); - this.dx = clickPos.x - this.x0; - this.dy = clickPos.y - this.y0; - // Set clock hands - this.setHand(this.dx, this.dy, false); - // Mousemove on document - document.addEventListener('mousemove', this._handleDocumentClickMove); - document.addEventListener('touchmove', this._handleDocumentClickMove); - // Mouseup on document - document.addEventListener('mouseup', this._handleDocumentClickEnd); - document.addEventListener('touchend', this._handleDocumentClickEnd); - }; - _handleDocumentClickMove = (e) => { - e.preventDefault(); - let clickPos = Timepicker._Pos(e); - let x = clickPos.x - this.x0; - let y = clickPos.y - this.y0; - this.moved = true; - this.setHand(x, y, false); - }; - _handleDocumentClickEnd = (e) => { - e.preventDefault(); - document.removeEventListener('mouseup', this._handleDocumentClickEnd); - document.removeEventListener('touchend', this._handleDocumentClickEnd); - let clickPos = Timepicker._Pos(e); - let x = clickPos.x - this.x0; - let y = clickPos.y - this.y0; - if (this.moved && x === this.dx && y === this.dy) { - this.setHand(x, y); - } - if (this.currentView === 'hours') { - this.showView('minutes', this.options.duration / 2); - } - else if (this.options.autoClose) { - this.minutesView.classList.add('timepicker-dial-out'); - setTimeout(() => { - this.done(); - }, this.options.duration / 2); - } - if (typeof this.options.onSelect === 'function') { - this.options.onSelect.call(this, this.hours, this.minutes); - } - // Unbind mousemove event - document.removeEventListener('mousemove', this._handleDocumentClickMove); - document.removeEventListener('touchmove', this._handleDocumentClickMove); - }; - _insertHTMLIntoDOM() { - const template = document.createElement('template'); - template.innerHTML = Timepicker._template.trim(); - this.modalEl = template.content.firstChild; - this.modalEl.id = 'modal-' + this.id; - // Append popover to input by default - const optEl = this.options.container; - const containerEl = optEl instanceof HTMLElement ? optEl : document.querySelector(optEl); - if (this.options.container && !!containerEl) { - containerEl.append(this.modalEl); - } - else { - this.el.parentElement.appendChild(this.modalEl); - } - } - _setupModal() { - this.modal = Modal.init(this.modalEl, { - onOpenStart: this.options.onOpenStart, - onOpenEnd: this.options.onOpenEnd, - onCloseStart: this.options.onCloseStart, - onCloseEnd: () => { - if (typeof this.options.onCloseEnd === 'function') { - this.options.onCloseEnd.call(this); - } - this.isOpen = false; - } - }); - } - _setupVariables() { - this.currentView = 'hours'; - this.vibrate = navigator.vibrate - ? 'vibrate' - : navigator.webkitVibrate - ? 'webkitVibrate' - : null; - this._canvas = this.modalEl.querySelector('.timepicker-canvas'); - this.plate = this.modalEl.querySelector('.timepicker-plate'); - this.digitalClock = this.modalEl.querySelector('.timepicker-display-column'); - this.hoursView = this.modalEl.querySelector('.timepicker-hours'); - this.minutesView = this.modalEl.querySelector('.timepicker-minutes'); - this.inputHours = this.modalEl.querySelector('.timepicker-input-hours'); - this.inputMinutes = this.modalEl.querySelector('.timepicker-input-minutes'); - this.spanAmPm = this.modalEl.querySelector('.timepicker-span-am-pm'); - this.footer = this.modalEl.querySelector('.timepicker-footer'); - this.amOrPm = 'PM'; - } - _createButton(text, visibility) { - const button = document.createElement('button'); - button.classList.add('btn-flat', 'waves-effect'); - button.style.visibility = visibility; - button.type = 'button'; - button.tabIndex = this.options.twelveHour ? 3 : 1; - button.innerText = text; - return button; - } - _pickerSetup() { - const clearButton = this._createButton(this.options.i18n.clear, this.options.showClearBtn ? '' : 'hidden'); - clearButton.classList.add('timepicker-clear'); - clearButton.addEventListener('click', this.clear); - this.footer.appendChild(clearButton); - const confirmationBtnsContainer = document.createElement('div'); - confirmationBtnsContainer.classList.add('confirmation-btns'); - this.footer.append(confirmationBtnsContainer); - const cancelButton = this._createButton(this.options.i18n.cancel, ''); - cancelButton.classList.add('timepicker-close'); - cancelButton.addEventListener('click', this.close); - confirmationBtnsContainer.appendChild(cancelButton); - const doneButton = this._createButton(this.options.i18n.done, ''); - doneButton.classList.add('timepicker-close'); - doneButton.addEventListener('click', this.done); - confirmationBtnsContainer.appendChild(doneButton); - } - _clockSetup() { - if (this.options.twelveHour) { - // AM Button - this._amBtn = document.createElement('div'); - this._amBtn.classList.add('am-btn'); - this._amBtn.innerText = 'AM'; - this._amBtn.addEventListener('click', this._handleAmPmClick); - this.spanAmPm.appendChild(this._amBtn); - // PM Button - this._pmBtn = document.createElement('div'); - this._pmBtn.classList.add('pm-btn'); - this._pmBtn.innerText = 'PM'; - this._pmBtn.addEventListener('click', this._handleAmPmClick); - this.spanAmPm.appendChild(this._pmBtn); - } - this._buildHoursView(); - this._buildMinutesView(); - this._buildSVGClock(); - } - _buildSVGClock() { - // Draw clock hands and others - let dialRadius = this.options.dialRadius; - let tickRadius = this.options.tickRadius; - let diameter = dialRadius * 2; - let svg = Timepicker._createSVGEl('svg'); - svg.setAttribute('class', 'timepicker-svg'); - svg.setAttribute('width', diameter.toString()); - svg.setAttribute('height', diameter.toString()); - let g = Timepicker._createSVGEl('g'); - g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')'); - let bearing = Timepicker._createSVGEl('circle'); - bearing.setAttribute('class', 'timepicker-canvas-bearing'); - bearing.setAttribute('cx', '0'); - bearing.setAttribute('cy', '0'); - bearing.setAttribute('r', '4'); - let hand = Timepicker._createSVGEl('line'); - hand.setAttribute('x1', '0'); - hand.setAttribute('y1', '0'); - let bg = Timepicker._createSVGEl('circle'); - bg.setAttribute('class', 'timepicker-canvas-bg'); - bg.setAttribute('r', tickRadius.toString()); - g.appendChild(hand); - g.appendChild(bg); - g.appendChild(bearing); - svg.appendChild(g); - this._canvas.appendChild(svg); - this.hand = hand; - this.bg = bg; - this.bearing = bearing; - this.g = g; - } - _buildHoursView() { - const $tick = document.createElement('div'); - $tick.classList.add('timepicker-tick'); - // Hours view - if (this.options.twelveHour) { - for (let i = 1; i < 13; i += 1) { - const tick = $tick.cloneNode(true); - const radian = (i / 6) * Math.PI; - const radius = this.options.outerRadius; - tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px'; - tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px'; - tick.innerHTML = i === 0 ? '00' : i.toString(); - this.hoursView.appendChild(tick); - // tick.on(mousedownEvent, mousedown); - } - } - else { - for (let i = 0; i < 24; i += 1) { - const tick = $tick.cloneNode(true); - const radian = (i / 6) * Math.PI; - const inner = i > 0 && i < 13; - const radius = inner ? this.options.innerRadius : this.options.outerRadius; - tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px'; - tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px'; - tick.innerHTML = i === 0 ? '00' : i.toString(); - this.hoursView.appendChild(tick); - // tick.on(mousedownEvent, mousedown); - } - } - } - _buildMinutesView() { - const _tick = document.createElement('div'); - _tick.classList.add('timepicker-tick'); - // Minutes view - for (let i = 0; i < 60; i += 5) { - const tick = _tick.cloneNode(true); - const radian = (i / 30) * Math.PI; - tick.style.left = - this.options.dialRadius + - Math.sin(radian) * this.options.outerRadius - - this.options.tickRadius + - 'px'; - tick.style.top = - this.options.dialRadius - - Math.cos(radian) * this.options.outerRadius - - this.options.tickRadius + - 'px'; - tick.innerHTML = Timepicker._addLeadingZero(i); - this.minutesView.appendChild(tick); - } - } - _handleAmPmClick = (e) => { - const btnClicked = e.target; - this.amOrPm = btnClicked.classList.contains('am-btn') ? 'AM' : 'PM'; - this._updateAmPmView(); - }; - _updateAmPmView() { - if (this.options.twelveHour) { - if (this.amOrPm === 'PM') { - this._amBtn.classList.remove('text-primary'); - this._pmBtn.classList.add('text-primary'); - } - else if (this.amOrPm === 'AM') { - this._amBtn.classList.add('text-primary'); - this._pmBtn.classList.remove('text-primary'); - } - } - } - _updateTimeFromInput() { - // Get the time - let value = ((this.el.value || this.options.defaultTime || '') + '').split(':'); - if (this.options.twelveHour && !(typeof value[1] === 'undefined')) { - if (value[1].toUpperCase().indexOf('AM') > 0) { - this.amOrPm = 'AM'; - } - else { - this.amOrPm = 'PM'; - } - value[1] = value[1].replace('AM', '').replace('PM', ''); - } - if (value[0] === 'now') { - let now = new Date(+new Date() + this.options.fromNow); - value = [now.getHours().toString(), now.getMinutes().toString()]; - if (this.options.twelveHour) { - this.amOrPm = parseInt(value[0]) >= 12 && parseInt(value[0]) < 24 ? 'PM' : 'AM'; - } - } - this.hours = +value[0] || 0; - this.minutes = +value[1] || 0; - this.inputHours.value = this.hours; - this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes); - this._updateAmPmView(); - } - /** - * Show hours or minutes view on timepicker. - * @param view The name of the view you want to switch to, 'hours' or 'minutes'. - */ - showView = (view, delay = null) => { - if (view === 'minutes' && getComputedStyle(this.hoursView).visibility === 'visible') ; - let isHours = view === 'hours', nextView = isHours ? this.hoursView : this.minutesView, hideView = isHours ? this.minutesView : this.hoursView; - this.currentView = view; - if (isHours) { - this.inputHours.classList.add('text-primary'); - this.inputMinutes.classList.remove('text-primary'); - } - else { - this.inputHours.classList.remove('text-primary'); - this.inputMinutes.classList.add('text-primary'); - } - // Transition view - hideView.classList.add('timepicker-dial-out'); - nextView.style.visibility = 'visible'; - nextView.classList.remove('timepicker-dial-out'); - // Reset clock hand - this.resetClock(delay); - // After transitions ended - clearTimeout(this.toggleViewTimer); - this.toggleViewTimer = setTimeout(() => { - hideView.style.visibility = 'hidden'; - }, this.options.duration); - }; - resetClock(delay) { - let view = this.currentView, value = this[view], isHours = view === 'hours', unit = Math.PI / (isHours ? 6 : 30), radian = value * unit, radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius, x = Math.sin(radian) * radius, y = -Math.cos(radian) * radius, self = this; - if (delay) { - this.canvas?.classList.add('timepicker-canvas-out'); - setTimeout(() => { - self.canvas?.classList.remove('timepicker-canvas-out'); - self.setHand(x, y); - }, delay); - } - else { - this.setHand(x, y); - } - } - _inputFromTextField = () => { - const isHours = this.currentView === 'hours'; - if (isHours) { - const value = parseInt(this.inputHours.value); - if (value > 0 && value < 13) { - this.drawClockFromTimeInput(value, isHours); - this.showView('minutes', this.options.duration / 2); - this.hours = value; - this.inputMinutes.focus(); - } - else { - const hour = new Date().getHours(); - this.inputHours.value = (hour % 12).toString(); - } - } - else { - const value = parseInt(this.inputMinutes.value); - if (value >= 0 && value < 60) { - this.inputMinutes.value = Timepicker._addLeadingZero(value); - this.drawClockFromTimeInput(value, isHours); - this.minutes = value; - this.modalEl.querySelector('.confirmation-btns :nth-child(2)').focus(); - } - else { - const minutes = new Date().getMinutes(); - this.inputMinutes.value = Timepicker._addLeadingZero(minutes); - } - } - }; - drawClockFromTimeInput(value, isHours) { - const unit = Math.PI / (isHours ? 6 : 30); - const radian = value * unit; - let radius; - if (this.options.twelveHour) { - radius = this.options.outerRadius; - } - let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius; - this.hand.setAttribute('x2', cx1.toString()); - this.hand.setAttribute('y2', cy1.toString()); - this.bg.setAttribute('cx', cx2.toString()); - this.bg.setAttribute('cy', cy2.toString()); - } - setHand(x, y, roundBy5 = false) { - let radian = Math.atan2(x, -y), isHours = this.currentView === 'hours', unit = Math.PI / (isHours || roundBy5 ? 6 : 30), z = Math.sqrt(x * x + y * y), inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2, radius = inner ? this.options.innerRadius : this.options.outerRadius; - if (this.options.twelveHour) { - radius = this.options.outerRadius; - } - // Radian should in range [0, 2PI] - if (radian < 0) { - radian = Math.PI * 2 + radian; - } - // Get the round value - let value = Math.round(radian / unit); - // Get the round radian - radian = value * unit; - // Correct the hours or minutes - if (this.options.twelveHour) { - if (isHours) { - if (value === 0) - value = 12; - } - else { - if (roundBy5) - value *= 5; - if (value === 60) - value = 0; - } - } - else { - if (isHours) { - if (value === 12) { - value = 0; - } - value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12; - } - else { - if (roundBy5) { - value *= 5; - } - if (value === 60) { - value = 0; - } - } - } - // Once hours or minutes changed, vibrate the device - if (this[this.currentView] !== value) { - if (this.vibrate && this.options.vibrate) { - // Do not vibrate too frequently - if (!this.vibrateTimer) { - navigator[this.vibrate](10); - this.vibrateTimer = setTimeout(() => { - this.vibrateTimer = null; - }, 100); - } - } - } - this[this.currentView] = value; - if (isHours) { - this.inputHours.value = value.toString(); - } - else { - this.inputMinutes.value = Timepicker._addLeadingZero(value); - } - // Set clock hand and others' position - let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius; - this.hand.setAttribute('x2', cx1.toString()); - this.hand.setAttribute('y2', cy1.toString()); - this.bg.setAttribute('cx', cx2.toString()); - this.bg.setAttribute('cy', cy2.toString()); - } - /** - * Open timepicker. - */ - open = () => { - if (this.isOpen) - return; - this.isOpen = true; - this._updateTimeFromInput(); - this.showView('hours'); - this.modal.open(undefined); - }; - /** - * Close timepicker. - */ - close = () => { - if (!this.isOpen) - return; - this.isOpen = false; - this.modal.close(); - }; - done = (e = null, clearValue = null) => { - // Set input value - let last = this.el.value; - let value = clearValue - ? '' - : Timepicker._addLeadingZero(this.hours) + ':' + Timepicker._addLeadingZero(this.minutes); - this.time = value; - if (!clearValue && this.options.twelveHour) { - value = `${value} ${this.amOrPm}`; - } - this.el.value = value; - // Trigger change event - if (value !== last) { - this.el.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true })); - } - this.close(); - this.el.focus(); - }; - clear = () => { - this.done(null, true); - }; - static { - Timepicker._template = ` -
-
-
-
-
- - : - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- { - if (this.isOpen) - return; - isManual = isManual === undefined ? true : undefined; // Default value true - this.isOpen = true; - // Update tooltip content with HTML attribute options - this.options = { ...this.options, ...this._getAttributeOptions() }; - this._updateTooltipContent(); - this._setEnterDelayTimeout(isManual); - }; - /** - * Hide tooltip. - */ - close = () => { - if (!this.isOpen) - return; - this.isHovered = false; - this.isFocused = false; - this.isOpen = false; - this._setExitDelayTimeout(); - }; - _setExitDelayTimeout() { - clearTimeout(this._exitDelayTimeout); - this._exitDelayTimeout = setTimeout(() => { - if (this.isHovered || this.isFocused) - return; - this._animateOut(); - }, this.options.exitDelay); - } - _setEnterDelayTimeout(isManual) { - clearTimeout(this._enterDelayTimeout); - this._enterDelayTimeout = setTimeout(() => { - if (!this.isHovered && !this.isFocused && !isManual) - return; - this._animateIn(); - }, this.options.enterDelay); - } - _positionTooltip() { - const tooltip = this.tooltipEl; - const origin = this.el, originHeight = origin.offsetHeight, originWidth = origin.offsetWidth, tooltipHeight = tooltip.offsetHeight, tooltipWidth = tooltip.offsetWidth, margin = this.options.margin; - (this.xMovement = 0), (this.yMovement = 0); - let targetTop = origin.getBoundingClientRect().top + Utils.getDocumentScrollTop(); - let targetLeft = origin.getBoundingClientRect().left + Utils.getDocumentScrollLeft(); - if (this.options.position === 'top') { - targetTop += -tooltipHeight - margin; - targetLeft += originWidth / 2 - tooltipWidth / 2; - this.yMovement = -this.options.transitionMovement; - } - else if (this.options.position === 'right') { - targetTop += originHeight / 2 - tooltipHeight / 2; - targetLeft += originWidth + margin; - this.xMovement = this.options.transitionMovement; - } - else if (this.options.position === 'left') { - targetTop += originHeight / 2 - tooltipHeight / 2; - targetLeft += -tooltipWidth - margin; - this.xMovement = -this.options.transitionMovement; - } - else { - targetTop += originHeight + margin; - targetLeft += originWidth / 2 - tooltipWidth / 2; - this.yMovement = this.options.transitionMovement; - } - const newCoordinates = this._repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight); - tooltip.style.top = newCoordinates.y + 'px'; - tooltip.style.left = newCoordinates.x + 'px'; - } - _repositionWithinScreen(x, y, width, height) { - const scrollLeft = Utils.getDocumentScrollLeft(); - const scrollTop = Utils.getDocumentScrollTop(); - let newX = x - scrollLeft; - let newY = y - scrollTop; - const bounding = { - left: newX, - top: newY, - width: width, - height: height - }; - const offset = this.options.margin + this.options.transitionMovement; - const edges = Utils.checkWithinContainer(document.body, bounding, offset); - if (edges.left) { - newX = offset; - } - else if (edges.right) { - newX -= newX + width - window.innerWidth; - } - if (edges.top) { - newY = offset; - } - else if (edges.bottom) { - newY -= newY + height - window.innerHeight; - } - return { - x: newX + scrollLeft, - y: newY + scrollTop - }; - } - _animateIn() { - this._positionTooltip(); - this.tooltipEl.style.visibility = 'visible'; - const duration = this.options.inDuration; - // easeOutCubic - this.tooltipEl.style.transition = ` - transform ${duration}ms ease-out, - opacity ${duration}ms ease-out`; - setTimeout(() => { - this.tooltipEl.style.transform = `translateX(${this.xMovement}px) translateY(${this.yMovement}px)`; - this.tooltipEl.style.opacity = (this.options.opacity || 1).toString(); - }, 1); - } - _animateOut() { - const duration = this.options.outDuration; - // easeOutCubic - this.tooltipEl.style.transition = ` - transform ${duration}ms ease-out, - opacity ${duration}ms ease-out`; - setTimeout(() => { - this.tooltipEl.style.transform = `translateX(0px) translateY(0px)`; - this.tooltipEl.style.opacity = '0'; - }, 1); - /* - anim.remove(this.tooltipEl); - anim({ - targets: this.tooltipEl, - opacity: 0, - translateX: 0, - translateY: 0, - duration: this.options.outDuration, - easing: 'easeOutCubic' - }); - */ - } - _handleMouseEnter = () => { - this.isHovered = true; - this.isFocused = false; // Allows close of tooltip when opened by focus. - this.open(false); - }; - _handleMouseLeave = () => { - this.isHovered = false; - this.isFocused = false; // Allows close of tooltip when opened by focus. - this.close(); - }; - _handleFocus = () => { - if (Utils.tabPressed) { - this.isFocused = true; - this.open(false); - } - }; - _handleBlur = () => { - this.isFocused = false; - this.close(); - }; - _getAttributeOptions() { - let attributeOptions = {}; - const tooltipTextOption = this.el.getAttribute('data-tooltip'); - const tooltipId = this.el.getAttribute('data-tooltip-id'); - const positionOption = this.el.getAttribute('data-position'); - if (tooltipTextOption) { - attributeOptions.text = tooltipTextOption; - } - if (positionOption) { - attributeOptions.position = positionOption; - } - if (tooltipId) { - attributeOptions.tooltipId = tooltipId; - } - return attributeOptions; - } - } - - class Waves { - static _offset(el) { - const box = el.getBoundingClientRect(); - const docElem = document.documentElement; - return { - top: box.top + window.pageYOffset - docElem.clientTop, - left: box.left + window.pageXOffset - docElem.clientLeft - }; - } - // https://phoenix-dx.com/css-techniques-for-material-ripple-effect/ - static renderWaveEffect(targetElement, position = null, color = null) { - const isCentered = position === null; - const duration = 500; - let animationFrame, animationStart; - const animationStep = function (timestamp) { - if (!animationStart) { - animationStart = timestamp; - } - const frame = timestamp - animationStart; - if (frame < duration) { - const easing = (frame / duration) * (2 - (frame / duration)); - const circle = isCentered ? 'circle at 50% 50%' : `circle at ${position.x}px ${position.y}px`; - const waveColor = `rgba(${color?.r || 0}, ${color?.g || 0}, ${color?.b || 0}, ${0.3 * (1 - easing)})`; - const stop = 90 * easing + "%"; - targetElement.style.backgroundImage = "radial-gradient(" + circle + ", " + waveColor + " " + stop + ", transparent " + stop + ")"; - animationFrame = window.requestAnimationFrame(animationStep); - } - else { - targetElement.style.backgroundImage = 'none'; - window.cancelAnimationFrame(animationFrame); - } - }; - animationFrame = window.requestAnimationFrame(animationStep); - } - static Init() { - if (typeof document !== 'undefined') - document?.addEventListener("DOMContentLoaded", () => { - document.body.addEventListener('click', e => { - const trigger = e.target; - const el = trigger.closest('.waves-effect'); - if (el && el.contains(trigger)) { - const isCircular = el.classList.contains('waves-circle'); - const x = e.pageX - Waves._offset(el).left; - const y = e.pageY - Waves._offset(el).top; - let color = null; - if (el.classList.contains('waves-light')) - color = { r: 255, g: 255, b: 255 }; - Waves.renderWaveEffect(el, isCircular ? null : { x, y }, color); - } - }); - }); - } - } - - const _defaults$3 = {}; - // TODO: !!!!! - class Range extends Component { - _mousedown; - value; - thumb; - constructor(el, options) { - super(el, options, Range); - this.el.M_Range = this; - this.options = { - ...Range.defaults, - ...options - }; - this._mousedown = false; - this._setupThumb(); - this._setupEventHandlers(); - } - static get defaults() { - return _defaults$3; - } - /** - * Initializes instances of Range. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, Range); - } - static getInstance(el) { - return el.M_Range; - } - destroy() { - this._removeEventHandlers(); - this._removeThumb(); - this.el.M_Range = undefined; - } - _setupEventHandlers() { - this.el.addEventListener('change', this._handleRangeChange); - this.el.addEventListener('mousedown', this._handleRangeMousedownTouchstart); - this.el.addEventListener('touchstart', this._handleRangeMousedownTouchstart); - this.el.addEventListener('input', this._handleRangeInputMousemoveTouchmove); - this.el.addEventListener('mousemove', this._handleRangeInputMousemoveTouchmove); - this.el.addEventListener('touchmove', this._handleRangeInputMousemoveTouchmove); - this.el.addEventListener('mouseup', this._handleRangeMouseupTouchend); - this.el.addEventListener('touchend', this._handleRangeMouseupTouchend); - this.el.addEventListener('blur', this._handleRangeBlurMouseoutTouchleave); - this.el.addEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave); - this.el.addEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave); - } - _removeEventHandlers() { - this.el.removeEventListener('change', this._handleRangeChange); - this.el.removeEventListener('mousedown', this._handleRangeMousedownTouchstart); - this.el.removeEventListener('touchstart', this._handleRangeMousedownTouchstart); - this.el.removeEventListener('input', this._handleRangeInputMousemoveTouchmove); - this.el.removeEventListener('mousemove', this._handleRangeInputMousemoveTouchmove); - this.el.removeEventListener('touchmove', this._handleRangeInputMousemoveTouchmove); - this.el.removeEventListener('mouseup', this._handleRangeMouseupTouchend); - this.el.removeEventListener('touchend', this._handleRangeMouseupTouchend); - this.el.removeEventListener('blur', this._handleRangeBlurMouseoutTouchleave); - this.el.removeEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave); - this.el.removeEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave); - } - _handleRangeChange = () => { - this.value.innerHTML = this.el.value; - if (!this.thumb.classList.contains('active')) { - this._showRangeBubble(); - } - const offsetLeft = this._calcRangeOffset(); - this.thumb.classList.add('active'); - this.thumb.style.left = offsetLeft + 'px'; - }; - _handleRangeMousedownTouchstart = (e) => { - // Set indicator value - this.value.innerHTML = this.el.value; - this._mousedown = true; - this.el.classList.add('active'); - if (!this.thumb.classList.contains('active')) { - this._showRangeBubble(); - } - if (e.type !== 'input') { - const offsetLeft = this._calcRangeOffset(); - this.thumb.classList.add('active'); - this.thumb.style.left = offsetLeft + 'px'; - } - }; - _handleRangeInputMousemoveTouchmove = () => { - if (this._mousedown) { - if (!this.thumb.classList.contains('active')) { - this._showRangeBubble(); - } - const offsetLeft = this._calcRangeOffset(); - this.thumb.classList.add('active'); - this.thumb.style.left = offsetLeft + 'px'; - this.value.innerHTML = this.el.value; - } - }; - _handleRangeMouseupTouchend = () => { - this._mousedown = false; - this.el.classList.remove('active'); - }; - _handleRangeBlurMouseoutTouchleave = () => { - if (!this._mousedown) { - const paddingLeft = parseInt(getComputedStyle(this.el).paddingLeft); - const marginLeftText = 7 + paddingLeft + 'px'; - if (this.thumb.classList.contains('active')) { - const duration = 100; - // from - this.thumb.style.transition = 'none'; - setTimeout(() => { - this.thumb.style.transition = ` - height ${duration}ms ease, - width ${duration}ms ease, - top ${duration}ms ease, - margin ${duration}ms ease - `; - // to - this.thumb.style.height = '0'; - this.thumb.style.width = '0'; - this.thumb.style.top = '0'; - this.thumb.style.marginLeft = marginLeftText; - }, 1); - } - this.thumb.classList.remove('active'); - } - }; - _setupThumb() { - this.thumb = document.createElement('span'); - this.value = document.createElement('span'); - this.thumb.classList.add('thumb'); - this.value.classList.add('value'); - this.thumb.append(this.value); - this.el.after(this.thumb); - } - _removeThumb() { - this.thumb.remove(); - } - _showRangeBubble() { - const paddingLeft = parseInt(getComputedStyle(this.thumb.parentElement).paddingLeft); - const marginLeftText = -7 + paddingLeft + 'px'; // TODO: fix magic number? - const duration = 300; - // easeOutQuint - this.thumb.style.transition = ` - height ${duration}ms ease, - width ${duration}ms ease, - top ${duration}ms ease, - margin ${duration}ms ease - `; - // to - this.thumb.style.height = '30px'; - this.thumb.style.width = '30px'; - this.thumb.style.top = '-30px'; - this.thumb.style.marginLeft = marginLeftText; - } - _calcRangeOffset() { - const width = this.el.getBoundingClientRect().width - 15; - const max = parseFloat(this.el.getAttribute('max')) || 100; // Range default max - const min = parseFloat(this.el.getAttribute('min')) || 0; // Range default min - const percent = (parseFloat(this.el.value) - min) / (max - min); - return percent * width; - } - /** - * Initializes every range input in the current document. - */ - static Init() { - if (typeof document !== 'undefined') - Range.init((document?.querySelectorAll('input[type=range]')), {}); - } - } - - const _defaults$2 = Object.freeze({}); - class CharacterCounter extends Component { - /** Stores the reference to the counter HTML element. */ - counterEl; - /** Specifies whether the input is valid or not. */ - isInvalid; - /** Specifies whether the input text has valid length or not. */ - isValidLength; - constructor(el, options) { - super(el, {}, CharacterCounter); - this.el.M_CharacterCounter = this; - this.options = { - ...CharacterCounter.defaults, - ...options - }; - this.isInvalid = false; - this.isValidLength = false; - this._setupCounter(); - this._setupEventHandlers(); - } - static get defaults() { - return _defaults$2; - } - /** - * Initializes instances of CharacterCounter. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, CharacterCounter); - } - static getInstance(el) { - return el.M_CharacterCounter; - } - destroy() { - this._removeEventHandlers(); - this.el.CharacterCounter = undefined; - this._removeCounter(); - } - _setupEventHandlers() { - this.el.addEventListener('focus', this.updateCounter, true); - this.el.addEventListener('input', this.updateCounter, true); - } - _removeEventHandlers() { - this.el.removeEventListener('focus', this.updateCounter, true); - this.el.removeEventListener('input', this.updateCounter, true); - } - _setupCounter() { - this.counterEl = document.createElement('span'); - this.counterEl.classList.add('character-counter'); - this.counterEl.style.float = 'right'; - this.counterEl.style.fontSize = '12px'; - this.counterEl.style.height = '1'; - this.el.parentElement.appendChild(this.counterEl); - } - _removeCounter() { - this.counterEl.remove(); - } - updateCounter = () => { - let maxLength = parseInt(this.el.getAttribute('maxlength')), actualLength = this.el.value.length; - this.isValidLength = actualLength <= maxLength; - let counterString = actualLength.toString(); - if (maxLength) { - counterString += '/' + maxLength; - this._validateInput(); - } - this.counterEl.innerHTML = counterString; - }; - _validateInput() { - if (this.isValidLength && this.isInvalid) { - this.isInvalid = false; - this.el.classList.remove('invalid'); - } - else if (!this.isValidLength && !this.isInvalid) { - this.isInvalid = true; - this.el.classList.remove('valid'); - this.el.classList.add('invalid'); - } - } - } - - let _defaults$1 = { - indicators: true, - height: 400, - duration: 500, - interval: 6000, - pauseOnFocus: true, - pauseOnHover: true, - indicatorLabelFunc: null // Function which will generate a label for the indicators (ARIA) - }; - class Slider extends Component { - /** Index of current slide. */ - activeIndex; - interval; - eventPause; - _slider; - _slides; - _activeSlide; - _indicators; - _hovered; - _focused; - _focusCurrent; - _sliderId; - constructor(el, options) { - super(el, options, Slider); - this.el.M_Slider = this; - this.options = { - ...Slider.defaults, - ...options - }; - // init props - this.interval = null; - this.eventPause = false; - this._hovered = false; - this._focused = false; - this._focusCurrent = false; - // setup - this._slider = this.el.querySelector('.slides'); - this._slides = Array.from(this._slider.querySelectorAll('li')); - this.activeIndex = this._slides.findIndex(li => li.classList.contains('active')); - if (this.activeIndex !== -1) { - this._activeSlide = this._slides[this.activeIndex]; - } - this._setSliderHeight(); - // Sets element id if it does not have one - if (this._slider.hasAttribute('id')) - this._sliderId = this._slider.getAttribute('id'); - else { - this._sliderId = 'slider-' + Utils.guid(); - this._slider.setAttribute('id', this._sliderId); - } - const placeholderBase64 = 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; - // Set initial positions of captions - this._slides.forEach(slide => { - // Caption - //const caption = slide.querySelector('.caption'); - //if (caption) this._animateCaptionIn(caption, 0); - // Set Images as Background Images - const img = slide.querySelector('img'); - if (img) { - if (img.src !== placeholderBase64) { - img.style.backgroundImage = 'url(' + img.src + ')'; - img.src = placeholderBase64; - } - } - // Sets slide as focusable by code - if (!slide.hasAttribute('tabindex')) - slide.setAttribute('tabindex', '-1'); - // Removes initial visibility from "inactive" slides - slide.style.visibility = 'hidden'; - }); - this._setupIndicators(); - // Show active slide - if (this._activeSlide) { - this._activeSlide.style.display = 'block'; - this._activeSlide.style.visibility = 'visible'; - } - else { - this.activeIndex = 0; - this._slides[0].classList.add('active'); - this._slides[0].style.visibility = 'visible'; - this._activeSlide = this._slides[0]; - this._animateSlide(this._slides[0], true); - // Update indicators - if (this.options.indicators) { - this._indicators[this.activeIndex].children[0].classList.add('active'); - } - } - this._setupEventHandlers(); - // auto scroll - this.start(); - } - static get defaults() { - return _defaults$1; - } - /** - * Initializes instances of Slider. - * @param els HTML elements. - * @param options Component options. - */ - static init(els, options = {}) { - return super.init(els, options, Slider); - } - static getInstance(el) { - return el.M_Slider; - } - destroy() { - this.pause(); - this._removeIndicators(); - this._removeEventHandlers(); - this.el.M_Slider = undefined; - } - _setupEventHandlers() { - if (this.options.pauseOnFocus) { - this.el.addEventListener('focusin', this._handleAutoPauseFocus); - this.el.addEventListener('focusout', this._handleAutoStartFocus); - } - if (this.options.pauseOnHover) { - this.el.addEventListener('mouseenter', this._handleAutoPauseHover); - this.el.addEventListener('mouseleave', this._handleAutoStartHover); - } - if (this.options.indicators) { - this._indicators.forEach((el) => { - el.addEventListener('click', this._handleIndicatorClick); - }); - } - } - _removeEventHandlers() { - if (this.options.pauseOnFocus) { - this.el.removeEventListener('focusin', this._handleAutoPauseFocus); - this.el.removeEventListener('focusout', this._handleAutoStartFocus); - } - if (this.options.pauseOnHover) { - this.el.removeEventListener('mouseenter', this._handleAutoPauseHover); - this.el.removeEventListener('mouseleave', this._handleAutoStartHover); - } - if (this.options.indicators) { - this._indicators.forEach((el) => { - el.removeEventListener('click', this._handleIndicatorClick); - }); - } - } - _handleIndicatorClick = (e) => { - const el = e.target.parentElement; - const currIndex = [...el.parentNode.children].indexOf(el); - this._focusCurrent = true; - this.set(currIndex); - }; - _handleAutoPauseHover = () => { - this._hovered = true; - if (this.interval != null) { - this._pause(true); - } - }; - _handleAutoPauseFocus = () => { - this._focused = true; - if (this.interval != null) { - this._pause(true); - } - }; - _handleAutoStartHover = () => { - this._hovered = false; - if (!(this.options.pauseOnFocus && this._focused) && this.eventPause) { - this.start(); - } - }; - _handleAutoStartFocus = () => { - this._focused = false; - if (!(this.options.pauseOnHover && this._hovered) && this.eventPause) { - this.start(); - } - }; - _handleInterval = () => { - const activeElem = this._slider.querySelector('.active'); - let newActiveIndex = [...activeElem.parentNode.children].indexOf(activeElem); - if (this._slides.length === newActiveIndex + 1) - newActiveIndex = 0; // loop to start - else - newActiveIndex += 1; - this.set(newActiveIndex); - }; - _animateSlide(slide, isDirectionIn) { - let dx = 0, dy = 0; - // from - slide.style.opacity = isDirectionIn ? '0' : '1'; - setTimeout(() => { - slide.style.transition = `opacity ${this.options.duration}ms ease`; - // to - slide.style.opacity = isDirectionIn ? '1' : '0'; - }, 1); - // Caption - const caption = slide.querySelector('.caption'); - if (!caption) - return; - if (caption.classList.contains('center-align')) - dy = -100; - else if (caption.classList.contains('right-align')) - dx = 100; - else if (caption.classList.contains('left-align')) - dx = -100; - // from - caption.style.opacity = isDirectionIn ? '0' : '1'; - caption.style.transform = isDirectionIn ? `translate(${dx}px, ${dy}px)` : `translate(0, 0)`; - setTimeout(() => { - caption.style.transition = `opacity ${this.options.duration}ms ease, transform ${this.options.duration}ms ease`; - // to - caption.style.opacity = isDirectionIn ? '1' : '0'; - caption.style.transform = isDirectionIn ? `translate(0, 0)` : `translate(${dx}px, ${dy}px)`; - }, this.options.duration); // delay - } - _setSliderHeight() { - // If fullscreen, do nothing - if (!this.el.classList.contains('fullscreen')) { - if (this.options.indicators) { - // Add height if indicators are present - this.el.style.height = (this.options.height + 40) + 'px'; //.css('height', this.options.height + 40 + 'px'); - } - else { - this.el.style.height = this.options.height + 'px'; - } - this._slider.style.height = this.options.height + 'px'; - } - } - _setupIndicators() { - if (this.options.indicators) { - const ul = document.createElement('ul'); - ul.classList.add('indicators'); - const arrLi = []; - this._slides.forEach((el, i) => { - const label = this.options.indicatorLabelFunc - ? this.options.indicatorLabelFunc.call(this, i + 1, i === 0) - : `${i + 1}`; - const li = document.createElement('li'); - li.classList.add('indicator-item'); - li.innerHTML = ``; - arrLi.push(li); - ul.append(li); - }); - this.el.append(ul); - this._indicators = arrLi; - } - } - _removeIndicators() { - this.el.querySelector('ul.indicators').remove(); //find('ul.indicators').remove(); - } - set(index) { - // Wrap around indices. - if (index >= this._slides.length) - index = 0; - else if (index < 0) - index = this._slides.length - 1; - // Only do if index changes - if (this.activeIndex === index) - return; - this._activeSlide = this._slides[this.activeIndex]; - const _caption = this._activeSlide.querySelector('.caption'); - this._activeSlide.classList.remove('active'); - // Enables every slide - this._slides.forEach(slide => slide.style.visibility = 'visible'); - //--- Hide active Slide + Caption - this._activeSlide.style.opacity = '0'; - setTimeout(() => { - this._slides.forEach(slide => { - if (slide.classList.contains('active')) - return; - slide.style.opacity = '0'; - slide.style.transform = 'translate(0, 0)'; - // Disables invisible slides (for assistive technologies) - slide.style.visibility = 'hidden'; - }); - }, this.options.duration); - // Hide active Caption - //this._animateCaptionIn(_caption, this.options.duration); - _caption.style.opacity = '0'; - // Update indicators - if (this.options.indicators) { - const activeIndicator = this._indicators[this.activeIndex].children[0]; - const nextIndicator = this._indicators[index].children[0]; - activeIndicator.classList.remove('active'); - nextIndicator.classList.add('active'); - if (typeof this.options.indicatorLabelFunc === "function") { - activeIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, this.activeIndex, false); - nextIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, index, true); - } - } - //--- Show new Slide + Caption - this._animateSlide(this._slides[index], true); - this._slides[index].classList.add('active'); - this.activeIndex = index; - // Reset interval, if allowed. This check prevents autostart - // when slider is paused, since it can be changed though indicators. - if (this.interval != null) { - this.start(); - } - } - _pause(fromEvent) { - clearInterval(this.interval); - this.eventPause = fromEvent; - this.interval = null; - } - /** - * Pause slider autoslide. - */ - pause = () => { - this._pause(false); - }; - /** - * Start slider autoslide. - */ - start = () => { - clearInterval(this.interval); - this.interval = setInterval(this._handleInterval, this.options.duration + this.options.interval); - this.eventPause = false; - }; - /** - * Move to next slider. - */ - next = () => { - let newIndex = this.activeIndex + 1; - // Wrap around indices. - if (newIndex >= this._slides.length) - newIndex = 0; - else if (newIndex < 0) - newIndex = this._slides.length - 1; - this.set(newIndex); - }; - /** - * Move to prev slider. - */ - prev = () => { - let newIndex = this.activeIndex - 1; - // Wrap around indices. - if (newIndex >= this._slides.length) - newIndex = 0; - else if (newIndex < 0) - newIndex = this._slides.length - 1; - this.set(newIndex); - }; - } - - let _defaults = { - text: '', - displayLength: 4000, - inDuration: 300, - outDuration: 375, - classes: '', - completeCallback: null, - activationPercent: 0.8 - }; - class Toast { - /** The toast element. */ - el; - /** - * The remaining amount of time in ms that the toast - * will stay before dismissal. - */ - timeRemaining; - /** - * Describes the current pan state of the Toast. - */ - panning; - options; - message; - counterInterval; - wasSwiped; - startingXPos; - xPos; - time; - deltaX; - velocityX; - static _toasts; - static _container; - static _draggedToast; - constructor(options) { - this.options = { - ...Toast.defaults, - ...options - }; - this.message = this.options.text; - this.panning = false; - this.timeRemaining = this.options.displayLength; - if (Toast._toasts.length === 0) { - Toast._createContainer(); - } - // Create new toast - Toast._toasts.push(this); - let toastElement = this._createToast(); - toastElement.M_Toast = this; - this.el = toastElement; - this._animateIn(); - this._setTimer(); - } - static get defaults() { - return _defaults; - } - static getInstance(el) { - return el.M_Toast; - } - static _createContainer() { - const container = document.createElement('div'); - container.setAttribute('id', 'toast-container'); - // Add event handler - container.addEventListener('touchstart', Toast._onDragStart); - container.addEventListener('touchmove', Toast._onDragMove); - container.addEventListener('touchend', Toast._onDragEnd); - container.addEventListener('mousedown', Toast._onDragStart); - document.addEventListener('mousemove', Toast._onDragMove); - document.addEventListener('mouseup', Toast._onDragEnd); - document.body.appendChild(container); - Toast._container = container; - } - static _removeContainer() { - document.removeEventListener('mousemove', Toast._onDragMove); - document.removeEventListener('mouseup', Toast._onDragEnd); - Toast._container.remove(); - Toast._container = null; - } - static _onDragStart(e) { - if (e.target && e.target.closest('.toast')) { - const toastElem = e.target.closest('.toast'); - const toast = toastElem.M_Toast; - toast.panning = true; - Toast._draggedToast = toast; - toast.el.classList.add('panning'); - toast.el.style.transition = ''; - toast.startingXPos = Toast._xPos(e); - toast.time = Date.now(); - toast.xPos = Toast._xPos(e); - } - } - static _onDragMove(e) { - if (!!Toast._draggedToast) { - e.preventDefault(); - const toast = Toast._draggedToast; - toast.deltaX = Math.abs(toast.xPos - Toast._xPos(e)); - toast.xPos = Toast._xPos(e); - toast.velocityX = toast.deltaX / (Date.now() - toast.time); - toast.time = Date.now(); - const totalDeltaX = toast.xPos - toast.startingXPos; - const activationDistance = toast.el.offsetWidth * toast.options.activationPercent; - toast.el.style.transform = `translateX(${totalDeltaX}px)`; - toast.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString(); - } - } - static _onDragEnd() { - if (!!Toast._draggedToast) { - let toast = Toast._draggedToast; - toast.panning = false; - toast.el.classList.remove('panning'); - let totalDeltaX = toast.xPos - toast.startingXPos; - let activationDistance = toast.el.offsetWidth * toast.options.activationPercent; - let shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1; - // Remove toast - if (shouldBeDismissed) { - toast.wasSwiped = true; - toast.dismiss(); - // Animate toast back to original position - } - else { - toast.el.style.transition = 'transform .2s, opacity .2s'; - toast.el.style.transform = ''; - toast.el.style.opacity = ''; - } - Toast._draggedToast = null; - } - } - static _xPos(e) { - if (e.type.startsWith("touch") && e.targetTouches.length >= 1) { - return e.targetTouches[0].clientX; - } - // mouse event - return e.clientX; - } - /** - * dismiss all toasts. - */ - static dismissAll() { - for (let toastIndex in Toast._toasts) { - Toast._toasts[toastIndex].dismiss(); - } - } - _createToast() { - let toast = this.options.toastId - ? document.getElementById(this.options.toastId) - : document.createElement('div'); - if (toast instanceof HTMLTemplateElement) { - const node = toast.content.cloneNode(true); - toast = node.firstElementChild; - } - toast.classList.add('toast'); - toast.setAttribute('role', 'alert'); - toast.setAttribute('aria-live', 'assertive'); - toast.setAttribute('aria-atomic', 'true'); - // Add custom classes onto toast - if (this.options.classes.length > 0) { - toast.classList.add(...this.options.classes.split(' ')); - } - if (this.message) - toast.innerText = this.message; - Toast._container.appendChild(toast); - return toast; - } - _animateIn() { - // Animate toast in - this.el.style.display = ""; - this.el.style.opacity = '0'; - // easeOutCubic - this.el.style.transition = ` - top ${this.options.inDuration}ms ease, - opacity ${this.options.inDuration}ms ease - `; - setTimeout(() => { - this.el.style.top = '0'; - this.el.style.opacity = '1'; - }, 1); - } - /** - * Create setInterval which automatically removes toast when timeRemaining >= 0 - * has been reached. - */ - _setTimer() { - if (this.timeRemaining !== Infinity) { - this.counterInterval = setInterval(() => { - // If toast is not being dragged, decrease its time remaining - if (!this.panning) { - this.timeRemaining -= 20; - } - // Animate toast out - if (this.timeRemaining <= 0) { - this.dismiss(); - } - }, 20); - } - } - /** - * Dismiss toast with animation. - */ - dismiss() { - window.clearInterval(this.counterInterval); - let activationDistance = this.el.offsetWidth * this.options.activationPercent; - if (this.wasSwiped) { - this.el.style.transition = 'transform .05s, opacity .05s'; - this.el.style.transform = `translateX(${activationDistance}px)`; - this.el.style.opacity = '0'; - } - // easeOutExpo - this.el.style.transition = ` - margin ${this.options.outDuration}ms ease, - opacity ${this.options.outDuration}ms ease`; - setTimeout(() => { - this.el.style.opacity = '0'; - this.el.style.marginTop = '-40px'; - }, 1); - setTimeout(() => { - // Call the optional callback - if (typeof this.options.completeCallback === 'function') { - this.options.completeCallback(); - } - // Remove toast from DOM - if (this.el.id != this.options.toastId) { - this.el.remove(); - Toast._toasts.splice(Toast._toasts.indexOf(this), 1); - if (Toast._toasts.length === 0) { - Toast._removeContainer(); - } - } - }, this.options.outDuration); - } - static { - Toast._toasts = []; - Toast._container = null; - Toast._draggedToast = null; - } - } - - const version = '2.1.1'; - const Grid = (children = '') => { - return `
${children}`; - }; - function Button(children = '') { - return ``; - } - /** - * Automatically initialize components. - * @param context Root element to initialize. Defaults to `document.body`. - */ - function AutoInit(context = document.body) { - let registry = { - Autocomplete: context.querySelectorAll('.autocomplete:not(.no-autoinit)'), - Carousel: context.querySelectorAll('.carousel:not(.no-autoinit)'), - Chips: context.querySelectorAll('.chips:not(.no-autoinit)'), - Collapsible: context.querySelectorAll('.collapsible:not(.no-autoinit)'), - Datepicker: context.querySelectorAll('.datepicker:not(.no-autoinit)'), - Dropdown: context.querySelectorAll('.dropdown-trigger:not(.no-autoinit)'), - Materialbox: context.querySelectorAll('.materialboxed:not(.no-autoinit)'), - Modal: context.querySelectorAll('.modal:not(.no-autoinit)'), - Parallax: context.querySelectorAll('.parallax:not(.no-autoinit)'), - Pushpin: context.querySelectorAll('.pushpin:not(.no-autoinit)'), - ScrollSpy: context.querySelectorAll('.scrollspy:not(.no-autoinit)'), - FormSelect: context.querySelectorAll('select:not(.no-autoinit)'), - Sidenav: context.querySelectorAll('.sidenav:not(.no-autoinit)'), - Tabs: context.querySelectorAll('.tabs:not(.no-autoinit)'), - TapTarget: context.querySelectorAll('.tap-target:not(.no-autoinit)'), - Timepicker: context.querySelectorAll('.timepicker:not(.no-autoinit)'), - Tooltip: context.querySelectorAll('.tooltipped:not(.no-autoinit)'), - FloatingActionButton: context.querySelectorAll('.fixed-action-btn:not(.no-autoinit)') - }; - Autocomplete.init(registry.Autocomplete, {}); - Carousel.init(registry.Carousel, {}); - Chips.init(registry.Chips, {}); - Collapsible.init(registry.Collapsible, {}); - Datepicker.init(registry.Datepicker, {}); - Dropdown.init(registry.Dropdown, {}); - Materialbox.init(registry.Materialbox, {}); - Modal.init(registry.Modal, {}); - Parallax.init(registry.Parallax, {}); - Pushpin.init(registry.Pushpin, {}); - ScrollSpy.init(registry.ScrollSpy, {}); - FormSelect.init(registry.FormSelect, {}); - Sidenav.init(registry.Sidenav, {}); - Tabs.init(registry.Tabs, {}); - TapTarget.init(registry.TapTarget, {}); - Timepicker.init(registry.Timepicker, {}); - Tooltip.init(registry.Tooltip, {}); - FloatingActionButton.init(registry.FloatingActionButton, {}); - } - // Init - if (typeof document !== 'undefined') { - document.addEventListener('keydown', Utils.docHandleKeydown, true); - document.addEventListener('keyup', Utils.docHandleKeyup, true); - document.addEventListener('focus', Utils.docHandleFocus, true); - document.addEventListener('blur', Utils.docHandleBlur, true); - } - Cards.Init(); - Forms.Init(); - Chips.Init(); - Waves.Init(); - Range.Init(); - - exports.AutoInit = AutoInit; - exports.Autocomplete = Autocomplete; - exports.Button = Button; - exports.Cards = Cards; - exports.Carousel = Carousel; - exports.CharacterCounter = CharacterCounter; - exports.Chips = Chips; - exports.Collapsible = Collapsible; - exports.Datepicker = Datepicker; - exports.Dropdown = Dropdown; - exports.FloatingActionButton = FloatingActionButton; - exports.FormSelect = FormSelect; - exports.Forms = Forms; - exports.Grid = Grid; - exports.Materialbox = Materialbox; - exports.Modal = Modal; - exports.Parallax = Parallax; - exports.Pushpin = Pushpin; - exports.Range = Range; - exports.ScrollSpy = ScrollSpy; - exports.Sidenav = Sidenav; - exports.Slider = Slider; - exports.Tabs = Tabs; - exports.TapTarget = TapTarget; - exports.Timepicker = Timepicker; - exports.Toast = Toast; - exports.Tooltip = Tooltip; - exports.Waves = Waves; - exports.version = version; - - return exports; - -})({}); diff --git a/dist/js/materialize.min.js b/dist/js/materialize.min.js deleted file mode 100644 index f34b477a05..0000000000 --- a/dist/js/materialize.min.js +++ /dev/null @@ -1,6 +0,0 @@ -/*! -* Materialize v2.1.1 (https://materializeweb.com) -* Copyright 2014-2024 Materialize -* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE) -*/ -var M=function(t){"use strict";class e{static tabPressed=!1;static keyDown=!1;static keys={TAB:["Tab"],ENTER:["Enter"],ESC:["Escape","Esc"],BACKSPACE:["Backspace"],ARROW_UP:["ArrowUp","Up"],ARROW_DOWN:["ArrowDown","Down"],ARROW_LEFT:["ArrowLeft","Left"],ARROW_RIGHT:["ArrowRight","Right"],DELETE:["Delete","Del"]};static docHandleKeydown(t){e.keyDown=!0,[...e.keys.TAB,...e.keys.ARROW_DOWN,...e.keys.ARROW_UP].includes(t.key)&&(e.tabPressed=!0)}static docHandleKeyup(t){e.keyDown=!1,[...e.keys.TAB,...e.keys.ARROW_DOWN,...e.keys.ARROW_UP].includes(t.key)&&(e.tabPressed=!1)}static docHandleFocus(t){e.keyDown&&document.body.classList.add("keyboard-focused")}static docHandleBlur(t){document.body.classList.remove("keyboard-focused")}static guid(){const t=()=>Math.floor(65536*(1+Math.random())).toString(16).substring(1);return t()+t()+"-"+t()+"-"+t()+"-"+t()+"-"+t()+t()+t()}static checkWithinContainer(t,e,i){let s={top:!1,right:!1,bottom:!1,left:!1},n=t.getBoundingClientRect(),o=t===document.body?Math.max(n.bottom,window.innerHeight):n.bottom,l=t.scrollLeft,a=t.scrollTop,h=e.left-l,r=e.top-a;return(hn.right-i||h+e.width>window.innerWidth-i)&&(s.right=!0),(ro-i||r+e.height>window.innerHeight-i)&&(s.bottom=!0),s}static checkPossibleAlignments(t,e,i,s){let n={top:!0,right:!0,bottom:!0,left:!0,spaceOnTop:null,spaceOnRight:null,spaceOnBottom:null,spaceOnLeft:null},o="visible"===getComputedStyle(e).overflow,l=e.getBoundingClientRect(),a=Math.min(l.height,window.innerHeight),h=Math.min(l.width,window.innerWidth),r=t.getBoundingClientRect(),d=e.scrollLeft,c=e.scrollTop,p=i.left-d,u=i.top-c,m=i.top+r.height-c;return n.spaceOnRight=o?window.innerWidth-(r.left+i.width):h-(p+i.width),n.spaceOnRight<0&&(n.left=!1),n.spaceOnLeft=o?r.right-i.width:p-i.width+r.width,n.spaceOnLeft<0&&(n.right=!1),n.spaceOnBottom=o?window.innerHeight-(r.top+i.height+s):a-(u+i.height+s),n.spaceOnBottom<0&&(n.top=!1),n.spaceOnTop=o?r.bottom-(i.height+s):m-(i.height-s),n.spaceOnTop<0&&(n.bottom=!1),n}static getIdFromTrigger(t){let e=t.dataset.target;return e||(e=t.getAttribute("href"),e?e.slice(1):"")}static getDocumentScrollTop(){return window.scrollY||document.documentElement.scrollTop||document.body.scrollTop||0}static getDocumentScrollLeft(){return window.scrollX||document.documentElement.scrollLeft||document.body.scrollLeft||0}static throttle(t,e,i=null){let s,n,o,l=null,a=0;i||(i={});let h=function(){a=!1===i.leading?0:(new Date).getTime(),l=null,o=t.apply(s,n),s=n=null};return function(){let r=(new Date).getTime();a||!1!==i.leading||(a=r);let d=e-(r-a);return s=this,n=arguments,d<=0?(clearTimeout(l),l=null,a=r,o=t.apply(s,n),s=n=null):l||!1===i.trailing||(l=setTimeout(h,d)),o}}}class i{el;options;constructor(t,e,i){t instanceof HTMLElement||console.error(Error(t+" is not an HTML Element"));let s=i.getInstance(t);s&&s.destroy(),this.el=t}static init(t,e,i){let s=null;if(t instanceof Element)s=new i(t,e);else if(t&&t.length){s=[];for(let n=0;n{t.preventDefault(),this.isOpen?this.close():this.open()};_handleMouseEnter=()=>{this.open()};_handleMouseLeave=t=>{const e=t.relatedTarget,i=!!e.closest(".dropdown-content");let s=!1;const n=e.closest(".dropdown-trigger");n&&n.M_Dropdown&&n.M_Dropdown.isOpen&&(s=!0),s||i||this.close()};_handleDocumentClick=t=>{const e=t.target;this.options.closeOnClick&&e.closest(".dropdown-content")&&!this.isTouchMoving?this.close():e.closest(".dropdown-content")||setTimeout((()=>{this.isOpen&&this.close()}),0),this.isTouchMoving=!1};_handleTriggerKeydown=t=>{(e.keys.ARROW_DOWN.includes(t.key)||e.keys.ENTER.includes(t.key))&&!this.isOpen&&(t.preventDefault(),this.open())};_handleDocumentTouchmove=t=>{t.target.closest(".dropdown-content")&&(this.isTouchMoving=!0)};_handleDropdownClick=t=>{if("function"==typeof this.options.onItemClick){const e=t.target.closest("li");this.options.onItemClick.call(this,e)}};_handleDropdownKeydown=t=>{const i=e.keys.ARROW_DOWN.includes(t.key)||e.keys.ARROW_UP.includes(t.key);if(e.keys.TAB.includes(t.key))t.preventDefault(),this.close();else if(i&&this.isOpen){t.preventDefault();const i=e.keys.ARROW_DOWN.includes(t.key)?1:-1;let s=this.focusedIndex,n=!1;do{if(s+=i,this.dropdownEl.children[s]&&-1!==this.dropdownEl.children[s].tabIndex){n=!0;break}}while(s=0);n&&(this.focusedIndex>=0&&this.dropdownEl.children[this.focusedIndex].classList.remove("active"),this.focusedIndex=s,this._focusFocusedItem())}else if(e.keys.ENTER.includes(t.key)&&this.isOpen){const t=this.dropdownEl.children[this.focusedIndex],e=t.querySelector("a, button");e?e.click():t&&t instanceof HTMLElement&&t.click()}else e.keys.ESC.includes(t.key)&&this.isOpen&&(t.preventDefault(),this.close());const s=t.key.toLowerCase(),n=/[a-zA-Z0-9-_]/.test(s),o=[...e.keys.ARROW_DOWN,...e.keys.ARROW_UP,...e.keys.ENTER,...e.keys.ESC,...e.keys.TAB];if(n&&!o.includes(t.key)){this.filterQuery.push(s);const t=this.filterQuery.join(""),e=Array.from(this.dropdownEl.querySelectorAll("li")).find((e=>0===e.innerText.toLowerCase().indexOf(t)));e&&(this.focusedIndex=[...e.parentNode.children].indexOf(e),this._focusFocusedItem())}this.filterTimeout=setTimeout(this._resetFilterQuery,1e3)};_handleWindowResize=t=>{this.el.offsetParent&&this.recalculateDimensions()};_resetFilterQuery=()=>{this.filterQuery=[]};_resetDropdownStyles(){this.dropdownEl.style.display="",this.dropdownEl.style.width="",this.dropdownEl.style.height="",this.dropdownEl.style.left="",this.dropdownEl.style.top="",this.dropdownEl.style.transformOrigin="",this.dropdownEl.style.transform="",this.dropdownEl.style.opacity=""}_moveDropdown(t=null){this.options.container?this.options.container.append(this.dropdownEl):t?t.contains(this.dropdownEl)||t.append(this.dropdownEl):this.el.after(this.dropdownEl)}_makeDropdownFocusable(){this.dropdownEl&&(this.dropdownEl.popover="",this.dropdownEl.tabIndex=0,Array.from(this.dropdownEl.children).forEach((t=>{t.getAttribute("tabindex")||t.setAttribute("tabindex","0")})))}_focusFocusedItem(){this.focusedIndex>=0&&this.focusedIndexr.spaceOnBottom?(d="bottom",n+=r.spaceOnTop,a-=this.options.coverTrigger?r.spaceOnTop-20:r.spaceOnTop-20+i.height):n+=r.spaceOnBottom)),!r[c]){const t="left"===c?"right":"left";r[t]?c=t:r.spaceOnLeft>r.spaceOnRight?(c="right",o+=r.spaceOnLeft,l-=r.spaceOnLeft):(c="left",o+=r.spaceOnRight)}return"bottom"===d&&(a=a-s.height+(this.options.coverTrigger?i.height:0)),"right"===c&&(l=l-s.width+i.width),{x:l,y:a,verticalAlignment:d,horizontalAlignment:c,height:n,width:o}}_animateIn(){const t=this.options.inDuration;this.dropdownEl.style.transition="none",this.dropdownEl.style.opacity="0",this.dropdownEl.style.transform="scale(0.3, 0.3)",setTimeout((()=>{this.dropdownEl.style.transition=`opacity ${t}ms ease, transform ${t}ms ease`,this.dropdownEl.style.opacity="1",this.dropdownEl.style.transform="scale(1, 1)"}),1),setTimeout((()=>{this.options.autoFocus&&this.dropdownEl.focus(),"function"==typeof this.options.onOpenEnd&&this.options.onOpenEnd.call(this,this.el)}),t)}_animateOut(){const t=this.options.outDuration;this.dropdownEl.style.transition=`opacity ${t}ms ease, transform ${t}ms ease`,this.dropdownEl.style.opacity="0",this.dropdownEl.style.transform="scale(0.3, 0.3)",setTimeout((()=>{this._resetDropdownStyles(),"function"==typeof this.options.onCloseEnd&&this.options.onCloseEnd.call(this,this.el)}),t)}_getClosestAncestor(t,e){let i=t.parentNode;for(;null!==i&&i!==document;){if(e(i))return i;i=i.parentElement}return null}_placeDropdown(){let t=this._getClosestAncestor(this.dropdownEl,(t=>!["HTML","BODY"].includes(t.tagName)&&"visible"!==getComputedStyle(t).overflow));t||(t=this.dropdownEl.offsetParent?this.dropdownEl.offsetParent:this.dropdownEl.parentNode),"static"===getComputedStyle(t).position&&(t.style.position="relative"),this._moveDropdown(t);const e=this.options.constrainWidth?this.el.getBoundingClientRect().width:this.dropdownEl.getBoundingClientRect().width;this.dropdownEl.style.width=e+"px";const i=this._getDropdownPosition(t);this.dropdownEl.style.left=i.x+"px",this.dropdownEl.style.top=i.y+"px",this.dropdownEl.style.height=i.height+"px",this.dropdownEl.style.width=i.width+"px",this.dropdownEl.style.transformOrigin=`${"left"===i.horizontalAlignment?"0":"100%"} ${"top"===i.verticalAlignment?"0":"100%"}`}open=()=>{this.isOpen||(this.isOpen=!0,"function"==typeof this.options.onOpenStart&&this.options.onOpenStart.call(this,this.el),this._resetDropdownStyles(),this.dropdownEl.style.display="block",this._placeDropdown(),this._animateIn(),setTimeout((()=>this._setupTemporaryEventHandlers()),0))};close=()=>{this.isOpen&&(this.isOpen=!1,this.focusedIndex=-1,"function"==typeof this.options.onCloseStart&&this.options.onCloseStart.call(this,this.el),this._animateOut(),this._removeTemporaryEventHandlers(),this.options.autoFocus&&this.el.focus())};recalculateDimensions=()=>{this.isOpen&&(this.dropdownEl.style.width="",this.dropdownEl.style.height="",this.dropdownEl.style.left="",this.dropdownEl.style.top="",this.dropdownEl.style.transformOrigin="",this._placeDropdown())}}let o={data:[],onAutocomplete:null,dropdownOptions:{autoFocus:!1,closeOnClick:!1,coverTrigger:!1},minLength:1,isMultiSelect:!1,onSearch:(t,e)=>{const i=t.toLocaleLowerCase();e.setMenuItems(e.options.data.filter((t=>t.id.toString().toLocaleLowerCase().includes(i)||t.text?.toLocaleLowerCase().includes(i))))},maxDropDownHeight:"300px",allowUnsafeHTML:!1};class l extends i{isOpen;count;activeIndex;oldVal;$active;_mousedown;container;dropdown;static _keydown;selectedValues;menuItems;constructor(t,e){super(t,e,l),this.el.M_Autocomplete=this,this.options={...l.defaults,...e},this.isOpen=!1,this.count=0,this.activeIndex=-1,this.oldVal="",this.selectedValues=[],this.menuItems=this.options.data||[],this.$active=null,this._mousedown=!1,this._setupDropdown(),this._setupEventHandlers()}static get defaults(){return o}static init(t,e={}){return super.init(t,e,l)}static getInstance(t){return t.M_Autocomplete}destroy(){this._removeEventHandlers(),this._removeDropdown(),this.el.M_Autocomplete=void 0}_setupEventHandlers(){this.el.addEventListener("blur",this._handleInputBlur),this.el.addEventListener("keyup",this._handleInputKeyupAndFocus),this.el.addEventListener("focus",this._handleInputKeyupAndFocus),this.el.addEventListener("keydown",this._handleInputKeydown),this.el.addEventListener("click",this._handleInputClick),this.container.addEventListener("mousedown",this._handleContainerMousedownAndTouchstart),this.container.addEventListener("mouseup",this._handleContainerMouseupAndTouchend),void 0!==window.ontouchstart&&(this.container.addEventListener("touchstart",this._handleContainerMousedownAndTouchstart),this.container.addEventListener("touchend",this._handleContainerMouseupAndTouchend))}_removeEventHandlers(){this.el.removeEventListener("blur",this._handleInputBlur),this.el.removeEventListener("keyup",this._handleInputKeyupAndFocus),this.el.removeEventListener("focus",this._handleInputKeyupAndFocus),this.el.removeEventListener("keydown",this._handleInputKeydown),this.el.removeEventListener("click",this._handleInputClick),this.container.removeEventListener("mousedown",this._handleContainerMousedownAndTouchstart),this.container.removeEventListener("mouseup",this._handleContainerMouseupAndTouchend),void 0!==window.ontouchstart&&(this.container.removeEventListener("touchstart",this._handleContainerMousedownAndTouchstart),this.container.removeEventListener("touchend",this._handleContainerMouseupAndTouchend))}_setupDropdown(){this.container=document.createElement("ul"),this.container.style.maxHeight=this.options.maxDropDownHeight,this.container.id=`autocomplete-options-${e.guid()}`,this.container.classList.add("autocomplete-content","dropdown-content"),this.el.setAttribute("data-target",this.container.id),this.menuItems.forEach((t=>{const e=this._createDropdownItem(t);this.container.append(e)})),this.el.parentElement.appendChild(this.container);let t={...l.defaults.dropdownOptions,...this.options.dropdownOptions},i=t.onItemClick;t.onItemClick=t=>{if(!t)return;const e=t.getAttribute("data-id");this.selectOption(e),i&&"function"==typeof i&&i.call(this.dropdown,this.el)},this.dropdown=n.init(this.el,t);const s=this.el.parentElement.querySelector("label");s&&this.el.after(s),this.el.removeEventListener("click",this.dropdown._handleClick),this.el.value&&this.selectOption(this.el.value);const o=document.createElement("div");o.classList.add("status-info"),o.setAttribute("style","position: absolute;right:0;top:0;"),this.el.parentElement.appendChild(o),this._updateSelectedInfo()}_removeDropdown(){this.container.parentNode.removeChild(this.container)}_handleInputBlur=()=>{this._mousedown||(this.close(),this._resetAutocomplete())};_handleInputKeyupAndFocus=t=>{"keyup"===t.type&&(l._keydown=!1),this.count=0;const i=this.el.value.toLocaleLowerCase();e.keys.ENTER.includes(t.key)||e.keys.ARROW_UP.includes(t.key)||e.keys.ARROW_DOWN.includes(t.key)||(this.oldVal===i||!e.tabPressed&&"focus"===t.type||this.open(),this.oldVal!==i&&(this._setStatusLoading(),this.options.onSearch(this.el.value,this)),this.options.isMultiSelect||0!==this.el.value.length||(this.selectedValues=[],this._triggerChanged()),this.oldVal=i)};_handleInputKeydown=t=>{l._keydown=!0;const i=this.container.querySelectorAll("li").length;if(e.keys.ENTER.includes(t.key)&&this.activeIndex>=0){const e=this.container.querySelectorAll("li")[this.activeIndex];e&&(this.selectOption(e.getAttribute("data-id")),t.preventDefault())}else(e.keys.ARROW_UP.includes(t.key)||e.keys.ARROW_DOWN.includes(t.key))&&(t.preventDefault(),e.keys.ARROW_UP.includes(t.key)&&this.activeIndex>0&&this.activeIndex--,e.keys.ARROW_DOWN.includes(t.key)&&this.activeIndex=0&&(this.$active=this.container.querySelectorAll("li")[this.activeIndex],this.$active?.classList.add("active"),this.container.children[this.activeIndex].scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})))};_handleInputClick=()=>{this.open()};_handleContainerMousedownAndTouchstart=()=>{this._mousedown=!0};_handleContainerMouseupAndTouchend=()=>{this._mousedown=!1};_resetCurrentElementPosition(){this.activeIndex=-1,this.$active?.classList.remove("active")}_resetAutocomplete(){this.container.replaceChildren(),this._resetCurrentElementPosition(),this.oldVal=null,this.isOpen=!1,this._mousedown=!1}_highlightPartialText(t,e){const i=e.toLocaleLowerCase().indexOf(""+t.toLocaleLowerCase()),s=i+t.length-1;return-1==i||-1==s?[e,"",""]:[e.slice(0,i),e.slice(i,s+1),e.slice(s+1)]}_createDropdownItem(t){const e=document.createElement("li");if(e.setAttribute("data-id",t.id),e.setAttribute("style","display:grid; grid-auto-flow: column; user-select: none; align-items: center;"),this.options.isMultiSelect&&(e.innerHTML=`\n
\n e.id===t.id))?' checked="checked"':""}>\n
`),t.image){const i=document.createElement("img");i.classList.add("circle"),i.src=t.image,e.appendChild(i)}const i=this.el.value.toLocaleLowerCase(),s=this._highlightPartialText(i,(t.text||t.id).toString()),n=document.createElement("div");if(n.setAttribute("style","line-height:1.2;font-weight:500;"),this.options.allowUnsafeHTML)n.innerHTML=s[0]+''+s[1]+""+s[2];else if(n.appendChild(document.createTextNode(s[0])),s[1]){const t=document.createElement("span");t.textContent=s[1],t.classList.add("highlight"),n.appendChild(t),n.appendChild(document.createTextNode(s[2]))}const o=document.createElement("div");if(o.classList.add("item-text"),o.setAttribute("style","padding:5px;overflow:hidden;"),e.appendChild(o),e.querySelector(".item-text").appendChild(n),"string"==typeof t.description||"number"==typeof t.description&&!isNaN(t.description)){const i=document.createElement("small");i.setAttribute("style","line-height:1.3;color:grey;white-space:nowrap;text-overflow:ellipsis;display:block;width:90%;overflow:hidden;"),i.innerText=t.description,e.querySelector(".item-text").appendChild(i)}return e.style.gridTemplateColumns=(()=>this.options.isMultiSelect?t.image?"40px min-content auto":"40px auto":t.image?"min-content auto":"auto")(),e}_renderDropdown(){this._resetAutocomplete(),0===this.menuItems.length&&(this.menuItems=this.selectedValues);for(let t=0;t\n \n \n \n
'}_updateSelectedInfo(){const t=this.el.parentElement.querySelector(".status-info");t&&(this.options.isMultiSelect?t.innerHTML=this.selectedValues.length.toString():t.innerHTML="")}_refreshInputText(){if(1===this.selectedValues.length){const t=this.selectedValues[0];this.el.value=t.text||t.id}}_triggerChanged(){this.el.dispatchEvent(new Event("change")),"function"==typeof this.options.onAutocomplete&&this.options.onAutocomplete.call(this,this.selectedValues)}open=()=>{const t=this.el.value.toLocaleLowerCase();this._resetAutocomplete(),t.length>=this.options.minLength&&(this.isOpen=!0,this._renderDropdown()),this.dropdown.isOpen?this.dropdown.recalculateDimensions():setTimeout((()=>{this.dropdown.open()}),0)};close=()=>{this.dropdown.close()};setMenuItems(t){this.menuItems=t,this.open(),this._updateSelectedInfo()}setValues(t){this.selectedValues=t,this._updateSelectedInfo(),this.options.isMultiSelect||this._refreshInputText(),this._triggerChanged()}selectOption(t){const e=this.menuItems.find((e=>e.id==t));if(!e)return;const i=this.container.querySelector('li[data-id="'+t+'"]');if(i){if(this.options.isMultiSelect){const t=i.querySelector('input[type="checkbox"]');t.checked=!t.checked,t.checked?this.selectedValues.push(e):this.selectedValues=this.selectedValues.filter((t=>t.id!==e.id)),this.el.focus()}else this.selectedValues=[e],this._refreshInputText(),this._resetAutocomplete(),this.close();this._updateSelectedInfo(),this._triggerChanged()}}}let a={direction:"top",hoverEnabled:!0,toolbarEnabled:!1};class h extends i{isOpen;_anchor;_menu;_floatingBtns;_floatingBtnsReverse;offsetY;offsetX;btnBottom;btnLeft;btnWidth;constructor(t,e){super(t,e,h),this.el.M_FloatingActionButton=this,this.options={...h.defaults,...e},this.isOpen=!1,this._anchor=this.el.querySelector("a"),this._menu=this.el.querySelector("ul"),this._floatingBtns=Array.from(this.el.querySelectorAll("ul .btn-floating")),this._floatingBtnsReverse=this._floatingBtns.reverse(),this.offsetY=0,this.offsetX=0,this.el.classList.add(`direction-${this.options.direction}`),"top"===this.options.direction?this.offsetY=40:"right"===this.options.direction?this.offsetX=-40:"bottom"===this.options.direction?this.offsetY=-40:this.offsetX=40,this._setupEventHandlers()}static get defaults(){return a}static init(t,e={}){return super.init(t,e,h)}static getInstance(t){return t.M_FloatingActionButton}destroy(){this._removeEventHandlers(),this.el.M_FloatingActionButton=void 0}_setupEventHandlers(){this.options.hoverEnabled&&!this.options.toolbarEnabled?(this.el.addEventListener("mouseenter",this.open),this.el.addEventListener("mouseleave",this.close)):this.el.addEventListener("click",this._handleFABClick)}_removeEventHandlers(){this.options.hoverEnabled&&!this.options.toolbarEnabled?(this.el.removeEventListener("mouseenter",this.open),this.el.removeEventListener("mouseleave",this.close)):this.el.removeEventListener("click",this._handleFABClick)}_handleFABClick=()=>{this.isOpen?this.close():this.open()};_handleDocumentClick=t=>{t.target!==this._menu&&this.close};open=()=>{this.isOpen||(this.options.toolbarEnabled?this._animateInToolbar():this._animateInFAB(),this.isOpen=!0)};close=()=>{this.isOpen&&(this.options.toolbarEnabled?(window.removeEventListener("scroll",this.close,!0),document.body.removeEventListener("click",this._handleDocumentClick,!0)):this._animateOutFAB(),this.isOpen=!1)};_animateInFAB(){this.el.classList.add("active");this._floatingBtnsReverse.forEach(((t,e)=>{const i=40*e;t.style.transition="none",t.style.opacity="0",t.style.transform=`translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`,setTimeout((()=>{t.style.opacity="0.4",setTimeout((()=>{t.style.transition="opacity 275ms ease, transform 275ms ease",t.style.opacity="1",t.style.transform="translate(0, 0) scale(1)"}),1)}),i)}))}_animateOutFAB(){setTimeout((()=>this.el.classList.remove("active")),175),this._floatingBtnsReverse.forEach((t=>{t.style.transition="opacity 175ms ease, transform 175ms ease",t.style.opacity="0",t.style.transform=`translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`}))}_animateInToolbar(){let t,e=window.innerWidth,i=window.innerHeight,s=this.el.getBoundingClientRect();const n=document.createElement("div");n.classList.add("fab-backdrop");const o=getComputedStyle(this._anchor).backgroundColor;this._anchor.append(n),this.offsetX=s.left-e/2+s.width/2,this.offsetY=i-s.bottom,t=e/n[0].clientWidth,this.btnBottom=s.bottom,this.btnLeft=s.left,this.btnWidth=s.width,this.el.classList.add("active"),this.el.style.textAlign="center",this.el.style.width="100%",this.el.style.bottom="0",this.el.style.left="0",this.el.style.transform="translateX("+this.offsetX+"px)",this.el.style.transition="none",this._anchor.style.transform=`translateY(${this.offsetY}px`,this._anchor.style.transition="none",n.style.backgroundColor=o,setTimeout((()=>{this.el.style.transform="",this.el.style.transition="transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s",this._anchor.style.overflow="visible",this._anchor.style.transform="",this._anchor.style.transition="transform .2s",setTimeout((()=>{this.el.style.overflow="hidden",this.el.style.backgroundColor=o,n.style.transform="scale("+t+")",n.style.transition="transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)",this._menu.querySelectorAll("li > a").forEach((t=>t.style.opacity="1")),window.addEventListener("scroll",this.close,!0),document.body.addEventListener("click",this._handleDocumentClick,!0)}),100)}),0)}}class r{static Init(){"undefined"!=typeof document&&document.addEventListener("DOMContentLoaded",(()=>{document.body.addEventListener("click",(t=>{const e=t.target,i=e.closest(".card");if(!i)return;const s=Array.from(i.children).find((t=>t.classList.contains("card-reveal")));if(!s)return;const n=getComputedStyle(i).overflow,o=s.querySelector(".card-reveal .card-title");if(e===o||o.contains(e)){const t=225;s.style.transition=`transform ${t}ms ease`,s.style.transform="translateY(0)",setTimeout((()=>{s.style.display="none",i.style.overflow=n}),t)}i.querySelectorAll(".activator").forEach((t=>{(e===t||t.contains(e))&&(i.style.overflow="hidden",s.style.display="block",setTimeout((()=>{s.style.transition="transform 300ms ease",s.style.transform="translateY(-100%)"}),1))}))}))}))}}let d={duration:200,dist:-100,shift:0,padding:0,numVisible:5,fullWidth:!1,indicators:!1,noWrap:!1,onCycleTo:null};class c extends i{hasMultipleSlides;showIndicators;noWrap;pressed;dragged;offset;target;images;itemWidth;itemHeight;dim;_indicators;count;xform;verticalDragged;reference;referenceY;velocity;frame;timestamp;ticker;amplitude;center=0;imageHeight;scrollingTimeout;oneTimeCallback;constructor(t,e){super(t,e,c),this.el.M_Carousel=this,this.options={...c.defaults,...e},this.hasMultipleSlides=this.el.querySelectorAll(".carousel-item").length>1,this.showIndicators=this.options.indicators&&this.hasMultipleSlides,this.noWrap=this.options.noWrap||!this.hasMultipleSlides,this.pressed=!1,this.dragged=!1,this.offset=this.target=0,this.images=[],this.itemWidth=this.el.querySelector(".carousel-item").clientWidth,this.itemHeight=this.el.querySelector(".carousel-item").clientHeight,this.dim=2*this.itemWidth+this.options.padding||1,this.options.fullWidth&&(this.options.dist=0,this._setCarouselHeight(),this.showIndicators&&this.el.querySelector(".carousel-fixed-item")?.classList.add("with-indicators")),this._indicators=document.createElement("ul"),this._indicators.classList.add("indicators"),this.el.querySelectorAll(".carousel-item").forEach(((t,e)=>{if(this.images.push(t),this.showIndicators){const t=document.createElement("li");t.classList.add("indicator-item"),0===e&&t.classList.add("active"),this._indicators.appendChild(t)}})),this.showIndicators&&this.el.appendChild(this._indicators),this.count=this.images.length,this.options.numVisible=Math.min(this.count,this.options.numVisible),this.xform="transform",["webkit","Moz","O","ms"].every((t=>{var e=t+"Transform";return void 0===document.body.style[e]||(this.xform=e,!1)})),this._setupEventHandlers(),this._scroll(this.offset)}static get defaults(){return d}static init(t,e={}){return super.init(t,e,c)}static getInstance(t){return t.M_Carousel}destroy(){this._removeEventHandlers(),this.el.M_Carousel=void 0}_setupEventHandlers(){void 0!==window.ontouchstart&&(this.el.addEventListener("touchstart",this._handleCarouselTap),this.el.addEventListener("touchmove",this._handleCarouselDrag),this.el.addEventListener("touchend",this._handleCarouselRelease)),this.el.addEventListener("mousedown",this._handleCarouselTap),this.el.addEventListener("mousemove",this._handleCarouselDrag),this.el.addEventListener("mouseup",this._handleCarouselRelease),this.el.addEventListener("mouseleave",this._handleCarouselRelease),this.el.addEventListener("click",this._handleCarouselClick),this.showIndicators&&this._indicators&&this._indicators.querySelectorAll(".indicator-item").forEach((t=>{t.addEventListener("click",this._handleIndicatorClick)})),window.addEventListener("resize",this._handleThrottledResize)}_removeEventHandlers(){void 0!==window.ontouchstart&&(this.el.removeEventListener("touchstart",this._handleCarouselTap),this.el.removeEventListener("touchmove",this._handleCarouselDrag),this.el.removeEventListener("touchend",this._handleCarouselRelease)),this.el.removeEventListener("mousedown",this._handleCarouselTap),this.el.removeEventListener("mousemove",this._handleCarouselDrag),this.el.removeEventListener("mouseup",this._handleCarouselRelease),this.el.removeEventListener("mouseleave",this._handleCarouselRelease),this.el.removeEventListener("click",this._handleCarouselClick),this.showIndicators&&this._indicators&&this._indicators.querySelectorAll(".indicator-item").forEach((t=>{t.removeEventListener("click",this._handleIndicatorClick)})),window.removeEventListener("resize",this._handleThrottledResize)}_handleThrottledResize=e.throttle((function(){this._handleResize()}),200,null).bind(this);_handleCarouselTap=t=>{"mousedown"===t.type&&"IMG"===t.target.tagName&&t.preventDefault(),this.pressed=!0,this.dragged=!1,this.verticalDragged=!1,this.reference=this._xpos(t),this.referenceY=this._ypos(t),this.velocity=this.amplitude=0,this.frame=this.offset,this.timestamp=Date.now(),clearInterval(this.ticker),this.ticker=setInterval(this._track,100)};_handleCarouselDrag=t=>{let e,i,s,n;if(this.pressed)if(e=this._xpos(t),i=this._ypos(t),s=this.reference-e,n=Math.abs(this.referenceY-i),n<30&&!this.verticalDragged)(s>2||s<-2)&&(this.dragged=!0,this.reference=e,this._scroll(this.offset+s));else{if(this.dragged)return t.preventDefault(),t.stopPropagation(),!1;this.verticalDragged=!0}if(this.dragged)return t.preventDefault(),t.stopPropagation(),!1};_handleCarouselRelease=t=>{if(this.pressed)return this.pressed=!1,clearInterval(this.ticker),this.target=this.offset,(this.velocity>10||this.velocity<-10)&&(this.amplitude=.9*this.velocity,this.target=this.offset+this.amplitude),this.target=Math.round(this.target/this.dim)*this.dim,this.noWrap&&(this.target>=this.dim*(this.count-1)?this.target=this.dim*(this.count-1):this.target<0&&(this.target=0)),this.amplitude=this.target-this.offset,this.timestamp=Date.now(),requestAnimationFrame(this._autoScroll),this.dragged&&(t.preventDefault(),t.stopPropagation()),!1};_handleCarouselClick=t=>{if(this.dragged)return t.preventDefault(),t.stopPropagation(),!1;if(!this.options.fullWidth){const e=t.target.closest(".carousel-item");if(!e)return;const i=[...e.parentNode.children].indexOf(e);0!==this._wrap(this.center)-i&&(t.preventDefault(),t.stopPropagation()),i<0?t.clientX-t.target.getBoundingClientRect().left>this.el.clientWidth/2?this.next():this.prev():this._cycleTo(i)}};_handleIndicatorClick=t=>{t.stopPropagation();const e=t.target.closest(".indicator-item");if(e){const t=[...e.parentNode.children].indexOf(e);this._cycleTo(t)}};_handleResize=()=>{this.options.fullWidth?(this.itemWidth=this.el.querySelector(".carousel-item").clientWidth,this.imageHeight=this.el.querySelector(".carousel-item.active").clientHeight,this.dim=2*this.itemWidth+this.options.padding,this.offset=2*this.center*this.itemWidth,this.target=this.offset,this._setCarouselHeight(!0)):this._scroll()};_setCarouselHeight(t=!1){const e=this.el.querySelector(".carousel-item.active")?this.el.querySelector(".carousel-item.active"):this.el.querySelector(".carousel-item"),i=e.querySelector("img");if(i)if(i.complete){const t=i.clientHeight;if(t>0)this.el.style.height=t+"px";else{const t=i.naturalWidth,e=i.naturalHeight,s=this.el.clientWidth/t*e;this.el.style.height=s+"px"}}else i.addEventListener("load",(()=>{this.el.style.height=i.offsetHeight+"px"}));else if(!t){const t=e.clientHeight;this.el.style.height=t+"px"}}_xpos(t){return t.type.startsWith("touch")&&t.targetTouches.length>=1?t.targetTouches[0].clientX:t.clientX}_ypos(t){return t.type.startsWith("touch")&&t.targetTouches.length>=1?t.targetTouches[0].clientY:t.clientY}_wrap(t){return t>=this.count?t%this.count:t<0?this._wrap(this.count+t%this.count):t}_track=()=>{let t,e,i,s;t=Date.now(),e=t-this.timestamp,this.timestamp=t,i=this.offset-this.frame,this.frame=this.offset,s=1e3*i/(1+e),this.velocity=.8*s+.2*this.velocity};_autoScroll=()=>{let t,e;this.amplitude&&(t=Date.now()-this.timestamp,e=this.amplitude*Math.exp(-t/this.options.duration),e>2||e<-2?(this._scroll(this.target-e),requestAnimationFrame(this._autoScroll)):this._scroll(this.target))};_scroll(t=0){let e,i,s,n,o,l,a,h,r,d;this.el.classList.contains("scrolling")||this.el.classList.add("scrolling"),null!=this.scrollingTimeout&&window.clearTimeout(this.scrollingTimeout),this.scrollingTimeout=window.setTimeout((()=>{this.el.classList.remove("scrolling")}),this.options.duration);let c=this.center,p=1/this.options.numVisible;if(this.offset="number"==typeof t?t:this.offset,this.center=Math.floor((this.offset+this.dim/2)/this.dim),s=this.offset-this.center*this.dim,n=s<0?1:-1,o=-n*s*2/this.dim,i=this.count>>1,this.options.fullWidth?(a="translateX(0)",d=1):(a="translateX("+(this.el.clientWidth-this.itemWidth)/2+"px) ",a+="translateY("+(this.el.clientHeight-this.itemHeight)/2+"px)",d=1-p*o),this.showIndicators){const t=this.center%this.count,e=this._indicators.querySelector(".indicator-item.active");if([...e.parentNode.children].indexOf(e)!==t){e.classList.remove("active");const i=t<0?this.count+t:t;this._indicators.querySelectorAll(".indicator-item")[i].classList.add("active")}}if(!this.noWrap||this.center>=0&&this.center0?1-o:1):(h=this.options.dist*(2*e-o*n),r=1-p*(2*e-o*n)),!this.noWrap||this.center-e>=0){l=this.images[this._wrap(this.center-e)];let t=`${a} translateX(${-this.options.shift+(-this.dim*e-s)/2}px) translateZ(${h}px)`;this._updateItemStyle(l,r,-e,t)}}if(!this.noWrap||this.center>=0&&this.center0&&Math.abs(i-this.count)0&&(this.target-=this.dim*i),"function"==typeof e&&(this.oneTimeCallback=e),this.offset!==this.target&&(this.amplitude=this.target-this.offset,this.timestamp=Date.now(),requestAnimationFrame(this._autoScroll))}next(t=1){(void 0===t||isNaN(t))&&(t=1);let e=this.center+t;if(e>=this.count||e<0){if(this.noWrap)return;e=this._wrap(e)}this._cycleTo(e)}prev(t=1){(void 0===t||isNaN(t))&&(t=1);let e=this.center-t;if(e>=this.count||e<0){if(this.noWrap)return;e=this._wrap(e)}this._cycleTo(e)}set(t,e){if((void 0===t||isNaN(t))&&(t=0),t>this.count||t<0){if(this.noWrap)return;t=this._wrap(t)}this._cycleTo(t,e)}}let p={data:[],placeholder:"",secondaryPlaceholder:"",closeIconClass:"material-icons",autocompleteOptions:{},autocompleteOnly:!1,limit:1/0,onChipAdd:null,onChipSelect:null,onChipDelete:null};function u(t){return[...t.parentNode.children].indexOf(t)}class m extends i{chipsData;hasAutocomplete;autocomplete;_input;_label;_chips;static _keydown;_selectedChip;constructor(t,i){super(t,i,m),this.el.M_Chips=this,this.options={...m.defaults,...i},this.el.classList.add("chips","input-field"),this.chipsData=[],this._chips=[],this._setupInput(),this.hasAutocomplete=Object.keys(this.options.autocompleteOptions).length>0,this._input.getAttribute("id")||this._input.setAttribute("id",e.guid()),this.options.data.length&&(this.chipsData=this.options.data,this._renderChips()),this.hasAutocomplete&&this._setupAutocomplete(),this._setPlaceholder(),this._setupLabel(),this._setupEventHandlers()}static get defaults(){return p}static init(t,e={}){return super.init(t,e,m)}static getInstance(t){return t.M_Chips}getData(){return this.chipsData}destroy(){this._removeEventHandlers(),this._chips.forEach((t=>t.remove())),this._chips=[],this.el.M_Chips=void 0}_setupEventHandlers(){this.el.addEventListener("click",this._handleChipClick),document.addEventListener("keydown",m._handleChipsKeydown),document.addEventListener("keyup",m._handleChipsKeyup),this.el.addEventListener("blur",m._handleChipsBlur,!0),this._input.addEventListener("focus",this._handleInputFocus),this._input.addEventListener("blur",this._handleInputBlur),this._input.addEventListener("keydown",this._handleInputKeydown)}_removeEventHandlers(){this.el.removeEventListener("click",this._handleChipClick),document.removeEventListener("keydown",m._handleChipsKeydown),document.removeEventListener("keyup",m._handleChipsKeyup),this.el.removeEventListener("blur",m._handleChipsBlur,!0),this._input.removeEventListener("focus",this._handleInputFocus),this._input.removeEventListener("blur",this._handleInputBlur),this._input.removeEventListener("keydown",this._handleInputKeydown)}_handleChipClick=t=>{const e=t.target.closest(".chip"),i=t.target.classList.contains("close");if(e){const t=[...e.parentNode.children].indexOf(e);i?(this.deleteChip(t),this._input.focus()):this.selectChip(t)}else this._input.focus()};static _handleChipsKeydown(t){m._keydown=!0;const i=t.target.closest(".chips"),s=t.target&&i,n=t.target.tagName;if("INPUT"===n||"TEXTAREA"===n||!s)return;const o=i.M_Chips;if(e.keys.BACKSPACE.includes(t.key)||e.keys.DELETE.includes(t.key)){t.preventDefault();let e=o.chipsData.length;if(o._selectedChip){const t=u(o._selectedChip);o.deleteChip(t),o._selectedChip=null,e=Math.max(t-1,0)}o.chipsData.length?o.selectChip(e):o._input.focus()}else if(e.keys.ARROW_LEFT.includes(t.key)){if(o._selectedChip){const t=u(o._selectedChip)-1;if(t<0)return;o.selectChip(t)}}else if(e.keys.ARROW_RIGHT.includes(t.key)&&o._selectedChip){const t=u(o._selectedChip)+1;t>=o.chipsData.length?o._input.focus():o.selectChip(t)}}static _handleChipsKeyup(t){m._keydown=!1}static _handleChipsBlur(t){if(!m._keydown&&document.hidden){t.target.closest(".chips").M_Chips._selectedChip=null}}_handleInputFocus=()=>{this.el.classList.add("focus")};_handleInputBlur=()=>{this.el.classList.remove("focus")};_handleInputKeydown=t=>{if(m._keydown=!0,e.keys.ENTER.includes(t.key)){if(this.hasAutocomplete&&this.autocomplete&&this.autocomplete.isOpen)return;t.preventDefault(),(!this.hasAutocomplete||this.hasAutocomplete&&!this.options.autocompleteOnly)&&this.addChip({id:this._input.value}),this._input.value=""}else(e.keys.BACKSPACE.includes(t.key)||e.keys.ARROW_LEFT.includes(t.key))&&""===this._input.value&&this.chipsData.length&&(t.preventDefault(),this.selectChip(this.chipsData.length-1))};_renderChip(t){if(!t.id)return;const e=document.createElement("div");e.classList.add("chip"),e.innerText=t.text||t.id,e.setAttribute("tabindex","0");const i=document.createElement("i");if(i.classList.add(this.options.closeIconClass,"close"),i.innerText="close",t.image){const i=document.createElement("img");i.setAttribute("src",t.image),e.insertBefore(i,e.firstChild)}return e.appendChild(i),e}_renderChips(){this._chips=[];for(let t=0;t{t.length>0&&this.addChip({id:t[0].id,text:t[0].text,image:t[0].image}),this._input.value="",this._input.focus()},this.autocomplete=l.init(this._input,this.options.autocompleteOptions)}_setupInput(){this._input=this.el.querySelector("input"),this._input||(this._input=document.createElement("input"),this.el.append(this._input)),this._input.classList.add("input")}_setupLabel(){this._label=this.el.querySelector("label"),this._label&&this._label.setAttribute("for",this._input.getAttribute("id"))}_setPlaceholder(){void 0!==this.chipsData&&!this.chipsData.length&&this.options.placeholder?this._input.placeholder=this.options.placeholder:(void 0===this.chipsData||this.chipsData.length)&&this.options.secondaryPlaceholder&&(this._input.placeholder=this.options.secondaryPlaceholder)}_isValidAndNotExist(t){const e=!!t.id,i=!this.chipsData.some((e=>e.id==t.id));return e&&i}addChip(t){if(!this._isValidAndNotExist(t)||this.chipsData.length>=this.options.limit)return;const e=this._renderChip(t);this._chips.push(e),this.chipsData.push(t),this._input.before(e),this._setPlaceholder(),"function"==typeof this.options.onChipAdd&&this.options.onChipAdd(this.el,e)}deleteChip(t){const e=this._chips[t];this._chips[t].remove(),this._chips.splice(t,1),this.chipsData.splice(t,1),this._setPlaceholder(),"function"==typeof this.options.onChipDelete&&this.options.onChipDelete(this.el,e)}selectChip(t){const e=this._chips[t];this._selectedChip=e,e.focus(),"function"==typeof this.options.onChipSelect&&this.options.onChipSelect(this.el,e)}static Init(){"undefined"!=typeof document&&document.addEventListener("DOMContentLoaded",(()=>{document.body.addEventListener("click",(t=>{if(t.target.closest(".chip .close")){const e=t.target.closest(".chips");if(e&&null==e.M_Chips)return;t.target.closest(".chip").remove()}}))}))}static{m._keydown=!1}}const _={accordion:!0,onOpenStart:null,onOpenEnd:null,onCloseStart:null,onCloseEnd:null,inDuration:300,outDuration:300};class v extends i{_headers;constructor(t,e){super(t,e,v),this.el.M_Collapsible=this,this.options={...v.defaults,...e},this._headers=Array.from(this.el.querySelectorAll("li > .collapsible-header")),this._headers.forEach((t=>t.tabIndex=0)),this._setupEventHandlers();const i=Array.from(this.el.querySelectorAll("li.active > .collapsible-body"));this.options.accordion?i.length>0&&this._setExpanded(i[0]):i.forEach((t=>this._setExpanded(t)))}static get defaults(){return _}static init(t,e={}){return super.init(t,e,v)}static getInstance(t){return t.M_Collapsible}destroy(){this._removeEventHandlers(),this.el.M_Collapsible=void 0}_setupEventHandlers(){this.el.addEventListener("click",this._handleCollapsibleClick),this._headers.forEach((t=>t.addEventListener("keydown",this._handleCollapsibleKeydown)))}_removeEventHandlers(){this.el.removeEventListener("click",this._handleCollapsibleClick),this._headers.forEach((t=>t.removeEventListener("keydown",this._handleCollapsibleKeydown)))}_handleCollapsibleClick=t=>{const e=t.target.closest(".collapsible-header");if(t.target&&e){if(e.closest(".collapsible")!==this.el)return;const t=e.closest("li"),i=t.classList.contains("active"),s=[...t.parentNode.children].indexOf(t);i?this.close(s):this.open(s)}};_handleCollapsibleKeydown=t=>{e.keys.ENTER.includes(t.key)&&this._handleCollapsibleClick(t)};_setExpanded(t){t.style.maxHeight=t.scrollHeight+"px"}_animateIn(t){const e=this.el.children[t];if(!e)return;const i=e.querySelector(".collapsible-body"),s=this.options.inDuration;i.style.transition=`max-height ${s}ms ease-out`,this._setExpanded(i),setTimeout((()=>{"function"==typeof this.options.onOpenEnd&&this.options.onOpenEnd.call(this,e)}),s)}_animateOut(t){const e=this.el.children[t];if(!e)return;const i=e.querySelector(".collapsible-body"),s=this.options.outDuration;i.style.transition=`max-height ${s}ms ease-out`,i.style.maxHeight="0",setTimeout((()=>{"function"==typeof this.options.onCloseEnd&&this.options.onCloseEnd.call(this,e)}),s)}open=t=>{const e=Array.from(this.el.children).filter((t=>"LI"===t.tagName)),i=e[t];if(i&&!i.classList.contains("active")){if("function"==typeof this.options.onOpenStart&&this.options.onOpenStart.call(this,i),this.options.accordion){const t=e.filter((t=>t.classList.contains("active")));t.forEach((t=>{const i=e.indexOf(t);this.close(i)}))}i.classList.add("active"),this._animateIn(t)}};close=t=>{const e=Array.from(this.el.children).filter((t=>"LI"===t.tagName))[t];e&&e.classList.contains("active")&&("function"==typeof this.options.onCloseStart&&this.options.onCloseStart.call(this,e),e.classList.remove("active"),this._animateOut(t))}}const g={opacity:.5,inDuration:250,outDuration:250,onOpenStart:null,onOpenEnd:null,onCloseStart:null,onCloseEnd:null,preventScrolling:!0,dismissible:!0,startingTop:"4%",endingTop:"10%"};class y extends i{static _modalsOpen;static _count;id;isOpen;_openingTrigger;_overlay;_nthModalOpened;constructor(t,e){super(t,e,y),this.el.M_Modal=this,this.options={...y.defaults,...e},this.isOpen=!1,this.id=this.el.id,this._openingTrigger=void 0,this._overlay=document.createElement("div"),this._overlay.classList.add("modal-overlay"),this.el.tabIndex=0,this._nthModalOpened=0,y._count++,this._setupEventHandlers()}static get defaults(){return g}static init(t,e={}){return super.init(t,e,y)}static getInstance(t){return t.M_Modal}destroy(){y._count--,this._removeEventHandlers(),this.el.removeAttribute("style"),this._overlay.remove(),this.el.M_Modal=void 0}_setupEventHandlers(){1===y._count&&document.body.addEventListener("click",this._handleTriggerClick),this._overlay.addEventListener("click",this._handleOverlayClick),this.el.addEventListener("click",this._handleModalCloseClick)}_removeEventHandlers(){0===y._count&&document.body.removeEventListener("click",this._handleTriggerClick),this._overlay.removeEventListener("click",this._handleOverlayClick),this.el.removeEventListener("click",this._handleModalCloseClick)}_handleTriggerClick=t=>{const i=t.target.closest(".modal-trigger");if(!i)return;const s=e.getIdFromTrigger(i),n=document.getElementById(s).M_Modal;n&&n.open(i),t.preventDefault()};_handleOverlayClick=()=>{this.options.dismissible&&this.close()};_handleModalCloseClick=t=>{t.target.closest(".modal-close")&&this.close()};_handleKeydown=t=>{e.keys.ESC.includes(t.key)&&this.options.dismissible&&this.close()};_handleFocus=t=>{this.el.contains(t.target)||this._nthModalOpened!==y._modalsOpen||this.el.focus()};_animateIn(){this._overlay.style.display="block",this._overlay.style.opacity="0",this.el.style.display="block",this.el.style.opacity="0";const t=this.options.inDuration,e=this.el.classList.contains("bottom-sheet");e||(this.el.style.top=this.options.startingTop,this.el.style.transform="scaleX(0.9) scaleY(0.9)"),this._overlay.style.transition=`opacity ${t}ms ease-out`,this.el.style.transition=`\n top ${t}ms ease-out,\n bottom ${t}ms ease-out,\n opacity ${t}ms ease-out,\n transform ${t}ms ease-out\n `,setTimeout((()=>{this._overlay.style.opacity=this.options.opacity.toString(),this.el.style.opacity="1",e?this.el.style.bottom="0":(this.el.style.top=this.options.endingTop,this.el.style.transform="scaleX(1) scaleY(1)"),setTimeout((()=>{"function"==typeof this.options.onOpenEnd&&this.options.onOpenEnd.call(this,this.el,this._openingTrigger)}),t)}),1)}_animateOut(){const t=this.options.outDuration,e=this.el.classList.contains("bottom-sheet");e||(this.el.style.top=this.options.endingTop),this._overlay.style.transition=`opacity ${t}ms ease-out`,this.el.style.transition=`\n top ${t}ms ease-out,\n bottom ${t}ms ease-out,\n opacity ${t}ms ease-out,\n transform ${t}ms ease-out\n `,setTimeout((()=>{this._overlay.style.opacity="0",this.el.style.opacity="0",e?this.el.style.bottom="-100%":(this.el.style.top=this.options.startingTop,this.el.style.transform="scaleX(0.9) scaleY(0.9)"),setTimeout((()=>{this.el.style.display="none",this._overlay.remove(),"function"==typeof this.options.onCloseEnd&&this.options.onCloseEnd.call(this,this.el)}),t)}),1)}open=t=>{if(!this.isOpen){if(this.isOpen=!0,y._modalsOpen++,this._nthModalOpened=y._modalsOpen,this._overlay.style.zIndex=(1e3+2*y._modalsOpen).toString(),this.el.style.zIndex=(1e3+2*y._modalsOpen+1).toString(),this._openingTrigger=t||void 0,"function"==typeof this.options.onOpenStart&&this.options.onOpenStart.call(this,this.el,this._openingTrigger),this.options.preventScrolling){if(document.documentElement.scrollHeight>document.documentElement.clientHeight){const t=document.documentElement.scrollTop;document.documentElement.style.top="-"+t+"px",document.documentElement.classList.add("noscroll")}}return this.el.classList.add("open"),this.el.insertAdjacentElement("afterend",this._overlay),this.options.dismissible&&(document.addEventListener("keydown",this._handleKeydown),document.addEventListener("focus",this._handleFocus,!0)),this._animateIn(),this.el.focus(),this}};close=()=>{if(this.isOpen){if(this.isOpen=!1,y._modalsOpen--,this._nthModalOpened=0,"function"==typeof this.options.onCloseStart&&this.options.onCloseStart.call(this,this.el),this.el.classList.remove("open"),0===y._modalsOpen){const t=-parseInt(document.documentElement.style.top);document.documentElement.style.removeProperty("top"),document.documentElement.classList.remove("noscroll"),document.documentElement.scrollTop=t}return this.options.dismissible&&(document.removeEventListener("keydown",this._handleKeydown),document.removeEventListener("focus",this._handleFocus,!0)),this._animateOut(),this}};static create(t=""){return`\n
\n

${t}

\n

A bunch of text

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

Are you cool?

', Button('Yes'), Button('No')].join('')); -console.log(html); diff --git a/index.mjs b/index.mjs deleted file mode 100644 index bffb702976..0000000000 --- a/index.mjs +++ /dev/null @@ -1,29 +0,0 @@ -import { Button, Grid, Modal } from '@materializecss/materialize'; - -// This is experimental - -const html = - Grid(['

Are you cool?

', Button('Yes'), Button('No')].join('')) + Modal.create('test'); - -const Page = (children) => { - const c = Array.isArray(children) ? children.join('') : children; - return ` - - - ${c} - -`; -}; - -const Text = (children) => { - const c = Array.isArray(children) ? children.join('') : children; - return `

${c}

\n`; -}; - -const page = Page([ - Text('This is the header'), - Grid([Text('Are you cool?'), Button('Yes'), Button('No')]), - Text('This is the footer') -]); - -console.log(page.html); diff --git a/package-lock.json b/package-lock.json index 74059a46e3..7592e8c099 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@materializecss/materialize", - "version": "2.1.1", + "version": "2.2.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@materializecss/materialize", - "version": "2.1.1", + "version": "2.2.0", "funding": [ { "type": "github", @@ -23,6 +23,7 @@ "@rollup/plugin-typescript": "^11.1.6", "@types/node": "^20.5.2", "archiver": "^7.0.1", + "eslint": "^9.10.0", "jasmine": "^5.1.0", "jasmine-browser-runner": "^2.5.0", "jasmine-core": "^5.2.0", @@ -30,10 +31,10 @@ "rollup-plugin-copy": "^3.5.0", "rollup-plugin-dts": "^6.1.1", "rollup-plugin-scss": "^4.0.0", - "rollup-plugin-zip": "^1.0.3", "sass": "^1.77.8", "tslib": "^2.6.3", - "typescript": "^5.4.3" + "typescript": "^5.4.3", + "typescript-eslint": "^8.6.0" } }, "node_modules/@babel/code-frame": { @@ -144,6 +145,181 @@ "dev": true, "license": "Apache-2.0" }, + "node_modules/@eslint-community/eslint-utils": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", + "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==", + "dev": true, + "dependencies": { + "eslint-visitor-keys": "^3.3.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "peerDependencies": { + "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" + } + }, + "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/@eslint-community/regexpp": { + "version": "4.11.1", + "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.1.tgz", + "integrity": "sha512-m4DVN9ZqskZoLU5GlWZadwDnYo3vAEydiUayB9widCl9ffWx2IvPnp6n3on5rJmziJSw9Bv+Z3ChDVdMwXCY8Q==", + "dev": true, + "engines": { + "node": "^12.0.0 || ^14.0.0 || >=16.0.0" + } + }, + "node_modules/@eslint/config-array": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.18.0.tgz", + "integrity": "sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==", + "dev": true, + "dependencies": { + "@eslint/object-schema": "^2.1.4", + "debug": "^4.3.1", + "minimatch": "^3.1.2" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/config-array/node_modules/debug": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "dev": true, + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/@eslint/config-array/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true + }, + "node_modules/@eslint/eslintrc": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.1.0.tgz", + "integrity": "sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==", + "dev": true, + "dependencies": { + "ajv": "^6.12.4", + "debug": "^4.3.2", + "espree": "^10.0.1", + "globals": "^14.0.0", + "ignore": "^5.2.0", + "import-fresh": "^3.2.1", + "js-yaml": "^4.1.0", + "minimatch": "^3.1.2", + "strip-json-comments": "^3.1.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/@eslint/eslintrc/node_modules/debug": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "dev": true, + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/@eslint/eslintrc/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true + }, + "node_modules/@eslint/js": { + "version": "9.10.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.10.0.tgz", + "integrity": "sha512-fuXtbiP5GWIn8Fz+LWoOMVf/Jxm+aajZYkhi6CuEm4SxymFM+eUWzbO9qXT+L0iCkL5+KGYMCSGxo686H19S1g==", + "dev": true, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/object-schema": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.4.tgz", + "integrity": "sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==", + "dev": true, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/plugin-kit": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.1.0.tgz", + "integrity": "sha512-autAXT203ixhqei9xt+qkYOvY8l6LAFIdT2UXc/RPNeUVfqRF1BV94GTJyVPFKT8nFM6MyVJhjLj9E8JWvf5zQ==", + "dev": true, + "dependencies": { + "levn": "^0.4.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@humanwhocodes/module-importer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", + "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==", + "dev": true, + "engines": { + "node": ">=12.22" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" + } + }, + "node_modules/@humanwhocodes/retry": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.0.tgz", + "integrity": "sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==", + "dev": true, + "engines": { + "node": ">=18.18" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -406,9 +582,9 @@ } }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.20.0.tgz", - "integrity": "sha512-TSpWzflCc4VGAUJZlPpgAJE1+V60MePDQnBd7PPkpuEmOy8i87aL6tinFGKBFKuEDikYpig72QzdT3QPYIi+oA==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.26.0.tgz", + "integrity": "sha512-gJNwtPDGEaOEgejbaseY6xMFu+CPltsc8/T+diUTTbOQLqD+bnrJq9ulH6WD69TqwqWmrfRAtUv30cCFZlbGTQ==", "cpu": [ "arm" ], @@ -420,9 +596,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.20.0.tgz", - "integrity": "sha512-u00Ro/nok7oGzVuh/FMYfNoGqxU5CPWz1mxV85S2w9LxHR8OoMQBuSk+3BKVIDYgkpeOET5yXkx90OYFc+ytpQ==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.26.0.tgz", + "integrity": "sha512-YJa5Gy8mEZgz5JquFruhJODMq3lTHWLm1fOy+HIANquLzfIOzE9RA5ie3JjCdVb9r46qfAQY/l947V0zfGJ0OQ==", "cpu": [ "arm64" ], @@ -434,9 +610,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.20.0.tgz", - "integrity": "sha512-uFVfvzvsdGtlSLuL0ZlvPJvl6ZmrH4CBwLGEFPe7hUmf7htGAN+aXo43R/V6LATyxlKVC/m6UsLb7jbG+LG39Q==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.26.0.tgz", + "integrity": "sha512-ErTASs8YKbqTBoPLp/kA1B1Um5YSom8QAc4rKhg7b9tyyVqDBlQxy7Bf2wW7yIlPGPg2UODDQcbkTlruPzDosw==", "cpu": [ "arm64" ], @@ -448,9 +624,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.20.0.tgz", - "integrity": "sha512-xbrMDdlev53vNXexEa6l0LffojxhqDTBeL+VUxuuIXys4x6xyvbKq5XqTXBCEUA8ty8iEJblHvFaWRJTk/icAQ==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.26.0.tgz", + "integrity": "sha512-wbgkYDHcdWW+NqP2mnf2NOuEbOLzDblalrOWcPyY6+BRbVhliavon15UploG7PpBRQ2bZJnbmh8o3yLoBvDIHA==", "cpu": [ "x64" ], @@ -461,10 +637,38 @@ "darwin" ] }, + "node_modules/@rollup/rollup-freebsd-arm64": { + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.26.0.tgz", + "integrity": "sha512-Y9vpjfp9CDkAG4q/uwuhZk96LP11fBz/bYdyg9oaHYhtGZp7NrbkQrj/66DYMMP2Yo/QPAsVHkV891KyO52fhg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ] + }, + "node_modules/@rollup/rollup-freebsd-x64": { + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.26.0.tgz", + "integrity": "sha512-A/jvfCZ55EYPsqeaAt/yDAG4q5tt1ZboWMHEvKAH9Zl92DWvMIbnZe/f/eOXze65aJaaKbL+YeM0Hz4kLQvdwg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ] + }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.20.0.tgz", - "integrity": "sha512-jMYvxZwGmoHFBTbr12Xc6wOdc2xA5tF5F2q6t7Rcfab68TT0n+r7dgawD4qhPEvasDsVpQi+MgDzj2faOLsZjA==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.26.0.tgz", + "integrity": "sha512-paHF1bMXKDuizaMODm2bBTjRiHxESWiIyIdMugKeLnjuS1TCS54MF5+Y5Dx8Ui/1RBPVRE09i5OUlaLnv8OGnA==", "cpu": [ "arm" ], @@ -476,9 +680,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.20.0.tgz", - "integrity": "sha512-1asSTl4HKuIHIB1GcdFHNNZhxAYEdqML/MW4QmPS4G0ivbEcBr1JKlFLKsIRqjSwOBkdItn3/ZDlyvZ/N6KPlw==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.26.0.tgz", + "integrity": "sha512-cwxiHZU1GAs+TMxvgPfUDtVZjdBdTsQwVnNlzRXC5QzIJ6nhfB4I1ahKoe9yPmoaA/Vhf7m9dB1chGPpDRdGXg==", "cpu": [ "arm" ], @@ -490,9 +694,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.20.0.tgz", - "integrity": "sha512-COBb8Bkx56KldOYJfMf6wKeYJrtJ9vEgBRAOkfw6Ens0tnmzPqvlpjZiLgkhg6cA3DGzCmLmmd319pmHvKWWlQ==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.26.0.tgz", + "integrity": "sha512-4daeEUQutGRCW/9zEo8JtdAgtJ1q2g5oHaoQaZbMSKaIWKDQwQ3Yx0/3jJNmpzrsScIPtx/V+1AfibLisb3AMQ==", "cpu": [ "arm64" ], @@ -504,9 +708,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.20.0.tgz", - "integrity": "sha512-+it+mBSyMslVQa8wSPvBx53fYuZK/oLTu5RJoXogjk6x7Q7sz1GNRsXWjn6SwyJm8E/oMjNVwPhmNdIjwP135Q==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.26.0.tgz", + "integrity": "sha512-eGkX7zzkNxvvS05ROzJ/cO/AKqNvR/7t1jA3VZDi2vRniLKwAWxUr85fH3NsvtxU5vnUUKFHKh8flIBdlo2b3Q==", "cpu": [ "arm64" ], @@ -518,9 +722,9 @@ ] }, "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.20.0.tgz", - "integrity": "sha512-yAMvqhPfGKsAxHN8I4+jE0CpLWD8cv4z7CK7BMmhjDuz606Q2tFKkWRY8bHR9JQXYcoLfopo5TTqzxgPUjUMfw==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.26.0.tgz", + "integrity": "sha512-Odp/lgHbW/mAqw/pU21goo5ruWsytP7/HCC/liOt0zcGG0llYWKrd10k9Fj0pdj3prQ63N5yQLCLiE7HTX+MYw==", "cpu": [ "ppc64" ], @@ -532,9 +736,9 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.20.0.tgz", - "integrity": "sha512-qmuxFpfmi/2SUkAw95TtNq/w/I7Gpjurx609OOOV7U4vhvUhBcftcmXwl3rqAek+ADBwSjIC4IVNLiszoj3dPA==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.26.0.tgz", + "integrity": "sha512-MBR2ZhCTzUgVD0OJdTzNeF4+zsVogIR1U/FsyuFerwcqjZGvg2nYe24SAHp8O5sN8ZkRVbHwlYeHqcSQ8tcYew==", "cpu": [ "riscv64" ], @@ -546,9 +750,9 @@ ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.20.0.tgz", - "integrity": "sha512-I0BtGXddHSHjV1mqTNkgUZLnS3WtsqebAXv11D5BZE/gfw5KoyXSAXVqyJximQXNvNzUo4GKlCK/dIwXlz+jlg==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.26.0.tgz", + "integrity": "sha512-YYcg8MkbN17fMbRMZuxwmxWqsmQufh3ZJFxFGoHjrE7bv0X+T6l3glcdzd7IKLiwhT+PZOJCblpnNlz1/C3kGQ==", "cpu": [ "s390x" ], @@ -560,9 +764,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.20.0.tgz", - "integrity": "sha512-y+eoL2I3iphUg9tN9GB6ku1FA8kOfmF4oUEWhztDJ4KXJy1agk/9+pejOuZkNFhRwHAOxMsBPLbXPd6mJiCwew==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.26.0.tgz", + "integrity": "sha512-ZuwpfjCwjPkAOxpjAEjabg6LRSfL7cAJb6gSQGZYjGhadlzKKywDkCUnJ+KEfrNY1jH5EEoSIKLCb572jSiglA==", "cpu": [ "x64" ], @@ -574,9 +778,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.20.0.tgz", - "integrity": "sha512-hM3nhW40kBNYUkZb/r9k2FKK+/MnKglX7UYd4ZUy5DJs8/sMsIbqWK2piZtVGE3kcXVNj3B2IrUYROJMMCikNg==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.26.0.tgz", + "integrity": "sha512-+HJD2lFS86qkeF8kNu0kALtifMpPCZU80HvwztIKnYwym3KnA1os6nsX4BGSTLtS2QVAGG1P3guRgsYyMA0Yhg==", "cpu": [ "x64" ], @@ -588,9 +792,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.20.0.tgz", - "integrity": "sha512-psegMvP+Ik/Bg7QRJbv8w8PAytPA7Uo8fpFjXyCRHWm6Nt42L+JtoqH8eDQ5hRP7/XW2UiIriy1Z46jf0Oa1kA==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.26.0.tgz", + "integrity": "sha512-WUQzVFWPSw2uJzX4j6YEbMAiLbs0BUysgysh8s817doAYhR5ybqTI1wtKARQKo6cGop3pHnrUJPFCsXdoFaimQ==", "cpu": [ "arm64" ], @@ -602,9 +806,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.20.0.tgz", - "integrity": "sha512-GabekH3w4lgAJpVxkk7hUzUf2hICSQO0a/BLFA11/RMxQT92MabKAqyubzDZmMOC/hcJNlc+rrypzNzYl4Dx7A==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.26.0.tgz", + "integrity": "sha512-D4CxkazFKBfN1akAIY6ieyOqzoOoBV1OICxgUblWxff/pSjCA2khXlASUx7mK6W1oP4McqhgcCsu6QaLj3WMWg==", "cpu": [ "ia32" ], @@ -616,9 +820,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.20.0.tgz", - "integrity": "sha512-aJ1EJSuTdGnM6qbVC4B5DSmozPTqIag9fSzXRNNo+humQLG89XpPgdt16Ia56ORD7s+H8Pmyx44uczDQ0yDzpg==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.26.0.tgz", + "integrity": "sha512-2x8MO1rm4PGEP0xWbubJW5RtbNLk3puzAMaLQd3B3JHVw4KcHlmXcO+Wewx9zCoo7EUFiMlu/aZbCJ7VjMzAag==", "cpu": [ "x64" ], @@ -630,10 +834,11 @@ ] }, "node_modules/@types/estree": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", - "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", - "dev": true + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", + "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==", + "dev": true, + "license": "MIT" }, "node_modules/@types/fs-extra": { "version": "8.1.5", @@ -672,6 +877,293 @@ "undici-types": "~5.26.4" } }, + "node_modules/@typescript-eslint/eslint-plugin": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.6.0.tgz", + "integrity": "sha512-UOaz/wFowmoh2G6Mr9gw60B1mm0MzUtm6Ic8G2yM1Le6gyj5Loi/N+O5mocugRGY+8OeeKmkMmbxNqUCq3B4Sg==", + "dev": true, + "dependencies": { + "@eslint-community/regexpp": "^4.10.0", + "@typescript-eslint/scope-manager": "8.6.0", + "@typescript-eslint/type-utils": "8.6.0", + "@typescript-eslint/utils": "8.6.0", + "@typescript-eslint/visitor-keys": "8.6.0", + "graphemer": "^1.4.0", + "ignore": "^5.3.1", + "natural-compare": "^1.4.0", + "ts-api-utils": "^1.3.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0", + "eslint": "^8.57.0 || ^9.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/parser": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.6.0.tgz", + "integrity": "sha512-eQcbCuA2Vmw45iGfcyG4y6rS7BhWfz9MQuk409WD47qMM+bKCGQWXxvoOs1DUp+T7UBMTtRTVT+kXr7Sh4O9Ow==", + "dev": true, + "dependencies": { + "@typescript-eslint/scope-manager": "8.6.0", + "@typescript-eslint/types": "8.6.0", + "@typescript-eslint/typescript-estree": "8.6.0", + "@typescript-eslint/visitor-keys": "8.6.0", + "debug": "^4.3.4" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^8.57.0 || ^9.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/parser/node_modules/debug": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "dev": true, + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/parser/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true + }, + "node_modules/@typescript-eslint/scope-manager": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.6.0.tgz", + "integrity": "sha512-ZuoutoS5y9UOxKvpc/GkvF4cuEmpokda4wRg64JEia27wX+PysIE9q+lzDtlHHgblwUWwo5/Qn+/WyTUvDwBHw==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "8.6.0", + "@typescript-eslint/visitor-keys": "8.6.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/type-utils": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.6.0.tgz", + "integrity": "sha512-dtePl4gsuenXVwC7dVNlb4mGDcKjDT/Ropsk4za/ouMBPplCLyznIaR+W65mvCvsyS97dymoBRrioEXI7k0XIg==", + "dev": true, + "dependencies": { + "@typescript-eslint/typescript-estree": "8.6.0", + "@typescript-eslint/utils": "8.6.0", + "debug": "^4.3.4", + "ts-api-utils": "^1.3.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/type-utils/node_modules/debug": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "dev": true, + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/type-utils/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true + }, + "node_modules/@typescript-eslint/types": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.6.0.tgz", + "integrity": "sha512-rojqFZGd4MQxw33SrOy09qIDS8WEldM8JWtKQLAjf/X5mGSeEFh5ixQlxssMNyPslVIk9yzWqXCsV2eFhYrYUw==", + "dev": true, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/typescript-estree": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.6.0.tgz", + "integrity": "sha512-MOVAzsKJIPIlLK239l5s06YXjNqpKTVhBVDnqUumQJja5+Y94V3+4VUFRA0G60y2jNnTVwRCkhyGQpavfsbq/g==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "8.6.0", + "@typescript-eslint/visitor-keys": "8.6.0", + "debug": "^4.3.4", + "fast-glob": "^3.3.2", + "is-glob": "^4.0.3", + "minimatch": "^9.0.4", + "semver": "^7.6.0", + "ts-api-utils": "^1.3.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/debug": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "dev": true, + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true + }, + "node_modules/@typescript-eslint/utils": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.6.0.tgz", + "integrity": "sha512-eNp9cWnYf36NaOVjkEUznf6fEgVy1TWpE0o52e4wtojjBx7D1UV2WAWGzR+8Y5lVFtpMLPwNbC67T83DWSph4A==", + "dev": true, + "dependencies": { + "@eslint-community/eslint-utils": "^4.4.0", + "@typescript-eslint/scope-manager": "8.6.0", + "@typescript-eslint/types": "8.6.0", + "@typescript-eslint/typescript-estree": "8.6.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^8.57.0 || ^9.0.0" + } + }, + "node_modules/@typescript-eslint/visitor-keys": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.6.0.tgz", + "integrity": "sha512-wapVFfZg9H0qOYh4grNVQiMklJGluQrOUiOhYRrQWhx7BY/+I1IYb8BczWNbbUpO+pqy0rDciv3lQH5E1bCLrg==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "8.6.0", + "eslint-visitor-keys": "^3.4.3" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, "node_modules/abort-controller": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz", @@ -699,9 +1191,9 @@ } }, "node_modules/acorn": { - "version": "8.11.3", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", - "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", + "version": "8.12.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", + "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==", "dev": true, "bin": { "acorn": "bin/acorn" @@ -710,6 +1202,31 @@ "node": ">=0.4.0" } }, + "node_modules/acorn-jsx": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", + "dev": true, + "peerDependencies": { + "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" + } + }, + "node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, "node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", @@ -855,6 +1372,12 @@ "node": ">=8.0.0" } }, + "node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true + }, "node_modules/array-flatten": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", @@ -933,9 +1456,9 @@ } }, "node_modules/body-parser": { - "version": "1.20.2", - "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz", - "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==", + "version": "1.20.3", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz", + "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==", "dev": true, "license": "MIT", "dependencies": { @@ -947,7 +1470,7 @@ "http-errors": "2.0.0", "iconv-lite": "0.4.24", "on-finished": "2.4.1", - "qs": "6.11.0", + "qs": "6.13.0", "raw-body": "2.5.2", "type-is": "~1.6.18", "unpipe": "1.0.0" @@ -957,48 +1480,6 @@ "npm": "1.2.8000 || >= 1.4.16" } }, - "node_modules/body-parser/node_modules/iconv-lite": { - "version": "0.4.24", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", - "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", - "dev": true, - "license": "MIT", - "dependencies": { - "safer-buffer": ">= 2.1.2 < 3" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/body-parser/node_modules/on-finished": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", - "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==", - "dev": true, - "license": "MIT", - "dependencies": { - "ee-first": "1.1.1" - }, - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/body-parser/node_modules/qs": { - "version": "6.11.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", - "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "side-channel": "^1.0.4" - }, - "engines": { - "node": ">=0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -1047,15 +1528,6 @@ "ieee754": "^1.2.1" } }, - "node_modules/buffer-crc32": { - "version": "0.2.13", - "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz", - "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==", - "dev": true, - "engines": { - "node": "*" - } - }, "node_modules/buffer-from": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", @@ -1077,6 +1549,7 @@ "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==", "dev": true, + "license": "MIT", "dependencies": { "es-define-property": "^1.0.0", "es-errors": "^1.3.0", @@ -1091,6 +1564,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -1260,9 +1742,9 @@ } }, "node_modules/cookie": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", - "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==", + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz", + "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==", "dev": true, "license": "MIT", "engines": { @@ -1328,15 +1810,23 @@ "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", "dev": true, + "license": "MIT", "dependencies": { "ms": "2.0.0" } }, + "node_modules/deep-is": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", + "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", + "dev": true + }, "node_modules/define-data-property": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==", "dev": true, + "license": "MIT", "dependencies": { "es-define-property": "^1.0.0", "es-errors": "^1.3.0", @@ -1354,6 +1844,7 @@ "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.8" } @@ -1392,7 +1883,8 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/ejs": { "version": "3.1.10", @@ -1411,10 +1903,11 @@ } }, "node_modules/encodeurl": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", - "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz", + "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.8" } @@ -1424,6 +1917,7 @@ "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==", "dev": true, + "license": "MIT", "dependencies": { "get-intrinsic": "^1.2.4" }, @@ -1436,6 +1930,7 @@ "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.4" } @@ -1444,8 +1939,193 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==", + "dev": true, + "license": "MIT" + }, + "node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint": { + "version": "9.10.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.10.0.tgz", + "integrity": "sha512-Y4D0IgtBZfOcOUAIQTSXBKoNGfY0REGqHJG6+Q81vNippW5YlKjHFj4soMxamKK1NXHUWuBZTLdU3Km+L/pcHw==", + "dev": true, + "dependencies": { + "@eslint-community/eslint-utils": "^4.2.0", + "@eslint-community/regexpp": "^4.11.0", + "@eslint/config-array": "^0.18.0", + "@eslint/eslintrc": "^3.1.0", + "@eslint/js": "9.10.0", + "@eslint/plugin-kit": "^0.1.0", + "@humanwhocodes/module-importer": "^1.0.1", + "@humanwhocodes/retry": "^0.3.0", + "@nodelib/fs.walk": "^1.2.8", + "ajv": "^6.12.4", + "chalk": "^4.0.0", + "cross-spawn": "^7.0.2", + "debug": "^4.3.2", + "escape-string-regexp": "^4.0.0", + "eslint-scope": "^8.0.2", + "eslint-visitor-keys": "^4.0.0", + "espree": "^10.1.0", + "esquery": "^1.5.0", + "esutils": "^2.0.2", + "fast-deep-equal": "^3.1.3", + "file-entry-cache": "^8.0.0", + "find-up": "^5.0.0", + "glob-parent": "^6.0.2", + "ignore": "^5.2.0", + "imurmurhash": "^0.1.4", + "is-glob": "^4.0.0", + "is-path-inside": "^3.0.3", + "json-stable-stringify-without-jsonify": "^1.0.1", + "lodash.merge": "^4.6.2", + "minimatch": "^3.1.2", + "natural-compare": "^1.4.0", + "optionator": "^0.9.3", + "strip-ansi": "^6.0.1", + "text-table": "^0.2.0" + }, + "bin": { + "eslint": "bin/eslint.js" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://eslint.org/donate" + }, + "peerDependencies": { + "jiti": "*" + }, + "peerDependenciesMeta": { + "jiti": { + "optional": true + } + } + }, + "node_modules/eslint-scope": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.0.2.tgz", + "integrity": "sha512-6E4xmrTw5wtxnLA5wYL3WDfhZ/1bUBGOXV0zQvVRDOtrR8D0p6W7fs3JweNYhwRYeGvd/1CKX2se0/2s7Q/nJA==", + "dev": true, + "dependencies": { + "esrecurse": "^4.3.0", + "estraverse": "^5.2.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint-visitor-keys": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz", + "integrity": "sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==", + "dev": true, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint/node_modules/debug": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "dev": true, + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/eslint/node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/eslint/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", "dev": true }, + "node_modules/espree": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/espree/-/espree-10.1.0.tgz", + "integrity": "sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==", + "dev": true, + "dependencies": { + "acorn": "^8.12.0", + "acorn-jsx": "^5.3.2", + "eslint-visitor-keys": "^4.0.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/esquery": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz", + "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==", + "dev": true, + "dependencies": { + "estraverse": "^5.1.0" + }, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/esrecurse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz", + "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==", + "dev": true, + "dependencies": { + "estraverse": "^5.2.0" + }, + "engines": { + "node": ">=4.0" + } + }, + "node_modules/estraverse": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", + "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", + "dev": true, + "engines": { + "node": ">=4.0" + } + }, "node_modules/estree-walker": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", @@ -1453,11 +2133,21 @@ "dev": true, "license": "MIT" }, + "node_modules/esutils": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", + "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/etag": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -1483,38 +2173,38 @@ } }, "node_modules/express": { - "version": "4.19.2", - "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz", - "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==", + "version": "4.21.1", + "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz", + "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==", "dev": true, "license": "MIT", "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", - "body-parser": "1.20.2", + "body-parser": "1.20.3", "content-disposition": "0.5.4", "content-type": "~1.0.4", - "cookie": "0.6.0", + "cookie": "0.7.1", "cookie-signature": "1.0.6", "debug": "2.6.9", "depd": "2.0.0", - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "etag": "~1.8.1", - "finalhandler": "1.2.0", + "finalhandler": "1.3.1", "fresh": "0.5.2", "http-errors": "2.0.0", - "merge-descriptors": "1.0.1", + "merge-descriptors": "1.0.3", "methods": "~1.1.2", "on-finished": "2.4.1", "parseurl": "~1.3.3", - "path-to-regexp": "0.1.7", + "path-to-regexp": "0.1.10", "proxy-addr": "~2.0.7", - "qs": "6.11.0", + "qs": "6.13.0", "range-parser": "~1.2.1", "safe-buffer": "5.2.1", - "send": "0.18.0", - "serve-static": "1.15.0", + "send": "0.19.0", + "serve-static": "1.16.2", "setprototypeof": "1.2.0", "statuses": "2.0.1", "type-is": "~1.6.18", @@ -1525,54 +2215,6 @@ "node": ">= 0.10.0" } }, - "node_modules/express/node_modules/finalhandler": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", - "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==", - "dev": true, - "license": "MIT", - "dependencies": { - "debug": "2.6.9", - "encodeurl": "~1.0.2", - "escape-html": "~1.0.3", - "on-finished": "2.4.1", - "parseurl": "~1.3.3", - "statuses": "2.0.1", - "unpipe": "~1.0.0" - }, - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/express/node_modules/on-finished": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", - "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==", - "dev": true, - "license": "MIT", - "dependencies": { - "ee-first": "1.1.1" - }, - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/express/node_modules/qs": { - "version": "6.11.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", - "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "side-channel": "^1.0.4" - }, - "engines": { - "node": ">=0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/express/node_modules/safe-buffer": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", @@ -1594,6 +2236,12 @@ ], "license": "MIT" }, + "node_modules/fast-deep-equal": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", + "dev": true + }, "node_modules/fast-fifo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz", @@ -1618,6 +2266,18 @@ "node": ">=8.6.0" } }, + "node_modules/fast-json-stable-stringify": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", + "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", + "dev": true + }, + "node_modules/fast-levenshtein": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", + "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", + "dev": true + }, "node_modules/fastq": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz", @@ -1627,6 +2287,18 @@ "reusify": "^1.0.4" } }, + "node_modules/file-entry-cache": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", + "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==", + "dev": true, + "dependencies": { + "flat-cache": "^4.0.0" + }, + "engines": { + "node": ">=16.0.0" + } + }, "node_modules/filelist": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz", @@ -1673,6 +2345,60 @@ "node": ">=8" } }, + "node_modules/finalhandler": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz", + "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "debug": "2.6.9", + "encodeurl": "~2.0.0", + "escape-html": "~1.0.3", + "on-finished": "2.4.1", + "parseurl": "~1.3.3", + "statuses": "2.0.1", + "unpipe": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/find-up": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", + "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", + "dev": true, + "dependencies": { + "locate-path": "^6.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/flat-cache": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz", + "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==", + "dev": true, + "dependencies": { + "flatted": "^3.2.9", + "keyv": "^4.5.4" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/flatted": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz", + "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", + "dev": true + }, "node_modules/foreground-child": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz", @@ -1704,6 +2430,7 @@ "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -1757,6 +2484,7 @@ "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz", "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==", "dev": true, + "license": "MIT", "dependencies": { "es-errors": "^1.3.0", "function-bind": "^1.1.2", @@ -1803,6 +2531,18 @@ "node": ">= 6" } }, + "node_modules/globals": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz", + "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==", + "dev": true, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/globby": { "version": "10.0.1", "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.1.tgz", @@ -1828,6 +2568,7 @@ "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==", "dev": true, + "license": "MIT", "dependencies": { "get-intrinsic": "^1.1.3" }, @@ -1841,6 +2582,12 @@ "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", "dev": true }, + "node_modules/graphemer": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", + "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", + "dev": true + }, "node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", @@ -1856,6 +2603,7 @@ "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz", "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==", "dev": true, + "license": "MIT", "dependencies": { "es-define-property": "^1.0.0" }, @@ -1868,6 +2616,7 @@ "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz", "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.4" }, @@ -1880,6 +2629,7 @@ "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.4" }, @@ -1904,6 +2654,7 @@ "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz", "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==", "dev": true, + "license": "MIT", "dependencies": { "depd": "2.0.0", "inherits": "2.0.4", @@ -1915,6 +2666,19 @@ "node": ">= 0.8" } }, + "node_modules/iconv-lite": { + "version": "0.4.24", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "dev": true, + "license": "MIT", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/ieee754": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", @@ -1952,6 +2716,31 @@ "dev": true, "license": "MIT" }, + "node_modules/import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dev": true, + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/imurmurhash": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", + "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==", + "dev": true, + "engines": { + "node": ">=0.8.19" + } + }, "node_modules/inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -2033,6 +2822,15 @@ "node": ">=0.12.0" } }, + "node_modules/is-path-inside": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz", + "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/is-stream": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", @@ -2092,20 +2890,7 @@ "jake": "bin/cli.js" }, "engines": { - "node": ">=10" - } - }, - "node_modules/jake/node_modules/minimatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", - "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", - "dev": true, - "license": "ISC", - "dependencies": { - "brace-expansion": "^1.1.7" - }, - "engines": { - "node": "*" + "node": ">=10" } }, "node_modules/jasmine": { @@ -2270,6 +3055,36 @@ "dev": true, "optional": true }, + "node_modules/js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/json-buffer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz", + "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==", + "dev": true + }, + "node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true + }, + "node_modules/json-stable-stringify-without-jsonify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", + "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", + "dev": true + }, "node_modules/jsonfile": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", @@ -2319,6 +3134,15 @@ "safe-buffer": "~5.1.0" } }, + "node_modules/keyv": { + "version": "4.5.4", + "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", + "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==", + "dev": true, + "dependencies": { + "json-buffer": "3.0.1" + } + }, "node_modules/lazystream": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz", @@ -2358,6 +3182,19 @@ "safe-buffer": "~5.1.0" } }, + "node_modules/levn": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", + "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==", + "dev": true, + "dependencies": { + "prelude-ls": "^1.2.1", + "type-check": "~0.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/lie": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz", @@ -2368,6 +3205,21 @@ "immediate": "~3.0.5" } }, + "node_modules/locate-path": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", + "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", + "dev": true, + "dependencies": { + "p-locate": "^5.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", @@ -2375,6 +3227,12 @@ "dev": true, "license": "MIT" }, + "node_modules/lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true + }, "node_modules/magic-string": { "version": "0.30.11", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz", @@ -2396,11 +3254,14 @@ } }, "node_modules/merge-descriptors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", - "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz", + "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==", "dev": true, - "license": "MIT" + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } }, "node_modules/merge2": { "version": "1.4.1", @@ -2471,9 +3332,9 @@ } }, "node_modules/minimatch": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz", - "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", "dev": true, "dependencies": { "brace-expansion": "^1.1.7" @@ -2496,6 +3357,13 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", + "dev": true, + "license": "MIT" + }, + "node_modules/natural-compare": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", + "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "dev": true }, "node_modules/negotiator": { @@ -2517,14 +3385,31 @@ } }, "node_modules/object-inspect": { - "version": "1.13.1", - "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz", - "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==", + "version": "1.13.3", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.3.tgz", + "integrity": "sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==", "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, "funding": { "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/on-finished": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", + "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==", + "dev": true, + "license": "MIT", + "dependencies": { + "ee-first": "1.1.1" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -2534,6 +3419,53 @@ "wrappy": "1" } }, + "node_modules/optionator": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz", + "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==", + "dev": true, + "dependencies": { + "deep-is": "^0.1.3", + "fast-levenshtein": "^2.0.6", + "levn": "^0.4.1", + "prelude-ls": "^1.2.1", + "type-check": "^0.4.0", + "word-wrap": "^1.2.5" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/p-limit": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", + "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", + "dev": true, + "dependencies": { + "yocto-queue": "^0.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/p-locate": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", + "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", + "dev": true, + "dependencies": { + "p-limit": "^3.0.2" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/package-json-from-dist": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz", @@ -2548,15 +3480,37 @@ "dev": true, "license": "(MIT AND Zlib)" }, + "node_modules/parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, + "dependencies": { + "callsites": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/parseurl": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.8" } }, + "node_modules/path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/path-is-absolute": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", @@ -2608,9 +3562,9 @@ } }, "node_modules/path-to-regexp": { - "version": "0.1.7", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", - "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==", + "version": "0.1.10", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz", + "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==", "dev": true, "license": "MIT" }, @@ -2643,6 +3597,15 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/prelude-ls": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", + "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", + "dev": true, + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -2673,6 +3636,31 @@ "node": ">= 0.10" } }, + "node_modules/punycode": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", + "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/qs": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", + "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "side-channel": "^1.0.6" + }, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -2714,6 +3702,7 @@ "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -2734,19 +3723,6 @@ "node": ">= 0.8" } }, - "node_modules/raw-body/node_modules/iconv-lite": { - "version": "0.4.24", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", - "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", - "dev": true, - "license": "MIT", - "dependencies": { - "safer-buffer": ">= 2.1.2 < 3" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/readable-stream": { "version": "4.5.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.5.2.tgz", @@ -2826,6 +3802,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, + "engines": { + "node": ">=4" + } + }, "node_modules/reusify": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", @@ -2837,13 +3822,13 @@ } }, "node_modules/rollup": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.20.0.tgz", - "integrity": "sha512-6rbWBChcnSGzIlXeIdNIZTopKYad8ZG8ajhl78lGRLsI2rX8IkaotQhVas2Ma+GPxJav19wrSzvRvuiv0YKzWw==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.26.0.tgz", + "integrity": "sha512-ilcl12hnWonG8f+NxU6BlgysVA0gvY2l8N0R84S1HcINbW20bvwuCngJkkInV6LXhwRpucsW5k1ovDwEdBVrNg==", "dev": true, "license": "MIT", "dependencies": { - "@types/estree": "1.0.5" + "@types/estree": "1.0.6" }, "bin": { "rollup": "dist/bin/rollup" @@ -2853,22 +3838,24 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.20.0", - "@rollup/rollup-android-arm64": "4.20.0", - "@rollup/rollup-darwin-arm64": "4.20.0", - "@rollup/rollup-darwin-x64": "4.20.0", - "@rollup/rollup-linux-arm-gnueabihf": "4.20.0", - "@rollup/rollup-linux-arm-musleabihf": "4.20.0", - "@rollup/rollup-linux-arm64-gnu": "4.20.0", - "@rollup/rollup-linux-arm64-musl": "4.20.0", - "@rollup/rollup-linux-powerpc64le-gnu": "4.20.0", - "@rollup/rollup-linux-riscv64-gnu": "4.20.0", - "@rollup/rollup-linux-s390x-gnu": "4.20.0", - "@rollup/rollup-linux-x64-gnu": "4.20.0", - "@rollup/rollup-linux-x64-musl": "4.20.0", - "@rollup/rollup-win32-arm64-msvc": "4.20.0", - "@rollup/rollup-win32-ia32-msvc": "4.20.0", - "@rollup/rollup-win32-x64-msvc": "4.20.0", + "@rollup/rollup-android-arm-eabi": "4.26.0", + "@rollup/rollup-android-arm64": "4.26.0", + "@rollup/rollup-darwin-arm64": "4.26.0", + "@rollup/rollup-darwin-x64": "4.26.0", + "@rollup/rollup-freebsd-arm64": "4.26.0", + "@rollup/rollup-freebsd-x64": "4.26.0", + "@rollup/rollup-linux-arm-gnueabihf": "4.26.0", + "@rollup/rollup-linux-arm-musleabihf": "4.26.0", + "@rollup/rollup-linux-arm64-gnu": "4.26.0", + "@rollup/rollup-linux-arm64-musl": "4.26.0", + "@rollup/rollup-linux-powerpc64le-gnu": "4.26.0", + "@rollup/rollup-linux-riscv64-gnu": "4.26.0", + "@rollup/rollup-linux-s390x-gnu": "4.26.0", + "@rollup/rollup-linux-x64-gnu": "4.26.0", + "@rollup/rollup-linux-x64-musl": "4.26.0", + "@rollup/rollup-win32-arm64-msvc": "4.26.0", + "@rollup/rollup-win32-ia32-msvc": "4.26.0", + "@rollup/rollup-win32-x64-msvc": "4.26.0", "fsevents": "~2.3.2" } }, @@ -2932,19 +3919,6 @@ "rollup-pluginutils": "^2.3.3" } }, - "node_modules/rollup-plugin-zip": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/rollup-plugin-zip/-/rollup-plugin-zip-1.0.3.tgz", - "integrity": "sha512-HTF9I4VjJnDVXd37P/POZPi8p5Luq4mP7A3Lbaxk3wPxRg8DXbxLHDlWxP9X3I1wYYgbT+xHuw8WEwb8RKwpQw==", - "dev": true, - "license": "MIT", - "dependencies": { - "yazl": "^2.5.1" - }, - "peerDependencies": { - "rollup": ">=2.0.2" - } - }, "node_modules/rollup-pluginutils": { "version": "2.8.2", "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", @@ -2995,7 +3969,8 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/sass": { "version": "1.77.8", @@ -3059,10 +4034,22 @@ } } }, + "node_modules/semver": { + "version": "7.6.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", + "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/send": { - "version": "0.18.0", - "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz", - "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==", + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz", + "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==", "dev": true, "license": "MIT", "dependencies": { @@ -3084,6 +4071,16 @@ "node": ">= 0.8.0" } }, + "node_modules/send/node_modules/encodeurl": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", + "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, "node_modules/send/node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -3091,19 +4088,6 @@ "dev": true, "license": "MIT" }, - "node_modules/send/node_modules/on-finished": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", - "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==", - "dev": true, - "license": "MIT", - "dependencies": { - "ee-first": "1.1.1" - }, - "engines": { - "node": ">= 0.8" - } - }, "node_modules/serialize-javascript": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", @@ -3114,16 +4098,16 @@ } }, "node_modules/serve-static": { - "version": "1.15.0", - "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz", - "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==", + "version": "1.16.2", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz", + "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==", "dev": true, "license": "MIT", "dependencies": { - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "parseurl": "~1.3.3", - "send": "0.18.0" + "send": "0.19.0" }, "engines": { "node": ">= 0.8.0" @@ -3134,6 +4118,7 @@ "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==", "dev": true, + "license": "MIT", "dependencies": { "define-data-property": "^1.1.4", "es-errors": "^1.3.0", @@ -3156,7 +4141,8 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==", - "dev": true + "dev": true, + "license": "ISC" }, "node_modules/shebang-command": { "version": "2.0.0", @@ -3184,6 +4170,7 @@ "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz", "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==", "dev": true, + "license": "MIT", "dependencies": { "call-bind": "^1.0.7", "es-errors": "^1.3.0", @@ -3365,6 +4352,18 @@ "node": ">=8" } }, + "node_modules/strip-json-comments": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", + "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", + "dev": true, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -3436,6 +4435,12 @@ "b4a": "^1.6.4" } }, + "node_modules/text-table": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", + "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", + "dev": true + }, "node_modules/tmp": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz", @@ -3464,10 +4469,23 @@ "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==", "dev": true, + "license": "MIT", "engines": { "node": ">=0.6" } }, + "node_modules/ts-api-utils": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz", + "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==", + "dev": true, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "typescript": ">=4.2.0" + } + }, "node_modules/tslib": { "version": "2.6.3", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz", @@ -3475,6 +4493,18 @@ "dev": true, "license": "0BSD" }, + "node_modules/type-check": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", + "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==", + "dev": true, + "dependencies": { + "prelude-ls": "^1.2.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/type-is": { "version": "1.6.18", "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", @@ -3502,6 +4532,29 @@ "node": ">=14.17" } }, + "node_modules/typescript-eslint": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.6.0.tgz", + "integrity": "sha512-eEhhlxCEpCd4helh3AO1hk0UP2MvbRi9CtIAJTVPQjuSXOOO2jsEacNi4UdcJzZJbeuVg1gMhtZ8UYb+NFYPrA==", + "dev": true, + "dependencies": { + "@typescript-eslint/eslint-plugin": "8.6.0", + "@typescript-eslint/parser": "8.6.0", + "@typescript-eslint/utils": "8.6.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/undici-types": { "version": "5.26.5", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", @@ -3528,6 +4581,15 @@ "node": ">= 0.8" } }, + "node_modules/uri-js": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", + "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", + "dev": true, + "dependencies": { + "punycode": "^2.1.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -3568,6 +4630,15 @@ "node": ">= 8" } }, + "node_modules/word-wrap": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz", + "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/wrap-ansi-cjs": { "name": "wrap-ansi", "version": "7.0.0", @@ -3654,14 +4725,16 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, - "node_modules/yazl": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/yazl/-/yazl-2.5.1.tgz", - "integrity": "sha512-phENi2PLiHnHb6QBVot+dJnaAZ0xosj7p3fWl+znIjBDlnMI2PsZCJZ306BPTFOaHf5qdDEI8x5qFrSOBN5vrw==", + "node_modules/yocto-queue": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", + "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", "dev": true, - "license": "MIT", - "dependencies": { - "buffer-crc32": "~0.2.3" + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/zip-stream": { diff --git a/package.json b/package.json index c9a832bbcf..c2bf21cfd3 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "description": "The responsive front-end library based on Material Design from Google.", "author": "The Materialize Team", "homepage": "https://materializeweb.com", - "version": "2.1.1", + "version": "2.2.0", "style": "dist/css/materialize.css", "sass": "sass/materialize.scss", "typings": "dist/js/materialize.d.ts", @@ -32,10 +32,10 @@ } ], "scripts": { - "test": "npx jasmine-browser-runner runSpecs", + "lint": "eslint .", + "test": "npm run build && jasmine-browser-runner runSpecs", "build": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript", - "release": " npm run build && node ci/compress.js", - "preversion": "npm test", + "release": "npm run lint && npm run build && node ci/compress.js", "version": "npm run build && node ci/compress.js && git add -A dist src/index.ts" }, "lint-staged": { @@ -56,6 +56,7 @@ "@rollup/plugin-typescript": "^11.1.6", "@types/node": "^20.5.2", "archiver": "^7.0.1", + "eslint": "^9.10.0", "jasmine": "^5.1.0", "jasmine-browser-runner": "^2.5.0", "jasmine-core": "^5.2.0", @@ -63,10 +64,10 @@ "rollup-plugin-copy": "^3.5.0", "rollup-plugin-dts": "^6.1.1", "rollup-plugin-scss": "^4.0.0", - "rollup-plugin-zip": "^1.0.3", "sass": "^1.77.8", "tslib": "^2.6.3", - "typescript": "^5.4.3" + "typescript": "^5.4.3", + "typescript-eslint": "^8.6.0" }, "files": [ "dist", diff --git a/rollup.config.ts b/rollup.config.ts index 2cc0ccdf9f..5a13433de5 100644 --- a/rollup.config.ts +++ b/rollup.config.ts @@ -4,7 +4,6 @@ import typescriptPlugin from '@rollup/plugin-typescript'; import terserPlugin from '@rollup/plugin-terser'; import dtsPlugin from 'rollup-plugin-dts'; import scss from 'rollup-plugin-scss'; -import zip from 'rollup-plugin-zip'; import copy from 'rollup-plugin-copy'; import { readFileSync } from 'fs'; diff --git a/sass/components/_badges.scss b/sass/components/_badges.scss index a0f77038e4..d96fbf00d6 100644 --- a/sass/components/_badges.scss +++ b/sass/components/_badges.scss @@ -53,6 +53,11 @@ nav ul a span.badge { .collapsible span.badge { margin-left: auto; + + &.leading { + margin-right: 7px; + order: -1; + } } .collapsible .active span.badge:not(.new) { diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss index 4d24bc85b1..8c3cecc7ae 100644 --- a/sass/components/_buttons.scss +++ b/sass/components/_buttons.scss @@ -12,7 +12,7 @@ border-radius: var(--btn-border-radius); padding-left: var(--btn-padding); padding-right: var(--btn-padding); - font-size: ver(--btn-font-size); + font-size: var(--btn-font-size); font-weight: 500; text-decoration: none; display: inline-flex; @@ -29,19 +29,24 @@ .btn.icon-left, .btn.icon-right { position: relative; } + .btn.icon-left { padding-left: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon)); } + .btn.icon-right { - padding-right: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon)); + padding-right: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon)); } + .btn.icon-left i, .btn.icon-right i { position: absolute; font-size: var(--btn-font-size-icon); } + .btn.icon-left i { left: var(--btn-padding-icon); } + .btn.icon-right i { right: var(--btn-padding-icon); } @@ -80,12 +85,10 @@ .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[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; @@ -158,8 +161,7 @@ &.elevated, &.tonal, &.outlined, - &.text - { + &.text { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } @@ -190,10 +192,12 @@ @extend .z-depth-1-half; background-color: color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 16%); } + &:focus { background-color: $button-floating-background-focus; @extend .z-depth-1-half; } + &:before { border-radius: 0; } @@ -202,10 +206,11 @@ &.halfway-fab { bottom: -56px * 0.5; } + width: 56px; height: 56px; padding: 0; - // font-size: + // font-size: // i { // // line-height: 56px; // } @@ -213,10 +218,12 @@ &.btn-small { --btn-small-height: calc(0.75 * var(--btn-height)); + &.halfway-fab { bottom: calc(var(--btn-small-height) * -0.5); } - width: var(--btn-small-height)e; + + width: var(--btn-small-height); height: var(--btn-small-height); // i { // line-height: $button-floating-small-size; @@ -228,10 +235,12 @@ right: auto; left: 24px; } + position: absolute; right: 24px; bottom: -$button-floating-size * 0.5; } + // FIXES // width: unset; // padding: 16px !important; @@ -262,17 +271,19 @@ text-align: center; } } + // button fix button.btn-floating { border: none; } + // Fixed Action Button .fixed-action-btn { &.active { ul { visibility: visible; padding-left: 0; - list-style-type: none; + list-style-type: none; } } @@ -280,6 +291,7 @@ button.btn-floating { &.direction-left, &.direction-right { padding: 0 0 0 15px; + ul { text-align: right; right: 64px; @@ -289,55 +301,67 @@ button.btn-floating { left: auto; /*width 100% only goes to width of button container */ width: 500px; + li { display: inline-block; margin: 7.5px 15px 0 0; } } } + &.direction-right { padding: 0 15px 0 0; + ul { text-align: left; direction: rtl; left: 64px; right: auto; + li { margin: 7.5px 0 0 15px; } } } + &.direction-bottom { padding: 0 0 15px 0; + ul { top: 64px; bottom: auto; display: flex; flex-direction: column-reverse; + li { margin: 15px 0 0 0; } } } + &.toolbar { &.active { - &>a i { + & > a i { opacity: 0; } } + padding: 0; height: 56px; + ul { display: flex; top: 0; bottom: 0; z-index: 1; + li { flex: 1; display: inline-block; margin: 0; height: 100%; transition: none; + a { display: block; overflow: hidden; @@ -349,6 +373,7 @@ button.btn-floating { color: $button-floating-color; line-height: 56px; z-index: 1; + i { line-height: inherit; } @@ -356,12 +381,14 @@ button.btn-floating { } } } + position: fixed; right: 23px; bottom: 23px; padding-top: 15px; margin-bottom: 0; z-index: 997; + ul { left: 0; right: 0; @@ -370,13 +397,16 @@ button.btn-floating { bottom: 64px; margin: 0; visibility: hidden; + li { margin-bottom: 15px; } + a.btn-floating { opacity: 0; } } + .fab-backdrop { position: absolute; top: 0; @@ -398,6 +428,7 @@ button.btn-floating { height: calc(1.5 * var(--btn-height)); font-size: 18px; padding: 0 28px; + i { font-size: 1.6rem; } @@ -408,6 +439,7 @@ button.btn-floating { @extend .btn; height: calc(0.75 * var(--btn-height)); font-size: 13px; + i { font-size: 1.2rem; } @@ -420,4 +452,4 @@ button.btn-floating { .btn.rounded { border-radius: 99999px; -} \ No newline at end of file +} diff --git a/sass/components/_cards.scss b/sass/components/_cards.scss index 647a742a1f..ff01560383 100644 --- a/sass/components/_cards.scss +++ b/sass/components/_cards.scss @@ -19,9 +19,6 @@ .card-title { font-size: 24px; font-weight: 300; - &.activator { - cursor: pointer; - } } // Card Sizes @@ -32,13 +29,16 @@ max-height: 60%; overflow: hidden; } + .card-image + .card-content { max-height: 40%; } + .card-content { max-height: 100%; overflow: hidden; } + .card-action { position: absolute; bottom: 0; @@ -77,6 +77,7 @@ .card-image { max-width: 50%; + img { border-radius: 2px 0 0 2px; max-width: 100%; @@ -108,9 +109,6 @@ } } - - - .card-image { position: relative; @@ -134,6 +132,15 @@ max-width: 100%; padding: 24px; } + + .activator { + position: absolute; + left: 0; + right: 0; + top:0; + bottom: 0; + cursor: pointer; + } } .card-content { @@ -143,6 +150,7 @@ p { margin: 0; } + .card-title { display: block; line-height: 32px; @@ -151,6 +159,10 @@ i { line-height: 32px; } + + &.activator { + cursor: pointer; + } } } diff --git a/sass/components/_chips.scss b/sass/components/_chips.scss index 2e28d0cc02..0750b176d5 100644 --- a/sass/components/_chips.scss +++ b/sass/components/_chips.scss @@ -75,7 +75,6 @@ flex-wrap: wrap; border: none; - border-bottom: 1px solid var(--md-sys-color-on-surface-variant); box-shadow: none; margin: 0 0 8px 0; @@ -90,8 +89,12 @@ box-shadow: 0 1px 0 0 var(--md-sys-color-primary); } - &:hover { - cursor: text; + &.input-field { + border-bottom: 1px solid var(--md-sys-color-on-surface-variant); + + &:hover { + cursor: text; + } } input:not([type]):not(.browser-default).input { @@ -109,6 +112,9 @@ margin: 0; padding: 0; width: 120px; + width: fit-content; + min-width: 100px; + max-width: 200px; &:focus { diff --git a/sass/components/_collapsible.scss b/sass/components/_collapsible.scss index 4b42e89703..2c106492c4 100644 --- a/sass/components/_collapsible.scss +++ b/sass/components/_collapsible.scss @@ -31,20 +31,26 @@ } .collapsible-header::after { - content: 'â–¾'; - text-align: right; - margin-right: 0.25rem; - width: 100%; + content: '\e5cf'; + 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: "â–´"; + content: '\e5ce'; } - .keyboard-focused .collapsible-header:focus { background-color: rgba(0, 0, 0, 0.12); } +.collapsible-header-content { + flex-grow: 1; +} + .collapsible-body { max-height: 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); diff --git a/sass/components/_datepicker.scss b/sass/components/_datepicker.scss index 1d2cc5b1e3..be6491e9c3 100644 --- a/sass/components/_datepicker.scss +++ b/sass/components/_datepicker.scss @@ -38,6 +38,11 @@ } } + .select-dropdown { + padding: 0; + vertical-align: middle; + } + .select-year input { width: 50px; } @@ -59,6 +64,7 @@ } .month-prev, .month-next { + height: 49px; margin-top: 4px; cursor: pointer; background-color: transparent; diff --git a/sass/components/_modal.scss b/sass/components/_modal.scss index 834b0ae0f5..53e1df7081 100644 --- a/sass/components/_modal.scss +++ b/sass/components/_modal.scss @@ -1,101 +1,68 @@ +// use with dialog html element .modal { - --modal-footer-height: 56px; --modal-footer-divider-height: 1px; --modal-border-radius: 28px; --modal-padding: 24px; - - &:focus { - outline: none; - } + --modal-padding-bottom: 16px; @extend .z-depth-5; - - display: none; - position: fixed; - left: 0; - right: 0; - background-color: var(--md-sys-color-surface); + border: none; + outline: none; padding: 0; max-height: 70%; width: 55%; - margin: auto; - overflow-y: auto; - border-radius: var(--modal-border-radius); will-change: top, opacity; + // Dialog open + &[open] { + display: flex; + flex-direction: column; + } + + // Background + background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%); + @media #{$medium-and-down} { width: 80%; } - h1,h2,h3,h4 { - margin-top: 0; + // custom backdrop blur + &::backdrop { + backdrop-filter: blur(1px); } - .modal-content { + .modal-header { padding: var(--modal-padding); - overflow-y: hidden; + padding-bottom: var(--modal-padding-bottom); + flex-shrink: 0; } - - .modal-close { - cursor: pointer; + .modal-content { + padding: 0 var(--modal-padding); + overflow-y: auto; } - .modal-footer { border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius); - background-color: var(--md-sys-color-surface); - padding: 4px 6px; - height: var(--modal-footer-height); - width: 100%; + padding: var(--modal-padding); text-align: right; - - .btn, .btn-flat { - margin: 6px 0; - } + flex-shrink: 0; } -} -.modal-overlay { - position: fixed; - z-index: 999; - top: -25%; - left: 0; - bottom: 0; - right: 0; - height: 125%; - width: 100%; - background: #000; - display: none; - will-change: opacity; -} - -// Modal with fixed action footer -.modal.modal-fixed-footer { - padding: 0; - height: 70%; - - .modal-content { - position: absolute; - height: calc(100% - var(--modal-footer-height)); - max-height: 100%; - width: 100%; - overflow-y: auto; + .modal-close { + cursor: pointer; } - .modal-footer { - border-top: var(--modal-footer-divider-height) solid var(--md-sys-color-outline-variant); - position: absolute; - bottom: var(--modal-footer-divider-height); + // todo: remove maybe + h1,h2,h3,h4,h5,h6 { + margin: 0; } } // Modal Bottom Sheet Style .modal.bottom-sheet { - top: auto; - bottom: -100%; - margin: 0; - width: 100%; + margin-bottom: 0; max-height: 45%; - border-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; will-change: bottom, opacity; } diff --git a/sass/components/_tabs.scss b/sass/components/_tabs.scss index ec6d4e7fb6..a62890e595 100644 --- a/sass/components/_tabs.scss +++ b/sass/components/_tabs.scss @@ -44,8 +44,7 @@ position: relative; overflow-x: auto; - overflow-y: hidden; - height: 48px; + overflow-y: hidden; width: 100%; background-color: var(--md-sys-color-surface); margin: 0 auto; @@ -56,11 +55,21 @@ list-style-type: none; display: inline-block; text-align: center; - line-height: 48px; - height: 48px; + line-height: 48px; padding: 0; margin: 0; + i.material-icons { + position: relative; + top: 8px; + vertical-align: middle; + } + + span { + height: 24px; + line-height: 20px; + } + a { &.active { background-color: transparent; @@ -83,9 +92,11 @@ } color: var(--md-sys-color-on-surface-variant); - display: block; + display: flex; + flex-direction: column; width: 100%; height: 100%; + min-height: 48px; //needed for only-icons tabs padding: 0 24px; font-size: 14px; text-overflow: ellipsis; @@ -112,6 +123,21 @@ will-change: left, right; border-radius: 3px 3px 0 0; } + + &.tabs-horizontal .tab { + height: 48px; + + a { + display: block; + } + + i.material-icons { + padding: 0 4px; + position: relative; + top: -2px; + vertical-align: middle; + } + } } /* Fixed Sidenav hide on smaller */ diff --git a/sass/components/_timepicker.scss b/sass/components/_timepicker.scss index 23f7a6366c..adb2b4cc0c 100644 --- a/sass/components/_timepicker.scss +++ b/sass/components/_timepicker.scss @@ -17,77 +17,116 @@ /* Clock Digital Display */ .timepicker-digital-display { - width: 200px; + width: auto; flex: 1 auto; background-color: var(--md-sys-color-primary);; - padding: 10px; + padding: 2rem .67rem .67rem .67rem; font-weight: 300; } .timepicker-text-container { font-size: 4rem; - font-weight: bold; - text-align: center; + text-align: left; color: var(--font-on-primary-color-medium); font-weight: 400; position: relative; user-select: none; + padding: 1rem 1rem 1.5rem 1rem; input[type=text]{ height: 4rem; - color: rgba(255, 255, 255, 0.6); + color: var(--md-sys-color-secondary); border-bottom: 0px; font-size: 4rem; direction: ltr; } } +.timepicker-display-column { + display: inline-flex; +} + +.timepicker-input-hours-wrapper, +.timepicker-input-minutes-wrapper { + width: 6.9rem; + height: 5.2rem; +} + .timepicker-input-hours, .timepicker-input-minutes, .timepicker-span-am-pm div { cursor: pointer; } -input[type=text].timepicker-input-hours { - text-align: right; - width: 28%; - margin-right: 3px; +input[type=text].timepicker-input-hours, +input[type=text].timepicker-input-minutes { + height: 100%; + padding: .8rem; + border: 0; + text-align: center; } -input[type=text].timepicker-input-minutes { - width: 33%; - margin-left: 3px; +.timepicker-input-divider-wrapper { + width: 1.6rem; + text-align: center; } input[type=text].text-primary { - color: rgba(255, 255, 255, 1); + color: var(--md-sys-color-on-background); } .timepicker-display-am-pm { font-size: 1.3rem; position: absolute; + top: 1rem; right: 1rem; - bottom: 1rem; font-weight: 400; } +.timepicker-span-am-pm { + height: 5.2rem; + max-width: 3.5rem; +} + +.timepicker-modal .am-btn, +.timepicker-modal .pm-btn { + width: 3.6rem; + height: 50%; + padding-left: calc(var(--btn-padding) / 1.6); + padding-right: calc(var(--btn-padding) / 1.6); + line-height: 2rem; + vertical-align: middle; + text-align: center; + background-color: transparent; + border: 1px solid var(--md-sys-color-outline); +} + +.timepicker-modal .am-btn { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.timepicker-modal .pm-btn { + border-top: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; +} /* Analog Clock Display */ .timepicker-analog-display { flex: 2.5 auto; + padding: .67rem; background-color: var(--md-sys-color-surface); } .timepicker-plate { background-color: rgba(0, 0, 0, 0.09); border-radius: 50%; - width: 270px; - height: 270px; + width: 260px; + height: 260px; overflow: visible; position: relative; - margin: auto; - margin-top: 25px; - margin-bottom: 5px; + margin: 2rem 1.6rem 1.6rem 1.6rem; user-select: none; } @@ -184,24 +223,57 @@ input[type=text].text-primary { } /* Media Queries */ -@media #{$medium-and-up} { +@media #{$large-and-up} { .timepicker-modal { - max-width: 600px; + width: auto; + max-width: 620px; } .timepicker-container.modal-content { flex-direction: row; } + .timepicker-digital-display { + padding: .67rem; + } + .timepicker-text-container { - top: 32%; + top: 31%; + text-align: center; } .timepicker-display-am-pm { position: relative; + top: auto; right: auto; - bottom: auto; text-align: center; margin-top: 1.2rem; } + + .timepicker-span-am-pm { + max-width: unset; + } + + .timepicker-modal .am-btn, + .timepicker-modal .pm-btn { + width: auto; + padding-left: var(--btn-padding); + padding-right: var(--btn-padding); + border-radius: var(--btn-border-radius); + border: 1px solid var(--md-sys-color-outline); + line-height: inherit; + vertical-align: top; + text-align: inherit; + } + + .timepicker-modal .am-btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .timepicker-modal .pm-btn { + border-left: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } } diff --git a/sass/components/forms/_input-fields.scss b/sass/components/forms/_input-fields.scss index fdca236a1f..962479805b 100644 --- a/sass/components/forms/_input-fields.scss +++ b/sass/components/forms/_input-fields.scss @@ -17,45 +17,32 @@ 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 { +textarea.materialize-textarea { outline: none; color: var(--md-sys-color-on-background); - width: 100%; + width: 100%; font-size: $md_sys_typescale_body-large_size; //16px; // => 16 dp height: 56px; // 56dp } -/* Validation Sass Placeholders */ -%valid-input-style { - border-bottom: 1px solid $success-color; - box-shadow: 0 1px 0 0 $success-color; -} %invalid-input-style { border-bottom: 2px solid var(--md-sys-color-error); box-shadow: 0 1px 0 0 var(--md-sys-color-error); } -%hidden-text { - color: transparent; - user-select: none; - pointer-events: none; -} -/* -%custom-success-message { - content: attr(data-success); - color: $success-color; +%hidden-text > span { + display: none } %custom-error-message { content: attr(data-error); color: var(--md-sys-color-error); } -*/ .input-field { --input-color: var(--md-sys-color-primary); position: relative; clear: both; - + // Default input, textarea { @@ -71,7 +58,7 @@ textarea.materialize-textarea { border-bottom: 1px solid var(--md-sys-color-on-surface-variant); border-bottom-left-radius: 0; border-bottom-right-radius: 0; - + &:focus:not([readonly]) { border-bottom: 2px solid var(--input-color); padding-top: 20px + 1px; // add border-width @@ -99,6 +86,26 @@ textarea.materialize-textarea { &:disabled + label, &[readonly="readonly"] + label { color: rgba(var(--md_sys_color_on-surface), 0.38); } + + // Hide helper text on data message + &.invalid ~ .supporting-text[data-error] { + @extend %hidden-text; + } + + // Invalid Input Style + &.invalid { + @extend %invalid-input-style; + } + + // Custom Error message + &.invalid ~ .supporting-text:after { + @extend %custom-error-message; + } + + &.invalid ~ label, + &:focus.invalid ~ label { + color: var(--md-sys-color-error); + } } input::placeholder { @@ -150,7 +157,7 @@ textarea.materialize-textarea { .suffix { position: absolute; right: 12px; - top: 16px; + top: 16px; user-select: none; } @@ -200,7 +207,7 @@ textarea.materialize-textarea { color: rgba(var(--md_sys_color_on-surface), 0.38); border-color: rgba(var(--md_sys_color_on-surface), 0.12); } - + } } @@ -228,7 +235,7 @@ textarea.materialize-textarea { } /* Search Field */ -.searchbar { +.searchbar { .prefix { position: absolute; //left: 12px; @@ -317,4 +324,27 @@ textarea { margin: 5px 15px; } } -} \ No newline at end of file +} + +/* Datepicker date input fields */ +.datepicker-date-input { + position: relative; + text-indent: -9999px; + + &::after { + display: block; + position: absolute; + top: 1.10rem; + content: attr(data-date); + color: var(--input-color); + text-indent: 0; + } + + &:focus-visible { + text-indent: 0; + } + + &:focus-visible:after { + text-indent: -9999px; + } +} diff --git a/spec/helpers/helper.js b/spec/helpers/helper.js index 2959b39fc7..8832fd4937 100644 --- a/spec/helpers/helper.js +++ b/spec/helpers/helper.js @@ -121,11 +121,23 @@ const KEYMAP = { '105': '9' }; -function XloadHtml(html) { +function XloadHtml(html, options) { + options = options ? options : {}; + const defaultOptions = { insertionType: 'append' }; + options = { + ...defaultOptions, + ...options + }; + const div = document.createElement('div'); div.classList.add('please-delete-me'); div.innerHTML = html; - document.body.appendChild(div); + + if (options.insertionType === 'append') { + document.body.appendChild(div); + } else if (options.insertionType === 'prepend') { + document.body.prepend(div); + } } function XunloadFixtures() { diff --git a/spec/tests/carousel/carouselSpec.js b/spec/tests/carousel/carouselSpec.js index f430ab6f96..4e87226dfd 100644 --- a/spec/tests/carousel/carouselSpec.js +++ b/spec/tests/carousel/carouselSpec.js @@ -20,6 +20,10 @@ describe('Carousel', () => { afterEach(() => XunloadFixtures()); describe('carousel plugin', () => { + afterEach(() => { + M.Carousel.getInstance(document.querySelector('.carousel')).destroy(); + }); + it('No wrap next and prev should not overflow', (done) => { const noWrap = M.Carousel.init(document.querySelector('#slider-no-wrap'), { duration: 10, @@ -39,5 +43,19 @@ describe('Carousel', () => { }, 30); }, 50); }); + + it('should change index and focus its respective item on indicator click', (done) => { + const carousel = M.Carousel.init(document.querySelector('.carousel'), { + duration: 10, + indicators: true + }); + + document.querySelectorAll('.indicator-item')[1].click(); + setTimeout(() => { + expect(carousel.center).toEqual(1, 'carousel item was not visible after indicator interaction'); + done(); + }, 30); + }); + }); }); diff --git a/spec/tests/chips/chipsSpec.js b/spec/tests/chips/chipsSpec.js index 68db00185f..1b65ddc647 100644 --- a/spec/tests/chips/chipsSpec.js +++ b/spec/tests/chips/chipsSpec.js @@ -1,10 +1,12 @@ /* eslint-disable no-undef */ describe('Chips', () => { - const fixture = `
-
-
-
`; + const fixture = `
+
+
+
+
+
`; beforeEach(() => { XloadHtml(fixture); @@ -21,11 +23,29 @@ describe('Chips', () => { } ] }); - M.Chips.init(document.querySelector('.chips-placeholder'), { + M.Chips.init(document.querySelector('.chips.input-field'), { + allowUserInput: true + }); + M.Chips.init(document.querySelector('.chips-initial.input-field'), { + allowUserInput: true, + data: [ + { id: 12, text: 'Apple' }, + { id: 13, text: 'Microsoft' }, + { + id: 42, + text: 'Google', + image: + 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' + } + ] + }); + M.Chips.init(document.querySelector('.chips-placeholder.input-field'), { + allowUserInput: true, placeholder: 'Enter a tag', secondaryPlaceholder: '+Tag' }); - M.Chips.init(document.querySelector('.chips-autocomplete'), { + M.Chips.init(document.querySelector('.chips-autocomplete.input-field'), { + allowUserInput: true, autocompleteOptions: { data: [ { id: 12, text: 'Apple' }, @@ -38,20 +58,21 @@ describe('Chips', () => { afterEach(() => XunloadFixtures()); describe('chips plugin', () => { - let chips, input; + let chips, chipsUserInput, input; it('should work with multiple initializations', () => { chips = document.querySelector('.chips'); M.Chips.init(chips); M.Chips.init(chips); M.Chips.init(chips); - M.Chips.init(chips); - input = chips.querySelectorAll('input'); + chipsUserInput = document.querySelector('.chips.input-field'); + M.Chips.init(chips, {allowUserInput: true}); + input = chipsUserInput.querySelectorAll('input'); expect(input.length).toEqual(1, 'Should dynamically generate chips structure.'); }); it('should be able to add chip', (done) => { - chips = document.querySelector('.chips'); + chips = document.querySelector('.chips.input-field'); input = chips.querySelector('input'); input.value = 'one'; keydown(input, 13); @@ -68,11 +89,12 @@ describe('Chips', () => { }); it('should be able to delete chip', (done) => { - chips = document.querySelector('.chips.chips-initial'); - input = chips.querySelector('input'); + chips = document.querySelector('.chips.chips-initial.input-field'); let numChips = chips.querySelectorAll('.chip').length; expect(numChips).toEqual(3, '3 initial chips should have been added'); - click(chips.querySelector('.chip .close')); + let chipCloseButton = chips.querySelectorAll('.chip .close'); + expect(chipCloseButton.length).toEqual(3, 'expected all chips to have close button'); + click(chipCloseButton[0]); setTimeout(() => { numChips = chips.querySelectorAll('.chip').length; expect(numChips).toEqual(2, 'one chip should have been deleted'); @@ -81,7 +103,7 @@ describe('Chips', () => { }); it('should have working callbacks', (done) => { - chips = document.querySelector('.chips'); + chips = document.querySelector('.chips.input-field'); let chipWasAdded = false; let chipAddedElem = null; let chipSelect = false; @@ -90,6 +112,7 @@ describe('Chips', () => { let chipDeleted = null; M.Chips.init(chips, { + allowUserInput: true, data: [{ id: 'One' }, { id: 'Two' }, { id: 'Three' }], onChipAdd: (chipsEl, chipEl) => { chipAddedElem = chipEl; diff --git a/spec/tests/datepicker/datepickerSpec.js b/spec/tests/datepicker/datepickerSpec.js index d2cc8f613d..815319ace8 100644 --- a/spec/tests/datepicker/datepickerSpec.js +++ b/spec/tests/datepicker/datepickerSpec.js @@ -7,49 +7,29 @@ describe('Datepicker Plugin', () => {
`; - beforeEach(() => { - XloadHtml(fixture); - M.Datepicker.init(document.querySelectorAll('.datepicker')); - }); + beforeEach(() => XloadHtml(fixture)); afterEach(() => XunloadFixtures()); describe('Datepicker', () => { - it('should open and close programmatically', (done) => { - const input = document.querySelector('#datepickerInput'); - const modal = document.querySelector('.datepicker-modal'); - expect(modal).toBeHidden('Should be hidden before datepicker input is focused.'); - M.Datepicker.getInstance(input).open(); - - setTimeout(() => { - expect(modal).toHaveClass( - 'open', - 'Datepicker modal should be shown after datepicker input is focused.' - ); - M.Datepicker.getInstance(input).close(); - setTimeout(() => { - expect(modal).toNotHaveClass( - 'open', - 'Datepicker modal should be hidden after datepicker input is focused.' - ); - done(); - }, 400); - }, 400); + afterEach(() => { + M.Datepicker.getInstance(document.querySelector('.datepicker')).destroy(); }); it('can have a string format', (done) => { const input = document.querySelector('#datepickerInput'); const today = new Date(); - M.Datepicker.init(input, { format: 'mm/dd/yyyy' }).open(); - M.Datepicker.getInstance(input).open(); + M.Datepicker.init(input, { format: 'mm/dd/yyyy' }); + const datepicker = M.Datepicker.getInstance(input); + //datepicker.open(); setTimeout(() => { const day1 = document.querySelector('.datepicker-modal button[data-day="1"]'); day1.click(); + document.querySelector('.datepicker-done').click(); setTimeout(() => { const year = today.getFullYear(); - let month = today.getMonth() + 1; - month = month < 10 ? `0${month}` : month; - const value = M.Datepicker.getInstance(input).toString(); - expect(value).toEqual(`${month}/01/${year}`); + const month = today.getMonth() + 1; + const value = datepicker.toString(); + expect(value).toEqual(`${month < 10 ? `0${month}` : month}/01/${year}`); done(); }, 400); }, 400); @@ -58,20 +38,90 @@ describe('Datepicker Plugin', () => { it('can have a format function', (done) => { const input = document.querySelector('#datepickerInput'); const today = new Date(); - const formatFn = (date) => `${date.getFullYear() - 100}-${date.getMonth() + 1}-99`; - M.Datepicker.init(input, { format: formatFn }).open(); - M.Datepicker.getInstance(input).open(); + const formatFn = `${today.getFullYear() - 100}-${today.getMonth() + 1}-99`; + M.Datepicker.init(input, { format: formatFn }); + const datepicker = M.Datepicker.getInstance(input); + //datepicker.open(); setTimeout(() => { const day1 = document.querySelector('.datepicker-modal button[data-day="1"]'); day1.click(); + document.querySelector('.datepicker-done').click(); setTimeout(() => { const year = today.getFullYear() - 100; const month = today.getMonth() + 1; - const value = M.Datepicker.getInstance(input).toString(); - expect(value).toEqual(`${year}-${month}-99`); + expect(datepicker.toString()).toEqual(`${year}-${month < 10 ? `0${month}` : month}-99`); done(); }, 400); }, 400); }); + + it('can change the calendar modal selected date by input', (done) => { + const input = document.querySelector('#datepickerInput'); + M.Datepicker.init(input, { format: 'mm/dd/yyyy' }); + const today = new Date(); + const month = today.getMonth(); + const year = today.getFullYear() - 44; + const day = 11; + input.value = `${month < 10 ? `0${month}` : month}/${day}/${year}`; + input.dispatchEvent(new KeyboardEvent('change', { bubbles: true, cancelable: true })); + keydown(input, 13); + setTimeout(() => { + // expect(document.querySelector('.datepicker-modal')).toHaveClass( + // 'open', + // 'modal should be shown after input is submitted.' + // ); + const selectMonthElem = document.querySelector('.datepicker-select.orig-select-month'); + const selectYearElem = document.querySelector('.datepicker-select.orig-select-year'); + const selectedDayElem = document.querySelector(`.datepicker-row td[data-day="${day}"]`); + expect( + selectMonthElem.querySelector('option[selected="selected"]').value === + (month - 1).toString() + ).toEqual( + true, + `selected month should be ${month}, given value ${selectMonthElem.querySelector('option[selected="selected"]').value}` + ); + expect( + selectYearElem.querySelector('option[selected="selected"]').value === year.toString() + ).toEqual( + true, + `selected year should be ${year}, given value ${selectYearElem.querySelector('option[selected="selected"]').value}` + ); + expect(selectedDayElem.classList.contains('is-selected')).toEqual( + true, + `selected day should be ${day}, given value ${selectedDayElem.classList}` + ); + done(); + }, 10); + }); + + 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 }); + setTimeout(() => { + expect(document.querySelector('.datepicker-end-date')).toExist( + 'end date input should exist' + ); + done(); + }, 10); + }); + + 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 }); + const datepicker = M.Datepicker.getInstance(input); + datepicker.open(); + setTimeout(() => { + for (let i = 1; i < 4; i++) { + setTimeout(() => { + document.querySelector(`.datepicker-modal button[data-day="${i}"]`).click(); + }, i * 10); + } + setTimeout(() => { + document.querySelector('.datepicker-done').click(); + expect(document.querySelectorAll('.datepicker').length === 3).toEqual(true); + done(); + }, 40); + }, 10); + }); }); }); diff --git a/spec/tests/modal/modalSpec.js b/spec/tests/modal/modalSpec.js index c374e0a172..ef38b49c3c 100644 --- a/spec/tests/modal/modalSpec.js +++ b/spec/tests/modal/modalSpec.js @@ -1,156 +1,83 @@ -/* eslint-disable no-undef */ - describe('Modal:', () => { - let trigger1, modal1; - - const fixture = ` -Modal - + const fixture = `Modal + - -